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

Simplify Christ IT homepage directory

Browse Source
This commit is contained in:
Jason Eugene Garrison
2026-07-11 08:51:04 -05:00
parent 5213f478b0
commit e16875333f
1 changed files with 146 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+146 -196
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christ IT | Practical Technology for Kingdom Work</title>
<meta name="description" content="Christ IT builds and maintains practical technology projects that serve churches, ministries, outreach work, and Christ-centered software efforts.">
<meta name="description" content="Christ IT builds and maintains practical technology projects, websites, software, and infrastructure for Kingdom work.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23111827'/%3E%3Crect x='29' y='10' width='8' height='44' rx='3' fill='%23f8fafc'/%3E%3Crect x='16' y='25' width='34' height='8' rx='3' fill='%23f97316'/%3E%3C/svg%3E" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -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%; }
}
</style>
@@ -410,21 +386,12 @@
<nav>
<div class="container nav-inner">
<a href="#" class="brand-logo" aria-label="Christ IT home">
<svg viewBox="0 0 258 80" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="christ-it-logo-title">
<title id="christ-it-logo-title">Christ IT</title>
<text x="0" y="62" font-family="Oswald, Arial, sans-serif" font-weight="900" font-size="48" fill="var(--logo)">CHRIST</text>
<g transform="translate(140, 0)">
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo)"/>
<circle cx="7" cy="18" r="7" fill="#d66b1f"/>
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0f63b6"/>
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0f63b6"/>
</g>
</svg>
<span>Christ IT</span>
<span class="brand-cross" aria-hidden="true"></span>
</a>
<div class="nav-actions">
<div class="nav-links" aria-label="Primary navigation">
<a href="#projects">Projects</a>
<a href="#sites">Sites</a>
<a href="#mission">Mission</a>
</div>
<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle dark mode"></button>
@@ -438,10 +405,10 @@
<span class="eyebrow"><i class="fa-solid fa-cross"></i> Technology in service to Christ</span>
<h1>Practical tools for Kingdom work.</h1>
<p class="hero-copy">
Christ IT is the umbrella for the software, websites, infrastructure, and service projects I am building to support churches, ministries, outreach work, and people who need useful technology without needless weight.
Christ IT is the umbrella for software, websites, infrastructure, and service projects built to support churches, ministries, outreach work, and people who need useful technology without needless weight.
</p>
<div class="button-row">
<a class="button" href="#projects"><i class="fa-solid fa-diagram-project"></i> Current Projects</a>
<a class="button" href="#projects"><i class="fa-solid fa-diagram-project"></i> Project Directory</a>
<a class="button secondary" href="connections.html"><i class="fa-solid fa-headset"></i> Client Support</a>
</div>
</div>
@@ -459,79 +426,57 @@
<section class="section" id="projects">
<div class="container">
<div class="section-header">
<h2>Current Work</h2>
<p>These are the active public-facing efforts under the Christ IT umbrella right now. Internal backend destinations stay off the public list.</p>
<h2>Project Directory</h2>
<p>One public map for the active Christ IT work. Internal backend destinations stay off this list.</p>
</div>
<div class="project-grid">
<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-list">
<a class="project-row" href="https://christit.com/tse/">
<div class="project-icon"><i class="fa-solid fa-handshake-angle"></i></div>
<div>
<h3>Technical Services Exchange</h3>
<p>A marketplace-style project for connecting technical service needs with qualified help, built separately from GracePress and managed through its own release path.</p>
<p>Technical service marketplace project. Public path: christit.com/tse.</p>
</div>
<span class="project-link">Open TSE <i class="fa-solid fa-arrow-right"></i></span>
</a>
<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>
<a class="project-row" href="https://git.christit.com/gracepress">
<div class="project-icon"><i class="fa-brands fa-wordpress-simple"></i></div>
<div>
<h3>GracePress</h3>
<p>A WordPress theme and plugin stack for Christ-centered publishing, media workflows, operational tools, and long-term ministry site stewardship.</p>
<p>WordPress theme, plugin stack, publishing tools, and ministry site infrastructure.</p>
</div>
<span class="project-link">View GracePress 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 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>
<a class="project-row" href="https://git.christit.com">
<div class="project-icon"><i class="fa-solid fa-code-branch"></i></div>
<div>
<h3>Christ IT Git</h3>
<p>Our self-hosted Git platform for managing release trees, website source, software projects, and the public code we choose to expose.</p>
<p>Self-hosted Git for source, release trees, website history, and public code.</p>
</div>
<span class="project-link">Open Git platform <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 class="project-card" href="https://christp2p.com">
<div class="project-top">
<div class="project-icon"><i class="fa-solid fa-globe"></i></div>
<a class="project-row" href="https://christp2p.com">
<div class="project-icon"><i class="fa-solid fa-globe"></i></div>
<div>
<h3>ChristP2P</h3>
<p>The public ministry and publishing site where GracePress, media, and future peer-to-peer distribution ideas are being proven in real use.</p>
<p>Public ministry and publishing site where GracePress is proven in real use.</p>
</div>
<span class="project-link">Visit ChristP2P <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>
</div>
</div>
</section>
<section class="section sites-band" id="sites">
<div class="container">
<div class="section-header">
<h2>Public Destinations</h2>
<p>The current public map is intentionally small: core project sites, the Git platform, and Jason's resume site.</p>
</div>
<div class="site-list">
<a class="site-link" href="https://christit.com">
<strong>Christ IT</strong>
<span>christit.com</span>
<a class="project-row" href="https://jasoneugenegarrison.com">
<div class="project-icon"><i class="fa-solid fa-id-card"></i></div>
<div>
<h3>Jason Eugene Garrison</h3>
<p>Resume and professional background site. Public path: jasoneugenegarrison.com.</p>
</div>
<span class="project-link">View resume <i class="fa-solid fa-arrow-right"></i></span>
</a>
<a class="site-link" href="https://christit.com/tse/">
<strong>Technical Services Exchange</strong>
<span>christit.com/tse</span>
</a>
<a class="site-link" href="https://git.christit.com">
<strong>Public Git</strong>
<span>git.christit.com</span>
</a>
<a class="site-link" href="https://christp2p.com">
<strong>ChristP2P</strong>
<span>christp2p.com</span>
</a>
<a class="site-link" href="https://jasoneugenegarrison.com">
<strong>Resume</strong>
<span>jasoneugenegarrison.com</span>
</a>
<a class="site-link" href="connections.html">
<strong>Client Support</strong>
<span>christit.com/connections.html</span>
<a class="project-row" href="connections.html">
<div class="project-icon"><i class="fa-solid fa-headset"></i></div>
<div>
<h3>Client Support</h3>
<p>Remote support entry point for active Christ IT work. Public path: christit.com/connections.html.</p>
</div>
<span class="project-link">Open support <i class="fa-solid fa-arrow-right"></i></span>
</a>
</div>
</div>
@@ -539,8 +484,13 @@
<section class="section" id="mission">
<div class="container mission">
<div class="mission-mark">
<span><i class="fa-solid fa-location-dot"></i> Clarksville, Tennessee</span>
<div class="mission-panel">
<h3>What belongs here</h3>
<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>Software and websites actively maintained under Christ IT.</span></li>
<li><i class="fa-solid fa-check"></i><span>Simple explanations instead of marketing clutter.</span></li>
</ul>
</div>
<div class="mission-copy">
<span class="eyebrow"><i class="fa-solid fa-seedling"></i> Why this exists</span>
@@ -551,7 +501,7 @@
<p>
The goal is not to make every project bigger. The goal is to build what is useful, keep it maintainable, and avoid burdening good work with unnecessary complexity.
</p>
<div class="button-row">
<div class="contact-strip">
<button class="button secure-contact-btn" data-type="email" type="button"><i class="fa-solid fa-envelope"></i> Email Christ IT</button>
<a class="button secondary" href="https://jasoneugenegarrison.com"><i class="fa-solid fa-id-card"></i> Jason's Resume</a>
</div>