This commit is contained in:
Keith Casko
+133
-61
@@ -74,14 +74,14 @@ code {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
section { padding: 64px 0; }
|
||||
section { padding: 46px 0; }
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid var(--steel);
|
||||
position: relative;
|
||||
@@ -188,17 +188,17 @@ section { padding: 64px 0; }
|
||||
}
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.hero { padding: 44px 0 56px; }
|
||||
.hero { padding: 34px 0 42px; }
|
||||
.hero-grid {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--rule);
|
||||
border-top: 3px solid var(--steel);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px rgba(16, 38, 61, 0.06);
|
||||
padding: 40px;
|
||||
padding: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
|
||||
gap: 34px;
|
||||
align-items: center;
|
||||
}
|
||||
.hero h1 { font-size: 34px; margin-bottom: 18px; line-height: 1.2; }
|
||||
@@ -240,6 +240,29 @@ section { padding: 64px 0; }
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-proof {
|
||||
margin: 0;
|
||||
background: #10283d;
|
||||
border: 1px solid #29455f;
|
||||
border-radius: 4px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 6px 18px rgba(16, 38, 61, .12);
|
||||
}
|
||||
|
||||
.hero-proof img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: contain;
|
||||
background: #10283d;
|
||||
}
|
||||
|
||||
.hero-proof figcaption {
|
||||
color: #c4d3df;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -315,8 +338,8 @@ section { padding: 64px 0; }
|
||||
/* ---------- Projects ---------- */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.project-card {
|
||||
background: var(--panel);
|
||||
@@ -334,13 +357,13 @@ section { padding: 64px 0; }
|
||||
}
|
||||
.project-card .thumb {
|
||||
background: #e9edf1;
|
||||
aspect-ratio: 16 / 10;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
overflow: hidden;
|
||||
}
|
||||
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.project-card .thumb .image-placeholder { font-size: 12px; }
|
||||
.project-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
|
||||
.project-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
|
||||
.project-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--navy-2); }
|
||||
.project-card:hover h3 { color: var(--steel-dark); }
|
||||
.project-card p {
|
||||
@@ -437,6 +460,10 @@ section { padding: 64px 0; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
.credential-badge-google img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.credential-copy h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
@@ -605,6 +632,18 @@ section { padding: 64px 0; }
|
||||
}
|
||||
.panel li { padding: 2px 0; }
|
||||
|
||||
.panel-costco {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.prior-experience {
|
||||
margin: 18px 0 0;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--rule-soft);
|
||||
color: var(--muted-2);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
/* ---------- Contact banner ---------- */
|
||||
.contact-cta {
|
||||
background: var(--navy);
|
||||
@@ -618,7 +657,9 @@ section { padding: 64px 0; }
|
||||
gap: 20px;
|
||||
}
|
||||
.contact-cta h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
|
||||
.contact-cta p { margin: 0; color: #a9b8c7; font-size: 14.5px; }
|
||||
.contact-cta p { margin: 0; color: #c7d3df; font-size: 14.5px; }
|
||||
.contact-cta p a { color: #f4f8fb; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
|
||||
.contact-cta p a:hover { color: #ffffff; }
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.site-footer {
|
||||
@@ -649,7 +690,8 @@ section { padding: 64px 0; }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 980px) {
|
||||
.hero-grid { grid-template-columns: 1fr; padding: 32px; }
|
||||
.hero-grid { grid-template-columns: 1fr; padding: 30px; }
|
||||
.hero-proof { max-width: 680px; }
|
||||
.projects-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.skills-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.about-grid { grid-template-columns: 1fr; }
|
||||
@@ -660,7 +702,7 @@ section { padding: 64px 0; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body { font-size: 15.5px; }
|
||||
section { padding: 44px 0; }
|
||||
section { padding: 36px 0; }
|
||||
.hero { padding: 28px 0 36px; }
|
||||
.hero-grid { padding: 22px; }
|
||||
.hero h1 { font-size: 27px; }
|
||||
@@ -866,42 +908,6 @@ section { padding: 64px 0; }
|
||||
.skills-grid-focused .skill-card h3 { font-size:17px; font-family:Georgia,"Times New Roman",serif; margin:0; }
|
||||
.skills-grid-focused .skill-card p { color:var(--muted-2); font-size:14px; margin:0; flex:1; }
|
||||
.skills-grid-focused .view-link, .case-card .view-link { font-size:13.5px; font-weight:600; }
|
||||
.proof-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.proof-callout {
|
||||
background: #eef2f6;
|
||||
border: 1px solid var(--rule);
|
||||
border-left: 3px solid var(--steel);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.proof-callout summary {
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--navy-2);
|
||||
}
|
||||
|
||||
.proof-body {
|
||||
padding: 0 16px 14px;
|
||||
border-top: 1px solid var(--rule-soft);
|
||||
}
|
||||
|
||||
.proof-body p {
|
||||
margin: 10px 0 0;
|
||||
color: var(--muted-2);
|
||||
font-size: 13.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.proof-body strong { color: var(--navy-2); }
|
||||
|
||||
.screenshot-frame {
|
||||
background: #101820;
|
||||
padding: 18px 8px 8px;
|
||||
@@ -925,15 +931,42 @@ section { padding: 64px 0; }
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
}
|
||||
|
||||
#troubleshooting {
|
||||
background: #e8edf2;
|
||||
border-top: 1px solid #d8e0e8;
|
||||
border-bottom: 1px solid #d8e0e8;
|
||||
}
|
||||
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0,1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.case-card {
|
||||
background: #10263d;
|
||||
border: 1px solid #29455f;
|
||||
border-top: 3px solid #5ca3d2;
|
||||
padding: 26px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 18px rgba(16, 38, 61, .10);
|
||||
}
|
||||
|
||||
.case-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.case-meta .case-label {
|
||||
.case-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: #8fc4e6;
|
||||
letter-spacing: .4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -949,19 +982,58 @@ section { padding: 64px 0; }
|
||||
}
|
||||
|
||||
.status-pill.verified {
|
||||
background: #e8f3ec;
|
||||
border: 1px solid #a7c9b2;
|
||||
color: #275d3a;
|
||||
background: #163c2a;
|
||||
border: 1px solid #4f936a;
|
||||
color: #c9f1d7;
|
||||
}
|
||||
|
||||
.case-card h3 {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.case-card p {
|
||||
font-size: 14px;
|
||||
color: #c9d5df;
|
||||
}
|
||||
|
||||
.case-card p strong {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.case-card code {
|
||||
background: #0a1a29;
|
||||
border-color: #35536d;
|
||||
color: #d8edf9;
|
||||
}
|
||||
|
||||
.case-terminal {
|
||||
margin: 18px 0;
|
||||
padding: 14px 16px;
|
||||
overflow-x: auto;
|
||||
background: #081521;
|
||||
border: 1px solid #35536d;
|
||||
border-radius: 3px;
|
||||
color: #bde3c7;
|
||||
font: 13px/1.55 "Consolas", "Menlo", monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.case-terminal span {
|
||||
color: #8fc4e6;
|
||||
}
|
||||
|
||||
.case-card .view-link {
|
||||
color: #9ed4f3;
|
||||
}
|
||||
|
||||
.case-card .view-link:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.case-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; }
|
||||
.case-card { background:var(--panel); border:1px solid var(--rule); border-top:3px solid var(--steel); padding:26px; border-radius:4px; }
|
||||
.case-label { display:block; font-size:12px; text-transform:uppercase; font-weight:700; color:var(--steel); letter-spacing:.4px; margin-bottom:8px; }
|
||||
.case-card h3 { font-size:20px; }
|
||||
.case-card p { font-size:14px; color:var(--muted-2); }
|
||||
.case-card p strong { color:var(--navy-2); }
|
||||
@media (max-width: 700px) {
|
||||
.skills-grid-focused, .case-grid, .proof-strip { grid-template-columns:1fr; }
|
||||
.skills-grid-focused, .case-grid { grid-template-columns: 1fr; }
|
||||
.case-meta { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
|
||||
/* ---------- Homelab dark project treatment ---------- */
|
||||
|
||||
Reference in New Issue
Block a user