summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/theme.scm23
-rw-r--r--static/css/base.css73
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;
+}