:art: responsive layout tweaks for list pages

vue-theme/src/components/sidebars/sidebar.vue

@@ -138,14 +138,11 @@ export default {
 @import '../../sss/variables.sss'
 @import '../../sss/theme.sss'
 aside.sidebar
-    p, h3
-        margin: 0
     position: sticky
-    /* top: 65px */
-    top: $ms-7
-    /* background-color: salmon */
-    /* margin: 0 0 0 $ms-0 */
+    top: 40px
     width: 100%
+    p, h3
+        margin: 0
     > section
         > *
             padding: $ms-0
@@ -154,7 +151,9 @@ aside.sidebar
             /* background-color: blue */
     ul
         list-style: none  
+        display: flex
         li
+            padding: 0 $ms-0 0 0
             img
                 width: 100%
     .shadow
@@ -165,4 +164,6 @@ aside.sidebar
     aside.sidebar
         min-width: 25%
         width: 25%
+        ul
+            flex-direction: column
 </style>

vue-theme/src/pages/list.vue

@@ -207,42 +207,44 @@ export default {
 // prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
-.page--list article
-    min-width: 375px
-    > header
-        padding: 1em
-        > h1
-            margin: 0
-        > .content
-            padding: 0
-            width: 100%
-    > footer
-        padding: $ms-0
-
-    /* posts not grid list */
-    .posts
-        list-style: none
-        grid-gap: $ms--2
-        .post
-            width: 100%
-            &.inbetween
-                grid-column: span 3
-                background: white
-                padding: 0.3em 0
-                font-size: 1.3em
-                > p
-                    margin: 0
-
-    /* posts in grid list */
-    .posts.is-grid
-        width: 100%
-        display: grid
-        grid-template-columns: repeat(2, 1fr)
-        align-items: start
-        /* This is important for how the grid lines up to the page */
-        justify-content: right 
-        .post img
+.page--list 
+    flex-direction: column-reverse
+    article
+        > header
+            padding: 1em
+            > h1
+                margin: 0
+            > .content
+                padding: 0
+                width: 100%
+        > footer
+            padding: $ms-0
+
+        /* posts not grid list */
+        .posts
+            list-style: none
+            grid-gap: $ms--2
+            .post
+                width: 100%
+                &.inbetween
+                    grid-column: span 3
+                    background: white
+                    padding: 0.3em 0
+                    font-size: 1.3em
+                    > p
+                        margin: 0
+
+        /* posts in grid list */
+        .posts.is-grid
             width: 100%
+            min-width: 185px
+            display: grid
+            grid-template-columns: repeat(2, 1fr)
+            align-items: start
+            /* This is important for how the grid lines up to the page */
+            justify-content: right 
+            .post img
+                width: 100%
 
 @media (min-width: $medium)
     .page--list