From 2dbb6a03b07168d54ac1db5ae9ed4e2cc74c23d4 Mon Sep 17 00:00:00 2001
From: Ainsley Ellis <ainsleymae@proton.me>
Date: Sat, 30 Nov 2024 11:00:40 +0000
Subject: [PATCH] Add ribbons for differentiating between sites

---
 lib/partials/header.php | 13 ++++++++++
 www/assets/css/core.css | 56 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/lib/partials/header.php b/lib/partials/header.php
index 9d7c739..0be08ee 100644
--- a/lib/partials/header.php
+++ b/lib/partials/header.php
@@ -11,6 +11,19 @@
         </li>
     </ul>
 </header>
+<ul role="list" class="site-ribbons">
+    <li>
+        <a href="https://sixfold.org">
+            <span>Read</span>
+        </a>
+    </li>
+    <li>
+        <a href="https://app.sixfold.org" aria-current="location">
+            <span>Vote</span>
+        </a>
+    </li>
+</ul>
+
 <header>
    <a href="/"><?php include ABS_PATH . "/assets/lockup.svg" ?></a>
     <nav>
diff --git a/www/assets/css/core.css b/www/assets/css/core.css
index 3d19156..3898e50 100644
--- a/www/assets/css/core.css
+++ b/www/assets/css/core.css
@@ -905,3 +905,59 @@ a .cover:active {
     margin-inline-end: 0.25em;
     font-size: 0.625em;
 }
+
+
+body::before {
+    content: "";
+    inset: 0;
+    width: 100%;
+    height: 100vh;
+    border: 0.25em solid currentColor;
+    position: fixed;
+    z-index: 10;
+    pointer-events: none;
+}
+
+body:has([aria-current="location"][href^="https://app.sixfold.org"])::before {
+    border-color: darkred;
+}
+
+body:has([aria-current="location"][href^="https://sixfold.org"])::before {
+    border-color: rebeccapurple;
+}
+
+.site-ribbons {
+    margin: 0;
+    padding: 0;
+    font-size: 0.75em;
+    position: fixed;
+    z-index: 10;
+    inset-block-start: 0.25em;
+    inset-inline-end: 2em;
+}
+
+.site-ribbons li {
+    display: inline-block;
+    background-color: rebeccapurple;
+    color: snow;
+    clip-path: polygon(0% 0%, 0% 100%, 50% 80%, 100% 100%, 100% 0%);
+    text-align: center;
+    vertical-align: top;
+}
+
+.site-ribbons li:nth-of-type(2) {
+    background-color: darkred;
+}
+
+.site-ribbons a {
+    color: inherit;
+    display: inline-block;
+    padding: 0.125em 1ch 1.125em 1ch;
+    text-decoration: underline;
+}
+
+.site-ribbons [aria-current="location"] {
+    padding-block-end: 2.25em;
+    font-weight: 700;
+    text-decoration: none;
+}