diff --git a/css/theme/latex.css b/css/theme/latex.css index 1463f14..f279e12 100644 --- a/css/theme/latex.css +++ b/css/theme/latex.css @@ -20,10 +20,10 @@ section { /* basic layout */ :root { --square: 100vw; } - @media screen and (min-aspect-ratio: 1 / 1) { + @media (min-aspect-ratio: 1 / 1) { :root { --square: 50vw; } } - @media screen and (min-aspect-ratio: 2 / 1) { + @media (min-aspect-ratio: 2 / 1) { :root { --square: 100vh; } } @@ -44,13 +44,13 @@ body { 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)); } - @media screen and (min-aspect-ratio: 1 / 1) { + @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%); } } - @media screen and (min-aspect-ratio: 2 / 1) { + @media (min-aspect-ratio: 2 / 1) { body .layout-content-and-preview { grid-template-rows: var(--square); grid-template-columns: var(--square) auto; @@ -60,7 +60,7 @@ body { 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%); } - @media screen and (min-aspect-ratio: 1 / 1) { + @media (min-aspect-ratio: 1 / 1) { body .layout-content-only { grid-template-rows: auto var(--square) auto; grid-template-columns: auto var(--square) auto; @@ -76,12 +76,12 @@ body { grid-template-rows: min-content auto; grid-template-columns: var(--square); grid-template-areas: "content" " . "; } - @media screen and (min-aspect-ratio: 1 / 1) { + @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" " . "; } } - @media screen and (min-aspect-ratio: 2 / 1) { + @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; @@ -101,8 +101,8 @@ body { position: absolute; top: calc(var(--margin) * var(--square)); right: calc(var(--margin) * var(--square)); - width: 15vw; - height: 15vw; + width: calc(.3 * var(--square)); + height: calc(.3 * var(--square)); background-image: url(../../images/logo-fachschaft.png); background-repeat: no-repeat; background-size: contain; } @@ -161,12 +161,12 @@ body { grid-template-columns: var(--square); grid-template-areas: "title" "column1" "column2" "."; background: var(--secondary); } - @media screen and (min-aspect-ratio: 1 / 1) { + @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" " . . "; } } - @media screen and (min-aspect-ratio: 2 / 1) { + @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; @@ -190,7 +190,7 @@ body { grid-template-rows: auto auto; grid-template-columns: auto; background: var(--secondary); } - @media screen and (min-aspect-ratio: 1 / 1) { + @media (min-aspect-ratio: 1 / 1) { body .layout-two-previews { grid-template-rows: 100vh; grid-template-columns: 50vw 50vw; @@ -429,7 +429,7 @@ h2[data-category=Aufgabe]::before { direction: rtl; word-spacing: 1000%; opacity: .2; } - @media screen and (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 2 / 1) { + @media (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 2 / 1) { .layout-content-only h2[data-category=Aufgabe]::after, .layout-wide-content h2[data-category=Aufgabe]::after { --versatz: calc((100vh - var(--square)) / 2); @@ -544,16 +544,16 @@ kbd { * Links * ============ */ -p, li { +p, li, h2, td, figcaption { z-index: 1; } -p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active, li a:visited, h2 a:link, h2 a:hover, h2 a:active, h2 a:visited, td a:link, td a:hover, td a:active, td a:visited { +p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active, li a:visited, h2 a:link, h2 a:hover, h2 a:active, h2 a:visited, td a:link, td a:hover, td a:active, td a:visited, figcaption a:link, figcaption a:hover, figcaption a:active, figcaption a:visited { text-decoration: none; color: var(--secondary-dark); font-weight: bold; position: relative; 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 { + 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 { content: ''; position: absolute; width: 102%; @@ -564,7 +564,7 @@ p a:link, p a:hover, p a:active, p a:visited, li a:link, li a:hover, li a:active left: -1%; transition: .2s height ease; } -p a:hover::before, li a:hover::before, h2 a:hover::before, td a:hover::before { +p a:hover::before, li a:hover::before, h2 a:hover::before, td a:hover::before, figcaption a:hover::before { height: 110%; } /* diff --git a/css/theme/source/latex.scss b/css/theme/source/latex.scss index 0e09fe3..6db473d 100644 --- a/css/theme/source/latex.scss +++ b/css/theme/source/latex.scss @@ -21,10 +21,10 @@ section { /* basic layout */ :root { --square: 100vw; - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { --square: 50vw; } - @media screen and (min-aspect-ratio: 2/1) { + @media (min-aspect-ratio: 2/1) { --square: 100vh; } } @@ -55,7 +55,7 @@ body { white var(--square), var(--secondary) var(--square), var(--secondary) var(--square)); - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: var(--square) auto; grid-template-areas: @@ -64,7 +64,7 @@ body { " . preview"; background: linear-gradient(to right, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); } - @media screen and (min-aspect-ratio: 2/1) { + @media (min-aspect-ratio: 2/1) { grid-template-rows: var(--square); grid-template-columns: var(--square) auto; grid-template-areas: @@ -79,7 +79,7 @@ body { "content" " . "; background: linear-gradient(to bottom, white 0%, white var(--square), var(--secondary) var(--square), var(--secondary) 100%); - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: auto var(--square) auto; grid-template-areas: @@ -110,7 +110,7 @@ body { grid-template-areas: "content" " . "; - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: calc(2 * var(--square)); grid-template-areas: @@ -118,7 +118,7 @@ body { "content" " . "; } - @media screen and (min-aspect-ratio: 2/1) { + @media (min-aspect-ratio: 2/1) { grid-template-rows: auto var(--square) auto; grid-template-columns: auto calc(2 * var(--square)) auto; grid-template-areas: @@ -233,7 +233,7 @@ body { "column2" "."; background: var(--secondary); - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { 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: @@ -242,7 +242,7 @@ body { "column1 column2" " . . "; } - @media screen and (min-aspect-ratio: 2/1) { + @media (min-aspect-ratio: 2/1) { 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: @@ -276,7 +276,7 @@ body { grid-template-rows: auto auto; grid-template-columns: auto; background: var(--secondary); - @media screen and (min-aspect-ratio: 1/1) { + @media (min-aspect-ratio: 1/1) { grid-template-rows: 100vh; grid-template-columns: 50vw 50vw; grid-template-areas: @@ -525,7 +525,7 @@ h2[data-category=Aufgabe]::before { direction: rtl; word-spacing: 1000%; opacity: .2; - @media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { + @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { --versatz: calc((100vh - var(--square)) / 2); top: var(--versatz); bottom: calc(-1 * var(--versatz)); @@ -665,11 +665,11 @@ kbd { * Links * ============ */ -p, li { +p, li, h2, td, figcaption { z-index: 1; } -p a, li a, h2 a, td a { +p a, li a, h2 a, td a, figcaption a { &:link, &:hover, &:active,