Bladeren bron

initial css layouts

tags/0.9.0
J 6 jaren geleden
bovenliggende
commit
cf01f92755
2 gewijzigde bestanden met toevoegingen van 37 en 19 verwijderingen
  1. 22
    7
      vue-theme/src/app.vue
  2. 15
    12
      vue-theme/src/pages/index.vue

+ 22
- 7
vue-theme/src/app.vue Bestand weergeven

@@ -2,7 +2,7 @@
2 2
 div#theme.f-col
3 3
     cia-nav
4 4
     cia-hero
5
-    main
5
+    main.f-col
6 6
         router-view
7 7
     cia-footer
8 8
 </template>
@@ -28,12 +28,27 @@ export default {
28 28
 
29 29
 html > body
30 30
     font-family: $sans
31
-    main > article[class^="page--"]
32
-        padding: $ms
33
-        > section
34
-            padding: 0 0 $ms
35
-    :--headings
36
-        color: red
31
+    main 
32
+        background-color: green
33
+        width: 100%
34
+        > [class^="page--"]
35
+            background-color: pink
36
+            max-width: 100em
37
+            width: 90%
38
+            padding: $ms
39
+            align-items: flex-start
40
+            
41
+            /* Single &List Pages */
42
+            > article
43
+                background-color: lightpink
44
+                padding: $ms
45
+            > aside
46
+                background-color: salmon
47
+                padding: $ms
48
+                margin: 0 0 0 $ms
49
+                width: 27%
50
+        :--headings
51
+            color: red
37 52
 
38 53
     nav, footer
39 54
         &.main

+ 15
- 12
vue-theme/src/pages/index.vue Bestand weergeven

@@ -1,16 +1,19 @@
1 1
 <template lang="pug">
2
-article.page--index
3
-    h1 {{ site }}: index
4
-    section(v-if="allPagesLoaded")
5
-        h4 pages
6
-        p {{ Object.values(allPages).length }}
7
-    section(v-if="allPostsLoaded")
8
-        h4 posts
9
-        p {{ Object.values(allPosts).length }}
10
-        hr
11
-        div(v-for="post in allPosts")
12
-            h4 {{ post.slug }}
13
-            div(v-for="block in post.blocks" v-html="block")
2
+.page--index.f-row.between
3
+    article.page--index.f-grow
4
+        h1 {{ site }}: index
5
+        section(v-if="allPagesLoaded")
6
+            h4 pages
7
+            p {{ Object.values(allPages).length }}
8
+        section(v-if="allPostsLoaded")
9
+            h4 posts
10
+            p {{ Object.values(allPosts).length }}
11
+            hr
12
+            div(v-for="post in allPosts")
13
+                h4 {{ post.slug }}
14
+                div(v-for="block in post.blocks" v-html="block")
15
+    aside
16
+        h4 this is some other stuff
14 17
 </template>
15 18
 
16 19
 <script>

Laden…
Annuleren
Opslaan