fix: update mobile styles

src/css/blocks/site-footer.css

@@ -1,23 +0,0 @@
-.footer {
-  background-color: var(--color-surface);
-}
-
-.footer-grid {
-  display: grid;
-}
-
-.footer-socials {
-  grid-column: 1 / -1;
-}
-
-@media (min-width: 32rem) {
-  .footer-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .footer-pages ul {
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: flex-end;
-  }
-}

src/css/blocks/site-logo.css

@@ -1,9 +1,6 @@
-.site-logo {
-  gap: 0.5rem;
-}
-
 .site-logo .wordmark {
   text-decoration: none;
+  margin-block-start: -6px;
 }
 
 .site-logo .wordmark > span {

src/css/blocks/site-nav.css

@@ -2,18 +2,11 @@
   backdrop-filter: blur(3px);
   background-color: color-mix(
     in srgb,
-    var(--color-background) 60%,
+    var(--color-background) 70%,
     transparent
   );
   background-image: linear-gradient(var(--color-background) 20%, transparent);
-  container: navbar / inline-size;
-  padding-block: 1.5rem;
   position: sticky;
   top: 0;
   z-index: 1;
 }
-
-.navbar .links {
-  list-style-type: none;
-  gap: 1rem;
-}

src/css/compositions/cluster.css

@@ -0,0 +1,15 @@
+/*
+CLUSTER
+More info: https://every-layout.dev/layouts/cluster/
+A layout that lets you distribute items with consitent
+spacing, regardless of their size
+*/
+
+.cluster {
+  --gap: var(--spacing-1);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, --spacing-1);
+  justify-content: flex-start;
+  align-items: center;
+}

src/css/compositions/repel.css

@@ -0,0 +1,16 @@
+/*
+REPEL
+A little layout that pushes items away from each other where
+there is space in the viewport and stacks on small viewports
+*/
+.repel {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-0\.5);
+}
+
+.repel[data-nowrap] {
+  flex-wrap: nowrap;
+}

src/css/compositions/switcher.css

@@ -0,0 +1,21 @@
+/*
+SWITCHER
+More info: https://every-layout.dev/layouts/switcher/
+A layout that allows you to lay **2** items next to each other
+until there is not enough horizontal space to allow that.
+*/
+
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((32rem - 100%) * 999);
+}
+
+.switcher > :nth-last-child(n + 3),
+.switcher > :nth-last-child(n + 3) ~ * {
+  flex-basis: 100%;
+}