Skip to content

Commit e1d6e91

Browse files
committed
refactor: replace summary card with two-column layout
- Remove card style (box-shadow, border, centered text) - Add grid layout with summary content and links columns - Left-align all text - Add hoverable link-card styles with hover effects - Responsive: single column on mobile
1 parent d89ee40 commit e1d6e91

File tree

1 file changed

+72
-16
lines changed

1 file changed

+72
-16
lines changed

src/main.css

Lines changed: 72 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -649,30 +649,86 @@ input[type="range"] {
649649
outline-offset: var(--focus-offset);
650650
}
651651

652-
.summary-box {
652+
.summary-section {
653653
margin-top: 4rem;
654-
padding: 2rem;
655-
background: var(--color-card);
656-
border-radius: var(--radius);
657-
box-shadow: var(--shadow);
658-
border: 1px solid var(--color-border);
659-
text-align: center;
654+
display: grid;
655+
grid-template-columns: 1fr 1fr;
656+
gap: 3rem;
657+
}
658+
659+
.summary-content {
660+
text-align: left;
661+
}
662+
663+
.summary-content h3 {
664+
font-size: 1.25rem;
665+
margin-bottom: 0.75rem;
666+
color: var(--color-text);
667+
font-weight: 600;
668+
}
669+
670+
.summary-content p {
671+
color: var(--color-text-muted);
672+
font-size: 0.875rem;
673+
line-height: 1.6;
674+
}
675+
676+
.summary-list {
677+
list-style: disc;
678+
padding-left: 1.25rem;
679+
margin: 1rem 0;
680+
color: var(--color-text-muted);
681+
font-size: 0.875rem;
682+
}
683+
684+
.summary-list li {
685+
padding: 0.25rem 0;
686+
}
687+
688+
.summary-closing {
689+
font-size: 0.8125rem;
660690
}
661691

662-
.summary-box h3 {
663-
font-size: 1.5rem;
692+
.summary-links h3 {
693+
font-size: 1.25rem;
664694
margin-bottom: 1rem;
665-
color: var(--color-primary);
695+
color: var(--color-text);
666696
font-weight: 600;
667697
}
668698

669-
.zen-quote {
670-
font-style: italic;
699+
.link-card {
700+
display: block;
701+
padding: 1rem 1.25rem;
702+
margin-bottom: 1rem;
703+
background: var(--color-bg);
704+
border: 1px solid var(--color-border);
705+
border-radius: var(--radius);
706+
text-decoration: none;
707+
transition: all 0.2s ease;
708+
}
709+
710+
.link-card:hover {
711+
border-color: var(--color-primary);
712+
box-shadow: var(--shadow-hover);
713+
transform: translateY(-2px);
714+
}
715+
716+
.link-card-title {
717+
font-weight: 600;
718+
color: var(--color-primary);
719+
margin-bottom: 0.25rem;
720+
}
721+
722+
.link-card-description {
723+
font-size: 0.8125rem;
671724
color: var(--color-text-muted);
672-
font-size: 1rem;
673-
margin-top: 1.5rem;
674-
border-left: 3px solid var(--color-primary);
675-
padding-left: 1rem;
725+
line-height: 1.4;
726+
}
727+
728+
@media (max-width: 768px) {
729+
.summary-section {
730+
grid-template-columns: 1fr;
731+
}
676732
}
677733

678734
@media (max-width: 768px) {

0 commit comments

Comments
 (0)