feat: adding rows for homepage | feat: new max width sss variable | feat: tweaking some old styles

vue-theme/src/app.vue

 
         > [class^="page--"]
             background-color: pink
-            max-width: 100em
+            max-width: $max-width
             width: 90%
             padding: $ms 0
             align-items: flex-start
             /* Single & List Pages */
             > article
                 background-color: lightpink
-                > *
+                > * > *
                     padding: $ms
                 > section, > header
                     margin: 0 0 $ms

vue-theme/src/components/navigation/navigation.vue

 // Replace with calls to menu system
 <template lang="pug">
-nav.main
+nav.main.f-row.center
     ul.f-row.between
         li
             a(href="/")
             a(href="/artists") artists
         li
             a(href="/episodes") episodes
-</template>
+</template>
+
+<style lang="postcss">
+@import '../../sss/variables.sss'
+
+nav.main
+    ul
+        width: $max-width
+</style>

vue-theme/src/pages/index.vue

 <template lang="pug">
 .page--index.f-row.between
     article.f-grow
-        section(v-if="allEpisodesLoaded").shadow
-            router-link(:to="`./episodes`")
-                h4 Episodes
-            router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
-                p {{ Object.values(allEpisodes)[0].title }}
-        section(v-if="allArtistsLoaded").shadow
-            router-link(:to="`./artists`")
-                h4 artists
-            router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
-                p {{ Object.values(allArtists)[0].title }}
-        section(v-if="allPagesLoaded").shadow
-            h4 pages
-            router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
-                p {{ Object.values(allPages)[0].title }}
-        section(v-if="allPostsLoaded").shadow
-            router-link(:to="`./posts`")
-                h4 posts
-            router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")
-                p {{ Object.values(allPosts)[0].title }}
-        section
-            //- COMPONENT: Looping component
-            .post(v-for="post in allPosts")
-                h4.post--title {{ post.slug }}
-                ul.post--content
-                    li.post--content--block(v-for="block in post.blocks" v-html="block")
-        footer.f-row
-            p icon
+        .f-row
+            section(v-if="allEpisodesLoaded").shadow
+                router-link(:to="`./episodes`")
+                    h4 Episodes
+                router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
+                    p {{ Object.values(allEpisodes)[0].title }}
+            section(v-if="allArtistsLoaded").shadow
+                router-link(:to="`./artists`")
+                    h4 artists
+                router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
+                    p {{ Object.values(allArtists)[0].title }}
+            section(v-if="allPagesLoaded").shadow
+                h4 pages
+                router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
+                    p {{ Object.values(allPages)[0].title }}
+        .f-row
+            section(v-if="allPostsLoaded").shadow
+                router-link(:to="`./posts`")
+                    h4 posts
+                router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")
+                    p {{ Object.values(allPosts)[0].title }}
+        .f-row
+            section
+                //- COMPONENT: Looping component
+                .post(v-for="post in allPosts")
+                    h4.post--title {{ post.slug }}
+                    ul.post--content
+                        li.post--content--block(v-for="block in post.blocks" v-html="block")
+        .f-row
+            footer.f-row
+                p icon
 </template>
 
 <script>
 
 .page--index
     article
+        .f-row
+            &:nth-of-type(2)
+                margin: $ms 0
         section
-            float: left
-            width: 25%
+            flex-grow: 1
             &:nth-of-type(1)
-                width: 49.7%
+                flex-grow: 3
             &:nth-of-type(2), &:nth-of-type(3)
+                flex-grow: 1
                 margin: 0 0 0 $ms
-                width: 24%
             &:nth-of-type(4), &:nth-of-type(5)
-                width: 100%
+                flex-grow: 4
+            
 </style>

vue-theme/src/pages/list.vue

             h1 {{ type }} list
             span(v-if="sortBy")
                 h1  sorted by {{ sortBy.replace('-', ' ') }}
+        
         section.shadow
             h4 {{ type }}
             p {{ Object.values(posts).length }}
             p {{ sidebar }}
+
         section(v-for="post in posts").shadow
             router-link(:to="`/${type}/${post.slug}`")
                 h4 {{ post.title }}

vue-theme/src/pages/single.vue

     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
+
         section
             h4 {{ posts[$route.params.slug].title }}
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
+    
     sidebar(v-if="sidebar" :type="`${type}`")
+        .shadow
+            h1.t-up single slot
+            div
+                p body whatever
 </template>
 
 <script>

vue-theme/src/sss/variables.sss

 $ms: 1vw
 $base: 1em
 
+$max-width: 70em
+
 // Circles for add page
 $radius: 2.5vw
 $path: 4px