latex/latex-wochenende
5
0
Fork 0
Code Issues 8 Pull Requests Actions Releases Wiki Activity

Remove »screen« from media queries

Browse Source
This commit is contained in:
Knoch 2019-05-10 21:28:18 +02:00
parent b9ea8cb1cb
commit b6b5e0c9d9
2 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/theme/latex.css
View File

@ -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%; }
/*

26
css/theme/source/latex.scss
View File

@ -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,