start working media queries responsive design

fbohz · Jun 28, 2020 · 52594ba · 52594ba
1 parent 7f6c413
commit 52594ba
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 46 deletions.
diff --git a/museo-demo/css/style.css b/museo-demo/css/style.css
@@ -1,15 +1,52 @@
+/*
+0 - 600px:      Phone
+600 - 900px:    Tablet portrait
+900 - 1200px:   Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + :      Big desktop
+
+$breakpoint argument choices:
+- phone 600px
+- tab-port 900px
+- tab-land 1200px
+- big-desktop 1800px
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
 *,
-*::after, *::before {
-  /* start clean so browser don't apply anything themselves */
+*::after,
+*::before {
   margin: 0;
   padding: 0;
   box-sizing: inherit; }
 
 html {
   font-size: 62.5%; }
+  @media only screen and (max-width: 75em) {
+    html {
+      font-size: 56.25%; } }
+  @media only screen and (max-width: 56.25em) {
+    html {
+      font-size: 50%; } }
+  @media only screen and (max-width: 37.5em) {
+    html {
+      font-size: 30%; } }
+  @media only screen and (min-width: 112.5em) {
+    html {
+      font-size: 75%; } }
 
 body {
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  padding: 3rem; }
+  @media only screen and (max-width: 56.25em) {
+    body {
+      padding: 0; } }
+
+::selection {
+  background-color: #55c57a;
+  color: #fff; }
 
 @keyframes moveInLeft {
   0% {
@@ -106,23 +143,6 @@ body {
 .u-margin-bottom-small {
   margin-bottom: 1.5rem !important; }
 
-/*
-0 - 600px:      Phone
-600 - 900px:    Tablet portrait
-900 - 1200px:   Tablet landscape
-[1200 - 1800] is where our normal styles apply
-1800px + :      Big desktop
-
-$breakpoint arguement choices:
-- phone
-- tab-port
-- tab-land
-- big-desktop
-
-ORDER: Base + typography > general layout + grid > page layout > components
-
-1em = 16px
-*/
 .section-about {
   background-color: #f7f7f7;
   padding: 25rem 0;

diff --git a/museo-demo/sass/abstracts/_mixins.scss b/museo-demo/sass/abstracts/_mixins.scss
@@ -22,29 +22,29 @@
 [1200 - 1800] is where our normal styles apply
 1800px + :      Big desktop
 
-$breakpoint arguement choices:
-- phone
-- tab-port
-- tab-land
-- big-desktop
+$breakpoint argument choices:
+- phone 600px
+- tab-port 900px
+- tab-land 1200px
+- big-desktop 1800px
 
 ORDER: Base + typography > general layout + grid > page layout > components
 
 1em = 16px
 */
 
-// @mixin respond($breakpoint) {
-//     @if $breakpoint == phone {
-//         @media only screen and (max-width: 37.5em) { @content };    //600px
-//     }
-//     @if $breakpoint == tab-port {
-//         @media only screen and (max-width: 56.25em) { @content };     //900px
-//     }
-//     @if $breakpoint == tab-land {
-//         @media only screen and (max-width: 75em) { @content };    //1200px
-//     }
-//     @if $breakpoint == big-desktop {
-//         @media only screen and (min-width: 112.5em) { @content };    //1800
-//     }
-// }
+@mixin respond($breakpoint) {
+    @if $breakpoint == phone {
+        @media only screen and (max-width: 37.5em) { @content };    //600px
+    }
+    @if $breakpoint == tab-port {
+        @media only screen and (max-width: 56.25em) { @content };     //900px
+    }
+    @if $breakpoint == tab-land {
+        @media only screen and (max-width: 75em) { @content };    //1200px
+    }
+    @if $breakpoint == big-desktop {
+        @media only screen and (min-width: 112.5em) { @content };    //1800
+    }
+}
 
diff --git a/museo-demo/sass/base/_base.scss b/museo-demo/sass/base/_base.scss
@@ -1,16 +1,41 @@
 *,
-*::after, *::before {
-    /* start clean so browser don't apply anything themselves */
-    margin:  0;
+*::after,
+*::before {
+    margin: 0;
     padding: 0;
     box-sizing: inherit;
 }
 
 html {
-    // defines what 1rem is
-    font-size: 62.5%;
+    // This defines what 1rem is
+    font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
+
+    @include respond(tab-land) { // width < 1200?
+        font-size: 56.25%; //1 rem = 9px, 9/16 = 50%
+    }
+
+    @include respond(tab-port) { // width < 900?
+        font-size: 50%; //1 rem = 8px, 8/16 = 50%
+    }
+    @include respond(phone) { // width < 900?
+        font-size: 30%; //1 rem = 8px, 8/16 = 50%
+    }
+
+    @include respond(big-desktop) {
+        font-size: 75%; //1rem = 12, 12/16
+    }
 }
 
 body {
     box-sizing: border-box;
+    padding: 3rem;
+
+    @include respond(tab-port) {
+        padding: 0;
+    }
+}
+
+::selection {
+    background-color: $color-primary;
+    color: $color-white;
 }
diff --git a/museo-demo/sass/main.scss b/museo-demo/sass/main.scss
@@ -1,10 +1,10 @@
-@import "base/base";
+@import "abstracts/mixins";
 @import "abstracts/variables";
+@import "base/base";
 @import "base/animations";
 @import "base/typography";
 @import "base/utilities";
 @import "abstracts/functions";
-@import "abstracts/mixins";
 @import "pages/home";
 
 @import "components/button";