Added a background.

diff --git a/theme/images/Simplex.png b/theme/images/Simplex.png
new file mode 100644 (file)
index 0000000..1eb1080
Binary files /dev/null and b/theme/images/Simplex.png differ

diff --git a/theme/images/Stars.svg b/theme/images/Stars.svg
new file mode 100644 (file)
index 0000000..56dde66
--- /dev/null
+++ b/theme/images/Stars.svg
@@ -0,0 +1,34 @@
+<svg width="762" height="532" viewBox="0 0 762 532" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.67831" cy="39.1156" r="3.5" fill="#7d4a80"/>
+<circle cx="77.903" cy="275.684" r="2.25" fill="#7d4a80"/>
+<circle cx="28.131" cy="384.816" r="2.25" fill="#7d4a80"/>
+<circle cx="375.751" cy="86.9817" r="1.5" fill="#7d4a80"/>
+<circle cx="212.178" cy="71.002" r="1.5" fill="#7d4a80"/>
+<circle cx="247.314" cy="61.0033" r="1.61234" fill="#7d4a80"/>
+<circle cx="688.858" cy="111.574" r="2.4581" fill="#7d4a80"/>
+<circle cx="743.812" cy="4.1156" r="3.5" fill="#7d4a80"/>
+<circle cx="731.178" cy="252.616" r="2.5" fill="#7d4a80"/>
+<circle cx="86.7474" cy="8.6156" r="2.56912" fill="#7d4a80"/>
+<circle cx="680.289" cy="72.502" r="6.11102" fill="#7d4a80"/>
+<circle cx="385.428" cy="26.8656" r="3.25" fill="#7d4a80"/>
+<circle cx="538.518" cy="294.544" r="3.25" fill="#7d4a80"/>
+<circle cx="522.848" cy="7.6156" r="2.5" fill="#7d4a80"/>
+<circle cx="527.848" cy="100.476" r="2.5" fill="#7d4a80"/>
+<circle cx="52.7563" cy="190.176" r="2.5603" fill="#7d4a80"/>
+<circle cx="747.899" cy="492.912" r="3.5" transform="rotate(-180 747.899 492.912)" fill="#7d4a80"/>
+<circle cx="673.674" cy="256.344" r="2.25" transform="rotate(-180 673.674 256.344)" fill="#7d4a80"/>
+<circle cx="328.332" cy="122.822" r="2.25" transform="rotate(-180 328.332 122.822)" fill="#7d4a80"/>
+<circle cx="760.399" cy="295.412" r="1.5" transform="rotate(-180 760.399 295.412)" fill="#7d4a80"/>
+<circle cx="539.399" cy="461.026" r="1.5" transform="rotate(-180 539.399 461.026)" fill="#7d4a80"/>
+<circle cx="504.263" cy="471.024" r="1.61234" transform="rotate(-180 504.263 471.024)" fill="#7d4a80"/>
+<circle cx="62.7186" cy="420.454" r="2.4581" transform="rotate(-180 62.7186 420.454)" fill="#7d4a80"/>
+<circle cx="7.76492" cy="527.912" r="3.5" transform="rotate(-180 7.76492 527.912)" fill="#7d4a80"/>
+<circle cx="20.3987" cy="279.412" r="2.5" transform="rotate(-180 20.3987 279.412)" fill="#7d4a80"/>
+<circle cx="664.83" cy="523.412" r="2.56912" transform="rotate(-180 664.83 523.412)" fill="#7d4a80"/>
+<circle cx="71.2877" cy="459.526" r="6.11102" transform="rotate(-180 71.2877 459.526)" fill="#7d4a80"/>
+<circle cx="366.149" cy="505.162" r="3.25" transform="rotate(-180 366.149 505.162)" fill="#7d4a80"/>
+<circle cx="412.282" cy="186.926" r="3.25" transform="rotate(-180 412.282 186.926)" fill="#7d4a80"/>
+<circle cx="228.729" cy="524.412" r="2.5" transform="rotate(-180 228.729 524.412)" fill="#7d4a80"/>
+<circle cx="133.113" cy="357.847" r="2.5" transform="rotate(-180 133.113 357.847)" fill="#7d4a80"/>
+<circle cx="698.821" cy="341.852" r="2.5603" transform="rotate(-180 698.821 341.852)" fill="#7d4a80"/>
+</svg>

diff --git a/theme/main.html b/theme/main.html
index bf4976ebd63ae3b1b54763a9afd7673f7af5653e..b2c8dab8ae2978e67726ca5b4607e75f41dd213d 100644 (file)
--- a/theme/main.html
+++ b/theme/main.html
@@ -23,5 +23,7 @@
         <main>
             {{ page.content }}
         </main>
+        <footer>
+        </footer>
     </body>
 </html>

diff --git a/theme/styles.css b/theme/styles.css
index fd36aad75cf41562d3f11d2aff1e32629694a83a..d5510f374f6805aef6be973e064f9b37af8472d8 100644 (file)
--- a/theme/styles.css
+++ b/theme/styles.css
@@ -1,6 +1,6 @@
 :root {
-    --background: #1c0c31;
-    --foreground: #ed8cf2;
+    --background: hsl(266, 60.7%, 12%);
+    --foreground: hsl(297, 79.7%, 74.9%);
     --text-size: calc(0.6rem + 0.6vw);
     --font-family: "Maple Mono";
 }
@@ -35,18 +35,29 @@
 }
 
 html {
-    background: var(--background);
-    width: 100%;
-    height: 100%;
     color: var(--foreground);
     font-family: "Maple Mono";
     font-size: var(--text-size);
     font-weight: bold;
+    background: linear-gradient(
+        hsla(266, 60.7%, 12%, 85%),
+        hsla(266, 60.7%, 12%, 85%)
+    ),
+    no-repeat url("images/Simplex.png"),
+    url("images/Stars.svg"),
+    var(--background);
+    background-position: center, center, center, center;
+    background-size: auto 75vh;
 }
 
 body {
-    margin: 2.5rem;
-    height: 100vh;
+    margin: 1.5rem;
+    width: fit-content;
+}
+
+main {
+    height: 100%;
+    overflow: scroll;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -72,7 +83,6 @@ header {
     flex-direction: row;
     align-content: center;
     justify-content: space-between;
-    margin-bottom: 1.5rem;
 }
 
 header > p {