Implemented new design

assets/js/page.js

@@ -1,43 +1,11 @@
-import Cookies from 'js-cookie';
 import '/assets/scss/page.scss';
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
-        initOverflow();
         initExternalLinks();
-        initNinetiesToggle();
     }
 });
 
-function initOverflow() {
-    let body = document.querySelector('body');
-    let nineties = document.querySelector('.nineties-toggle');
-    let container = document.querySelector('.container');
-    container.style.height = (body.scrollHeight > window.outerHeight) ? 'auto' : body.scrollHeight - nineties.scrollHeight + 'px';
-}
-
-function initNinetiesToggle() {
-    let nineties = document.querySelector('.nineties-toggle');
-    let container = document.querySelector('.container');
-    nineties.addEventListener('click', function() {
-        let body = document.querySelector('body');
-        if (body.classList.contains('nineties')) {
-            body.classList.remove('nineties');
-            Cookies.remove('nineties');
-        } else {
-            body.classList.add('nineties');
-            Cookies.set('nineties', true, { sameSite: 'strict' });
-        }
-    })
-
-    if(
-        nineties.getBoundingClientRect().left < container.getBoundingClientRect().right &&
-        nineties.getBoundingClientRect().bottom > container.getBoundingClientRect().top
-    ) {
-        nineties.style.position = 'initial';
-        nineties.style.textAlign = 'right';
-    }
-}
 
 function initExternalLinks() {
     document.querySelectorAll('a').forEach(elem => {

assets/scss/base.scss

@@ -7,83 +7,54 @@ $orange: #d6972a;
 $font: 'Fira Code', monospace;
 
 html {
-  height: 100%;
+  position: relative;
+  min-height: 100%;
 }
 body {
+  margin-bottom: 60px; /* Margin bottom by footer height */
+  font-family: 'Mukta', sans-serif;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px; /* Set the fixed height of the footer here */
+  line-height: 60px; /* Vertically center the text there */
+}
+
+nav {
   background-color: $black;
-  background-image: url("../images/background.png");
-  color: $orange;
-  font-family: $font;
-  height: 100%;
 
-  &.nineties {
+  ul {
-    color: $black;
-    -webkit-animation: background 2s linear infinite;
-    -moz-animation: background 2s linear infinite;
-    animation: background 2s linear infinite;
-    background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet, red, orange, yellow, green, aqua, blue, violet, red);
-    background-size: 200%  100%;
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
-
-    @-webkit-keyframes background {
-      0%{background-position:100% 50%}
-      100%{background-position:0% 50%}
-    }
-    @-moz-keyframes background {
-      0%{background-position:100% 50%}
-      100%{background-position:0% 50%}
-    }
-    @keyframes background {
-      0%{background-position:100% 50%}
-      100%{background-position:0% 50%}
-    }
-
-    a {
-      color: $black;
-    }
-
-    .nineties-toggle {
-      background: none;
-      color: $black;
-    }
-  }
-
-  .nineties-toggle {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
-  }
-
-  a {
-    color: $orange;
-  }
-
-  .container {
     display: flex;
-    height: 100%;
+    justify-content: end;
-    width: 100%;
+    list-style: none;
-    justify-content: center;
+    padding: 0;
-    align-items: center;
+    margin: 0;
-    flex-direction: column;
-    padding: 10px;
-  }
 
-  header {
+    li {
-    text-align: center;
+      width: 150px;
-
+      text-align: right;
-    ul {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-around;
-      list-style: none;
-      padding: 0;
     }
   }
 }
+
+header {
+  background-color: $black;
+  color: $orange;
+}
+
+main {
+  h1 {
+    background-color: $orange;
+    padding: 5px;
+  }
+  h2 {
+    background-color: $orange;
+    padding: 2px;
+  }
+}
+
+a {
+  color: $orange;
+}

assets/scss/fonts.scss

@@ -1,54 +1,64 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 21, 2023 */
+
 @font-face {
-    font-family: 'Fira Code';
+    font-family: 'Mukta';
-    src: url('../fonts/FiraCode-Regular.woff2') format('woff2'),
+    src: url('../fonts/mukta-extrabold-webfont.woff2') format('woff2'),
-        url('../fonts/FiraCode-Regular.woff') format('woff');
+    url('../fonts/mukta-extrabold-webfont.woff') format('woff');
-    font-weight: normal;
+    font-weight: 800;
     font-style: normal;
-    font-display: swap;
+
 }
 
 @font-face {
-    font-family: 'Fira Code';
+    font-family: 'Mukta';
-    src: url('../fonts/FiraCode-Medium.woff2') format('woff2'),
+    src: url('../fonts/mukta-bold-webfont.woff2') format('woff2'),
-        url('../fonts/FiraCode-Medium.woff') format('woff');
+    url('../fonts/mukta-bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Mukta';
+    src: url('../fonts/mukta-semibold-webfont.woff2') format('woff2'),
+    url('../fonts/mukta-semibold-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Mukta';
+    src: url('../fonts/mukta-medium-webfont.woff2') format('woff2'),
+    url('../fonts/mukta-medium-webfont.woff') format('woff');
     font-weight: 500;
     font-style: normal;
-    font-display: swap;
+
 }
 
 @font-face {
-    font-family: 'Comic Neue';
+    font-family: 'Mukta';
-    src: url('../fonts/ComicNeue-Bold.woff2') format('woff2'),
+    src: url('../fonts/mukta-regular-webfont.woff2') format('woff2'),
-        url('../fonts/ComicNeue-Bold.woff') format('woff');
+    url('../fonts/mukta-regular-webfont.woff') format('woff');
-    font-weight: bold;
+    font-weight: 400;
     font-style: normal;
-    font-display: swap;
+
 }
 
 @font-face {
-    font-family: 'Comic Neue';
+    font-family: 'Mukta';
-    src: url('../fonts/ComicNeue-BoldItalic.woff2') format('woff2'),
+    src: url('../fonts/mukta-light-webfont.woff2') format('woff2'),
-        url('../fonts/ComicNeue-BoldItalic.woff') format('woff');
+    url('../fonts/mukta-light-webfont.woff') format('woff');
-    font-weight: bold;
+    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Comic Neue';
-    src: url('../fonts/ComicNeue-Regular.woff2') format('woff2'),
-        url('../fonts/ComicNeue-Regular.woff') format('woff');
-    font-weight: normal;
     font-style: normal;
-    font-display: swap;
+
 }
 
 @font-face {
-    font-family: 'Comic Neue';
+    font-family: 'Mukta';
-    src: url('../fonts/ComicNeue-Italic.woff2') format('woff2'),
+    src: url('../fonts/mukta-extralight-webfont.woff2') format('woff2'),
-        url('../fonts/ComicNeue-Italic.woff') format('woff');
+    url('../fonts/mukta-extralight-webfont.woff') format('woff');
-    font-weight: normal;
+    font-weight: 200;
-    font-style: italic;
+    font-style: normal;
-    font-display: swap;
-}
 
+}

src/Controller/DefaultController.php

@@ -15,6 +15,7 @@ class DefaultController extends AbstractController
         $return = $page->getPage($kernel, $slug);
         $response = new Response('', (int)$return['status']);
         return $this->render('/page.html.twig', [
+            'nav' => $return['nav'],
             'header' => $return['header'],
             'content' => $return['content'],
             'title' => $return['title'],

src/Repository/Page.php

@@ -11,6 +11,7 @@ class Page
     public function getPage(KernelInterface $kernel, string $page)
     {
         $return['header'] = file_get_contents($kernel->getCacheDir() . '/pages/_main.md');
+        $return['nav'] = file_get_contents($kernel->getCacheDir() . '/pages/_nav.md');
         $titles = json_decode(file_get_contents($kernel->getCacheDir() . '/pages/titles.json'), true);
         if(file_exists($kernel->getCacheDir() . '/pages/' . $page . '.md')) {
             $return['title'] = $titles[$page] ?? '';

templates/base.html.twig

@@ -23,12 +23,14 @@
 
     </head>
     
-    <body{% if nineties %} class="nineties"{% endif %}>
+    <body>
-        <div class="nineties-toggle">{% if nineties %}My eyes hurt{% else %}Take me back in time{% endif %}</div>
+        {% block content %}{% endblock %}
-        <div class="container">
+        {% block extrahtml %}{% endblock %}
-            {% block content %}{% endblock %}
+        <footer class="footer">
-            {% block extrahtml %}{% endblock %}
+            <div class="container">
-        </div>
+                <span class="text-muted">Design inspired by Dall-E 2</span>
+            </div>
+        </footer>
     </body>
 </html>
 

templates/page.html.twig

@@ -1,8 +1,21 @@
 {% extends "base.html.twig" %}
 {% block title %}{{ title }}{% endblock %}
 {% block content %}
-    <header>{{ header | markdown | raw }}</header>
+    <nav>
-    <main>{{ content | markdown | raw }}</main>
+        <div class="container py-3">
+        {{ nav | markdown | raw }}
+        </div>
+    </nav>
+    <header>
+        <div class="container py-4">
+            {{ header | markdown | raw }}
+        </div>
+    </header>
+    <main>
+        <div class="container py-4">
+            {{ content | markdown | raw }}
+        </div>
+    </main>
 {% endblock %}
 
 {% block styles %}