Skip to content
This repository has been archived by the owner on Dec 31, 2023. It is now read-only.

Commit

Permalink
Added various variables to exampleSite and Makefile to switch fast
Browse files Browse the repository at this point in the history
  • Loading branch information
silvanocerza committed Mar 4, 2019
1 parent b10aff1 commit 84a257b
Show file tree
Hide file tree
Showing 9 changed files with 355 additions and 2 deletions.
17 changes: 17 additions & 0 deletions exampleSite/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
red:
cp assets/css/red.sass assets/css/bulma-variables.sass

orange:
cp assets/css/orange.sass assets/css/bulma-variables.sass

yellow:
cp assets/css/yellow.sass assets/css/bulma-variables.sass

green:
cp assets/css/green.sass assets/css/bulma-variables.sass

blue:
cp assets/css/blue.sass assets/css/bulma-variables.sass

purple:
cp assets/css/purple.sass assets/css/bulma-variables.sass
56 changes: 56 additions & 0 deletions exampleSite/assets/css/blue.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$red: hsl(0, 100%, 60%)
$blue: hsl(220, 98%, 46%)
$green: hsl(123, 96%, 32%)

// Palette
$primary: $blue
$primary-invert: hsl(0, 0%, 96%)
$info: $red
$info-invert: hsl(0, 0%, 21%)
$success: $green
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 96%)
$body-color: hsl(0, 0%, 21%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 10%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 71%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 90%)
2 changes: 1 addition & 1 deletion exampleSite/assets/css/bulma-variables.sass
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@charset "utf-8"

// Colors
$red: hsl(11, 100%, 51%)
$red: hsl(0, 100%, 51%)
$turquoise: hsl(179, 98%, 46%)
$green: hsl(123, 96%, 32%)

Expand Down
56 changes: 56 additions & 0 deletions exampleSite/assets/css/green.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$yellow: hsl(60, 100%, 51%)
$blue: hsl(200, 98%, 46%)
$green: hsl(140, 96%, 50%)

// Palette
$primary: $green
$primary-invert: hsl(0, 0%, 21%)
$info: $yellow
$info-invert: hsl(0, 0%, 21%)
$success: $blue
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 21%)
$body-color: hsl(25, 0%, 96%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 96%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 21%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 10%)
56 changes: 56 additions & 0 deletions exampleSite/assets/css/orange.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$orange: hsl(30, 100%, 51%)
$turquoise: hsl(179, 98%, 46%)
$green: hsl(123, 96%, 32%)

// Palette
$primary: $orange
$primary-invert: hsl(0, 0%, 96%)
$info: $turquoise
$info-invert: hsl(0, 0%, 21%)
$success: $green
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 96%)
$body-color: hsl(0, 0%, 21%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 10%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 71%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 90%)
56 changes: 56 additions & 0 deletions exampleSite/assets/css/purple.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$red: hsl(0, 100%, 60%)
$purple: hsl(290, 98%, 46%)
$green: hsl(123, 96%, 32%)

// Palette
$primary: $purple
$primary-invert: hsl(0, 0%, 96%)
$info: $red
$info-invert: hsl(0, 0%, 21%)
$success: $green
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 96%)
$body-color: hsl(0, 0%, 21%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 10%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 71%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 90%)
56 changes: 56 additions & 0 deletions exampleSite/assets/css/red.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$red: hsl(0, 100%, 51%)
$turquoise: hsl(179, 98%, 46%)
$green: hsl(123, 96%, 32%)

// Palette
$primary: $red
$primary-invert: hsl(0, 0%, 96%)
$info: $turquoise
$info-invert: hsl(0, 0%, 21%)
$success: $green
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 96%)
$body-color: hsl(0, 0%, 21%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 10%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 71%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 90%)
56 changes: 56 additions & 0 deletions exampleSite/assets/css/yellow.sass
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@charset "utf-8"

// Colors
$yellow: hsl(60, 100%, 51%)
$blue: hsl(200, 98%, 46%)
$green: hsl(123, 96%, 51%)

// Palette
$primary: $yellow
$primary-invert: hsl(0, 0%, 21%)
$info: $blue
$info-invert: hsl(0, 0%, 21%)
$success: $green
$success-invert: hsl(0, 0%, 21%)

// Body
$body-background-color: hsl(0, 0%, 21%)
$body-color: hsl(25, 0%, 96%)

// Text
$text: $body-color
$text-invert: hsl(0, 0%, 21%)
$text-light: hsl(0, 0%, 84%)
$text-strong: hsl(0, 0%, 96%)

// Title
$title-color: $body-color
$subtitle-color: hsl(0, 0%, 21%)

// Link
$link: $success
$link-invert: $body-background-color
$link-hover: $primary
$link-visited: $primary

// Tags
$tag-background-color: hsl(0, 0%, 10%)
$tag-color: $text-light

// Pagination
$pagination-color: $body-color

$pagination-hover-color: $success
$pagination-hover-border-color: $success

$pagination-focus-color: $body-color
$pagination-focus-border-color: $success

$pagination-current-color: $link-invert
$pagination-current-background-color: $success
$pagination-current-border-color: $success

$pagination-ellipsis-color: $body-color

// Footer
$footer-background-color: hsl(0, 0%, 10%)

Large diffs are not rendered by default.

0 comments on commit 84a257b

Please sign in to comment.