Procházet zdrojové kódy

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

tags/0.9.0
j před 4 roky
rodič
revize
4e54fab919

+ 0
- 13
vue-theme/src/app.vue Zobrazit soubor

@@ -95,19 +95,6 @@ html
95 95
                                 .blocks-gallery-item
96 96
                                     width: 25% */
97 97
                 
98
-                /* Sidebar */
99
-                > aside
100
-                    background-color: salmon
101
-                    margin: 0 0 0 $ms-0
102
-                    min-width: 27%
103
-                    width: 27%
104
-                    > section
105
-                        > *
106
-                            padding: $ms-0
107
-                            margin: 0 0 $ms-0 0
108
-                        > .post
109
-                            background-color: blue
110
-
111 98
         nav, footer
112 99
             &.main
113 100
                 background-color: pink

+ 17
- 1
vue-theme/src/components/sidebars/sidebar.vue Zobrazit soubor

@@ -93,9 +93,25 @@ export default {
93 93
 </script>
94 94
 
95 95
 <style lang="postcss">
96
+@import '../../sss/variables.sss'
97
+@import '../../sss/theme.sss'
96 98
 aside.sidebar
97 99
     position: sticky
98 100
     top: 65px
101
+    background-color: salmon
102
+    margin: 0 0 0 $ms-0
103
+    width: 100%
104
+    > section
105
+        > *
106
+            padding: $ms-0
107
+            margin: 0 0 $ms-0 0
108
+        > .post
109
+            background-color: blue
99 110
     ul
100
-        list-style: none
111
+        list-style: none      
112
+
113
+@media (min-width: $medium)
114
+    aside.sidebar
115
+        min-width: 27%
116
+        width: 27%
101 117
 </style>

+ 6
- 2
vue-theme/src/pages/list.vue Zobrazit soubor

@@ -1,5 +1,5 @@
1 1
 <template lang="pug">
2
-.page--list.f-row.between
2
+.page--list.f-col.between
3 3
     article.f-grow
4 4
         header.f-col.center.t-up
5 5
             .title.f-row
@@ -133,6 +133,8 @@ export default {
133 133
 </script>
134 134
 
135 135
 <style lang="postcss">
136
+@import '../sss/variables.sss'
137
+@import '../sss/theme.sss'
136 138
 .page--list
137 139
     article
138 140
         > header
@@ -159,5 +161,7 @@ export default {
159 161
                 list-style: none
160 162
                 img
161 163
                     max-width: 100%
162
-                
164
+@media (min-width: $medium)
165
+    .page--list.f-col
166
+        flex-direction: row
163 167
 </style>

+ 5
- 6
vue-theme/src/pages/single.vue Zobrazit soubor

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

Načítá se…
Zrušit
Uložit