From 35ee1fb1a3e662fc2336c35858416196e0af4545 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Mon, 1 Jul 2024 15:01:37 -0600
Subject: [PATCH] front page draft 1

---
 header.php |  2 +-
 style.css  | 85 ++++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/header.php b/header.php
index b7c912c..f78a1b2 100644
--- a/header.php
+++ b/header.php
@@ -33,7 +33,7 @@
             ?>
             <a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
             <button class="st-nav-btn st-open-search" aria-label="Open Search"><i class="fa fa-search"></i></button>
-            <button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
+            <button class="st-nav-btn st-open-nav" aria-label="Open Navigation"><i class="fa fa-bars"></i></button>
         </div>
 
         <h1 class="st-site-title">Slowtwitch</h1>
diff --git a/style.css b/style.css
index 6b65231..8236f75 100644
--- a/style.css
+++ b/style.css
@@ -54,6 +54,7 @@ h1 {
 @media (min-width: 760px) {
     .st-site-title {
         font-size: 6.9rem;
+        margin-bottom: .10em;
     }
 }
 
@@ -111,7 +112,7 @@ SECTIONS
     display: flex;
     justify-content: space-between;
     color: black;
-    margin-top: .25em;
+    margin-top: 1em;
 }
 
 .st-header-logo {
@@ -128,7 +129,8 @@ SECTIONS
     display: none;
 }
 
-.st-icon-bar-sticky .st-open-nav {
+.st-icon-bar-sticky .st-open-nav,
+.st-icon-bar-sticky .st-open-search {
     border-radius: 20%;
     padding: .1em .4em;
     background: #fff;
@@ -138,12 +140,48 @@ SECTIONS
 }
 
 .st-icon-bar-sticky .st-open-search {
-    border-radius: 20%;
-    padding: .1em .4em;
-    background: #fff;
-    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
+    margin-left: 0;
     margin-right: auto;
-    pointer-events: auto;
+}
+
+@media (min-width: 760px) {
+    .st-header-icon-bar {
+        margin-top: 1.5em;
+    }
+
+    .st-icon-bar-sticky {
+        justify-content: flex-end;
+        margin-top: 1em;
+    }
+
+    .st-icon-bar-sticky .st-open-nav {
+        margin-left: 1em;
+    }
+
+    .st-icon-bar-sticky .st-open-search {
+        margin-right: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-nav-btn i,
+    .st-header-icon i{
+        font-size: 2rem;
+    }
+
+    .st-header-icon-bar a,
+    .st-header-icon {
+        font-size: 1.25rem;
+    }
+
+    .st-icon-bar-sticky .st-open-nav,
+    .st-icon-bar-sticky .st-open-search {
+        padding: .6em .8em;
+    }
+
+    .st-header-icon-bar {
+        margin-top: 2.5em;
+    }
 }
 
 /* nav */
@@ -232,6 +270,31 @@ SECTIONS
     font-size: 1.25em;
 }
 
+@media (min-width: 760px) {
+    .st-nav-is-open {
+        text-align: center;
+    }
+
+    .st-nav-links {
+        margin-top: 2.5em;
+        font-size: 2.5rem;
+    }
+
+    .st-search-form {
+        margin-top: 5em;
+    }
+
+    .st-search-box {
+        width: 500px;
+    }
+}
+
+@media (min-width: 120px) {
+    .st-search-box {
+        width: 1000px;
+    }
+}
+
 /* footer */
 
 .st-footer {
@@ -328,7 +391,7 @@ SECTIONS
 @media (min-width: 760px) {
     .st-footer {
         background-color: white;
-        grid-template-columns: minmax(1em, 1fr) minmax(50px, 80px) repeat(2, minmax(130px, 725px)) minmax(1em, 1fr);
+        grid-template-columns: minmax(1em, 1fr) minmax(50px, 80px) repeat(2, minmax(130px, 660px)) minmax(1em, 1fr);
         grid-template-areas: 
             "lpad socials empty partners rpad"
             "lpad menu empty partners rpad"
@@ -490,6 +553,10 @@ SECTIONS
     .st-article-section-wide .st-article-section-title {
         grid-column: 1 / span 4;
     }
+
+    .st-article-section-title {
+        font-size: 2.6rem;
+    }
 }
 
 /* ad section */
@@ -715,7 +782,7 @@ COMPONENTS
     font-size: 1rem;
     text-decoration: none;
     cursor: pointer;
-    border-radius: 100px;
+    border-radius: 15px;
     color: white;
     font-weight: 500;
     letter-spacing: 1px;