diff options
author | tdro <tdro@noreply.example.com> | 2022-10-13 00:29:30 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2022-10-13 00:29:30 -0400 |
commit | c9c54c0a99b775649beb78328b49ebe954984d11 (patch) | |
tree | 3e3eec93b18ec09507300567e4c94c7149a54365 | |
parent | ea2ea34bf15a70d3515dd9f0713d942faefb357d (diff) | |
download | canory-c9c54c0a99b775649beb78328b49ebe954984d11.tar.gz canory-c9c54c0a99b775649beb78328b49ebe954984d11.tar.bz2 canory-c9c54c0a99b775649beb78328b49ebe954984d11.zip |
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.
-rw-r--r-- | assets/css/default.css | 56 | ||||
-rw-r--r-- | themes/default/layouts/_default/drafts.html | 2 | ||||
-rw-r--r-- | themes/default/layouts/_default/feeds.html | 2 | ||||
-rw-r--r-- | themes/default/layouts/_default/likes.html | 2 | ||||
-rw-r--r-- | themes/default/layouts/_default/media.html | 2 | ||||
-rw-r--r-- | themes/default/layouts/_default/section.html | 4 | ||||
-rw-r--r-- | 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 @@ <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> |