Overflow nav bars properly

bcomnes · Feb 14, 2024 · 93e427d · 93e427d
1 parent 8b392ff
commit 93e427d
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 152 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,43 @@
+import { html } from 'uhtml-isomorphic'
+
+export const topNavBar = () => {
+  return html`
+  <nav class="top-bar hide-print">
+    <span class="top-bar-left">
+      <a href="/" class="top-bar-title" title="home">bret.io</a>
+      <a href="/cv/" class="top-bar-link" title="resume">cv</a>
+      <a href="/blog/" class="top-bar-link" title="blog">blog</a>
+    </span>
+    <span class="top-bar-right">
+      <span class="top-bar-link" >
+          <input class="dark-icon light-dark-button" onclick="window.toggleTheme()" height="14" width="14" type="image" alt="Toogle Theme" height="14" width="14" src="/globals/static/light-dark.svg">
+          <a id="neocities" href="https://neocities.org/site/bret"><img height="14" width="14" src="/globals/static/neocitieshead.svg"></a>
+          <a rel="me" id="mastadon" href="https://fosstodon.org/@bcomnes"><img height="14" width="14" src="/globals/static/mastodon.svg"></a>
+          <a rel="me" href="https://github.com/bcomnes" title="github"><img class="dark-icon" height="14" width="14" src="/globals/static/github.svg"></a>
+          <a href="https://www.npmjs.com/~bret" title="node packaged modules"><img class="rounded-icon" height="14" width="14" src="/globals/static/npm.svg"></a>
+          <a rel="me" id="bluesky" href="https://bsky.app/profile/bret.io"><img height="14" width="14" src="/globals/static/bsky.png"></a>
+          <a rel="me" href="https://twitter.com/bcomnes" title="twitter: @bcomnes"><img class="rounded-icon" height="14" width="14" src="/globals/static/twtr.svg"></a>
+          <a href="/feed.json"><img class="rounded-icon" height="14" width="14" src="/globals/static/jsonfeed.svg"></a>
+          <a href="/feed.xml"><img height="14" width="14" src="/globals/static/atom.svg" ></a>
+      </span>
+    </span>
+  </nav>
+  `
+}
+
+export const bottomFotterBar = ({
+  githubRootUrl,
+  page
+}) => {
+  return html`
+  <footer class="top-bar hide-print">
+    <span class="top-bar-left">
+      <a href="#" class="top-bar-link">© Bret Comnes</a>
+      <a href="${`${githubRootUrl}${page.pageFile.relname}`}" class="top-bar-link" title="edit site on github">edit</a>
+    </span>
+    <span class="top-bar-right">
+      <a rel="me" href="mailto:[email protected]" class="top-bar-link" title="email">contact</a>
+    </span>
+  </footer>
+  `
+}
diff --git 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;
-}
-