feat: initial redesign (#11)

feat: add font Share Tech Mono feat: add colour palette feat: add artwork as featured image feat: add responsive design features feat: use LFS for binaries
DigitalExtinction · Sep 6, 2023 · a219ac9 · a219ac9
1 parent 107d8d8
commit a219ac9
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 3 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+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
@@ -0,0 +1,61 @@
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+
+: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: url("header_wide.svg") center repeat-x;
+ background-size: contain;
+ background-size: auto 100%;
+ height: 600px;
+ width: 100%;
+}
+
+div.middle {
+ margin: 0 auto;
+ width: 45%;
+ box-sizing: border-box;
+ & h1 {
+ color: var(--main-text1-color);
+ font-size: 45px;
+ text-align: center;
+ padding-top: 30px;
+ padding-bottom: 10%;
+ }
+ & h2 {
+ color: var(--main-text2-color);
+ font-size: 35px;
+ text-align: center;
+ padding-top: 80px;
+ }
+ & p, & ol {
+ padding-top: 16px;
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ div.middle {
+ width: 70%;
+ & h2 {
+ font-size: 30px;
+ }
+ }
+}
diff --git a/static/ShareTechMono-Regular.ttf b/static/ShareTechMono-Regular.ttf
diff --git a/static/header_wide.svg b/static/header_wide.svg
diff --git a/templates/base.html b/templates/base.html
@@ -1,6 +1,19 @@
 <!DOCTYPE html>
 <html>
  <head>
+ <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_wide.svg" sizes="100vw">
+ <style>
+ @font-face {
+ font-family: "shareTechMono";
+ src: url("ShareTechMono-Regular.ttf");
+ }
+ * {
+ font-family: "shareTechMono" !important;
+ }
+ </style>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-C8DLWWSZX1"></script>
  <script>
@@ -17,8 +30,16 @@
  content="RTS, real-time, strategy, game, gaming, Rust, free software,
  open source, Linux gaming">
  <meta name="author" content="Martin Indra">
+ <link rel="stylesheet" href="/styles.css">
  </head>
- <body>
- {% block content %} {% endblock %}
+ <body style="background-color: #340000;">
+ <div id="header">
+ <div class="middle">
+ <h2>_digital&ZeroWidthSpace;_extinction</h2>
+ </div>
+ </div>
+ <div class="middle">
+ {% block content %} {% endblock %}
+ </div>
  </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Digital Extinction</h1>
+<h1>_coming&ZeroWidthSpace;_soon</h1>
 
 <p>
  Digital Extinction, or DE in short, is a multiplatform real-time strategy