Переглянути джерело

Adjust footer links, responsive wrap behaviour.

tags/1.0.3
Alej 3 роки тому
джерело
коміт
566b423c07
1 змінених файлів з 65 додано та 57 видалено
  1. 65
    57
      vue-theme/src/components/footer.vue

+ 65
- 57
vue-theme/src/components/footer.vue Переглянути файл

54
             li
54
             li
55
                 h5 
55
                 h5 
56
                     router-link(to="/episode") PBS Series
56
                     router-link(to="/episode") PBS Series
57
-                ul.f-col.start 
58
-                    li 
59
-                        router-link(to="/episode")   Episodes
60
-                    li 
61
-                        router-link(to="/short")   Shorts
62
-                    li 
63
-                        router-link(to="/technique")   Techniques
57
+                    ul.f-col.start 
58
+                        li 
59
+                            router-link(to="/episode")   Episodes
60
+                        li 
61
+                            router-link(to="/short")   Shorts
62
+                        li 
63
+                            router-link(to="/technique")   Techniques
64
             li 
64
             li 
65
                 h5
65
                 h5
66
                     router-link(to="/artist") Artists
66
                     router-link(to="/artist") Artists
67
-                ul.f-col
68
-                    li
69
-                        router-link(to="/artist/sorted/by-alpha")   A-Z
70
-                    li
71
-                        router-link(to="/artist/sorted/by-material")   by Material
72
-
67
+                    ul.f-col
68
+                        li
69
+                            router-link(to="/artist/sorted/by-alpha")   A-Z
70
+                        li
71
+                            router-link(to="/artist/sorted/by-material")   by Material
73
             li
72
             li
74
                 h5 
73
                 h5 
75
                     router-link(to="/exhibition") Exhibitions
74
                     router-link(to="/exhibition") Exhibitions
76
-                ul.f-col
77
-                    li
78
-                        router-link(to="/exhibition/sorted/by-current-and-upcoming")   Current/Upcoming
79
-                    li
80
-                        router-link(to="/object")   Objects
81
-
75
+                    ul.f-col
76
+                        li
77
+                            router-link(to="/exhibition/sorted/by-current-and-upcoming")   Current/Upcoming
78
+                        li
79
+                            router-link(to="/object")   Explore Craft Objects
82
             li
80
             li
83
                 h5
81
                 h5
84
                     router-link(to="/page/center") Center 
82
                     router-link(to="/page/center") Center 
85
-                ul.f-col
86
-                    li
87
-                        router-link(to="/page/center")   Info
88
-                    li
89
-                        router-link(to="/exhibition")   Exhibitions
90
-                    li 
91
-                        router-link(to="/event/sorted/by-current-and-upcoming")   Events 
92
-                    li
93
-                        router-link(to="/event?type=talks")   Talks & Interviews
83
+                    ul.f-col
84
+                        li
85
+                            router-link(to="/page/center")   Info
86
+                        li
87
+                            router-link(to="/exhibition")   Exhibitions
88
+                        li 
89
+                            router-link(to="/event/sorted/by-current-and-upcoming")   Events 
90
+                        li
91
+                            router-link(to="/event?type=talks")   Talks & Interviews
94
             li
92
             li
95
                 h5
93
                 h5
96
                     router-link(to="") Education 
94
                     router-link(to="") Education 
97
-                ul.f-col
98
-                    li
99
-                        router-link(to="/guide")   Guides 
100
-                    li 
101
-                        router-link(to="/publication")   Publications 
102
-                    li 
103
-                        router-link(to="/page/library")   Library 
104
-
105
-
95
+                    ul.f-col
96
+                        li
97
+                            router-link(to="/guide")   Guides 
98
+                        li 
99
+                            router-link(to="/publication")   Publications 
100
+                        li 
101
+                            router-link(to="/page/library")   Library 
106
             li
102
             li
107
                 h5
103
                 h5
108
-                    router-link(to="") News
109
-                ul.f-col
110
-                    li
111
-                        router-link(to="/blog")   Blog Posts  
112
-                    li 
113
-                        router-link(to="/posts?type=releases")   Press Releases 
114
-                    li 
115
-                        router-link(to="/posts?type=articles")   In the News 
104
+                    router-link(to="") News 
105
+                    ul.f-col
106
+                        li
107
+                            router-link(to="/blog")   Blog Posts 
108
+                        li 
109
+                            router-link(to="/posts?type=articles")   In the News 
110
+                        li 
111
+                            router-link(to="/posts?type=releases")   Press Releases 
112
+                        li 
113
+                            router-link(to="/page/community-craft-calendar")   Community Craft Calendar  
114
+            li
115
+                h5
116
+                    router-link(to="/page/about") About 
117
+                    ul.f-col
118
+                        li
119
+                            router-link(to="/page/about")   Craft in America 
120
+                        li 
121
+                            router-link(to="/page/board")   Board of Directors 
122
+                        li 
123
+                            router-link(to="/page/staff")   Staff 
124
+                        li 
125
+                            router-link(to="/page/contact")   Contact   
116
 
