pull the terminal styling back and add an ASCII backdrop
The first pass applied terminal decoration to everything, which read as costume rather than design. Strip it back to a few deliberate cues and let an animated backdrop carry the character instead: - Drop the prefix glyphs from links, tags, nav items, badges and headings, and restore plain section names in place of snake_case. - Keep one prompt in the hero, the ~/ on the wordmark, ISO dates and status dots; everything else is ordinary type. - Restore depth: acrylic surfaces over soft radial light, 6px radii, and an accent glow on the primary action and status dots. - Draw a dithered ASCII field behind the page. A fixed per-cell dither value decides which cells are lit so coverage stays even, while slow interfering waves move brightness through it. It idles when the tab is hidden and stays still under prefers-reduced-motion. - Remove the nested panel boxes on the projects page and size the entry page to its article column. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed
1 parent
8595290318
commit
54c00bf16f
10 files changed
+693
-698
No files matched your search
+179
-248
@@ -1,40 +1,47 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
|
||||
|
||||
:root {
|
||||
--theme: #0c0d10;
|
||||
--surface: #111318;
|
||||
--surface-alt: #15171d;
|
||||
--bar: #16181e;
|
||||
--primary: #c9cdd6;
|
||||
--bright: #eef1f6;
|
||||
--theme: #0b0c0f;
|
||||
--surface: rgba(21, 23, 28, 0.58);
|
||||
--surface-raised: rgba(28, 31, 37, 0.62);
|
||||
--bar: rgba(255, 255, 255, 0.035);
|
||||
--primary: #cbcfd8;
|
||||
--bright: #f1f3f7;
|
||||
--secondary: #eb5234;
|
||||
--accent: #ff005a;
|
||||
--ok: #7fb069;
|
||||
--muted: #767d8a;
|
||||
--border: #262a33;
|
||||
--border-strong: #3a404c;
|
||||
--grid: rgba(255, 255, 255, 0.022);
|
||||
--selection: rgba(235, 82, 52, 0.28);
|
||||
--muted: #7b8290;
|
||||
--border: rgba(255, 255, 255, 0.09);
|
||||
--border-strong: rgba(255, 255, 255, 0.18);
|
||||
--glow: rgba(235, 82, 52, 0.16);
|
||||
--shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
|
||||
--selection: rgba(235, 82, 52, 0.3);
|
||||
--ascii-base: #8e97a8;
|
||||
--ascii-accent: #eb5234;
|
||||
--radius: 6px;
|
||||
--mono:
|
||||
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
|
||||
Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
body.light {
|
||||
--theme: #e7e7e2;
|
||||
--surface: #f2f2ee;
|
||||
--surface-alt: #ebebe5;
|
||||
--bar: #ddddd6;
|
||||
--primary: #24262b;
|
||||
--bright: #0e0f12;
|
||||
--theme: #e9e9e4;
|
||||
--surface: rgba(255, 255, 255, 0.56);
|
||||
--surface-raised: rgba(255, 255, 255, 0.72);
|
||||
--bar: rgba(0, 0, 0, 0.035);
|
||||
--primary: #2a2d33;
|
||||
--bright: #101216;
|
||||
--secondary: #c8401f;
|
||||
--accent: #c20046;
|
||||
--ok: #4b7a3a;
|
||||
--muted: #6a6e76;
|
||||
--border: #cbcbc2;
|
||||
--border-strong: #a9a9a0;
|
||||
--grid: rgba(0, 0, 0, 0.03);
|
||||
--muted: #6b6f78;
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
--border-strong: rgba(0, 0, 0, 0.2);
|
||||
--glow: rgba(200, 64, 31, 0.14);
|
||||
--shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
|
||||
--selection: rgba(200, 64, 31, 0.22);
|
||||
--ascii-base: #6f7682;
|
||||
--ascii-accent: #c8401f;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -63,21 +70,38 @@ body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
transition:
|
||||
background-color 0.25s linear,
|
||||
color 0.25s linear;
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Faint graph-paper grid, fixed so it reads as a backdrop, not content. */
|
||||
/* Soft light behind the ASCII field, so the page has depth without gloss. */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(var(--grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||||
background-size: 28px 28px;
|
||||
background:
|
||||
radial-gradient(circle at 18% 12%, var(--glow), transparent 42%),
|
||||
radial-gradient(circle at 82% 8%, rgba(255, 0, 90, 0.07), transparent 38%),
|
||||
radial-gradient(
|
||||
circle at 50% 95%,
|
||||
rgba(255, 255, 255, 0.035),
|
||||
transparent 46%
|
||||
);
|
||||
filter: blur(28px);
|
||||
}
|
||||
|
||||
#ascii-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
body.light #ascii-bg {
|
||||
opacity: 0.17;
|
||||
}
|
||||
|
||||
body.js-stop-transition * {
|
||||
@@ -108,7 +132,7 @@ h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
@@ -116,9 +140,10 @@ a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.12s linear,
|
||||
background-color 0.12s linear,
|
||||
border-color 0.12s linear;
|
||||
color 0.18s ease,
|
||||
background-color 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@@ -141,10 +166,13 @@ pre {
|
||||
/* ---------------------------------------------------------------- header */
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bar);
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -155,7 +183,7 @@ pre {
|
||||
gap: 12px;
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
min-height: 46px;
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -167,11 +195,10 @@ pre {
|
||||
.logo a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--bright);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.logo a::before {
|
||||
@@ -183,11 +210,10 @@ pre {
|
||||
.logo a img {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
border-radius: 2px !important;
|
||||
border-radius: 3px !important;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid var(--border-strong);
|
||||
filter: grayscale(0.25);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.logo a:hover {
|
||||
@@ -198,56 +224,28 @@ pre {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
gap: 4px;
|
||||
gap: 22px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
text-transform: lowercase;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 13.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#menu a::before {
|
||||
content: "[";
|
||||
color: var(--border-strong);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#menu a::after {
|
||||
content: "]";
|
||||
color: var(--border-strong);
|
||||
margin-left: 2px;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
#menu a:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
#menu a:hover::before,
|
||||
#menu a:hover::after {
|
||||
color: var(--secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
body[data-page="home"] #home-link a,
|
||||
body[data-page="about"] #about-link a,
|
||||
body[data-page="projects"] #projects-link a {
|
||||
color: var(--bright);
|
||||
background: var(--surface-alt);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
body[data-page="home"] #home-link a::before,
|
||||
body[data-page="about"] #about-link a::before,
|
||||
body[data-page="projects"] #projects-link a::before,
|
||||
body[data-page="home"] #home-link a::after,
|
||||
body[data-page="about"] #about-link a::after,
|
||||
body[data-page="projects"] #projects-link a::after {
|
||||
color: var(--secondary);
|
||||
border-bottom-color: var(--secondary);
|
||||
}
|
||||
|
||||
.logo-switches {
|
||||
@@ -257,27 +255,23 @@ body[data-page="projects"] #projects-link a::after {
|
||||
|
||||
button#theme-toggle {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border: 0;
|
||||
color: var(--muted);
|
||||
padding: 2px 5px;
|
||||
height: 24px;
|
||||
padding: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.12s linear,
|
||||
border-color 0.12s linear;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
button#theme-toggle svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
button#theme-toggle:hover {
|
||||
color: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
body.light #moon {
|
||||
@@ -291,22 +285,18 @@ body:not(.light) #sun {
|
||||
.menu.cta {
|
||||
display: none;
|
||||
margin: 0;
|
||||
text-transform: lowercase;
|
||||
padding: 2px 8px;
|
||||
padding: 4px 10px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.menu.cta::before {
|
||||
content: "≡ ";
|
||||
color: var(--secondary);
|
||||
background: var(--bar);
|
||||
}
|
||||
|
||||
.menu.cta:hover {
|
||||
color: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------- overlay */
|
||||
@@ -316,14 +306,20 @@ body:not(.light) #sun {
|
||||
inset: 0;
|
||||
z-index: 2147483647;
|
||||
isolation: isolate;
|
||||
background: var(--theme);
|
||||
background: rgba(11, 12, 15, 0.82);
|
||||
backdrop-filter: blur(18px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(130%);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.15s linear,
|
||||
visibility 0.15s linear;
|
||||
opacity 0.2s ease,
|
||||
visibility 0.2s ease;
|
||||
}
|
||||
|
||||
body.light .overlay {
|
||||
background: rgba(233, 233, 228, 0.86);
|
||||
}
|
||||
|
||||
.overlay--active {
|
||||
@@ -341,31 +337,21 @@ body:not(.light) #sun {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.overlay a {
|
||||
color: var(--primary);
|
||||
text-transform: lowercase;
|
||||
padding: 10px 18px;
|
||||
font-size: 1.3rem;
|
||||
padding: 12px 20px;
|
||||
font-size: 1.4rem;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: min(320px, 80%);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.overlay a::before {
|
||||
content: "> ";
|
||||
color: var(--secondary);
|
||||
text-align: center;
|
||||
width: min(300px, 80%);
|
||||
}
|
||||
|
||||
.overlay a:hover,
|
||||
.overlay a:focus {
|
||||
color: var(--bright);
|
||||
border-color: var(--secondary);
|
||||
background: var(--surface-alt);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.overlay .close {
|
||||
@@ -373,19 +359,18 @@ body:not(.light) #sun {
|
||||
z-index: 3;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
font-size: 26px;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
font-family: var(--mono);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.overlay .close:hover {
|
||||
color: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
body.menu-open {
|
||||
@@ -412,105 +397,83 @@ body.menu-open .overlay * {
|
||||
.page-shell {
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding-bottom: 28px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- terminal window */
|
||||
|
||||
.main {
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 34px auto 0;
|
||||
padding-bottom: 28px;
|
||||
margin: 0 auto;
|
||||
padding: 0 0 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 52px);
|
||||
}
|
||||
|
||||
.term {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
body[data-page="home"] .main {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
body[data-page="home"] .term {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body[data-page="home"] .term__body {
|
||||
flex: 1;
|
||||
align-content: start;
|
||||
backdrop-filter: blur(18px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.term__bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 5px 10px;
|
||||
gap: 7px;
|
||||
padding: 9px 14px;
|
||||
background: var(--bar);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.term__dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-strong);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.term__dot:first-child {
|
||||
background: rgba(235, 82, 52, 0.75);
|
||||
}
|
||||
|
||||
.term__title {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.term__title b {
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.term__dots {
|
||||
letter-spacing: 2px;
|
||||
color: var(--border-strong);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.term__body {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 26px;
|
||||
padding: 22px 22px 18px;
|
||||
gap: 34px;
|
||||
padding: 34px 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.term__avatar {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 0;
|
||||
filter: grayscale(0.3) contrast(1.03);
|
||||
}
|
||||
|
||||
.term__avatar-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.term__avatar-caption {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
box-shadow:
|
||||
var(--shadow),
|
||||
0 0 0 6px rgba(235, 82, 52, 0.05);
|
||||
}
|
||||
|
||||
.term__stream {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.line + .cmd {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.cmd {
|
||||
margin: 0 0 18px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -518,98 +481,82 @@ body[data-page="home"] .term__body {
|
||||
.cmd::before {
|
||||
content: "$ ";
|
||||
color: var(--secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
|
||||
font-size: clamp(1.7rem, 3.6vw, 2.4rem);
|
||||
font-weight: 700;
|
||||
margin: 2px 0 0;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
.des {
|
||||
margin: 2px 0 0;
|
||||
font-size: 0.94rem;
|
||||
margin: 10px 0 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hero-description-secondary {
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-alt);
|
||||
color: var(--primary);
|
||||
padding: 2px 8px;
|
||||
background: var(--bar);
|
||||
color: var(--muted);
|
||||
border-radius: var(--radius);
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.badge::before {
|
||||
content: "+ ";
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 6px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--surface-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bar);
|
||||
color: var(--primary);
|
||||
padding: 5px 12px;
|
||||
padding: 7px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
content: ">\00a0";
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--secondary);
|
||||
background: var(--surface);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
border-color: var(--secondary);
|
||||
border-color: rgba(235, 82, 52, 0.5);
|
||||
color: var(--bright);
|
||||
background: rgba(235, 82, 52, 0.14);
|
||||
box-shadow: 0 6px 22px rgba(235, 82, 52, 0.14);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--secondary);
|
||||
color: #0c0d10;
|
||||
}
|
||||
|
||||
.button-primary:hover::before {
|
||||
color: #0c0d10;
|
||||
}
|
||||
|
||||
.prompt-end {
|
||||
margin: 14px 0 0;
|
||||
color: var(--secondary);
|
||||
font-weight: 700;
|
||||
border-color: var(--secondary);
|
||||
background: rgba(235, 82, 52, 0.22);
|
||||
box-shadow: 0 8px 28px rgba(235, 82, 52, 0.22);
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0.6em;
|
||||
width: 0.55em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
background: var(--secondary);
|
||||
@@ -630,12 +577,13 @@ body[data-page="home"] .term__body {
|
||||
.social-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.social-icons a svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -648,49 +596,36 @@ body[data-page="home"] .term__body {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------- status footer */
|
||||
/* ---------------------------------------------------------------- footer */
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
background: var(--bar);
|
||||
padding: 14px 18px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer p::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--ok);
|
||||
margin-right: 8px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.footer .social-icons {
|
||||
padding: 6px 12px;
|
||||
border-left: 1px solid var(--border);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loading-state::before {
|
||||
content: "… ";
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- responsive */
|
||||
/* ------------------------------------------------------------ responsive */
|
||||
|
||||
@media only screen and (max-width: 860px) {
|
||||
#menu,
|
||||
@@ -702,19 +637,16 @@ body[data-page="home"] .term__body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav {
|
||||
min-height: 42px;
|
||||
.main {
|
||||
min-height: auto;
|
||||
margin-top: 28px;
|
||||
width: min(1120px, calc(100% - 20px));
|
||||
}
|
||||
|
||||
.term__body {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
padding: 18px 16px 14px;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 22px;
|
||||
width: min(1120px, calc(100% - 20px));
|
||||
padding: 26px 20px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
@@ -726,8 +658,7 @@ body[data-page="home"] .term__body {
|
||||
}
|
||||
|
||||
.footer .social-icons {
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user