642 lines
10 KiB
CSS
Executable File
642 lines
10 KiB
CSS
Executable File
:root {
|
|
--c-bg: #000;
|
|
--c-bg-alt: #171717;
|
|
--c-bg-dim: rgba(23, 23, 23, 0.5);
|
|
--c-border: #262626;
|
|
--c-border-mid: #404040;
|
|
--c-border-light: #525252;
|
|
--c-text: #e5e5e5;
|
|
--c-text-dim: #d4d4d4;
|
|
--c-text-muted: #a3a3a3;
|
|
--c-text-faded: #737373;
|
|
--c-white: #fff;
|
|
--c-accent: #0a7;
|
|
--c-red: #ef4444;
|
|
--c-red-dark: #dc2626;
|
|
--c-red-bg: #7f1d1d;
|
|
--c-gold: #ca8a04;
|
|
--c-yellow: #eab308;
|
|
--c-blue: #60a5fa;
|
|
--c-blue-light: #93c5fd;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth
|
|
}
|
|
|
|
body {
|
|
background: var(--c-bg);
|
|
color: var(--c-text);
|
|
font-family: var(--font-mono);
|
|
min-height: 100vh
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-white);
|
|
color: var(--c-bg)
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none
|
|
}
|
|
|
|
ul {
|
|
list-style: none
|
|
}
|
|
|
|
li+li {
|
|
margin-top: .5rem
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--c-bg);
|
|
border-left: 1px solid #333
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--c-white);
|
|
border: 2px solid var(--c-bg)
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #ccc
|
|
}
|
|
|
|
#warp {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
display: none
|
|
}
|
|
|
|
#warp.active {
|
|
display: block
|
|
}
|
|
|
|
.warp-trigger {
|
|
cursor: pointer;
|
|
text-decoration: underline dotted
|
|
}
|
|
|
|
.warp-trigger:hover {
|
|
color: var(--c-accent)
|
|
}
|
|
|
|
.container {
|
|
max-width: 42rem;
|
|
margin: 0 auto;
|
|
border-left: 1px solid var(--c-border);
|
|
border-right: 1px solid var(--c-border);
|
|
min-height: 100vh;
|
|
background: var(--c-bg);
|
|
box-shadow: 0 0 50px rgba(255, 255, 255, .05)
|
|
}
|
|
|
|
header {
|
|
padding: 1rem;
|
|
border-bottom: 2px solid var(--c-white);
|
|
background: var(--c-bg-alt)
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
letter-spacing: -.05em;
|
|
color: var(--c-white);
|
|
margin-bottom: .5rem
|
|
}
|
|
|
|
h1 .subdomain {
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.header-text {
|
|
border-left: 4px solid var(--c-border-light);
|
|
padding-left: 1rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25
|
|
}
|
|
|
|
.header-text p:first-child {
|
|
color: var(--c-text-dim)
|
|
}
|
|
|
|
.header-text p:last-child {
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
background: var(--c-bg);
|
|
border-bottom: 1px solid var(--c-border);
|
|
overflow-x: auto
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
white-space: nowrap
|
|
}
|
|
|
|
nav li {
|
|
flex: 1;
|
|
text-align: center
|
|
}
|
|
|
|
nav a {
|
|
display: block;
|
|
padding: .5rem .75rem;
|
|
font-size: .875rem;
|
|
font-weight: 700;
|
|
border-right: 1px solid var(--c-bg-alt)
|
|
}
|
|
|
|
nav a:hover,
|
|
.service-name:hover,
|
|
.extension-link:hover,
|
|
.donate-link:hover,
|
|
.contact-item a:hover,
|
|
.contact-item span:hover {
|
|
background: var(--c-white);
|
|
color: var(--c-bg)
|
|
}
|
|
|
|
main {
|
|
padding: .75rem 1.25rem
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 2rem;
|
|
scroll-margin-top: 5rem
|
|
}
|
|
|
|
p {
|
|
margin-bottom: .75rem;
|
|
color: var(--c-text-dim)
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
border-bottom: 2px solid var(--c-white);
|
|
padding-bottom: .25rem
|
|
}
|
|
|
|
h3 {
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .2em;
|
|
margin-bottom: .5rem;
|
|
color: var(--c-text-faded);
|
|
border-bottom: 1px solid var(--c-border);
|
|
padding-bottom: .5rem;
|
|
transition: color .2s
|
|
}
|
|
|
|
.group:hover h3 {
|
|
color: var(--c-white)
|
|
}
|
|
|
|
#ddate {
|
|
font-size: .75rem;
|
|
color: var(--c-text-faded);
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
border-bottom: 1px solid var(--c-bg-alt);
|
|
padding-bottom: .5rem;
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1.5rem
|
|
}
|
|
|
|
.services-section-title {
|
|
grid-column: 1 / -1;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid var(--c-border);
|
|
padding-bottom: .5rem
|
|
}
|
|
|
|
.services-section-title .hosts-note {
|
|
font-size: .85em;
|
|
font-weight: 400;
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.services-archived {
|
|
grid-column: 1 / -1
|
|
}
|
|
|
|
.services-archived .archived-summary {
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em;
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.services-archived .archived-grid {
|
|
margin-top: .75rem
|
|
}
|
|
|
|
.services-intro {
|
|
color: var(--c-text-muted);
|
|
font-size: .9rem;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.group.archived-group h3 {
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
details {
|
|
border: 1px solid var(--c-border-mid);
|
|
background: var(--c-bg-dim);
|
|
margin-top: 1.5rem;
|
|
transition: all .2s
|
|
}
|
|
|
|
details[open] {
|
|
background: var(--c-bg-alt);
|
|
border-color: var(--c-white)
|
|
}
|
|
|
|
details[open] summary {
|
|
border-bottom: 1px solid var(--c-border-mid)
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
padding: .75rem;
|
|
font-weight: 700;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center
|
|
}
|
|
|
|
summary:hover {
|
|
background: var(--c-border);
|
|
color: var(--c-white)
|
|
}
|
|
|
|
details .content {
|
|
padding: .75rem
|
|
}
|
|
|
|
details .content p {
|
|
color: var(--c-text-muted);
|
|
margin-bottom: .75rem
|
|
}
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--c-text-dim)
|
|
}
|
|
|
|
.link-item:hover {
|
|
color: var(--c-white);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px
|
|
}
|
|
|
|
.link-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-right: .5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
background: var(--c-border);
|
|
border: 1px solid var(--c-border-light)
|
|
}
|
|
|
|
.extension-link,
|
|
.donate-link {
|
|
display: block;
|
|
padding: .75rem;
|
|
border: 1px solid var(--c-border-mid);
|
|
transition: all .2s;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: .875rem
|
|
}
|
|
|
|
.extension-link {
|
|
padding: .5rem
|
|
}
|
|
|
|
.donate-link {
|
|
border-color: var(--c-border)
|
|
}
|
|
|
|
.extension-link:hover,
|
|
.donate-link:hover {
|
|
border-color: var(--c-white)
|
|
}
|
|
|
|
.contact-item {
|
|
word-break: break-all;
|
|
font-size: .875rem
|
|
}
|
|
|
|
.contact-label {
|
|
display: block;
|
|
color: var(--c-text-faded);
|
|
font-size: .75rem;
|
|
text-transform: uppercase;
|
|
margin-bottom: .25rem
|
|
}
|
|
|
|
.service-link {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: .5rem
|
|
}
|
|
|
|
.service-name {
|
|
font-weight: 700;
|
|
font-size: 1.125rem;
|
|
padding: 0 .25rem;
|
|
margin-left: -.25rem
|
|
}
|
|
|
|
.service-meta {
|
|
font-size: .75rem;
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.service-meta a {
|
|
text-decoration: underline dotted
|
|
}
|
|
|
|
.service-meta a:hover {
|
|
color: var(--c-white)
|
|
}
|
|
|
|
/* Maintenance Status */
|
|
.status-maintenance {
|
|
opacity: 0.5;
|
|
filter: grayscale(1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Back-compat: treat "down" the same as prior "maintenance" */
|
|
.status-down {
|
|
opacity: 0.5;
|
|
filter: grayscale(1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.status-maintenance a {
|
|
cursor: not-allowed;
|
|
text-decoration: line-through !important;
|
|
}
|
|
|
|
.status-down a {
|
|
cursor: not-allowed;
|
|
text-decoration: line-through !important;
|
|
}
|
|
|
|
.maintenance-badge {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--c-red);
|
|
margin-left: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.guest-info {
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--c-border-mid);
|
|
background: rgba(23, 23, 23, .3)
|
|
}
|
|
|
|
.guest-info summary {
|
|
padding: .75rem;
|
|
font-size: .875rem;
|
|
color: var(--c-yellow);
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em
|
|
}
|
|
|
|
.guest-info .content {
|
|
border-top: 1px solid var(--c-border-mid);
|
|
font-size: .875rem
|
|
}
|
|
|
|
.guest-credentials {
|
|
background: var(--c-bg-alt);
|
|
padding: .75rem;
|
|
border-left: 4px solid var(--c-white);
|
|
font-size: .75rem
|
|
}
|
|
|
|
.guest-credentials p {
|
|
margin: 0
|
|
}
|
|
|
|
.guest-credentials .label,
|
|
.guest-note {
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.guest-note {
|
|
font-size: .75rem
|
|
}
|
|
|
|
.crypto-details {
|
|
border-color: var(--c-border);
|
|
background: transparent
|
|
}
|
|
|
|
.crypto-details summary {
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
font-size: .875rem;
|
|
border: 1px solid var(--c-border)
|
|
}
|
|
|
|
.crypto-details summary span:last-child {
|
|
transition: transform .2s
|
|
}
|
|
|
|
.crypto-details[open] summary {
|
|
background: var(--c-white);
|
|
color: var(--c-bg);
|
|
border-color: var(--c-white)
|
|
}
|
|
|
|
.crypto-details[open] summary span:last-child {
|
|
transform: rotate(180deg)
|
|
}
|
|
|
|
.crypto-content {
|
|
margin-top: .5rem;
|
|
background: var(--c-bg);
|
|
border: 1px solid var(--c-border);
|
|
padding: 1rem;
|
|
position: relative
|
|
}
|
|
|
|
.crypto-corner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: .5rem;
|
|
height: .5rem;
|
|
background: var(--c-white)
|
|
}
|
|
|
|
.crypto-item {
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.crypto-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
border-bottom: 1px solid var(--c-border);
|
|
padding-bottom: .25rem;
|
|
margin-bottom: .5rem
|
|
}
|
|
|
|
.crypto-name {
|
|
font-weight: 700;
|
|
color: var(--c-gold)
|
|
}
|
|
|
|
.crypto-label {
|
|
font-size: 10px;
|
|
color: var(--c-border-light)
|
|
}
|
|
|
|
.crypto-address {
|
|
display: block;
|
|
font-size: .75rem;
|
|
word-break: break-all;
|
|
color: var(--c-text-muted);
|
|
user-select: all;
|
|
background: var(--c-bg-dim);
|
|
padding: .5rem;
|
|
border-left: 2px solid var(--c-border)
|
|
}
|
|
|
|
.qr-container {
|
|
width: 100%;
|
|
height: 8rem;
|
|
border: 1px solid var(--c-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTExIiAvPgo8L3N2Zz4=');
|
|
margin-top: .5rem
|
|
}
|
|
|
|
.qr-placeholder {
|
|
background: var(--c-bg);
|
|
padding: .5rem;
|
|
font-size: 10px;
|
|
border: 1px solid var(--c-border);
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.footer-links {
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--c-border)
|
|
}
|
|
|
|
.footer-links h2 {
|
|
text-align: center;
|
|
color: var(--c-text-faded);
|
|
font-size: .875rem;
|
|
margin-bottom: 1.5rem
|
|
}
|
|
|
|
.link-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: .5rem
|
|
}
|
|
|
|
.footer-link {
|
|
padding: .25rem .75rem;
|
|
font-size: .75rem;
|
|
border: 1px solid var(--c-border);
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
transition: transform .2s;
|
|
color: var(--c-text-faded)
|
|
}
|
|
|
|
.footer-link:hover {
|
|
border-color: var(--c-white);
|
|
color: var(--c-white);
|
|
background: var(--c-bg-alt);
|
|
transform: translateY(-.25rem)
|
|
}
|
|
|
|
.footer-link.danger {
|
|
border-color: var(--c-red-bg);
|
|
color: var(--c-red)
|
|
}
|
|
|
|
.footer-link.danger:hover {
|
|
background: var(--c-red-dark);
|
|
color: var(--c-white)
|
|
}
|
|
|
|
footer {
|
|
padding: 1rem;
|
|
border-top: 1px solid var(--c-border);
|
|
text-align: center;
|
|
font-size: .75rem;
|
|
color: var(--c-border-light)
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
h1 {
|
|
font-size: 3rem
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 1rem
|
|
}
|
|
|
|
main {
|
|
padding: 1rem 1.25rem
|
|
}
|
|
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr)
|
|
}
|
|
|
|
.grid.services {
|
|
column-gap: 2rem;
|
|
row-gap: 1.5rem
|
|
}
|
|
} |