From 7b7c1b0a75261b9c648a8bfab5c7bcea36588e33 Mon Sep 17 00:00:00 2001 From: Mason Payne Date: Sun, 7 Jul 2024 20:19:06 -0600 Subject: [PATCH] make a prototype title webpage --- .idea/.gitignore | 8 +++++++ .idea/live-video-overlay.iml | 9 ++++++++ .idea/modules.xml | 8 +++++++ go.mod | 3 +++ index.html | 16 ++++++++++++++ styles.css | 41 ++++++++++++++++++++++++++++++++++++ 6 files changed, 85 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/live-video-overlay.iml create mode 100644 .idea/modules.xml create mode 100644 go.mod create mode 100644 index.html create mode 100644 styles.css diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/live-video-overlay.iml b/.idea/live-video-overlay.iml new file mode 100644 index 0000000..5e764c4 --- /dev/null +++ b/.idea/live-video-overlay.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..4c3d11f --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/go.mod b/go.mod new file mode 100644 index 0000000..b98d4fb --- /dev/null +++ b/go.mod @@ -0,0 +1,3 @@ +module live-video-overlay + +go 1.21 diff --git a/index.html b/index.html new file mode 100644 index 0000000..bcd21af --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + Live Title for OBS + + + +
+
+ Your Live Title +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..64f3240 --- /dev/null +++ b/styles.css @@ -0,0 +1,41 @@ +html, body { + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: transparent; + overflow: hidden; +} + +.container { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + padding: 20px; + box-sizing: border-box; +} + +.title { + background-color: rgba(0, 0, 0, 0.5); + color: white; + padding: 10px 20px; + border-radius: 5px; + font-size: 24px; +} + +@media screen and (min-aspect-ratio: 16/9) { + .container { + width: 100%; + height: 56.25vw; /* 100 / 16 * 9 = 56.25 */ + } +} + +@media screen and (max-aspect-ratio: 16/9) { + .container { + width: 177.78vh; /* 100 / 9 * 16 = 177.78 */ + height: 100%; + } +}