[fix] Fix front page button alignment on mobile

2 files changed, 25 insertions, 2 deletions

diff --git a/posts/index.njk b/posts/index.njk
index 1e3d11f..3503bf6 100644
--- a/posts/index.njk
+++ b/posts/index.njk
@@ -8,7 +8,7 @@
   "previousPage": d => Math.ceil((d.collections.all.length-1)/5) }}
 ---
       <img id="logo" src="/favicon.png" alt="Blog Logo">
-      <h1>{{ pageTitle }}<a id="feed" title="RSS Feed" aria-label="RSS Feed" href="/feed.xml"></a><a id="message-me" title="Message Me" aria-label="Message Me" href="https://alexishovorka.com/TODO" target="_blank"></a></h1>
+      <h1>{{ pageTitle }}<span id="title-btns"><a id="feed" title="RSS Feed" aria-label="RSS Feed" href="/feed.xml"></a><a id="message-me" title="Message Me" aria-label="Message Me" href="https://alexishovorka.com/TODO" target="_blank"></a></span></h1>
       <hr>
 
       {% set post = collections.all.slice(-1)[0] -%}
@@ -16,6 +16,10 @@
       {%- set postDate = post.date.toISOString().slice(0,10) %}
       <p class="post-date"><time datetime="{{ postDate }}">{{ postDate }}</time></p>
 
+      {%- if post.data.heroImg %}
+      <img class="hero" src="{{ post.data.heroImg }}" alt="{{ post.data.heroImgAlt }}">
+      {%- endif %}
+
       {{ post.templateContent | fixAnchors(post.url) | safe }}
 
 {%- if post.data.tags %}
diff --git a/static/style.css b/static/style.css
index bf35504..1b81c96 100644
--- a/static/style.css
+++ b/static/style.css
@@ -29,9 +29,13 @@ html {
   margin: 0.94rem 0 0 -2rem;
 }
 
+@media (max-width: 42rem) {
+  #logo { margin-left: -1.9rem; }
+}
+
 #invert {
   float: right;
-  margin: 1.34rem 0 0;
+  margin: 1.34rem 0 0 .5rem;
   height: 1rem;
   width: 1rem;
   background: #bbb;
@@ -50,6 +54,21 @@ html {
   border-radius: 1rem;
 }
 
+@media (max-width: 474px) {
+  #title-btns {
+    display: block;
+    position: absolute;
+    top: calc(2vw + 2.6rem);
+    right: 1.6rem;
+    padding-left: .6rem;
+    background: #fff;
+  }
+  h1 {
+    margin: .9rem 0 1rem !important;
+    line-height: 1.8rem;
+  }
+}
+
 #feed, #message-me {
   box-sizing: content-box;
   display: inline-block;