feat: now using flex for the 11ty-nav

.eleventy.js

@@ -1,6 +1,5 @@
 const pluginNavigation = require("@11ty/eleventy-navigation")
 const htmlmin = require("html-minifier");
-
 const markdownIt = require("markdown-it");
 const markdownItAttrs = require('markdown-it-attrs');
 const options = {

.vscode/launch.json

@@ -4,9 +4,9 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Launch via NPM",
+      "name": "Serve the website",
       "console": "integratedTerminal",
-      "runtimeExecutable": "npm",
+      "runtimeExecutable": "yarn",
       "runtimeArgs": [
         "run",
         "start"

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "watch:sass": "sass --no-source-map --watch src/scss:_site/css",
     "watch:eleventy": "eleventy --serve",
-    "build:sass": "sass --no-source-map src/scss:_site/css",
+    "build:sass": "sass --no-source-map --style compressed src/scss:_site/css",
     "build:eleventy": "ELEVENTY_ENV=prod eleventy",
     "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:sass build:eleventy"

src/_includes/layout_eportfolio.njk

@@ -23,8 +23,12 @@ username: Laureηt
       <i class="blink" style="display:inline;">_</i>
     </header>
 
-    <nav id="11ty-nav" role="navigation">
-      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+    <nav role="navigation">
+      <div class="11ty-nav">
+        {% for entry in collections.all | eleventyNavigation %}
+          <a href="{{ entry.url | url }}">{{ entry.title }}</a>
+        {% endfor %}
+      </div>
       <hr>
     </nav>
 

src/scss/eportfolio.scss

@@ -4,7 +4,13 @@ hr {
 }
 
 nav {
+  div {
+    display: flex;
+    gap: 1rem;
+  }
+
   hr {
+    margin: 0.5rem 0 2rem 0;
     visibility: visible;
   }
 }

src/scss/style.scss

@@ -85,23 +85,6 @@ video {
   margin: 0 auto;
 }
 
-nav {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 1em 0 0 0;
-
-    li {
-      display: inline;
-      margin-right: .5em;
-    }
-  }
-
-  hr {
-    margin: 0.5rem 0 2rem 0;
-  }
-}
-
 @media only screen and (max-width: 64rem) {
   body {
     width: calc(100% - 4rem);