From c26aeb8f990ff0097447dd9756ec00c44b5aead6 Mon Sep 17 00:00:00 2001 From: Shadowfacts Date: Wed, 19 Jun 2019 09:29:56 -0400 Subject: [PATCH] Make header/footer same width as article and use flexbox for layout --- site/css/main.scss | 46 +++++++++++++---------------------- site/layouts/article.html.ejs | 20 +++++++-------- site/layouts/default.html.ejs | 6 +++-- 3 files changed, 30 insertions(+), 42 deletions(-) diff --git a/site/css/main.scss b/site/css/main.scss index 2e4c066..c1f126f 100644 --- a/site/css/main.scss +++ b/site/css/main.scss @@ -46,7 +46,6 @@ article { &::after { content: ""; width: calc(100% - 2 * 30px); // account for .container padding, don't overflow - max-width: 720px; height: 1px; background-image: linear-gradient(to right, var(--secondary-ui-text-color), var(--shadow-color)); position: absolute; @@ -243,7 +242,11 @@ figure { box-shadow: 0 10px 15px var(--shadow-color); .container { - position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + flex-wrap: wrap; } .site-title { @@ -255,7 +258,7 @@ figure { .site-description { color: var(--secondary-ui-text-color); font-variant: small-caps; - margin-top: 0; + margin: 0; } .site-nav ul { @@ -327,14 +330,6 @@ figure { } } } - - @media (min-width: 992px) { - .site-nav { - position: absolute; - right: 0; - bottom: 0; - } - } } // Footer @@ -345,7 +340,11 @@ figure { box-shadow: 0 -10px 15px var(--shadow-color); .container { - position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; } .site-title { @@ -369,14 +368,6 @@ figure { } } } - - @media (min-width: 992px) { - .social-links { - position: absolute; - right: 0; - top: 0; - } - } } // Pagination @@ -420,22 +411,19 @@ figure { .container { max-width: 540px; } + + article::after { + max-width: 540px; + } } @media (min-width: 768px) { .container { max-width: 720px; } -} -@media (min-width: 992px) { - .container { - max-width: 960px; + article::after { + max-width: 720px; } } -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} \ No newline at end of file diff --git a/site/layouts/article.html.ejs b/site/layouts/article.html.ejs index e3377a3..270c2bc 100644 --- a/site/layouts/article.html.ejs +++ b/site/layouts/article.html.ejs @@ -2,17 +2,15 @@ metadata.layout = "default.html.ejs" ``` -
-
- -

<%= metadata.title %>

- <%- include("../includes/article-meta.html.ejs", { metadata }) %> -
- <%- content %> -
-
-
-
+
+ +

<%= metadata.title %>

+ <%- include("../includes/article-meta.html.ejs", { metadata }) %> +
+ <%- content %> +
+
+