Skip to content

Commit 21e1add

Browse files
p4gsclaudehappy-otter
committed
Restyle glossary sections to minimalist CSS Grid layout
Replace table-based glossary with semantic list elements and CSS Grid. Sections collapse to single-column on mobile with no horizontal scroll. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent afec929 commit 21e1add

File tree

1 file changed

+62
-95
lines changed
  • docs/projects/grcengineering-cheat-sheet

1 file changed

+62
-95
lines changed

‎docs/projects/grcengineering-cheat-sheet/index.html‎

Lines changed: 62 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -372,70 +372,62 @@
372372
}
373373

374374
/* ── GLOSSARY SECTIONS ── */
375-
.glossary-section {
375+
.glossary-sections {
376376
max-width: 1100px;
377-
margin: 0 auto 48px;
377+
margin: 0 auto 60px;
378378
padding: 0 24px;
379379
}
380+
.glossary-section {
381+
margin-bottom: 40px;
382+
}
383+
.glossary-section:last-child { margin-bottom: 0; }
380384
.glossary-section-title {
381-
font-family: var(--font-body);
382-
font-size: 1.4rem;
385+
font-family: var(--font-mono);
386+
font-size: 0.7rem;
383387
font-weight: 700;
384-
color: var(--text);
385-
margin-bottom: 16px;
386-
padding-left: 4px;
388+
letter-spacing: 3px;
389+
text-transform: uppercase;
390+
color: var(--text-dim);
391+
margin-bottom: 20px;
392+
padding-bottom: 10px;
393+
border-bottom: 1px solid var(--border);
387394
}
388-
.glossary-section-title .section-icon {
389-
display: inline-block;
390-
width: 8px;
391-
height: 8px;
392-
border-radius: 50%;
393-
background: linear-gradient(135deg, var(--orange-bright), var(--blue-bright));
394-
margin-right: 10px;
395-
vertical-align: middle;
395+
.glossary-list {
396+
list-style: none;
396397
}
397-
.glossary-table {
398-
border-collapse: separate;
399-
border-spacing: 0;
400-
width: 100%;
401-
font-size: 0.92rem;
398+
.glossary-entry {
399+
display: grid;
400+
grid-template-columns: auto 1fr;
401+
gap: 16px;
402+
padding: 12px 0;
403+
border-bottom: 1px solid var(--border);
404+
align-items: baseline;
402405
}
403-
.glossary-table td:first-child {
406+
.glossary-entry:last-child { border-bottom: none; }
407+
.glossary-term {
404408
font-family: var(--font-mono);
405409
font-weight: 700;
406410
font-size: 0.85rem;
407-
white-space: nowrap;
408-
width: 140px;
409-
padding: 14px 20px;
410-
vertical-align: top;
411-
border-bottom: 1px solid var(--border);
412-
background: var(--bg-row-header);
413411
color: var(--orange);
412+
white-space: nowrap;
414413
}
415-
.glossary-table td:last-child {
416-
padding: 14px 20px;
417-
vertical-align: top;
418-
border-bottom: 1px solid var(--border);
419-
background: var(--bg-card);
414+
.glossary-def {
415+
font-size: 0.9rem;
420416
color: var(--text);
421-
line-height: 1.65;
422-
}
423-
.glossary-table tr:nth-child(odd) td:last-child {
424-
background: var(--bg-row-alt);
425-
}
426-
.glossary-table tr:nth-child(odd) td:first-child {
427-
background: var(--bg-row-alt);
428-
}
429-
.glossary-table tr:last-child td { border-bottom: none; }
430-
.glossary-table tr:hover td {
431-
background: var(--bg-row-hover);
417+
line-height: 1.7;
418+
opacity: 0.85;
432419
}
433420
.glossary-empty {
434-
padding: 24px 20px;
435-
text-align: center;
436421
font-size: 0.85rem;
437422
color: var(--text-dim);
438423
font-style: italic;
424+
padding: 8px 0;
425+
}
426+
@media (max-width: 600px) {
427+
.glossary-entry {
428+
grid-template-columns: 1fr;
429+
gap: 4px;
430+
}
439431
}
440432

441433
/* ── FOOTER ── */
@@ -474,20 +466,15 @@
474466
thead th { padding: 14px 14px; font-size: 0.9rem; }
475467
tbody td { padding: 12px 14px; }
476468
.theme-toggle { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1rem; }
477-
.glossary-section { padding: 0 12px; margin-bottom: 36px; }
478-
.glossary-section-title { font-size: 1.2rem; }
479-
.glossary-table td:first-child { width: 100px; padding: 12px 14px; font-size: 0.8rem; }
480-
.glossary-table td:last-child { padding: 12px 14px; }
469+
.glossary-sections { padding: 0 12px; }
481470
}
482471
@media (max-width: 480px) {
483472
.page-header { padding: 50px 12px 32px; }
484473
table { font-size: 0.78rem; }
485474
thead th { padding: 12px 10px; }
486475
tbody td { padding: 10px 10px; }
487476
tbody ul { padding-left: 14px; }
488-
.glossary-section { padding: 0 8px; }
489-
.glossary-table td:first-child { width: 80px; padding: 10px 10px; font-size: 0.75rem; }
490-
.glossary-table td:last-child { padding: 10px 10px; font-size: 0.78rem; }
477+
.glossary-sections { padding: 0 8px; }
491478
}
492479
</style>
493480
</head>
@@ -624,61 +611,41 @@ <h1 class="page-title">The <span class="highlight">GRC Engineering</span> Cheat
624611
</div>
625612
</main>
626613

614+
<div class="glossary-sections">
615+
627616
<section class="glossary-section">
628-
<h2 class="glossary-section-title"><span class="section-icon"></span>Governance</h2>
629-
<div class="table-outer">
630-
<div class="table-container">
631-
<table class="glossary-table">
632-
<tbody>
633-
<tr><td colspan="2" class="glossary-empty">Coming soon</td></tr>
634-
</tbody>
635-
</table>
636-
</div>
637-
</div>
617+
<h2 class="glossary-section-title">Governance</h2>
618+
<ul class="glossary-list">
619+
<li class="glossary-empty">Coming soon</li>
620+
</ul>
638621
</section>
639622

640623
<section class="glossary-section">
641-
<h2 class="glossary-section-title"><span class="section-icon"></span>Risk</h2>
642-
<div class="table-outer">
643-
<div class="table-container">
644-
<table class="glossary-table">
645-
<tbody>
646-
<tr>
647-
<td>TPCM</td>
648-
<td>Third-party compliance management. Legacy GRC approach to third-party &ldquo;risk&rdquo; management. Primarily focused on whether or not third parties comply with a customer&rsquo;s requirements as expressed in contract language and questionnaires. Does not account for real-world threats, value-at-risk, or positive vs. negative risk tradeoffs. Conflates outside-in vulnerability scanning with risk analysis.</td>
649-
</tr>
650-
</tbody>
651-
</table>
652-
</div>
653-
</div>
624+
<h2 class="glossary-section-title">Risk</h2>
625+
<ul class="glossary-list">
626+
<li class="glossary-entry">
627+
<span class="glossary-term">TPCM</span>
628+
<span class="glossary-def">Third-party compliance management. Legacy GRC approach to third-party &ldquo;risk&rdquo; management. Primarily focused on whether or not third parties comply with a customer&rsquo;s requirements as expressed in contract language and questionnaires. Does not account for real-world threats, value-at-risk, or positive vs. negative risk tradeoffs. Conflates outside-in vulnerability scanning with risk analysis.</span>
629+
</li>
630+
</ul>
654631
</section>
655632

656633
<section class="glossary-section">
657-
<h2 class="glossary-section-title"><span class="section-icon"></span>Compliance</h2>
658-
<div class="table-outer">
659-
<div class="table-container">
660-
<table class="glossary-table">
661-
<tbody>
662-
<tr><td colspan="2" class="glossary-empty">Coming soon</td></tr>
663-
</tbody>
664-
</table>
665-
</div>
666-
</div>
634+
<h2 class="glossary-section-title">Compliance</h2>
635+
<ul class="glossary-list">
636+
<li class="glossary-empty">Coming soon</li>
637+
</ul>
667638
</section>
668639

669640
<section class="glossary-section">
670-
<h2 class="glossary-section-title"><span class="section-icon"></span>Trust &amp; Assurance</h2>
671-
<div class="table-outer">
672-
<div class="table-container">
673-
<table class="glossary-table">
674-
<tbody>
675-
<tr><td colspan="2" class="glossary-empty">Coming soon</td></tr>
676-
</tbody>
677-
</table>
678-
</div>
679-
</div>
641+
<h2 class="glossary-section-title">Trust &amp; Assurance</h2>
642+
<ul class="glossary-list">
643+
<li class="glossary-empty">Coming soon</li>
644+
</ul>
680645
</section>
681646

647+
</div>
648+
682649
<footer class="page-footer">
683650
<p><a href="https://grc.engineering">GRC Engineering</a></p>
684651
<p class="version-tag">v0.0.1</p>

0 commit comments

Comments
 (0)