Skip to content

Commit

Permalink
Club: implementing fluid typography (#6262)
Browse files Browse the repository at this point in the history 
* Club: implementing fluid typography

* fixing name mistake

* Club: adding link styles.

Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>

* Club: line-heigth change

* Club: theme.json workaround to stylize link inside post-date block

* Club: adding letter spacing

* Club: implemeting explicit bypass for fluid font size calculation WordPress/gutenberg#42757

* Club: tweaking font sizes

* Club: headings font weight

* Club: font size tweaks

* Club: moving font sizes definition away from default font sizes array.

The itention is to keep in the fontSizes array just the sizes defined in the default Gutenberg theme.json file: https://github.com/WordPress/gutenberg/blob/640856bce02f37173f53ad664b3796a3eeb687e5/lib/compat/wordpress-6.1/theme.json#L282-L306

* move letter spacing to heading

Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>
  • Loading branch information
@matiasbenedetto @madhusudhand
matiasbenedetto and madhusudhand authored Aug 5, 2022
1 parent 6817266 commit e80e6cf
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 29 deletions.
4 changes: 4 additions & 0 deletions club/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ GNU General Public License for more details.
-webkit-font-smoothing: antialiased;
}

a {
text-underline-offset: .15em;
}

/*
* Button hover styles.
* Necessary until the following issue is resolved in Gutenberg:
Expand Down
109 changes: 80 additions & 29 deletions club/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@
"gap": {
"horizontal": "min(30px, 5vw)",
"vertical": "min(30px, 5vw)"
},
"fontSizes":{
"default-title": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 2.4038)), 2.5rem)"
}
},
"layout": {
Expand Down Expand Up @@ -129,26 +132,37 @@
]
}
],
"fluid": true,
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
"size": "0.875rem",
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"slug": "small",
"name": "Small"
},
{
"name": "Medium",
"size": "1.5rem",
"slug": "medium"
"size": "1.25rem",
"fluid": {
"min": "1.25rem",
"max": "1.5rem"
},
"slug": "medium",
"name": "Medium"
},
{
"name": "Large",
"size": "1.75rem",
"slug": "large"
"fluid": false,
"slug": "large",
"name": "Large"
},
{
"name": "Extra Large",
"size": "2rem",
"slug": "x-large"
"size": "2.5rem",
"fluid": false,
"slug": "x-large",
"name": "Extra Large"
}
]
}
Expand Down Expand Up @@ -246,7 +260,6 @@
},
"core/heading": {
"typography": {
"fontWeight": "400",
"lineHeight": "1.125"
}
},
Expand Down Expand Up @@ -279,16 +292,25 @@
},
"core/navigation": {
"typography": {
"fontSize": "1.125rem"
"fontSize": "var(--wp--custom--font-sizes--default-title)"
}
},
"core/post-date": {
"color": {
"text": "var(--wp--preset--color--foreground)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)",
"textTransform": "uppercase"
"fontSize": "var(--wp--custom--font-sizes--default-title)",
"textTransform": "uppercase",
"letterSpacing": "-0.04em"

},
"elements": {
"link": {
"typography": {
"textDecoration": "none"
}
}
}
},
"core/post-title": {
Expand All @@ -298,10 +320,9 @@
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.125",
"textDecoration": "underline solid 3px",
"fontWeight": "400"
"fontWeight": "400",
"fontSize": "var(--wp--custom--font-sizes--default-title)"
}
},
"core/pullquote": {
Expand Down Expand Up @@ -365,12 +386,18 @@
}
},
"core/site-title": {
"typography": {
"lineHeight": ".8",
"fontSize": "var(--wp--custom--font-sizes--default-title)"
},
"elements": {
"link": {
"typography": {
"fontSize": "1.125rem",
"fontSize": "var(--wp--custom--font-sizes--default-title)",
"fontWeight": "700",
"textDecoration": "underline solid 1.5px"
"textDecoration": "underline solid 1.5px",
"fontStyle": "italic",
"letterSpacing": "-0.04em"
}
}
}
Expand All @@ -383,7 +410,8 @@
"core/read-more": {
"typography": {
"textTransform": "uppercase",
"lineHeight": "1em"
"fontSize": "var(--wp--custom--font-sizes--default-title)",
"letterSpacing": "-0.04em"
},
"border": {
"color": "var(--wp--preset--color--foreground)",
Expand Down Expand Up @@ -434,40 +462,63 @@
}
}
},
"heading": {
"typography": {
"letterSpacing": "-0.04em"
}
},
"h1": {
"typography": {
"fontSize": "3rem"
"fontSize": "clamp(3.75rem, calc(3.75rem + ((1vw - 0.48rem) * 8.4135)), 8.125rem)",
"fontWeight": "400"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"lineHeight": "0.8"
"fontSize": "clamp(2.5rem, calc(2.5rem + ((1vw - 0.48rem) * 8.4135)), 6.875rem)",
"fontWeight": "400"
}
},
"h3": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
"fontSize": "clamp(1.875rem, calc(1.875rem + ((1vw - 0.48rem) * 1.2019)), 2.5rem)",
"fontWeight": "700"
}
},
"h4": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
"fontSize": "clamp(1.75rem, calc(1.75rem + ((1vw - 0.48rem) * 0.4808)), 2rem)",
"fontWeight": "700"
}
},
"h5": {
"typography": {
"fontSize": "1.125rem"
"fontSize": "1.25rem",
"fontWeight": "700"
}
},
"h6": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
"fontSize": "var(--wp--preset--font-size--small)",
"fontWeight": "700"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--primary)"
},
"typography": {
"textDecoration": "underline solid 1px"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":active": {
"typography": {
"textDecoration": "underline dotted 1px"
}
}
}
},
Expand All @@ -476,7 +527,7 @@
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--spacemono)",
"fontSize": "1.125rem",
"fontSize": "clamp(0.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.7212)), 1.25rem)",
"lineHeight": "1.6"
}
},
Expand Down

0 comments on commit e80e6cf

Please sign in to comment.