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
+ })}