From 77afcff04e08806759e7d52d234428236292ede3 Mon Sep 17 00:00:00 2001 From: Ruthenic Date: Mon, 24 Oct 2022 00:07:13 -0400 Subject: [PATCH] fix mobile layout --- src/css/base.scss | 36 ++++++++++++++++++++++++++++++------ src/layout/BaseBlog.astro | 2 +- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/css/base.scss b/src/css/base.scss index 5ef1233..7a442b3 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -5,19 +5,40 @@ justify-content: center; } +.blog-content { + img { + max-width: 100%; + } +} + .footer { position: fixed; display: flex; flex-grow: 1; - justify-content: center; - align-items: center; + @media (max-width: 470px) { //mobile + justify-content: flex-end; + align-items: center; + flex-direction: column; + } + @media (min-width: 470px) { //desktop + justify-content: center; + align-items: center; + flex-direction: row; + height: 3.4375em; + } bottom: 0; left: 0px; width: 100%; - height: 55px; img { - margin-right: 10px; + display: flex; height: 30px*1.5; + @media (max-width: 470px) { //even smoler mobile + margin-top: 0.3125em; + margin-bottom: 0.3125em; + } + @media (min-width: 470px) { //desktop + margin-right: 0.625em; + } } } @@ -34,8 +55,11 @@ .footer-entries { flex: 1; - a { - margin-left: 10px; + @media (min-width: 470px) { //desktop + margin-left: 0.625em; + } + a:not(:last-child) { + margin-right: 0.625em; } } diff --git a/src/layout/BaseBlog.astro b/src/layout/BaseBlog.astro index d5525cc..379e2e7 100644 --- a/src/layout/BaseBlog.astro +++ b/src/layout/BaseBlog.astro @@ -19,7 +19,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site); - +

{content.title}

{content.description}