From 6c13791b1aaef685d02bbabab86592d7359b3edd Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sat, 7 May 2022 08:18:35 -0700
Subject: web: add landscape layout

---
 web/static/style.css | 42 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 7 deletions(-)

(limited to 'web/static/style.css')

diff --git a/web/static/style.css b/web/static/style.css
index 9eeb337..c69f7cb 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -23,7 +23,7 @@ div#main {
 	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-areas: 'settings-bar' 'info' 'visits' 'controls';
 }
 
 div#controls {
@@ -345,7 +345,7 @@ div#visits {
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: 2ch repeat(5, 2fr) 2ch;
+	grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch;
 	grid-auto-rows: min-content;
 	grid-row-gap: 0.3em;
 }
@@ -360,9 +360,10 @@ div#visits div {
 	justify-content: center;
 }
 
-div#visits .visit-col1 { grid-column: 2; }
-div#visits .visit-col2 { grid-column: 3; }
-div#visits .visit-col3 { color: #666; grid-column: 4; }
+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 .p0 { color: #e00018; }
 div#visits .p20 { color: #e06000; }
 div#visits .p40 { color: #e09800; }
@@ -370,8 +371,9 @@ div#visits .p60 { color: #e0e018; }
 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; font-family: monospace; white-space: pre; }
-div#visits .visit-col6:not(:empty):before { content: '…'; }
+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; }
 
 .modal {
 	background-color: #000a;
@@ -436,3 +438,29 @@ a:hover {
 		font-size: 3em;
 	}
 }
+
+@media (min-aspect-ratio: 1.6) {
+	div#main {
+		width: 100vw;
+
+		grid-template-columns: 1fr 80vh;
+		grid-template-rows: min-content min-content minmax(0, 3fr);
+		grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
+	}
+
+	div#controls {
+		margin-top: 0;
+	}
+
+	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 { grid-column: 3; }
+	div#visits .visit-col6 { justify-content: center; grid-column: 6; }
+	div#visits .visit-col6:not(:empty):before { content: '\2003'; }
+	div#visits .visit-name1 { display: flex; background-color: #222; grid-column: 1 / span 2; }
+	div#visits .visit-name2 { display: flex; background-color: #222; grid-column: 4 / span 2; }
+}
-- 
cgit v1.2.3-70-g09d2