Adding custom css and criminallycute.stream text

README.adoc

@@ -0,0 +1,5 @@
+= OWNCAST MODS
+
+= owncast mods
+
+Customisations for OwnCast

README.md

@@ -1,3 +0,0 @@
-# owncast-mods
-
-Customisations for OwnCast

custom-page-content.md

@@ -0,0 +1,42 @@
+---
+
+<div id="tech-specs-flex">
+
+## Tech Specs
+
+<div class="column">
+
+### Personal Computer
+
+Hardware:
+
+* **CPU:** Ryzen 7 3700X @ 4.40GHz
+* **GPU:** ASUS ROG Strix OC Radeon RX 580 8GB
+* **RAM:** 32GB DDR4 3600 MHz
+* **Keyboard:** HyperX Alloy FPS Pro Mechanical
+* **Mouse:** ASUS TUF Gaming M3
+* **Microphone:** TONOR TC-2030 with arm
+* **Headphone:** OneOdio Studio Pro 10B Over Ear
+* **Webcam:** Bluecloud W101RL 1080P with ring light
+
+Software:
+
+* **OS:** Gentoo/Linux x86_64
+* **Kernel:** 5.17.0-gentoo
+* **Desktop:** Plasma 5.24.3
+* **Mesa:** 22.0.0
+* **Broadcast Software:** OBS Studio 27.2.3
+
+</div>
+<div>
+
+### Stream Server
+
+[Hetzner Dedicated Root Server](https://www.hetzner.com/dedicated-rootserver/matrix-ax) "AX41-NVMe":
+* AMD Ryzen 5 3600 (12) @ 3.600GHz
+* 64 GB RAM
+* 2x512 GB NVMe
+* 1Gbit/s network connection
+* Owncast v0.0.11
+
+</div>

custom.css

@@ -0,0 +1,86 @@
+:root {
+	--header-bg-color: #222;
+	--owncast-purple: #333;
+}
+
+#logo-container {
+	background-size: 2em;
+	background-image: url("/logo");
+}
+
+.tab-bar [role="tab"][aria-selected="true"] {
+	background-color: #888;
+}
+
+.tab-bar [role="tab"]:hover {
+	background-color: #444;
+}
+
+.text-indigo-600 {
+	color: #8b9fc3;
+}
+
+.text-gray-500 {
+	color: #666;
+}
+
+.text-gray-700 {
+	color: #aaa;
+}
+
+.text-gray-800 {
+	color: #aaa;
+}
+
+.bg-gray-300 {
+	background-color: #222;
+}
+
+.bg-white {
+	border-color: #aaa;
+	background-color: rgba(26,32,44,var(--bg-opacity));
+}
+
+/* Browser notify content */
+#modal-content-content div {
+	background-color: #444;
+	color: #aaa;
+}
+
+/* Requires important because colour set by javascript */
+#notify-button-container button {
+	background-color: #444 !important;
+	border-color: #666;
+}
+
+/* Invert the bell svg colour */
+#notify-button-container .external-action-button img {
+	filter: invert(100%);
+}
+/*-- end browser notify content */
+
+/* Formatting tech specs for thin vs wide */
+#tech-specs-flex {
+	display: flex;
+}
+
+.column {
+	width: 50%;
+}
+
+@media (max-width: 960px) {
+	#tech-specs-flex {
+		display: initial;
+	}
+
+	.column {
+		width: 100%;
+	}
+}
+
+@media (min-width: 1540px) {
+	.user-content {
+		margin: auto;
+		width: 75%;
+	}
+}