Small adjustments to header navigation (#160)

* Update site.css * Update site.css * Update site.css * header stuff
katydecorah · Oct 13, 2023 · a363772 · a363772
1 parent ea89b7a
commit a363772
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -59,13 +59,12 @@
     {% if page.locations %} {% include post/post-map-header.html %} {% endif %}
     <header>
       <div class="container">
-        {% include shapes/one.html %}
-
+        <div class="title-container">
+          {% include shapes/one.html %}
+          <a class="header-title" href="{{site.url}}">Katy DeCorah</a>
+        </div>
         <nav class="post-meta-breadcrumbs">
-          <ul class="">
-            <li>
-              <a class="header-title" href="{{site.url}}">Katy DeCorah</a>
-            </li>
+          <ul>
             {% if page.title != 'Katy DeCorah' %} {% if site.baseurl != '' %} {%
             if page.title != site.title %}
             <li>{% include icons/chevron-right.svg %}</li>

diff --git a/assets/site.css b/assets/site.css
@@ -80,16 +80,34 @@ main {
     margin: 0 auto;
     padding: 1rem 2rem;
   }
+
+  .container {
+    display: flex;
+    align-items: center;
+    grid-gap: 1rem;
+    flex-wrap: wrap;
+  }
 }
 
 header {
   padding-top: 1rem;
 }
 
 header .container {
+  grid-gap: 1rem;
+}
+
+header .title-container {
   display: flex;
   align-items: center;
   grid-gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+@media (width >= 50rem) {
+  header .title-container {
+    margin-bottom: 0;
+  }
 }
 
 header .header-title {
@@ -117,6 +135,12 @@ header ul {
   align-items: center;
 }
 
+@media (width <= 50rem) {
+  header ul li:first-child {
+    display: none;
+  }
+}
+
 hr {
   border-style: solid;
   border-width: 0.25rem;