ソースを参照

:art: adding max width helper class | moving around markup for welcome

tags/0.9.0
J 4年前
コミット
5af3a5273d
2個のファイルの変更63行の追加61行の削除
  1. 59
    61
      vue-theme/src/pages/index.vue
  2. 4
    0
      vue-theme/src/sss/_helpers.sss

+ 59
- 61
vue-theme/src/pages/index.vue ファイルの表示

@@ -1,65 +1,66 @@
1 1
 // Homepage grid
2 2
 <template lang="pug">
3 3
 .page--index.f-row.between
4
-    article.f-grow.f-col
5
-        //- if sticky
6
-        .f-row
7
-            h3(v-if="!allStickyLoaded") loading...
8
-            section(v-else-if="allStickyLoaded").shadow
9
-                h4.t-cap sticky
10
-                ul
11
-                    li(v-for="sticky in allSticky")
12
-                        p {{ sticky.type }}: {{ sticky.title }}
13
-        //- loading
14
-        .f-row
15
-            h3(v-if="!allPagesLoaded") loading...
16
-            .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
4
+    article 
5
+        ul.f-grow.f-col
6
+            //- if sticky
7
+            li.f-row.wrap.w-max
8
+                h3(v-if="!allStickyLoaded") loading...
9
+                section(v-else-if="allStickyLoaded").w-max.shadow
10
+                    h4.t-cap sticky
11
+                    ul
12
+                        li(v-for="sticky in allSticky")
13
+                            p {{ sticky.type }}: {{ sticky.title }}
14
+            //- loading
15
+            li.f-row.wrap.w-max
16
+                h3(v-if="!allPagesLoaded") loading...
17
+                .content(v-else-if="allPages['welcome']" v-html="allPages['welcome'].content")
17 18
 
18
-        //- top section
19
-        .f-row
20
-            section(v-if="allEpisodesLoaded").shadow
21
-                router-link(:to="`/episodes`")
22
-                    h3.t-up episodes
23
-                router-link(v-if="allEpisodes.length > 0" :to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
24
-                    img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
25
-                    h2.t-up.t-cntr {{ Object.values(allEpisodes)[0].slug }}
26
-                p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]
19
+            //- top section
20
+            li.f-row.wrap.w-max
21
+                section(v-if="allEpisodesLoaded").w-max.shadow
22
+                    router-link(:to="`/episodes`")
23
+                        h3.t-up episodes
24
+                    router-link(v-if="allEpisodes.length > 0" :to="`/episodes/${Object.values(allEpisodes)[0].slug}`")
25
+                        img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
26
+                        h2.t-up.t-cntr {{ Object.values(allEpisodes)[0].slug }}
27
+                    p episode excerpt, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, ullamcorper nec dapibus a, ullamcorper a elit. Integer mattis interdum mauris, sit amet feugiat dui consequat et. Curabitur cursus justo quis nunc euismod, nec ornare sem ornare. Mauris eget purus finibus, tempus tellus sed, maximus nisi. Fusce cursus placerat sodales...[&hellip;]
27 28
 
28
-            section(v-if="allExhibitionsLoaded").shadow
29
-                router-link(:to="`/exhibitions`")
30
-                    h3.t-up exhibitions
31
-                router-link(v-if="allExhibitions.length > 0" :to="`/exhibitions/${Object.values(allExhibitions)[0].slug}`")
32
-                    img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
33
-                    h2.t-up.t-cntr {{ Object.values(allExhibitions)[0].slug }}
29
+                section(v-if="allExhibitionsLoaded").w-max.shadow
30
+                    router-link(:to="`/exhibitions`")
31
+                        h3.t-up exhibitions
32
+                    router-link(v-if="allExhibitions.length > 0" :to="`/exhibitions/${Object.values(allExhibitions)[0].slug}`")
33
+                        img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
34
+                        h2.t-up.t-cntr {{ Object.values(allExhibitions)[0].slug }}
34 35
 
