feat: new header image

Former-commit-id: 3ec5395679f838c40152a7971f1974cc5996beb2

1 files changed, 71 insertions, 56 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 9e3d4454..b7b9986d 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,68 +1,83 @@
-/* header */
+#site-header {
+    margin-top: var(--page-header-top);
 
-.header-title {
-  font-size: 2rem;
-  font-weight: 900;
-  margin-top: 32px;
-  text-align: center;
-  letter-spacing: .15rem;
-}
-.header-title a {
-  text-decoration: none;
-}
+    /* header */
 
-.header-subtitle {
-  color: var(--secondary-text-color);
-}
+    .header-title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
 
-.header-line {
-  width: 100%;
-  border-width: 1px;
-  border-color: var(--border-color);
-  border-style: solid none none none;
-}
+        .title-image {
+            width: 10rem
+        }
 
-/* navigation */
+        .title-link {
+            font-size: 2rem;
+            font-weight: 900;
+            text-align: center;
+            letter-spacing: .15rem;
+        }
+    }
 
-#navigation-bar {
-    --gap: .75rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--gap);
-    padding-left: calc(1rem + var(--gap))
-}
+    .header-title a {
+      text-decoration: none;
+    }
 
-.navigation {
-  margin: 1rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
-  border-radius: 1rem;
-  overflow: hidden;
-}
+    .header-subtitle {
+      color: var(--secondary-text-color);
+    }
 
-.navigation-item a {
-  display: inline-block;
-  color: var(--background-color);
-  padding: 0.25rem 0.5rem;
-  background-color: var(--text-color);
-}
+    .header-line {
+      width: 100%;
+      border-width: 1px;
+      border-color: var(--border-color);
+      border-style: solid none none none;
+    }
 
-.navigation-item:first-child a {
-  padding-left: 0.75rem
-}
+    /* navigation */
 
-.navigation-item:last-child a {
-  padding-right: 0.75rem
-}
+    #navigation-bar {
+        --gap: .75rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--gap);
+        padding-left: calc(1rem + var(--gap))
+    }
 
-.navigation-item.active a {
-  color: var(--text-color);
-  background-color: var(--block-background-color);
-}
+    .navigation {
+      margin: 1rem 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: fit-content;
+      border-radius: 1rem;
+      overflow: hidden;
+    }
+
+    .navigation-item a {
+      display: inline-block;
+      color: var(--background-color);
+      padding: 0.25rem 0.5rem;
+      background-color: var(--text-color);
+    }
+
+    .navigation-item:first-child a {
+      padding-left: 0.75rem
+    }
+
+    .navigation-item:last-child a {
+      padding-right: 0.75rem
+    }
+
+    .navigation-item.active a {
+      color: var(--text-color);
+      background-color: var(--block-background-color);
+    }
 
-.navigation-item a:hover {
-  text-decoration: none;
+    .navigation-item a:hover {
+      text-decoration: none;
+    }
 }