From c9c54c0a99b775649beb78328b49ebe954984d11 Mon Sep 17 00:00:00 2001 From: tdro Date: Thu, 13 Oct 2022 00:29:30 -0400 Subject: 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. --- assets/css/default.css | 56 ++++++++++++----------- themes/default/layouts/_default/drafts.html | 2 +- themes/default/layouts/_default/feeds.html | 2 +- themes/default/layouts/_default/likes.html | 2 +- themes/default/layouts/_default/media.html | 2 +- themes/default/layouts/_default/section.html | 4 +- themes/default/layouts/partials/profile-tabs.html | 8 ++-- 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 @@