Improve header for other screen sizes

Die-KoMa · Mar 20, 2023 · f20a87d · f20a87d
1 parent 1ae7605
commit f20a87d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 9 deletions.
diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -1,7 +1,4 @@
 .site-header {
-  background-image: url("/core/image/header_banner.png");
-  background-repeat: no-repeat;
-  background-size: cover;
 
   a {
     text-decoration: none !important;
@@ -10,10 +7,17 @@
     }
   }
 
+  span {
+    color: black;
+  }
+
   .logo {
+    background-image: url("/core/image/header_banner.png");
+    background-repeat: no-repeat;
+    background-size: cover;
     svg {
+      height: calc(#{$komaLogoHeight} * .5em);
       margin-left: 2em;
-      height: calc(33 * .5em);
       margin-bottom: -.5em;
     }
     span {
@@ -32,20 +36,62 @@
       position: relative;
       margin-bottom: -2em;
     }
-    &::after {
-      content: "";
+    &::before, &::after {
       display: block;
       height: .5em;
-      width: calc(100% - 3em);
       background: black;
     }
+    &::after {
+      content: "";
+      --margin-left: 0em;
+      margin-left: var(--margin-left);
+      width: calc(100% - var(--margin-left) - 3em);
+    }
   }
 
   .subtitle {
     display: none;
   }
 
+}
+
+@media all and (min-width: 800px) {
+  .site-header {
+
+    .logo {
+      svg {
+        margin-left: $headerLeftBar;
+      }
+      span {
+        display: block;
+        position: absolute;
+        font-size: 3em;
+        margin-top: -1em;
+        margin-left: calc(#{$headerLeftBar} + 1em);
+      }
+    }
+
+    .arrow {
+      &::before {
+        content: "";
+        width: calc(#{$headerLeftBar} + .5em);
+        position: absolute;
+      }
+      &::after {
+        --margin-left: calc(#{$headerLeftBar} + #{$komaLogoWidth} * .5em - .5em);
+      }
+    }
+
+    .subtitle {
+      display: block;
+      margin-inline: calc(#{$headerLeftBar}) 6em;
+      text-align: right;
+      border-left: .5em solid black;
+      padding-top: 1em;
+      span {
+        font-size: 2.5em;
+      }
+    }
 
   }
 }
-
diff --git a/core/css/main.scss b/core/css/main.scss
@@ -3,6 +3,8 @@
 ---
 @charset "utf-8";
 
+$komaLogoHeight: 33;
+$komaLogoWidth: 58.5;
 /* configure header */
 $headerBorderWidth: .5em;
 $headerBottomOffset: 37px;
@@ -45,7 +47,7 @@ body {
     ". sidebar content ."
     ". footer footer .";
   grid-template-columns: 1fr $headerLeftBar auto 1fr;
-  font-size: calc(min(2vw, 1rem));
+  font-size: calc(min(2vw, .7rem));
 }
 
 .content {