feat: add bg image for header and footer + tweak mobile view

arx-tools · Jul 6, 2024 · 522fb15 · 522fb15
1 parent 77abd1d
commit 522fb15
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/arx-bg-pattern.webp b/arx-bg-pattern.webp
diff --git a/style.css b/style.css
@@ -22,7 +22,8 @@ body {
 }
 
 header {
-  background: var(--kobicha);
+  background: url("/arx-bg-pattern.webp") repeat-x center center var(--kobicha);
+  background-size: cover;
   padding: 10px 30px;
   border-bottom: 1px solid var(--cornsilk);
 }
@@ -34,6 +35,12 @@ header img {
   margin-top: 29px;
 }
 
+@media (max-width: 725px) {
+  header img {
+    display: none;
+  }
+}
+
 main {
   flex: 1;
   background: url("/arx-bg-image.webp") no-repeat center center var(--walnut-brown);
@@ -42,13 +49,17 @@ main {
 main > div {
   width: min(800px, 100%);
   margin: 0 auto;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 
 footer {
-  background: var(--kobicha);
+  background: url("/arx-bg-pattern.webp") repeat-x center center var(--kobicha);
+  background-size: cover;
   padding: 10px 30px;
   border-top: 1px solid var(--cornsilk);
   font-size: 0.8rem;
+  text-align: center;
 }
 
 h1,