html: responsive ui design (I'm unsure whether I like css now)

- project pages 'wrap' differently: the left panel displays above the
  project table when the screen gets too small
- mail articles now don't softwrap, (so we depend on everyone
  hardwrapping at 80 columns now)

2 files changed, 74 insertions, 4 deletions

diff --git a/html/style.css b/html/style.css
index fa89763..2689098 100644
--- a/html/style.css
+++ b/html/style.css
@@ -86,6 +86,8 @@ h1, h2 {
 	padding: 1px;
 	padding-left: 2em;
 	padding-right: 2em;
+	overflow-y: scroll;
+	white-space: nowrap;
 }
 .emailheader {
 	margin-top: 15px;
@@ -111,8 +113,8 @@ h1, h2 {
 .projectpage {
 	#left, #right {
 		float: left;
-		display: inline;
 		margin: 1.5%;
+		box-sizing: border-box;
 	}
 	#left {
 		width: 27%;
@@ -154,11 +156,44 @@ h1, h2 {
 				}
 			}
 			tr #status, tr #type {
-				min-width: 6em;
+				min-width: 4em;
 			}
 		}
 	}
 
+	@media screen and (max-width: 859px) {
+		#left, #right {
+			width: unset;
+			margin-left: auto;
+			margin-right: auto;
+			float: none;
+		}
+		#left {
+			#readme, #stats {
+				width: 48%;
+				margin: 1%;
+				box-sizing: border-box;
+				margin-bottom: 2em;
+			}
+			#readme {
+				float: left;
+			}
+			#stats {
+				float: right;
+			}
+		}
+	}
+	@media screen and (max-width: 489px) {
+		#left #readme, #left #stats {
+			width: inherit;
+			float: none;
+			margin: inherit;
+		}
+		#right {
+			margin-top: 1em;
+		}
+	}
+
 	form {
 		#searchbar {
 			display: flex;
diff --git a/src/acit/html.py b/src/acit/html.py
index 898a447..a459b82 100644
--- a/src/acit/html.py
+++ b/src/acit/html.py
@@ -246,6 +246,8 @@ h1, h2 {
 	padding: 1px;
 	padding-left: 2em;
 	padding-right: 2em;
+	overflow-y: scroll;
+	white-space: nowrap;
 }
 .emailheader {
 	margin-top: 15px;
@@ -271,8 +273,8 @@ h1, h2 {
 .projectpage {
 	#left, #right {
 		float: left;
-		display: inline;
 		margin: 1.5%;
+		box-sizing: border-box;
 	}
 	#left {
 		width: 27%;
@@ -314,11 +316,44 @@ h1, h2 {
 				}
 			}
 			tr #status, tr #type {
-				min-width: 6em;
+				min-width: 4em;
 			}
 		}
 	}
 
+	@media screen and (max-width: 859px) {
+		#left, #right {
+			width: unset;
+			margin-left: auto;
+			margin-right: auto;
+			float: none;
+		}
+		#left {
+			#readme, #stats {
+				width: 48%;
+				margin: 1%;
+				box-sizing: border-box;
+				margin-bottom: 2em;
+			}
+			#readme {
+				float: left;
+			}
+			#stats {
+				float: right;
+			}
+		}
+	}
+	@media screen and (max-width: 489px) {
+		#left #readme, #left #stats {
+			width: inherit;
+			float: none;
+			margin: inherit;
+		}
+		#right {
+			margin-top: 1em;
+		}
+	}
+
 	form {
 		#searchbar {
 			display: flex;