added mobile device support on start-screen

2 files changed, 72 insertions, 9 deletions

diff --git a/static/css/default.css b/static/css/default.css
index 385f395..6e3af4b 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -26,6 +26,11 @@
   overflow: hidden;
 }
 
+.start-screen svg {
+	height: 100%;
+	width: 100%;
+}
+
 .start-screen a {
 	fill: #008080;
 }
@@ -148,6 +153,10 @@
 	margin-top: 10px;
 }
 
+.mobile {
+	display: none;
+}
+
 @media only screen and (orientation: portrait) {
 	.start-screen {
 		min-height: 200px;
@@ -488,7 +497,7 @@ hr {
     height: auto !important;
 }
 
-.publish-date {
+.publish-date, .attention-message {
 	height: 120px;
 	width: 120px;
 	border-radius: 50%;
@@ -509,16 +518,8 @@ hr {
 }
 
 .attention-message {
-	height: 120px;
-	width: 120px;
-	border-radius: 50%;
 	background-color: #FF7400;
-	text-align: center;
-	line-height: 1em;
-	color: #EFFFFF;
-	float: left;
 	margin-top: -38px;
-	margin-right: 20px;
 }
 
 .attention-message h1 {
diff --git a/static/css/mobile.css b/static/css/mobile.css
new file mode 100644
index 0000000..e6d87ed
--- /dev/null
+++ b/static/css/mobile.css
@@ -0,0 +1,62 @@
+/**
+ *
+ * CSS for mobile devices
+ */
+
+@media only screen and (max-width: 500px) {
+
+	.start-screen svg {
+		display: none;
+		height: 0;
+		width: 0;
+	}
+
+	.start-screen {
+		height: 60vh;
+		width: 100vw;
+		margin: 0;
+		background-color: #4CABAB;
+	}
+
+	.mobile {
+		display: inline;
+	}
+
+	.mobile div {
+		height: 20vh;
+		display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    box-shadow: 0 4px 2px -2px #333;
+	}
+
+	.mobile div:first-child, .mobile div:first-child:hover {
+		background-color: #333;
+	}
+
+	.mobile a, .mobile a:hover {
+		text-decoration: none;
+		font-size: 2em;
+		color: #EFFFFF !important;
+	}
+
+	.mobile div:hover {
+		background-color: #FF7400;
+	}
+
+	.mobile img {
+		height: 15vh;
+		width: 15vh;
+		text-align: center;
+	}
+
+	.wrapper {
+		min-width: 320px
+	}
+
+	.publish-date, .attention-message {
+		float: initial;
+		text-align: center;
+		margin: 0;
+	}
+}
\ No newline at end of file