Skip to content

Commit a6cdebd

Browse files
bradleytauntbradleytaunt
committed
Set main styling as external file, include font files directly in project, update post details to explain these changes
1 parent 785234e commit a6cdebd

23 files changed

+1265
-19
lines changed

‎_includes/head.html

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<!DOCTYPE html>
2-
<!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->
3-
<html lang="en" class="fonts-loaded" dir="ltr">
4-
<!--#else -->
52
<html lang="en" dir="ltr">
6-
<!--#endif -->
73

84
<head>
95
<meta charset="UTF-8">
@@ -15,13 +11,7 @@
1511
<link rel="icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon">
1612
<link href='{{ site.baseurl }}/feed.xml' rel='alternate' type='application/atom+xml'>
1713
<link rel="canonical" href="{{ site.baseurl }}{{ page.url }}">
18-
<link rel="manifest" href="{{ site.baseurl }}/manifest.json">
19-
{% capture critical %}
20-
{% include style.scss %}
21-
{% endcapture %}
22-
<style>
23-
{{ critical | scssify }}
24-
</style>
14+
<link rel="stylesheet" href="{{ site.baseurl }}/style.css">
2515
</head>
2616

2717
<body>

‎_posts/2018-01-14-default-post.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -169,11 +169,11 @@ ET-Jekyll now uses the `font-display` property to swap out the custom typeface.
169169
font-display: swap;
170170
</pre>
171171

172-
### Critical CSS
172+
### CSS File
173173

174-
All styling for this theme is loaded <code>inline</code> in the header of the document. This ensures the main structure, layout and core elements of ET-Jekyll load instantly and avoid even further "pop-in".
174+
All styling for this theme is loaded inside the `style.css` file (compressed by default). This ensures the main structure, layout and core elements of ET-Jekyll load instantly and avoid even further "pop-in". The `et-book` typeface is pulled in from the `/fonts` directory which helps cache and avoid FOUT.
175175

176-
Any design changes should be made to the <code>style.scss</code> file inside the `_includes` folder.
176+
Any design changes should be made to the <code>style.scss</code> file inside the root directory.
177177

178178
## Final Thoughts
179179

‎fonts/et-book-bold-line-figures.eot

39.9 KB
Binary file not shown.

‎fonts/et-book-bold-line-figures.svg

+243
Loading

‎fonts/et-book-bold-line-figures.ttf

69.3 KB
Binary file not shown.

‎fonts/et-book-bold-line-figures.woff

44.3 KB
Binary file not shown.

‎fonts/et-book-display-italic-old-style-figures.eot

38.4 KB
Binary file not shown.

‎fonts/et-book-display-italic-old-style-figures.svg

+244
Loading

‎fonts/et-book-display-italic-old-style-figures.ttf

72.7 KB
Binary file not shown.

‎fonts/et-book-display-italic-old-style-figures.woff

42.8 KB
Binary file not shown.

‎fonts/et-book-roman-line-figures.eot

38.7 KB
Binary file not shown.

‎fonts/et-book-roman-line-figures.svg

+244
Loading

‎fonts/et-book-roman-line-figures.ttf

70 KB
Binary file not shown.

‎fonts/et-book-roman-line-figures.woff

43 KB
Binary file not shown.

‎fonts/et-book-roman-old-style-figures.eot

38.6 KB
Binary file not shown.

‎fonts/et-book-roman-old-style-figures.svg

+244
Loading

‎fonts/et-book-roman-old-style-figures.ttf

69.7 KB
Binary file not shown.

‎fonts/et-book-roman-old-style-figures.woff

42.9 KB
Binary file not shown.

‎fonts/et-book-semi-bold-old-style-figures.eot

39.8 KB
Binary file not shown.

‎fonts/et-book-semi-bold-old-style-figures.svg

+243
Loading

‎fonts/et-book-semi-bold-old-style-figures.ttf

69.2 KB
Binary file not shown.

‎fonts/et-book-semi-bold-old-style-figures.woff

44.1 KB
Binary file not shown.

‎_includes/style.scss ‎style.scss

+43-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,43 @@
1+
---
2+
# Main styling
3+
---
4+
15
/**************************************
2-
$CRITICAL CSS
6+
$ CUSTOM TYPEFACE
37
/**************************************/
4-
@import url('https://opentype.netlify.app/et-book/index.css');
8+
/* ET Book Regular */
9+
@font-face {
10+
font-family: "et-book";
11+
src: url("/fonts/et-book-roman-line-figures.eot");
12+
src: url("/fonts/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("/fonts/et-book-roman-line-figures.woff") format("woff"), url("/fonts/et-book-roman-line-figures.ttf") format("truetype"), url("/fonts/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
13+
font-weight: normal;
14+
font-style: normal;
15+
font-display: swap;
16+
}
517

18+
/* ET Book Italic */
19+
@font-face {
20+
font-family: "et-book";
21+
src: url("/fonts/et-book-display-italic-old-style-figures.eot");
22+
src: url("/fonts/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("/fonts/et-book-display-italic-old-style-figures.woff") format("woff"), url("/fonts/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("/fonts/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
23+
font-weight: normal;
24+
font-style: italic;
25+
font-display: swap;
26+
}
27+
28+
/* ET Book Bold */
29+
@font-face {
30+
font-family: "et-book";
31+
src: url("/fonts/et-book-bold-line-figures.eot");
32+
src: url("/fonts/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("/fonts/et-book-bold-line-figures.woff") format("woff"), url("/fonts/et-book-bold-line-figures.ttf") format("truetype"), url("/fonts/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
33+
font-weight: 600;
34+
font-style: bold;
35+
font-display: swap;
36+
}
37+
38+
/**************************************
39+
$CRITICAL CSS
40+
/**************************************/
641
* {
742
text-rendering: optimizeLegibility;
843
font-kerning: auto;
@@ -152,7 +187,8 @@ table {
152187
}
153188

154189
/*span*/.marginnote,
155-
/*span*/.sidenote {
190+
/*span*/.sidenote,
191+
figcaption {
156192
font-size: 80%;
157193
left: calc(100% + 4rem);
158194
line-height: 1.3rem;
@@ -189,7 +225,8 @@ table {
189225

190226
figure {
191227
/*span*/.marginnote,
192-
/*span*/.sidenote {
228+
/*span*/.sidenote,
229+
figcaption {
193230
left: auto;
194231
position: relative;
195232
}
@@ -305,7 +342,8 @@ nav {
305342
}
306343

307344
/*span*/.marginnote,
308-
/*span*/.sidenote {
345+
/*span*/.sidenote,
346+
figcaption {
309347
display: block;
310348
left: auto;
311349
margin-top: 1rem;

0 commit comments

Comments
 (0)