diff --git a/webroot/index.html b/webroot/index.html index e77ff0c46..112f13cbe 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -51,7 +51,7 @@
-
+
-
- {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}, - {{ overallMaxViewerCount }} overall. +
+ {{ streamStatus }} + {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. + Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}. + {{ overallMaxViewerCount }} overall. +
+ +
+ + +
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 4587e9d55..39a157211 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -148,7 +148,7 @@ header h1 { /* ************************************************8 */ -#video-container { +.owncast-video-container { width: 100%; height: auto; display: flex; @@ -157,19 +157,32 @@ header h1 { align-items: center; background-color: black; } -#video-container video { +.owncast-video-container .video-js { + width: 100%; + display: block; + height: calc(100vh - var(--header-height) - 5em); +} +.owncast-video-container video { width: 100%; display: block; min-height: 100% } +/* ************************************************8 */ #stream-info { - padding: .5em; + padding: .5em 2em; text-align: center; font-family: monospace; font-size: .75em; background-color: rgba(0,0,0,.5); border-bottom: 1px solid black; + + flex-direction: row; + justify-content: space-between; +} + +#user-content { + padding: 2em; } /* ************************************************8 */