diff --git a/README.md b/README.md index b81d8b9..18a56bb 100644 --- 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 index c592db6..1d34f38 100644 --- a/config/monitor.js +++ b/config/monitor.js @@ -1,5 +1,5 @@ const config = { - "left": { + "main": { "type": "image_cycle", "images": [ "qr-git-sg-1.png", @@ -7,7 +7,11 @@ const config = { ], "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 index 7245efa..a13b951 100644 --- a/monitor.html +++ b/monitor.html @@ -8,14 +8,9 @@ Monitor -
-
- -
- -
+
+ + diff --git a/static/css/monitor.css b/static/css/monitor.css index 5c1b59e..45af712 100644 --- 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; }