responsive

src/static/css/extra.css

@@ -40,6 +40,13 @@
     margin-right: 15px;
 }
 
+@media (max-width: 1000px) {
+    #menu li {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+}
+
 #spirit-fish {
     top: -154px;
     left: -174px;
@@ -136,6 +143,8 @@
     rotate: 90deg;
 }
 
-#menu {
-    background-position-y: -38px;
+@media (min-width: 1000px) {
+    #menu {
+        background-position-y: -38px;
+    }
 }

src/themes/siwa/assets/css/components/footer.css

@@ -34,4 +34,10 @@ footer {
 
 #footer-credits {
     min-height: 50px;
+}
+
+@media (max-width: 1000px) {
+    #footer-credits {
+        font-size: 16px;
+    }
 }

src/themes/siwa/assets/css/components/gallery.css

@@ -15,6 +15,12 @@
     cursor: pointer;
 }
 
+@media (max-width: 1000px) {
+    .gallery-container>.page-container>img {
+        width: 40%;
+    }
+}
+
 .gallery-container>.page-container>.empty {
     width: 20%;
     min-width: 200px;

src/themes/siwa/assets/css/components/ping-pong.css

@@ -7,15 +7,33 @@
     margin-bottom: 80px;
 }
 
+@media (max-width: 1000px) {
+    .ping-pong {
+        flex-direction: column;
+    }
+}
+
 .ping-pong:nth-child(2n) {
     flex-flow: row-reverse;
     text-align: right;
 }
 
+@media (max-width: 1000px) {
+    .ping-pong:nth-child(2n) {
+        flex-direction: column;
+    }
+}
+
 .ping-pong-image-container {
     position: relative;
 }
 
+@media (max-width: 1000px) {
+    .ping-pong-image-container {
+        margin-bottom: 20px;
+    }
+}
+
 .ping-pong-image-container::after {
     box-shadow: inset 0px 0px 0px 16px rgba(0, 0, 0, 0.3);
     content: '';
@@ -36,4 +54,13 @@
     margin-left: 50px;
     margin-right: 50px;
     max-width: 50%;
+}
+
+@media (max-width: 1000px) {
+    .ping-pong>div {
+        margin-left: 0px;
+        margin-right: 0px;
+        max-width: 80%;
+        text-align: center;
+    }
 }

src/themes/siwa/assets/css/main.css

@@ -60,24 +60,42 @@ h1 {
     min-width: 200px;
 }
 
+:root {
+    --fs-xs: 10px;
+    --fs-s: 14px;
+    --fs-m: 20px;
+    --fs-l: 28px;
+    --fs-xl: 40px;
+}
+
+@media (max-width: 1000px) {
+    :root {
+        --fs-xs: 16px;
+        --fs-s: 24px;
+        --fs-m: 30px;
+        --fs-l: 40px;
+        --fs-xl: 50px;
+    }
+}
+
 .fs-xs {
-    font-size: 10px;
+    font-size: var(--fs-xs);
 }
 
 .fs-s {
-    font-size: 14px;
+    font-size: var(--fs-s);
 }
 
 .fs-m {
-    font-size: 20px;
+    font-size: var(--fs-m);
 }
 
 .fs-l {
-    font-size: 28px;
+    font-size: var(--fs-l);
 }
 
 .fs-xl {
-    font-size: 40px;
+    font-size: var(--fs-xl);
 }
 
 .lh-m {

src/themes/siwa/assets/css/templates/button.css

@@ -32,4 +32,10 @@
 }
 {{- end }}
 {{- end }}
-{{- end }}
+{{- end }}
+
+@media (max-width: 1000px) {
+    .large-button {
+        font-size: 50px;
+    }
+}

src/themes/siwa/assets/css/templates/menu.css

@@ -30,6 +30,20 @@
     pointer-events: auto;
 }
 
+@media (max-width: 1000px) {
+    #menu {
+        min-width: 100%;
+        justify-content: center;
+        background-size: 125%;
+        background-position: center bottom;
+        font-size: 28px;
+    }
+
+    #logo {
+        display: none;
+    }
+}
+
 #menu a {
     color: {{ $fontColor | safeCSS }};
 }

src/themes/siwa/assets/css/templates/section/base.css

@@ -38,4 +38,10 @@
     margin-right: {{ $containerMarginRight }}{{ $containerMarginUnit }};
     margin-top: {{ $containerMarginTop }}{{ $containerMarginUnit }};
     margin-bottom: {{ $containerMarginBottom }}{{ $containerMarginUnit }};
+}
+
+@media (max-width: 1000px) {
+    #{{ $id }}-centered-container {
+        width: {{ add $centeredContainerWidth 20 }}%;
+    }
 }

src/themes/siwa/assets/css/templates/section/logo-with-text.css

@@ -4,4 +4,10 @@
 #{{ $id }}-centered-container > img {
     width: 60%;
     min-width: 400px;
+}
+
+@media (max-width: 1000px) {
+    #{{ $id }}-centered-container > img {
+        width: 100%;
+    }
 }

src/themes/siwa/assets/css/templates/section/logo.css

@@ -8,7 +8,23 @@
     min-width: 400px;
 }
 
+@media (max-width: 1000px) {
+    #{{ $id }}-centered-container > img {
+        width: 100%;
+    }
+}
+
 #{{ $id }}-buttons {
     display: flex;
     flex-direction: row;
+}
+
+@media (max-width: 1000px) {
+    #{{ $id }}-buttons {
+        flex-direction: column;
+    }
+
+    #{{ $id }}-buttons > .large-button {
+        margin-top: 20px;
+    }
 }

src/themes/siwa/assets/css/templates/section/simple.css

@@ -7,6 +7,12 @@
     margin: 5%;
 }
 
+@media (max-width: 1000px) {
+    #{{ $id }}-centered-container {
+        width: 80% !important;
+    }
+}
+
 #{{ $id }} {
     justify-content: end !important;
     align-items: start !important;