Add basic deck builder #12
1 changed files with 42 additions and 23 deletions
|
@ -3,32 +3,44 @@
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
|
|
||||||
$black: hsl(0, 0%, 4%) !default;
|
$black: hsl(0, 0%, 4%) !default;
|
||||||
$black-bis: hsl(0, 0%, 7%) !default;
|
$black-bis: hsl(0, 0%, 7%) !default;
|
||||||
$black-ter: hsl(0, 0%, 14%) !default;
|
$black-ter: hsl(0, 0%, 14%) !default;
|
||||||
|
|
||||||
$grey-darker: hsl(0, 0%, 21%) !default;
|
$grey-darker: hsl(0, 0%, 21%) !default;
|
||||||
$grey-dark: hsl(0, 0%, 29%) !default;
|
$grey-dark: hsl(0, 0%, 29%) !default;
|
||||||
$grey: hsl(0, 0%, 48%) !default;
|
$grey: hsl(0, 0%, 48%) !default;
|
||||||
$grey-light: hsl(0, 0%, 71%) !default;
|
$grey-light: hsl(0, 0%, 71%) !default;
|
||||||
$grey-lighter: hsl(0, 0%, 86%) !default;
|
$grey-lighter: hsl(0, 0%, 86%) !default;
|
||||||
|
|
||||||
$white-ter: hsl(0, 0%, 96%) !default;
|
$white-ter: hsl(0, 0%, 96%) !default;
|
||||||
$white-bis: hsl(0, 0%, 98%) !default;
|
$white-bis: hsl(0, 0%, 98%) !default;
|
||||||
$white: hsl(0, 0%, 100%) !default;
|
$white: hsl(0, 0%, 100%) !default;
|
||||||
|
|
||||||
$orange: hsl(14, 100%, 53%) !default;
|
$orange: hsl(14, 100%, 53%) !default;
|
||||||
$yellow: hsl(48, 100%, 67%) !default;
|
$yellow: hsl(48, 100%, 67%) !default;
|
||||||
$green: hsl(141, 71%, 48%) !default;
|
$green: hsl(141, 71%, 48%) !default;
|
||||||
$turquoise: hsl(171, 100%, 41%) !default;
|
$turquoise: hsl(171, 100%, 41%) !default;
|
||||||
$cyan: hsl(204, 86%, 53%) !default;
|
$cyan: hsl(204, 86%, 53%) !default;
|
||||||
$blue: hsl(217, 71%, 53%) !default;
|
$blue: hsl(217, 71%, 53%) !default;
|
||||||
$purple: hsl(271, 100%, 71%) !default;
|
$purple: hsl(271, 100%, 71%) !default;
|
||||||
$red: hsl(348, 100%, 61%) !default;
|
$red: hsl(348, 100%, 61%) !default;
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
|
|
||||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
$family-sans-serif: BlinkMacSystemFont,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
"Roboto",
|
||||||
|
"Oxygen",
|
||||||
|
"Ubuntu",
|
||||||
|
"Cantarell",
|
||||||
|
"Fira Sans",
|
||||||
|
"Droid Sans",
|
||||||
|
"Helvetica Neue",
|
||||||
|
"Helvetica",
|
||||||
|
"Arial",
|
||||||
|
sans-serif !default;
|
||||||
$family-monospace: monospace !default;
|
$family-monospace: monospace !default;
|
||||||
$render-mode: optimizeLegibility !default;
|
$render-mode: optimizeLegibility !default;
|
||||||
|
|
||||||
|
@ -53,11 +65,11 @@ $gap: 32px !default;
|
||||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||||
$tablet: 769px !default;
|
$tablet: 769px !default;
|
||||||
// 960px container + 4rem
|
// 960px container + 4rem
|
||||||
$desktop: 960px + (2 * $gap) !default;
|
$desktop: 960px+(2 * $gap) !default;
|
||||||
// 1152px container + 4rem
|
// 1152px container + 4rem
|
||||||
$widescreen: 1152px + (2 * $gap) !default;
|
$widescreen: 1152px+(2 * $gap) !default;
|
||||||
// 1344px container + 4rem;
|
// 1344px container + 4rem;
|
||||||
$fullhd: 1344px + (2 * $gap) !default;
|
$fullhd: 1344px+(2 * $gap) !default;
|
||||||
|
|
||||||
// Miscellaneous
|
// Miscellaneous
|
||||||
|
|
||||||
|
@ -72,7 +84,6 @@ $speed: 86ms !default;
|
||||||
|
|
||||||
$variable-columns: true !default;
|
$variable-columns: true !default;
|
||||||
|
|
||||||
|
|
||||||
// The default Bulma derived variables are declared below
|
// The default Bulma derived variables are declared below
|
||||||
|
|
||||||
$primary: $turquoise !default;
|
$primary: $turquoise !default;
|
||||||
|
@ -150,3 +161,11 @@ $size-small: $size-7 !default;
|
||||||
$size-normal: $size-6 !default;
|
$size-normal: $size-6 !default;
|
||||||
$size-medium: $size-5 !default;
|
$size-medium: $size-5 !default;
|
||||||
$size-large: $size-4 !default;
|
$size-large: $size-4 !default;
|
||||||
|
|
||||||
|
// Input box styling
|
||||||
|
|
||||||
|
$input-color: $white;
|
||||||
|
$input-background-color: $black-ter;
|
||||||
|
$input-border-color: $grey-darker;
|
||||||
|
$input-focus-border-color: $turquoise;
|
||||||
|
$input-hover-border-color: scale-color($turquoise, $lightness: -30%);
|
Loading…
Reference in a new issue