style: adjust layout and theming

src/components/ClearStickersButton.astro

@@ -10,7 +10,7 @@ import '../styles/components/ClearStickersButton.css'
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="theme-toggle-icon"
+    class="clear-stickers-icon"
     viewBox="0 0 24 24"
     fill="none"
   >

src/components/Header.astro

@@ -1,22 +1,61 @@
 ---
 import corunaTechLogo from '../assets/logo.svg?raw'
-import ThemeToggle from './ThemeToggle.astro'
 import ClearStickersButton from './ClearStickersButton.astro'
 import '../styles/components/Header.css'
 ---
 
 <header class="header">
-  <div class="header-top">
-    <nav class="header-nav">
-      <a href="#comunidades" class="header-nav-link"> Comunidades </a>
-      <a href="#eventos" class="header-nav-link"> Eventos </a>
-    </nav>
-    <div class="header-right">
-      <ThemeToggle />
-      <ClearStickersButton />
+  <div class="header-inner">
+    <div class="header-top">
+      <nav class="header-nav">
+        <a href="#comunidades" class="header-nav-link"> Comunidades </a>
+        <a href="#eventos" class="header-nav-link"> Eventos </a>
+      </nav>
+      <div class="header-right">
+        <ClearStickersButton />
+      </div>
     </div>
+    <a href="/" aria-current="page" aria-label="home" class="header-logo-link">
+      <div class="header-logo" set:html={corunaTechLogo} />
+    </a>
   </div>
-  <a href="/" aria-current="page" aria-label="home" class="header-logo-link">
-    <div class="header-logo" set:html={corunaTechLogo} />
-  </a>
 </header>
+
+<script>
+  const header = document.querySelector('.header')
+  const SCROLL_OFFSET = 40
+
+  const heroSection = document.querySelector('.hero-section')
+
+  const updateHeaderState = () => {
+    if (!header) {
+      return
+    }
+
+    const isMobile = window.matchMedia('(max-width: 767px)').matches
+
+    if (!isMobile) {
+      header.classList.remove('is-released')
+      header.classList.toggle('is-compact', window.scrollY > SCROLL_OFFSET)
+      return
+    }
+
+    const heroBottom =
+     heroSection?.getBoundingClientRect().bottom ?? Number.POSITIVE_INFINITY
+    const isPastHero = heroBottom <= 0
+
+    header.classList.toggle('is-released', isPastHero)
+
+    if (isPastHero) {
+      header.classList.remove('is-compact')
+      return
+    }
+
+    const shouldCompact = window.scrollY > SCROLL_OFFSET
+    header.classList.toggle('is-compact', shouldCompact)
+  }
+
+  updateHeaderState()
+  window.addEventListener('scroll', updateHeaderState, { passive: true })
+  window.addEventListener('resize', updateHeaderState)
+</script>

src/components/HeaderDetail.astro

@@ -1,21 +1,39 @@
 ---
 import corunaTechLogo from '../assets/logo.svg?raw'
-import ThemeToggle from './ThemeToggle.astro'
 import '../styles/components/HeaderDetail.css'
 ---
 
 <header class="header-detail">
-  <a
-    href="/"
-    aria-current="page"
-    aria-label="home"
-    class="header-detail-logo-link"
-  >
-    <div class="header-detail-logo" set:html={corunaTechLogo} />
-  </a>
-  <div class="header-detail-right">
-    <div class="header-detail-theme-toggle">
-      <ThemeToggle />
-    </div>
+  <div class="header-detail-inner">
+    <a
+      href="/"
+      aria-current="page"
+      aria-label="home"
+      class="header-detail-logo-link"
+    >
+      <div class="header-detail-logo" set:html={corunaTechLogo} />
+    </a>
   </div>
 </header>
+
+<script>
+  const headerDetail = document.querySelector('.header-detail')
+  const SCROLL_OFFSET = 40
+
+  const toggleCompactDetailHeader = () => {
+    if (!headerDetail) {
+      return
+    }
+
+    if (window.scrollY > SCROLL_OFFSET) {
+      headerDetail.classList.add('is-compact')
+    } else {
+      headerDetail.classList.remove('is-compact')
+    }
+  }
+
+  toggleCompactDetailHeader()
+  window.addEventListener('scroll', toggleCompactDetailHeader, {
+    passive: true
+  })
+</script>

src/components/SocialNetworks.astro

@@ -1,13 +1,17 @@
 ---
+import lighthouseTechImage from '../assets/lighthouse-tech.png'
+import corunatechLogoImage from '../assets/logo.png'
 import '../styles/components/SocialNetworks.css'
 ---
 
 <section class="social-networks-section">
   <div class="social-networks-content">
     <div class="social-networks-text">
