From 93e427d5cb3e92d2bcdba647cfb95ace48ffb738 Mon Sep 17 00:00:00 2001 From: Bret Comnes Date: Wed, 14 Feb 2024 11:41:36 -0800 Subject: [PATCH] Overflow nav bars properly --- package.json | 1 - src/components/top-nav-bar/index.css | 173 +++++++++++++++++++++++++++ src/components/top-nav-bar/index.js | 43 +++++++ src/globals/global.css | 126 +------------------ src/layouts/root.layout.js | 32 +---- 5 files changed, 223 insertions(+), 152 deletions(-) create mode 100644 src/components/top-nav-bar/index.css create mode 100644 src/components/top-nav-bar/index.js diff --git a/package.json b/package.json index 90c8bf8..a8265b4 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "snazzy": "^9.0.0", "standard": "^17.0.0", "tape": "^5.0.0", - "top-bar.css": "^3.0.0", "top-bun": "^7.0.0", "typescript": "~5.2.2", "uhtml-isomorphic": "^2.1.0", diff --git a/src/components/top-nav-bar/index.css b/src/components/top-nav-bar/index.css new file mode 100644 index 0000000..f5c7cb7 --- /dev/null +++ b/src/components/top-nav-bar/index.css @@ -0,0 +1,173 @@ +.top-bar { + padding:0 1rem; + margin:0 0 2rem; + overflow-y: hidden; + overflow-x: scroll; + margin-bottom: 0; + margin-top: 0; + display: inline-flex; + justify-content: space-between; + gap: 5px; +} + +.top-bar::-webkit-scrollbar { + display: none; +} + +nav.top-bar { + position: sticky; + top: 0px; +} + +footer.top-bar { + position: sticky; + bottom: 0px; +} + +footer > .top-bar-link:first-child { + margin-left: unset; +} + +footer > .top-bar-link:first-child { + margin-left: unset; +} + +.top-bar-link, +.top-bar-title { + color:#aaa; + cursor:pointer; + float:left; + font-size:1rem; + text-decoration:none; + padding:1rem 0; +} + +.top-bar-link.current-page, +.top-bar-link.current-page:hover, +.top-bar-title.current-page, +.top-bar-title.current-page:hover { + cursor:default; +} + +.top-bar-link{ + font-weight:200; + margin-left:1rem; +} + +.top-bar-link.current-page, +.top-bar-link.current-page:hover, +.top-bar-link:hover { + color:#555; +} + +.top-bar-title{ + color:#555; + font-weight:600; +} + +.top-bar-right{ + float:right; +} + +.top-bar-link { + color: var(--accent-foreground); + font-weight: unset; +} + +.top-bar-right, +.top-bar-left { + flex-shrink: 0; + white-space: nowrap; + max-width: 100%; +} + +@media screen and (max-width: 106em) { + .top-bar { + backdrop-filter: contrast(100%) blur(10px); + z-index: 1; /* float over interactive content below */ + background-color: hsla(360, 100%, 100%, 0.75); + transition: box-shadow 0.1s ease-in-out; + + &:hover { + box-shadow: 0px 2px 10px 0px rgba(0,0,0, 0.2); + transition: box-shadow 0.1s ease-in-out; + } + } + + .dark-mode:not(.light-mode) { + & .top-bar { + background-color: hsla(213, 22%, 10%, 0.75); + } + } +} + +.dark-mode:not(.light-mode) { + & .dark-icon { + filter: invert(95%); + } + + & .top-bar-title { + color: #C7F026; + } +} + +@media print { + .top-bar { + position: inherit; + top: inherit; + bottom: inherit; + } +} + +.rounded-icon { + border-radius: 3px; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes spin-click { + from { + transform: rotate(360deg); + } + + to { + transform: rotate(540deg); + } +} + +@keyframes spin-reverse { + from { + transform: rotate(360deg); + } + + to { + transform: rotate(0deg); + } +} + +.light-dark-button { + animation-name: spin-reverse; + animation-duration: 0.2s; + touch-action: manipulation; +} + +.light-dark-button:hover { + animation-name: spin; + animation-duration: 0.2s; + animation-fill-mode: forwards; +} + +.light-dark-button:active { + animation-name: spin-click; + animation-duration: 0.2s; + animation-fill-mode: both; +} + diff --git a/src/components/top-nav-bar/index.js b/src/components/top-nav-bar/index.js new file mode 100644 index 0000000..840c2f9 --- /dev/null +++ b/src/components/top-nav-bar/index.js @@ -0,0 +1,43 @@ +import { html } from 'uhtml-isomorphic' + +export const topNavBar = () => { + return html` + + ` +} + +export const bottomFotterBar = ({ + githubRootUrl, + page +}) => { + return html` + + ` +} diff --git a/src/globals/global.css b/src/globals/global.css index f3e771e..8ede5df 100644 --- a/src/globals/global.css +++ b/src/globals/global.css @@ -1,8 +1,8 @@ @import 'highlight.js/styles/github-dark-dimmed.css'; @import 'mine.css/dist/mine.css'; @import 'mine.css/dist/layout.css'; -@import 'top-bar.css'; @import 'fragmentions/fragmention.css'; +@import '../components/top-nav-bar/index.css'; /* Document level */ body { @@ -42,77 +42,11 @@ ul { list-style-type: circle; } -/* JSON Feed Icon */ - -.rounded-icon { - border-radius: 3px; -} - -.top-bar-link { - color: var(--accent-foreground); - font-weight: unset; -} - -/* Sticky header footer top-bar */ -.top-bar { - margin-bottom: 0; - margin-top: 0; -} - -nav.top-bar { - position: sticky; - top: 0px; -} - -footer.top-bar { - position: sticky; - bottom: 0px; -} - -footer > .top-bar-link:first-child { - margin-left: unset; -} - -@media screen and (max-width: 106em) { - footer.top-bar { - position: inherit; - top: inherit; - bottom: inherit; - } -} - -@media screen and (max-width: 106em) { - nav.top-bar { - backdrop-filter: contrast(100%) blur(10px); - z-index: 1; /* float over interactive content below */ - background-color: hsla(360, 100%, 100%, 0.75); - transition: box-shadow 0.1s ease-in-out; - - &:hover { - box-shadow: 0px 2px 10px 0px rgba(0,0,0, 0.2); - transition: box-shadow 0.1s ease-in-out; - } - } - - .dark-mode:not(.light-mode) { - & nav.top-bar { - background-color: hsla(213, 22%, 10%, 0.75); - } - } -} .hide { display: none; } -@media print { - nav.top-bar, footer.top-bar { - position: inherit; - top: inherit; - bottom: inherit; - } -} - /* Print specifics */ @media print { html { @@ -159,61 +93,3 @@ footer > .top-bar-link:first-child { --dark-code-text: #7d8b9f; } -.dark-mode:not(.light-mode) { - & .dark-icon { - filter: invert(95%); - } - - & .top-bar-title { - color: #C7F026; - } -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes spin-click { - from { - transform: rotate(360deg); - } - - to { - transform: rotate(540deg); - } -} - -@keyframes spin-reverse { - from { - transform: rotate(360deg); - } - - to { - transform: rotate(0deg); - } -} - -.light-dark-button { - animation-name: spin-reverse; - animation-duration: 0.2s; - touch-action: manipulation; -} - -.light-dark-button:hover { - animation-name: spin; - animation-duration: 0.2s; - animation-fill-mode: forwards; -} - -.light-dark-button:active { - animation-name: spin-click; - animation-duration: 0.2s; - animation-fill-mode: both; -} - diff --git a/src/layouts/root.layout.js b/src/layouts/root.layout.js index 01b8299..e5e3fe2 100644 --- a/src/layouts/root.layout.js +++ b/src/layouts/root.layout.js @@ -1,5 +1,6 @@ import { html } from 'uhtml-isomorphic' import cn from 'classnames' +import { topNavBar, bottomFotterBar } from '../components/top-nav-bar/index.js' /** * @template T @@ -100,35 +101,14 @@ export default async function rootLayout ({ } - + ${topNavBar()}
${typeof children === 'string' ? html([children]) : children /* Support both uhtml and string children. Optional. */}
- + ${bottomFotterBar({ + githubRootUrl, + page + })} ` }