Merge pull request #5 from kowalski7cc/feature/improve-style

Kezii · web-flow · commit 723238d66cec · 2025-08-28T19:45:36.000+02:00
Style improvement
diff --git a/content/schedule.md b/content/schedule.md
@@ -5,16 +5,18 @@ date = 2025-08-26
 
 # Programma
 ## Resta Aggiornato
-Il programma di `ESC 2k25` è in fase di definizione, quindi questa pagina e' in continuo aggiornamento. Controlla nuovamente questa pagina piu' avanti per tenerti aggiornato sugli eventi, i talk e i laboratori che si terranno durante l'evento!   
+Il programma di `ESC {21}` è in fase di definizione, quindi questa pagina e' in continuo aggiornamento. Controlla nuovamente questa pagina piu' avanti per tenerti aggiornato sugli eventi, i talk e i laboratori che si terranno durante l'evento!   
    
-Inoltre, puoi vedere lo schedule attuale (still WIP!) sul [Calendario di Pretalk](https://pretalx.endsummer.camp/2K25/schedule/).   
+Inoltre, puoi vedere lo schedule attuale (in allestimento!) sul **[Calendario di Pretalk](https://pretalx.endsummer.camp/2K25/schedule/)**.
 A breve verra' pubblicato lo schedule finale.
 
 ## Contribuisci all'ESC!  
 
-La prima regola dell'ESC e': _"Porta all'ESC quello che vorresti vedere all'ESC!"_  
+La prima regola dell'ESC è: _"Porta all'ESC quello che vorresti vedere all'ESC!"_  
 Per proporre un talk o un laboratorio, visita la nostra Call for Papers (CFP) su [Pretalx](https://pretalx.endsummer.camp/2K25/cfp).
 
+
+
 # Contenuti
 ## Talk
 
diff --git a/sass/index.scss b/sass/index.scss
@@ -42,11 +42,11 @@
   box-shadow: 1px 1px 13px #f2f2f2;
   padding: 25px;
   border-radius: 3px;
-  color: #737373;
+  color: #636363;
   margin-bottom: 20px;
 
   a {
-    color: #737373;
+    color: #636363;
     text-decoration: none;
   }
 
@@ -82,6 +82,7 @@
   min-width: 120px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   padding: 8px 15px;
+  cursor: pointer;
 }
 
 .action-button:hover {
@@ -96,6 +97,7 @@
 
 /* Countdown Container */
 .countdown-wrapper {
+  cursor: default;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -181,7 +183,6 @@
   }
 
   #right_content {
-
     padding: 15px;
     margin: 15px;
   }
@@ -218,4 +219,4 @@
     gap: 5px;
     padding: 5px;
   }
-}
+}
diff --git a/sass/main.scss b/sass/main.scss
@@ -2,10 +2,10 @@
 //       border-style: solid;
 //       border-color: #000;
 //       border-width: 0.5px;
