fix mobile layout

2 years ago · 77afcff04e
parent 7cdd83538a
commit 77afcff04e
2 changed files with 31 additions and 7 deletions
--- 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;
  }
 }

--- a/src/layout/BaseBlog.astro
+++ b/src/layout/BaseBlog.astro
@ -19,7 +19,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
    <meta property="og:description" content={content.description}/>
    <meta property="og:url" content={canonicalURL}/>
  </head>
-  <body>
+  <body class="blog-content">
    <h2>{content.title}</h2>
    <h3>{content.description}</h3>
    <slot />