diff --git a/index.html b/index.html index 0714e25..d777e66 100644 --- a/index.html +++ b/index.html @@ -238,19 +238,25 @@ .section-header h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); } .section-header p { max-width: 520px; margin: 0; color: var(--body); } - .project-list { display: grid; gap: 10px; } - .project-row { + .project-list { display: grid; - grid-template-columns: 54px 1fr auto; - gap: 18px; - align-items: center; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + } + + .project-card { + min-height: 218px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); + display: flex; + flex-direction: column; + justify-content: space-between; } - .project-row:hover { border-color: var(--blue); box-shadow: var(--shadow); } + .project-card:hover { border-color: var(--blue); box-shadow: var(--shadow); } + .project-top { display: grid; gap: 12px; } .project-icon { width: 46px; height: 46px; @@ -262,21 +268,21 @@ font-size: 1.18rem; } - .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: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-card:nth-child(5) .project-icon { background: var(--blue); } + .project-card:nth-child(6) .project-icon { background: var(--green); } - .project-row h3 { margin-bottom: 6px; font-size: 1.45rem; } - .project-row p { margin: 0; color: var(--body); } + .project-card h3 { font-size: 1.45rem; } + .project-card p { margin: 0; color: var(--body); } .project-link { + margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 800; - white-space: nowrap; } .mission { @@ -294,6 +300,7 @@ } .mission-panel h3 { margin-bottom: 14px; font-size: 1.55rem; } + .mission-panel p { margin: 0 0 14px; } .mission-panel ul { margin: 0; padding: 0; @@ -362,8 +369,7 @@ @media (max-width: 880px) { .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; } + .project-list { grid-template-columns: 1fr; } .footer-grid, .contact-list { justify-content: start; } } @@ -377,7 +383,7 @@ .nav-links { display: none; } .hero { padding-top: 48px; } .portrait-panel img { aspect-ratio: 16 / 10; } - .project-row { padding: 16px; gap: 13px; } + .project-card { min-height: auto; padding: 16px; } .button { width: 100%; } } @@ -430,49 +436,49 @@
One public map for the active Christ IT work. Internal backend destinations stay off this list.
Technical service marketplace project. Public path: christit.com/tse.
WordPress theme, plugin stack, publishing tools, and ministry site infrastructure.
Self-hosted Git for source, release trees, website history, and public code.