Fix header spacing when tag is showing

Fixes #67
GemCopeland · Dec 4, 2019 · a8672a9 · a8672a9
1 parent 77d7fb4
commit a8672a9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/src/_includes/assets/css/components.header.css b/src/_includes/assets/css/components.header.css
@@ -44,6 +44,10 @@
   justify-content: space-between;
 }
 
+.header--site .nav__list {
+  flex-wrap: wrap;
+}
+
 .nav__link {
   border: none;
   color: var(--color-grey-dark);
@@ -67,6 +71,14 @@
   line-height: inherit;
 }
 
+.writing--tag .header--site .nav__item--writing {
+  padding-right: var(--gutter);
+}
+
+.writing--tag .header--desktop .nav__item--writing {
+  max-width: 34rem;
+}
+
 .writing--tag .nav__link--current {
   color: var(--color-grey-dark);
   padding-right: 0;
@@ -77,12 +89,17 @@
   color: var(--color-1);
 }
 
-.writing--tag .panel {
+.writing--tag .panel,
+.writing--tag .nav__item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.writing--tag .nav__item {
+  max-width: 100vw;
+}
+
 .skip-buttons:focus-within {
   display: flex;
   padding: var(--gutter) var(--gutter) 0 var(--gutter);

diff --git a/src/_includes/components/header-writing.njk b/src/_includes/components/header-writing.njk
@@ -2,21 +2,23 @@
 
 <div class="header header--desktop" id="top" aria-hidden="true">
   <div class="panel">
-    {% set linkUrl = '/writing/' %}
-    {% set linkText = 'Writing' %}
-    {% set current = true %}
-    {% include "components/nav-link.njk" %}{% if tag %}<span class="color-grey"> &mdash; </span>{{ tag }}{% endif %}
+    <div class="nav__item nav__item--writing">
+      {% set linkUrl = '/writing/' %}
+      {% set linkText = 'Writing' %}
+      {% set current = true %}
+      {% include "components/nav-link.njk" %}{% if tag %}<span class="color-grey"> &mdash; </span>{{ tag }}{% endif %}
+    </div>
   </div>
   <div class="panel">
     <nav class="nav">
       <ul class="nav__list">
-        <li class="nav__item">
+        <li class="nav__item nav__item--thinking">
           {% set linkUrl = '/thinking/' %}
           {% set linkText = 'Thinking' %}
           {% set current = false %}
           {% include "components/nav-link.njk" %}
         </li>
-        <li class="nav__item">
+        <li class="nav__item nav__item--home">
           {% set linkUrl = '/' %}
           {% set linkText = global.siteTitle %}
           {% set current = false %}

diff --git a/src/_includes/components/header.njk b/src/_includes/components/header.njk
@@ -24,13 +24,13 @@
   {%- endif -%}
   <nav class="nav">
     <ul class="nav__list">
-      <li class="nav__item">
+      <li class="nav__item nav__item--thinking">
         {% set linkUrl = '/thinking/' %}
         {% set linkText = 'Thinking' %}
         {% set current = section == 'thinking' %}
         {% include "components/nav-link.njk" %}
       </li>
-      <li class="nav__item">
+      <li class="nav__item nav__item--writing">
         {% set linkUrl = '/writing/' %}
         {% set linkText = 'Writing' %}
         {% set current = section == 'writing' or section == 'post' %}