2023-02-24 11:19:28 +00:00
: root {
2023-02-24 19:57:27 +00:00
--fg-color : # 111 ;
2023-02-24 11:19:28 +00:00
--bg-color : # f2f4f4 ;
--link-color : # 333 ;
2023-02-24 19:52:32 +00:00
--link-color-gemini : # 4b139c ;
--link-color-gopher : # 006868 ;
2023-02-24 18:14:56 +00:00
--link-color-html : # 800404 ;
2023-02-24 19:52:32 +00:00
--link-weight : bold ;
2023-02-24 19:57:27 +00:00
--header-color : # 000 ;
--pre-color : # 333 ;
2023-02-24 11:19:28 +00:00
--wobbly-toolbar-bg : # ccc ;
2023-02-24 11:40:09 +00:00
--wobbly-help-bg : # e2e4e4 ;
--wobbly-help-border : # 333 ;
2023-02-24 11:19:28 +00:00
}
@ media ( prefers-color-scheme : dark ) {
2023-02-24 11:20:33 +00:00
: root {
2023-02-24 11:40:09 +00:00
--fg-color : # 32c864 ;
2023-02-24 11:20:33 +00:00
--bg-color : # 010 ;
2023-02-24 11:40:09 +00:00
--link-color : # 3ee77b ;
2023-02-24 19:52:32 +00:00
--link-color-gemini : # b785ff ;
--link-color-gopher : # 31e8e8 ;
2023-02-24 18:14:56 +00:00
--link-color-html : # f23f3f ;
2023-02-24 19:52:32 +00:00
--link-weight : normal ;
2023-02-24 19:57:27 +00:00
--header-color : # fff ;
--pre-color : # AAA ;
2023-02-24 11:40:09 +00:00
--wobbly-toolbar-bg : # 434443 ;
--wobbly-help-bg : # 232423 ;
--wobbly-help-border : # 32c864 ;
2023-02-24 11:20:33 +00:00
}
2023-02-24 11:19:28 +00:00
}
2023-02-24 11:40:09 +00:00
* , * * {
box-sizing : border-box ;
}
2023-02-24 10:39:09 +00:00
html {
margin : 0 ;
padding : 0 ;
}
body {
2023-02-24 11:19:28 +00:00
color : var ( --fg-color ) ;
background-color : var ( --bg-color ) ;
2023-02-24 11:13:53 +00:00
padding : 0 0 5em ;
2023-02-24 10:45:09 +00:00
font-family : Frutiger , "Frutiger Linotype" , Univers , Calibri , "Gill Sans" , "Gill Sans MT" , "Myriad Pro" , Myriad , "DejaVu Sans Condensed" , "Liberation Sans" , "Nimbus Sans L" , Tahoma , Geneva , "Helvetica Neue" , Helvetica , Arial , sans-serif ;
2023-02-24 10:39:09 +00:00
}
2023-02-24 10:51:26 +00:00
pre {
2023-02-24 19:57:27 +00:00
color : var ( --pre-color ) ;
2023-02-24 10:51:26 +00:00
font-family : Consolas , "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco , "Courier New" , Courier , monospace ;
}
2023-02-24 10:39:09 +00:00
a ,
a : visited ,
a : hover ,
a : active {
2023-02-24 11:19:28 +00:00
color : var ( --link-color ) ;
font-weight : var ( --link-weight ) ;
2023-02-24 10:39:09 +00:00
text-decoration : none ;
}
a : hover {
text-decoration : underline ;
}
2023-02-24 18:14:56 +00:00
a [ href * = "gemini://" ] {
color : var ( --link-color-gemini ) ;
}
a [ href * = "https://" ] {
color : var ( --link-color-html ) ;
}
2023-02-24 19:52:32 +00:00
a [ href * = "gopher://" ] {
color : var ( --link-color-gopher ) ;
}
2023-02-24 10:39:09 +00:00
ol {
padding : 0 ;
line-height : 0 . 5em ;
}
@ media screen and ( min-width : 700px ) {
body , html {
font-size : 18px ;
}
}
@ media screen and ( min-width : 900px ) {
body , html {
font-size : 24px ;
}
}
2023-02-24 10:51:26 +00:00
h1 , h2 , h3 , h4 , h5 {
2023-02-24 19:57:27 +00:00
color : var ( --header-color ) ;
2023-02-24 10:51:26 +00:00
margin : 0 0 0 . 5em 0 ;
}
2023-02-24 11:13:53 +00:00
# wobbly-toolbar {
2023-02-24 11:19:28 +00:00
background-color : var ( --wobbly-toolbar-bg ) ;
2023-02-24 11:13:53 +00:00
width : 100 % ;
position : fixed ;
top : 0 ;
2023-02-24 11:40:09 +00:00
left : 0 ;
2023-02-24 11:13:53 +00:00
}
# wobbly-tools {
display : flex ;
max-width : 60em ;
2023-02-24 11:40:09 +00:00
padding : 0 . 2em 0 . 5em ;
2023-02-24 11:13:53 +00:00
margin : auto ;
}
2023-02-24 11:40:09 +00:00
# wobbly-tools > * : not ( : last-child ) {
margin-right : 0 . 25em ;
}
2023-02-24 11:13:53 +00:00
# wobbly-tools input {
flex-basis : 100 % ;
2023-02-24 11:40:09 +00:00
min-width : 0 ;
padding : 0 0 . 5em ;
position : relative ;
2023-02-24 11:13:53 +00:00
}
# wobbly-help {
display : none ;
2023-02-24 11:40:09 +00:00
border-bottom : 1px solid var ( --wobbly-help-border ) ;
background-color : var ( --wobbly-help-bg ) ;
2023-02-24 11:13:53 +00:00
}
# wobbly-help-text {
max-width : 45em ;
margin : auto ;
padding : 1 . 5em 1em 0 . 5em ;
}
# wobbly-window {
max-width : 45em ;
margin : auto ;
padding : 2em 1em 5em ;
}
2023-02-27 12:55:19 +00:00
# wobbly-spinner {
display : none ;
position : fixed ;
margin : 0 ;
padding : 0 ;
2023-02-27 13:11:37 +00:00
top : 32px ;
left : 0 ;
2023-02-27 12:55:19 +00:00
width : 100vw ;
2023-02-27 13:11:37 +00:00
height : calc ( 100vh - 32px ) ;
2023-02-27 12:55:19 +00:00
justify-content : center ;
align-items : center ;
overflow : hidden ;
z-index : 5 ;
background : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
2023-02-27 13:11:37 +00:00
backdrop-filter : blur ( 1px ) ;
2023-02-27 12:55:19 +00:00
}
# wobbly-spinner . active {
2023-02-27 13:11:37 +00:00
display : flex ;
2023-02-27 12:55:19 +00:00
}
. lds-spinner {
color : official ;
display : inline-block ;
position : relative ;
width : 80px ;
height : 80px ;
}
. lds-spinner div {
transform-origin : 40px 40px ;
animation : lds-spinner 1 . 2s linear infinite ;
}
. lds-spinner div : after {
content : " " ;
display : block ;
position : absolute ;
top : 3px ;
left : 37px ;
width : 6px ;
height : 18px ;
border-radius : 20 % ;
background : # fff ;
}
. lds-spinner div : nth-child ( 1 ) {
transform : rotate ( 0deg ) ;
animation-delay : -1 . 1s ;
}
. lds-spinner div : nth-child ( 2 ) {
transform : rotate ( 30deg ) ;
animation-delay : -1s ;
}
. lds-spinner div : nth-child ( 3 ) {
transform : rotate ( 60deg ) ;
animation-delay : -0 . 9s ;
}
. lds-spinner div : nth-child ( 4 ) {
transform : rotate ( 90deg ) ;
animation-delay : -0 . 8s ;
}
. lds-spinner div : nth-child ( 5 ) {
transform : rotate ( 120deg ) ;
animation-delay : -0 . 7s ;
}
. lds-spinner div : nth-child ( 6 ) {
transform : rotate ( 150deg ) ;
animation-delay : -0 . 6s ;
}
. lds-spinner div : nth-child ( 7 ) {
transform : rotate ( 180deg ) ;
animation-delay : -0 . 5s ;
}
. lds-spinner div : nth-child ( 8 ) {
transform : rotate ( 210deg ) ;
animation-delay : -0 . 4s ;
}
. lds-spinner div : nth-child ( 9 ) {
transform : rotate ( 240deg ) ;
animation-delay : -0 . 3s ;
}
. lds-spinner div : nth-child ( 10 ) {
transform : rotate ( 270deg ) ;
animation-delay : -0 . 2s ;
}
. lds-spinner div : nth-child ( 11 ) {
transform : rotate ( 300deg ) ;
animation-delay : -0 . 1s ;
}
. lds-spinner div : nth-child ( 12 ) {
transform : rotate ( 330deg ) ;
animation-delay : 0s ;
}
@ keyframes lds-spinner {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}