Browse Source

:art: simplify footer | fix sss

tags/0.9.0
j 5 years ago
parent
commit
7f9c27b057
3 changed files with 64 additions and 78 deletions
  1. 0
    2
      vue-theme/src/app.vue
  2. 62
    72
      vue-theme/src/components/footer.vue
  3. 2
    4
      vue-theme/src/sss/_helpers.sss

+ 0
- 2
vue-theme/src/app.vue View File

@@ -111,6 +111,4 @@ html
111 111
             &.main
112 112
                 background-color: pink
113 113
                 width: 100%
114
-                ul > li
115
-                    padding: 0 $ms
116 114
 </style>

+ 62
- 72
vue-theme/src/components/footer.vue View File

@@ -1,97 +1,87 @@
1 1
 <template lang="pug">
2 2
 .footer-wrapper.f-col.between.t-up.t-sans.b-radius
3
-    footer.f-row
3
+    footer.main.f-row.f-wrap
4 4
         //- address contact
5
-        ul
5
+        ul.f-col.start
6 6
             li
7 7
                 h5 Craft in America
8
-                    ul
9
-                        li 8415 W. Third St.
10
-                        li Los Angeles, CA 90048
11
-                        li Tues–Sat, 12PM–6PM
12
-                        li (310) 659-9022 office
13
-                        li (323) 951-0610 center
14
-                        li
15
-                            router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
16
-                //- mailing social links
8
+                ul
9
+                    li 8415 W. Third St.
10
+                    li Los Angeles, CA 90048
11
+                    li Tues–Sat, 12PM–6PM
12
+                    li (310) 659-9022 office
13
+                    li (323) 951-0610 center
14
+                    li
15
+                        router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
16
+            li
17 17
                 h5 Connect with Us
18
-                    ul.f-row
19
-                        li
20
-                            a(href="https://www.facebook.com/CraftinAmerica") Facebook&nbsp;<br>
21
-                        li
22
-                            a(href="http://www.youtube.com/user/craftinamerica") YouTube&nbsp;<br>
23
-                        li
24
-                            a(href="http://www.instagram.com/craftinamerica") Instagram&nbsp;<br>
25
-                        li
26
-                            a(href="https://twitter.com/CraftinAmerica") Twitter&nbsp;<br>
18
+                ul.f-row
19
+                    li
20
+                        a(href="https://www.facebook.com/CraftinAmerica") Facebook&nbsp;<br>
21
+                    li
22
+                        a(href="http://www.youtube.com/user/craftinamerica") YouTube&nbsp;<br>
23
+                    li
24
+                        a(href="http://www.instagram.com/craftinamerica") Instagram&nbsp;<br>
25
+                    li
26
+                        a(href="https://twitter.com/CraftinAmerica") Twitter&nbsp;<br>
27
+            li
27 28
                 h5
28 29
                     a(href="") Join email list
29 30
                             
30 31
         //- menu links
31
-        
32
-        ul
32
+        ul.f-col.start
33 33
             li
34 34
                 h5
35 35
                     router-link(to="/episodes") PBS Series
36
-                    ul
37
-                        li Episodes
38
-                        li Shorts
39
-                        li Techniques
40
-        ul
41
-            li
42
-                h5 
36
+                ul.f-col.start
37
+                    li Episodes
38
+                    li Sho 
43 39
                     router-link(to="/artists") Artists
44
-                    ul
45
-                        li
46
-                            router-link(to="/artists/by-alpha") A-Z
47
-                        li 
48
-                            router-link(to="/artists/by-material") By Material
49
-        ul
40
+                ul.f-col.start
41
+                    li
42
+                        router-link(to="/artists/by-alpha") A-Z
43
+                    li 
44
+                        router-link(to="/artists/by-material") By Material
50 45
             li
51 46
                 h5 
52 47
                     router-link(to="/exhibitions") Exhibitions
53
-                    ul
54
-                        li Current/Upcoming
55
-                        li Past
56
-                        li Permanent Collection
57
-                        li Explore Craft Objects
58
-        ul
48
+                ul.f-col.start
49
+                    li Current/Upcoming
50
+                    li Past
51
+                    li Permanent Collection
52
+                    li Explore Craft Objects
59 53
             li
60 54
                 h5
61 55
                     router-link(to="/events") Events
62
-                    ul
63
-                        li Talks
64
-        ul
56
+                ul.f-col.start
57
+                    li Talks
65 58
             li
66 59
                 h5
67 60
                     router-link(to="/center") Center
68
-                    ul
69
-                        li Publications
70
-                        li Library
71
-        ul
61
+                ul.f-col.start
62
+                    li Publications
63
+                    li Library
72 64
             li
73 65
                 h5
74 66
                     router-link(to="/support") Support
75
-                    ul
76
-                        li Donate
77
-                        li Shop
78
-        ul
67
+                ul.f-col.start
68
+                    li Donate
69
+                    li Shop
79 70
             li
80 71
                 h5
81 72
                     router-link(to="/about") About
82
-                    ul
83
-                        li Mission
84
-                        li Staff
85
-                        li Board
86
-                        li Contact
87
-        ul
73
+                ul.f-col.start
74
+                    li Mission
75
+                    li Staff
76
+                    li Board
77
+                    li Contact
88 78
             li
89 79
                 h5
90 80
                     router-link(to="/posts") News
91
-                    ul
92
-                        li Blog Posts
93
-                        li Press Releases
94
-                        li In the News
81
+                ul.f-col.start
82
+                    li Blog Posts
83
+                    li Press Releases
84
+                    li In the News
95 85
 
96 86
     .sub-footer
97 87
         p Craft in America &copy; 2010&ndash;2021
@@ -105,32 +95,32 @@
105 95
 @import '../sss/variables.sss'
106 96
 
107 97
 .footer-wrapper
108
-    /* background-color: lightgreen */
98
+    background-color: lightgreen
109 99
     width: 100%
110 100
     footer
111
-        /* background-color: $cia_red */
112
-        max-width: $max-width
113
-        width: 90%
114
-        padding: $ms 0
101
+        background-color: $cia_red
115 102
         align-items: flex-start
116 103
 
117 104
         // ALL <ul> tags
118 105
         ul
119 106
             background-color: grey
120 107
             list-style: none
108
+            width: 100%
121 109
 
122 110
         // OUTER <ul> tags
123 111
         > ul
124
-            padding: 0 0.5em
125
-            background-color: lightgrey 
126
-            /* &.f-row
127
-                align-items: start */
112
+            background-color: lightgrey
113
+            padding: $ms
128 114
             > li
129
-                padding: 0 0.5em
115
+                padding: $ms 0
116
+                width: 100%
130 117
                 h5
131 118
                     color: $cia_white
119
+                    margin: 0 0 $ms
132 120
                 a
133 121
                     color: $cia_white
122
+                ul
123
+                    align-items: flex-start
134 124
 
135 125
     .sub-footer
136 126
         width: 100%

+ 2
- 4
vue-theme/src/sss/_helpers.sss View File

@@ -23,14 +23,12 @@
23 23
             align-items: center
24 24
     &-row
25 25
         flex-direction: row
26
-        flex-flow: wrap
27 26
     &-col
28 27
         flex-direction: column
29
-        min-width: 300px
30 28
     &-grow
31 29
         flex-grow: 1
32
-    /* &-wrap
33
-        flex-flow: wrap */
30
+    &-wrap
31
+        flex-flow: wrap
34 32
 
35 33
 .b
36 34
     &-radius

Loading…
Cancel
Save