Improve the display of the post lists on smaller screens

1 files changed, 53 insertions, 20 deletions

diff --git a/static/css/base.css b/static/css/base.css
index 9d732bc..1e553f8 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -216,7 +216,6 @@ th {
     overflow-x: auto;
 }
 
-
 @media screen and (min-width: 1280px) {
     .sheet {
         display: inline-block;
@@ -308,41 +307,67 @@ th {
     overflow-x: auto;
 }
 
-@media screen and (min-width: 1280px) {
-    .sheet {
-        display: inline-block;
-        vertical-align: top;
-        width: 75%;
-    }
-
-    .sheet-padded {
-        padding-right: 20px;
-    }
-}
-
 #post-list {
     list-style: none;
-    padding-left: 11em;
     font-size: 1.6em;
 }
 
 #post-list li {
-    min-height: 3em;
+    margin-bottom: 1.5em;
+    clear: both;
+}
+
+#post-list li .post-list-link {
+    display: block;
+    border-style: unset;
 }
 
 #post-list li time {
-    float: left;
     font-size: 1em;
-    margin-left: -7em;
-    display: inline-block;
-    text-align: right;
-    width: 6em;
 }
 
 #post-list li time div {
     font-size: 0.7em;
 }
 
+#post-list .post-list-week-text {
+    border-color: #F4BB15;
+    border-style: none none solid none;
+    border-width: thin;
+}
+
+@media screen and (max-width: 768px) {
+    #post-list {
+        padding-left: 0;
+    }
+
+    #post-list li {
+        margin-bottom: 0.8em;
+    }
+
+    #post-list .post-list-week-text {
+        margin-top: 0.5em;
+        float: right;
+        font-size: 0.8em;
+        text-align: right;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    #post-list {
+        padding-left: 11em;
+    }
+
+    #post-list li time {
+        float: left;
+        font-size: 1em;
+        margin-left: -7em;
+        display: inline-block;
+        text-align: right;
+        width: 6em;
+    }
+}
+
 .draft-post {
     font-style: italic;
 }
@@ -423,3 +448,11 @@ footer {
 .metta {
     color: #F4BB15;
 }
+
+.clearfix:after {
+   content: " "; /* Older browser do not support empty content */
+   visibility: hidden;
+   display: block;
+   height: 0;
+   clear: both;
+}