35
-            section(v-if="allEventsLoaded").shadow
36
-                router-link(:to="`/events`")
37
-                    h3.t-up events
38
-                router-link(v-if="allEvents.length > 0" :to="`/events/${Object.values(allEvents)[0].slug}`")
39
-                    img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
40
-                    h2.t-up.t-cntr {{ Object.values(allEvents)[0].slug }}
36
+                section(v-if="allEventsLoaded").w-max.shadow
37
+                    router-link(:to="`/events`")
38
+                        h3.t-up events
39
+                    router-link(v-if="allEvents.length > 0" :to="`/events/${Object.values(allEvents)[0].slug}`")
40
+                        img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
41
+                        h2.t-up.t-cntr {{ Object.values(allEvents)[0].slug }}
41 42
 
42
-            section(v-if="allPostsLoaded").shadow
43
-                router-link(:to="`/posts`")
44
-                    h3.t-up shorts PLACEHOLDER
45
-                router-link(v-if="allPosts.length > 0" :to="`/posts/${Object.values(allPosts)[0].slug}`")
46
-                    img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
47
-                    h2.t-up.t-cntr {{ Object.values(allPosts)[0].slug }}
43
+                section(v-if="allPostsLoaded").w-max.shadow
44
+                    router-link(:to="`/posts`")
45
+                        h3.t-up shorts PLACEHOLDER
46
+                    router-link(v-if="allPosts.length > 0" :to="`/posts/${Object.values(allPosts)[0].slug}`")
47
+                        img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
48
+                        h2.t-up.t-cntr {{ Object.values(allPosts)[0].slug }}
48 49
 
49
-        //- middle row
50
-        .f-row
51
-            section(v-if="allArtistsLoaded").shadow
52
-                router-link(:to="`/artists`")
53
-                    h3.t-up artists
54
-                router-link(v-if="allArtists.length > 0" :to="`/artists/${Object.values(allArtists)[0].slug}`")
55
-                    img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
56
-                    h2.t-up.t-cntr {{ Object.values(allArtists)[0].slug }}
50
+            //- middle row
51
+            li.f-row.wrap.w-max
52
+                section(v-if="allArtistsLoaded").w-max.shadow
53
+                    router-link(:to="`/artists`")
54
+                        h3.t-up artists
55
+                    router-link(v-if="allArtists.length > 0" :to="`/artists/${Object.values(allArtists)[0].slug}`")
56
+                        img.index(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
57
+                        h2.t-up.t-cntr {{ Object.values(allArtists)[0].slug }}
57 58
 
58
-        //- footer row
59
-        .f-row
60
-            footer.f-col
61
-                p end of article icon
62
-                img(src="../star.svg")
59
+            //- footer row
60
+            li.f-row.wrap.w-max
61
+                footer.f-col
62
+                    p end of article icon
63
+                    img(src="../star.svg")
63 64
 </template>
64 65
 
65 66
 <script>
@@ -101,14 +102,11 @@ export default {
101 102
 
102 103
 .page--index
103 104
     article
104
-        section
105
-            flex-grow: 1
106
-            &:nth-of-type(2)
107
-                flex-grow: 3
108
-            &:nth-of-type(3), &:nth-of-type(4)
109
-                flex-grow: 1
110
-            &:nth-of-type(5), &:nth-of-type(6)
111
-                flex-grow: 4
105
+        ul > li
106
+            justify-content: space-around
107
+            align-items: stretch
108
+            section
109
+                padding: 1em
112 110
     footer
113 111
         img
114 112
             width: 30px

+ 4
- 0
vue-theme/src/sss/_helpers.sss ファイルの表示

@@ -76,6 +76,10 @@ button
76 76
         background-color: transparent !important
77 77
         background: none
78 78
 
79
+.w
80
+    &-max
81
+        width: 100%
82
+
79 83
 .z
80 84
     &-top
81 85
         z-index: 10001

読み込み中…
キャンセル
保存