Mobile

app/res/css/layout.css

@@ -2,13 +2,19 @@
 
 .container {
 	display: grid;
-	grid-template-columns: 1fr calc(100vh / 4);
-	grid-template-rows: auto 1fr;
-	grid-template-areas: "top side" "body side";
+	grid-template: calc(100vw / 4) 5em 1fr / 100%;
+	grid-template-areas: "side" "top" "body";
 	background: var(--clr-light);
 	color: var(--clr-dark);
 }
 
+@media only screen and (min-width: 70em) {
+	.container {
+		grid-template: auto 1fr / 1fr calc(100vh / 4);
+		grid-template-areas: "top side" "body side";
+	}
+}
+
 .container>div {
 	overflow: hidden;
 }

app/res/css/main.css

@@ -17,6 +17,18 @@
 	padding: 0;
 }
 
+@media only screen and (max-width: 70em) {
+	* {
+		--font-xxxl: 4em;
+		--font-xxl: 2.5em;
+		--font-xl: 1.5em;
+		--font-lg: 1.2em;
+		--font-md: 1em;
+		--font-sm: .8em;
+		--font-xs: .6em;
+	}
+}
+
 body {
 	margin: 0;
 	padding: 0;
@@ -31,4 +43,10 @@ body {
 .fill {
 	height: 100%;
 	width: 100%;
+}
+
+.ellipsis {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
 }

app/res/css/screen.css

@@ -26,9 +26,6 @@
 
 #screen .head .title {
 	font-size: var(--font-xl);
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
 	padding: var(--mrg-text) 0em;
 }
 

app/res/css/weather.css

@@ -2,12 +2,17 @@
 
 .weather-container {
 	display: grid;
-	grid-template-rows: repeat(4, 1fr);
-	grid-template-columns: 100%;
+	grid-template: 100% / repeat(4, 1fr);
 	grid-gap: 1em;
 	padding: 1em;
 }
 
+@media only screen and (min-width: 70em) {
+	.weather-container {
+		grid-template: repeat(4, 1fr) / 100%;
+	}
+}
+
 .weather-container .weather-item {
 	background-repeat: no-repeat;
 	background-position: center;

app/res/fonts/Army/import.css

@@ -2,5 +2,5 @@
 	font-family: 'Army';
 	font-weight: normal;
 	font-style: normal;
-	src: local('Army'), url('Army.tff');
+	src: local('Army'), url('Army.ttf');
 }