From 0c6dbbc5449fb58c403aa803a6e8be6b4da6d685 Mon Sep 17 00:00:00 2001
From: Ward Truyen <ward.truyen@gmail.com>
Date: Thu, 21 Nov 2024 13:58:04 +0100
Subject: [PATCH] Chore: resize carrousel on small screens

---
 src/css/main.css | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 5ad39e3..e683ab6 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -17,7 +17,7 @@ body {
   margin: 0.5em;
 }
 
-.card{
+.card {
   padding: 10px;
   border: 1px solid darkblue;
   background-color: #ddddddcc;
@@ -27,7 +27,7 @@ body {
   display: inline-block;
 }
 
-.card>h1{
+.card>h1 {
   font-size: 2em;
 }
 
@@ -35,7 +35,7 @@ html {
   background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
 }
 
-.flex{
+.flex {
   display: flex;
   flex-direction: column;
 }
@@ -67,7 +67,7 @@ html {
   padding: 10px;
   /* border: 1px solid darkblue; */
   /* background-color: #80808040; */
-  background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000 );
+  background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000);
   /* box-shadow: 3px 3px 3px #30303090; */
   /* border-radius: 4px; */
   margin-top: 1em;
@@ -103,7 +103,7 @@ html {
   text-shadow: 0px 0px 4px white, 2px 2px 6px;
 }
 
-.content>p{
+.content>p {
   margin-left: 1em;
 }
 
@@ -111,13 +111,15 @@ html {
   margin-left: 0.2em;
 }
 
-.content>h2{
+.content>h2 {
   margin-top: 1.5em;
 }
+
 .content>h2 {
   margin-top: 0.2em;
 }
-.content>h3{
+
+.content>h3 {
   margin-left: 0.8em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
@@ -161,10 +163,15 @@ html.theme-dark {
   margin: 0 auto;
 }
 
-#image-carousel{
+#image-carousel {
   width: 50rem;
   margin: 0 auto;
-  /* background: #DD8888DD; */
+}
+
+@media only screen and (max-width: 600px) {
+  #image-carousel {
+    width: 25rem;
+  }
 }
 
 @media(orientation: portrait) {