diff --git a/scss/base/_index.scss b/scss/base/_index.scss new file mode 100644 index 0000000..f54c3de --- /dev/null +++ b/scss/base/_index.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +@import "reset.scss"; +@import "variables.scss"; +@import "generic.scss"; diff --git a/scss/base/generic.scss b/scss/base/generic.scss new file mode 100644 index 0000000..9771a50 --- /dev/null +++ b/scss/base/generic.scss @@ -0,0 +1,22 @@ +// Define +html { + font-size: $font-size; + color: $black; + background-color: $white; +} + +body, +button, +input, +textarea, +select, +pre, +code { + font-family: $font-family; + font-size: $font-size; +} + +a { + color: $black; + text-decoration: none; +} diff --git a/scss/base/reset.scss b/scss/base/reset.scss new file mode 100644 index 0000000..d1666a8 --- /dev/null +++ b/scss/base/reset.scss @@ -0,0 +1,83 @@ +/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} + +ul { + list-style: none; +} + +button, +input, +select, +textarea { + margin: 0; +} + +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +img, +embed, +iframe, +object, +audio, +video { + max-width: 100%; + height: auto; +} + +iframe { + border: 0; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; + text-align: left; +} diff --git a/scss/base/variables.scss b/scss/base/variables.scss new file mode 100644 index 0000000..87e1c52 --- /dev/null +++ b/scss/base/variables.scss @@ -0,0 +1,41 @@ +// Font +@import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); +$font-family: "Press Start 2P" !default; + +// Sizes +$font-size: 16px !default; + +$h1-font-size: $font-size * 3 !default; +$h2-font-size: $font-size * 2.5 !default; +$h3-font-size: $font-size * 2 !default; +$h4-font-size: $font-size * 1.5 !default; +$h5-font-size: $font-size * 1.25 !default; +$h6-font-size: $font-size !default; + +$small-font-size: 0.6em; +$medium-font-size: 1em; +$large-font-size: 2em; + +// Colors +$black: #333 !default; +$white: #f7f7f7 !default; + +$background-color: $white !default; +$hover-background-color: #e7e7e7 !default; +$shadow-color: #adafbc !default; + +$primary-background-color: #92cc41 !default; +$primary-hover-background-color: #76c442 !default; +$primary-shadow-color: #4aa52e !default; + +$success-background-color: #209cee !default; +$success-hover-background-color: #108de0 !default; +$success-shadow-color: #006bb3 !default; + +$warning-background-color: #f7d51d !default; +$warning-hover-background-color: #f2c409 !default; +$warning-shadow-color: #e59400 !default; + +$error-background-color: #e76e55 !default; +$error-hover-background-color: #ce372b !default; +$error-shadow-color: #8c2022 !default;