Media query improvements (#70)

* breakpoint variables * use breakpoint-xs * use breakpoint-sm * update node engine to 18.19.1 * use breakpoint-md * use breakpoint-lg * make media query ranges inclusive of lower number * fix warning * tweak header styles --------- Co-authored-by: tblackwell-tm <[email protected]>
t-blackwell · Mar 4, 2024 · 9aa7a9e · 9aa7a9e
1 parent c8799a7
commit 9aa7a9e
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 25 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.20.2
+18.19.1
diff --git a/example/src/App.css b/example/src/App.css
@@ -1,21 +1,26 @@
 body {
   margin: 0;
-  font-family: 'Roboto', arial, sans-serif;
+  font-family: arial, sans-serif;
 }
 header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   color: #fff;
   background: #24292e;
   padding: 1.3rem 1.5rem;
 }
 .logo {
-  font-family: 'Vollkorn', serif;
   font-size: 1.6rem;
+  letter-spacing: -0.02em;
   margin: 0;
 }
 .example {
-  font-size: 1.4rem;
-  margin-left: 0.4rem;
-  opacity: 0.7;
+  font-size: 1.2rem;
+  background-color: white;
+  color: #24292e;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
 }
 main {
   margin: 0 auto;

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -65,7 +65,7 @@ export default function App() {
             <input
               checked={showDefinitions}
               id="show-definitions"
-              onClick={() => setShowDefinitions(!showDefinitions)}
+              onChange={() => setShowDefinitions(!showDefinitions)}
               type="checkbox"
             />
             <label htmlFor="show-definitions">Show definitions</label>

diff --git a/package.json b/package.json
@@ -77,6 +77,9 @@
     "lint:fix": "yarn lint --fix",
     "test": "jest --config jest.config.js"
   },
+  "engines": {
+    "node": "=18.19.1"
+  },
   "browserslist": [
     ">0.01%",
     "not ie 11",

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -1,3 +1,11 @@
+/** Breakpoints **/
+$breakpoint-xs: 576px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 992px;
+$breakpoint-lg: 1200px;
+$breakpoint-xl: 1400px;
+$breakpoint-xxl: 99999px;
+
 /** Layout **/
 $grid-size: 10px;
 $line-height: $grid-size * 2.2;

diff --git a/src/components/AnagramHelper/AnagramHelper.scss b/src/components/AnagramHelper/AnagramHelper.scss
@@ -84,7 +84,7 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--xs {
+@media (width <= vars.$breakpoint-xs) {
   .AnagramHelper[style] {
     width: auto !important;
     min-width: auto !important;

diff --git a/src/components/Clue/Clue.scss b/src/components/Clue/Clue.scss
@@ -36,7 +36,7 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--md {
+@media (vars.$breakpoint-sm <= width <= vars.$breakpoint-md) {
   .Clue {
     scroll-margin-top: vars.$grid-size * 2.3;
   }

diff --git a/src/components/Clues/Clues.scss b/src/components/Clues/Clues.scss
@@ -24,9 +24,7 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--xxl,
-.MyCrossword--xl,
-.MyCrossword--lg {
+@media (width > vars.$breakpoint-md) {
   .Clues__listBody {
     overflow-y: auto;
     border-bottom: 1px dotted vars.$light-grey;
@@ -35,40 +33,41 @@
   }
 }
 
-.MyCrossword--md {
+@media (vars.$breakpoint-sm <= width <= vars.$breakpoint-md) {
   .Clues {
     flex-direction: column;
     overflow-y: auto;
     border-bottom: 1px dotted vars.$light-grey;
     margin: 0 vars.$grid-size;
     scrollbar-width: thin;
   }
-  .Clues__list {
+  .Clues .Clues__list {
     width: 100%;
     margin: 0;
   }
-  .Clues__list--down {
+  .Clues .Clues__list--down {
     margin-top: vars.$grid-size * 2;
     .Clues__listHeader {
       top: -1px;
     }
   }
 }
 
-.MyCrossword--sm {
+
+@media (vars.$breakpoint-xs <= width <= vars.$breakpoint-sm) {
   .Clues {
     margin-top: vars.$grid-size;
   }
 }
 
-.MyCrossword--xs {
+@media (width <= vars.$breakpoint-xs) {
   .Clues {
     flex-direction: column;
   }
-  .Clues__list {
+  .Clues .Clues__list {
     width: 100%;
   }
-  .Clues__list--down {
+  .Clues .Clues__list--down {
     margin-top: vars.$grid-size * 2;
   }
 }
diff --git a/src/components/Crossword/Crossword.scss b/src/components/Crossword/Crossword.scss
@@ -1,3 +1,5 @@
+@use '_variables' as vars;
+
 .MyCrossword {
   .Crossword {
     display: flex;
@@ -8,13 +10,13 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--xs {
+@media (width <= vars.$breakpoint-xs) {
   .Crossword {
     flex-direction: column;
   }
 }
 
-.MyCrossword--sm {
+@media (vars.$breakpoint-xs <= width <= vars.$breakpoint-sm) {
   .Crossword {
     flex-direction: column;
   }

diff --git a/src/components/Grid/Grid.scss b/src/components/Grid/Grid.scss
@@ -23,7 +23,7 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--xs {
+@media (width <= vars.$breakpoint-xs) {
   .Grid[style] {
     width: auto !important;
     height: auto !important;
@@ -35,7 +35,7 @@
   }
 }
 
-.MyCrossword--sm {
+@media (vars.$breakpoint-xs <= width <= vars.$breakpoint-sm) {
   .Grid {
     scroll-margin-top: vars.$grid-size * 5;
   }

diff --git a/src/components/GridError/GridError.scss b/src/components/GridError/GridError.scss
@@ -22,8 +22,8 @@
 }
 
 /** Breakpoints **/
-.MyCrossword--xs {
-  .GridError {
+@media (width <= vars.$breakpoint-xs) {
+  .MyCrossword .GridError {
     width: auto;
   }
 }