web: landscape css should be default

1 files changed, 38 insertions, 45 deletions

diff --git a/web/static/style.css b/web/static/style.css
index eee09b2..e1e79d3 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -5,7 +5,7 @@
 body {
 	color-scheme: dark;
 	color: #eee;
-	background-color: #111;
+	background-color: #000;
 	font-family: 'Lato', sans-serif;
 	user-select: none;
 
@@ -17,13 +17,18 @@ div#main {
 	background-color: #1a1a1a;
 
 	height: 100vh;
-	width: min(80vh, 100vw);
+	width: 100vw;
 	margin: 0 auto;
 
 	display: grid;
-	grid-template-columns: 1fr;
-	grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr);
-	grid-template-areas: 'settings-bar' 'info' 'visits' 'controls';
+	grid-template-columns: 80vh 1fr;
+	grid-template-rows: min-content min-content minmax(0, 3fr);
+	grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits';
+}
+
+div#main.right-controls {
+	grid-template-columns: 1fr 80vh;
+	grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
 }
 
 div#controls {
@@ -31,8 +36,6 @@ div#controls {
 
 	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
-	margin: 2px 0 0 0;
-
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: minmax(5em, auto);
@@ -314,10 +317,6 @@ div#settings-bar div.button {
 	padding: 0 0.4em;
 }
 
-#flip-controls-button {
-	display: none;
-}
-
 @media (hover: hover) and (pointer: fine) {
 	div#settings-bar input:hover {
 		background-color: #5c3699;
@@ -342,6 +341,7 @@ div#settings-bar div.button:active {
 div#visits {
 	grid-area: visits;
 
+	background-color: #111;
 	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
 	overflow: auto;
@@ -349,7 +349,7 @@ div#visits {
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch;
+	grid-template-columns: repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) min-content;
 	grid-auto-rows: min-content;
 	grid-row-gap: 0.3em;
 }
@@ -364,10 +364,10 @@ div#visits div {
 	justify-content: center;
 }
 
-div#visits .visit-col1 { grid-column: 3; }
-div#visits .visit-col2 { grid-column: 4; }
-div#visits .visit-col3 { color: #666; grid-column: 5; }
-div#visits .visit-col6 { color: #666; grid-column: 9; }
+div#visits .visit-col1 { grid-column: 1; }
+div#visits .visit-col2 { grid-column: 2; }
+div#visits .visit-col3 { color: #555; grid-column: 3; }
+div#visits .visit-col6 { color: #555; grid-column: 6; }
 div#visits .p0 { color: #e00018; }
 div#visits .p20 { color: #e06000; }
 div#visits .p40 { color: #e09800; }
@@ -376,8 +376,14 @@ div#visits .p100 { color: #78c018; }
 div#visits .p140 { color: #20e018; }
 div#visits .p180 { color: #20e018; font-weight: bold; }
 div#visits .visit-col6 { color: #666; justify-content: left; white-space: nowrap; }
-div#visits .visit-col6:not(:empty):before { content: '…\2003'; }
-div#visits .visit-name1, div#visits .visit-name2 { display: none; }
+div#visits .visit-col6:not(:empty):before { content: '\2003'; }
+div#visits .visit-name1 { grid-column: 1 / span 2; }
+div#visits .visit-name2 { grid-column: 4 / span 2; }
+div#visits .visit-name1, div#visits .visit-name2 {
+	color: #555;
+	border-bottom: 2px solid #555;
+	display: flex;
+}
 
 .modal {
 	background-color: #000a;
@@ -443,42 +449,29 @@ a:hover {
 	}
 }
 
-@media (min-aspect-ratio: 1.6) {
+@media (max-aspect-ratio: 1.6) {
 	div#main {
-		width: 100vw;
-
-		grid-template-columns: 80vh 1fr;
-		grid-template-rows: min-content min-content minmax(0, 3fr);
-		grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits';
-	}
-
-	div#main.right-controls {
-		grid-template-columns: 1fr 80vh;
-		grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
+		width: min(80vh, 100vw);
+		grid-template-columns: 1fr;
+		grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr);
+		grid-template-areas: 'settings-bar' 'info' 'visits' 'controls';
 	}
 
 	#flip-controls-button {
-		display: unset;
+		display: none;
 	}
 
 	div#controls {
-		margin-top: 0;
+		margin-top: 2px;
 	}
 
 	div#visits {
-		background-color: #111;
-		grid-template-columns: repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) min-content;
-	}
-	div#visits .visit-col1 { grid-column: 1; }
-	div#visits .visit-col2 { grid-column: 2; }
-	div#visits .visit-col3 { color: #555; grid-column: 3; }
-	div#visits .visit-col6 { color: #555; justify-content: center; grid-column: 6; }
-	div#visits .visit-col6:not(:empty):before { content: '\2003'; }
-	div#visits .visit-name1 { grid-column: 1 / span 2; }
-	div#visits .visit-name2 { grid-column: 4 / span 2; }
-	div#visits .visit-name1, div#visits .visit-name2 {
-		color: #555;
-		border-bottom: 2px solid #555;
-		display: flex;
+		grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch;
 	}
+	div#visits .visit-col1 { grid-column: 3; }
+	div#visits .visit-col2 { grid-column: 4; }
+	div#visits .visit-col3 { grid-column: 5; }
+	div#visits .visit-col6 { grid-column: 9; justify-content: left; }
+	div#visits .visit-col6:not(:empty):before { content: '…\2003'; }
+	div#visits .visit-name1, div#visits .visit-name2 { display: none; }
 }