:art: big sss changes | modular scales

vue-theme/postcss.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-    parser: 'sugarss',
-    plugins: [
-        require('postcss-import'),
-        require('postcss-calc'),
-        require('precss'),
-        require('autoprefixer')
-    ]
-}
+  parser: "sugarss",
+  plugins: [
+    require("postcss-import"),
+    require("precss"),
+    require("postcss-calc"),
+    require("autoprefixer"),
+  ],
+};

vue-theme/src/app.vue

@@ -21,6 +21,7 @@ export default {
 
 <style lang="postcss">
 @import './sss/variables.sss'
+@import './sss/theme.sss'
 
 html 
     /* Hide the wpadminbar */
@@ -41,7 +42,7 @@ html
                 background-color: lightblue
                 max-width: $max-width
                 margin: 0 auto
-                padding: $ms 0
+                padding: $ms-0 0
                 align-items: flex-start
                 
                 /* Block Shadow Thing */
@@ -52,10 +53,10 @@ html
                 /* Content Pieces */
                 .post
                     background-color: teal
-                    margin: 0 0 $ms
+                    margin: 0 0 $ms-0
                     &--title
                         color: yellow
-                        padding: 0 0 $ms
+                        padding: 0 0 $ms-0
                     &--content
                         color: orange
                         &--block > p
@@ -71,9 +72,9 @@ html
                 > article
                     background-color: lightpink
                     > * > * 
-                        padding: $ms
+                        padding: $ms-0
                     > section, > header
-                        margin: 0 0 $ms
+                        margin: 0 0 $ms-0
                     .block-wrapper
                         .wp-block-gallery
                             .blocks-gallery
@@ -97,13 +98,13 @@ html
                 /* Sidebar */
                 > aside
                     background-color: salmon
-                    margin: 0 0 0 $ms
+                    margin: 0 0 0 $ms-0
                     min-width: 27%
                     width: 27%
                     > section
                         > *
-                            padding: $ms
-                            margin: 0 0 $ms 0
+                            padding: $ms-0
+                            margin: 0 0 $ms-0 0
                         > .post
                             background-color: blue
 

vue-theme/src/components/footer.vue

@@ -35,7 +35,9 @@
                     router-link(to="/episodes") PBS Series
                 ul.f-col.start
                     li Episodes
-                    li Sho 
+                    li Shorts
+                    li 
+                h5
                     router-link(to="/artists") Artists
                 ul.f-col.start
                     li
@@ -93,6 +95,7 @@
 
 <style lang="postcss">
 @import '../sss/variables.sss'
+@import '../sss/theme.sss'
 
 .footer-wrapper
     background-color: lightgreen
@@ -110,13 +113,13 @@
         // OUTER <ul> tags
         > ul
             background-color: lightgrey
-            padding: $ms
+            padding: $ms-0
             > li
-                padding: $ms 0
+                padding: $ms-0 0
                 width: 100%
                 h5
                     color: $cia_white
-                    margin: 0 0 $ms
+                    margin: 0 0 $ms-0
                 a
                     color: $cia_white
                 ul

vue-theme/src/components/gallery.vue

@@ -68,6 +68,7 @@ export default {
 
 <style lang="postcss">
 @import '../sss/variables.sss'
+@import '../sss/theme.sss'
 
 .gallery
     overflow: hidden

vue-theme/src/components/navigation/navigation.vue

@@ -44,6 +44,7 @@ nav.main
 
 <style lang="postcss">
 @import '../../sss/variables.sss'
+@import '../../sss/theme.sss'
 
 nav.main
     position: sticky

vue-theme/src/pages/index.vue

@@ -51,19 +51,20 @@ export default {
 
 <style lang="postcss">
 @import '../sss/variables.sss'
+@import '../sss/theme.sss'
 
 .page--index
     article
         .f-row
             &:nth-of-type(2)
-                margin: $ms 0
+                margin: $ms-0 0
         section
             flex-grow: 1
             &:nth-of-type(1)
                 flex-grow: 3
             &:nth-of-type(2), &:nth-of-type(3)
                 flex-grow: 1
-                margin: 0 0 0 $ms
+                margin: 0 0 0 $ms-0
             &:nth-of-type(4), &:nth-of-type(5)
                 flex-grow: 4
     footer

vue-theme/src/sss/_helpers.sss

@@ -1,3 +1,6 @@
+@import './variables.sss'
+@import './theme.sss'
+
 /* Custom selectors */
 @custom-selector :--headings h1, h2, h3, h4, h5, h6
 
@@ -7,6 +10,7 @@
     display: flex
     justify-content: center
     align-items: center
+
 .f
     &-row, &-col
         @extend %flexer
@@ -18,22 +22,63 @@
             justify-content: space-between
         &.around
             justify-content: space-around
+        &.even
+            justify-content: space-evenly
+        &.stretch
+            justify-content: space-stretch
         &.center
             justify-content: center
             align-items: center
+        &.wrap
+            flex-flow: wrap
     &-row
         flex-direction: row
     &-col
         flex-direction: column
     &-grow
         flex-grow: 1
-    &-wrap
-        flex-flow: wrap
+        
 
+%borderer
+    border-width: 1px
+    border-color: $primary
 .b
-    &-radius
-        border-radius: 5px
     &-none
         border: none
     &-solid
-        border: #000000 1px solid
+        @extend %borderer
+        border: #000000 1px solid
+    &-dash
+        @extend %borderer
+        border: #000000 1px dashed
+    &-dot
+        @extend %borderer
+        border: #000000 1px dotted
+    &-pill
+        border-radius: 999px
+    &-radius
+        border-radius: $ms-0
+    &-shadow
+        box-shadow: 1px 3px 12px #011
+
+button
+    &:hover
+        cursor: pointer
+        transition: $transition
+    &.b
+        &-pill
+            padding: $ms-1 $ms-0
+            line-height: $ms-1
+            text-transform: uppercase
+.bg
+    &-none
+        background-color: transparent !important
+        background: none
+
+.z
+    &-top
+        z-index: 10001
+    &-bottom
+        z-index: 1
+    &-back
+        z-index: -1

vue-theme/src/sss/_ratios.sss

@@ -0,0 +1,13 @@
+$minor-second: 1.067
+$major-second: 1.125
+$minor-third: 1.2
+$major-third: 1.25
+$perfect-fourth: 1.333
+$augmented-fourth: 1.414
+$perfect-fifth: 1.5
+$minor-sixth: 1.6
+$golden: 1.618
+$major-sixth: 1.667
+$minor-seventh: 1.778
+$major-seventh: 1.875
+$octave: 2

vue-theme/src/sss/_typography.sss

@@ -1,4 +1,5 @@
 @import './variables.sss'
+@import './theme.sss'
 
 .t
     &-cntr
@@ -20,12 +21,10 @@
     &-mono
         font-family: $mono
 
-a
-    color: $cia_grey
+a~
     /* text-decoration: none,  leave for now to show links underlined */
     &:hover
         cursor: pointer
-        color: $cia_black
 
 h1, h2, h3, h4, h5, h6 /* common */
     display: block

vue-theme/src/sss/index.js

@@ -1,4 +1,8 @@
 // Include all your *.sss Sugarss files
-import './_reset.sss'
-import './_typography.sss'
-import './_helpers.sss'
+import "./_reset.sss";
+import "./_ratios.sss";
+import "./_helpers.sss";
+import "./_typography.sss";
+
+import "./theme.sss";
+import "./variables.sss";

vue-theme/src/sss/theme.sss

@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Questrial')
+@import url('https://c0.wp.com/c/5.7/wp-includes/css/dist/block-library/style.css')
+
+/* Colors */
+$blue: #0076A3
+$chart-bg: rgba(20,20,20)
+$background: #444
+$background-light: #505050
+$dark: #3F3F3F
+$darker: #383838
+$light: #BBBBBB
+$lighter: #CCCCCC
+$primary: #008462
+$primary-light: #00D6A3
+$primary-lighter: #CEFFF3
+$primary-dark: #007351
+
+$cia_red: #a10000 /* rgb(161, 0, 0) */
+$cia_white: #ffffff /* 100% white */
+$cia_grey: #efefef /* 5% black */
+$cia_black: #0d0d0d /* 95% black */
+
+$cia_serif: 'Hoefler Text', 'Crimson Text', serif
+$cia_sans: 'Questrial', 'Futura', 'Futura PT', sans-serif
+
+@font-face
+  font-family: 'Crimson Text'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(https://fonts.gstatic.com/s/crimsontext/v9/wlp2gwHKFkZgtmSR3NB0oRJfbwhT.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+@font-face 
+  font-family: 'Questrial'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Questrial'), local('Questrial-Regular'), url(https://fonts.gstatic.com/s/questrial/v8/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+
+/* latin-ext */
+@font-face 
+  font-family: 'Questrial'
+  font-style: normal
+  font-weight: 400
+  src: url(https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70sCFluW44JUcz.woff2) format('woff2')
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
+
+/* latin */
+@font-face
+  font-family: 'Questrial'
+  font-style: normal
+  font-weight: 400
+  src: url(https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

vue-theme/src/sss/variables.sss

@@ -1,70 +1,6 @@
-@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Questrial')
-@import url('https://c0.wp.com/c/5.7/wp-includes/css/dist/block-library/style.css')
+@import './_ratios.sss'
 
-/* Colors */
-$blue: #0076A3
-$chart-bg: rgba(20,20,20)
-$background: #444
-$background-light: #505050
-$dark: #3F3F3F
-$darker: #383838
-$light: #BBBBBB
-$lighter: #CCCCCC
-$primary: #008462
-$primary-light: #00D6A3
-$primary-lighter: #CEFFF3
-$primary-dark: #007351
-
-$cia_red: #a10000 /* rgb(161, 0, 0) */
-$cia_white: #ffffff /* 100% white */
-$cia_grey: #efefef /* 5% black */
-$cia_black: #0d0d0d /* 95% black */
-
-
-/* Fonts */
-$sans: 'Questrial', sans-serif
-$serif: 'Hoefler Text', 'Crimson Text', serif
-$mono: 'Roboto Mono', monospace
-
-$cia_serif: 'Hoefler Text', 'Crimson Text', serif
-$cia_sans: 'Questrial', 'Futura', 'Futura PT', sans-serif
-$cia_transition: 200ms
-
-@font-face
-  font-family: 'Crimson Text'
-  font-style: normal
-  font-weight: 400
-  font-display: swap
-  src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(https://fonts.gstatic.com/s/crimsontext/v9/wlp2gwHKFkZgtmSR3NB0oRJfbwhT.woff2) format('woff2')
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-
-@font-face 
-  font-family: 'Questrial'
-  font-style: normal
-  font-weight: 400
-  font-display: swap
-  src: local('Questrial'), local('Questrial-Regular'), url(https://fonts.gstatic.com/s/questrial/v8/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2')
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-
-/* latin-ext */
-@font-face 
-  font-family: 'Questrial'
-  font-style: normal
-  font-weight: 400
-  src: url(https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70sCFluW44JUcz.woff2) format('woff2')
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
-
-/* latin */
-@font-face
-  font-family: 'Questrial'
-  font-style: normal
-  font-weight: 400
-  src: url(https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2) format('woff2')
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-
-/* Proportion (to be replaced with modular scale) */
-$ms: 1vw
-$base: 1em
+$transition: 300ms
 
 $max-width: 70em
 
@@ -72,4 +8,28 @@ $max-width: 70em
 $radius: 2.5vw
 $path: 4px
 
-$transition: 300ms
+/* Proportion */
+$base: 1.0em
+$ratio: $minor-third
+
+$ms-0: calc($base)
+$ms--1: calc($ms-0 / $ratio)
+$ms--2: calc($ms--1 / $ratio)
+$ms--3: calc($ms--2 / $ratio)
+$ms--4: calc($ms--3 / $ratio)
+$ms--5: calc($ms--4 / $ratio)
+$ms--6: calc($ms--5 / $ratio)
+$ms-1: calc($ms-0 * $ratio)
+$ms-2: calc($ms-1 * $ratio)
+$ms-3: calc($ms-2 * $ratio)
+$ms-4: calc($ms-3 * $ratio)
+$ms-5: calc($ms-4 * $ratio)
+$ms-6: calc($ms-5 * $ratio)
+$ms-7: calc($ms-6 * $ratio)
+$ms-8: calc($ms-7 * $ratio)
+$ms-9: calc($ms-8 * $ratio)
+
+/* Fonts */
+$sans: 'Questrial', sans-serif
+$serif: 'Hoefler Text', 'Crimson Text', serif
+$mono: 'Roboto Mono', monospace