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="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>Dairy Demon</title> <title>About</title>
</head> </head>
<body> <body>

10
styles.css
View File

@ -1,3 +1,4 @@
/* general styling */
html { html {
font-family: monospace; font-family: monospace;
font-size: large; font-size: large;
@ -15,9 +16,11 @@ 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 {
@ -69,6 +72,7 @@ footer ul li + li::before {
content: " | "; content: " | ";
} }
/* main content */
aside { aside {
padding: 10px; padding: 10px;
} }
@ -77,6 +81,8 @@ 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;
} }
@ -109,12 +115,15 @@ 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;
@ -127,6 +136,7 @@ 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;