diff --git a/css/_reset.scss b/css/_reset.scss new file mode 100644 index 000000000..84877ec88 --- /dev/null +++ b/css/_reset.scss @@ -0,0 +1,15 @@ +@import "theme"; + +* { + font-size: $defaultFontSize; + font-family: $fontFamily; +} + +*, +*:before, +*:after { + margin: 0; + padding: 0; + box-sizing: border-box; + vertical-align: top; +} diff --git a/css/_theme.scss b/css/_theme.scss index 52603eb3d..e9ffd2225 100644 --- a/css/_theme.scss +++ b/css/_theme.scss @@ -1 +1,2 @@ $fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman'; +$defaultFontSize: 16px; diff --git a/css/loader.scss b/css/loader.scss index 1dda09b90..6e4cb12b1 100644 --- a/css/loader.scss +++ b/css/loader.scss @@ -1,4 +1,5 @@ @import "mixins"; +@import "reset"; @include keyframes(LOADERSPINNER) { 0% { @@ -28,13 +29,6 @@ } } -*, *:before, *:after { - margin: 0; - padding: 0; - box-sizing: border-box; - vertical-align: top; -} - .loaderoverlay { $spinnerBoxSize: 200px; $themeColor: #6f3; @@ -100,13 +94,3 @@ left: 50%; } } - -button[type="button"] { - @include transform(translateX(-50%)); - - padding: 0.5rem 1rem; - position: absolute; - z-index: 1; - bottom: 10px; - left: 50%; -} diff --git a/css/styles.scss b/css/styles.scss index cdb9a9c05..801b2d58c 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -1,19 +1,14 @@ @import "mixins"; @import "theme"; +@import "reset"; + :root{ --my-font-color: #6f3; --my-background-color: #000; --my-highlight-color: #fff; } -* { - margin: 0; - padding: 0; - font-size: 16px; - font-family: $fontFamily; -} - body { background-color: var(--my-background-color); } @@ -26,7 +21,7 @@ h2, } h1 { - font-size: 22px; + font-size: $defaultFontSize * 1.375; color: var(--my-font-color); } @@ -44,6 +39,16 @@ span { padding: 4px; } +button[type="button"] { + @include transform(translateX(-50%)); + + padding: 0.5rem 1rem; + position: absolute; + z-index: 1; + bottom: 10px; + left: 50%; +} + #entire-game-container { background-color: transparent; } @@ -130,7 +135,8 @@ tr:focus { } /* Make html links ("a" elements) nice looking buttons with this class */ -a:link, a:visited { +a:link, +a:visited { color: #fff; }