Fix table scroll on mobile (#26)

* Add bare minimum styles for mobile devices tables

This is to address #10

* Remove changes for code blocks

* Make tables scrollable

This includes changes for styles, that lead to artifacts.

* Added points from code review

Author: zemzelett

_sass/variables.scss

@@ -0,0 +1,27 @@
+// This needs to be an odd number, to prevent some slightly thicker line on
+// horizontal scroll (https://github.com/gbdev/rgbds-www/pull/26#issuecomment-989158940)
+$navbar-height: 51px;
+$navbar-border-bottom: 1px;
+$navbar-box-height: $navbar-height + $navbar-border-bottom;
+$navbar-breakpoint: 720px; // Width at which the navbar collapses
+$navbar-bg-color: #e2e8cb;
+
+$logo-padding-top:        10px;
+$logo-padding-bottom:     10px;
+$logo-padding-left:       20px;
+$logo-padding-right:       0px;
+
+$nav-link-padding-top:     7px;
+$nav-link-padding-bottom: 14px;
+$nav-link-padding-left:   10px;
+$nav-link-padding-right:  10px;
+$nav-logo-padding-top:     5px;
+$nav-logo-padding-bottom:  5px;
+
+$max-width: 50em;
+
+/// media-queries
+$mobile-device: 480px;
+
+/// colors
+$main-background: #eee;

css/default.scss

@@ -2,28 +2,7 @@
 ---
 
 @import "monokai";
-
-/// Variable definitions
-
-$navbar-height: 50px;
-$navbar-border-bottom: 1px;
-$navbar-box-height: $navbar-height + $navbar-border-bottom;
-$navbar-breakpoint: 720px; // Width at which the navbar collapses
-$navbar-bg-color: #e2e8cb;
-
-$logo-padding-top:        10px;
-$logo-padding-bottom:     10px;
-$logo-padding-left:       20px;
-$logo-padding-right:       0px;
-
-$nav-link-padding-top:     7px;
-$nav-link-padding-bottom: 14px;
-$nav-link-padding-left:   10px;
-$nav-link-padding-right:  10px;
-$nav-logo-padding-top:     5px;
-$nav-logo-padding-bottom:  5px;
-
-$max-width: 50em;
+@import "variables";
 
 /// General styling
 
@@ -43,6 +22,11 @@ body {
 
 	margin: 0;
 	width: 100%;
+
+@media screen and (max-width: $mobile-device) {
+		// prevent background image leak
+		background: $main-background;
+	}
 }
 
 code, pre {
@@ -88,7 +72,6 @@ body {
 
 	background-color: $navbar-bg-color;
 	border-bottom: 1px solid #ccc;
-	box-shadow: 0 0 20px rgba(204,204,204,0.5);
 }
 
 #logo {
@@ -201,5 +184,5 @@ main {
 	max-width: $max-width;
 	// Prevent text from bumping sides on smaller windows
 	padding: 10px 20px;
-	background: #eee;
+	background: $main-background;
 }

css/doc.scss

@@ -3,6 +3,8 @@ layout: null
 permalink: /css/doc.css
 ---
 
+@import "variables";
+
 #man {
 	// Disable justification (see https://github.com/gbdev/rgbds-www/issues/13)
 	text-align: left;
@@ -32,3 +34,21 @@ permalink: /css/doc.css
 		padding: 2px 7px 0;
 	}
 }
+
+@media screen and (max-width: $mobile-device) {
+	#man {
+		table.Bl-column {
+			// This is to utilize all available space better on mobile
+			margin-left: 0;
+			table-layout: fixed;
+			max-width: 200vw;
+
+			td, th {
+				// break basically everything if space is small
+				overflow-wrap: break-word;
+				// Force min-width in conjunction with word-break setting
+				min-width: 15vw;
+			}
+		}
+	}
+}