ソースを参照

adjust styling - set colours to cia

tags/0.9.0
Alej 4年前
コミット
4b202eb480
1個のファイルの変更47行の追加23行の削除
  1. 47
    23
      vue-theme/src/components/footer.vue

+ 47
- 23
vue-theme/src/components/footer.vue ファイルの表示

17
                 h5 Connect with Us
17
                 h5 Connect with Us
18
                 ul.f-row.b-dot.b-radius
18
                 ul.f-row.b-dot.b-radius
19
                     li
19
                     li
20
-                        a(href="https://www.facebook.com/CraftinAmerica") FB<br>
21
-                            img(src="../star.svg") 
20
+                        h2.t-cntr
21
+                            a(href="https://www.facebook.com/CraftinAmerica") FB<br>
22
+                                img(src="../star.svg")
23
+                                //- replace with respective icon 
22
                     li
24
                     li
23
-                        a(href="http://www.youtube.com/user/craftinamerica") YT<br>
24
-                            img(src="../star.svg") 
25
+                        h2.t-cntr
26
+                            a(href="http://www.youtube.com/user/craftinamerica") YT<br>
27
+                                img(src="../star.svg")
28
+                                //- replace with respective icon 
25
                     li
29
                     li
26
-                        a(href="http://www.instagram.com/craftinamerica") IG<br>
27
-                            img(src="../star.svg") 
30
+                        h2.t-cntr
31
+                            a(href="http://www.instagram.com/craftinamerica") IG<br>
32
+                                img(src="../star.svg")
33
+                                //- replace with respective icon 
28
                     li
34
                     li
29
-                        a(href="https://twitter.com/CraftinAmerica") TT<br>
30
-                            img(src="../star.svg") 
35
+                        h2.t-cntr
36
+                            a(href="https://twitter.com/CraftinAmerica") TT<br>
37
+                                img(src="../star.svg")
38
+                                //- replace with respective icon 
31
             li.b-dot.b-radius
39
             li.b-dot.b-radius
32
                 h5
40
                 h5
33
                     a(href="") Join email list
41
                     a(href="") Join email list
88
                     li Blog Posts
96
                     li Blog Posts
89
                     li Press Releases
97
                     li Press Releases
90
                     li In the News
98
                     li In the News
91
-
92
     .sub-footer.f-col.start
99
     .sub-footer.f-col.start
93
-        p Craft in America &copy; 2010&ndash;2021
100
+        h5 Craft in America &copy; 2010&ndash;2021
101
+        //- actually the bottom of the page
94
 
102
 
95
 </template>
103
 </template>
96
 
104
 
103
 
111
 
104
 .footer-wrapper
112
 .footer-wrapper
105
     width: 100%
113
     width: 100%
114
+    background-color: $cia_red
106
     footer.main
115
     footer.main
107
         display: flex
116
         display: flex
108
         flex-wrap: wrap
117
         flex-wrap: wrap
109
         min-width: $min-width
118
         min-width: $min-width
119
+        /* background-color: $cia_red */
110
         // ALL <ul> tags
120
         // ALL <ul> tags
111
         ul
121
         ul
112
             list-style: none
122
             list-style: none
119
             &:nth-child(n+2)
129
             &:nth-child(n+2)
120
                 padding: 0 $ms-0 $ms-3 $ms-0
130
                 padding: 0 $ms-0 $ms-3 $ms-0
121
             > li
131
             > li
122
-                color: $dark
132
+                color: $cia_white
123
                 padding: $ms-0 0 0
133
                 padding: $ms-0 0 0
124
                 h5
134
                 h5
125
                     color: $cia_white
135
                     color: $cia_white
126
                     margin: $ms-0 0 $ms--1
136
                     margin: $ms-0 0 $ms--1
127
-                a
137
+                a, a:link, a:visited
128
                     color: $cia_white
138
                     color: $cia_white
139
+                    text-decoration: none
140
+                a:hover
141
+                    color: $light
142
+                    /* background: $light */
143
+                    /* Hovered links */
144
+                a:active
145
+                    color: $cia_red2
146
+                    /* Activated links */
147
+
129
                 ul
148
                 ul
130
                     align-items: flex-start
149
                     align-items: flex-start
131
                     > li
150
                     > li
132
                         padding: 0 0 $ms--5
151
                         padding: 0 0 $ms--5
133
                 img
152
                 img
134
-                    width: $ms-2
135
-                    height: $ms-2
153
+                    width: $ms-0
154
+                    height: $ms-0
136
                     padding: 0
155
                     padding: 0
137
 
156
 
138
     .sub-footer
157
     .sub-footer
139
-        background-color: $cia_black
140
-        padding: $ms-0
141
-        p
142
-            font-size: 0.8em
158
+        background-color: #820000
159
+        padding: $ms--4
160
+        h5
161
+            font-size: $ms--2
143
             color: $cia_grey
162
             color: $cia_grey
144
 
163
 
145
     @media (min-width: $medium)
164
     @media (min-width: $medium)
146
         footer.main > ul
165
         footer.main > ul
147
-            background-color: darkgreen
166
+            /* background-color: darkgreen */
167
+            background-color: $cia_red
148
             &:nth-child(n+2)
168
             &:nth-child(n+2)
149
                 align-items: flex-start
169
                 align-items: flex-start
150
                 flex-direction: row
170
                 flex-direction: row
154
 
174
 
155
     @media (min-width: $large)
175
     @media (min-width: $large)
156
         footer.main > ul
176
         footer.main > ul
157
-            background-color: purple
177
+            /* background-color: purple */
178
+            background-color: $cia_red
158
             &:nth-child(n+2)
179
             &:nth-child(n+2)
159
                 > li
180
                 > li
160
                     width: 33%
181
                     width: 33%
161
 
182
 
162
     @media (min-width: $extra-large)
183
     @media (min-width: $extra-large)
163
         footer.main > ul
184
         footer.main > ul
164
-            background-color: rebeccapurple
185
+            /* background-color: rebeccapurple */
186
+            background-color: $cia_red
165
             &:nth-child(n+2)
187
             &:nth-child(n+2)
166
                 margin: 0 0 $ms-2 0
188
                 margin: 0 0 $ms-2 0
167
                 > li
189
                 > li
172
             max-width: $max-width
194
             max-width: $max-width
173
             margin: 0 auto
195
             margin: 0 auto
174
             > ul
196
             > ul
175
-                background-color: orange
197
+                /* background-color: orange */
198
+                background-color: $cia_red
176
 
199
 
177
     @media (min-width: $ultra)
200
     @media (min-width: $ultra)
178
         footer.main 
201
         footer.main 
179
             > ul
202
             > ul
180
-                background-color: teal
203
+                /* background-color: teal */
204
+                background-color: $cia_red
181
 </style>
205
 </style>

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