themes/default/layouts/partials/profile-tabs: tab-list -> tab-bar

Add more specificity to nav elements and set up for adding more
items to tab bar.

7 files changed, 40 insertions, 36 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index dae16e4..d0bf2ef 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -138,8 +138,8 @@
   color: var(--warning);
 }
 
-:hover:not(a):not(s):not(img):not(summary):not(nav):not(abbr):not(form):not(code):not(mark):not(tab-list):not(tab-list
-    aside) {
+:hover:not(a):not(s):not(img):not(summary):not(nav):not(abbr):not(form):not(code):not(mark):not(tab-bar):not(tab-bar
+    nav) {
   border-radius: 0.5rem;
 }
 
@@ -1203,17 +1203,16 @@ micro-unsafe details[open] + micro-unsafe-content * {
   pointer-events: auto;
 }
 
-tab-list {
+tab-bar {
   display: inline-block;
   overflow-x: auto;
   overflow-y: hidden;
-  text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
   width: 100%;
 }
 
-tab-list aside {
+tab-bar nav {
   display: flex;
   justify-content: center;
   border-bottom: 1px solid;
@@ -1222,7 +1221,7 @@ tab-list aside {
   min-width: 450px;
 }
 
-tab-list aside a {
+tab-bar nav a {
   border-left: 1px solid;
   border-right: 1px solid;
   border-top-left-radius: 0.5rem;
@@ -1240,20 +1239,20 @@ tab-list aside a {
   border-bottom: 2px solid var(--background);
 }
 
-tab-list aside a:not(:last-child) {
+tab-bar nav a:not(:last-child) {
   margin-right: 0.5rem;
 }
 
-tab-list aside a[data-draft] {
+tab-bar nav a[data-draft] {
   color: #8f0000;
   color: var(--danger);
 }
 
-tab-list aside a:hover {
+tab-bar nav a:hover {
   text-decoration: underline;
 }
 
-column-middle nav {
+column-middle main > nav {
   align-items: center;
   background-color: #fefefe;
   background-color: var(--background);
@@ -1269,21 +1268,21 @@ column-middle nav {
   height: 4rem;
 }
 
-column-middle nav section h2,
-column-middle nav section small {
+column-middle main > nav section h2,
+column-middle main > nav section small {
   margin: 0;
 }
 
 micro-author micro-header h2,
 micro-author micro-header h3,
-column-middle nav section h2,
-column-middle nav section small {
+column-middle main > nav section h2,
+column-middle main > nav section small {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-column-middle nav section {
+column-middle main > nav section {
   line-height: 1.25;
   padding: 0 0.5rem;
 }
@@ -1890,10 +1889,10 @@ main micro-card:first-of-type reaction-tip img {
 @media screen and (max-width: 1055px) {
   column-left,
   search-entry,
-  column-middle nav section {
+  column-middle main > nav section {
     display: none;
   }
-  column-middle nav {
+  column-middle main > nav {
     justify-content: space-between;
     overflow-x: auto;
     overflow-y: hidden;
@@ -1911,7 +1910,7 @@ main micro-card:first-of-type reaction-tip img {
     display: block;
     max-width: 100%;
   }
-  column-middle nav {
+  column-middle main > nav {
     position: fixed;
   }
   micro-card {
@@ -1948,15 +1947,20 @@ main micro-card:first-of-type reaction-tip img {
     display: block;
     overflow-y: scroll;
   }
-  nav {
+  column-middle main > nav {
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
   }
-  nav:active,
-  nav:hover,
-  nav:focus,
-  nav:focus-within,
-  nav:focus-visible {
-    box-shadow: 15px 0 15px -15px inset, -15px 0 15px -15px inset;
+  tab-bar:active,
+  tab-bar:hover,
+  tab-bar:focus,
+  tab-bar:focus-within,
+  tab-bar:focus-visible,
+  column-middle main > nav:active,
+  column-middle main > nav:hover,
+  column-middle main > nav:focus,
+  column-middle main > nav:focus-within,
+  column-middle main > nav:focus-visible {
+    box-shadow: 1rem 0 1rem -1rem inset, -1rem 0 1rem -1rem inset;
   }
 }
 
@@ -1988,7 +1992,7 @@ main micro-card:first-of-type reaction-tip img {
     display: none;
   }
   main > footer,
-  column-middle nav,
+  column-middle main > nav,
   navigation-separator hr[hidden] {
     display: none;
   }
diff --git a/themes/default/layouts/_default/drafts.html b/themes/default/layouts/_default/drafts.html
index 635f17b..569af84 100644
--- a/themes/default/layouts/_default/drafts.html
+++ b/themes/default/layouts/_default/drafts.html
@@ -3,7 +3,7 @@
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/") | safeCSS }}
 
-  tab-list a[href="{{ .Site.BaseURL }}/{{ $author }}/drafts/"] {
+  tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/drafts/"] {
     color: #111;
     color: var(--foreground);
     display: inherit;
diff --git a/themes/default/layouts/_default/feeds.html b/themes/default/layouts/_default/feeds.html
index 332c455..71e6328 100644
--- a/themes/default/layouts/_default/feeds.html
+++ b/themes/default/layouts/_default/feeds.html
@@ -3,7 +3,7 @@
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/") | safeCSS }}
 
-  tab-list a[href="{{ .Site.BaseURL }}/{{ $author }}/feeds/"] {
+  tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/feeds/"] {
     color: #111;
     color: var(--foreground);
     display: inherit;
diff --git a/themes/default/layouts/_default/likes.html b/themes/default/layouts/_default/likes.html
index f37159c..ccd75fb 100644
--- a/themes/default/layouts/_default/likes.html
+++ b/themes/default/layouts/_default/likes.html
@@ -3,7 +3,7 @@
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/") | safeCSS }}
 
-  tab-list a[href="{{ .Site.BaseURL }}/{{ $author }}/likes/"] {
+  tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/likes/"] {
     color: #111;
     color: var(--foreground);
     display: inherit;
diff --git a/themes/default/layouts/_default/media.html b/themes/default/layouts/_default/media.html
index f4bb3a9..a140801 100644
--- a/themes/default/layouts/_default/media.html
+++ b/themes/default/layouts/_default/media.html
@@ -3,7 +3,7 @@
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/") | safeCSS }}
 
-  tab-list a[href="{{ .Site.BaseURL }}/{{ $author }}/media/"] {
+  tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/media/"] {
     color: #111;
     color: var(--foreground);
     display: inherit;
diff --git a/themes/default/layouts/_default/section.html b/themes/default/layouts/_default/section.html
index 2708e89..ccb2746 100644
--- a/themes/default/layouts/_default/section.html
+++ b/themes/default/layouts/_default/section.html
@@ -2,8 +2,8 @@
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/") | safeCSS }}
 
-  tab-list a[href="{{ .CurrentSection.Permalink }}"],
-  tab-list a[href="{{ strings.TrimRight "/" .CurrentSection.Permalink }}"] {
+  tab-bar a[href="{{ .CurrentSection.Permalink }}"],
+  tab-bar a[href="{{ strings.TrimRight "/" .CurrentSection.Permalink }}"] {
     color: #111;
     color: var(--foreground);
     display: inherit;
diff --git a/themes/default/layouts/partials/profile-tabs.html b/themes/default/layouts/partials/profile-tabs.html
index e04cac7..e5c0385 100644
--- a/themes/default/layouts/partials/profile-tabs.html
+++ b/themes/default/layouts/partials/profile-tabs.html
@@ -1,7 +1,7 @@
 {{- $author := partial "function-authors-data.html" . -}}
 
-<tab-list>
-  <aside>
+<tab-bar>
+  <nav>
     <a href="{{ .Site.BaseURL }}/{{ $author.user }}">Messages</a>
     <a href="{{ .Site.BaseURL }}/{{ $author.user }}/feeds/">Feeds</a>
     <a href="{{ .Site.BaseURL }}/{{ $author.user }}/media/">Media</a>
@@ -9,5 +9,5 @@
     {{- if .Site.BuildDrafts }}
     <a data-draft href="{{ .Site.BaseURL }}/{{ $author.user }}/drafts/">Drafts</a>
     {{- end }}
-  </aside>
-</tab-list>
+  </nav>
+</tab-bar>