diff --git a/scss/partials/_colors.scss b/scss/partials/_colors.scss new file mode 100644 index 0000000..37ba6ae --- /dev/null +++ b/scss/partials/_colors.scss @@ -0,0 +1,59 @@ +@use "sass:color"; + +// Basic Color Pallette +$white: #fff; +$black: #000; + +$blue: hsl(204, 61%, 64%); +$red: hsl(360, 61%, 64%); +$green: hsl(160, 61%, 64%); +$yellow: hsl(55, 61%, 64%); +$orange: hsl(32, 61%, 64%); +$grey: hsl(0, 0%, 64%); + +$pale-blue: adjust-color($blue, $lightness: 30%); +$pale-red: adjust-color($red, $lightness: 30%); +$pale-green: adjust-color($green, $lightness: 30%); +$pale-yellow: adjust-color($yellow, $lightness: 30%); +$pale-orange: adjust-color($orange, $lightness: 30%); +$pale-grey: adjust-color($grey, $lightness: 30%); + +$dark-blue: adjust-color($blue, $lightness: -30%); +$dark-red: adjust-color($red, $lightness: -30%); +$dark-green: adjust-color($green, $lightness: -30%); +$dark-yellow: adjust-color($yellow, $lightness: -30%); +$dark-orange: adjust-color($orange, $lightness: -30%); +$dark-grey: adjust-color($grey, $lightness: -30%); + +$vivid-blue: adjust-color($blue, $saturation: 20%); +$vivid-red: adjust-color($red, $saturation: 20%); +$vivid-green: adjust-color($green, $saturation: 20%); +$vivid-yellow: adjust-color($yellow, $saturation: 20%); +$vivid-orange: adjust-color($orange, $saturation: 20%); + + +// main color palette +$color-primary: $blue; +$color-primary-background: adjust-color($blue, $lightness: -30%); +// $color-secondary: $bouquet; +// $color-accent: $patina; +// $color-shadow: rgba($black, .125); +// $color-note: #666; + + +// Common colors +$color-background: #fcfcfc; +$color-background-outside: #edf0f2; +// $color-background-shade: $iron; +// $color-background-invert: $hopbush; +$color-text: #404040; +// $color-text-weak: $regent-grey; +// $color-text-strong: $midnight-blue; +// $color-text-heading: $regent-grey; +// $color-text-invert: rgba($color-background, .75); +// $color-text-strong-invert: $color-background; + +// // Links +$color-link: $color-primary; +$color-link-hover: $color-primary; +$color-link-visited: $color-primary; diff --git a/scss/partials/_fonts.scss b/scss/partials/_fonts.scss new file mode 100644 index 0000000..dd01645 --- /dev/null +++ b/scss/partials/_fonts.scss @@ -0,0 +1,2 @@ +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700); +@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); diff --git a/scss/partials/_org.scss b/scss/partials/_org.scss new file mode 100644 index 0000000..8c967c3 --- /dev/null +++ b/scss/partials/_org.scss @@ -0,0 +1,60 @@ +// TODO Keywords (all not-done stats) +.todo{ + background-color: $red; + padding: 0px 4px; + color: $white; + + &.WAIT { + background-color: $orange; + } +} + +// DONE Keywords (all status that counts as done) +.done{ + background-color: $green; + padding: 0px 4px; + color: $white; +} + +// Priority +.priority { + color: $vivid-orange; + font-family: Lucida Console,monospace; +} + +// tag in a headline +.tag span { + background-color: $pale-grey; + border: 1px solid $grey; + color: #939393; + cursor: pointer; + display: block; + float: right; + font-size: 70%; + font-weight: normal; + margin: 0 3px; + padding: 5px; + border-radius: 3px; +} + +// span around keyword plus timestamp +.timestamp-wrapper { + font-size: 0.8em; + margin-left: 2em; + + // Timestamp date + .timestamp { + color: $dark-blue; + font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; + } + + // keyword associated with a timestamp, like ‘SCHEDULED’ + .timestamp-kwd { + + } +} + +// Inline Task +.inlinetask { + +} diff --git a/scss/style.scss b/scss/style.scss index 4623cf4..3d15f2b 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,6 +1,11 @@ @import 'partials/_reset.scss'; +@import 'partials/_colors.scss'; +@import 'partials/_fonts.scss'; +@import 'partials/_variables.scss'; + @import 'partials/_base.scss'; +@import 'partials/_org.scss'; @import 'partials/_headlines.scss'; @import 'partials/_nagivation.scss'; @import 'partials/_toc.scss';