From 9028c571ffb814161d68bcbeeaa7a479ea80a17b Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Sat, 19 Apr 2025 04:10:25 +0200
Subject: [PATCH] default layout: extract parts

---
 .../css/{layout.css => layouts/default.css}   |  2 +-
 src/_assets/css/parts/hero.css                | 92 +++++++++++++++++++
 src/_assets/css/{ => parts}/menu.css          |  7 --
 src/_includes/layouts/base.njk                |  7 +-
 src/_includes/layouts/index.njk               |  9 ++
 src/_includes/parts/hero.njk                  | 18 ++++
 src/_includes/parts/menu.njk                  |  3 -
 7 files changed, 124 insertions(+), 14 deletions(-)
 rename src/_assets/css/{layout.css => layouts/default.css} (95%)
 create mode 100644 src/_assets/css/parts/hero.css
 rename src/_assets/css/{ => parts}/menu.css (97%)
 create mode 100644 src/_includes/layouts/index.njk
 create mode 100644 src/_includes/parts/hero.njk

diff --git a/src/_assets/css/layout.css b/src/_assets/css/layouts/default.css
similarity index 95%
rename from src/_assets/css/layout.css
rename to src/_assets/css/layouts/default.css
index 0ff116f..88c4afa 100644
--- a/src/_assets/css/layout.css
+++ b/src/_assets/css/layouts/default.css
@@ -30,4 +30,4 @@
   }
 }
 
-/* @see ./menu.css */
+/* @see ../parts/menu.css */
diff --git a/src/_assets/css/parts/hero.css b/src/_assets/css/parts/hero.css
new file mode 100644
index 0000000..01e0858
--- /dev/null
+++ b/src/_assets/css/parts/hero.css
@@ -0,0 +1,92 @@
+.hero {
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  padding: calc(0.5 * var(--step));
+  --hero-border: calc(0.5 * var(--step)) solid var(--color-inactive);
+
+  font-family: Xecut;
+  font-size: calc(3 * var(--step));
+}
+@media (max-width: 500px) {
+  .hero {
+    align-items: normal;
+    flex-direction: row-reverse;
+    font-size: calc(2 * var(--step));
+  }
+}
+
+.hero:before,
+.hero:after {
+  content: '';
+
+  position: absolute;
+  right: 0;
+  z-index: -1;
+
+  width: 90%;
+  height: calc(1 * var(--step));
+  border-right: var(--hero-border);
+  border-left: var(--hero-border);
+}
+.hero:before {
+  top: calc(0.5 * var(--step));
+  border-top: var(--hero-border);
+}
+.hero:after {
+  bottom: calc(1 * var(--step));
+  border-bottom: var(--hero-border);
+}
+
+.tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.tag {
+  padding: calc(0.25 * var(--step)) calc(1.5 * var(--step));
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+@media (max-width: 500px) {
+  .tag {
+    flex-grow: 1;
+  }
+}
+
+.tower_cell {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+@media (max-width: 500px) {
+  .tower_cell {
+    align-items: flex-end;
+  }
+}
+
+.tower {
+  width: calc(18 * var(--step));
+  margin: calc(4 * var(--step));
+}
+@media (prefers-color-scheme: dark) {
+  .tower {
+    filter: invert(1);
+  }
+}
+@media (max-width: 500px) {
+  .tower {
+    max-width: calc(10 * var(--step));
+    margin: calc(1 * var(--step));
+  }
+}
diff --git a/src/_assets/css/menu.css b/src/_assets/css/parts/menu.css
similarity index 97%
rename from src/_assets/css/menu.css
rename to src/_assets/css/parts/menu.css
index 8ff6725..bebfa28 100644
--- a/src/_assets/css/menu.css
+++ b/src/_assets/css/parts/menu.css
@@ -176,10 +176,3 @@ header.menu .nav-langs .lang-separator {
 header.menu .nav-langs .lang-separator:first-child {
   display: none;
 }
-
-/* Hidden Logo */
-
-.desktop-logo {
-  display: none;
-  margin-block-start: auto;
-}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 24b9185..da30594 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -17,12 +17,12 @@
 
     <link rel="stylesheet" href="/_assets/css/fonts.css">
     <link rel="stylesheet" href="/_assets/css/vendor.css">
-
     <link rel="stylesheet" href="/_assets/css/variables.css">
     <link rel="stylesheet" href="/_assets/css/base.css">
+    <link rel="stylesheet" href="/_assets/css/layouts/default.css">
+    <link rel="stylesheet" href="/_assets/css/parts/menu.css">
 
-    <link rel="stylesheet" href="/_assets/css/layout.css">
-    <link rel="stylesheet" href="/_assets/css/menu.css">
+    {% block extra_css %}{% endblock %}
   </head>
   <body>
     <div class="default-layout">
@@ -31,5 +31,6 @@
         {{ content | safe }}
       </main>
     </div>
+    {% block extra_js %}{% endblock %}
   </body>
 </html>
diff --git a/src/_includes/layouts/index.njk b/src/_includes/layouts/index.njk
new file mode 100644
index 0000000..af6c788
--- /dev/null
+++ b/src/_includes/layouts/index.njk
@@ -0,0 +1,9 @@
+---
+indexPage: true
+---
+
+{% extends "./base.njk" %}
+
+{% block extra_css %}
+    <link rel="stylesheet" href="/_assets/css/parts/hero.css">
+{% endblock %}
diff --git a/src/_includes/parts/hero.njk b/src/_includes/parts/hero.njk
new file mode 100644
index 0000000..00609e2
--- /dev/null
+++ b/src/_includes/parts/hero.njk
@@ -0,0 +1,18 @@
+<div class="hero">
+  <div class="tower_cell">
+    <img class="tower" src="/_assets/img/tower/tower_logo.svg">
+  </div>
+  <div class="tags">
+    <div class="tag">DIY</div>
+    <div class="tag">Engineering</div>
+    <div class="tag">Embedded</div>
+    <div class="tag">FPGA</div>
+    <div class="tag">IoT</div>
+    <div class="tag">AI/ML</div>
+    <div class="tag">LLM</div>
+    <div class="tag">Wireless</div>
+    <div class="tag">Reverse Engineering</div>
+    <div class="tag">Information Security</div>
+    <div class="tag">Open-Source</div>
+  </div>
+</div>
diff --git a/src/_includes/parts/menu.njk b/src/_includes/parts/menu.njk
index b954daf..8ac0b5c 100644
--- a/src/_includes/parts/menu.njk
+++ b/src/_includes/parts/menu.njk
@@ -56,9 +56,6 @@
     {%- endfor %}
     </ul>
   </nav>
-  <a href="/" class="desktop-logo" aria-hidden>
-    <img src="/_assets/img/common/tower.svg">
-  </a>
 </header>
 
 <script>