@ -3,16 +3,13 @@
section {
min-height : 100vh ;
width : 100vw ;
padding : 0 ! important ;
}
padding : 0 ! important ; }
* {
line-height : inherit ;
}
line-height : inherit ; }
input {
font-size : inherit ;
}
font-size : inherit ; }
/* config */
: root {
@ -21,39 +18,29 @@ input {
--secondary : # bbd6ec ;
--secondary-dark : # 3f5d75 ;
--secondary-light : # eaf2f9 ;
--margin : 0 . 1 ;
}
--margin : 0 . 1 ; }
: root : lang ( de ) {
--opening-double-quote : "»" ;
--closing-double-quote : "«" ;
}
--opening-double-quote : '»' ;
--closing-double-quote : '«' ; }
: root : lang ( en ) {
--opening-double-quote : "“" ;
--closing-double-quote : "”" ;
}
--opening-double-quote : '“' ;
--closing-double-quote : '”' ; }
/* basic layout */
: root {
--square : 100vw ;
overflow : hidden ;
}
overflow : hidden ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
: root {
--square : 50vw ;
}
}
--square : 50vw ; } }
@ media ( min-aspect-ratio : 2 / 1 ) {
: root {
--square : 100vh ;
}
}
--square : 100vh ; } }
body {
font-size : calc ( 0 . 035 * var ( --square ) ) ;
}
font-size : calc ( 0 . 035 * var ( --square ) ) ; }
body article {
position : relative ;
}
position : relative ; }
body . layout-content-and-preview ,
body . layout-content-only ,
body . layout-preview-only ,
@ -63,83 +50,68 @@ body .layout-wide-content {
max-height : 100vh ;
min-width : 100vw ;
max-width : 100vw ;
overflow : auto ;
}
overflow : auto ; }
body . layout-content-and-preview {
grid-template-rows : var ( --square ) auto ;
grid-template-columns : auto ;
grid-template-areas : "content" "preview" ;
background : linear-gradient ( to bottom , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) var ( --square ) ) ;
}
background : linear-gradient ( to bottom , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) var ( --square ) ) ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
body . layout-content-and-preview {
grid-template-rows : auto var ( --square ) auto ;
grid-template-columns : var ( --square ) auto ;
grid-template-areas : " . preview" "content preview" " . preview" ;
background : linear-gradient ( to right , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) 100 % ) ;
}
}
background : linear-gradient ( to right , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) 100 % ) ; } }
@ media ( min-aspect-ratio : 2 / 1 ) {
body . layout-content-and-preview {
grid-template-rows : var ( --square ) ;
grid-template-columns : var ( --square ) auto ;
grid-template-areas : "content preview" ;
}
}
grid-template-areas : "content preview" ; } }
body . layout-content-only {
grid-template-rows : var ( --square ) auto ;
grid-template-columns : var ( --square ) ;
grid-template-areas : "content" " . " ;
background : linear-gradient ( to bottom , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) 100 % ) ;
}
background : linear-gradient ( to bottom , white 0 % , white var ( --square ) , var ( --secondary ) var ( --square ) , var ( --secondary ) 100 % ) ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
body . layout-content-only {
grid-template-rows : auto var ( --square ) auto ;
grid-template-columns : auto var ( --square ) auto ;
grid-template-areas : ". . ." ". content ." ". . ." ;
background : linear-gradient ( to right , var ( --secondary ) 0 % , var ( --secondary ) calc ( ( 100 % - var ( --square ) ) / 2 ) , white calc ( ( 100 % - var ( --square ) ) / 2 ) , white calc ( 100 % - ( 100 % - var ( --square ) ) / 2 ) , var ( --secondary ) calc ( 100 % - ( 100 % - var ( --square ) ) / 2 ) , var ( --secondary ) 100 % ) ;
}
}
background : linear-gradient ( to right , var ( --secondary ) 0 % , var ( --secondary ) calc ( ( 100 % - var ( --square ) ) / 2 ) , white calc ( ( 100 % - var ( --square ) ) / 2 ) , white calc ( 100 % - ( 100 % - var ( --square ) ) / 2 ) , var ( --secondary ) calc ( 100 % - ( 100 % - var ( --square ) ) / 2 ) , var ( --secondary ) 100 % ) ; } }
body . layout-preview-only {
grid-template-rows : auto ;
grid-template-columns : auto ;
grid-template-areas : "preview" ;
background : var ( --secondary ) ;
}
background : var ( --secondary ) ; }
body . layout-wide-content {
background : white ;
grid-template-rows : min-content auto ;
grid-template-columns : var ( --square ) ;
grid-template-areas : "content" " . " ;
}
grid-template-areas : "content" " . " ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
body . layout-wide-content {
grid-template-rows : auto var ( --square ) auto ;
grid-template-columns : calc ( 2 * var ( --square ) ) ;
grid-template-areas : " . " "content" " . " ;
}
}
grid-template-areas : " . " "content" " . " ; } }
@ media ( min-aspect-ratio : 2 / 1 ) {
body . layout-wide-content {
grid-template-rows : auto var ( --square ) auto ;
grid-template-columns : auto calc ( 2 * var ( --square ) ) auto ;
grid-template-areas : ". . ." ". content ." ". . ." ;
background : linear-gradient ( to right , var ( --secondary ) 0 % , var ( --secondary ) calc ( ( 100 % - 2 * var ( --square ) ) / 2 ) , white calc ( ( 100 % - 2 * var ( --square ) ) / 2 ) , white calc ( 100 % - ( 100 % - 2 * var ( --square ) ) / 2 ) , var ( --secondary ) calc ( 100 % - ( 100 % - 2 * var ( --square ) ) / 2 ) , var ( --secondary ) 100 % ) ;
}
}
background : linear-gradient ( to right , var ( --secondary ) 0 % , var ( --secondary ) calc ( ( 100 % - 2 * var ( --square ) ) / 2 ) , white calc ( ( 100 % - 2 * var ( --square ) ) / 2 ) , white calc ( 100 % - ( 100 % - 2 * var ( --square ) ) / 2 ) , var ( --secondary ) calc ( 100 % - ( 100 % - 2 * var ( --square ) ) / 2 ) , var ( --secondary ) 100 % ) ; } }
body . layout-content {
background : white ;
grid-area : content ;
position : relative ;
}
position : relative ; }
body . layout-content . chapter-number {
color : lightgray ; }
body . layout-content . titlepage {
display : flex ;
flex-direction : column ;
justify-content : flex-end ;
padding-bottom : calc ( var ( --margin ) * var ( --square ) + 0 . 5 * 3em ) ;
}
padding-bottom : calc ( var ( --margin ) * var ( --square ) + 0 . 5 * 3em ) ; }
body . layout-content . titlepage :: before {
content : "" ;
content : '' ;
position : absolute ;
top : calc ( var ( --margin ) * var ( --square ) ) ;
right : calc ( var ( --margin ) * var ( --square ) ) ;
@ -147,8 +119,7 @@ body .layout-content.titlepage::before {
height : calc ( . 3 * var ( --square ) ) ;
background-image : url ( . . / images / logo-fachschaft . jpg ) ;
background-repeat : no-repeat ;
background-size : contain ;
}
background-size : contain ; }
body . layout-preview {
grid-area : preview ;
display : flex ;
@ -156,11 +127,9 @@ body .layout-preview {
align-items : center ;
justify-content : center ;
background : var ( --secondary ) ;
position : relative ;
}
position : relative ; }
body . layout-preview figure {
display : contents ;
}
display : contents ; }
body . layout-preview img {
width : auto ;
height : auto ;
@ -170,29 +139,23 @@ body .layout-preview img {
object-fit : cover ;
margin : calc ( . 05 * var ( --square ) ) ;
background-color : white ;
box-sizing : border-box ;
}
box-sizing : border-box ; }
body . layout-preview img . thin-padding {
padding : 0 . 5em ;
}
padding : . 5em ; }
body . layout-preview img . large {
width : 60 % ;
max-width : 100 % ;
max-height : 100 % ;
box-sizing : border-box ;
}
box-sizing : border-box ; }
body . layout-preview img [ src $ = "-crop.svg" ] {
padding : calc ( var ( --margin ) * var ( --square ) ) ;
object-fit : contain ;
width : calc ( 0 . 9 * var ( --square ) ) ;
}
width : calc ( 0 . 9 * var ( --square ) ) ; }
body . layout-preview img [ src $ = "-crop.svg" ] . thin-padding {
padding : calc ( . 35 * var ( --margin ) * var ( --square ) ) ;
}
padding : calc ( . 35 * var ( --margin ) * var ( --square ) ) ; }
body . layout-preview img [ src $ = "-orig.svg" ] {
background : white ;
object-fit : contain ;
}
object-fit : contain ; }
body . layout-preview figcaption {
position : absolute ;
background : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
@ -200,9 +163,8 @@ body .layout-preview figcaption {
width : 100 % ;
text-align : center ;
color : white ;
padding : 0 . 5em ;
box-sizing : border-box ;
}
padding : . 5em ;
box-sizing : border-box ; }
body . layout-two-columns {
display : grid ;
min-height : 100vh ;
@ -213,34 +175,26 @@ body .layout-two-columns {
grid-template-rows : auto auto auto 1fr ;
grid-template-columns : var ( --square ) ;
grid-template-areas : "title" "column1" "column2" "." ;
background : var ( --secondary ) ;
}
background : var ( --secondary ) ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
body . layout-two-columns {
grid-template-rows : auto calc ( 0 . 18 * var ( --square ) ) calc ( 0 . 82 * var ( --square ) ) auto ;
grid-template-columns : var ( --square ) var ( --square ) ;
grid-template-areas : " . . " " title title " "column1 column2" " . . " ;
}
}
grid-template-areas : " . . " " title title " "column1 column2" " . . " ; } }
@ media ( min-aspect-ratio : 2 / 1 ) {
body . layout-two-columns {
grid-template-rows : calc ( 0 . 18 * var ( --square ) ) calc ( 0 . 82 * var ( --square ) ) ;
grid-template-columns : auto var ( --square ) var ( --square ) auto ;
grid-template-areas : ". title title ." ". column1 column2 ." ;
}
}
grid-template-areas : ". title title ." ". column1 column2 ." ; } }
body . layout-two-columns . layout-title {
grid-area : title ;
background : var ( --secondary ) ;
}
background : var ( --secondary ) ; }
body . layout-two-columns . layout-column-one {
grid-area : column1 ;
background : white ;
}
background : white ; }
body . layout-two-columns . layout-column-two {
grid-area : column2 ;
background : white ;
}
background : white ; }
body . layout-two-previews {
display : grid ;
min-height : 100vh ;
@ -250,74 +204,60 @@ body .layout-two-previews {
overflow : auto ;
grid-template-rows : auto auto ;
grid-template-columns : auto ;
background : var ( --secondary ) ;
}
background : var ( --secondary ) ; }
@ media ( min-aspect-ratio : 1 / 1 ) {
body . layout-two-previews {
grid-template-rows : 100vh ;
grid-template-columns : 50vw 50vw ;
grid-template-areas : "preview preview" ;
}
}
grid-template-areas : "preview preview" ; } }
body . layout-two-previews . layout-preview {
grid-area : auto ;
}
grid-area : auto ; }
/* content layout */
@ font-face {
font-family : "Fira Sans" ;
font-family : 'Fira Sans' ;
src : url ( "../lib/font/fira-sans/FiraSans-Regular.ttf" ) ;
font-weight : 400 ;
}
font-weight : 400 ; }
@ font-face {
font-family : "Fira Sans" ;
font-family : 'Fira Sans' ;
src : url ( "../lib/font/fira-sans/FiraSans-Bold.ttf" ) ;
font-weight : 700 ;
}
font-weight : 700 ; }
@ font-face {
font-family : "Fira Code" ;
font-family : 'Fira Code' ;
src : url ( "../lib/font/fira-code/FiraCode-Regular.otf" ) ;
font-weight : 400 ;
}
font-weight : 400 ; }
@ font-face {
font-family : "Fira Code" ;
font-family : 'Fira Code' ;
src : url ( "../lib/font/fira-code/FiraCode-Bold.otf" ) ;
font-weight : 700 ;
}
font-weight : 700 ; }
@ font-face {
font-family : "EB Garamond" ;
font-family : 'EB Garamond' ;
src : url ( "../lib/font/eb-garamond/EBGaramond-Regular.ttf" ) ;
font-weight : 400 ;
}
font-weight : 400 ; }
body {
font-family : "Fira Sans" ;
font-family : 'Fira Sans' ;
margin : 0 ;
line-height : 1 . 2em ;
}
line-height : 1 . 2em ; }
. layout-content-and-preview . layout-content ,
. layout-content-only . layout-content ,
. layout-wide-content . layout-content {
overflow : visible ;
padding : calc ( var ( --margin ) * var ( --square ) ) ;
}
padding : calc ( var ( --margin ) * var ( --square ) ) ; }
. layout-content-and-preview . layout-content * : first-child ,
. layout-content-only . layout-content * : first-child ,
. layout-wide-content . layout-content * : first-child {
margin-top : 0 ;
}
margin-top : 0 ; }
. layout-content-and-preview . layout-content . layout-title ,
. layout-content-only . layout-content . layout-title ,
. layout-wide-content . layout-content . layout-title {
padding : calc ( 0 . 3 * var ( --margin ) * var ( --square ) ) 0 ;
line-height : 1 . 15em ;
}
line-height : 1 . 15em ; }
. layout-content-and-preview . layout-content . layout-title h2 ,
. layout-content-only . layout-content . layout-title h2 ,
. layout-wide-content . layout-content . layout-title h2 {
margin : 0 ;
line-height : 1 . 15em ;
}
line-height : 1 . 15em ; }
. layout-content-and-preview . layout-content ul , . layout-content-and-preview . layout-content ol ,
. layout-content-only . layout-content ul ,
. layout-content-only . layout-content ol ,
@ -325,18 +265,16 @@ body {
. layout-wide-content . layout-content ol {
list-style-type : none ;
padding-left : 0 ;
position : relative ;
}
position : relative ; }
. layout-content-and-preview . layout-content ul li :: before , . layout-content-and-preview . layout-content ol li :: before ,
. layout-content-only . layout-content ul li :: before ,
. layout-content-only . layout-content ol li :: before ,
. layout-wide-content . layout-content ul li :: before ,
. layout-wide-content . layout-content ol li :: before {
content : "▪" ;
content : '▪' ;
color : var ( --secondary ) ;
position : absolute ;
left : calc ( -0 . 33 * var ( --margin ) * var ( --square ) ) ;
}
left : calc ( -0 . 33 * var ( --margin ) * var ( --square ) ) ; }
. layout-content-and-preview . layout-content ul ul , . layout-content-and-preview . layout-content ul ol , . layout-content-and-preview . layout-content ol ul , . layout-content-and-preview . layout-content ol ol ,
. layout-content-only . layout-content ul ul ,
. layout-content-only . layout-content ul ol ,
@ -346,21 +284,18 @@ body {
. layout-wide-content . layout-content ul ol ,
. layout-wide-content . layout-content ol ul ,
. layout-wide-content . layout-content ol ol {
margin-left : calc ( 0 . 33 * var ( --margin ) * var ( --square ) ) ;
}
margin-left : calc ( 0 . 33 * var ( --margin ) * var ( --square ) ) ; }
. layout-content-and-preview . layout-content ol ,
. layout-content-only . layout-content ol ,
. layout-wide-content . layout-content ol {
counter-reset : ol-counter ;
}
counter-reset : ol-counter ; }
. layout-content-and-preview . layout-content ol li :: before ,
. layout-content-only . layout-content ol li :: before ,
. layout-wide-content . layout-content ol li :: before {
counter-increment : ol-counter ;
content : counter ( ol-counter ) "." ;
color : var ( --secondary-dark ) ;
left : calc ( -0 . 36 * var ( --margin ) * var ( --square ) ) ;
}
left : calc ( -0 . 36 * var ( --margin ) * var ( --square ) ) ; }
. layout-content-and-preview . layout-content pre ,
. layout-content-only . layout-content pre ,
. layout-wide-content . layout-content pre {
@ -368,8 +303,7 @@ body {
padding-left : calc ( var ( --margin ) * var ( --square ) ) ;
line-height : 1 . 2em ;
position : relative ;
overflow : hidden ;
}
overflow : hidden ; }
. layout-content-and-preview . layout-content pre :: before ,
. layout-content-only . layout-content pre :: before ,
. layout-wide-content . layout-content pre :: before {
@ -377,102 +311,85 @@ body {
position : absolute ;
text-align : right ;
color : var ( --secondary ) ;
top : 0 . 85em ;
top : . 85em ;
width : 100 % ;
left : calc ( -1 * var ( --square ) + 1 . 2 * var ( --margin ) * var ( --square ) ) ;
transform-origin : top right ;
transform : rotate ( -90deg ) ;
}
transform : rotate ( -90deg ) ; }
. layout-content-and-preview . layout-content pre code ,
. layout-content-only . layout-content pre code ,
. layout-wide-content . layout-content pre code {
padding : 0 . 3em 0 ;
}
padding : . 3em 0 ; }
. layout-content-and-preview . layout-content code ,
. layout-content-only . layout-content code ,
. layout-wide-content . layout-content code {
font-size : 0 . 9em ;
font-family : "Fira Code" ;
}
font-family : 'Fira Code' ; }
. layout-two-columns . layout-title {
padding : calc ( 0 . 3 * var ( --margin ) * var ( --square ) ) calc ( var ( --margin ) * var ( --square ) ) ;
}
padding : calc ( 0 . 3 * var ( --margin ) * var ( --square ) ) calc ( var ( --margin ) * var ( --square ) ) ; }
. layout-two-columns . layout-title h2 {
line-height : 1 . 15em ;
}
line-height : 1 . 15em ; }
. layout-two-columns . layout-column-one ,
. layout-two-columns . layout-column-two {
padding : calc ( var ( --margin ) * var ( --square ) ) ;
padding-top : calc ( var ( --margin ) * var ( --square ) ) ;
}
padding-top : calc ( var ( --margin ) * var ( --square ) ) ; }
. layout-two-columns . layout-column-one * : first-child ,
. layout-two-columns . layout-column-two * : first-child {
margin-top : 0 ;
}
margin-top : 0 ; }
. layout-two-columns . layout-column-one ul ,
. layout-two-columns . layout-column-two ul {
list-style-type : none ;
padding-left : 0 ;
position : relative ;
}
position : relative ; }
. layout-two-columns . layout-column-one ul li :: before ,
. layout-two-columns . layout-column-two ul li :: before {
content : "▪" ;
content : '▪' ;
color : var ( --secondary ) ;
position : absolute ;
left : calc ( -0 . 33 * var ( --margin ) * var ( --square ) ) ;
}
left : calc ( -0 . 33 * var ( --margin ) * var ( --square ) ) ; }
. layout-two-columns . layout-column-one ul ul ,
. layout-two-columns . layout-column-two ul ul {
margin-left : calc ( 0 . 33 * var ( --margin ) * var ( --square ) ) ;
}
margin-left : calc ( 0 . 33 * var ( --margin ) * var ( --square ) ) ; }
. layout-two-columns . layout-column-one pre ,
. layout-two-columns . layout-column-two pre {
margin : 0 calc ( -1 * var ( --margin ) * var ( --square ) ) ;
line-height : 1 . 2em ;
position : relative ;
overflow : hidden ;
}
overflow : hidden ; }
. layout-two-columns . layout-column-one pre :: before ,
. layout-two-columns . layout-column-two pre :: before {
content : attr ( data-sourcefile ) ;
position : absolute ;
text-align : right ;
color : var ( --secondary ) ;
top : 0 . 85em ;
top : . 85em ;
width : 100 % ;
left : calc ( -1 * var ( --square ) + 1 . 2 * var ( --margin ) * var ( --square ) ) ;
transform-origin : top right ;
transform : rotate ( -90deg ) ;
}
transform : rotate ( -90deg ) ; }
. layout-two-columns . layout-column-one pre code ,
. layout-two-columns . layout-column-two pre code {
padding : 0 . 3em calc ( var ( --margin ) * var ( --square ) ) ;
}
padding : 0 . 3em calc ( var ( --margin ) * var ( --square ) ) ; }
. layout-two-columns . layout-column-one code ,
. layout-two-columns . layout-column-two code {
font-size : 0 . 9em ;
font-family : "Fira Code" ;
}
font-family : 'Fira Code' ; }
. layout . layout-chapter-heading {
height : 100vh ;
width : 100vw ;
position : relative ;
}
position : relative ; }
. layout . layout-chapter-heading . layout-title {
position : absolute ;
left : 2vw ;
width : calc ( 100vw - 4vw ) ;
text-align : center ;
bottom : calc ( 38 . 2 % - . 5em ) ;
}
bottom : calc ( 38 . 2 % - . 5em ) ; }
h1 {
font-size : 300 % ;
max-width : var ( --square ) ;
}
max-width : var ( --square ) ; }
: not ( . titlepage ) > h1 {
position : absolute ;
@ -480,41 +397,36 @@ h1 {
left : 0 ;
line-height : 115 % ;
vertical-align : bottom ;
padding : 0 calc ( var ( --margin ) * var ( --square ) ) 0 . 5em ;
}
padding : 0 calc ( var ( --margin ) * var ( --square ) ) 0 . 5em ; }
. titlepage > h1 {
line-height : 100 % ;
margin-bottom : 3rem ;
}
margin-bottom : 3rem ; }
h2 {
line-height : 1 . 2 ;
}
line-height : 1 . 2 ; }
p [ data-category ] :: before ,
h2 [ data-category ] :: before ,
h3 [ data-category ] :: before {
content : attr ( data-category ) ;
font-size : 0 . 7em ;
font-size : . 7em ;
font-variant : small-caps ;
text-transform : lowercase ;
background : black ;
color : white ;
padding : 0 . 1em 0 . 5em ;
padding : . 1em . 5em ;
display : inline-block ;
vertical-align : baseline ;
letter-spacing : 0 . 1em ;
letter-spacing : . 1em ;
position : relative ;
margin-left : calc ( -1 * var ( --margin ) * var ( --square ) ) ;
padding-left : calc ( var ( --margin ) * var ( --square ) ) ;
margin-right : 0 . 5em ;
}
margin-right : . 5em ; }
h2 [ data-category = Aufgabe ] :: before ,
h2 [ data-category = Task ] :: before {
content : attr ( data-category ) " " attr ( data-task ) ;
}
content : attr ( data-category ) " " attr ( data-task ) ; }
. layout-content-only h2 [ data-category = Aufgabe ] :: after ,
. layout-content-only h2 [ data-category = Task ] :: after ,
@ -533,8 +445,7 @@ h2[data-category=Task]::before {
white-space : nowrap ;
direction : rtl ;
word-spacing : 1000 % ;
opacity : 0 . 2 ;
}
opacity : . 2 ; }
@ media ( min-aspect-ratio : 1 / 1 ) and ( max-aspect-ratio : 2 / 1 ) {
. layout-content-only h2 [ data-category = Aufgabe ] :: after ,
. layout-content-only h2 [ data-category = Task ] :: after ,
@ -542,98 +453,78 @@ h2[data-category=Task]::before {
. layout-wide-content h2 [ data-category = Task ] :: after {
--versatz : calc ( ( 100vh - var ( --square ) ) / 2 ) ;
top : var ( --versatz ) ;
bottom : calc ( -1 * var ( --versatz ) ) ;
}
}
bottom : calc ( -1 * var ( --versatz ) ) ; } }
. layout-content-only h2 . task-without-number :: after ,
. layout-content-only h2 . task-without-number :: after ,
. layout-wide-content h2 . task-without-number :: after ,
. layout-wide-content h2 . task-without-number :: after {
display : none ;
}
display : none ; }
img {
width : auto ;
max-width : 100 % ;
}
max-width : 100 % ; }
table {
font-size : inherit ;
width : calc ( var ( --square ) - var ( --margin ) * var ( --square ) ) ;
margin-left : calc ( -1 * var ( --margin ) * var ( --square ) ) ;
border-spacing : 0 ;
}
border-spacing : 0 ; }
table tr : nth-child ( 2n-1 ) {
background : var ( --secondary ) ;
}
background : var ( --secondary ) ; }
table tr > * : first-child {
padding-left : calc ( var ( --margin ) * var ( --square ) ) ;
}
padding-left : calc ( var ( --margin ) * var ( --square ) ) ; }
table th , table td {
text-align : left ;
vertical-align : top ;
padding : 0 . 3em ;
padding-left : 0 ;
}
padding : . 3em ;
padding-left : 0 ; }
table th : last-child , table td : last-child {
padding-right : 0 . 1em ;
}
padding-right : . 1em ; }
. layout-content-only table {
border-spacing : 0 ;
margin-left : 0 ;
width : 100 % ;
box-sizing : border-box ;
}
box-sizing : border-box ; }
. layout-content-only table tr > * : first-child {
padding-left : 0 . 3rem ;
padding-right : 0 . 3rem ;
}
padding-left : . 3rem ;
padding-right : . 3rem ; }
. box {
margin-left : calc ( -1 * var ( --margin ) * var ( --square ) ) ;
padding : 0 . 8em 0 . 1em 0 . 1em calc ( var ( --margin ) * var ( --square ) ) ;
}
padding : 0 . 8em 0 . 1em 0 . 1em calc ( var ( --margin ) * var ( --square ) ) ; }
. box . warning {
background : var ( --primary ) ;
}
background : var ( --primary ) ; }
blockquote {
color : var ( --secondary-dark ) ;
position : relative ;
padding-bottom : 1 . 8em ;
margin-left : 0 ;
margin-right : 0 ;
}
margin-right : 0 ; }
blockquote p : first-of-type {
/* probably bungle, but works for one <p> inside <blockquote> */
display : contents ;
}
display : contents ; }
blockquote p : first-of-type :: after {
content : " " var ( --closing-double-quote ) ;
}
content : " " var ( --closing-double-quote ) ; }
blockquote :: before {
content : var ( --opening-double-quote ) " " ;
color : var ( --secondary-dark ) ;
position : absolute ;
display : inline-block ;
right : 100 % ;
}
right : 100 % ; }
blockquote cite {
position : absolute ;
bottom : 0 . 6em ;
left : calc ( 0 . 4 * var ( --square ) ) ;
width : calc ( 0 . 4 * var ( --square ) ) ;
}
width : calc ( 0 . 4 * var ( --square ) ) ; }
blockquote cite :: before {
content : "— " ;
}
content : "— " ; }
. layout-content figure {
margin : 0 1em 1em 0 ;
}
margin : 0 1em 1em 0 ; }
. bubble {
display : inline-block ;
@ -644,32 +535,28 @@ blockquote cite::before {
border : 0 . 1em solid var ( --primary-dark ) ;
background : var ( --primary ) ;
text-align : center ;
border-radius : 1em ;
}
border-radius : 1em ; }
. bubble :: before {
content : "" ;
content : '' ;
width : 0 ;
height : 0 ;
position : absolute ;
border : 0 . 5em solid transparent ;
border : . 5em solid transparent ;
border-top-color : var ( --primary-dark ) ;
bottom : -1em ;
left : calc ( 50 % - . 5em ) ;
}
left : calc ( 50 % - . 5em ) ; }
. bubble :: after {
content : "" ;
content : '' ;
width : 0 ;
height : 0 ;
position : absolute ;
border : 0 . 5em solid transparent ;
border : . 5em solid transparent ;
border-top-color : var ( --primary ) ;
bottom : -0 . 87em ;
left : calc ( 50 % - . 5em ) ;
}
left : calc ( 50 % - . 5em ) ; }
section > h1 , section > h2 , section > h3 , section > p , section > ul {
background : var ( --primary ) ;
}
background : var ( --primary ) ; }
/ *
* Keyboard Shortcut Styling
@ -681,20 +568,17 @@ kbd {
display : inline-block ;
border : 1px solid dimgray ;
border-width : 1px 5px 5px 1px ;
padding : 0 . 2rem 0 . 5rem ;
}
padding : . 2rem . 5rem ; }
/ *
* Emoji Fonts
* = = = = = = = = = = = =
* /
@ font-face {
font-family : "Twemoji" ;
src : url ( "../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf" ) ;
}
font-family : 'Twemoji' ;
src : url ( "../lib/font/twemoji/TwitterColorEmoji-SVGinOT.ttf" ) ; }
. emoji {
font-family : "Twemoji" ;
}
font-family : "Twemoji" ; }
/ *
* Links
@ -705,10 +589,9 @@ p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active
color : var ( --secondary-dark ) ;
font-weight : bold ;
position : relative ;
z-index : 1 ;
}
z-index : 1 ; }
p a : link :: before , p a : hover :: before , p a : active :: before , p a : visited :: before , li a : link :: before , li a : hover :: before , li a : active :: before , li a : visited :: before , h2 a : link :: before , h2 a : hover :: before , h2 a : active :: before , h2 a : visited :: before , td a : link :: before , td a : hover :: before , td a : active :: before , td a : visited :: before , figcaption a : link :: before , figcaption a : hover :: before , figcaption a : active :: before , figcaption a : visited :: before , div a : link :: before , div a : hover :: before , div a : active :: before , div a : visited :: before {
content : "" ;
content : '' ;
position : absolute ;
width : 102 % ;
height : 0 ;
@ -716,31 +599,25 @@ p a:link::before, p a:hover::before, p a:active::before, p a:visited::before, li
z-index : -1 ;
bottom : -5 % ;
left : -1 % ;
transition : 0 . 2s height ease ;
}
transition : . 2s height ease ; }
p a : hover :: before , li a : hover :: before , h2 a : hover :: before , td a : hover :: before , figcaption a : hover :: before , div a : hover :: before {
height : 110 % ;
}
height : 110 % ; }
figcaption a : not ( . dark-font ) : link , figcaption a : not ( . dark-font ) : hover , figcaption a : not ( . dark-font ) : active , figcaption a : not ( . dark-font ) : visited {
color : white ;
}
color : white ; }
figcaption a : not ( . dark-font ) : link :: before , figcaption a : not ( . dark-font ) : hover :: before , figcaption a : not ( . dark-font ) : active :: before , figcaption a : not ( . dark-font ) : visited :: before {
background-color : var ( --secondary-dark ) ;
}
background-color : var ( --secondary-dark ) ; }
/ *
* Code Listings
* = = = = = = = = = = = = =
* /
pre . small-text {
font-size : 80 % ;
}
font-size : 80 % ; }
pre . scroll-one-half {
max-height : calc ( . 5 * var ( --square ) ) ;
overflow : auto ! important ;
}
overflow : auto ! important ; }
/ *
* Fragments
@ -748,12 +625,10 @@ pre.scroll-one-half {
* /
. fragment {
opacity : 0 ;
transition : 0 . 3s opacity ease-in-out ;
}
transition : . 3s opacity ease-in-out ; }
. fragment . visible {
opacity : 1 ;
}
opacity : 1 ; }
/ *
* Topic List
@ -761,26 +636,21 @@ pre.scroll-one-half {
* /
. topic-list {
box-shadow : 0 0px 50px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
z-index : 500 ;
}
z-index : 500 ; }
. topic-list . topic-list-search {
display : block ;
width : 100 % ;
border : none ;
padding : 0 . 5rem ;
padding : . 5rem ;
margin-bottom : 1rem ;
border-bottom : 1px solid var ( --secondary ) ;
text-align : center ;
}
text-align : center ; }
. topic-list . topic-link {
font-weight : normal ;
}
font-weight : normal ; }
. topic-list . topic-link . active-topic-link {
font-weight : bold ;
}
font-weight : bold ; }
. topic-list . topic-link . not-matching-search-terms {
opacity : 0 . 2 ;
}
opacity : . 2 ; }
/ *
* Help Menu
@ -801,18 +671,15 @@ pre.scroll-one-half {
background : white ;
box-shadow : 0 0px 50px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
opacity : 0 ;
transition : 0 . 2s opacity ease-in-out ;
}
transition : . 2s opacity ease-in-out ; }
# help-menu-checkbox : checked ~ # help-menu-wrapper {
opacity : 1 ;
display : block ;
}
display : block ; }
# help-menu-checkbox {
position : fixed ;
right : 150vw ;
}
right : 150vw ; }
# help-menu-toggle {
position : fixed ;
@ -822,13 +689,11 @@ pre.scroll-one-half {
height : 3rem ;
color : white ;
background-color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
transition : 0 . 1s background-color ease-in-out ;
transition : . 1s background-color ease-in-out ;
display : flex ;
justify-content : center ;
align-items : center ;
}
align-items : center ; }
# help-menu-toggle : hover {
background-color : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
}
background-color : rgba ( 0 , 0 , 0 , 0 . 5 ) ; }
/*# sourceMappingURL=latex.css.map */