christ-it-websites/christit.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use cards for Christ IT project directory

Browse Source
This commit is contained in:
Jason Eugene Garrison
2026-07-11 10:36:17 -05:00
parent e16875333f
commit 9b560be0ec
1 changed files with 46 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+40 -33
View File
@@ -238,19 +238,25 @@
.section-header h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); } .section-header h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.section-header p { max-width: 520px; margin: 0; color: var(--body); } .section-header p { max-width: 520px; margin: 0; color: var(--body); }
.project-list { display: grid; gap: 10px; } .project-list {
.project-row {
display: grid; display: grid;
grid-template-columns: 54px 1fr auto; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px; gap: 14px;
align-items: center; }
.project-card {
min-height: 218px;
padding: 20px; padding: 20px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 8px; border-radius: 8px;
background: var(--surface); 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 { .project-icon {
width: 46px; width: 46px;
height: 46px; height: 46px;
@@ -262,21 +268,21 @@
font-size: 1.18rem; font-size: 1.18rem;
} }
.project-row:nth-child(2) .project-icon { background: var(--green); } .project-card:nth-child(2) .project-icon { background: var(--green); }
.project-row:nth-child(3) .project-icon { background: var(--orange); } .project-card:nth-child(3) .project-icon { background: var(--orange); }
.project-row:nth-child(4) .project-icon { background: var(--red); } .project-card:nth-child(4) .project-icon { background: var(--red); }
.project-row:nth-child(5) .project-icon { background: var(--blue); } .project-card:nth-child(5) .project-icon { background: var(--blue); }
.project-row:nth-child(6) .project-icon { background: var(--green); } .project-card:nth-child(6) .project-icon { background: var(--green); }
.project-row h3 { margin-bottom: 6px; font-size: 1.45rem; } .project-card h3 { font-size: 1.45rem; }
.project-row p { margin: 0; color: var(--body); } .project-card p { margin: 0; color: var(--body); }
.project-link { .project-link {
margin-top: 20px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: var(--blue); color: var(--blue);
font-weight: 800; font-weight: 800;
white-space: nowrap;
} }
.mission { .mission {
@@ -294,6 +300,7 @@
} }
.mission-panel h3 { margin-bottom: 14px; font-size: 1.55rem; } .mission-panel h3 { margin-bottom: 14px; font-size: 1.55rem; }
.mission-panel p { margin: 0 0 14px; }
.mission-panel ul { .mission-panel ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -362,8 +369,7 @@
@media (max-width: 880px) { @media (max-width: 880px) {
.hero-grid, .mission, .footer-grid { grid-template-columns: 1fr; } .hero-grid, .mission, .footer-grid { grid-template-columns: 1fr; }
.section-header { align-items: start; flex-direction: column; } .section-header { align-items: start; flex-direction: column; }
.project-row { grid-template-columns: 46px 1fr; } .project-list { grid-template-columns: 1fr; }
.project-link { grid-column: 2; }
.footer-grid, .contact-list { justify-content: start; } .footer-grid, .contact-list { justify-content: start; }
} }
@@ -377,7 +383,7 @@
.nav-links { display: none; } .nav-links { display: none; }
.hero { padding-top: 48px; } .hero { padding-top: 48px; }
.portrait-panel img { aspect-ratio: 16 / 10; } .portrait-panel img { aspect-ratio: 16 / 10; }
.project-row { padding: 16px; gap: 13px; } .project-card { min-height: auto; padding: 16px; }
.button { width: 100%; } .button { width: 100%; }
} }
</style> </style>
@@ -430,49 +436,49 @@
<p>One public map for the active Christ IT work. Internal backend destinations stay off this list.</p> <p>One public map for the active Christ IT work. Internal backend destinations stay off this list.</p>
</div> </div>
<div class="project-list"> <div class="project-list">
<a class="project-row" href="https://christit.com/tse/"> <a class="project-card" href="https://christit.com/tse/">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-handshake-angle"></i></div> <div class="project-icon"><i class="fa-solid fa-handshake-angle"></i></div>
<div>
<h3>Technical Services Exchange</h3> <h3>Technical Services Exchange</h3>
<p>Technical service marketplace project. Public path: christit.com/tse.</p> <p>Technical service marketplace project. Public path: christit.com/tse.</p>
</div> </div>
<span class="project-link">Open TSE <i class="fa-solid fa-arrow-right"></i></span> <span class="project-link">Open TSE <i class="fa-solid fa-arrow-right"></i></span>
</a> </a>
<a class="project-row" href="https://git.christit.com/gracepress"> <a class="project-card" href="https://git.christit.com/gracepress">
<div class="project-top">
<div class="project-icon"><i class="fa-brands fa-wordpress-simple"></i></div> <div class="project-icon"><i class="fa-brands fa-wordpress-simple"></i></div>
<div>
<h3>GracePress</h3> <h3>GracePress</h3>
<p>WordPress theme, plugin stack, publishing tools, and ministry site infrastructure.</p> <p>WordPress theme, plugin stack, publishing tools, and ministry site infrastructure.</p>
</div> </div>
<span class="project-link">View repos <i class="fa-solid fa-arrow-right"></i></span> <span class="project-link">View repos <i class="fa-solid fa-arrow-right"></i></span>
</a> </a>
<a class="project-row" href="https://git.christit.com"> <a class="project-card" href="https://git.christit.com">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-code-branch"></i></div> <div class="project-icon"><i class="fa-solid fa-code-branch"></i></div>
<div>
<h3>Christ IT Git</h3> <h3>Christ IT Git</h3>
<p>Self-hosted Git for source, release trees, website history, and public code.</p> <p>Self-hosted Git for source, release trees, website history, and public code.</p>
</div> </div>
<span class="project-link">Open Git <i class="fa-solid fa-arrow-right"></i></span> <span class="project-link">Open Git <i class="fa-solid fa-arrow-right"></i></span>
</a> </a>
<a class="project-row" href="https://christp2p.com"> <a class="project-card" href="https://christp2p.com">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-globe"></i></div> <div class="project-icon"><i class="fa-solid fa-globe"></i></div>
<div>
<h3>ChristP2P</h3> <h3>ChristP2P</h3>
<p>Public ministry and publishing site where GracePress is proven in real use.</p> <p>Public ministry and publishing site where GracePress is proven in real use.</p>
</div> </div>
<span class="project-link">Visit site <i class="fa-solid fa-arrow-right"></i></span> <span class="project-link">Visit site <i class="fa-solid fa-arrow-right"></i></span>
</a> </a>
<a class="project-row" href="https://jasoneugenegarrison.com"> <a class="project-card" href="https://jasoneugenegarrison.com">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-id-card"></i></div> <div class="project-icon"><i class="fa-solid fa-id-card"></i></div>
<div>
<h3>Jason Eugene Garrison</h3> <h3>Jason Eugene Garrison</h3>
<p>Resume and professional background site. Public path: jasoneugenegarrison.com.</p> <p>Resume and professional background site. Public path: jasoneugenegarrison.com.</p>
</div> </div>
<span class="project-link">View resume <i class="fa-solid fa-arrow-right"></i></span> <span class="project-link">View resume <i class="fa-solid fa-arrow-right"></i></span>
</a> </a>
<a class="project-row" href="connections.html"> <a class="project-card" href="connections.html">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-headset"></i></div> <div class="project-icon"><i class="fa-solid fa-headset"></i></div>
<div>
<h3>Client Support</h3> <h3>Client Support</h3>
<p>Remote support entry point for active Christ IT work. Public path: christit.com/connections.html.</p> <p>Remote support entry point for active Christ IT work. Public path: christit.com/connections.html.</p>
</div> </div>
@@ -485,11 +491,12 @@
<section class="section" id="mission"> <section class="section" id="mission">
<div class="container mission"> <div class="container mission">
<div class="mission-panel"> <div class="mission-panel">
<h3>What belongs here</h3> <h3>Current shape</h3>
<p>Christ IT is being organized as a small family of public projects backed by source control, simple deployment paths, and practical maintenance.</p>
<ul> <ul>
<li><i class="fa-solid fa-check"></i><span>Public projects that someone can visit, inspect, or use.</span></li> <li><i class="fa-solid fa-check"></i><span>Public sites stay visible and understandable.</span></li>
<li><i class="fa-solid fa-check"></i><span>Software and websites actively maintained under Christ IT.</span></li> <li><i class="fa-solid fa-check"></i><span>Internal backend services stay off the public directory.</span></li>
<li><i class="fa-solid fa-check"></i><span>Simple explanations instead of marketing clutter.</span></li> <li><i class="fa-solid fa-check"></i><span>Projects move through local workspace, Gitea, then live deployment.</span></li>
</ul> </ul>
</div> </div>
<div class="mission-copy"> <div class="mission-copy">