From 44b15d6a4566dacbedd3151626ff37caba39c9cb Mon Sep 17 00:00:00 2001 From: Colin Date: Mon, 4 Apr 2022 05:03:05 +0000 Subject: [PATCH] style: mess with the colors/headings --- sass/static/style.scss | 51 ++++++++++++++++++++++++++++++++++++++++ templates/base.html | 2 +- templates/blog-page.html | 9 +++++-- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/sass/static/style.scss b/sass/static/style.scss index 8ec3c0b..996bca8 100644 --- a/sass/static/style.scss +++ b/sass/static/style.scss @@ -36,11 +36,62 @@ } } +@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) { + @if $b-hsb == 0 { + @return hsla(0, 0, 0, $a) + } @else { + $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100)); + $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2); + @return hsla($h-hsb, $s-hsl, $l-hsl, $a); + } +} + +$color_cream: hsb(23, 11%, 100%); +$color_teal: hsb(191, 15%, 91%); +$color_purple: hsb(252, 15%, 95%); + +$color_bg: $color_cream; +$color_title: $color_teal; +$color_header: $color_purple; + + body { + background-color: $color_bg; font-family: "Gentium Basic","serif"; } +.body-text +{ + text-align: justify; + max-width: 40em; + // center this within its container + margin-left: auto; + margin-right: auto; + + h1 + { + background-color: $color_title; + } + + h2 + { + background-color: $color_purple; + display: flex; + } + + h2::after + { + content: ""; + background: -moz-element(#tile-slash) center; + flex: 1 0 0; + margin-left: 0.1em; + margin-right: 0.1em; + } +} + + + /* font: Gentium Basic * upstream: https://www.fontsquirrel.com/fonts/Gentium-Basic * https://fonts.google.com/specimen/Gentium+Basic diff --git a/templates/base.html b/templates/base.html index e50f282..23cc3d3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,7 +9,7 @@
-
+
{% block content %} {% endblock %}
diff --git a/templates/blog-page.html b/templates/blog-page.html index f0f638e..5a85e80 100644 --- a/templates/blog-page.html +++ b/templates/blog-page.html @@ -1,9 +1,14 @@ {% extends "base.html" %} {% block content %} -

+
+/ +
+ +

{{ page.title }}

-

{{ page.date }}

+

{{ page.date }}

+ {{ page.content | safe }} {% endblock content %}