From 28da427b27d4c5d371c869fe167389261de5f2e4 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Mon, 5 Feb 2024 22:34:06 -0800
Subject: [PATCH] feat: add container query for navbar

---
 src/assets/css/blocks/site-logo.css     | 14 ++++++++++++++
 src/assets/css/blocks/site-nav.css      |  1 +
 src/assets/css/global/global-styles.css |  1 +
 3 files changed, 16 insertions(+)

diff --git a/src/assets/css/blocks/site-logo.css b/src/assets/css/blocks/site-logo.css
index fd31741..320053b 100644
--- a/src/assets/css/blocks/site-logo.css
+++ b/src/assets/css/blocks/site-logo.css
@@ -49,3 +49,17 @@
   --shadow-color: var(--color-primary-faded);
   z-index: 1;
 }
+
+@container (max-width: 32em) {
+  .site-logo .wordmark {
+    /* Visually hide wordmark on smaller screens */
+    clip: rect(0 0 0 0);
+    height: auto;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+}
diff --git a/src/assets/css/blocks/site-nav.css b/src/assets/css/blocks/site-nav.css
index fadd49f..3cdfca2 100644
--- a/src/assets/css/blocks/site-nav.css
+++ b/src/assets/css/blocks/site-nav.css
@@ -2,6 +2,7 @@
   backdrop-filter: blur(3px);
   background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
   background-image: linear-gradient(var(--color-bg) 20%, transparent);
+  container: navbar / inline-size;
   padding-block: 1.5rem;
   position: sticky;
   top: 0;
diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css
index 64190c8..1e0d273 100644
--- a/src/assets/css/global/global-styles.css
+++ b/src/assets/css/global/global-styles.css
@@ -17,6 +17,7 @@ body {
   font-weight: var(--font-weight-body-regular);
   letter-spacing: -0.03rem;
   line-height: 2rem;
+  margin: 0;
 }
 
 h1,