Layout improvements for small screens

2 files changed, 41 insertions, 5 deletions

diff --git a/resources/pug/finals/index.pug b/resources/pug/finals/index.pug
index 60361d2..546f1c8 100644
--- a/resources/pug/finals/index.pug
+++ b/resources/pug/finals/index.pug
@@ -32,11 +32,11 @@ block content
 					h1
 						| Camil Staps 
 						small.text-muted
-							span.nowrap [kaˈmil stɑps]
+							span [kaˈmil stɑps]
 							span  
-							span.nowrap he/his
+							span he/his
 					p
-						span.tt.obfuscate
+						span.tt.obfuscate.wrap-anywhere
 							| info@c
 							span dummy
 							| amilst
diff --git a/resources/sass/style.scss b/resources/sass/style.scss
index b1a2075..874ed83 100644
--- a/resources/sass/style.scss
+++ b/resources/sass/style.scss
@@ -99,8 +99,8 @@ body {
 	font-size: larger;
 }
 
-.nowrap {
-	white-space: nowrap;
+.wrap-anywhere {
+	word-wrap: anywhere; /* utlity to prevent horizontal scrolling on small screens */
 }
 
 abbr {
@@ -183,6 +183,42 @@ table {
 	margin-bottom: 6px;
 }
 
+@media (max-width: 1269px) {
+	table.main_table {
+		tr {
+			display: block;
+		}
+
+		td:first-child {
+			display: block;
+			font-weight: bold;
+			min-width: unset !important;
+			text-align: initial !important;
+		}
+
+		td.icon {
+			min-width: 1.5em;
+		}
+
+		&.presentations > tbody > tr {
+			padding-bottom: 1ex;
+
+			td:nth-child(2) {
+				display: inline;
+				padding-right: 0;
+
+				&:after {
+					content: ': ';
+				}
+			}
+
+			td:last-child {
+				display: inline;
+			}
+		}
+	}
+}
+
 span.sc {
 	font-variant-caps: small-caps;
 }