mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
Merge pull request #19240 from overleaf/jel-website-redesign-default-fonts
[web] Website redesign default font size and line-height GitOrigin-RevId: 8a7fb56a51f5a29baf3d3c42509b4b8f90b0ed4a
This commit is contained in:
Jessica Lawshe
Copybot
parent
a651eec4c4
commit
c023ba1d90
3 changed files with 130 additions and 59 deletions
|
|
@ -16,19 +16,21 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
line-height: 4rem;
|
||||
.heading-2xl();
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
.heading-xl();
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.333;
|
||||
margin-top: 0;
|
||||
.heading-xl();
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 1.875rem;
|
||||
.heading-lg();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -230,13 +232,6 @@
|
|||
}
|
||||
|
||||
.customer-story-content {
|
||||
h1 {
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.333;
|
||||
}
|
||||
}
|
||||
|
||||
.table-of-contents-section {
|
||||
padding-right: 64px;
|
||||
@media (max-width: @screen-sm-max) {
|
||||
|
|
@ -462,11 +457,6 @@
|
|||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.333;
|
||||
}
|
||||
|
||||
&.features-card-hero-smaller-title {
|
||||
@media (min-width: @screen-lg-min) {
|
||||
// 3rem is the default, this is a workaround for big screen
|
||||
|
|
|
|||
|
|
@ -1288,3 +1288,84 @@
|
|||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.display-lg() {
|
||||
font-size: var(--font-size-13);
|
||||
line-height: var(--line-height-12);
|
||||
}
|
||||
|
||||
.display-md() {
|
||||
font-size: var(--font-size-12);
|
||||
line-height: var(--line-height-11);
|
||||
}
|
||||
|
||||
.display-sm() {
|
||||
font-size: var(--font-size-11);
|
||||
line-height: var(--line-height-10);
|
||||
}
|
||||
|
||||
.display-xs() {
|
||||
font-size: var(--font-size-10);
|
||||
line-height: var(--line-height-09);
|
||||
}
|
||||
|
||||
.heading-2xl() {
|
||||
font-size: var(--font-size-09);
|
||||
line-height: var(--line-height-08);
|
||||
}
|
||||
|
||||
.heading-xl() {
|
||||
font-size: var(--font-size-08);
|
||||
line-height: var(--line-height-07);
|
||||
}
|
||||
|
||||
.heading-lg() {
|
||||
font-size: var(--font-size-07);
|
||||
line-height: var(--line-height-06);
|
||||
}
|
||||
|
||||
.heading-md() {
|
||||
font-size: var(--font-size-06);
|
||||
line-height: var(--line-height-05);
|
||||
}
|
||||
|
||||
.heading-sm() {
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
}
|
||||
|
||||
.heading-xs() {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
.body-lg() {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
.body-base() {
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
}
|
||||
|
||||
.body-sm() {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
|
||||
.body-xs() {
|
||||
font-size: var(--font-size-01);
|
||||
line-height: var(--line-height-01);
|
||||
}
|
||||
|
||||
.override-typography(@override) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
@override();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,56 +93,56 @@
|
|||
--vivid-tangerine: @vivid-tangerine;
|
||||
|
||||
// spacing
|
||||
--spacing-00: @spacing-00;
|
||||
--spacing-01: @spacing-01;
|
||||
--spacing-02: @spacing-02;
|
||||
--spacing-03: @spacing-03;
|
||||
--spacing-04: @spacing-04;
|
||||
--spacing-05: @spacing-05;
|
||||
--spacing-06: @spacing-06;
|
||||
--spacing-07: @spacing-07;
|
||||
--spacing-08: @spacing-08;
|
||||
--spacing-09: @spacing-09;
|
||||
--spacing-10: @spacing-10;
|
||||
--spacing-11: @spacing-11;
|
||||
--spacing-12: @spacing-12;
|
||||
--spacing-13: @spacing-13;
|
||||
--spacing-14: @spacing-14;
|
||||
--spacing-15: @spacing-15;
|
||||
--spacing-16: @spacing-16;
|
||||
--spacing-00: @spacing-00; // 0px
|
||||
--spacing-01: @spacing-01; // 2px
|
||||
--spacing-02: @spacing-02; // 4px
|
||||
--spacing-03: @spacing-03; // 6px
|
||||
--spacing-04: @spacing-04; // 8px
|
||||
--spacing-05: @spacing-05; // 12px
|
||||
--spacing-06: @spacing-06; // 16px
|
||||
--spacing-07: @spacing-07; // 20px
|
||||
--spacing-08: @spacing-08; // 24px
|
||||
--spacing-09: @spacing-09; // 32px
|
||||
--spacing-10: @spacing-10; // 40px
|
||||
--spacing-11: @spacing-11; // 48px
|
||||
--spacing-12: @spacing-12; // 56px
|
||||
--spacing-13: @spacing-13; // 64px
|
||||
--spacing-14: @spacing-14; // 72px
|
||||
--spacing-15: @spacing-15; // 80px
|
||||
--spacing-16: @spacing-16; // 96px
|
||||
|
||||
// layout
|
||||
--header-height: @header-height;
|
||||
|
||||
// font-size
|
||||
--font-size-01: @font-size-01;
|
||||
--font-size-02: @font-size-02;
|
||||
--font-size-03: @font-size-03;
|
||||
--font-size-04: @font-size-04;
|
||||
--font-size-05: @font-size-05;
|
||||
--font-size-06: @font-size-06;
|
||||
--font-size-07: @font-size-07;
|
||||
--font-size-08: @font-size-08;
|
||||
--font-size-09: @font-size-09;
|
||||
--font-size-10: @font-size-10;
|
||||
--font-size-11: @font-size-11;
|
||||
--font-size-12: @font-size-12;
|
||||
--font-size-13: @font-size-13;
|
||||
--font-size-01: @font-size-01; // 0.75rem | 12px
|
||||
--font-size-02: @font-size-02; // 0.875rem | 14px
|
||||
--font-size-03: @font-size-03; // 1rem | 16px
|
||||
--font-size-04: @font-size-04; // 1.125rem | 18px
|
||||
--font-size-05: @font-size-05; // 1.25rem | 20px
|
||||
--font-size-06: @font-size-06; // 1.5rem | 24px
|
||||
--font-size-07: @font-size-07; // 1.875rem | 30px
|
||||
--font-size-08: @font-size-08; // 2.25rem | 36px
|
||||
--font-size-09: @font-size-09; // 3rem | 48px
|
||||
--font-size-10: @font-size-10; // 3.25rem | 52px
|
||||
--font-size-11: @font-size-11; // 3.75rem | 60px
|
||||
--font-size-12: @font-size-12; // 4.5rem | 72px
|
||||
--font-size-13: @font-size-13; // 6rem | 96px
|
||||
--font-size-body-base: @font-size-body-base;
|
||||
|
||||
// line-height
|
||||
--line-height-01: @line-height-01;
|
||||
--line-height-02: @line-height-02;
|
||||
--line-height-03: @line-height-03;
|
||||
--line-height-04: @line-height-04;
|
||||
--line-height-05: @line-height-05;
|
||||
--line-height-06: @line-height-06;
|
||||
--line-height-07: @line-height-07;
|
||||
--line-height-08: @line-height-08;
|
||||
--line-height-09: @line-height-09;
|
||||
--line-height-10: @line-height-10;
|
||||
--line-height-11: @line-height-11;
|
||||
--line-height-12: @line-height-12;
|
||||
--line-height-01: @line-height-01; // 1rem | 16px
|
||||
--line-height-02: @line-height-02; // 1.25rem | 20px
|
||||
--line-height-03: @line-height-03; // 1.5rem | 24px
|
||||
--line-height-04: @line-height-04; // 1.75rem | 28px
|
||||
--line-height-05: @line-height-05; // 2rem | 32px
|
||||
--line-height-06: @line-height-06; // 2.5rem | 40px
|
||||
--line-height-07: @line-height-07; // 3rem | 48px
|
||||
--line-height-08: @line-height-08; // 4rem | 64px
|
||||
--line-height-09: @line-height-09; // 4.25rem | 68px
|
||||
--line-height-10: @line-height-10; // 5rem | 80px
|
||||
--line-height-11: @line-height-11; // 6rem | 96px
|
||||
--line-height-12: @line-height-12; // 8rem | 128px
|
||||
|
||||
// border-radius
|
||||
--border-radius-base-new: @border-radius-base-new;
|
||||
|
|
|
|||
Loading…
Reference in a new issue