-      <h2 class="social-networks-title">
-        Mantente ao día da actividade das comunidades tech da Coruña
-      </h2>
+      <h2 class="social-networks-title">Mantente ao día</h2>
+      <p class="social-networks-subtitle">
+        Sigue as nosas redes sociais para estar ao tanto das últimas novidades,
+        eventos e actividades da comunidade.
+      </p>
       <p class="social-networks-handle">@corunadev</p>
       <div class="social-networks-buttons">
         <a
@@ -23,19 +27,25 @@ import '../styles/components/SocialNetworks.css'
     <div class="social-networks-images">
       <div class="social-networks-image large-image">
         <img
-          src="/src/assets/lighthouse-tech.png"
+          src={lighthouseTechImage.src}
+          width={lighthouseTechImage.width}
+          height={lighthouseTechImage.height}
           alt="Faro tecnológico con personas y conexiones representando la comunidad tech de A Coruña"
           class="lighthouse-illustration"
+          loading="lazy"
         />
       </div>
       <div class="social-networks-image small-image">
         <div
           class="corunatech-logo-sticker sticker-iridescent iridescent-effect"
         >
           <img
-            src="/src/assets/logo.png"
+            src={corunatechLogoImage.src}
+            width={corunatechLogoImage.width}
+            height={corunatechLogoImage.height}
             alt="CoruñaTech - Comunidades tecnológicas de A Coruña"
             class="corunatech-logo"
+            loading="lazy"
           />
         </div>
       </div>

src/layouts/BaseLayout.astro

@@ -3,7 +3,6 @@ import '../styles/global.css'
 import '../styles/layouts/BaseLayout.css'
 import Footer from '../components/Footer.astro'
 import EventBanner from '../components/EventBanner.astro'
-import ThemeScript from '../components/ThemeScript.astro'
 import { buildImageUrl, getDefaultImage } from '../utils/url-utils'
 import { FAVICON_PATHS } from '../utils/constants'
 
@@ -68,13 +67,13 @@ const imageUrl = buildImageUrl(siteUrl, image)
     <meta property="twitter:title" content={title} />
     <meta property="twitter:description" content={description} />
     <meta property="twitter:image" content={imageUrl} />
-
-    <ThemeScript />
   </head>
   <body>
     <EventBanner />
-    <slot name="header" />
-    <slot />
+    <div class="layout-content">
+      <slot name="header" />
+      <slot />
+    </div>
     <Footer />
   </body>
 </html>

src/pages/404.astro

@@ -0,0 +1,21 @@
+---
+import PageLayout from '../layouts/PageLayout.astro'
+import '../styles/pages/404.css'
+---
+
+<PageLayout
+  title="Páxina non atopada | CoruñaTech"
+  description="A páxina que buscas non existe. Volve ao inicio para seguir descubrindo as comunidades e eventos tecnolóxicos da Coruña."
+>
+  <section class="not-found">
+    <div class="not-found__container">
+      <span class="not-found__code" aria-hidden="true">404</span>
+      <h1 class="not-found__title">Ups! Non atopamos esta páxina.</h1>
+      <p class="not-found__description">
+        Pode que o enlace estea desactualizado ou que a páxina fose movida.
+        Volve ao inicio para continuar conectado coa comunidade tech da Coruña.
+      </p>
+      <a class="not-found__button" href="/">Volver ao inicio</a>
+    </div>
+  </section>
+</PageLayout>

src/styles/components/ClearStickersButton.css

@@ -14,3 +14,8 @@
   background-color: var(--bg-dark);
   color: var(--text-inverse);
 }
+
+.clear-stickers-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}

src/styles/components/Communities.css

@@ -41,6 +41,12 @@
   gap: var(--spacing-element);
 }
 
+@media (max-width: 640px) {
+  .communities-section {
+    padding: 0;
+  }
+}
+
 @media (min-width: 768px) {
   .communities-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));

src/styles/components/CommunitySimpleCard.css

@@ -17,7 +17,7 @@
 .community-card-logo {
   width: 6rem;
   aspect-ratio: 1 / 1;
-  object-fit: cover;
+  object-fit: contain;
   background: var(--white);
   padding: 0.2rem;
   border-radius: 0.6rem;

src/styles/components/Events.css

@@ -7,6 +7,16 @@
   padding: var(--spacing-container);
 }
 
+@media (max-width: 640px) {
+  .events-section {
+    padding: var(--spacing-section) 0 0;
+  }
+
+  .events-container {
+    padding: 0;
+  }
+}
+
 .events-group {
   margin-bottom: var(--spacing-section);
 }
@@ -15,7 +25,7 @@
   font-size: var(--text-size-title);
   line-height: 1.2;
   font-weight: 700;
-  color: var(--text-title);
+  color: var(--text-inverse);
   font-family: var(--font-display);
 }
 

src/styles/components/Footer.css

@@ -8,7 +8,9 @@
 }
 
 .footer-content {
-  margin: 0 auto;
+  margin: 0;
+  width: 100%;
+  padding: 0 var(--layout-horizontal-padding);
   display: flex;
   flex-direction: row;
   justify-content: space-between;