From e16875333fe13ccbf28a82a99eb1b71e0102bae0 Mon Sep 17 00:00:00 2001 From: Jason Eugene Garrison Date: Sat, 11 Jul 2026 08:51:04 -0500 Subject: [PATCH] Simplify Christ IT homepage directory --- index.html | 342 +++++++++++++++++++++++------------------------------ 1 file changed, 146 insertions(+), 196 deletions(-) diff --git a/index.html b/index.html index 64da075..0714e25 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Christ IT | Practical Technology for Kingdom Work - + @@ -16,18 +16,17 @@ :root { --bg: #fbfaf7; --surface: #ffffff; - --surface-soft: #f2f6f7; - --ink: #172033; - --body: #536070; - --muted: #7d8792; - --line: #dfe5e8; + --surface-soft: #f1f6f5; + --ink: #151d2f; + --body: #526071; + --muted: #7b8794; + --line: #dce4e7; --nav: rgba(251, 250, 247, 0.94); - --blue: #0f63b6; + --blue: #1265b3; --green: #1e7a5f; --orange: #d66b1f; - --red: #a43838; - --shadow: 0 14px 40px rgba(23, 32, 51, 0.10); - --logo: #172033; + --red: #a43e3e; + --shadow: 0 14px 38px rgba(21, 29, 47, 0.10); } [data-theme="dark"] { @@ -44,7 +43,6 @@ --orange: #ffad66; --red: #ef8f8f; --shadow: 0 16px 42px rgba(0, 0, 0, 0.34); - --logo: #f5f7fb; } * { box-sizing: border-box; } @@ -71,14 +69,43 @@ } .nav-inner { - min-height: 76px; + min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } - .brand-logo svg { width: 210px; height: auto; display: block; } + .brand-logo { + display: inline-flex; + align-items: center; + gap: 10px; + color: var(--ink); + font-family: "Oswald", Impact, sans-serif; + font-size: 2.1rem; + font-weight: 700; + line-height: 1; + text-transform: uppercase; + } + + .brand-cross { + position: relative; + width: 26px; + height: 32px; + flex: 0 0 auto; + } + + .brand-cross::before, + .brand-cross::after { + content: ""; + position: absolute; + border-radius: 4px; + background: var(--blue); + } + + .brand-cross::before { width: 10px; height: 32px; left: 8px; top: 0; } + .brand-cross::after { width: 26px; height: 10px; left: 0; top: 10px; } + .nav-actions { display: flex; align-items: center; gap: 18px; } .nav-links { display: flex; align-items: center; gap: 18px; font-size: 0.94rem; font-weight: 700; color: var(--body); } .nav-links a:hover { color: var(--blue); } @@ -108,16 +135,16 @@ [data-theme="dark"] .theme-toggle::after { transform: translateX(20px); background: var(--blue); } .hero { - padding: 74px 0 42px; + padding: 68px 0 50px; border-bottom: 1px solid var(--line); background: - linear-gradient(135deg, rgba(15, 99, 182, 0.09), transparent 36%), - linear-gradient(315deg, rgba(30, 122, 95, 0.12), transparent 34%); + linear-gradient(135deg, rgba(18, 101, 179, 0.08), transparent 36%), + linear-gradient(315deg, rgba(30, 122, 95, 0.11), transparent 34%); } .hero-grid { display: grid; - grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr); + grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 54px; align-items: center; } @@ -134,30 +161,29 @@ } h1, h2, h3 { + margin: 0; color: var(--ink); font-family: "Oswald", Impact, sans-serif; line-height: 1.05; text-transform: uppercase; - margin: 0; } h1 { - font-size: clamp(3.1rem, 8vw, 6.4rem); - max-width: 780px; + max-width: 760px; margin-top: 18px; - letter-spacing: 0; + font-size: clamp(3rem, 7.8vw, 6.1rem); } .hero-copy { - max-width: 720px; + max-width: 710px; margin: 24px 0 0; - font-size: clamp(1.06rem, 2vw, 1.28rem); - color: var(--body); - border-left: 5px solid var(--orange); padding-left: 22px; + border-left: 5px solid var(--orange); + color: var(--body); + font-size: clamp(1.06rem, 2vw, 1.25rem); } - .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } + .button-row, .contact-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .button { display: inline-flex; align-items: center; @@ -196,12 +222,7 @@ object-position: center 35%; } - .portrait-caption { - padding: 18px 20px 20px; - display: grid; - gap: 5px; - } - + .portrait-caption { padding: 18px 20px 20px; display: grid; gap: 5px; } .portrait-caption strong { color: var(--ink); font-size: 1.05rem; } .portrait-caption span { color: var(--muted); font-size: 0.92rem; } @@ -217,26 +238,19 @@ .section-header h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); } .section-header p { max-width: 520px; margin: 0; color: var(--body); } - .project-grid { + .project-list { display: grid; gap: 10px; } + .project-row { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; - } - - .project-card { - min-height: 236px; - padding: 24px; + grid-template-columns: 54px 1fr auto; + gap: 18px; + align-items: center; + padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); - display: flex; - flex-direction: column; - justify-content: space-between; - box-shadow: 0 1px 0 rgba(23, 32, 51, 0.04); } - .project-card:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); box-shadow: var(--shadow); } - .project-top { display: grid; gap: 13px; } + .project-row:hover { border-color: var(--blue); box-shadow: var(--shadow); } .project-icon { width: 46px; height: 46px; @@ -248,80 +262,55 @@ font-size: 1.18rem; } - .project-card:nth-child(2) .project-icon { background: var(--green); } - .project-card:nth-child(3) .project-icon { background: var(--orange); } - .project-card:nth-child(4) .project-icon { background: var(--red); } + .project-row:nth-child(2) .project-icon { background: var(--green); } + .project-row:nth-child(3) .project-icon { background: var(--orange); } + .project-row:nth-child(4) .project-icon { background: var(--red); } + .project-row:nth-child(5) .project-icon { background: var(--blue); } + .project-row:nth-child(6) .project-icon { background: var(--green); } - .project-card h3 { font-size: 1.55rem; } - .project-card p { margin: 0; color: var(--body); } + .project-row h3 { margin-bottom: 6px; font-size: 1.45rem; } + .project-row p { margin: 0; color: var(--body); } .project-link { - margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 800; + white-space: nowrap; } - .sites-band { - background: var(--surface-soft); - border-block: 1px solid var(--line); - } - - .site-list { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 12px; - } - - .site-link { - min-height: 96px; - padding: 18px; - border: 1px solid var(--line); - border-radius: 8px; - background: var(--surface); - display: flex; - flex-direction: column; - justify-content: center; - gap: 5px; - } - - .site-link strong { color: var(--ink); } - .site-link span { color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; } - .site-link:hover { border-color: var(--orange); transform: translateY(-1px); } - .mission { display: grid; - grid-template-columns: 0.9fr 1.1fr; + grid-template-columns: 0.85fr 1.15fr; gap: 38px; align-items: center; } - .mission-mark { - min-height: 290px; - border-radius: 8px; + .mission-panel { + padding: 28px; border: 1px solid var(--line); - background: - linear-gradient(rgba(23, 32, 51, 0.18), rgba(23, 32, 51, 0.18)), - url("jason2026.jpg") center 42% / cover; - display: flex; - align-items: end; - padding: 24px; - color: #fff; - box-shadow: var(--shadow); + border-radius: 8px; + background: var(--surface-soft); } - .mission-mark span { - display: inline-flex; - align-items: center; + .mission-panel h3 { margin-bottom: 14px; font-size: 1.55rem; } + .mission-panel ul { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 12px; + } + + .mission-panel li { + display: grid; + grid-template-columns: 20px 1fr; gap: 10px; - padding: 10px 12px; - border-radius: 6px; - background: rgba(16, 20, 28, 0.72); - font-weight: 800; + color: var(--body); } - .mission-copy h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 18px; } + .mission-panel i { color: var(--green); padding-top: 4px; } + .mission-copy h2 { margin-bottom: 18px; font-size: clamp(2.2rem, 5vw, 3.8rem); } .mission-copy p { margin: 0 0 16px; font-size: 1.06rem; } footer { @@ -342,7 +331,6 @@ font-family: "Oswald", Impact, sans-serif; font-size: 2rem; font-weight: 700; - letter-spacing: 0; } .contact-list { @@ -372,36 +360,24 @@ } @media (max-width: 880px) { - .hero-grid, - .mission, - .footer-grid { - grid-template-columns: 1fr; - } - - .section-header { - align-items: start; - flex-direction: column; - } - - .project-grid, - .site-list { - grid-template-columns: 1fr; - } - - .footer-grid, - .contact-list { - justify-content: start; - } + .hero-grid, .mission, .footer-grid { grid-template-columns: 1fr; } + .section-header { align-items: start; flex-direction: column; } + .project-row { grid-template-columns: 46px 1fr; } + .project-link { grid-column: 2; } + .footer-grid, .contact-list { justify-content: start; } } @media (max-width: 640px) { .container { width: min(100% - 28px, 1120px); } .nav-inner { min-height: 66px; } - .brand-logo svg { width: 168px; } + .brand-logo { font-size: 1.72rem; } + .brand-cross { width: 22px; height: 28px; } + .brand-cross::before { width: 9px; height: 28px; left: 7px; } + .brand-cross::after { width: 22px; height: 9px; top: 9px; } .nav-links { display: none; } .hero { padding-top: 48px; } .portrait-panel img { aspect-ratio: 16 / 10; } - .project-card { min-height: auto; } + .project-row { padding: 16px; gap: 13px; } .button { width: 100%; } } @@ -410,21 +386,12 @@