From bc64c5158647ab7cd937ed2b3aec6d2b8aefce23 Mon Sep 17 00:00:00 2001 From: jonathan Date: Fri, 24 Feb 2023 19:26:04 +1030 Subject: [PATCH] fixed some mobile layout issues --- src/_includes/layout/base.njk | 2 ++ src/_includes/partials/navigation.njk | 10 +++---- src/css/styles.css | 39 +++++++++++++++++++++++---- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/_includes/layout/base.njk b/src/_includes/layout/base.njk index b66af27..02a2a3c 100644 --- a/src/_includes/layout/base.njk +++ b/src/_includes/layout/base.njk @@ -18,10 +18,12 @@
{% include 'partials/header.njk' %}
+

{{ title }}

{{ content | safe }}
+
{% include 'partials/footer.njk' %}
diff --git a/src/_includes/partials/navigation.njk b/src/_includes/partials/navigation.njk index cfda7a7..fe8e929 100644 --- a/src/_includes/partials/navigation.njk +++ b/src/_includes/partials/navigation.njk @@ -1,8 +1,8 @@ {#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#} \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css index 2bdec0e..fc8a615 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -53,6 +53,10 @@ a:hover { text-decoration: none; } +hr { + border: 1px solid var(--border); +} + body { color: var(--text); background: var(--bg); @@ -80,11 +84,6 @@ main { box-sizing: border-box; } -@media all and (max-width: 1000px) { - body { - flex-direction: column-reverse; - } -} aside { position: sticky; @@ -117,6 +116,36 @@ aside { position: relative; } +@media all and (max-width: 1100px) { + body { + flex-direction: column-reverse; + max-width: 100%; + /* this is a pretty bad solution */ + margin: -20px 20px 20px; + } + + main { + max-width: 100%; + } + + aside { + position: relative; + } + + /* nav { + display: flex; + flex-direction: row; + gap: 1rem; + } */ + + .sidebar-contents { + /* padding: 15px; */ + margin: 0 0 -25px 0; + /* width: min-content; */ + } + +} + /* body > footer { margin-top: 4rem; padding: 2rem 1rem 1.5rem 1rem;