Very annoying background-image backend POC

a13xrzteach · May 7, 2024 · ec5fd4d · ec5fd4d
1 parent ff66d6e
commit ec5fd4d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -22,8 +22,9 @@ TODO Reword with link
 The format used is
 ```js
 const config = {
-	"left": display_obj,
-	"right": display_obj,
+	"main": display_obj,
+	"footer": display_obj,
+	"sidebar": display_obj,
 };
 ```
 

diff --git a/config/monitor.js b/config/monitor.js
@@ -1,13 +1,17 @@
 const config = {
-	"left": {
+	"main": {
 		"type": "image_cycle",
 		"images": [
 			"qr-git-sg-1.png",
 			"color0524.png",
 		],
 		"image_duration": 1,
 	},
-	"right": {
+	"footer": {
+		"type": "youtube",
+		"ytID": "4i_OY-mnkQM",
+	},
+	"sidebar": {
 		"type": "youtube",
 		"ytID": "4i_OY-mnkQM",
 	},

diff --git a/monitor.html b/monitor.html
@@ -8,14 +8,9 @@
 		<title>Monitor</title>
 	</head>
 	<body>
-		<main>
-			<div id="left">
-				<img src="https://0x0.st/X8oT.png">
-			</div>
-			<div id="right">
-				<img src="https://0x0.st/X8oT.png">
-			</div>
-		</main>
+		<main></main>
+		<footer></footer>
+		<div id="sidebar"></div>
 
 		<script src="/config"></script>
 		<!-- <script src="/static/js/monitor.js"></script> -->

diff --git a/static/css/monitor.css b/static/css/monitor.css
@@ -1,23 +1,49 @@
-/*
-GPT-4 did almost all of the CSS.
-Life is too short to understand how top: 50%
-interacts with transform: translateY(-50%)
-*/
-
-html, body {
-	padding: 0;
+body {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	grid-template-rows: 2fr 1fr;
+
 	margin: 0;
-	height: 100%;
+	height: 100vh;
+
+	align-items: center;
+	justify-items: center;
+
+	background: black;
 }
 
 main {
+	grid-column: 1 / span 1;
+	grid-row: 1 / span 1;
 	height: 100%;
+	width: 100%;
 
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	align-content: center;
+	background: url(https://0x0.st/X8oT.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
 }
 
-img {
-	max-width: 100%;
+footer {
+	grid-column: 1 / span 1;
+	grid-row: 2 / span 1;
+	height: 100%;
+	width: 100%;
+
+	background: url(https://0x0.st/X8oT.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+div#sidebar {
+	grid-column: 2 / span 1;
+	grid-row: 1 / span 2;
+	height: 100%;
+	width: 100%;
+
+	background: url(https://0x0.st/X8oT.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
 }