fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! restyle

static/scss/main.scss

@@ -1,5 +1,7 @@
 @use "sass:color";
 
+// Palette: Catppuccin Mocha
+// https://catppuccin.com/palette/
 $base: #1e1e2e;
 $text: #cdd6f4;
 
@@ -24,10 +26,13 @@ $blue: #89b4fa;
 
 
 body {
+  display: flex;
+  flex-direction: column;
   background-color: $base;
   font-family: Pixeloid;
   color: $text;
   width: 100%;
+  height: 100%;
   margin: 0;
 }
 
@@ -35,6 +40,7 @@ main {
   max-width: 45rem;
   margin-inline: auto;
   padding: 0 8px;
+  flex: 1 0 auto;
 }
 
 h1 {
@@ -62,8 +68,19 @@ header {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
-  background-color: $surface0;
+  background-color: $mantle;
   padding: 8px;
+
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $crust;
+  margin-top: 32px;
+  padding: 16px;
+  /* height: 100%; */
+  /* flex-shrink: 0; */
 }
 
 .mono {
@@ -96,13 +113,13 @@ header {
   }
 
   &.red {
-    background-color: color.mix($surface0, $red, 50%);
+    background-color: color.mix($surface0, $red, 60%);
   }
   &.orange {
-    background-color: color.mix($surface0, $peach, 50%);
+    background-color: color.mix($surface0, $peach, 60%);
   }
   &.green {
-    background-color: color.mix($surface0, $green, 50%);
+    background-color: color.mix($surface0, $green, 60%);
   }
 
   & .header {
@@ -111,9 +128,9 @@ header {
     font-size: x-large;
 
     .icon {
-      margin-right: 4px;
+      margin-right: 8px;
       width: 48px;
-      border-radius: 6px;
+      border-radius: 8px;
     }
   }
 }

templates/footer.tmpl

@@ -0,0 +1,4 @@
+<footer>
+	<div>codrs.ru</div>
+	<div>&#169; 2025</div>
+</footer

templates/index.html

@@ -14,5 +14,7 @@
   <main>
   {% include 'services.tmpl' %}
   </main>
+
+  {% include 'footer.tmpl' %}
 </body>
 </html>