personal/werc-1.5.0-tweaks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

played around with style after reading typography guide

Browse Source 
https://practicaltypography.com/typography-in-ten-minutes.html
problem is, loading a custom font results in flashing.
I could preload the font, or load it from a cdn,
but that would add complexity
This commit is contained in:
Nuno Sempere 2023-07-09 01:57:34 +00:00
parent 39e830e1e1
commit b06249161a
26 changed files with 134 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pub/fonts/charter/artifacts/Charter 210112/Charter license.txt Normal file
View File

@ -0,0 +1,3 @@
This is a copy of the Charter fonts which Bitstream contributed to the X consortium. This is the original notice included with the fonts:
(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted permission under all Bitstream propriety rights to use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for any purpose and without restriction; provided, that this notice is left intact on all copies of such fonts and that Bitstream's trademark is acknowledged as shown below on all unmodified copies of the 4 Charter Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.

BIN
pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Charter/Charter Bold Italic.otf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Charter/Charter Bold.otf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Charter/Charter Italic.otf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Charter/Charter Regular.otf Normal file
View File

Binary file not shown.

11
pub/fonts/charter/artifacts/Charter 210112/OTF format (best for Mac OS)/Mac OS Quick Start.txt Normal file
View File

@ -0,0 +1,11 @@
MB Type: Quick Start Instructions
Open one of the adjacent subdirectories to reveal the font files, which all have the .otf file extension.
Option 1: From the main directory of your system drive, open the folder `Library`, then the folder `Fonts`. Drag the fonts into this folder.
Option 2: Open Applications > Font Book. Drag the fonts into the font list that appears.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

BIN
pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Charter/Charter Bold Italic.ttf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Charter/Charter Bold.ttf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Charter/Charter Italic.ttf Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Charter/Charter Regular.ttf Normal file
View File

Binary file not shown.

11
pub/fonts/charter/artifacts/Charter 210112/TTF format (best for Windows)/Windows Quick Start.txt Normal file
View File

@ -0,0 +1,11 @@
MB Type: Quick Start Instructions
Open one of the adjacent subdirectories to reveal the font files, which all have the .ttf file extension.
Option 1: Select the fonts you want to install. Right-click the fonts and select `Install` from the popup menu.
Option 2: Go to the `Start` menu and open `Control Panel > Appearance and Personalization > Fonts`. Drag the fonts into this folder.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

BIN
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/charter_bold.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/charter_bold_italic.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/charter_italic.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/charter_regular.woff2 Normal file
View File

Binary file not shown.

31
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/sample.css Normal file
View File

@ -0,0 +1,31 @@
@font-face {
font-family: charter;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url('charter_regular.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: normal;
font-stretch: normal;
src: url('charter_italic.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url('charter_bold.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: bold;
font-stretch: normal;
src: url('charter_bold_italic.woff2') format('woff2');
}

11
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/Charter/sample.html Normal file
View File

@ -0,0 +1,11 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body style="font-size: 24px">
<p style="font-family: charter">charter_regular.woff2</p>
<p style="font-family: charter"><em>charter_italic.woff2</em></p>
<p style="font-family: charter"><strong>charter_bold.woff2</strong></p>
<p style="font-family: charter"><strong><em>charter_bold_italic.woff2</em></strong></p>
</body>
</html>

19
pub/fonts/charter/artifacts/Charter 210112/WOFF2 format (best for web)/WOFF2 Quick Start.txt Normal file
View File

@ -0,0 +1,19 @@
MB Type: Quick Start Instructions
The process of getting WOFF2 fonts onto your website varies depending on how you're publishing your site.
Roughly, however:
1) Each HTML page needs to load a CSS file that contains `@font-face` declarations for each style of the font that you want to use. The text of the HTML page needs to be annotated with formatting tags that invoke the font.
2) Each `@font-face` declaration needs to map a distinct combination of attributes — `font-family` (= the name of the family), `font-weight` (= regular or bold weight) and `font-style` (= roman or italic) — to a specific WOFF2 file on disk.
THE GOLDEN RULE: The regular, italic, bold, and bold italic styles of a family should all be declared with the same `font-family` name in the respective `@font-face` declarations, so that the web browser understands them as related styles of a single family.
3) The WOFF2 files need to be at the locations specified by the `@font-face` declarations.
There's more than one way to do this. But each subdirectory here contains a "sample.css" and "sample.html" file that shows a simple working example.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

BIN
pub/fonts/charter/artifacts/Charter%20210112.zip Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/charter_bold.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/charter_bold_italic.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/charter_italic.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/charter/charter_regular.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/source-serif/source-serif-pro-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
pub/fonts/source-serif/source-serif-pro-latin.woff2 Normal file
View File

Binary file not shown.

56
pub/style/style.css
View File

@ -1,22 +1,61 @@
/* Font */ /* Fonts */
/*
@font-face {
font-family: charter;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_regular.woff2') format('woff2');
}
@font-face { @font-face {
font-family: 'Source Serif Pro'; font-family: 'Source Serif Pro';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url(https://nunosempere.com/.resources/source-serif-pro-latin-ext.woff2) format('woff2'), src: url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin-ext.woff2) format('woff2'),
url(https://nunosempere.com/.resources/source-serif-pro-latin.woff2) format('woff2'); url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin.woff2) format('woff2');
unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} }
@font-face {
font-family: charter;
font-style: italic;
font-weight: normal;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_italic.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_bold.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: bold;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_bold_italic.woff2') format('woff2');
}
*/
/* Body */ /* Body */
body { body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: serif; /* font-family: 'Source Serif Pro'; */
font-size: 1.5em; /* font-family: 'Times New Roman'; */
font-family: 'serif';
/* font-family: 'charter'; */
font-size: 25px;
background-color: #fcfcfc; background-color: #fcfcfc;
line-height: 130%;
color:#333; color:#333;
} }
@ -31,7 +70,7 @@ header {
} }
header h1 { header h1 {
margin-left: 0.7em; margin: 0.7em 0 1.2em 0.7em;
color:#333; color:#333;
} }
@ -320,8 +359,7 @@ img + em {
} }
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */ /* Set image-frontpage-center size across devices */
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.img-frontpage-center { .img-frontpage-center {
width: 60%; /* 700px * 0.6 = 420px */ width: 60%; /* 700px * 0.6 = 420px */
@ -340,6 +378,8 @@ img + em {
} }
} }
/* General media stuff */
@media screen and (max-width: 1500px) { @media screen and (max-width: 1500px) {
body { body {
display: block; display: block;