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 */ /* basic layout */
:root { :root {
--square: 100vw; } --square: 100vw; }
@media screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
:root { :root {
--square: 50vw; } } --square: 50vw; } }
@media screen and (min-aspect-ratio: 2 / 1) { @media (min-aspect-ratio: 2 / 1) {
:root { :root {
--square: 100vh; } } --square: 100vh; } }
@ -44,13 +44,13 @@ body {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-areas: "content" "preview"; 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 screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
body .layout-content-and-preview { body .layout-content-and-preview {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: var(--square) auto; grid-template-columns: var(--square) auto;
grid-template-areas: " . preview" "content preview" " . preview"; 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 screen and (min-aspect-ratio: 2 / 1) { @media (min-aspect-ratio: 2 / 1) {
body .layout-content-and-preview { body .layout-content-and-preview {
grid-template-rows: var(--square); grid-template-rows: var(--square);
grid-template-columns: var(--square) auto; grid-template-columns: var(--square) auto;
@ -60,7 +60,7 @@ body {
grid-template-columns: var(--square); grid-template-columns: var(--square);
grid-template-areas: "content" " . "; 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 screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
body .layout-content-only { body .layout-content-only {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: auto var(--square) auto; grid-template-columns: auto var(--square) auto;
@ -76,12 +76,12 @@ body {
grid-template-rows: min-content auto; grid-template-rows: min-content auto;
grid-template-columns: var(--square); grid-template-columns: var(--square);
grid-template-areas: "content" " . "; } grid-template-areas: "content" " . "; }
@media screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
body .layout-wide-content { body .layout-wide-content {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: calc(2 * var(--square)); grid-template-columns: calc(2 * var(--square));
grid-template-areas: " . " "content" " . "; } } grid-template-areas: " . " "content" " . "; } }
@media screen and (min-aspect-ratio: 2 / 1) { @media (min-aspect-ratio: 2 / 1) {
body .layout-wide-content { body .layout-wide-content {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: auto calc(2 * var(--square)) auto; grid-template-columns: auto calc(2 * var(--square)) auto;
@ -101,8 +101,8 @@ body {
position: absolute; position: absolute;
top: calc(var(--margin) * var(--square)); top: calc(var(--margin) * var(--square));
right: calc(var(--margin) * var(--square)); right: calc(var(--margin) * var(--square));
width: 15vw; width: calc(.3 * var(--square));
height: 15vw; height: calc(.3 * var(--square));
background-image: url(../../images/logo-fachschaft.png); background-image: url(../../images/logo-fachschaft.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; } background-size: contain; }
@ -161,12 +161,12 @@ body {
grid-template-columns: var(--square); grid-template-columns: var(--square);
grid-template-areas: "title" "column1" "column2" "."; grid-template-areas: "title" "column1" "column2" ".";
background: var(--secondary); } background: var(--secondary); }
@media screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
body .layout-two-columns { body .layout-two-columns {
grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto; grid-template-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto;
grid-template-columns: var(--square) var(--square); grid-template-columns: var(--square) var(--square);
grid-template-areas: " . . " " title title " "column1 column2" " . . "; } } 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 { body .layout-two-columns {
grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square)); grid-template-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square));
grid-template-columns: auto var(--square) var(--square) auto; grid-template-columns: auto var(--square) var(--square) auto;
@ -190,7 +190,7 @@ body {
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: auto; grid-template-columns: auto;
background: var(--secondary); } background: var(--secondary); }
@media screen and (min-aspect-ratio: 1 / 1) { @media (min-aspect-ratio: 1 / 1) {
body .layout-two-previews { body .layout-two-previews {
grid-template-rows: 100vh; grid-template-rows: 100vh;
grid-template-columns: 50vw 50vw; grid-template-columns: 50vw 50vw;
@ -429,7 +429,7 @@ h2[data-category=Aufgabe]::before {
direction: rtl; direction: rtl;
word-spacing: 1000%; word-spacing: 1000%;
opacity: .2; } 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-content-only h2[data-category=Aufgabe]::after,
.layout-wide-content h2[data-category=Aufgabe]::after { .layout-wide-content h2[data-category=Aufgabe]::after {
--versatz: calc((100vh - var(--square)) / 2); --versatz: calc((100vh - var(--square)) / 2);
@ -544,16 +544,16 @@ kbd {
* Links * Links
* ============ * ============
*/ */
p, li { p, li, h2, td, figcaption {
z-index: 1; } 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; text-decoration: none;
color: var(--secondary-dark); color: var(--secondary-dark);
font-weight: bold; font-weight: bold;
position: relative; 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 { 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: ''; content: '';
position: absolute; position: absolute;
width: 102%; 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%; left: -1%;
transition: .2s height ease; } 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%; } height: 110%; }
/* /*

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

@ -21,10 +21,10 @@ section {
/* basic layout */ /* basic layout */
:root { :root {
--square: 100vw; --square: 100vw;
@media screen and (min-aspect-ratio: 1/1) { @media (min-aspect-ratio: 1/1) {
--square: 50vw; --square: 50vw;
} }
@media screen and (min-aspect-ratio: 2/1) { @media (min-aspect-ratio: 2/1) {
--square: 100vh; --square: 100vh;
} }
} }
@ -55,7 +55,7 @@ body {
white var(--square), white var(--square),
var(--secondary) var(--square), var(--secondary) 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-rows: auto var(--square) auto;
grid-template-columns: var(--square) auto; grid-template-columns: var(--square) auto;
grid-template-areas: grid-template-areas:
@ -64,7 +64,7 @@ body {
" . 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 screen and (min-aspect-ratio: 2/1) { @media (min-aspect-ratio: 2/1) {
grid-template-rows: var(--square); grid-template-rows: var(--square);
grid-template-columns: var(--square) auto; grid-template-columns: var(--square) auto;
grid-template-areas: grid-template-areas:
@ -79,7 +79,7 @@ body {
"content" "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 screen and (min-aspect-ratio: 1/1) { @media (min-aspect-ratio: 1/1) {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: auto var(--square) auto; grid-template-columns: auto var(--square) auto;
grid-template-areas: grid-template-areas:
@ -110,7 +110,7 @@ body {
grid-template-areas: grid-template-areas:
"content" "content"
" . "; " . ";
@media screen and (min-aspect-ratio: 1/1) { @media (min-aspect-ratio: 1/1) {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: calc(2 * var(--square)); grid-template-columns: calc(2 * var(--square));
grid-template-areas: grid-template-areas:
@ -118,7 +118,7 @@ body {
"content" "content"
" . "; " . ";
} }
@media screen and (min-aspect-ratio: 2/1) { @media (min-aspect-ratio: 2/1) {
grid-template-rows: auto var(--square) auto; grid-template-rows: auto var(--square) auto;
grid-template-columns: auto calc(2 * var(--square)) auto; grid-template-columns: auto calc(2 * var(--square)) auto;
grid-template-areas: grid-template-areas:
@ -233,7 +233,7 @@ body {
"column2" "column2"
"."; ".";
background: var(--secondary); 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-rows: auto calc(0.18 * var(--square)) calc(0.82 * var(--square)) auto;
grid-template-columns: var(--square) var(--square); grid-template-columns: var(--square) var(--square);
grid-template-areas: grid-template-areas:
@ -242,7 +242,7 @@ body {
"column1 column2" "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-rows: calc(0.18 * var(--square)) calc(0.82 * var(--square));
grid-template-columns: auto var(--square) var(--square) auto; grid-template-columns: auto var(--square) var(--square) auto;
grid-template-areas: grid-template-areas:
@ -276,7 +276,7 @@ body {
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: auto; grid-template-columns: auto;
background: var(--secondary); background: var(--secondary);
@media screen and (min-aspect-ratio: 1/1) { @media (min-aspect-ratio: 1/1) {
grid-template-rows: 100vh; grid-template-rows: 100vh;
grid-template-columns: 50vw 50vw; grid-template-columns: 50vw 50vw;
grid-template-areas: grid-template-areas:
@ -525,7 +525,7 @@ h2[data-category=Aufgabe]::before {
direction: rtl; direction: rtl;
word-spacing: 1000%; word-spacing: 1000%;
opacity: .2; 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); --versatz: calc((100vh - var(--square)) / 2);
top: var(--versatz); top: var(--versatz);
bottom: calc(-1 * var(--versatz)); bottom: calc(-1 * var(--versatz));
@ -665,11 +665,11 @@ kbd {
* Links * Links
* ============ * ============
*/ */
p, li { p, li, h2, td, figcaption {
z-index: 1; z-index: 1;
} }
p a, li a, h2 a, td a { p a, li a, h2 a, td a, figcaption a {
&:link, &:link,
&:hover, &:hover,
&:active, &:active,