-//   } 
+//   }
 
 body {
-  color: #737373;
+  color: #636363;
   font-family: Poppins, sans-serif;
   line-height: 1.6;
   margin: 0;
@@ -22,14 +22,14 @@ body {
   margin-top: 0;
   background: #feffff;
   padding: 20px;
-  box-shadow: 0 20px 25px -5px rgba(177, 177, 177, 0.1), 0 10px 10px -5px rgba(191, 191, 191, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(177, 177, 177, 0.1),
+    0 10px 10px -5px rgba(191, 191, 191, 0.04);
 }
 
 header {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  margin: 2rem;
+  margin: 1rem 20px;
   min-height: 50px;
+  padding: 0;
   text-align: right;
   display: flex;
   flex-direction: row;
@@ -47,12 +47,13 @@ header {
     .open {
       display: flex;
       width: 100%;
+      margin-bottom: 3rem;
+      margin: 3rem 1rem;
       flex-direction: column;
       justify-content: center;
       gap: 2rem;
       min-height: 50vh;
     }
-
   }
 
   .button-overflow {
@@ -73,12 +74,28 @@ header {
     gap: 3rem;
 
     a {
-      color: #737373;
+      @media (max-width: 768px) {
+        width: inherit;
+        text-align: center;
+      }
+      color: #636363;
       text-decoration: none;
       font-size: 22px;
       font-weight: 500;
     }
-    
+
+    a:hover {
+      color: #939393;
+    }
+
+  }
+  .button {
+    background-color: #93a93a;
+  }
+
+  .button:hover {
+    background-color: #a7c445;
+    color: white;
   }
 }
 
@@ -96,7 +113,7 @@ header {
   font-weight: bold;
   color: #333;
   margin: 20px 0;
-  padding: 10px;
+  //padding: 10px;
 }
 
 .social_sponsor {
@@ -125,24 +142,29 @@ header {
 
 .source-link {
   margin-left: auto;
-  
+
   a {
     color: white;
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
   }
 }
 
 .button {
-  background: #34ace1;
   color: white;
-  transition: all .3s;
+  transition: all 0.3s;
   padding: 8px 20px;
   border-radius: 3px;
   text-decoration: none;
+  cursor: pointer;
+}
+
+.telegram.button {
+  background: #34ace1 !important;
+  color: white;
 }
 
 /* Contenitore della lista di icone social */
@@ -159,18 +181,18 @@ header {
   margin: 0;
 
   a {
-    /* Larghezza “cerchio” icona */
+    /* Larghezza "cerchio" icona */
     width: 40px;
-    
-    /* Altezza “cerchio” icona */
+
+    /* Altezza "cerchio" icona */
     height: 40px;
 
     /* Colore di sfondo di default */
     background-color: currentColor;
-    
+
     /* Rende il contenitore circolare */
     border-radius: 50%;
-    
+
     /* Bianco */
     color: #fff;
 
@@ -200,27 +222,27 @@ header {
 /* --- COLORI BRAND PER OGNI SOCIAL --- */
 
 .wp-social-link-telegram a {
-  color: #229ED9;
+  color: #229ed9;
 }
 
 .wp-social-link-youtube a {
-  color: #FF0000;
+  color: #ff0000;
 }
 
 .wp-social-link-twitch a {
-  color: #9146FF;
+  color: #9146ff;
 }
 
 .wp-social-link-github a {
   color: #181717;
 }
 
 .wp-social-link-instagram a {
-  color: #E1306C;
+  color: #e1306c;
 }
 
 .wp-social-link-facebook a {
-  color: #1877F2;
+  color: #1877f2;
 }
 
 .screen-reader-text {
@@ -266,12 +288,14 @@ header {
   }
 
   .container {
-    width: 100%;
-    padding: 0px;
+    width: auto;
   }
 }
 
 @media (max-width: 600px) {
+  header {
+    margin: 1rem 0px;
+  }
 
   .section {
     padding: 0px;
@@ -299,7 +323,6 @@ header {
 }
 
 @media (max-width: 350px) {
-
   .social-link a {
     width: 30px;
     height: 30px;
@@ -334,10 +357,6 @@ header {
 }
 
 @media (max-width: 280px) {
-  #logo img {
-    max-width: 120px;
-  }
-
   .sponsor img {
     max-width: 60px;
     padding-left: 0.5em;
@@ -384,7 +403,6 @@ header {
   }
 
   .sponsor {
-
     margin-top: 0;
   }
-}
+}
diff --git a/templates/base.html b/templates/base.html
@@ -7,10 +7,9 @@
     <title>End Summer Camp &#8211; Hacking * Free Software * DIY</title>
     <link rel="stylesheet" href="/main.css">
     <link rel="manifest" href="/manifest.webmanifest">
-    <link rel="icon" type="image/png"  href="/images/favicon/favicon_64.png" sizes="64x64">
+    <link rel="icon" type="image/png" href="/images/favicon/favicon_64.png" sizes="64x64">
 
-    <meta name="keywords" 
-        content="ESC, Hacking, Free Software, DIY, End Summer Camp, Italian Community, non-profit" >
+    <meta name="keywords" content="ESC, Hacking, Free Software, DIY, End Summer Camp, Italian Community, non-profit">
     <meta name="description"
         content="ESC è un incontro non-profit di persone interessate all’Hacking, al Software Libero e al DIY.">
 </head>
@@ -19,49 +18,52 @@
     <div class="container">
         <header>
             <a href="/" id="logo" aria-label="Home">
-                <img 
-                    src="/images/ESC.png.webp" 
-                    srcset="/images/ESC.png.webp 1x, /images/ESC.png 1x" 
-                    alt="Logo dell'End Summer Camp">
+                <picture>
+                    <source srcset="/images/ESC.png.webp" type="image/webp">
+                    <source srcset="/images/ESC.png" type="image/png">
+                    <img src="/images/ESC.png.webp" alt="Logo dell'End Summer Camp">
+                </picture>
             </a>
             <a onclick="toggleMenu()" class="button button-overflow">&#8801;</a>
             <nav id="main-nav">
                 <a href="/campeggio">Camp</a>
                 <a href="/schedule">Contenuti</a>
                 <a href="/faq">FAQ</a>
                 <a href="https://www.endsummercamp.org/index.php/Main_Page">Wiki</a>
-                <a href="http://t.me/endsummercamp" class="button">Telegram</a>
+                <a href="http://t.me/endsummercamp" class="button telegram">Telegram</a>
             </nav>
         </header>
 
-        <section class="section" >
+        <section class="section">
             {% block content %} {% endblock %}
         </section>
 
-    </div>
+        <footer>
+            <div class="container social_sponsor">
 
-    <div class="container social_sponsor" >
+                {% include "socials.html" %}
 
-        {% include "socials.html" %}
+                <div class="sponsor">
+                    <a href="https://crunchlab.it/"><img src="/images/CRUNCHLAB.png.webp" alt="CRUNCHLAB"></a>
+                    <a href="https://redder.it/"><img src="/images/REDDER.png.webp" alt="REDDER"></a>
+                    <a href="https://blondbrothers.it/"><img src="/images/BLOND-BROTHERS.png.webp"
+                            alt="BLOND BROTHERS"></a>
+                </div>
 
-        <div class="sponsor">
-            <a href="https://crunchlab.it/"><img src="/images/CRUNCHLAB.png.webp" alt="CRUNCHLAB"></a>
-            <a href="https://redder.it/"><img src="/images/REDDER.png.webp" alt="REDDER"></a>
-            <a href="https://blondbrothers.it/"><img src="/images/BLOND-BROTHERS.png.webp" alt="BLOND BROTHERS"></a>
-        </div>
-
-    </div>
-    <div class="container license">
-        <p id="license_text"> Copyright © 2005-2025 | End Summer Camp | CC BY-SA <span class="source-link"><a href="https://github.com/endsummercamp/endsummercamp.github.io">Website Source</a></span></p>
-    </div>
-
-    <script>
-        function toggleMenu() {
-            console.log("Menu toggled");
-            const nav = document.querySelector("#main-nav");
-            nav.classList.toggle("open");
-        }
-    </script>
+            </div>
+            <div class="container license">
+                <p id="license_text"> Copyright © 2005-2025 | End Summer Camp | CC BY-SA <span class="source-link"><a
+                            href="https://github.com/endsummercamp/endsummercamp.github.io">Website Source</a></span>
+                </p>
+            </div>
+        </footer>
+        <script>
+            function toggleMenu() {
+                console.log("Menu toggled");
+                const nav = document.querySelector("#main-nav");
+                nav.classList.toggle("open");
+            }
+        </script>
 </body>
 
 </html>
diff --git a/templates/index.html b/templates/index.html
@@ -7,11 +7,11 @@
 <script src="lite-yt-embed.js"></script>
 
 
-<div id="main_container" >
+<div id="main_container">
   <div id="main_content">
     <div id="youtube_frame">
       <lite-youtube videoid="UMzpQJ53cXQ" id="youtube"
-      playlabel="End Summer Camp: Hacking, Free Software, DIY Since 2005"></lite-youtube>
+        playlabel="End Summer Camp: Hacking, Free Software, DIY Since 2005"></lite-youtube>
     </div>
     <div id="main_text">
       End Summer Camp (ESC) è un incontro non-profit di persone interessate all’<a
