From ccf1d7f8a55cb76617abaceca18ac6ea6e29fa90 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Thu, 14 Sep 2023 17:55:01 +0200
Subject: [PATCH] Remove old style, add navbar

---
 static/css/style.css  | 191 ++----------------------------------------
 templates/index.html  |  11 +--
 templates/navbar.html |  19 +++++
 3 files changed, 29 insertions(+), 192 deletions(-)
 create mode 100644 templates/navbar.html

diff --git a/static/css/style.css b/static/css/style.css
index 45f0a20..d4cda74 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,189 +1,12 @@
-/* Normal font */
-@font-face {
-  font-family: "Luciole";
-  font-style: normal;
-  font-weight: normal;
-  src: url(/css/fonts/Luciole-Regular.ttf);
-}
-
-/* Italic font */
-@font-face {
-  font-family: "Luciole";
-  font-style: italic;
-  font-weight: normal;
-  src: url(/css/fonts/Luciole-Regular-Italic.ttf);
-}
-
-/* Bold fond */
-@font-face {
-  font-family: "Luciole";
-  font-style: normal;
-  font-weight: bold;
-  src: url(/css/fonts/Luciole-Bold.ttf);
-}
-
-/* Bold italic font */
-@font-face {
-  font-family: "Luciole";
-  font-style: italic;
-  font-weight: bold;
-  src: url(/css/fonts/Luciole-Bold-Italic.ttf);
-}
-
-/* Page bottom */
-footer {
-  margin-top: 1em;
-  height: 3rem;
-}
-
-/* Regular tags */
-html {
-  position: relative;
-  min-height: 100vh;
-  height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  position: relative;
-  padding-bottom: 3em;
-  min-height: 90%;
-  background-color: rgb(24, 24, 24);
-}
-
-p,
-h1,
-h2,
-h3,
-li,
-a {
-  font-family: "Luciole", sans-serif;
-}
-
-::selection {
-  color: rgb(255, 255, 255);
-  background: rgba(124, 75, 173, 0.486);
-}
-
-/* Frames */
-h1.subtitle {
-  text-decoration: none;
-  color: rgb(28, 118, 236);
-}
-
-h1#title {
-  text-align: center;
-  color: rgb(28, 236, 174);
-}
-
-h2.subtitle,
-h2.subtitle a {
-  color: rgb(28, 118, 236) !important;
-}
-
-h3.subsubtitle,
-#content h3.subsubtitle a {
-  text-align: left;
-  color: rgb(149, 87, 201);
-}
-
-#content h3.subsubtitle a:hover {
-  color: rgb(0, 181, 236);
-  transition: color 0.1s;
-}
-
-div#content {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 2%;
-  padding: 0.9% 0.9% 0.9% 0.9%;
-  width: 42%;
-  border-radius: 6px;
-  border: 1px solid rgb(170, 170, 170);
-  text-align: center;
-}
-
-@media only screen and (max-width: 850px) {
-  /* Mobile display */
-  div#content {
-    width: 90%;
-  }
-}
-
-#content a,
-#content a:visited,
-#content ul {
-  text-decoration: none;
-  color: rgb(201, 201, 201);
-  text-align: center;
-}
-
-#content p {
-  text-decoration: none;
-  color: rgb(201, 201, 201);
-  text-align: center;
-  padding: 0.7em;
-}
-
-#content a:hover {
-  color: rgb(0, 181, 236);
-  transition: color 0.1s;
-}
-
-/* https://stackoverflow.com/a/40244401/15436737 */
-
-#content a {
-  position: relative;
-  text-decoration: none;
+.navbar li {
   display: inline-block;
 }
 
-#content a:after {
-  display: block;
+.navbar p::after {
+  content: "·";
+  padding: 10px;
+}
+
+.navbar li:last-child p::after {
   content: "";
-  border-bottom: solid 3px;
-  transform: scaleX(0);
-  transition: transform 250ms ease-in-out;
-  transform-origin: 100% 50%;
-}
-
-#content a:hover:after {
-  transform: scaleX(1);
-  transform-origin: 0 50%;
-}
-
-/* ------------------------------------------- */
-
-div.subcontent {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 5%;
-  padding: 1.2% 1.2% 1.2% 1.2%;
-  width: 78%;
-  border-radius: 6px;
-  border: 1px solid rgb(170, 170, 170);
-  text-align: center;
-}
-
-#listecontent li {
-  margin-bottom: 0.5em;
-}
-
-/* Back links going to the index */
-footer.backToIndexPage {
-  text-align: center;
-}
-
-footer.backToIndexPage a {
-  color: rgb(114, 180, 76);
-  text-decoration: none;
-}
-
-footer.backToIndexPage a:hover {
-  color: rgb(152, 187, 132);
-}
-
-/* Hide content */
-.hide {
-  display: none;
 }
diff --git a/templates/index.html b/templates/index.html
index b86b402..4d4d99e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,9 @@
 <!DOCTYPE html>
-<html class="index" lang="fr">
+<html lang="fr">
   <head dir="ltr">
     {{>head.html}}
   </head>
-  <body class="index">
-    <div id="content">
-      <p style="font-weight: bold;"><a href="/blog">Blog</a></p>
-      <p><a href="/portfolio">Portfolio</a></p>
-      <p><a href="/networks">Réseaux</a></p>
-      <p><a href="/contrib">Contributions</a></p>
-      <p><a href="https://liv.mylloon.fr">Cours</a> (external)</p>
+  <body>
+    {{>navbar.html}}
   </body>
 </html>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..81640ba
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,19 @@
+<nav class="navbar">
+  <ul>
+    <li>
+      <p><a href="/blog">Blog</a></p>
+    </li>
+    <li>
+      <p><a href="/portfolio">Portfolio</a></p>
+    </li>
+    <li>
+      <p><a href="/networks">Réseaux</a></p>
+    </li>
+    <li>
+      <p><a href="/contrib">Contributions</a></p>
+    </li>
+    <li>
+      <p><a href="https://liv.mylloon.fr">Cours</a></p>
+    </li>
+  </ul>
+</nav>