feat: channel pages

3 files changed, 141 insertions, 2 deletions

diff --git a/public/static/img/icons/door_in.png b/public/static/img/icons/door_in.png
new file mode 100644
index 0000000..d2ee9c6
--- /dev/null
+++ b/public/static/img/icons/door_in.png
diff --git a/public/static/img/icons/door_out.png b/public/static/img/icons/door_out.png
new file mode 100644
index 0000000..466ea2c
--- /dev/null
+++ b/public/static/img/icons/door_out.png
diff --git a/public/static/style.css b/public/static/style.css
index 739e76c..2b6dcdd 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -2,8 +2,13 @@
     --primary-color: #6ee7b7;
     --secondary-color: #59c59a;
 
-    --box-background: #9bbdad;
-    --box-border: #92b3a3;
+    --table-border: #d4d4d4;
+
+    --box-background: #eef5f2;
+    --box-border: #77ac90;
+    --box-tab-background: #a2f3cb;
+    --box-tab-background-disabled: #8ad8b1;
+    --box-tab-foreground: #000000;
 
     --promo-button-background: linear-gradient(0deg, #ff9028 0% 50%, #ffb224 50% 100%);
     --promo-button-background-hover: #ff9028;
@@ -12,6 +17,10 @@
 
     --wiki-content-background: #fff;
     --wiki-sidebar-background: #fefefe;
+
+    --card-background: #eee;
+    --card-border: #bdbdbd;
+    --card-background-hover: #e4e4e4;
 }
 
 * {
@@ -94,6 +103,34 @@ button:hover {
     background: var(--promo-button-background-hover);
 }
 
+table {
+    border-collapse: collapse;
+}
+
+table tr {
+    border-bottom: 1px solid var(--table-border);
+}
+
+table td,
+table th {
+    border-right: 1px solid var(--table-border);
+}
+
+table td:last-child,
+table th:last-child {
+    border-right: none;
+}
+
+table td,
+table th {
+    padding: 4px;
+    text-align: left;
+}
+
+table tr:last-child {
+    border-bottom: none;
+}
+
 .img-gradient {
     position: relative;
     display: inline-block;
@@ -315,6 +352,87 @@ div:has(.wiki-content) {
 }
 
 /**
+--- CHANNELS
+*/
+
+.card {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    gap: 16px;
+    background: var(--card-background);
+    border: 1px solid var(--card-border);
+    text-decoration: none;
+}
+
+a.card:hover {
+    color: unset;
+    background: var(--card-background-hover);
+}
+
+.card .icon {
+    border: 1px solid #000;
+}
+
+.card .icon img {
+    width: 128px;
+    height: auto;
+}
+
+.card p {
+    text-decoration: none;
+}
+
+/**
+--- BOX
+*/
+
+.box,
+.box>.content {
+    padding: 4px;
+    background: var(--box-background);
+    border: 1px solid var(--box-border);
+}
+
+.box:has(.tabs) {
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.box>.tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    gap: 4px;
+}
+
+.tab {
+    background: var(--box-tab-background);
+    color: var(--box-tab-foreground);
+    text-shadow: none;
+    border: 1px solid var(--box-border);
+    border-radius: 0;
+    padding: 2px 8px;
+}
+
+.tabs>.tab {
+    background: var(--box-tab-background-disabled);
+    border-bottom: none;
+}
+
+.tabs>.tab:disabled {
+    background: var(--box-tab-background);
+    padding: 4px 10px;
+    margin-bottom: 0;
+}
+
+.box.red {
+    background: #ff6464;
+    border-color: maroon;
+}
+
+/**
 --- SHORTCUTS
 */
 
@@ -336,11 +454,20 @@ div:has(.wiki-content) {
     flex-direction: row;
 }
 
+.grow {
+    flex-grow: 1;
+}
+
 .grid-2 {
     display: grid;
     grid-template-columns: auto auto;
 }
 
+.grid-4 {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+}
+
 .align-center {
     align-items: center;
 }
@@ -361,6 +488,10 @@ div:has(.wiki-content) {
     text-align: right;
 }
 
+.text-center {
+    text-align: center;
+}
+
 .gap-64 {
     gap: 64px;
 }
@@ -377,6 +508,10 @@ div:has(.wiki-content) {
     gap: 8px;
 }
 
+.p-24 {
+    padding: 24px;
+}
+
 .p-16 {
     padding: 16px;
 }
@@ -387,4 +522,8 @@ div:has(.wiki-content) {
 
 .border {
     border: 0.25px solid rgba(133, 133, 133, 0.25);
+}
+
+.font-small {
+    font-size: 12px;
 }
\ No newline at end of file