✅ w3 validation

_includes/navbar.html

@@ -1,32 +1,201 @@
-<header class="navbar" role="navigation">
+<div class="navbar" role="navigation">
   <nav class="menu">
     <input type="checkbox" id="menu-trigger" class="menu-trigger" />
     <label for="menu-trigger">
       <span class="menu-icon">
-        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z'/></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
+          />
+        </svg>
       </span>
     </label>
     <a id="mood">
-      <svg class="mood-sunny" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>LIGHT</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+      <svg
-      <svg class="mood-moon" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>DARK</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+        class="mood-sunny"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 512 512"
+      >
+        <title>LIGHT</title>
+        <line
+          x1="256"
+          y1="48"
+          x2="256"
+          y2="96"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="256"
+          y1="416"
+          x2="256"
+          y2="464"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="403.08"
+          y1="108.92"
+          x2="369.14"
+          y2="142.86"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="142.86"
+          y1="369.14"
+          x2="108.92"
+          y2="403.08"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="464"
+          y1="256"
+          x2="416"
+          y2="256"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="96"
+          y1="256"
+          x2="48"
+          y2="256"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="403.08"
+          y1="403.08"
+          x2="369.14"
+          y2="369.14"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="142.86"
+          y1="142.86"
+          x2="108.92"
+          y2="108.92"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <circle
+          cx="256"
+          cy="256"
+          r="80"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+      </svg>
+      <svg
+        class="mood-moon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 512 512"
+      >
+        <title>DARK</title>
+        <line
+          x1="256"
+          y1="48"
+          x2="256"
+          y2="96"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="256"
+          y1="416"
+          x2="256"
+          y2="464"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="403.08"
+          y1="108.92"
+          x2="369.14"
+          y2="142.86"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="142.86"
+          y1="369.14"
+          x2="108.92"
+          y2="403.08"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="464"
+          y1="256"
+          x2="416"
+          y2="256"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="96"
+          y1="256"
+          x2="48"
+          y2="256"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="403.08"
+          y1="403.08"
+          x2="369.14"
+          y2="369.14"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <line
+          x1="142.86"
+          y1="142.86"
+          x2="108.92"
+          y2="108.92"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+        <circle
+          cx="256"
+          cy="256"
+          r="80"
+          style="stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"
+        />
+      </svg>
     </a>
     <div class="trigger">
       <div class="trigger-container">
-        {% assign url = page.url %}
+        {% assign url = page.url %} {% for menu in site.data.menus %} {% if url
-        {% for menu in site.data.menus %}
+        == menu.url %}
-          {% if url == menu.url %}
         <a class="menu-link active" href="{{ menu.url }}">{{ menu.title }}</a>
-          {% else %}
+        {% else %} {% if menu.external %}
-            {% if menu.external %}
+        <a
-              <a class="menu-link" href="{{ menu.url }}" target="_blank" rel="noopener">{{ menu.title }}</a>
+          class="menu-link"
+          href="{{ menu.url }}"
+          target="_blank"
+          rel="noopener"
+          >{{ menu.title }}</a
+        >
         {% else %}
         <a class="menu-link" href="{{ menu.url }}">{{ menu.title }}</a>
-            {% endif %}
+        {% endif %} {% endif %} {% endfor %}
-          {% endif %}
-        {% endfor %}
         <a class="menu-link rss" href="/feed.xml">
-          <svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 512 512' fill='#ED812E'><title>RSS</title><path d='M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z'/><path d='M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z'/><path d='M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z'/></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="17"
+            height="17"
+            viewBox="0 0 512 512"
+            fill="#ED812E"
+          >
+            <title>RSS</title>
+            <path
+              d="M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z"
+            />
+            <path
+              d="M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z"
+            />
+            <path
+              d="M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z"
+            />
+          </svg>
         </a>
       </div>
+    </div>
   </nav>
-</header>
+</div>