Refactor index.html and style.css for improved content clarity and design consistency
This commit is contained in:
Keith Casko
@@ -1,16 +1,18 @@
|
||||
:root {
|
||||
--bg: #0b0c0e;
|
||||
--surface: #111316;
|
||||
--surface-2: #17191d;
|
||||
--line: #292c31;
|
||||
--line-light: #3a3e45;
|
||||
--text: #edede8;
|
||||
--muted: #a4a6aa;
|
||||
--dim: #6f7379;
|
||||
--accent: #a986e8;
|
||||
--accent-soft: #c6adef;
|
||||
--green: #81b89b;
|
||||
--max: 1180px;
|
||||
--bg: #0a0e14;
|
||||
--surface: #0f1419;
|
||||
--surface-2: #161b23;
|
||||
--line: #21262d;
|
||||
--line-light: #30363d;
|
||||
--text: #f0f6fc;
|
||||
--muted: #8b949e;
|
||||
--dim: #6e7681;
|
||||
--accent: #58a6ff;
|
||||
--accent-soft: #79c0ff;
|
||||
--green: #3fb950;
|
||||
--red: #f85149;
|
||||
--orange: #fb8500;
|
||||
--max: 1360px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -25,9 +27,11 @@ body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -45,6 +49,8 @@ img {
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(15, 20, 25, 0.4) 0%, transparent 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
@@ -73,17 +79,17 @@ img {
|
||||
gap: 28px;
|
||||
margin-right: 32px;
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.site-header nav a,
|
||||
.text-link {
|
||||
transition: color 160ms ease;
|
||||
transition: color 200ms ease, gap 200ms ease;
|
||||
}
|
||||
|
||||
.site-header nav a:hover,
|
||||
.text-link:hover {
|
||||
color: var(--text);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
@@ -94,12 +100,16 @@ img {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-link:hover {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.text-link span {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
font-size: 0.86rem;
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
@@ -108,17 +118,17 @@ img {
|
||||
margin: 0 auto;
|
||||
padding: 92px 0 84px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.88fr) minmax(450px, 1.12fr);
|
||||
gap: 74px;
|
||||
grid-template-columns: minmax(390px, 0.72fr) minmax(560px, 1.28fr);
|
||||
gap: 56px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kicker,
|
||||
.section-index,
|
||||
.story-label {
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 48px;
|
||||
color: var(--dim);
|
||||
font: 600 0.72rem/1.2 Consolas, "Courier New", monospace;
|
||||
font: 600 0.8rem/1.2 Consolas, "Courier New", monospace;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -135,7 +145,17 @@ img {
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 4px rgba(129, 184, 155, 0.1);
|
||||
box-shadow: 0 0 0 4px rgba(63, 185, 80, 0.2);
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 4px rgba(63, 185, 80, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 8px rgba(63, 185, 80, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -156,13 +176,17 @@ h1 {
|
||||
max-width: 660px;
|
||||
font-size: clamp(3.1rem, 5.5vw, 5.25rem);
|
||||
line-height: 0.98;
|
||||
background: linear-gradient(135deg, #f0f6fc 0%, var(--accent-soft) 60%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-intro {
|
||||
max-width: 620px;
|
||||
margin: 30px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.12rem;
|
||||
font-size: 1.18rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -176,26 +200,31 @@ h1 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 17px;
|
||||
padding: 12px 20px;
|
||||
border: 1px solid var(--line-light);
|
||||
border-radius: 3px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 650;
|
||||
transition: background 160ms ease, border-color 160ms ease;
|
||||
border-radius: 6px;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 600;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
border-color: #5a5f68;
|
||||
border-color: var(--accent);
|
||||
background: rgba(88, 166, 255, 0.1);
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
color: #111014;
|
||||
border-color: var(--accent-soft);
|
||||
background: var(--accent-soft);
|
||||
color: #0a0e14;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2);
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
background: #d2bdf2;
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--accent-soft);
|
||||
box-shadow: 0 6px 16px rgba(88, 166, 255, 0.3);
|
||||
}
|
||||
|
||||
.hero-visual,
|
||||
@@ -207,7 +236,9 @@ h1 {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: #08090b;
|
||||
background: #0f1419;
|
||||
box-shadow: 0 8px 32px rgba(88, 166, 255, 0.08), 0 0 1px rgba(88, 166, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-visual::before {
|
||||
@@ -218,12 +249,15 @@ h1 {
|
||||
top: -24px;
|
||||
right: -22px;
|
||||
z-index: -1;
|
||||
background: #16121d;
|
||||
background: rgba(88, 166, 255, 0.05);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
.hero-visual img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
filter: saturate(0.78);
|
||||
}
|
||||
|
||||
@@ -234,7 +268,7 @@ h1 {
|
||||
gap: 20px;
|
||||
padding-top: 10px;
|
||||
color: var(--dim);
|
||||
font: 0.7rem/1.4 Consolas, "Courier New", monospace;
|
||||
font: 0.78rem/1.5 Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.hero-visual figcaption span {
|
||||
@@ -248,12 +282,21 @@ h1 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.project-facts div {
|
||||
min-height: 128px;
|
||||
padding: 24px 24px 22px 0;
|
||||
min-height: 180px;
|
||||
padding: 48px 24px 48px 0;
|
||||
border-right: 1px solid var(--line);
|
||||
transition: background 300ms ease;
|
||||
background: linear-gradient(180deg, rgba(88, 166, 255, 0.02) 0%, transparent 100%);
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 16px;
|
||||
row-gap: 6px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.project-facts div:not(:first-child) {
|
||||
@@ -264,93 +307,123 @@ h1 {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.project-facts div:hover {
|
||||
background: linear-gradient(180deg, rgba(88, 166, 255, 0.06) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.project-facts span,
|
||||
.story-number,
|
||||
.lesson-list span {
|
||||
display: block;
|
||||
color: var(--accent);
|
||||
font: 0.72rem/1 Consolas, "Courier New", monospace;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project-facts strong {
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
font-size: 1.12rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-facts small {
|
||||
display: block;
|
||||
grid-column: 2;
|
||||
color: var(--dim);
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.section-rule {
|
||||
width: min(calc(100% - 48px), var(--max));
|
||||
margin: 0 auto;
|
||||
padding: 118px 0;
|
||||
padding: 92px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 0.38fr 1fr;
|
||||
gap: 60px;
|
||||
margin-bottom: 62px;
|
||||
grid-template-columns: 280px 1fr;
|
||||
gap: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-heading.compact {
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.closing h2 {
|
||||
max-width: 760px;
|
||||
font-size: clamp(2.5rem, 4.6vw, 4.4rem);
|
||||
line-height: 1.02;
|
||||
line-height: 1.08;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(135deg, #79c0ff 0%, #58a6ff 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-heading > div > p {
|
||||
max-width: 690px;
|
||||
margin: 24px 0 0;
|
||||
margin: 32px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.04rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.architecture-figure {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: #08090b;
|
||||
background: #0f1419;
|
||||
box-shadow: 0 8px 32px rgba(88, 166, 255, 0.08);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.architecture-figure img {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.principles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1px;
|
||||
margin-top: 56px;
|
||||
margin-top: 40px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.principles article:hover {
|
||||
background: linear-gradient(135deg, rgba(88, 166, 255, 0.08) 0%, rgba(63, 185, 80, 0.08) 100%);
|
||||
}
|
||||
|
||||
.principles article {
|
||||
min-height: 230px;
|
||||
padding: 28px;
|
||||
background: var(--bg);
|
||||
transition: background 300ms ease;
|
||||
}
|
||||
|
||||
.principles span {
|
||||
display: block;
|
||||
color: var(--accent);
|
||||
font: 0.7rem Consolas, "Courier New", monospace;
|
||||
font: 0.78rem Consolas, "Courier New", monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.principles h3,
|
||||
.system-story h3,
|
||||
.lesson-list h3 {
|
||||
margin: 30px 0 10px;
|
||||
margin: 40px 0 12px;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 580;
|
||||
letter-spacing: -0.025em;
|
||||
@@ -367,45 +440,63 @@ footer p {
|
||||
|
||||
.principles p {
|
||||
margin: 0;
|
||||
font-size: 0.93rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.system-story {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 1.3fr;
|
||||
gap: 76px;
|
||||
align-items: center;
|
||||
padding: 72px 0;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
gap: 28px 48px;
|
||||
align-items: start;
|
||||
padding: 68px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.system-story.reverse {
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.system-story.reverse .story-copy {
|
||||
order: 2;
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.system-story.reverse .story-images {
|
||||
order: 1;
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.story-copy {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: 280px minmax(0, 760px);
|
||||
column-gap: 48px;
|
||||
}
|
||||
|
||||
.story-number,
|
||||
.story-label {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.story-label {
|
||||
margin: 28px 0 16px;
|
||||
margin: 18px 0 0;
|
||||
color: var(--green);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.system-story h3 {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
margin: 0 0 22px;
|
||||
font-size: clamp(1.8rem, 3vw, 2.75rem);
|
||||
}
|
||||
|
||||
.system-story p:not(.story-number, .story-label) {
|
||||
grid-column: 2;
|
||||
margin: 0;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.system-story ul {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 18px;
|
||||
@@ -413,22 +504,28 @@ footer p {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: var(--dim);
|
||||
font: 0.72rem Consolas, "Courier New", monospace;
|
||||
font: 0.8rem Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.system-story li::before {
|
||||
content: "+ ";
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.story-images {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 24px;
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.story-images img:hover {
|
||||
box-shadow: 0 8px 24px rgba(88, 166, 255, 0.1);
|
||||
}
|
||||
|
||||
.story-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -436,12 +533,23 @@ footer p {
|
||||
border: 1px solid var(--line);
|
||||
background: #08090b;
|
||||
filter: saturate(0.72);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(88, 166, 255, 0.06);
|
||||
transition: box-shadow 300ms ease;
|
||||
}
|
||||
|
||||
.story-images img:only-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.lesson-list {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.lesson-list article:hover {
|
||||
background: rgba(88, 166, 255, 0.05);
|
||||
}
|
||||
|
||||
.lesson-list article {
|
||||
display: grid;
|
||||
grid-template-columns: 70px 0.85fr 1fr;
|
||||
@@ -449,6 +557,7 @@ footer p {
|
||||
align-items: baseline;
|
||||
padding: 31px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition: background 300ms ease, padding 300ms ease;
|
||||
}
|
||||
|
||||
.lesson-list h3,
|
||||
@@ -461,7 +570,7 @@ footer p {
|
||||
}
|
||||
|
||||
.lesson-list p {
|
||||
font-size: 0.92rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.closing {
|
||||
@@ -469,6 +578,7 @@ footer p {
|
||||
margin: 0 auto;
|
||||
padding: 130px 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, rgba(88, 166, 255, 0.02) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.closing h2 {
|
||||
@@ -490,7 +600,7 @@ footer {
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
footer .brand {
|
||||
@@ -554,6 +664,7 @@ footer p {
|
||||
}
|
||||
|
||||
.story-copy {
|
||||
display: block;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user