scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fix gh-2156: Use variables for media queries for consistency (#2182)

Browse source 
* use variables for media queries

* add medium-and-intermediate media query variable
This commit is contained in:
sjgllghr 2018-10-16 10:28:41 -07:00 committed by Benjamin Wheeler
parent effbfbeaff
commit 6d8235c7e8
40 changed files with 132 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/_frameless.scss
View file

@ -55,6 +55,8 @@ $big: "only screen and (min-width : #{$desktop})";
$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)"; $medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)"; $intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
$medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
/* Height */ /* Height */
$small-height: "only screen and (max-height : #{$mobile} - 1)"; $small-height: "only screen and (max-height : #{$mobile} - 1)";
@ -71,7 +73,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
//4 columns //4 columns
@mixin submobile ($parent-selector, $child-selector) { @mixin submobile ($parent-selector, $child-selector) {
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
#{$parent-selector} { #{$parent-selector} {
text-align: center; text-align: center;
} }
@ -87,7 +89,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
//6 columns //6 columns
@mixin mobile ($parent-selector, $child-selector) { @mixin mobile ($parent-selector, $child-selector) {
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
#{$parent-selector} { #{$parent-selector} {
text-align: center; text-align: center;
} }
@ -103,7 +105,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
//8 columns //8 columns
@mixin tablet ($parent-selector, $child-selector) { @mixin tablet ($parent-selector, $child-selector) {
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
#{$parent-selector} { #{$parent-selector} {
text-align: center; text-align: center;
} }
@ -117,7 +119,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
//12 columns //12 columns
@mixin desktop ($parent-selector, $child-selector) { @mixin desktop ($parent-selector, $child-selector) {
@media only screen and (min-width: $desktop) { @media #{$big} {
#{$child-selector} { #{$child-selector} {
margin: 0 auto; margin: 0 auto;
width: $desktop; width: $desktop;

8
src/components/box/box.scss
View file

@ -9,7 +9,7 @@ $base-bg: $ui-white;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
width: $cols4; width: $cols4;
.box-header { .box-header {
@ -22,7 +22,7 @@ $base-bg: $ui-white;
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
width: $cols6; width: $cols6;
.box-header { .box-header {
@ -35,7 +35,7 @@ $base-bg: $ui-white;
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
width: $cols8; width: $cols8;
.box-header { .box-header {
@ -48,7 +48,7 @@ $base-bg: $ui-white;
} }
//12 columns //12 columns
@media only screen and (min-width: $desktop) { @media #{$big} {
width: $cols12; width: $cols12;
.box-header { .box-header {

6
src/components/card/card.scss
View file

@ -81,7 +81,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.card { .card {
width: 22.5rem; width: 22.5rem;
@ -95,7 +95,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.card { .card {
.input { .input {
width: 90%; width: 90%;
@ -103,7 +103,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.card { .card {
.validation-message { .validation-message {
position: relative; position: relative;

2
src/components/flex-row/flex-row.scss
View file

@ -25,7 +25,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
&.uneven { &.uneven {

6
src/components/footer/conference/footer.scss
View file

@ -51,7 +51,7 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
align-items: center; align-items: center;
} }
} }
@ -103,7 +103,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
text-align: center; text-align: center;
.family { .family {
@ -122,7 +122,7 @@
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
ul { ul {
li { li {
margin-left: 0; margin-left: 0;

6
src/components/grid/grid.scss
View file

@ -94,21 +94,21 @@
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.flex-row { .flex-row {
width: $cols4; width: $cols4;
} }
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.flex-row { .flex-row {
width: $cols6; width: $cols6;
} }
} }
// 8 columns // 8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.flex-row { .flex-row {
width: $cols9; width: $cols9;
} }

8
src/components/masonrygrid/masonrygrid.scss
View file

@ -9,14 +9,14 @@
// column-count required for Firefox, IE and Edge // column-count required for Firefox, IE and Edge
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.masonry { .masonry {
column-count: 1; column-count: 1;
} }
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.masonry { .masonry {
column-count: 1; column-count: 1;
} }
@ -24,14 +24,14 @@
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.masonry { .masonry {
column-count: 2; column-count: 2;
} }
} }
// 12 columns // 12 columns
@media only screen and (min-width: $desktop) { @media #{$big} {
.masonry { .masonry {
column-count: 3; column-count: 3;
} }

6
src/components/modal/ttt/modal.scss
View file

@ -62,7 +62,7 @@
box-shadow: none; box-shadow: none;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.modal-content.mod-ttt { .modal-content.mod-ttt {
overflow: scroll; overflow: scroll;
} }
@ -76,7 +76,7 @@
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.modal-content.mod-ttt { .modal-content.mod-ttt {
overflow: scroll; overflow: scroll;
} }
@ -90,7 +90,7 @@
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.modal-content.mod-ttt { .modal-content.mod-ttt {
overflow: scroll; overflow: scroll;
} }

4
src/components/navigation/conference/2016/navigation.scss
View file

@ -40,7 +40,7 @@
font-weight: bold; font-weight: bold;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.li-right-ul.mod-2016 { .li-right-ul.mod-2016 {
flex-flow: row nowrap; flex-flow: row nowrap;
} }
@ -55,7 +55,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
height: 100px; height: 100px;
.ul.mod-2016 { .ul.mod-2016 {

4
src/components/navigation/conference/2018/navigation.scss
View file

@ -45,7 +45,7 @@
font-weight: bold; font-weight: bold;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.li-right-ul.mod-2018 { .li-right-ul.mod-2018 {
flex-flow: row nowrap; flex-flow: row nowrap;
} }
@ -60,7 +60,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
height: 100px; height: 100px;
.ul.mod-2018 { .ul.mod-2018 {

6
src/components/navigation/www/accountnav.scss
View file

@ -56,7 +56,7 @@
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.account-nav { .account-nav {
margin-left: 0; margin-left: 0;
@ -74,7 +74,7 @@
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.account-nav { .account-nav {
margin-left: 0; margin-left: 0;
@ -91,7 +91,7 @@
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.account-nav { .account-nav {
margin-left: 0; margin-left: 0;
} }

6
src/components/navigation/www/navigation.scss
View file

@ -166,7 +166,7 @@
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
#navigation .inner { #navigation .inner {
width: $cols4; width: $cols4;
@ -190,7 +190,7 @@
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
#navigation .inner { #navigation .inner {
width: $cols6; width: $cols6;
@ -212,7 +212,7 @@
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
#navigation .inner { #navigation .inner {
width: $cols8; width: $cols8;

14
src/components/page/conference/page.scss
View file

@ -6,19 +6,19 @@
font-size: 4.5rem; font-size: 4.5rem;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
h1 { h1 {
font-size: 3rem; font-size: 3rem;
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
} }
@ -52,7 +52,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin-top: 50px; margin-top: 50px;
} }
} }
@ -79,7 +79,7 @@
font-size: 4rem; font-size: 4rem;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
h1, h1,
.title-banner-h1.mod-2017 { .title-banner-h1.mod-2017 {
font-size: 2.5rem; font-size: 2.5rem;
@ -96,7 +96,7 @@
width: 125px; width: 125px;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
img { img {
transform: translate(0, 5px); transform: translate(0, 5px);
width: 85px; width: 85px;
@ -108,7 +108,7 @@ section {
padding: 64px 0; padding: 64px 0;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
#view { #view {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;

2
src/components/registration/registration.scss
View file

@ -10,7 +10,7 @@
min-height: 27.375rem; min-height: 27.375rem;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.modal-content.mod-registration { .modal-content.mod-registration {
width: 100%; width: 100%;
overflow: scroll; overflow: scroll;

4
src/components/registration/steps.scss
View file

@ -155,7 +155,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.registration-step { .registration-step {
&.demographics-step { &.demographics-step {
.radio { .radio {
@ -174,7 +174,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.registration-step { .registration-step {
.form { .form {
text-align: left; text-align: left;

2
src/components/slide/slide.scss
View file

@ -25,7 +25,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.slide { .slide {
padding: 0; padding: 0;
} }

4
src/components/social-message/social-message.scss
View file

@ -53,7 +53,7 @@ a.social-messages-profile-link {
margin-left: 1.5rem; margin-left: 1.5rem;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.social-message { .social-message {
text-align: left; text-align: left;
} }
@ -67,7 +67,7 @@ a.social-messages-profile-link {
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.social-message { .social-message {
text-align: left; text-align: left;
} }

2
src/components/tooltip/tooltip.scss
View file

@ -58,7 +58,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.tooltip { .tooltip {
display: block; display: block;

6
src/views/conference/2016/details/details.scss
View file

@ -1,11 +1,11 @@
@import "../../../../frameless"; @import "../../../../frameless";
#view { #view {
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin-top: 100px; margin-top: 100px;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
text-align: left; text-align: left;
} }
} }
@ -49,7 +49,7 @@
} }
//8 columns //8 columns
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.details { .details {
width: 100%; width: 100%;
} }

12
src/views/conference/2016/expect/expect.scss
View file

@ -25,7 +25,7 @@
margin-top: 1.2rem; margin-top: 1.2rem;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
img { img {
width: 50%; width: 50%;
} }
@ -37,7 +37,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.uneven { .uneven {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -80,7 +80,7 @@
margin: 15px 0; margin: 15px 0;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -156,7 +156,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.flex-row { .flex-row {
table { table {
width: 100%; width: 100%;
@ -164,7 +164,7 @@
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) { @media #{$medium-and-intermediate} {
.flex-row { .flex-row {
table { table {
width: $cols6; width: $cols6;
@ -172,7 +172,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

8
src/views/conference/2016/index/index.scss
View file

@ -48,7 +48,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
h3 { h3 {
display: none; display: none;
margin-top: 0; margin-top: 0;
@ -60,7 +60,7 @@
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -85,7 +85,7 @@
max-width: 125px; max-width: 125px;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin: .5rem; margin: .5rem;
width: 125px; width: 125px;
} }
@ -93,7 +93,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.index { .index {
.flex-row { .flex-row {
align-items: center; align-items: center;

14
src/views/conference/2016/plan/plan.scss
View file

@ -19,13 +19,13 @@
width: 100%; width: 100%;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
img { img {
width: 30%; width: 30%;
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
img { img {
width: 70%; width: 70%;
} }
@ -36,7 +36,7 @@
.lodging { .lodging {
text-align: left; text-align: left;
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.uneven { .uneven {
.short { .short {
display: none; display: none;
@ -50,7 +50,7 @@
align-items: center; align-items: center;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -69,13 +69,13 @@
justify-content: flex-start; justify-content: flex-start;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
ul { ul {
max-height: 100%; max-height: 100%;
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
div { div {
text-align: left; text-align: left;
} }
@ -105,7 +105,7 @@
margin: 0; margin: 0;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin-top: 0; margin-top: 0;
} }
} }

4
src/views/conference/2016/schedule/schedule.scss
View file

@ -102,7 +102,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.sub-nav { .sub-nav {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -124,7 +124,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.inner { .inner {
h2 { h2 {
&.breaking-title { &.breaking-title {

6
src/views/conference/2017/index/index.scss
View file

@ -79,7 +79,7 @@ td {
color: $type-white; color: $type-white;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.index.mod-2017 { .index.mod-2017 {
text-align: left; text-align: left;
} }
@ -123,7 +123,7 @@ td {
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.index.mod-2017 { .index.mod-2017 {
text-align: left; text-align: left;
} }
@ -159,7 +159,7 @@ td {
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.index.mod-2017 { .index.mod-2017 {
text-align: left; text-align: left;
} }

6
src/views/conference/2018/details/details.scss
View file

@ -1,11 +1,11 @@
@import "../../../../frameless"; @import "../../../../frameless";
#view { #view {
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin-top: 100px; margin-top: 100px;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
text-align: left; text-align: left;
} }
} }
@ -49,7 +49,7 @@
} }
//8 columns //8 columns
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.details { .details {
width: 100%; width: 100%;
} }

12
src/views/conference/2018/expect/expect.scss
View file

@ -25,7 +25,7 @@
margin-top: 1.2rem; margin-top: 1.2rem;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
img { img {
width: 50%; width: 50%;
} }
@ -37,7 +37,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.uneven { .uneven {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -85,7 +85,7 @@
margin: 15px 0; margin: 15px 0;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -163,7 +163,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.flex-row { .flex-row {
table { table {
width: 100%; width: 100%;
@ -171,7 +171,7 @@
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) { @media #{$medium-and-intermediate} {
.flex-row { .flex-row {
table { table {
width: $cols6; width: $cols6;
@ -179,7 +179,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

8
src/views/conference/2018/index/index.scss
View file

@ -60,7 +60,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
h3 { h3 {
display: none; display: none;
margin-top: 0; margin-top: 0;
@ -72,7 +72,7 @@
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -97,7 +97,7 @@
max-width: 125px; max-width: 125px;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin: .5rem; margin: .5rem;
width: 125px; width: 125px;
} }
@ -105,7 +105,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.index { .index {
.flex-row { .flex-row {
align-items: center; align-items: center;

14
src/views/conference/2018/plan/plan.scss
View file

@ -19,13 +19,13 @@
width: 100%; width: 100%;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
img { img {
width: 30%; width: 30%;
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
img { img {
width: 70%; width: 70%;
} }
@ -36,7 +36,7 @@
.lodging { .lodging {
text-align: left; text-align: left;
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.uneven { .uneven {
.short { .short {
display: none; display: none;
@ -50,7 +50,7 @@
align-items: center; align-items: center;
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.flex-row { .flex-row {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -69,13 +69,13 @@
justify-content: flex-start; justify-content: flex-start;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
ul { ul {
max-height: 100%; max-height: 100%;
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
div { div {
text-align: left; text-align: left;
} }
@ -105,7 +105,7 @@
margin: 0; margin: 0;
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
margin-top: 0; margin-top: 0;
} }
} }

4
src/views/conference/2018/schedule/schedule.scss
View file

@ -102,7 +102,7 @@
} }
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.sub-nav { .sub-nav {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -124,7 +124,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1) { @media #{$medium-and-smaller} {
.inner { .inner {
h2 { h2 {
&.breaking-title { &.breaking-title {

6
src/views/developers/developers.scss
View file

@ -170,7 +170,7 @@ $developer-spot: $ui-aqua;
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
#view { #view {
text-align: left; text-align: left;
} }
@ -196,7 +196,7 @@ $developer-spot: $ui-aqua;
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
#view { #view {
text-align: left; text-align: left;
} }
@ -216,7 +216,7 @@ $developer-spot: $ui-aqua;
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
#view { #view {
text-align: left; text-align: left;
} }

4
src/views/download/download.scss
View file

@ -111,7 +111,7 @@
color: $ui-white; color: $ui-white;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.inner { .inner {
.installation-column { .installation-column {
max-width: 100%; max-width: 100%;
@ -119,7 +119,7 @@
} }
} }
@media only screen and (max-width: $desktop - 1) { @media #{$intermediate-and-smaller} {
.three-col-row { .three-col-row {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

6
src/views/explore/explore.scss
View file

@ -120,7 +120,7 @@ $base-bg: $ui-white;
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.outer { .outer {
.tabs { .tabs {
width: $cols4; width: $cols4;
@ -139,7 +139,7 @@ $base-bg: $ui-white;
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.outer { .outer {
.tabs { .tabs {
width: $cols6; width: $cols6;
@ -158,7 +158,7 @@ $base-bg: $ui-white;
} }
// 8 columns // 8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.outer { .outer {
.tabs { .tabs {
width: $cols8; width: $cols8;

2
src/views/guidelines/guidelines.scss
View file

@ -14,7 +14,7 @@
} }
} }
@media only screen and (max-width: $tablet - 1){ @media #{$medium-and-smaller}{
.guidelines-footer { .guidelines-footer {
img { img {
display: none; display: none;

6
src/views/messages/messages.scss
View file

@ -129,7 +129,7 @@
word-wrap: break-word; word-wrap: break-word;
} }
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.flex-row.admin-message-header, .flex-row.admin-message-header,
.flex-row.mod-comment-message { .flex-row.mod-comment-message {
flex-direction: row; flex-direction: row;
@ -144,7 +144,7 @@
} }
} }
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.flex-row.admin-message-header, .flex-row.admin-message-header,
.flex-row.mod-comment-message { .flex-row.mod-comment-message {
flex-direction: row; flex-direction: row;
@ -159,7 +159,7 @@
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.comment-text { .comment-text {
max-width: 23.75rem; max-width: 23.75rem;
} }

6
src/views/search/search.scss
View file

@ -169,7 +169,7 @@ $base-bg: $ui-white;
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.outer { .outer {
.search { .search {
width: $cols4; width: $cols4;
@ -197,7 +197,7 @@ $base-bg: $ui-white;
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.outer { .outer {
.tabs { .tabs {
width: $cols6; width: $cols6;
@ -216,7 +216,7 @@ $base-bg: $ui-white;
} }
// 8 columns // 8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.outer { .outer {
.tabs { .tabs {
width: $cols8; width: $cols8;

2
src/views/splash/beta/middle-banner.scss
View file

@ -65,7 +65,7 @@
} }
} }
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.beta-middle-banner { .beta-middle-banner {
margin: 20px auto 40px auto; margin: 20px auto 40px auto;
width: $cols8; width: $cols8;

6
src/views/splash/splash.scss
View file

@ -96,7 +96,7 @@
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.splash { .splash {
.splash-header { .splash-header {
flex-wrap: wrap; flex-wrap: wrap;
@ -119,7 +119,7 @@
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.splash { .splash {
.splash-header { .splash-header {
flex-wrap: wrap; flex-wrap: wrap;
@ -143,7 +143,7 @@
} }
//6 columns //6 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.splash { .splash {
.splash-header { .splash-header {
margin: 0 auto; margin: 0 auto;

8
src/views/teachers/landing/landing.scss
View file

@ -247,7 +247,7 @@ $story-width: $cols3;
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
$story-width: $cols4; $story-width: $cols4;
.stories { .stories {
@ -311,7 +311,7 @@ $story-width: $cols3;
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
$story-width: $cols3; $story-width: $cols3;
.stories { .stories {
@ -366,7 +366,7 @@ $story-width: $cols3;
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
$story-width: $cols4; $story-width: $cols4;
.stories { .stories {
@ -500,7 +500,7 @@ $story-width: $cols3;
} }
// 12 columns // 12 columns
@media only screen and (min-width: $desktop) { @media #{$big} {
$story-width: $cols3; $story-width: $cols3;
.stories { .stories {

8
src/views/tips/tips.scss
View file

@ -83,7 +83,7 @@ img.tips-icon {
height: 1.75rem; height: 1.75rem;
} }
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.title-banner { .title-banner {
&.masthead { &.masthead {
@ -121,7 +121,7 @@ img.tips-icon {
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.title-banner { .title-banner {
&.masthead { &.masthead {
@ -152,7 +152,7 @@ img.tips-icon {
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
.title-banner { .title-banner {
&.masthead { &.masthead {
padding-bottom: 2rem; padding-bottom: 2rem;
@ -189,7 +189,7 @@ img.tips-icon {
} }
// 12 columns // 12 columns
@media only screen and (min-width: $desktop) { @media #{$big} {
.title-banner { .title-banner {
&.masthead { &.masthead {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;

6
src/views/wedo2-legacy/wedo2.scss
View file

@ -156,7 +156,7 @@
// Responsive Behavior // Responsive Behavior
//4 columns //4 columns
@media only screen and (max-width: $mobile - 1) { @media #{$small} {
.wedo { .wedo {
.inner { .inner {
margin: 0 auto; margin: 0 auto;
@ -186,7 +186,7 @@
} }
//6 columns //6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { @media #{$medium} {
.wedo { .wedo {
.project-list, .project-list,
.columns3 { .columns3 {
@ -210,7 +210,7 @@
} }
//8 columns //8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { @media #{$intermediate} {
#view { #view {
text-align: center; text-align: center;
} }