filifa
/
dairydemon.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: filifa:8508b75bb2c455222e30648f3ed345b4077fa280
Branches Tags
filifa:main
...
compare: filifa:7fdb9140c7672e05ab72c70a76247382b88370f2
Branches Tags
filifa:main

4 Commits
8508b75bb2 ... 7fdb9140c7

Author SHA1 Message Date
filifa 7fdb9140c7 add some more explanatory comments 2024-08-04 21:17:39 -05:00
filifa 7061f48bc5 add org comments 2024-08-04 20:55:11 -05:00
filifa 77c55d815f give unique title 2024-08-04 20:40:26 -05:00
filifa 1b9c8e45e2 extend header width when zoomed in 2024-08-04 20:11:17 -05:00
2 changed files with 11 additions and 1 deletions
Show Stats Expand all files Collapse all files

2
about.html
View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
<script src="elements.js" type="text/javascript" defer></script>
<title>Dairy Demon</title>
<title>About</title>
</head>
<body>

10
styles.css
View File

@ -1,3 +1,4 @@
/* general styling */
html {
font-family: monospace;
font-size: large;
@ -15,9 +16,11 @@ aside {
box-shadow: 2px 2px 2px;
}
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
@ -69,6 +72,7 @@ footer ul li + li::before {
content: " | ";
}
/* main content */
aside {
padding: 10px;
}
@ -77,6 +81,8 @@ article {
padding: 20px;
text-align: justify;
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;
}
@ -109,12 +115,15 @@ ol ol ol {
}
@media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */
body {
display: grid;
place-content: center;
}
main {
/* min-width is set due to zoom issues */
min-width: 100%;
display: flex;
align-items: start;
@ -127,6 +136,7 @@ ol ol ol {
}
article {
/* width is set for the about page */
width: 80ch;
max-width: 80ch;
flex: auto;