diff --git a/themes/tsc_vfl/assets/css/_images.scss b/themes/tsc_vfl/assets/css/_images.scss new file mode 100644 index 0000000..3a44204 --- /dev/null +++ b/themes/tsc_vfl/assets/css/_images.scss @@ -0,0 +1,61 @@ +@use 'responsive.scss' as r; + +.tsc-image { + margin: 0 auto; + width: fit-content; + + img { + display: block; + margin: 0 auto; + } +} + +.tsc-gallery { + display: grid; + place-items: center center; + grid-template-columns: 1fr; + gap: 15px; + + @include r.media-large { + &.cols-2 { + grid-template-columns: 1fr 1fr; + } + + &.cols-3 { + grid-template-columns: 1fr 1fr 1fr; + } + + &.cols-4 { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + } + + .tsc-gallery-img { + margin: 5px 0; + + a { + display: block; + // margin: 0 auto; + + img { + margin: 0 auto; + display: block; + } + } + } +} + +.tsc-image, .tsc-gallery-img { + .credits { + font-style: italic; + float: right; + } +} + +.youtube-video { + max-width: 100%; +} + +.internal-video { + max-width: 100%; +} diff --git a/themes/tsc_vfl/assets/css/_responsive.scss b/themes/tsc_vfl/assets/css/_responsive.scss index d086a8f..3965fd4 100644 --- a/themes/tsc_vfl/assets/css/_responsive.scss +++ b/themes/tsc_vfl/assets/css/_responsive.scss @@ -5,6 +5,12 @@ } } +@mixin media-medium { + @media screen and (min-width: 500px) { + @content; + } +} + @mixin mouse-available { @media screen and (pointer: fine) { @content; diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss index 22c2a20..d05da46 100644 --- a/themes/tsc_vfl/assets/css/main.scss +++ b/themes/tsc_vfl/assets/css/main.scss @@ -1,6 +1,7 @@ @use 'responsive.scss' as r; @use './schedule'; @use './colors.scss' as *; +@use './images.scss'; /* Variables */ $total-width: 95%; @@ -621,56 +622,6 @@ table { } } -.tsc-image { - margin: 0 auto; - width: fit-content; - - img { - display: block; - margin: 0 auto; - } -} - -.tsc-gallery { - display: grid; - place-items: center center; - grid-template-columns: 1fr; - gap: 15px; - - @include r.media-large { - &.cols-2 { - grid-template-columns: 1fr 1fr; - } - - &.cols-3 { - grid-template-columns: 1fr 1fr 1fr; - } - - &.cols-4 { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - } - - .tsc-gallery-img { - margin: 5px 0; - } -} - -.tsc-image, .tsc-gallery-img { - .credits { - font-style: italic; - float: right; - } -} - -.youtube-video { - max-width: 100%; -} - -.internal-video { - max-width: 100%; -} - .room { .image { max-width: 70%;