diff options
| -rw-r--r-- | public/blog.html | 8 | ||||
| -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 | ||||
| -rw-r--r-- | public/index.html | 12 | ||||
| -rw-r--r-- | public/music.html | 12 | ||||
| -rw-r--r-- | public/site.css | 56 |
8 files changed, 123 insertions, 8 deletions
diff --git a/public/blog.html b/public/blog.html new file mode 100644 index 0000000..916ed05 --- /dev/null +++ b/public/blog.html @@ -0,0 +1,8 @@ +<!DOCTYPE html>
+<html lang="en">
+ <body>
+ <main style="min-height: 100vh;">
+ <a>Come back later once I write something</a>
+ </main>
+ </body>
+</html>
\ No newline at end of file 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 diff --git a/public/index.html b/public/index.html index 524959f..ab6a3ec 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,8 @@ -<!DOCTYPE html> -<html lang="en"> - <p>Hello and welcome</p> -</html> +<!DOCTYPE html>
+<html lang="en">
+ <body>
+ <main style="min-height: 100vh;">
+ <a>Under construction</a>
+ </main>
+ </body>
+</html>
\ No newline at end of file diff --git a/public/music.html b/public/music.html index 22ba402..ab6a3ec 100644 --- a/public/music.html +++ b/public/music.html @@ -1,4 +1,8 @@ -<!DOCTYPE html> -<html lang="en"> - <p>This is my music</p> -</html> +<!DOCTYPE html>
+<html lang="en">
+ <body>
+ <main style="min-height: 100vh;">
+ <a>Under construction</a>
+ </main>
+ </body>
+</html>
\ No newline at end of file diff --git a/public/site.css b/public/site.css new file mode 100644 index 0000000..14088c2 --- /dev/null +++ b/public/site.css @@ -0,0 +1,56 @@ +.center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.rm {
+ display: none;
+}
+
+@media (width >= 768px) {
+ .rm-l {
+ display: none;
+ }
+}
+
+.link {
+ text-decoration: none;
+}
+
+.nav-link {
+ text-decoration: none;
+
+ @media (width <= 768px) {
+ padding: 20px 0px 0px 10px;
+ }
+
+ @media (width >= 768px) {
+ padding-left: 20px;
+ }
+}
+
+.nav-list {
+ @media (width <= 768px) {
+ width: 100%;
+ }
+
+ @media (width >= 768px) {
+ display: block;
+ width: auto;
+ }
+}
+
+.nav-list-inner {
+ display: flex;
+
+ @media (width <= 768px) {
+ flex-direction: column;
+ }
+
+ @media (width >= 768px) {
+ flex-direction: row;
+ }
+}
\ No newline at end of file |