match breakpoints with website and guides, use SASS vars (#317)

jenweber · jenweber · commit a15e98be90b7 · 2017-08-12T22:50:40.000-04:00
diff --git a/app/styles/components/_footer.scss b/app/styles/components/_footer.scss
@@ -14,7 +14,7 @@
   border-bottom: none;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $medium-screen) {
   .responsive.footer .container {
     padding: 2rem 1rem;
 
@@ -60,7 +60,7 @@
   display: flex
 }
 
-@media screen and (max-width: 40rem) {
+@media screen and (max-width: $large-screen) {
   .responsive.footer .container {
     text-align: center;
     display: block;
@@ -82,7 +82,7 @@
   text-align: left
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive.footer .footer-info {
     text-align: center;
   }
@@ -130,7 +130,7 @@
   max-height: 45px;
 }
 
-@media screen and (min-width: 53.75rem) {
+@media screen and (min-width: $large-screen) {
   .footer .footer-contributions {
     display: flex;
     flex:0 0 21em;
@@ -152,7 +152,7 @@
   }
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .footer .footer-social a:first-child {
     margin-left: 0;
   }
diff --git a/app/styles/components/_header.scss b/app/styles/components/_header.scss
@@ -43,7 +43,7 @@ $white: white;
   display: -webkit-flex;
 }
 
-@media screen and (max-width: $medium-screen) {
+@media screen and (max-width: $large-screen) {
   .responsive.header .container {
     display: block;
   }
@@ -55,7 +55,7 @@ $white: white;
   justify-content: space-between;
   height: 2.8rem;
 }
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive.header .header-nav {
     height: auto;
   }
@@ -69,7 +69,7 @@ $white: white;
   width: 100%;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive.header a {
     line-height: 24px; //do we need this
   }
@@ -90,12 +90,12 @@ $white: white;
   text-align: center;
 }
 
-@media screen and (max-width: 53.75em) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav li {
     display: inherit;
   }
 }
-@media screen and (max-width: 53.75em) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav li:not(.header-logo):not(.header-search) {
     width: 32%;
     display: inline-block;
@@ -106,8 +106,6 @@ $white: white;
 .header-nav li:not(.header-logo):not(.header-search) {
   width: auto;
 }
-@media screen and (min-width: 53.75rem) {
-}
 
 .header-nav .header-logo {
   -webkit-box-flex: 1.5;
@@ -119,7 +117,7 @@ $white: white;
   flex: 1.5 0 0;
 }
 
-@media screen and (min-width: 53.75rem) {
+@media screen and (min-width: $large-screen) {
 }
 
 .header-nav .header-search {
@@ -132,7 +130,7 @@ $white: white;
   flex: 2 0 0;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-nav .header-search {
     display: block;
   }
@@ -147,7 +145,7 @@ $white: white;
   display: block;
 }
 
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-logo a {
     margin: 0 auto;
   }
@@ -193,7 +191,7 @@ $white: white;
     color: white;
   }
 }
-@media screen and (max-width: 53.75rem) {
+@media screen and (max-width: $large-screen) {
   .responsive .header-search {
     margin-left: 0;
   }
diff --git a/app/styles/components/_sidebar.scss b/app/styles/components/_sidebar.scss
@@ -6,7 +6,7 @@
   padding: $small-spacing 0;
 
   @include media($medium-screen-up) {
-    margin-top: 5em;
+    margin-top: 11em;
   }
 
   @include media($large-screen-up) {

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`border-bottom: none;`
`15`	`15`	`}`
`16`	`16`
`17`		`-@media screen and (max-width: 53.75rem) {`
	`17`	`+@media screen and (max-width: $medium-screen) {`
`18`	`18`	`.responsive.footer .container {`
`19`	`19`	`padding: 2rem 1rem;`
`20`	`20`
`@@ -60,7 +60,7 @@`
`60`	`60`	`display: flex`
`61`	`61`	`}`
`62`	`62`
`63`		`-@media screen and (max-width: 40rem) {`
	`63`	`+@media screen and (max-width: $large-screen) {`
`64`	`64`	`.responsive.footer .container {`
`65`	`65`	`text-align: center;`
`66`	`66`	`display: block;`
`@@ -82,7 +82,7 @@`
`82`	`82`	`text-align: left`
`83`	`83`	`}`
`84`	`84`
`85`		`-@media screen and (max-width: 53.75rem) {`
	`85`	`+@media screen and (max-width: $large-screen) {`
`86`	`86`	`.responsive.footer .footer-info {`
`87`	`87`	`text-align: center;`
`88`	`88`	`}`
`@@ -130,7 +130,7 @@`
`130`	`130`	`max-height: 45px;`
`131`	`131`	`}`
`132`	`132`
`133`		`-@media screen and (min-width: 53.75rem) {`
	`133`	`+@media screen and (min-width: $large-screen) {`
`134`	`134`	`.footer .footer-contributions {`
`135`	`135`	`display: flex;`
`136`	`136`	`flex:0 0 21em;`
`@@ -152,7 +152,7 @@`
`152`	`152`	`}`
`153`	`153`	`}`
`154`	`154`
`155`		`-@media screen and (max-width: 53.75rem) {`
	`155`	`+@media screen and (max-width: $large-screen) {`
`156`	`156`	`.footer .footer-social a:first-child {`
`157`	`157`	`margin-left: 0;`
`158`	`158`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ $white: white;`
`43`	`43`	`display: -webkit-flex;`
`44`	`44`	`}`
`45`	`45`
`46`		`-@media screen and (max-width: $medium-screen) {`
	`46`	`+@media screen and (max-width: $large-screen) {`
`47`	`47`	`.responsive.header .container {`
`48`	`48`	`display: block;`
`49`	`49`	`}`
`@@ -55,7 +55,7 @@ $white: white;`
`55`	`55`	`justify-content: space-between;`
`56`	`56`	`height: 2.8rem;`
`57`	`57`	`}`
`58`		`-@media screen and (max-width: 53.75rem) {`
	`58`	`+@media screen and (max-width: $large-screen) {`
`59`	`59`	`.responsive.header .header-nav {`
`60`	`60`	`height: auto;`
`61`	`61`	`}`
`@@ -69,7 +69,7 @@ $white: white;`
`69`	`69`	`width: 100%;`
`70`	`70`	`}`
`71`	`71`
`72`		`-@media screen and (max-width: 53.75rem) {`
	`72`	`+@media screen and (max-width: $large-screen) {`
`73`	`73`	`.responsive.header a {`
`74`	`74`	`line-height: 24px; //do we need this`
`75`	`75`	`}`
`@@ -90,12 +90,12 @@ $white: white;`
`90`	`90`	`text-align: center;`
`91`	`91`	`}`
`92`	`92`
`93`		`-@media screen and (max-width: 53.75em) {`
	`93`	`+@media screen and (max-width: $large-screen) {`
`94`	`94`	`.responsive .header-nav li {`
`95`	`95`	`display: inherit;`
`96`	`96`	`}`
`97`	`97`	`}`
`98`		`-@media screen and (max-width: 53.75em) {`
	`98`	`+@media screen and (max-width: $large-screen) {`
`99`	`99`	`.responsive .header-nav li:not(.header-logo):not(.header-search) {`
`100`	`100`	`width: 32%;`
`101`	`101`	`display: inline-block;`
`@@ -106,8 +106,6 @@ $white: white;`
`106`	`106`	`.header-nav li:not(.header-logo):not(.header-search) {`
`107`	`107`	`width: auto;`
`108`	`108`	`}`
`109`		`-@media screen and (min-width: 53.75rem) {`
`110`		`-}`
`111`	`109`
`112`	`110`	`.header-nav .header-logo {`
`113`	`111`	`-webkit-box-flex: 1.5;`
`@@ -119,7 +117,7 @@ $white: white;`
`119`	`117`	`flex: 1.5 0 0;`
`120`	`118`	`}`
`121`	`119`
`122`		`-@media screen and (min-width: 53.75rem) {`
	`120`	`+@media screen and (min-width: $large-screen) {`
`123`	`121`	`}`
`124`	`122`
`125`	`123`	`.header-nav .header-search {`
`@@ -132,7 +130,7 @@ $white: white;`
`132`	`130`	`flex: 2 0 0;`
`133`	`131`	`}`
`134`	`132`
`135`		`-@media screen and (max-width: 53.75rem) {`
	`133`	`+@media screen and (max-width: $large-screen) {`
`136`	`134`	`.responsive .header-nav .header-search {`
`137`	`135`	`display: block;`
`138`	`136`	`}`
`@@ -147,7 +145,7 @@ $white: white;`
`147`	`145`	`display: block;`
`148`	`146`	`}`
`149`	`147`
`150`		`-@media screen and (max-width: 53.75rem) {`
	`148`	`+@media screen and (max-width: $large-screen) {`
`151`	`149`	`.responsive .header-logo a {`
`152`	`150`	`margin: 0 auto;`
`153`	`151`	`}`
`@@ -193,7 +191,7 @@ $white: white;`
`193`	`191`	`color: white;`
`194`	`192`	`}`
`195`	`193`	`}`
`196`		`-@media screen and (max-width: 53.75rem) {`
	`194`	`+@media screen and (max-width: $large-screen) {`
`197`	`195`	`.responsive .header-search {`
`198`	`196`	`margin-left: 0;`
`199`	`197`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`padding: $small-spacing 0;`
`7`	`7`
`8`	`8`	`@include media($medium-screen-up) {`
`9`		`- margin-top: 5em;`
	`9`	`+ margin-top: 11em;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`@include media($large-screen-up) {`