diff --git a/static/scss/main.scss b/static/scss/main.scss index ab759be..9f3e098 100644 --- a/static/scss/main.scss +++ b/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; } } } diff --git a/templates/footer.tmpl b/templates/footer.tmpl new file mode 100644 index 0000000..937fed2 --- /dev/null +++ b/templates/footer.tmpl @@ -0,0 +1,4 @@ + {% include 'services.tmpl' %} + + {% include 'footer.tmpl' %} \ No newline at end of file