@ -1,75 +1,110 @@
: root {
--color-background : # f9f9f9 ;
--color-background-attention : # ffffff ;
--color-text : # 000000 ;
--color-text-inverted : # ffffff ;
--color-text-subdued : # 4f4e4e ;
--color-text-attention : teal ;
--color-text-warning : rgb ( 218 , 13 , 13 ) ;
--invert : 0 ;
}
@ media ( prefers-color-scheme : dark ) {
: root {
--color-background : # 222222 ;
--color-background-attention : # 000000 ;
--color-text : # f9f9f9 ;
--color-text-inverted : # ffffff ;
--color-text-subdued : # f1f1f1 ;
--color-text-warning : rgb ( 218 , 13 , 13 ) ;
--invert : 1 ;
}
}
* {
box-sizing : border-box ;
}
html , body {
/* background-color: rgb(248, 249, 236); */
background-color : # f9f9f9ff ;
color : var ( --color-text ) ;
background : var ( --color-background ) ;
font-family : sans-serif ;
margin : 0 ;
padding : 0 ;
min-height : 100 % ;
margin : 0 ;
}
. wrapper {
max-width : 900px ;
margin-left : 1em ;
margin-right : 1em ;
html {
height : 100 % ;
}
. header {
margin-top : 1em ;
margin-left : 0 . 5em ;
margin-right : 0 . 5em ;
padding-bottom : . 7em ;
border-bottom : 2px solid black ;
body {
padding : . 5rem ;
height : 100 % ;
display : grid ;
grid-template :
"header" 7rem
"content" 1fr
"footer" 2rem ;
}
. contents {
margin-bottom : 2em ;
padding : . 7em 0 ;
header {
grid-area : header ;
border-bottom: 1px solid var ( --color-text-subdued ) ;
}
. footer {
position : fixed ;
bottom : 0 ;
left : 0 . 5em ;
right : 0 . 5em ;
box-sizing : border-box ;
border-top : 1px solid black ;
height : 2em ;
padding : 0 . 2em ;
background-color : # f9f9f9ff ;
}
header . logoContainer {
display : inline-block ;
position : relative ;
margin : 1rem 0 ;
}
header . logoContainer . logo {
height : 5rem ;
filter : invert ( var ( --invert ) ) ;
}
header . logoContainer . siteTag {
position : absolute ;
right : 0 ;
bottom : 0 ;
color : var ( --color-text-attention ) ;
font-size : 1 . 3em ;
}
header . logoContainer . betaTag {
width : 1px ; /* Out-of-box alignment hack */
position : absolute ;
right : - . 3rem ;
bottom : 0 ;
font-style : italic ;
. footer . wrapper {
margin-left : calc ( 1em - 0 . 5em ) ;
}
color : var ( --color-text-warning ) ;
font-size : 1 . 3rem ;
}
. logoContainer {
display : inline-block ;
position : relative ;
main {
grid-area : content ;
margin-bottom: 2em ;
}
. logoContainer . logo {
height : 5em ;
}
main div . search input { width : 100 % ; }
. logoContainer . siteTag {
position : absolute ;
right : 0 ;
bottom : 0 ;
footer {
grid-area : footer ;
line-height : 2rem ;
border-top : 1px solid var ( --color-text-subdued ) ;
}
color : teal ;
font-size : 1 . 3em ;
}
main a , footer a {
color : var ( --color-text-attention ) ;
}
. logoContainer . betaTag {
width : 1px ; /* Out-of-box alignment hack */
position : absolute ;
right : - . 3em ;
bottom : 0 ;
font-style : italic ;
main a : hover , footer a : hover { text-decoration : none ; }
color : rgb ( 218 , 13 , 13 ) ;
font-size : 1 . 3 em;
}
article {
line-height : 1 . 25rem ;
}
. counter {
margin-bottom : . 5em ;
@ -78,11 +113,25 @@ html, body {
text-align : right ;
}
. staticContent {
margin : 0 2em ;
max-width : 900px ;
}
. linkSpacer {
margin : 0 . 5em ;
}
@ media only screen and ( max-width : 1000px ) {
body {
width : 100 % ;
}
}
@ media only screen and ( min-width : 1000px ) {
body {
width : 70 % ;
}
}
@ media only screen and ( min-width : 1400px ) {
body {
width : 60rem ;
}
}