diff --git a/_includes/footer.liquid b/_includes/footer.liquid index f6a4e03..f661586 100644 --- a/_includes/footer.liquid +++ b/_includes/footer.liquid @@ -1,50 +1,44 @@ - + diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid index 8b566eb..f25788b 100644 --- a/_includes/navigation.liquid +++ b/_includes/navigation.liquid @@ -1,3 +1,4 @@ +
+
diff --git a/_layouts/default.liquid b/_layouts/default.liquid index c9b557a..2c932c4 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -5,14 +5,14 @@ - {% include "navigation.liquid" %} -
+ {% include "navigation.liquid" %} +
{{ page.content }}
-
-
+
{% include "footer.liquid" %} + diff --git a/_scss/_base.scss b/_scss/_base.scss index e8d626c..69a5e73 100644 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -3,33 +3,28 @@ html { font-size: 1.1em; font-family: 'Atkinson Hyperlegible', sans-serif; color: $foreground-color; - background: $background-color; line-height: 1.50; - background-image: url("assets/stars4.gif"); - background-repeat: repeat; + background-image: url('/assets/mushrooms.jpg'); } -@media only screen and (min-width: 600px) { -.center { - background-color: $background-color; - width: 50%; - text-align: center; - margin: auto; - border: 5px solid #96CDFB; -} -} - -@media only screen and (max-width: 600px) { -.center { - background-color: $background-color; - text-align: center; +.header { grid-area: header; } +.menu { grid-area: menu; } +.main { + grid-area: main; + background: $background-color; margin: 10px; - border: 5px solid #96CDFB; -} + margin-left: 0px; + padding: 20px; + border-radius: 2px; } +.footer { grid-area: footer; } .content { - margin: 5%; + display: grid; + grid-template-areas: + 'header header header header header header' + 'menu main main main main main' + 'menu footer footer footer footer footer'; + gap: 10px; padding: 10px; - text-align: left; } diff --git a/_scss/_footer.scss b/_scss/_footer.scss index f2bb6ef..0a87c07 100644 --- a/_scss/_footer.scss +++ b/_scss/_footer.scss @@ -1,52 +1,27 @@ -@media only screen and (min-width: 600px) { -footer { - margin: auto; - margin-top: 5%; - margin-bottom: 5%; - width: 20%; - border: 5px solid #ABE9B3; - - ul { - list-style: none; - margin: auto; - padding: 10px; - display: grid; - - li { - h3 { - padding-top: 15px; - margin-top: auto; - } - text-align: center; - - } - } -} -} - -@media only screen and (max-width: 600px) { footer { + background: $background-color; + h1, h2, h3 { margin-left: 0px; margin-top: 0px;} + h4 { margin-left: 0px; } + padding: 20px; margin: 10px; - margin-top: 5%; - margin-bottom: 5%; - border: 5px solid #ABE9B3; + margin-left: auto; + border-radius: 2px; ul { - list-style: none; - margin: auto; - padding: 10px; - display: grid; + list-style: none; + color: $foreground-color; + } - li { - h3 { - margin-top: auto; - } - text-align: center; - } + .item-left { grid-area: item-left; }; + .item-middle { grid-area: item-middle; }; + .item-right { grid-area: item-right; }; + + .container { + margin: 0px; + padding-left: 0px; + display: grid; + grid-template-columns: 500px 250px 250px; + grid-template-rows: auto; + grid-template-areas: "item-left item-middle item-right"; } } -} - -.badges { - padding-top: 15px; -} diff --git a/_scss/_formatting.scss b/_scss/_formatting.scss index fe33878..1d1abfb 100644 --- a/_scss/_formatting.scss +++ b/_scss/_formatting.scss @@ -1,16 +1,13 @@ -h1 { - border-bottom: 5px solid #F28FAD; -} - h2 { margin-top: 1cm; margin-bottom: 0; - border-bottom: 3px solid #F8BD96; + margin-left: 5px; } h3 { margin-top: 1cm; margin-bottom: 0; + margin-left: 10px; } a { diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss index 02b63e7..0f06d35 100644 --- a/_scss/_navigation.scss +++ b/_scss/_navigation.scss @@ -1,11 +1,8 @@ -@media only screen and (min-width: 600px) { nav { - max-width: 50%; - margin: auto; - margin-top: 25px; - margin-bottom: 5%; - font-size: 1.3em; - border: 5px solid #DDB6F2; + margin: 10px; + border-radius: 2px; + padding: 20px; + background: $background-color; ul { list-style: none; @@ -24,38 +21,3 @@ nav { } } } -} - -@media only screen and (max-width: 600px) { -nav { - margin: 10px; - list-style: none; - font-size: 1.3em; - border: 5px solid #DDB6F2; - - ul { - list-style: none; - - padding: 0px; - margin: auto; - display: grid; - - grid-template-columns: repeat(3, 1fr); - gap: 10px; - grid-auto-rows: minmax(50px, auto); - align-content: center; - - li { - padding: 0px; - margin: auto; - font-weight: bold; - text-align: center; - - a { - text-decoration: none; - } - } - } -} -} - diff --git a/assets/mushrooms.jpg b/assets/mushrooms.jpg new file mode 100644 index 0000000..1f76da7 Binary files /dev/null and b/assets/mushrooms.jpg differ diff --git a/style.scss b/style.scss index bf58bd5..5568402 100644 --- a/style.scss +++ b/style.scss @@ -1,5 +1,5 @@ -$background-color: #161320; -$foreground-color: #D9E0EE; -$accent-color: #F2CDCD; +$background-color: #F9F6F0; +$foreground-color: #241A11; +$accent-color: #cd2b29; @import '_scss/base', '_scss/formatting', '_scss/footer', '_scss/navigation';