126
 
117
     .sub-footer.f-col.start
127
     .sub-footer.f-col.start
118
         h6 Craft in America © 2010–{{ today }} 
128
         h6 Craft in America © 2010–{{ today }} 
141
     background-color: $cia_red
151
     background-color: $cia_red
142
     footer.main
152
     footer.main
143
         display: flex
153
         display: flex
144
-        flex-wrap: wrap
145
         align-items: flex-start 
154
         align-items: flex-start 
146
 
155
 
147
         min-width: $min-width
156
         min-width: $min-width
148
-        /* background-color: $cia_red */
149
         // ALL <ul> tags
157
         // ALL <ul> tags
150
         ul
158
         ul
151
             list-style: none
159
             list-style: none
163
                 h4
171
                 h4
164
                     margin: $ms-0 0 $ms--3
172
                     margin: $ms-0 0 $ms--3
165
                 h5 
173
                 h5 
174
+                    font-size: 0.85em 
166
                     /* margin: $ms-0 0 $ms--1 */
175
                     /* margin: $ms-0 0 $ms--1 */
167
                     margin: $ms-0 0 0
176
                     margin: $ms-0 0 0
168
                 a, a:link, a:visited
177
                 a, a:link, a:visited
170
                     text-decoration: none
179
                     text-decoration: none
171
                 a:hover
180
                 a:hover
172
                     color: $light
181
                     color: $light
173
-                    /* background: $light */
174
                     /* Hovered links */
182
                     /* Hovered links */
175
                 a:active
183
                 a:active
176
                     color: $cia_red2
184
                     color: $cia_red2
194
     /* 768px */
202
     /* 768px */
195
     @media (min-width: $medium)
203
     @media (min-width: $medium)
196
         footer.main > ul
204
         footer.main > ul
205
+            flex-wrap: wrap
197
             /* background-color: darkgreen */
206
             /* background-color: darkgreen */
198
             background-color: $cia_red
207
             background-color: $cia_red
199
             &:nth-child(n+2)
208
             &:nth-child(n+2)
200
                 align-items: flex-start
209
                 align-items: flex-start
201
                 flex-direction: row
210
                 flex-direction: row
202
-                flex-wrap: wrap
203
                 > li
211
                 > li
204
                     width: 32%
212
                     width: 32%
213
+                    h5 
214
+                        font-size: 0.95em 
205
     /* 960px */
215
     /* 960px */
206
     @media (min-width: $large)
216
     @media (min-width: $large)
207
         footer.main > ul
217
         footer.main > ul
218
+            flex-wrap: wrap
208
             /* background-color: purple */
219
             /* background-color: purple */
209
             background-color: $cia_red
220
             background-color: $cia_red
210
             &:nth-child(n+2)
221
             &:nth-child(n+2)
211
                 > li
222
                 > li
212
-                    width: 33%
223
+                    /* width: 33% */
213
     /* 1080px */
224
     /* 1080px */
214
     @media (min-width: $extra-large)
225
     @media (min-width: $extra-large)
215
         footer.main > ul
226
         footer.main > ul
227
+            flex-wrap: wrap
216
             /* background-color: rebeccapurple */
228
             /* background-color: rebeccapurple */
217
             background-color: $cia_red
229
             background-color: $cia_red
218
             &:nth-child(n+2)
230
             &:nth-child(n+2)
219
                 /* margin: 0 0 $ms-2 0 */
231
                 /* margin: 0 0 $ms-2 0 */
220
                 > li
232
                 > li
221
-                    width: 43%
233
+                    /* width: 43% */
222
     /* 1200px */
234
     /* 1200px */
223
     @media (min-width: $huge)
235
     @media (min-width: $huge)
224
         footer.main 
236
         footer.main 
225
             max-width: $max-width
237
             max-width: $max-width
226
             margin: 0 auto
238
             margin: 0 auto
227
             > ul
239
             > ul
240
+                flex-wrap: wrap
228
                 /* background-color: orange */
241
                 /* background-color: orange */
229
                 background-color: $cia_red
242
                 background-color: $cia_red
230
-    /* 1440px */
231
-    @media (min-width: $ultra)
232
-        footer.main 
233
-            > ul
234
-                /* background-color: teal */
235
-                background-color: $cia_red
243
+
236
 </style>
244
 </style>

Завантаження…
Відмінити
Зберегти