Improve the display of the post lists on smaller screens

2 files changed, 67 insertions, 29 deletions

diff --git a/src/theme.scm b/src/theme.scm
index 7ce23f3..4b8dfc2 100644
--- a/src/theme.scm
+++ b/src/theme.scm
@@ -113,7 +113,7 @@
                               (post-ref post 'end-date))
                              (current-time))))
                 `(li
-                  (@ (class ,(if draft "draft-post" "")))
+                  (@ (class ,(if draft "draft-post clearfix" "clearfix")))
                   ,(if draft
                        `((time
                           "Week " ,(post-ref post 'week)
@@ -122,13 +122,16 @@
                            "Beginning "
                            ,(date->string*
                              (post-ref post 'start-date))))
-                         ,(string-append
-                           "Will be published on "
-                           (date->string (move-date-by-days
-                                          (post-ref post 'start-date)
-                                          7)
-                                         "~A (~1)")))
-                       `(a (@ (href ,(post-uri post)))
+                         (span
+                          (@ (class "post-list-week-text"))
+                          "Will be published on "
+                          ,(let ((date (move-date-by-days
+                                        (post-ref post 'start-date)
+                                        7)))
+                             `(span (@ (title ,(date->string date "~1")))
+                                    ,(date->string date "~A")))))
+                       `(a (@ (href ,(post-uri post))
+                              (class "post-list-link"))
                            (time
                             "Week " ,(post-ref post 'week)
                             (div
@@ -136,7 +139,9 @@
                              "Beginning "
                              ,(date->string*
                                (post-ref post 'start-date))))
-                           ,(post-ref post 'synopsis))))))
+                           (span
+                            (@ (class "post-list-week-text"))
+                            ,(post-ref post 'synopsis)))))))
             posts)
      ,@(if (string=? title "Recent posts")
            '((li
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;
+}