Fixed a scoping issue in main.scss that caused the full-size grid par…

…ameters to be used in the mobile section. Changes to the compiled main.css file are mostly just spacing & indentation changes. Some of the calculated color values have changed slightly (probably due to rounding differences in Sass?).
uberspot · Mar 28, 2019 · 5a1ea49 · 5a1ea49
1 parent 169f0f3
commit 5a1ea49
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 110 deletions.
diff --git a/style/main.css b/style/main.css
diff --git a/style/main.scss b/style/main.scss
@@ -9,7 +9,7 @@ $tile-border-radius: 3px;
 
 $mobile-threshold: $field-width + 20px;
 
-$text-color: #776E65;
+$text-color: #776e65;
 $bright-text-color: #f9f6f2;
 
 $tile-color: #eee4da;
@@ -504,12 +504,11 @@ hr {
 
 @include smaller($mobile-threshold) {
   // Redefine variables for smaller screens
-  $field-width: 280px;
-  $grid-spacing: 10px;
-  $grid-row-cells: 4;
-  $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
-  $tile-border-radius: 3px;
-  $game-container-margin-top: 15px;
+  $field-width: 280px !global;
+  $grid-spacing: 10px !global;
+  $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells !global;
+  $tile-border-radius: 3px !global;
+  $game-container-margin-top: 15px !global;
 
   html, body {
     font-size: 15px;