sixfold/app.sixfold.org
1
0
Fork 0
Code Activity

Add ribbons for differentiating between sites

Browse source
This commit is contained in:
Ainsley Ellis 2024-11-30 11:00:40 +00:00
parent f3225a9b26
commit 2dbb6a03b0
2 changed files with 69 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
lib/partials/header.php
View file

@ -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>

56
www/assets/css/core.css
View file

@ -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;
}