Website for the Lede browser extension.
Layout: fluid section rhythm, hero copy stack, FAQ/footer spacing
+70
-27
+1
-1
src/components/sections/FAQCompact.astro
+1
-1
src/components/sections/FAQCompact.astro
···
6
6
const { tangled } = Astro.props;
7
7
---
8
8
9
-
<section id="faq" class="section wrap" aria-labelledby="faq-heading">
9
+
<section id="faq" class="section section--faq wrap" aria-labelledby="faq-heading">
10
10
<header class="section__head">
11
11
<p class="eyebrow">FAQ</p>
12
12
<h2 id="faq-heading" class="heading-xl">Quick answers</h2>
+1
-1
src/components/sections/HeroWithProof.astro
+1
-1
src/components/sections/HeroWithProof.astro
···
23
23
Get Lede
24
24
</a>
25
25
</div>
26
-
<p class="eyebrow reveal-item" style="--i: 5; margin-top: var(--space-md)">Shortcut</p>
26
+
<p class="eyebrow reveal-item" style="--i: 5">Shortcut</p>
27
27
<p
28
28
class="reveal-item"
29
29
style="--i: 6; margin: 0; font-size: var(--text-sm); color: var(--color-ink-secondary)"
+68
-25
src/styles/global.css
+68
-25
src/styles/global.css
···
65
65
--space-2xl: 4rem;
66
66
--space-3xl: 6rem;
67
67
68
+
/* Section vertical rhythm (fluid where the page needs to breathe) */
69
+
--section-y: clamp(2.75rem, 5vw, 4.25rem);
70
+
--section-y-tight: clamp(1.35rem, 2.8vw, 2.25rem);
71
+
--section-y-room: clamp(3.25rem, 6.5vw, 5.5rem);
72
+
--section-y-hero-tail: clamp(3rem, 6vw, 5rem);
73
+
68
74
--radius-sm: 6px;
69
75
--radius-md: 8px;
70
76
--radius-pill: 14px;
···
419
425
}
420
426
421
427
.disclosure {
422
-
margin-top: var(--space-lg);
428
+
margin-top: clamp(var(--space-lg), 3vw, var(--space-xl));
423
429
border: 1px solid var(--color-border);
424
430
border-radius: var(--radius-md);
425
431
background: var(--color-canvas);
···
487
493
display: flex;
488
494
flex-wrap: wrap;
489
495
gap: var(--space-sm);
490
-
margin-top: var(--space-lg);
496
+
margin-top: clamp(var(--space-md), 2vw, var(--space-lg));
491
497
}
492
498
493
499
.btn {
···
558
564
559
565
/* ——— Sections ——— */
560
566
.section {
561
-
padding-block: var(--space-2xl);
567
+
padding-block: var(--section-y);
562
568
}
563
569
564
570
.section--tight-top {
565
-
padding-top: var(--space-md);
571
+
padding-top: var(--section-y-tight);
572
+
padding-bottom: clamp(var(--space-lg), 3.5vw, var(--space-2xl));
573
+
}
574
+
575
+
.section--faq {
576
+
padding-bottom: clamp(3.25rem, 6vw, 5rem);
566
577
}
567
578
568
579
.section__head {
569
-
margin-bottom: var(--space-lg);
580
+
margin-bottom: clamp(var(--space-lg), 2.8vw, var(--space-xl));
581
+
max-width: 65ch;
570
582
}
571
583
572
584
/* Privacy dark band */
···
662
674
.repo-note {
663
675
font-size: var(--text-sm);
664
676
color: var(--color-ink-secondary);
665
-
margin: 0;
677
+
margin: clamp(var(--space-md), 2vw, var(--space-lg)) 0 0;
666
678
max-width: 65ch;
667
679
}
668
680
669
681
/* Footer */
670
682
.site-footer {
671
-
padding-block: var(--space-xl);
683
+
padding-block: clamp(var(--space-lg), 3vw, var(--space-xl));
672
684
border-top: 1px solid var(--color-border);
673
-
margin-top: var(--space-2xl);
685
+
margin-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
674
686
}
675
687
676
688
.footer-inner {
···
678
690
flex-wrap: wrap;
679
691
align-items: baseline;
680
692
justify-content: space-between;
681
-
gap: var(--space-md);
693
+
gap: var(--space-md) var(--space-xl);
682
694
font-size: var(--text-sm);
683
695
color: var(--color-ink-secondary);
684
696
}
···
751
763
.hero-mast {
752
764
position: relative;
753
765
isolation: isolate;
754
-
padding-block: calc(var(--space-2xl) + var(--space-sm)) calc(var(--space-3xl) + var(--space-md));
766
+
padding-block: calc(var(--space-2xl) + var(--space-sm)) var(--section-y-hero-tail);
755
767
border-bottom: 1px solid var(--color-border);
756
768
background:
757
769
radial-gradient(ellipse 85% 65% at 0% 0%, var(--color-brand-soft), transparent 58%),
···
767
779
color: color-mix(in oklch, var(--color-brand) 42%, var(--color-ink-muted));
768
780
}
769
781
782
+
.hero-mast__copy {
783
+
display: flex;
784
+
flex-direction: column;
785
+
align-items: flex-start;
786
+
gap: clamp(var(--space-xs), 1.5vw, var(--space-sm));
787
+
}
788
+
789
+
.hero-mast__copy .display-hero,
790
+
.hero-mast__copy .deck,
791
+
.hero-mast__copy .lede {
792
+
margin: 0;
793
+
}
794
+
795
+
.hero-mast__copy .actions {
796
+
margin-top: clamp(var(--space-sm), 1.5vw, var(--space-md));
797
+
}
798
+
799
+
.hero-mast__copy > .eyebrow:nth-child(6) {
800
+
margin-top: clamp(var(--space-md), 2.5vw, var(--space-xl));
801
+
}
802
+
803
+
.hero-mast__copy > p:not(.eyebrow):not(.deck):not(.lede) {
804
+
margin: 0;
805
+
}
806
+
770
807
.hero-mast__grid {
771
808
display: grid;
772
809
gap: var(--space-xl);
···
896
933
}
897
934
898
935
.section--install {
899
-
padding-top: var(--space-3xl);
936
+
padding-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
937
+
padding-bottom: var(--section-y-room);
900
938
}
901
939
902
940
.section__head--install {
903
-
margin-bottom: var(--space-md);
941
+
margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg));
904
942
}
905
943
906
944
.journey-band {
907
-
padding: var(--space-lg);
945
+
padding: clamp(var(--space-md), 2.5vw, var(--space-lg));
908
946
border: 1px solid var(--color-border);
909
947
border-radius: var(--radius-md);
910
-
margin-bottom: var(--space-md);
948
+
margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg));
911
949
}
912
950
913
951
.journey-band--callout {
···
933
971
934
972
.journey-strip {
935
973
display: grid;
936
-
gap: var(--space-md);
937
-
margin-bottom: var(--space-xl);
974
+
gap: clamp(var(--space-md), 2vw, var(--space-lg));
975
+
margin-bottom: clamp(var(--space-xl), 4vw, var(--space-2xl));
938
976
}
939
977
940
978
@media (min-width: 880px) {
···
945
983
}
946
984
947
985
.journey-strip__cell {
948
-
padding: var(--space-lg);
986
+
padding: clamp(var(--space-md), 2.5vw, var(--space-lg));
949
987
background: var(--color-surface);
950
988
border: 1px solid var(--color-border);
951
989
border-radius: var(--radius-md);
952
990
display: flex;
953
991
flex-direction: column;
954
-
gap: var(--space-2xs);
992
+
gap: var(--space-xs);
955
993
}
956
994
957
995
.journey-strip__num {
···
987
1025
}
988
1026
989
1027
.section--editorial {
990
-
padding-block: var(--space-3xl);
1028
+
padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl)) var(--section-y-room);
1029
+
}
1030
+
1031
+
.section--editorial .section__head {
1032
+
margin-bottom: clamp(var(--space-xl), 3.5vw, var(--space-2xl));
991
1033
}
992
1034
993
1035
.editorial-grid {
994
1036
display: grid;
995
-
gap: var(--space-xl);
1037
+
gap: clamp(var(--space-lg), 3vw, var(--space-xl));
996
1038
}
997
1039
998
1040
@media (min-width: 800px) {
···
1033
1075
.usage-flow li {
1034
1076
display: grid;
1035
1077
grid-template-columns: auto 1fr;
1036
-
gap: var(--space-md);
1037
-
padding: var(--space-lg) 0;
1078
+
gap: clamp(var(--space-md), 2vw, var(--space-lg));
1079
+
padding-block: clamp(var(--space-md), 2.5vw, var(--space-xl));
1080
+
padding-inline: 0;
1038
1081
border-top: 1px solid var(--color-border);
1039
1082
}
1040
1083
···
1058
1101
}
1059
1102
1060
1103
.usage-afterword {
1061
-
margin: var(--space-xl) 0 0;
1104
+
margin: clamp(var(--space-lg), 3vw, var(--space-xl)) 0 0;
1062
1105
max-width: 62ch;
1063
1106
font-size: var(--text-sm);
1064
1107
line-height: var(--leading-prose);
···
1066
1109
}
1067
1110
1068
1111
.split--privacy {
1069
-
margin-top: var(--space-sm);
1112
+
margin-top: clamp(var(--space-md), 2.5vw, var(--space-lg));
1070
1113
}
1071
1114
1072
1115
.prose--dark p {
···
1086
1129
.faq-stack {
1087
1130
display: flex;
1088
1131
flex-direction: column;
1089
-
gap: var(--space-sm);
1132
+
gap: clamp(var(--space-sm), 1.5vw, var(--space-md));
1090
1133
}
1091
1134
1092
1135
.faq-disclosure {