add some more explanatory comments
This commit is contained in:
parent
7061f48bc5
commit
7fdb9140c7
|
@ -81,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,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;
|
||||||
|
@ -131,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;
|
||||||
|
|
Loading…
Reference in New Issue