Merge branch 'dev' into feature/blog

public/style/colours.css

@@ -7,6 +7,7 @@
     --secondary: #f8e05b;
     --tertiary: #f788fe;
     --links: #5eb2ff;
+    --live: #fd3737;
 }
 
 @media (prefers-color-scheme: light) {

public/style/header.css

@@ -25,7 +25,6 @@ nav {
     flex-grow: 1;
     display: flex;
     gap: .5em;
-    cursor: pointer;
 }
 
 img#header-icon {
@@ -36,19 +35,19 @@ img#header-icon {
 }
 
 #header-text {
-    width: 11em;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    flex-grow: 1;
 }
 
 #header-text h1 {
+    width: fit-content;
     margin: 0;
     font-size: 1em;
 }
 
 #header-text h2 {
+    width: fit-content;
     height: 1.2em;
     line-height: 1.2em;
     margin: 0;
@@ -154,7 +153,7 @@ header ul li a:hover {
         flex-direction: column;
         gap: 1rem;
         border-bottom: 1px solid #888;
-        background: #080808;
+        background: var(--background);
         display: none;
     }
 

public/style/index.css

@@ -96,30 +96,36 @@ hr {
     overflow: visible;
 }
 
-ul.links {
+ul.platform-links {
+    padding-left: 1em;
     display: flex;
-    gap: 1em .5em;
+    gap: .5em;
     flex-wrap: wrap;
 }
 
-ul.links li {
+ul.platform-links li {
     list-style: none;
 }
 
-ul.links li a {
+ul.platform-links li a {
     padding: .4em .5em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
     border: 1px solid var(--links);
     color: var(--links);
     border-radius: 2px;
     background-color: transparent;
-    transition-property: color, border-color, background-color;
+    transition-property: color, border-color, background-color, box-shadow;
     transition-duration: .2s;
     animation-delay: 0s;
     animation: list-item-fadein .2s forwards;
     opacity: 0;
 }
 
-ul.links li a:hover {
+ul.platform-links li a:hover {
     color: #eee;
     border-color: #eee;
     background-color: var(--links) !important;
@@ -127,6 +133,75 @@ ul.links li a:hover {
     box-shadow: 0 0 1em var(--links);
 }
 
+ul.platform-links li a img {
+    height: 1em;
+    width: 1em;
+}
+
+ul#projects {
+    padding: 0;
+    list-style: none;
+}
+
+li.project-item {
+    padding: .5em;
+    border: 1px solid var(--links);
+    margin: 1em 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5em;
+    border-radius: 2px;
+    transition-property: color, border-color, background-color, box-shadow;
+    transition-duration: .2s;
+    cursor: pointer;
+}
+li.project-item a {
+    transition: color .2s linear;
+}
+
+li.project-item:hover {
+    color: #eee;
+    border-color: #eee;
+    background-color: var(--links) !important;
+    text-decoration: none;
+    box-shadow: 0 0 1em var(--links);
+}
+li.project-item:hover a {
+    color: #eee;
+}
+
+li.project-item .project-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+li.project-item img.project-icon {
+    width: 2.5em;
+    height: 2.5em;
+    object-fit: cover;
+    border-radius: 2px;
+}
+
+li.project-item span.project-icon {
+    font-size: 2em;
+    display: block;
+    width: 45px;
+    height: 45px;
+    text-align: center;
+    /* background: #0004; */
+    /* border: 1px solid var(--on-background); */
+    border-radius: 2px;
+}
+
+li.project-item a {
+    text-decoration: none;
+}
+
+li.project-item p {
+    margin: 0;
+}
+
 div#web-buttons {
     margin: 2rem 0;
 }
@@ -148,3 +223,112 @@ div#web-buttons {
     box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
 }
 
+#live-banner {
+    margin: 1em 0 2em 0;
+    padding: 1em;
+    border-radius: 4px;
+    border: 1px solid var(--primary);
+    box-shadow: 0 0 8px var(--primary);
+}
+
+#live-banner p {
+    margin: 0;
+}
+
+.live-highlight {
+    color: var(--primary);
+}
+
+.live-preview {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1em;
+}
+
+.live-preview div:first-of-type {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: .3em;
+}
+
+.live-thumbnail {
+    border-radius: 4px;
+}
+
+.live-button {
+    margin: .2em;
+    padding: .4em .5em;
+    display: inline-block;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    border-radius: 4px;
+    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
+}
+
+.live-button:hover {
+    color: var(--background);
+    background-color: var(--primary);
+    box-shadow: 0 0 8px var(--primary);
+    text-decoration: none;
+}
+
+.live-info {
+    display: flex;
+    flex-direction: column;
+    gap: .3em;
+    overflow-x: hidden;
+}
+
+#live-banner h2 {
+    margin: 0;
+    color: var(--on-background);
+    font-family: 'Inter', sans-serif;
+    font-weight: 800;
+    font-style: italic;
+}
+
+.live-pinger {
+    width: .5em;
+    height: .5em;
+    margin: .1em .2em;
+    display: inline-block;
+    border-radius: 100%;
+    background-color: var(--primary);
+    box-shadow: 0 0 4px var(--primary);
+    animation: live-pinger-pulse 1s infinite alternate ease-in-out;
+}
+
+@keyframes live-pinger-pulse {
+    from {
+        opacity: .8;
+        transform: scale(1.0);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+}
+
+.live-game {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+}
+
+.live-game .live-game-prefix {
+    opacity: .8;
+}
+
+.live-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.live-viewers {
+    opacity: .5;
+}

public/style/main.css

@@ -3,6 +3,7 @@
 @import url("/style/footer.css");
 @import url("/style/prideflag.css");
 @import url("/style/cursor.css");
+@import url("/font/inter/inter.css");
 
 @font-face {
     font-family: "Monaspace Argon";