diff options
Diffstat (limited to 'public/components')
| -rw-r--r-- | public/components/footer.html | 1 | ||||
| -rw-r--r-- | public/components/head.html | 7 | ||||
| -rw-r--r-- | public/components/nav.html | 17 | ||||
| -rw-r--r-- | public/components/nav_button.js | 18 |
4 files changed, 43 insertions, 0 deletions
diff --git a/public/components/footer.html b/public/components/footer.html new file mode 100644 index 0000000..c0412ad --- /dev/null +++ b/public/components/footer.html @@ -0,0 +1 @@ +<footer class="center" style="top: 100%; position: sticky; padding: 20px 0px 20px 0px;"><span>copyleft (ɔ) 2023-2026<a href="/" class="link"> haemolacriaa</a>. all wrongs reserved.</span></footer>
\ No newline at end of file diff --git a/public/components/head.html b/public/components/head.html new file mode 100644 index 0000000..d7d43cc --- /dev/null +++ b/public/components/head.html @@ -0,0 +1,7 @@ +<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="/public/site.css">
+ <meta name="description" content="Phosphenes 3.13.2026">
+ <title>haemolacriaa</title>
+</head>
\ No newline at end of file diff --git a/public/components/nav.html b/public/components/nav.html new file mode 100644 index 0000000..f9d5adc --- /dev/null +++ b/public/components/nav.html @@ -0,0 +1,17 @@ +<nav style="padding: 20px 30px 20px 30px;">
+ <div class="center" style="max-width: 1280px; justify-content: space-between; flex-wrap: wrap;">
+ <a href="/" class="link">haemolacriaa</a>
+ <button id="link-button" class="rm-l">
+ <svg id="link-button-open" width="24" height="24" viewBox="0 0 16 16" fill="currentColor" role="graphics-symbol"><g><g><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path></g></g></svg>
+ <svg id="link-button-close" class="rm" width="24" height="24" viewBox="0 0 16 16" fill="currentColor" role="graphics-symbol"><g><g><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path></g></g></svg>
+ </button>
+ <div id="link-list" class="nav-list rm">
+ <div class="nav-list-inner">
+ <a href="/" class="nav-link">home</a>
+ <a href="/music" class="nav-link">music</a>
+ <a href="/blog" class="nav-link">blog</a>
+ </div>
+ </div>
+ </div>
+ <script src="/public/components/nav_button.js" defer></script>
+</nav>
\ No newline at end of file diff --git a/public/components/nav_button.js b/public/components/nav_button.js new file mode 100644 index 0000000..ba5b6ba --- /dev/null +++ b/public/components/nav_button.js @@ -0,0 +1,18 @@ +const button = document.getElementById("link-button");
+const links = document.getElementById("link-list");
+const open = document.getElementById("link-button-open");
+const close = document.getElementById("link-button-close");
+
+button.addEventListener("click", () => {
+ if (links.classList.contains("rm")) {
+ links.classList.remove("rm");
+
+ open.classList.add("rm");
+ close.classList.remove("rm");
+ } else {
+ links.classList.add("rm");
+
+ open.classList.remove("rm");
+ close.classList.add("rm");
+ }
+});
\ No newline at end of file |