diff options
| -rw-r--r-- | _includes/base.njk | 2 | ||||
| -rw-r--r-- | _includes/nav.njk | 7 | ||||
| -rw-r--r-- | assets/css/main.css | 52 | ||||
| -rw-r--r-- | assets/css/theme.css | 3 | ||||
| -rw-r--r-- | assets/js/main.js | 10 | ||||
| -rw-r--r-- | content/blog.md | 2 | ||||
| -rw-r--r-- | content/index.md | 2 | ||||
| -rw-r--r-- | eleventy.config.mjs | 10 |
8 files changed, 81 insertions, 7 deletions
diff --git a/_includes/base.njk b/_includes/base.njk index ec642b7..c80dfcf 100644 --- a/_includes/base.njk +++ b/_includes/base.njk @@ -15,7 +15,7 @@ <body> <header> <a href="{{"/" | url}}"><h1>{{ site.title }}</h1></a> - + <button id="menu-open" class="mobile-menu">[OPEN]</button> {% include "nav.njk" %} </header> <main> diff --git a/_includes/nav.njk b/_includes/nav.njk index 0bbd49b..a0b4ab8 100644 --- a/_includes/nav.njk +++ b/_includes/nav.njk @@ -1,7 +1,8 @@ -<nav> +<nav id="menu"> + <button id="menu-close" class="mobile-menu">[CLOSE]</button> <ul> - {%- for p in collections.all -%} - {% if p.data.nav == true %} + {%- for p in collections.navItems -%} + {% if p.data.nav %} <li> <a href="{{ p.url }}" {%if p.url == page.url %}class="active"{%endif%}>{{ p.data.title }}</a> </li> diff --git a/assets/css/main.css b/assets/css/main.css index db58044..6a669d9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4,7 +4,7 @@ body { background: var(--base); color: var(--text); margin: 0; - padding: 0; + padding: 0.2rem; } a { @@ -93,4 +93,54 @@ footer .social { header h1 { font-size: medium; } +} + +.mobile-menu { + display: none; +} + +@media screen and (max-width: 500px) { + nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: var(--base); + z-index: 10000; + padding: 1.5rem 0.5rem; + transform: scale(0%); + filter: saturate(0) brightness(0); + pointer-events: none; + transition: transform steps(8) 200ms 300ms,filter steps(4) 200ms 0ms; + overflow-y: auto; + } + .mobile-menu { + display: block; + background: none; + color: var(--text); + border: none; + font-weight: bold; + padding: 0.8rem; + } + + nav.open { + transform: scale(100%); + pointer-events: all; + filter: saturate(1) brightness(1); + transition: transform steps(8) 200ms,filter steps(4) 200ms 300ms; + } + nav ul { + flex-direction: column; + } + nav .mobile-menu { + width: 100%; + text-align: right; + margin-bottom: 1rem; + } + nav ul a { + display: block; + padding: 0.5rem; + } }
\ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme.css index 725bda4..d47d9b9 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -9,4 +9,7 @@ html { font-family: "JetBrains Mono", monospace; +} +* { + font-family: "JetBrains Mono", monospace; }
\ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index bd14b0c..d32765e 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,3 +1,13 @@ +const menuOpen = document.getElementById("menu-open"); +const menu = document.getElementById("menu"); +const menuClose = document.getElementById("menu-close"); + +if (menu && menuOpen && menuClose) { + menuOpen.addEventListener("click", () => menu.classList.add("open")); + menuClose.addEventListener("click", () => menu.classList.remove("open")); +} + + const elements = document.querySelectorAll(".my-age") const specificDate = new Date("2010-05-11T22:50:00"); diff --git a/content/blog.md b/content/blog.md index bffe34b..6ffc74b 100644 --- a/content/blog.md +++ b/content/blog.md @@ -1,7 +1,7 @@ --- title: Blog layout: page -nav: true +nav: 20 --- Some interesting posts. :) diff --git a/content/index.md b/content/index.md index 9342d9d..03962eb 100644 --- a/content/index.md +++ b/content/index.md @@ -1,6 +1,6 @@ --- title: "Home" -nav: true +nav: 10 --- Hey, I'm Spelis. diff --git a/eleventy.config.mjs b/eleventy.config.mjs index 4c7c7ad..359695a 100644 --- a/eleventy.config.mjs +++ b/eleventy.config.mjs @@ -7,6 +7,16 @@ export default function(eleventyConfig) { eleventyConfig.addNunjucksFilter("date", (dateObj, formatString = 'MM.dd.yyyy') => format(dateObj, formatString)) + eleventyConfig.addCollection("navItems", function (collectionsApi) { + return collectionsApi.getAll().filter(i => { + if (i.data.nav) { + return i.data.nav > 0 + } + }).sort(function (a, b) { + return (a.data.nav ?? -1000) - (b.data.nav ?? -1000); + }); + }); + eleventyConfig.addBundle("css", { toFileDirectory: "assets/css/bundles/", |