first commit

index.js

@@ -0,0 +1,6 @@
+// Include all your *.sss Sugarss files
+import './partials/_reset.sss'
+import './partials/_layout.sss'
+import './partials/_typography.sss'
+import './partials/_selectors.sss'
+import './partials/_helpers.sss'

partials/_helpers.sss

@@ -0,0 +1,61 @@
+/* Helpers */
+@import '../variables.sss'
+@import '_selectors.sss'
+
+:--headings
+    color: $color-primary
+p
+    line-height: 1.5em
+
+
+%flexer
+    display: flex
+
+.f
+    &-row, &-col
+        @extend %flexer
+    &-row
+        flex-direction: row
+    &-col
+        flex-direction: column
+    &-cntr
+        justify-content: center
+        align-items: center
+    &-grow
+        flex-grow: 10
+
+%borderer
+    border-width: 1px 
+    border-color: $primary
+
+
+.b
+    &-none
+        border-style: none
+    &-solid
+        @extend %borderer
+        border-style: solid
+    &-dash
+        @extend %borderer
+        border-style: dashed
+    &-dot
+        @extend %borderer
+        border-style: dotted
+    &-pill
+        border-radius: 999px
+    &-rnd
+        border-radius: $ms
+
+.p
+    &-all
+        padding: $ms
+    &-horz
+        padding-left: $ms
+        padding-right: @padding-left
+    &-vert
+        padding-top: $ms
+        padding-bottom: @padding-top
+
+.bg
+    &-none
+        background: none

partials/_layout.sss

@@ -0,0 +1,27 @@
+/* Layout */
+@import '../variables.sss'
+
+nav, nav > ul, nav > ul li, body > header, body > main, footer, footer > ul
+    display: flex
+    justify-content: center
+    position: relative
+    z-index: $zcontent
+
+._maxwidth
+    width: 480px
+
+@media (min-width: 768px)
+    ._maxwidth
+        width: 600px
+
+@media (min-width: 1080px)
+    ._maxwidth
+        width: 960px
+
+@media (min-width: 1200px)
+    ._maxwidth
+        width: 1080px
+
+@media (min-width: 1920px)
+    ._maxwidth
+        width: $maxwidth

partials/_reset.sss

@@ -0,0 +1,43 @@
+// Kill margins and paddings; add border-box
+*
+    margin: 0
+    padding: 0
+    box-sizing: border-box
+    &:before, &:after
+        background-repeat: no-repeat
+        box-sizing: inherit
+    &:focus
+        outline: none !important
+
+::before, ::after
+    text-decoration: inherit
+    vertical-align: inherit
+
+html
+    cursor: default
+    font-family: system-ui
+    line-height: 1.15
+    tab-size: 4
+
+// Always set color/background/font-size on root
+body
+    margin: 0
+    color: $primary
+    font-size: $ms
+    font-family: Helvetica, Arial, sans-serif
+
+// Remove list-style in navigation tags
+nav
+    ol, ul
+        list-style: none
+
+// Useful for single page apps to use up all available space
+html, body
+    height: 100%
+
+// Reset some other default styles
+button, input, select, textarea
+    font-family: inherit
+    font-size: inherit
+    line-height: inherit
+

partials/_selectors.sss

@@ -0,0 +1,4 @@
+@custom-selector :--headings h1, h2, h3, h4, h5, h6
+
+--ms-bases: 1, 0.75
+--ms-ratios: 2

partials/_typography.sss

@@ -0,0 +1,28 @@
+@import '../variables.sss'
+
+:--headings
+    color: $primary
+
+.t
+    &-cntr
+        text-align: center
+    &-left
+        text-align: left
+    &-b
+        text-weight: bold
+    &-i
+        text-style: italic
+    &-up
+        text-transform: uppercase
+    &-cap
+        text-transform: capitalize
+    &-sans
+        font-family: $sans
+    &-serif
+        font-family: $serif
+    &-mono
+        font-family: $mono
+
+a
+    &:hover
+        cursor: pointer

style.sss

@@ -0,0 +1,13 @@
+@import './partials/_reset.sss'
+@import './variables.sss'
+@import './partials/_layout.sss'
+@import './partials/_helpers.sss'
+@import './partials/_selectors.sss'
+
+html
+    background-color: $primary
+    
+body
+    display: flex
+    flex-direction: column
+

variables.sss

@@ -0,0 +1,29 @@
+// 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
+
+// Fonts
+$sans: 'sans-serif'
+$serif: 'serif'
+$mono: 'monospace'
+
+// Proportion (to be replaced with modular scale)
+$ms: 0.5em
+
+// Circles for add page
+$radius: 2.5vw
+$path: 4px
+
+$transition: 300ms
+
+