fix: add smaller bg image and styling

DigitalExtinction · Sep 5, 2023 · 37366d1 · 37366d1
1 parent 7306ded
commit 37366d1
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 14 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,2 @@
-static/*.png filter=lfs diff=lfs merge=lfs -text
+static/*.svg filter=lfs diff=lfs merge=lfs -text
 static/*.ttf filter=lfs diff=lfs merge=lfs -text
diff --git a/sass/styles.scss b/sass/styles.scss
@@ -6,17 +6,23 @@
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
- color: white;
+}
+
+:root {
+ --main-bg-color: #340000;
+ --main-text1-color: white;
+ --main-text2-color: black;
+ background-color: var(--main-bg-color);
 }
 
 body {
+ color: var(--main-text1-color);
  font-size: 1em;
  padding-bottom: 30px;
 }
 
 div#header {
- background: image-set( "header_short.png" 2x, "header_wide.png" 1x) center repeat-x;
- background-image: -webkit-image-set( url("header_short.png") 2x, url("header_wide.png") 1x);
+ background: url("header_wide.svg") center repeat-x;
  background-size: contain;
  background-size: auto 100%;
  height: 600px;
@@ -28,17 +34,17 @@ div.middle {
  width: 45%;
  box-sizing: border-box;
  & h1 {
- color: white;
+ color: var(--main-text1-color);
  font-size: 45px;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 10%;
  }
  & h2 {
- color: black;
+ color: var(--main-text2-color);
  font-size: 35px;
  text-align: center;
- padding-top: 130px;
+ padding-top: 80px;
  }
  & p, & ol {
  padding-top: 16px;

diff --git a/static/header_short.png b/static/header_short.png
diff --git a/static/header_wide.png b/static/header_wide.png
diff --git a/static/header_wide.svg b/static/header_wide.svg
diff --git a/templates/base.html b/templates/base.html
@@ -4,7 +4,7 @@
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preload" as="font" href="ShareTechMono-Regular.ttf" sizes="100vw">
- <link rel="preload" as="image" imagesrcset="header_short.png 2x, header_wide.png 1x" sizes="100vw">
+ <link rel="preload" as="image" imagesrcset="header_wide.svg" sizes="100vw">
  <style>
  @font-face {
  font-family: "shareTechMono";