From 56ec9a6391aa3631cf3da3eb9e7361ce76e5b0dd Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 18 Feb 2020 20:34:13 +0000
Subject: [PATCH] style the list pages

center the lists
---
 assets/scss/_content.scss | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss
index 40d9778..8cc3cd0 100644
--- a/assets/scss/_content.scss
+++ b/assets/scss/_content.scss
@@ -85,22 +85,39 @@
 
 .list {
   ul {
+    position: relative;
+    width: 100%;
     margin: 3.2rem 0 3.2rem 0;
     list-style: none;
     padding: 0;
+    @media only screen and (max-width: 768px) {
+      text-align: center;
+    }
     li {
       font-size: 1.8rem;
       @media only screen and (max-width: 768px) {
         margin: 1.6rem 0 1.6rem 0;
       }
+      @media only screen and (min-width: 768px) {
+        display: flex;
+        margin-bottom: 0.8rem;
+      }
       .date {
         display: inline-block;
-        width: 20rem;
+        width: 50%;
         text-align: right;
-        margin-right: 3rem;
+        padding-right: 1.5rem;
         @media only screen and (max-width: 768px) {
+          width: 100%;
+          text-align: center;
+          font-size: 0.9em;
           display: block;
-          text-align: left;
+          padding-right: 0;
+        }
+        @media only screen and (min-width: 768px) {
+          display: flex;
+          align-items: start;
+          justify-content: flex-end;
         }
       }
       .title {
@@ -108,6 +125,10 @@
         color: $fg-color;
         font-family: $heading-font-family;
         font-weight: $heading-font-weight--bold;
+        @media only screen and (min-width: 768px) {
+          padding-left: 1.5rem;
+          max-width: 20ch;
+        }
         &:hover,
         &:focus {
           color: $link-color;