From 9304d3ecd33cb588257b23a268b9961b78b615a0 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sat, 26 Apr 2025 11:05:30 +0200
Subject: [PATCH] Fix CSS for image gallery
---
themes/tsc_vfl/assets/css/_images.scss | 61 ++++++++++++++++++++++
themes/tsc_vfl/assets/css/_responsive.scss | 6 +++
themes/tsc_vfl/assets/css/main.scss | 51 +-----------------
3 files changed, 68 insertions(+), 50 deletions(-)
create mode 100644 themes/tsc_vfl/assets/css/_images.scss
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%;