Compare commits
No commits in common. "7fdb9140c7672e05ab72c70a76247382b88370f2" and "8508b75bb2c455222e30648f3ed345b4077fa280" have entirely different histories.
7fdb9140c7
...
8508b75bb2
|
@ -6,7 +6,7 @@
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
<link rel="icon" href="favicon.ico" />
|
<link rel="icon" href="favicon.ico" />
|
||||||
<script src="elements.js" type="text/javascript" defer></script>
|
<script src="elements.js" type="text/javascript" defer></script>
|
||||||
<title>About</title>
|
<title>Dairy Demon</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
10
styles.css
10
styles.css
|
@ -1,4 +1,3 @@
|
||||||
/* general styling */
|
|
||||||
html {
|
html {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
|
@ -16,11 +15,9 @@ aside {
|
||||||
box-shadow: 2px 2px 2px;
|
box-shadow: 2px 2px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* header and footer */
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: min-content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
@ -72,7 +69,6 @@ footer ul li + li::before {
|
||||||
content: " | ";
|
content: " | ";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* main content */
|
|
||||||
aside {
|
aside {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
@ -81,8 +77,6 @@ article {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
/* about page is janky without this; see
|
|
||||||
* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#clearing_boxes_wrapped_around_a_float */
|
|
||||||
display: flow-root;
|
display: flow-root;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,15 +109,12 @@ ol ol ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 80ch) {
|
@media screen and (min-width: 80ch) {
|
||||||
/* to avoid zoom issues, grid layout is only used when mid-width is
|
|
||||||
* large enough */
|
|
||||||
body {
|
body {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-content: center;
|
place-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
/* min-width is set due to zoom issues */
|
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
|
@ -136,7 +127,6 @@ ol ol ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
/* width is set for the about page */
|
|
||||||
width: 80ch;
|
width: 80ch;
|
||||||
max-width: 80ch;
|
max-width: 80ch;
|
||||||
flex: auto;
|
flex: auto;
|
||||||
|
|
Loading…
Reference in New Issue