tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Extract responsivity helpers in include

Browse Source
This commit is contained in:
Christian Wolf 2025-01-17 17:27:44 +01:00
parent 48a5b852a1
commit 7fd921b66e
2 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
themes/tsc_vfl/assets/css/_responsive.scss Normal file
View File

@ -0,0 +1,19 @@
@mixin media-large {
@media screen and (min-width: 700px) {
@content;
}
}
@mixin mouse-available {
@media screen and (pointer: fine) {
@content;
}
}
@mixin mouse-available {
@media screen and (pointer: fine) {
@content;
}
}

41
themes/tsc_vfl/assets/css/main.scss
View File

@ -1,3 +1,5 @@
@use 'responsive.scss' as r;
/* Variables */ /* Variables */
$total-width: 95%; $total-width: 95%;
$color-red: #cd1013; $color-red: #cd1013;
@ -23,17 +25,6 @@ $color-vh-hinten: #0082c9;
} }
} }
@mixin media-large {
@media screen and (min-width: 700px) {
@content;
}
}
@mixin mouse-available {
@media screen and (pointer: fine) {
@content;
}
}
/* main styling */ /* main styling */
@ -78,7 +69,7 @@ h1 {
width: $left-menu-width; width: $left-menu-width;
@include media-large { @include r.media-large {
display: flex; display: flex;
} }
@ -166,7 +157,7 @@ h1 {
.calendar-manual { .calendar-manual {
font-size: xx-small; font-size: xx-small;
@include media-large { @include r.media-large {
font-size: small; font-size: small;
} }
@ -347,7 +338,7 @@ h1 {
border-left: 20px solid $color-red; border-left: 20px solid $color-red;
position: relative; position: relative;
@include media-large { @include r.media-large {
display: flex; display: flex;
} }
@ -407,7 +398,7 @@ h1 {
font: 1.5em 'Open Sans Condensed', sans-serif; font: 1.5em 'Open Sans Condensed', sans-serif;
display: none; display: none;
@include media-large { @include r.media-large {
display: block; display: block;
} }
@ -531,7 +522,7 @@ h1 {
// margin: 10px 25px 10px 0; // margin: 10px 25px 10px 0;
display: flex; display: flex;
@include media-large { @include r.media-large {
width: calc(50% - #{$gap-columns-persons} / 2); width: calc(50% - #{$gap-columns-persons} / 2);
} }
@ -588,7 +579,7 @@ h1 {
margin-right: 2px; margin-right: 2px;
flex-direction: column; flex-direction: column;
@include media-large{ @include r.media-large{
flex-direction: row; flex-direction: row;
} }
@ -597,7 +588,7 @@ h1 {
display: block; display: block;
height: 190px; height: 190px;
@include media-large{ @include r.media-large{
flex: 33% 1 0; flex: 33% 1 0;
} }
@ -667,7 +658,7 @@ h1 {
border-top: 1px solid $color-hor-line; border-top: 1px solid $color-hor-line;
@include media-large { @include r.media-large {
display: none; display: none;
} }
@ -717,7 +708,7 @@ h1 {
@include menu-style; @include menu-style;
@include media-large { @include r.media-large {
display: none; display: none;
} }
} }
@ -749,7 +740,7 @@ h1 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 15px; gap: 15px;
@include media-large { @include r.media-large {
&.cols-2 { &.cols-2 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -788,7 +779,7 @@ h1 {
max-width: 70%; max-width: 70%;
} }
@include media-large { @include r.media-large {
display: flex; display: flex;
align-items: start; align-items: start;
@ -852,7 +843,7 @@ h1 {
margin: 5px 0; margin: 5px 0;
align-items: baseline; align-items: baseline;
@include mouse-available { @include r.mouse-available {
margin: 0; margin: 0;
} }
@ -870,7 +861,7 @@ h1 {
display: block; display: block;
padding: 6.5px 0; padding: 6.5px 0;
@include mouse-available { @include r.mouse-available {
padding: 3px 0; padding: 3px 0;
} }
} }
@ -921,7 +912,7 @@ table.time {
} }
} }
@include media-large { @include r.media-large {
display: table; display: table;
tr { tr {