NEXT craftinamerica.org. Base setup for headless wordpress https://www.craftinamerica.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <template lang="pug">
  2. .footer-wrapper.t-up.t-sans
  3. footer.main.w-max.f-row.between
  4. ul.f-col.t-cntr
  5. //- address contact
  6. li
  7. h4 Craft in America
  8. ul
  9. h5
  10. li 8415 W. Third St.
  11. li Los Angeles, CA 90048
  12. li Tues–Sat, 12PM–6PM
  13. li (310) 659-9022 office
  14. li (323) 951-0610 center
  15. li
  16. router-link(to="mailto:info@craftinamerica.org") info@craftinamerica.org
  17. //- social media
  18. li
  19. h4 Connect with Us
  20. <br>
  21. ul.f-row
  22. li
  23. a(href="http://www.youtube.com/user/craftinamerica")
  24. svg(aria-hidden="true" focusable="false" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512")
  25. path(fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z")
  26. li
  27. a(href="https://www.facebook.com/CraftinAmerica")
  28. //- img(src="../assets/facebook-brands.svg")
  29. //- replace with respective icon
  30. svg(aria-hidden="true" focusable="false" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512")
  31. path(fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z")
  32. li
  33. a(href="http://www.instagram.com/craftinamerica")
  34. svg(aria-hidden="true" focusable="false" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 495")
  35. path(fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z")
  36. li
  37. a(href="https://twitter.com/CraftinAmerica")
  38. svg(aria-hidden="true" focusable="false" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512")
  39. path(fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z")
  40. li
  41. a(href="https://www.tiktok.com/@craft_in_america")
  42. svg(aria-hidden="true" focusable="false" data-icon="tiktok" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 448 600")
  43. path(fill="currentColor" d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z")
  44. li
  45. <br>
  46. a(href="https://visitor.r20.constantcontact.com/d.jsp?llr=fyb4y9cab&p=oi&m=fyb4y9cab&sit=olvymhdeb&f=ee3616e1-10de-4a59-b451-1a882111b1f5", target="_blank") Join our email list
  47. //- menu links
  48. ul.f-col
  49. li
  50. h5
  51. router-link(to="/episode") PBS Series
  52. ul.f-col.start
  53. li
  54. router-link(to="/episode") &nbsp; Episodes
  55. li
  56. router-link(to="/short") &nbsp; Shorts
  57. li
  58. router-link(to="/technique") &nbsp; Techniques
  59. li
  60. h5
  61. router-link(to="/artist") Artists
  62. ul.f-col
  63. li
  64. router-link(to="/artist/sorted/by-alpha") &nbsp; A-Z
  65. li
  66. router-link(to="/artist/sorted/by-material") &nbsp; by Material
  67. li
  68. h5
  69. router-link(to="/exhibition") Exhibitions
  70. ul.f-col
  71. li
  72. router-link(to="/exhibition/sorted/by-current-and-upcoming") &nbsp; Current/Upcoming
  73. li
  74. router-link(to="/exhibition/sorted/by-past") &nbsp; Past
  75. li
  76. h5
  77. router-link(to="/page/center") Center
  78. ul.f-col
  79. li
  80. router-link(to="/page/center") &nbsp; Info
  81. li
  82. router-link(to="/event/sorted/by-current-and-upcoming") &nbsp; Events
  83. li
  84. //- router-link(to="/event?type=talks") &nbsp; Talks &amp; Interviews
  85. router-link(to="/page/recorded-talks-and-interviews") &nbsp; Recorded Talks + Interviews
  86. li
  87. router-link(to="/page/library") &nbsp; Library
  88. li
  89. h5
  90. router-link(to="/guide") Education
  91. ul.f-col
  92. li
  93. router-link(to="/guide") &nbsp; Guides
  94. li
  95. router-link(to="/page/video-resources-for-educators") &nbsp; Video Resources
  96. li
  97. router-link(to="/page/craft-in-schools") &nbsp; Craft in Schools
  98. li
  99. h5
  100. router-link(to="/page/artists-resources") Resources
  101. ul.f-col
  102. li
  103. router-link(to="/publication") &nbsp; Publications
  104. li
  105. router-link(to="/object") &nbsp; Explore Craft Objects
  106. li
  107. router-link(to="/page/artists-resources") &nbsp; Opportunities
  108. li
  109. router-link(to="/artist/sorted/by-type") &nbsp; Organizations and Institutions
  110. li
  111. router-link(to="/page/craft-resources-map") &nbsp; Craft Resources Map
  112. li
  113. router-link(to="/page/community-craft-calendar") &nbsp; Community Craft Calendar
  114. li
  115. h5
  116. router-link(to="/page/donate") Support
  117. ul.f-col
  118. li
  119. router-link(to="/page/donate") &nbsp; Donate
  120. li
  121. router-link(to="/page/shop") &nbsp; Shop
  122. li
  123. h5
  124. router-link(to="/blog") News
  125. ul.f-col
  126. li
  127. router-link(to="/blog") &nbsp; Blog Posts
  128. li
  129. router-link(to="/posts?type=articles") &nbsp; In the News
  130. li
  131. router-link(to="/posts?type=releases") &nbsp; Press Releases
  132. li
  133. router-link(to="/page/community-craft-calendar") &nbsp; Community Craft Calendar
  134. li
  135. h5
  136. router-link(to="/page/about") About
  137. ul.f-col
  138. li
  139. router-link(to="/page/about") &nbsp; Craft in America
  140. li
  141. router-link(to="/page/board") &nbsp; Board of Directors
  142. li
  143. router-link(to="/page/staff") &nbsp; Staff
  144. li
  145. router-link(to="/page/contact") &nbsp; Contact
  146. .sub-footer.f-col.start
  147. h6 Craft in America &copy; 2010 &ndash; {{ today }}
  148. //- actually the bottom of the page
  149. </template>
  150. <script>
  151. export default {
  152. computed: {
  153. today() {
  154. const today = new Date()
  155. return today.getFullYear()
  156. },
  157. },
  158. }
  159. </script>
  160. <style lang="postcss">
  161. // prettier-ignore
  162. @import '../sss/variables.sss'
  163. @import '../sss/theme.sss'
  164. .footer-wrapper
  165. width: 100%
  166. background-color: $cia_red
  167. footer.main
  168. display: flex
  169. align-items: flex-start
  170. min-width: $min-width
  171. // ALL <ul> tags
  172. ul
  173. > li
  174. width: 100%
  175. // OUTER <ul> tags
  176. > ul
  177. padding: $ms-0
  178. &:nth-child(n+2)
  179. /* padding: 0 $ms-0 $ms-3 $ms-0 */
  180. > li
  181. color: $cia_white
  182. padding: 0 0 $ms--6
  183. h4
  184. margin: $ms-0 0 $ms--3
  185. h5
  186. font-size: 0.77em
  187. /* margin: $ms-0 0 $ms--1 */
  188. margin: $ms-0 0 0
  189. a, a:link, a:visited
  190. color: $cia_white
  191. text-decoration: none
  192. a:hover
  193. color: $light
  194. /* Hovered links */
  195. a:active
  196. color: $cia_red2
  197. /* Activated links */
  198. ul
  199. align-items: flex-start
  200. > li
  201. padding: 0 0 $ms--5
  202. svg
  203. height: 1.5em
  204. padding: 0 $ms--5
  205. .sub-footer
  206. background-color: #820000
  207. padding: $ms--4
  208. h6
  209. font-size: $ms--2
  210. color: $cia_grey
  211. margin: 0
  212. /* <768px */
  213. @media (min-width: 640px)
  214. footer.main > ul
  215. flex-wrap: wrap
  216. &:nth-child(n+2)
  217. align-items: flex-start
  218. flex-direction: row
  219. > li
  220. width: 32%
  221. h5
  222. font-size: 0.8em
  223. /* <768px */
  224. @media (min-width: $medium)
  225. footer.main > ul
  226. flex-wrap: wrap
  227. &:nth-child(n+2)
  228. align-items: flex-start
  229. flex-direction: row
  230. > li
  231. width: 32%
  232. /* <960px */
  233. @media (min-width: $large)
  234. footer.main > ul
  235. flex-wrap: wrap
  236. &:nth-child(n+2)
  237. > li
  238. /* width: 33% */
  239. /* <1080px */
  240. @media (min-width: $extra-large)
  241. footer.main > ul
  242. flex-wrap: wrap
  243. &:nth-child(n+2)
  244. /* margin: 0 0 $ms-2 0 */
  245. > li
  246. /* width: 43% */
  247. h5
  248. font-size: 0.95em
  249. /* 1200px */
  250. @media (min-width: $huge)
  251. footer.main
  252. max-width: $max-width
  253. margin: 0 auto
  254. > ul
  255. flex-wrap: wrap
  256. </style>