CSS: Move styles into proper places and outside of the shame file

scummvm · Aug 27, 2018 · 72b99b8 · 72b99b8
1 parent a6dff65
commit 72b99b8
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 81 deletions.
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
@@ -9,6 +9,10 @@ body {
 	font-size: 14px;
 	line-height: 1.357em;
 	margin: 8px 8px 24px 8px;
+
+	@include respond-to('small') {
+		margin: 0;	
+	}
 }
 
 .no-scroll {
@@ -60,6 +64,10 @@ a:hover {
 .container {
 	border-radius: 0 0 8px 8px;
 	background: $theme-wrapper-background;
+
+	@include respond-to('small') {
+		border-radius: 0;
+	}
 }
 
 span.sprite {
@@ -81,3 +89,11 @@ span.sprite {
 	margin: 0;
 	padding: 10px 20px;
 }
+
+.float_right {
+	float: right;
+}
+
+.float_left {
+	float: left;
+}
diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss
@@ -10,7 +10,12 @@ footer {
         color: $black-semi-transparent;
         text-decoration: none;
       }
-    }
+		}
+
+		@include respond-to('small') {
+			padding: 0 8px;
+			background: rgb(251, 241, 206);
+		}
   }
 
   .tentacle {

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
@@ -5,6 +5,11 @@
 	position: relative;
 	margin: 0 auto;
 	padding: 0 50px;
+
+	@include respond-to('small') {
+		padding: 0;
+		margin: 0;
+	}
 }
 
 .col-4-5 {
@@ -49,3 +54,44 @@
 		box-sizing: border-box;
 	}
 }
+
+@include respond-to('small') {
+	.col-1-2 {
+		clear: left;
+		width: 100%;
+	}
+	[class*='col-'] {
+		padding-right: 0;
+	}
+	.col-1-5 {
+		width: 100%;
+	}
+	.col-4-5 {
+		width: 100%;
+	}
+	.hide-small {
+		display: none;
+	}
+	.col-sm-1 {
+		width: 100%;
+	}
+	.col-md-2 {
+		width: 50%;
+	}
+	.col-md-1 {
+		width: 100%;
+	}	
+}
+
+@include respond-to('medium') {
+	/* CSS Rules targeting most tablets in vertical orientation */
+	.hide-medium {
+		display: none;
+	}
+	.col-md-2 {
+		width: 50%;
+	}
+	.col-md-1 {
+		width: 100%;
+	}
+}
diff --git a/scss/layout/_menu.scss b/scss/layout/_menu.scss
@@ -153,6 +153,14 @@ nav {
   display: none;
 }
 
+nav label {
+	@include respond-to('small') {
+		display: block;
+		width: 100%;
+		cursor: pointer;
+	}
+}
+
 label[for="nav-trigger"] {
   display: none;
   position: absolute;
@@ -163,7 +171,13 @@ label[for="nav-trigger"] {
   width: 30px;
   cursor: pointer;
   background-image: url('/images/nav-trigger.svg');
-  background-size: contain;
+	background-size: contain;
+
+	@include respond-to('small') {
+		display: block;
+		z-index: 91;
+		overflow-y: unset;
+	}
 }
 
 .nav-trigger {

diff --git a/scss/layout/_shame.scss b/scss/layout/_shame.scss
@@ -1,81 +1,2 @@
 // Hacks and workarounds to fix for example:
 // float overrides, grid elements in responsive layout
-
-.float_right {
-	float: right;
-}
-
-.float_left {
-	float: left;
-}
-
-/* Responsive Behavior */
-
-@include respond-to('medium') {
-	/* CSS Rules targeting most tablets in vertical orientation */
-	.hide-medium {
-		display: none;
-	}
-	.col-1-2 {
-		width: 100%;
-	}
-	.col-md-2 {
-		width: 50%;
-	}
-	.col-md-1 {
-		width: 100%;
-	}
-}
-
-@include respond-to('small') {
-	body {
-		margin: 0;
-	}
-	footer {
-		padding: 0 8px;
-		background: rgb(251, 241, 206);
-	}
-	.site-wrap {
-		padding: 0;
-		margin: 0;
-	}
-	.col-1-2 {
-		clear: left;
-		width: 100%;
-	}
-	[class*='col-'] {
-		padding-right: 0;
-	}
-	.topper {
-		border-radius: 0;
-		background: 0;
-	}
-	.container {
-		border-radius: 0;
-	}
-	.col-1-5 {
-		width: 100%;
-	}
-	.col-4-5 {
-		width: 100%;
-	}
-	.header-left {
-		width: 100%;
-	}
-	label[for="nav-trigger"] {
-		display: block;
-		z-index: 91;
-		overflow-y: unset;
-	}
-	.hide-small {
-		display: none;
-	}
-	.col-sm-1 {
-		width: 100%;
-	}
-	nav label {
-		display: block;
-		width: 100%;
-		cursor: pointer;
-	}
-}