:art: making single and list layouts responsive | making sidebar responsive

vue-theme/src/app.vue

@@ -95,19 +95,6 @@ html
                                 .blocks-gallery-item
                                     width: 25% */
                 
-                /* Sidebar */
-                > aside
-                    background-color: salmon
-                    margin: 0 0 0 $ms-0
-                    min-width: 27%
-                    width: 27%
-                    > section
-                        > *
-                            padding: $ms-0
-                            margin: 0 0 $ms-0 0
-                        > .post
-                            background-color: blue
-
         nav, footer
             &.main
                 background-color: pink

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

@@ -93,9 +93,25 @@ export default {
 </script>
 
 <style lang="postcss">
+@import '../../sss/variables.sss'
+@import '../../sss/theme.sss'
 aside.sidebar
     position: sticky
     top: 65px
+    background-color: salmon
+    margin: 0 0 0 $ms-0
+    width: 100%
+    > section
+        > *
+            padding: $ms-0
+            margin: 0 0 $ms-0 0
+        > .post
+            background-color: blue
     ul
-        list-style: none
+        list-style: none      
+
+@media (min-width: $medium)
+    aside.sidebar
+        min-width: 27%
+        width: 27%
 </style>

vue-theme/src/pages/list.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.page--list.f-row.between
+.page--list.f-col.between
     article.f-grow
         header.f-col.center.t-up
             .title.f-row
@@ -133,6 +133,8 @@ export default {
 </script>
 
 <style lang="postcss">
+@import '../sss/variables.sss'
+@import '../sss/theme.sss'
 .page--list
     article
         > header
@@ -159,5 +161,7 @@ export default {
                 list-style: none
                 img
                     max-width: 100%
-                
+@media (min-width: $medium)
+    .page--list.f-col
+        flex-direction: row
 </style>

vue-theme/src/pages/single.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.page--single.f-row.between
+.page--single.f-col.between
     gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
 
     article(v-if="!post")
@@ -222,9 +222,8 @@ export default {
             left: 0px 
             width: 100% 
             height: 100%  */
-
-    @media (--large-viewport)
-        .sidebar
-            background-color: purple
-
+        
+@media (min-width: $medium)
+    .page--single.f-col
+        flex-direction: row
 </style>