diff --git a/_layouts/blog.liquid b/_layouts/blog.liquid index 1f2f63d..90fd030 100644 --- a/_layouts/blog.liquid +++ b/_layouts/blog.liquid @@ -6,9 +6,9 @@ {% include "navigation.liquid" %} -
-
-
+
+
+
{{ page.content }} {% for post in collections.posts.pages %}
@@ -25,9 +25,9 @@

{% endfor %} -
-
+
+
{% include "footer.liquid" %} diff --git a/_layouts/default.liquid b/_layouts/default.liquid index 8620946..c9b557a 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -6,13 +6,13 @@ {% include "navigation.liquid" %} -
-
-
- {{ page.content }} -
-
-
+
+
+
+ {{ page.content }} +
+
+
{% include "footer.liquid" %} diff --git a/_scss/_base.scss b/_scss/_base.scss index e363a3d..b50a796 100644 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -1,34 +1,24 @@ html { image-rendering: pixelated; - image-rendering: crisp-edges; - font-size: 16px; + font-size: 1.1em; + font-family: 'Atkinson Hyperlegible', sans-serif; color: $foreground-color; + background: $background-color; line-height: 1.50; - background: $background-color; + background-image: url("assets/stars4.gif"); + background-repeat: repeat; } -/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */ -@media screen and (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } +.center { + background-color: $background-color; + width: 50%; + text-align: center; + margin: auto; + border: 5px solid #96CDFB; } -.section { - border-radius: 35px; -background: $background-color; -box-shadow: 5px 5px 17px scale-color($background-color, $lightness: -35%), - -5px -5px 17px scale-color($background-color, $lightness: +5%); - max-width: 20cm; - margin: 0 auto; +.content { + margin: 5%; + padding: 10px; + text-align: left; } - -.inner-section { - border-radius: 35px; - background: $background-color; - max-width: 18cm; - margin: 0 auto; - margin-top: 5mm; - padding: 2mm 3mm; -} - diff --git a/_scss/_footer.scss b/_scss/_footer.scss index e9b1b8e..3075bef 100644 --- a/_scss/_footer.scss +++ b/_scss/_footer.scss @@ -1,17 +1,22 @@ footer { + margin: auto; + margin-top: 5%; + margin-bottom: 5%; + width: 20%; + border: 5px solid #ABE9B3; + ul { list-style: none; margin: auto; - padding: 5px; + padding: 10px; display: grid; li { - h3 { margin-top: auto; } - font-size: 18px; text-align: center; } } } + diff --git a/_scss/_formatting.scss b/_scss/_formatting.scss index 10c9dfb..d253260 100644 --- a/_scss/_formatting.scss +++ b/_scss/_formatting.scss @@ -1,105 +1,44 @@ -// Buttons -.button { - margin-right: 10px; - margin-bottom: 25px; - @media only screen and (max-width: 600px) { - margin: auto; - } - padding: 10px; - padding-left: 15px; - padding-right: 15px; - border-radius: 32px; - text-decoration: none; - text-align: center; - cursor: pointer; - transition: all 0.1s ease-in-out; - border-radius: 10px; - background: $background-color; - box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%), - -5px -5px 10px scale-color($background-color, $lightness: +5%); +h1 { + border-bottom: 5px solid #F28FAD; +} - &:hover { - background: linear-gradient(145deg, - scale-color($background-color, $lightness: -35%), - scale-color($background-color, $lightness: +5%)); +h2 { + margin-top: 1cm; + margin-bottom: 0; + border-bottom: 3px solid #F8BD96; +} - box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%), - -5px -5px 10px scale-color($background-color, $lightness: +5%); - } - &:active { - background: linear-gradient(145deg, - scale-color($background-color, $lightness: -35%), - scale-color($background-color, $lightness: +5%)); - - box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%), - -5px -5px 10px scale-color($background-color, $lightness: +5%); - } +h3 { + margin-top: 1cm; + margin-bottom: 0; } a { color: $accent-color; } -a:visited { - color: $light-color; -} - -ul, ol { - color: #C3BAC6; -} - -blockquote { - margin-left: 5mm; - padding-left: 2mm; - color: scale-color($foreground-color, $lightness: -10%); -} - -blockquote { - border-left: 4px solid #F28FAD; -} - -blockquote blockquote { - border-left: 4px solid #F8BD96; -} - -blockquote blockquote blockquote { - border-left: 4px solid #FAE3B0; -} - -blockquote blockquote blockquote blockquote { - border-left: 4px solid #ABE9B3; -} - -blockquote blockquote blockquote blockquote blockquote { - border-left: 4px solid #B5E8E0; -} - -blockquote blockquote blockquote blockquote blockquote blockquote { - border-left: 4px solid #96CDFB; -} - -blockquote blockquote blockquote blockquote blockquote blockquote blockquote { - border-left: 4px solid #DDB6F2; -} - code, pre { font-family: "Fira Code", monospace; overflow: auto; - border-radius: 10px; - padding: 10px; + border-radius: 5px; + padding: 5px; + border-bottom: 2px solid #FAE3B0; - background: $background-color !important; -box-shadow: inset 5px 5px 10px scale-color($background-color, $lightness: -35%), - inset -5px -5px 10px scale-color($background-color, $lightness: +5%); - @media only screen and (min-width: 600px) { - display: inline-block; - max-width: 18cm; +} + +.date { + font-size: 0.8em; +} + +@media only screen and (min-width: 600px) { + code, pre { + display: inline-block; + max-width: 18cm; } } code { display: inline; - font-size: 14px; } p code { @@ -107,40 +46,37 @@ p code { padding: 5px; } -@media only screen and (max-width: 600px) { - code { - display: inline-block; - max-width: 95%; - } -} +blockquote { + margin-left: 5mm; + padding-left: 2mm; + color: #bac6e0; } +blockquote { + border-left: 4px solid #F28FAD; } -h1 { - font-size: 30px; - font-weight: normal; - border-bottom: 4px solid #F28FAD; -} +blockquote blockquote { + border-left: 4px solid #F8BD96; } -h2 { - font-size: 25px; - font-weight: normal; - margin-top: 1cm; - margin-bottom: 0; - border-bottom: 2px solid #F8BD96; -} +blockquote blockquote blockquote { + border-left: 4px solid #FAE3B0; } -h3 { - font-size: 22px; - font-weight: normal; - margin-top: 1cm; - margin-bottom: 0; +blockquote blockquote blockquote blockquote { + border-left: 4px solid #ABE9B3; } + +blockquote blockquote blockquote blockquote blockquote { + border-left: 4px solid #B5E8E0; } + +blockquote blockquote blockquote blockquote blockquote blockquote { + border-left: 4px solid #96CDFB; } + +blockquote blockquote blockquote blockquote blockquote blockquote blockquote { + border-left: 4px solid #DDB6F2; } + +ul, ol { + color: #C3BAC6; } ::selection { color: $background-color; background: $foreground-color; } - -.tags { - font-size: 14px; -} diff --git a/_scss/_image.scss b/_scss/_image.scss deleted file mode 100644 index 5d40b5d..0000000 --- a/_scss/_image.scss +++ /dev/null @@ -1,8 +0,0 @@ -img { - border-radius: 10px; - display: block; - margin-left: auto; - margin-right: auto; -box-shadow: 8px 8px 23px #060606, - -8px -8px 23px #16161a; -} diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss index ce1b5d2..9cab9c3 100644 --- a/_scss/_navigation.scss +++ b/_scss/_navigation.scss @@ -1,20 +1,26 @@ @media only screen and (min-width: 600px) { nav { - max-width: 20cm; + max-width: 50%; margin: auto; - padding-top: 10px; - font-size: 20px; + margin-top: 25px; + margin-bottom: 5%; + font-size: 1.3em; + border: 5px solid #DDB6F2; ul { list-style: none; margin: auto; - padding: 0; + padding: 5px; display: grid; grid-auto-flow: column; li { + font-weight: bold; text-align: center; padding: 0; + a { + text-decoration: none; + } } } } @@ -44,3 +50,4 @@ nav { } } } + diff --git a/assets/stars4.gif b/assets/stars4.gif new file mode 100644 index 0000000..8471f83 Binary files /dev/null and b/assets/stars4.gif differ diff --git a/style.scss b/style.scss index 9a0ef77..bf58bd5 100644 --- a/style.scss +++ b/style.scss @@ -1,6 +1,5 @@ $background-color: #161320; $foreground-color: #D9E0EE; -$light-color: #F5C2E7; $accent-color: #F2CDCD; -@import '_scss/base', '_scss/formatting', '_scss/navigation', '_scss/footer', '_scss/image'; +@import '_scss/base', '_scss/formatting', '_scss/footer', '_scss/navigation';