From 8f122e409a652914e6380a9083980830fd2e4b6c Mon Sep 17 00:00:00 2001
From: Lucia Enriquez Bos <81951721+luciaenriquezbos@users.noreply.github.com>
Date: Thu, 5 Sep 2024 17:26:46 +0200
Subject: [PATCH] add responsive styles

---
 2024/speakers.html      |  12 +++++
 assets/2024/seville.css |  99 ++++++++++++++++++++++++--------------
 index.html              | 102 ++++++++++++++++++----------------------
 3 files changed, 123 insertions(+), 90 deletions(-)
diff --git a/2024/speakers.html b/2024/speakers.html
index 854e748..8d78805 100644
--- a/2024/speakers.html
+++ b/2024/speakers.html
@@ -46,6 +46,12 @@
         height: 1.5rem;
       }
 
+      .speaker a.social:hover img {
+        filter: grayscale(0%) sepia(100%) hue-rotate(-30deg) saturate(2)
+          brightness(1.2);
+        transition: filter 0.3s ease;
+      }
+
       h2 {
         text-align: left;
         font-size: 1.3rem;
@@ -67,6 +73,12 @@
       .footer {
         margin-top: 10rem;
       }
+
+      @media (max-width: 480px) {
+        .speaker {
+          flex-direction: column;
+        }
+      }
     </style>
   </head>
   <body>
diff --git a/assets/2024/seville.css b/assets/2024/seville.css
index 32a1f0b..c48f9de 100644
--- a/assets/2024/seville.css
+++ b/assets/2024/seville.css
@@ -64,7 +64,7 @@ ul {
 }
 .logo-frame {
   background-color: #f0f0f0;
-  height: 4rem;
+  height: 3rem;
   margin: 2rem;
   padding: 0.7rem;
 }
@@ -133,6 +133,11 @@ h3 {
   text-decoration: none;
 }
 
+a.btn:hover span {
+  color: var(--accent-color);
+  transition: all 0.3s ease;
+}
+
 .cta {
   background-color: var(--accent-color);
   color: #ffffff;
@@ -165,7 +170,8 @@ a:visited {
   color: var(--main-color);
 }
 a:hover {
-  color: #fff;
+  color: var(--accent-color);
+  transition: all 0.3s ease;
 }
 .ml2 {
   margin-left: 3rem;
@@ -326,7 +332,7 @@ iframe {
 
 @media (max-width: 900px) {
   .flex {
-    flex-direction: column;
+    display: block;
   }
 
   .menu-icon {
@@ -663,51 +669,74 @@ table.schedule tr.break td:nth-child(2) {
   height: 12rem;
 }
 
-table.inscription {
-  border-spacing: 0px;
-  margin: 2rem;
-  padding: 0px;
-  text-align: center;
+.inscription {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr 2fr;
+  margin: 2rem 0;
+  width: 100%;
 }
-.inscription th.col1 {
-  height: 4rem;
-  margin: 0;
-  width: 15rem;
+.inscription .col1 {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  margin-right: 1rem;
 }
-.inscription th.col2,
-.inscription td.col2 {
-  background-color: #5f6875;
-  height: 4rem;
-  margin: 0;
-  width: 25rem;
+
+.inscription .col1 span,
+.col4 span {
+  height: 3.625rem;
 }
-.inscription th.col3,
-.inscription td.col3 {
-  background-color: #4c535e;
-  height: 4rem;
-  margin: 0;
-  width: 25rem;
+
+.inscription .col2,
+.col3 {
+  background-color: #5f6875;
+  padding: 0 1rem;
+  text-align: center;
 }
 
-table.inscription th,
-table.inscription td {
-  border: none;
-  margin: 0;
-  padding: 0;
+.inscription .col1 p:nth-child(3),
+.col2 p:nth-child(3),
+.col3 p:nth-child(3),
+.col4 p:nth-child(3) {
+  padding-top: 2rem;
 }
 
-table.inscription td {
-  margin: 0;
-  padding: 1rem;
-  text-align: center;
+.inscription p {
+  height: 5rem;
+  line-height: 1.1;
 }
+
 .big {
   font-size: 1.5rem;
   font-weight: bold;
 }
-ol.inscription {
+
+.col4 {
+  display: none;
+}
+
+ol.instructions {
+  display: block;
   margin-bottom: 3rem;
-  margin-left: 3rem;
+  padding-left: 3rem;
+}
+
+@media (max-width: 768px) {
+  .inscription {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 3fr;
+    margin: 2rem 0;
+    width: 100%;
+  }
+
+  .col4 {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    margin-right: 1rem;
+  }
 }
 
 .session-details {
diff --git a/index.html b/index.html
index 8ce85c4..cb94e8c 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,7 @@ <h2 class="title-m">Collaborators</h2>
           href="https://espacial.sevilla.org/en/"
           alt="Sevilla Ariane Citie 2024"
           ><img
-            class="logo"
+            class="logo2"
             src="assets/2024/sponsors/PC-Ariane-Sevilla-white.png"
         /></a>
         <a href="https://www.sevilla.org/" alt="Seville Cityhall"
@@ -196,56 +196,50 @@ <h2>Location</h2>
         the event is covered by assistants, speakers via inscriptions &
         sponsors.
       </p>
-      <table class="inscription">
-        <thead>
-          <tr>
-            <th class="col1"></th>
-            <th class="col2">Early Bird Ticket</th>
-            <th class="sep"></th>
-            <th class="col3">Regular Ticket</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td class="col1">When:</td>
-            <td class="col2">
-              from August 26<sup>th</sup><br />
-              till September 15<sup>th</sup>
-            </td>
-            <td class="sep"></td>
-            <td class="col3">
-              from September 16<sup>th</sup><br />
-              till October 4<sup>th</sup> <br />(or complete full capacity)
-            </td>
-          </tr>
-          <tr>
-            <td class="col1">Price:</td>
-            <td class="col2 big">100 EUR<sup>*</sup></td>
-            <td class="sep"></td>
-            <td class="col3 big">125 EUR<sup>*</sup></td>
-          </tr>
-          <tr>
-            <td class="col1">Includes:</td>
-            <td class="col2">
-              <ul>
-                <li>Pass for all sessions</li>
-                <li>Coffee breaks & lunches</li>
-                <li>Social Dinner</li>
-                <li>Guided City Tour</li>
-              </ul>
-            </td>
-            <td class="sep"></td>
-            <td class="col3">
-              <ul>
-                <li>Pass for all sessions</li>
-                <li>Coffee breaks & lunches</li>
-                <li>Social Dinner</li>
-                <li>Guided City Tour</li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+     
+      </table> 
+      <div class="inscription">
+        <div class="col1">
+          <span></span>
+          <p>When:</p>
+          <p>Price:</p>
+          <p>Includes:</p>
+        </div>
+        <div class="col2">
+          <h3>Early Bird Ticket</h3>
+          <p>
+            from August 26<sup>th</sup><br />
+            till September 15<sup>th</sup>
+          </p>
+          <p class="big">100 EUR<sup>*</sup></p>
+          <ul>
+            <li>Pass for all sessions</li>
+            <li>Coffee breaks & lunches</li>
+            <li>Social Dinner</li>
+            <li>Guided City Tour</li>
+          </ul>
+        </div>
+        <div class="col4">
+          <span></span>
+          <p>When:</p>
+          <p>Price:</p>
+          <p>Includes:</p>
+        </div>
+        <div class="col3">
+          <h3>Regular Ticket</h3>
+          <p>
+            from September 16<sup>th</sup><br />
+            till October 4<sup>th</sup> <br />(or complete full capacity)
+          </p>
+          <p class="big">125 EUR<sup>*</sup></p>
+          <ul>
+            <li>Pass for all sessions</li>
+            <li>Coffee breaks & lunches</li>
+            <li>Social Dinner</li>
+            <li>Guided City Tour</li>
+          </ul>
+        </div>
+      </div>
 
       <p>* Applicable taxes (VAT) incluided.</p>
       <p>
@@ -254,7 +248,7 @@ <h2>Location</h2>
       </p>
 
       <h3>How to get inscribed:</h3>
-      <ol class="inscription">
+      <ol class="instructions">
         <li>
           Complete the inscription form per attendee with the button below. If
           you need it, ask for an invoice providing your tax data.
@@ -293,9 +287,7 @@ <h2>Important Dates</h2>
         <li><strong>2024-10-[17..19]</strong>: LangDev’24</li>
       </ul>
 
-      <a name="cfp">
-        <h2>Call for Presentations</h2>
-      </a>
+      <h2>Call for Presentations</h2>
 
       <p>
         <em>From: June 6<sup>th</sup> till July 12<sup>th</sup> (closed).</em>

	Early Bird Ticket	Regular Ticket
When:	- from August 26^th - till September 15^th -	- from September 16^th - till October 4^th (or complete full capacity) -
Price:	100 EUR^*	125 EUR^*
Includes:	- - Pass for all sessions - Coffee breaks & lunches - Social Dinner - Guided City Tour - -	- - Pass for all sessions - Coffee breaks & lunches - Social Dinner - Guided City Tour - -