Skip to content

Commit a4c4404

Browse files
jeremyederclaude
jeremyeder
and
claude
authored
docs: add CLI reference and update AI bubble snark (#159)
Add prominent CLI Reference section with interactive command grid and replace testimonials with satirical commentary on AI hype cycle. Changes: - Add full CLI help output showing all 15+ commands - Create visual command grid for core commands (bootstrap/align/assess/submit) - Update AI bubble snark with sharper commentary on LLM hysteria - Add command-grid CSS with hover effects and terminal styling Co-authored-by: Claude <noreply@anthropic.com>
1 parent eeabf2f commit a4c4404

File tree

2 files changed

+371
-18
lines changed

2 files changed

+371
-18
lines changed

‎docs/assets/css/style.css‎

Lines changed: 274 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,18 @@ pre code {
227227
text-decoration: none;
228228
}
229229

230+
.button-tertiary {
231+
background-color: var(--color-gray-100);
232+
color: var(--color-gray-700);
233+
border: 1px solid var(--color-gray-300);
234+
}
235+
236+
.button-tertiary:hover {
237+
background-color: var(--color-gray-200);
238+
text-decoration: none;
239+
border-color: var(--color-gray-400);
240+
}
241+
230242
.button-large {
231243
padding: var(--space-4) var(--space-8);
232244
font-size: var(--text-lg);
@@ -509,39 +521,165 @@ hr {
509521
}
510522

511523
/* ============================================
512-
Navigation (if using custom navigation)
524+
Navigation
513525
============================================ */
514526

515-
nav {
527+
header {
516528
background-color: var(--color-gray-900);
517529
color: white;
518-
padding: var(--space-4) 0;
530+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
531+
position: sticky;
532+
top: 0;
533+
z-index: 1000;
519534
}
520535

521-
nav ul {
536+
nav {
537+
padding: 0;
538+
}
539+
540+
.nav-container {
541+
display: flex;
542+
align-items: center;
543+
justify-content: space-between;
544+
padding: var(--space-4) var(--space-6);
545+
}
546+
547+
/* Brand */
548+
.nav-brand {
549+
display: flex;
550+
align-items: center;
551+
gap: var(--space-2);
552+
text-decoration: none;
553+
font-weight: 700;
554+
font-size: var(--text-lg);
555+
color: white;
556+
transition: opacity 0.2s ease;
557+
}
558+
559+
.nav-brand:hover {
560+
opacity: 0.9;
561+
text-decoration: none;
562+
}
563+
564+
.brand-icon {
565+
font-size: var(--text-2xl);
566+
}
567+
568+
.brand-text {
569+
letter-spacing: -0.02em;
570+
}
571+
572+
/* Menu */
573+
.nav-menu {
522574
list-style: none;
523575
margin: 0;
524576
padding: 0;
525577
display: flex;
526-
gap: var(--space-6);
527-
justify-content: center;
528-
flex-wrap: wrap;
578+
gap: var(--space-2);
579+
align-items: center;
529580
}
530581

531-
nav a {
532-
color: white;
582+
.nav-item {
583+
position: relative;
584+
}
585+
586+
.nav-link {
587+
color: rgba(255, 255, 255, 0.9);
533588
text-decoration: none;
534589
font-weight: 500;
590+
font-size: var(--text-sm);
535591
padding: var(--space-2) var(--space-4);
592+
border-radius: var(--radius-md);
593+
display: block;
594+
transition: all 0.2s ease;
595+
white-space: nowrap;
596+
}
597+
598+
.nav-link:hover {
599+
background-color: rgba(255, 255, 255, 0.1);
600+
color: white;
601+
text-decoration: none;
602+
}
603+
604+
/* Dropdown */
605+
.nav-dropdown {
606+
position: relative;
607+
}
608+
609+
.nav-dropdown > .nav-link {
610+
cursor: pointer;
611+
}
612+
613+
.dropdown-menu {
614+
position: absolute;
615+
top: 100%;
616+
left: 0;
617+
background-color: white;
618+
border-radius: var(--radius-md);
619+
box-shadow: var(--shadow-xl);
620+
margin-top: var(--space-2);
621+
min-width: 200px;
622+
opacity: 0;
623+
visibility: hidden;
624+
transform: translateY(-10px);
625+
transition: all 0.2s ease;
626+
list-style: none;
627+
padding: var(--space-2);
628+
z-index: 1001;
629+
}
630+
631+
.nav-dropdown:hover .dropdown-menu {
632+
opacity: 1;
633+
visibility: visible;
634+
transform: translateY(0);
635+
}
636+
637+
.dropdown-menu li {
638+
margin: 0;
639+
}
640+
641+
.dropdown-menu a {
642+
color: var(--color-gray-700);
643+
text-decoration: none;
644+
padding: var(--space-2) var(--space-4);
645+
display: block;
536646
border-radius: var(--radius-sm);
537647
transition: background-color 0.2s ease;
648+
font-size: var(--text-sm);
538649
}
539650

540-
nav a:hover {
541-
background-color: rgba(255, 255, 255, 0.1);
651+
.dropdown-menu a:hover {
652+
background-color: var(--color-gray-100);
542653
text-decoration: none;
543654
}
544655

656+
.dropdown-divider {
657+
height: 1px;
658+
background-color: var(--color-gray-200);
659+
margin: var(--space-2) 0;
660+
}
661+
662+
/* Highlighted nav item (Pipeline) */
663+
.nav-highlight .nav-link {
664+
background-color: rgba(37, 99, 235, 0.2);
665+
color: #93c5fd;
666+
font-weight: 600;
667+
}
668+
669+
.nav-highlight .nav-link:hover {
670+
background-color: rgba(37, 99, 235, 0.3);
671+
color: #dbeafe;
672+
}
673+
674+
/* External link */
675+
.nav-external .nav-link {
676+
opacity: 0.7;
677+
}
678+
679+
.nav-external .nav-link:hover {
680+
opacity: 1;
681+
}
682+
545683
/* ============================================
546684
Content Container
547685
============================================ */
@@ -735,3 +873,128 @@ button:focus,
735873
}
736874
*/
737875
}
876+
877+
/* ============================================
878+
Announcement Banner
879+
============================================ */
880+
881+
.announcement-banner {
882+
background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-primary-light) 100%);
883+
border-left: 4px solid var(--color-info);
884+
padding: var(--space-4) var(--space-6);
885+
margin-bottom: var(--space-8);
886+
border-radius: var(--radius-md);
887+
display: flex;
888+
align-items: center;
889+
gap: var(--space-3);
890+
box-shadow: var(--shadow-sm);
891+
}
892+
893+
.announcement-icon {
894+
font-size: var(--text-2xl);
895+
flex-shrink: 0;
896+
}
897+
898+
.announcement-text {
899+
font-size: var(--text-base);
900+
color: var(--color-gray-700);
901+
line-height: 1.5;
902+
}
903+
904+
.announcement-text a {
905+
color: var(--color-primary);
906+
font-weight: 600;
907+
text-decoration: none;
908+
border-bottom: 2px solid transparent;
909+
transition: border-color 0.2s ease;
910+
}
911+
912+
.announcement-text a:hover {
913+
border-bottom-color: var(--color-primary);
914+
}
915+
916+
/* ============================================
917+
CLI Command Reference Grid
918+
============================================ */
919+
920+
.command-grid {
921+
display: grid;
922+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
923+
gap: var(--space-5);
924+
margin: var(--space-6) 0 var(--space-8) 0;
925+
}
926+
927+
.command-box {
928+
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
929+
padding: var(--space-5);
930+
border-radius: var(--radius-lg);
931+
border: 2px solid var(--color-gray-200);
932+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
933+
position: relative;
934+
overflow: hidden;
935+
}
936+
937+
.command-box::before {
938+
content: '';
939+
position: absolute;
940+
top: 0;
941+
left: 0;
942+
width: 100%;
943+
height: 3px;
944+
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
945+
transform: scaleX(0);
946+
transform-origin: left;
947+
transition: transform 0.3s ease;
948+
}
949+
950+
.command-box:hover {
951+
border-color: var(--color-primary);
952+
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
953+
transform: translateY(-2px);
954+
}
955+
956+
.command-box:hover::before {
957+
transform: scaleX(1);
958+
}
959+
960+
.command-box h4 {
961+
margin: 0 0 var(--space-3) 0;
962+
font-size: var(--text-lg);
963+
font-weight: 600;
964+
color: var(--color-gray-900);
965+
}
966+
967+
.command-box h4 a {
968+
color: var(--color-gray-900);
969+
text-decoration: none;
970+
transition: color 0.2s ease;
971+
}
972+
973+
.command-box h4 a:hover {
974+
color: var(--color-primary);
975+
}
976+
977+
.command-box p {
978+
margin: 0 0 var(--space-4) 0;
979+
font-size: var(--text-sm);
980+
line-height: 1.6;
981+
color: var(--color-gray-600);
982+
}
983+
984+
.command-box code {
985+
display: block;
986+
background-color: var(--color-gray-900);
987+
color: #10b981;
988+
padding: var(--space-3);
989+
border-radius: var(--radius-md);
990+
font-family: var(--font-mono);
991+
font-size: var(--text-sm);
992+
font-weight: 500;
993+
margin-top: auto;
994+
}
995+
996+
@media (max-width: 768px) {
997+
.command-grid {
998+
grid-template-columns: 1fr;
999+
}
1000+
}

0 commit comments

Comments
 (0)