fix: make text appear in two rows on narrow screens

jessepinho · Apr 5, 2017 · a2c8ded · a2c8ded
1 parent cb5d5ad
commit a2c8ded
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/app/timeline/timeline.component.html b/src/app/timeline/timeline.component.html
@@ -20,12 +20,19 @@
       >
   </div>
 
-  <span>
-    Louder tweets = oranger face.
-    By <a href="https://twitter.com/jessepinho" target="_blank">@jessepinho</a>.
-    {{version}}
-    <a href="https://github.com/jessepinho/trumpymctweetface.com" target="_blank">
-      <img src="/assets/github.svg" alt="GitHub" class="github">
-    </a>
+  <span class="explanation">
+    <span>
+      Louder tweets = oranger face.
+    </span>
+    <span>
+      By <a href="https://twitter.com/jessepinho" target="_blank">@jessepinho</a>.  {{version}}
+
+      <a
+        href="https://github.com/jessepinho/trumpymctweetface.com"
+        target="_blank"
+        >
+        <img src="/assets/github.svg" alt="GitHub" class="github">
+      </a>
+    </span>
   </span>
 </footer>
diff --git a/src/app/timeline/timeline.component.scss b/src/app/timeline/timeline.component.scss
@@ -27,6 +27,17 @@ footer {
   font-size: 0.7rem;
 }
 
+.explanation {
+  text-align: right;
+
+  display: flex;
+  flex-direction: column;
+
+  @media only screen and (min-width: 640px) {
+    display: initial;
+  }
+}
+
 .github {
   vertical-align: middle;
   width: 20px;