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