sass: clean up code and formating

sass/components/_flexs.scss

 // flex space between basic styles
-header > nav, main, main > div{
+header > nav,
+main,
+main > div {
   display: flex;
   justify-content: space-between;
 }
 
-header > nav > ul,.flex-center {
+header > nav > ul {
   display: flex;
   align-items: center;
 }

sass/components/_navs.scss

-.nav, main>nav {
+main > nav,
+aside {
   position: sticky;
   top: 1rem;
   height: calc(110vh - 1rem);
@@ -10,7 +11,8 @@
 }
 
 @media (max-width: 1000px) {
-    .nav, main>nav {
+  main > nav,
+  aside {
     top: -0.25rem;
     border: none;
     bottom: 0;

sass/layouts/_header.scss

@@ -71,9 +71,10 @@ header {
       position: absolute;
       background: transparent;
     }
-    &:hover,& input:focus, & input:hover {
+    &:hover,
+    & input:focus,
+    & input:hover {
       width: 34rem;
-
     }
   }
 }

sass/layouts/_sidebar.scss

@@ -15,29 +15,29 @@ main > nav{
     svg {
       position: relative;
       cursor: pointer;
-        top: 0.150rem;
+      top: 0.15rem;
       left: -0.15rem;
     }
-   input[type="checkbox"] {
+    input[type='checkbox'] {
       position: absolute;
       opacity: 0;
       overflow: hidden;
       cursor: pointer;
       z-index: 2;
     }
-    input[type="checkbox"] ~ ul.subsection {
+    input[type='checkbox'] ~ ul.subsection {
       display: none;
     }
-     input[type="checkbox"]:checked ~ ul.subsection {
+    input[type='checkbox']:checked ~ ul.subsection {
       display: block;
     }
-     input[type="checkbox"] ~ nav > li > svg {
+    input[type='checkbox'] ~ nav > li > svg {
       transform: rotate(0deg);
-        transition: .2s ease-in-out;
+      transition: 0.2s ease-in-out;
     }
-    input[type="checkbox"]:checked ~ svg {
+    input[type='checkbox']:checked ~ svg {
       transform: rotate(90deg);
-        transition: .2s ease-in-out;
+      transition: 0.2s ease-in-out;
     }
     &:hover {
       color: var(--black);
@@ -80,9 +80,6 @@ main > nav{
       border: none;
     }
   }
-  .sidebar {
-    margin-left: 0.5rem;
-  }
   #sidebar {
     display: block;
     left: 0;

sass/layouts/_toc.scss

@@ -46,12 +46,6 @@ aside {
     a:hover {
       color: var(--green);
     }
-    a.close {
-      display: block;
-    }
-  }
-  .toc {
-    margin-right: 0.5rem;
   }
   #toc {
     display: block;

sass/main.scss

@@ -5,7 +5,6 @@
 @import 'layouts/header';
 @import 'layouts/footer';
 
-
 :root {
   --black: #111111;
   --white: #ffffff;

sass/page.scss

@@ -6,7 +6,6 @@
 @import 'layouts/sidebar';
 @import 'layouts/toc';
 
-
 main {
   margin-bottom: 25px;
   margin-top: 15px;
@@ -27,5 +26,8 @@ main {
     width: 100%;
     height: 2.1rem;
     border-bottom: 1px solid var(--black);
+    a {
+      margin-left: 0.5rem;
+    }
   }
 }

templates/404.html

-{% extends 'base.html' %}
-
-{% block styles %}
-{{ macros::styles(file='section.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
-    404 Page Not Found
-{% endblock htmltitle %}
-
-{% block header %}
-    {{macros::header(current_url="/")}}
-{% endblock header %}
-{% block content %}
+{% extends 'base.html' %} {% block styles %} {{
+macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
+%} 404 Page Not Found {% endblock htmltitle %} {% block header %}
+{{macros::header(current_url="/")}} {% endblock header %} {% block content %}
 <div class="error">
   <h1>404</h1>
   <h2>Page Not Found</h2>
-<h3> The requested page doesn't exist
- or you don't have access to it. </h3>
+  <h3>The requested page doesn't exist or you don't have access to it.</h3>
 </div>
 {% endblock content %}

templates/authors/list.html

 {% extends 'base.html' %}
-

templates/base.html

@@ -29,7 +29,7 @@
         <link rel="stylesheet" href="{{ get_url(path='@fontsource/jetbrains-mono/400.css') }}">
         {% else %}
         {% set cdnurl = config.extra.cdnurl | default(value="https://cdn.jsdelivr.net/npm/") %}
-        <!--        <link rel="stylesheet" href="{{ cdnurl | safe }}normalize.css/normalize.css"> -->
+        {# <!--        <link rel="stylesheet" href="{{ cdnurl | safe }}normalize.css/normalize.css"> --> #}
         <link rel="stylesheet" href="{{cdnurl | safe }}modern-normalize/modern-normalize.min.css">
         <link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/400.css">
         <link rel="stylesheet" href="{{cdnurl | safe }}@fontsource/inter/700.css">

templates/macros.html

@@ -31,10 +31,12 @@
             <form>
                 <input id="userinput" type="search" placeholder="Search ..."
 						aria-label="Search ..." autocomplete="off">
+                {#
                 <!-- <button type="submit" title="Submit your search query.">
                                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"  preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29zM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9z" fill="currentColor"></path></svg>
                 </button>
                 -->
+                #}
                 <div id="suggestions"></div>
 				</form>
 			{% endif %}

templates/page.html

-{% extends "base.html" %}
-
-{% block styles %}
-    {{ macros::styles(file='page.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
-    {{ page.title }}
-{% endblock htmltitle %}
-
-{% block content %}
+{% extends "base.html" %} {% block styles %} {{ macros::styles(file='page.css')
+}} {% endblock styles %} {% block htmltitle %} {{ page.title }} {% endblock
+htmltitle %} {% block content %}
 <main>
   <div class="show-bar">
     <a href="#sidebar" class="sidebar" role="button" x-data="{ open:false}">
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="12" y="6" width="14" height="2"/><rect x="12" y="12" width="10" height="2"/><rect x="12" y="18" width="14" height="2"/><rect x="12" y="24" width="10" height="2"/><rect x="6" y="4" width="2" height="24"/></svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <rect x="12" y="6" width="14" height="2" />
+        <rect x="12" y="12" width="10" height="2" />
+        <rect x="12" y="18" width="14" height="2" />
+        <rect x="12" y="24" width="10" height="2" />
+        <rect x="6" y="4" width="2" height="24" />
+      </svg>
     </a>
     <a href="#toc" class="toc" role="button">
-  <svg  xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="6" y="6" width="14" height="2"/><rect x="10" y="12" width="10" height="2"/><rect x="6" y="18" width="14" height="2"/><rect x="10" y="24" width="10" height="2"/><rect x="24" y="4" width="2" height="24"/></svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <rect x="6" y="6" width="14" height="2" />
+        <rect x="10" y="12" width="10" height="2" />
+        <rect x="6" y="18" width="14" height="2" />
+        <rect x="10" y="24" width="10" height="2" />
+        <rect x="24" y="4" width="2" height="24" />
+      </svg>
     </a>
   </div>
   {{ page_macros::sidebar(current_url=current_url) }}
@@ -23,14 +37,11 @@
     <h1 class="title">{{ page.title }}</h1>
     {% block sections %}
     <ul class="sections">
-        {{ page_macros::relative_path() }}
-        {{ page_macros::word_count() }}
-        {{ page_macros::reading_time() }}
-        {{ page_macros::date() }}
-        {{ page_macros::taxonomies_authors() }}
+      {{ page_macros::relative_path() }} {{ page_macros::word_count() }} {{
+      page_macros::reading_time() }} {{ page_macros::date() }} {{
+      page_macros::taxonomies_authors() }}
     </ul>
-{% endblock sections %}
-           {{ page.content | safe }}
+    {% endblock sections %} {{ page.content | safe }}
   </article>
   {{ page_macros::toc(page=page) }}
 </main>

templates/section.html

-{% extends "base.html" %}
-
-{% block styles %}
-{{ macros::styles(file='section.css') }}
-{% endblock styles %}
-
-{% block htmltitle %}
-    {{ macros::title_or_last(component=section) }} - {{ config.title }}
-{% endblock htmltitle %}
-
-{% block title %}
-    {{ macros::title_or_last(component=section) }}
-{% endblock title %}
-
-{% block math %}
-{{ macros::math() }}
-{% endblock math %}
-{% block content %}
+{% extends "base.html" %} {% block styles %} {{
+macros::styles(file='section.css') }} {% endblock styles %} {% block htmltitle
+%} {{ macros::title_or_last(component=section) }} - {{ config.title }} {%
+endblock htmltitle %} {% block title %} {{
+macros::title_or_last(component=section) }} {% endblock title %} {% block math
+%} {{ macros::math() }} {% endblock math %} {% block content %}
 <section>
   {% for page in section.pages %}
   <a href="{{ page.permalink }}">
@@ -23,8 +11,7 @@
     <div>
       {% if page.date %}
       <time> {{page.date}} </time>
-         {% endif %}
-         {% if page.description %}
+      {% endif %} {% if page.description %}
       <p>{{ page.description }}</p>
       {% endif %}
     </div>