Layout year page for mobile

norm · Aug 14, 2021 · d68ea8e · d68ea8e
1 parent 42a3e68
commit d68ea8e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 43 deletions.
diff --git a/sass/static.scss b/sass/static.scss
@@ -99,26 +99,30 @@ ol.clothing {
             @extend .screen-reader-text;
         }
 
-        &.Sat {
-            grid-column-start: 1;
-        }
-        &.Sun {
-            grid-column-start: 2;
-        }
-        &.Mon {
-            grid-column-start: 3;
-        }
-        &.Tue {
-            grid-column-start: 4;
-        }
-        &.Wed {
-            grid-column-start: 5;
-        }
-        &.Thu {
-            grid-column-start: 6;
-        }
-        &.Fri {
-            grid-column-start: 7;
+        @include width_above(819px) {
+            // when there is space to lay out a week across,
+            // line up Saturdays on the left always
+            &.Sat {
+                grid-column-start: 1;
+            }
+            &.Sun {
+                grid-column-start: 2;
+            }
+            &.Mon {
+                grid-column-start: 3;
+            }
+            &.Tue {
+                grid-column-start: 4;
+            }
+            &.Wed {
+                grid-column-start: 5;
+            }
+            &.Thu {
+                grid-column-start: 6;
+            }
+            &.Fri {
+                grid-column-start: 7;
+            }
         }
     }
 
@@ -219,3 +223,20 @@ ol.clothing {
         }
     }
 }
+
+ol.year,
+ol.year > li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+ol.year h2,
+body.year #body h1 {
+    text-align: center;
+}
+body.year #body h1 {
+    font-size: 3em;
+}
+ol.year li:first-child h2 {
+    margin-top: 0;
+}
diff --git a/templates/wearers/base.html b/templates/wearers/base.html
@@ -5,7 +5,7 @@
   {% include 'wearers/styles.html' %}
   {% block page-style %}{% endblock %}
 </head>
-<body>
+<body class='{% block body-class %}{% endblock %}'>
 {% block header %}
   <header>
     <h1>

diff --git a/templates/wearers/wearer_year.html b/templates/wearers/wearer_year.html
@@ -1,25 +1,7 @@
 {% extends "wearers/base.html" %}
 {% load thumbnail %}
 
-{% block page-style %}
-<style>
-  ol.year,
-  ol.year li {
-    margin: 0;
-    padding: 0;
-  }
-  ol.year h2 {
-    margin-top: 0;
-  }
-  ol.year ol.month {
-    margin-bottom: 2em;
-  }
-  #body h1,
-  ol.year h2 {
-    text-align: center;
-  }
-</style>
-{% endblock %}
+{% block body-class %}year{% endblock %}
 
 {% block content %}
 <h1>{{year}}</h1>
@@ -28,10 +10,12 @@ <h1>{{year}}</h1>
 {% for wearing in wearings %}
   {% ifchanged wearing.day.month %}
     {% if not forloop.first %}
-    </ol>
+      </ol>
+    </li>
     {% endif %}
-    <h2>{{wearing.day|date:"F"}}</h2>
-    <ol class='month clothing'>
+    <li>
+      <h2>{{wearing.day|date:"F"}}</h2>
+      <ol class='month clothing'>
   {% endifchanged %}
     <li value='{{wearing.day|date:"d"}}'
         class='{{wearing.day|date:"D"}} {% if wearing.day.weekday == 5 %}new-week{% endif %}'>
@@ -45,6 +29,7 @@ <h2>{{wearing.day|date:"F"}}</h2>
       <i><b>{{wearing.day|date:"F"}}</b> {{wearing.day|date:"jS"}}</i>
     </li>
 {% endfor %}
+    </li>
   </ol>
 </ol>