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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template lang="pug">
  2. #theme.f-col
  3. cia-nav
  4. cia-hero
  5. main
  6. router-view
  7. cia-footer
  8. </template>
  9. <script>
  10. import ciaNav from '@/components/navigation/navigation'
  11. import ciaHero from '@/components/hero'
  12. import ciaFooter from '@/components/footer'
  13. import '@/sss'
  14. export default {
  15. components: { ciaNav, ciaHero, 'cia-footer':ciaFooter }
  16. }
  17. </script>
  18. <style lang="postcss">
  19. @import './sss/variables.sss'
  20. html
  21. /* Hide the wpadminbar */
  22. margin-top: 0 !important
  23. #wpadminbar
  24. display: none !important
  25. > body
  26. font-family: $sans
  27. font-size: $base
  28. main
  29. background-color: green
  30. width: 100%
  31. :--headings
  32. color: yellow
  33. > [class^="page--"]
  34. background-color: lightblue
  35. max-width: $max-width
  36. margin: 0 auto
  37. padding: $ms 0
  38. align-items: flex-start
  39. /* Block Shadow Thing */
  40. .shadow
  41. box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
  42. border-radius: 8px
  43. /* Content Pieces */
  44. .post
  45. background-color: teal
  46. margin: 0 0 $ms
  47. &--title
  48. color: yellow
  49. padding: 0 0 $ms
  50. &--content
  51. color: orange
  52. &--block > p
  53. color: white
  54. .wp-block-image
  55. margin: 0
  56. img
  57. width: 100%
  58. > ul
  59. list-style: none
  60. /* Single & List Pages */
  61. > article
  62. background-color: lightpink
  63. > * > *
  64. padding: $ms
  65. > section, > header
  66. margin: 0 0 $ms
  67. .block-wrapper
  68. .wp-block-gallery
  69. .blocks-gallery
  70. /* &-grid
  71. list-style: none
  72. &-item
  73. float: left
  74. &.columns-1
  75. .blocks-gallery-item
  76. width: 100%
  77. &.columns-2
  78. .blocks-gallery-item
  79. width: 50%
  80. &.columns-3
  81. .blocks-gallery-item
  82. width: 33.33%
  83. &.columns-4
  84. .blocks-gallery-item
  85. width: 25% */
  86. /* Sidebar */
  87. > aside
  88. background-color: salmon
  89. margin: 0 0 0 $ms
  90. min-width: 27%
  91. width: 27%
  92. > section
  93. > *
  94. padding: $ms
  95. margin: 0 0 $ms 0
  96. > .post
  97. background-color: blue
  98. nav, footer
  99. &.main
  100. background-color: pink
  101. width: 100%
  102. </style>