adds some basic background

_includes/background.html

@@ -0,0 +1,4 @@
+<div class="background">
+	<div id="bg-bluedither"></div>
+	<div id="bg-grass"></div>
+</div>

_layouts/default.html

@@ -15,6 +15,7 @@ navbar: topnav
 		{% endif %}
 		<script data-goatcounter="https://slimepondcount.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
 
+		{% include background.html %}
 		<div class="vcol">
 			<div class="columns">
 				<div class="left-sidebar">

_sass/background.scss

@@ -0,0 +1,21 @@
+.background {
+	z-index: -99 !important;
+}
+
+#bg-bluedither {
+	image-rendering: pixelated;
+	background-image: url('/assets/images/decor/bluedither.png');
+	background-size: contain;
+	height: 100%;
+}
+
+#bg-grass {
+	position: absolute;
+	width: 100%;
+	height: 50%;
+	background-image: url('/assets/images/decor/grass.png');
+	background-repeat: repeat-x;
+	background-position: bottom;
+	background-size: auto 15vh;
+	bottom: 0;
+}

_sass/main.scss

@@ -2,6 +2,7 @@
 @import "statuscafe";
 @import "fonts";
 @import "mobile";
+@import "background";
 
 html {
 	background-color: #2196F3;
@@ -26,13 +27,16 @@ img {
 	margin: 2px;
 }
 
-.overlay {
+.overlay, .background {
 	pointer-events: none;
 	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
+}
+
+.overlay {
 	z-index: 1000001;
 }