├── .gitignore
├── LICENSE
├── README.md
├── crossdomain.xml
├── css
├── .DS_Store
├── 04-vf-samples.css
├── 05-plex-styles.css
├── 06-plex-styles-rwt.css
├── 06-vf-styles.css
├── 07-index-01.css
├── 07-index-02.css
├── 07-vf-styles.css
├── 08-magazine-styles.css
├── 08-meta-styles.css
├── index-01.css
├── index-02.css
├── rwt_vf_styles.css
└── webfonts.css
├── fonts
├── AmstelvarAlpha-VF.ttf
├── AmstelvarAlpha-VF_v1.1.ttf
├── DecovarAlpha-VF.ttf
└── plex-serif
│ ├── IBMPlexSerif-Bold.woff2
│ ├── IBMPlexSerif-BoldItalic.woff2
│ ├── IBMPlexSerif-ExtraLight.woff2
│ ├── IBMPlexSerif-ExtraLightItalic.woff2
│ ├── IBMPlexSerif-Italic.woff2
│ ├── IBMPlexSerif-Light.woff2
│ ├── IBMPlexSerif-LightItalic.woff2
│ ├── IBMPlexSerif-Medium.woff2
│ ├── IBMPlexSerif-MediumItalic.woff2
│ ├── IBMPlexSerif-Regular.woff2
│ ├── IBMPlexSerif-SemiBold.woff2
│ ├── IBMPlexSerif-SemiBoldItalic.woff2
│ ├── IBMPlexSerif-Text.woff2
│ ├── IBMPlexSerif-TextItalic.woff2
│ ├── IBMPlexSerif-Thin.woff2
│ └── IBMPlexSerif-ThinItalic.woff2
├── gulpfile.js
├── images
├── .DS_Store
├── garamond_6pt.png
├── garamond_72pt.png
├── goblet.png
├── goblet_mask.png
└── magazine
│ ├── campy.JPG
│ ├── mountains_back.jpg
│ ├── mountains_front.png
│ ├── munich.jpg
│ ├── puerto_rico.jpg
│ ├── sydney_harbor.jpg
│ ├── vineyard.jpg
│ └── wilanow_palace.jpg
├── index.html
├── ish
├── .gitignore
├── README.md
├── index.php
├── js
│ ├── init-ck.js
│ ├── init.js
│ └── url-handler.js
└── styles.css
├── js
├── .DS_Store
├── main.js
└── vendor
│ ├── .DS_Store
│ ├── fontfaceobserver.js
│ ├── modernizr-2.8.3.min.js
│ ├── modernizr-custom.js
│ └── widowtamer-min.js
├── package.json
├── part-04
└── vf-samples.html
├── part-05
└── index-plex.html
├── part-06
├── index-plex-rwt.html
├── index-vf.html
└── index.html
├── part-07
├── index-01.html
├── index-02.html
└── index-vf.html
├── part-08
├── example-magazine.html
└── index-meta.html
└── scss
├── .DS_Store
├── 04-vf-samples.scss
├── 05-plex-styles.scss
├── 06-plex-styles-rwt.scss
├── 06-vf-styles.scss
├── 07-index-01.scss
├── 07-index-02.scss
├── 07-vf-styles.scss
├── 08-magazine-styles.scss
├── 08-meta-styles.scss
└── rwt_vf_styles.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | # Mac image stores
2 | .DS_Store
3 |
4 | /node_modules
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Jason Pamental
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive Web Typography Variable Font Workshop (short)
2 | Working files for the full-day version of my workshop on using variable fonts and modern CSS techniques.
3 |
4 | ## Initial setup
5 | To make use of the `gulp` process, you need to have `npm` and `gulp` installed.
6 |
7 | Once both are installed, follow these steps:
8 | Open a terminal window and navigate to the project root
9 | Execute the command `npm install`
10 |
11 | ## Running the `gulp` process
12 | If the initial setup has been completed, executing the command `gulp` from the root of the project will start the 'watch' task and the local server with BrowserSync.
13 |
14 | ## Simple Setup (Plain CSS approach)
15 | If you want to skip all the 'build tools' you can just edit the files in the `css` directory instead. Just remember that if you do that and then try the build process later, you will lose any changes you make to `rwt_vf_styles.css` so be sure to make a copy to bring those changes back into the source Sass file (located in `scss/rwt_vf_styles.scss`).
16 |
17 | ## What you'll find here
18 | This repository contains all the sample pages from my workshop, along with some useful tools and supporting files.
19 |
20 | ### Supporting Directories:
21 | - CSS - all the compiled CSS for the project. You can edit these directly but you will lose the changes if you then try out the `build` process
22 | - Fonts - some early versions of variable fonts and Plex, and open-source font from IBM
23 | - Images - images used in the project (all taken/created by me)
24 | - Ish - a really useful tool from Brad Frost for previewing any page in a responsive 'viewer' to help test the responsiveness of your work
25 | - JS - just a few script files to help enhance font loading and typography
26 | - SCSS - the source Sass files for the project
27 |
28 | ### Pages
29 | - index.html - This is an example of a 'finished' page that incorporates all the things covered in the course
30 | - part-04
31 | - vf-samples.html - a page that has examples of individual axes of variation, triggered on hover
32 | - part-05
33 | - index-plex.html - a page that uses Plex, and brings in font loading management that you can tailor to improve the loading experience with Plex
34 | - part-06
35 | - index.html - a copy of a page I wrote and designed about variable fonts, set using FF Meta from Monotype (originally published on CodePen here: https://codepen.io/jpamental/pen/MGEPEL/)
36 | - index-plex-rwt.html - the next evolution of the page from part-05, adding in responsive web typography features like a modular scale that reacts to viewport width and adds fallback font styles
37 | - index-vf.html - the page now using variable fonts and the new custom properties/calculation based typographic system
38 | - part-07
39 | - index-01.html
40 | - index-02.html
41 | - index-vf.html
42 | - part-08
43 | - index-meta.html - the same essay from part-06, but here complete with the CSS
44 | - example-magazine.html - a fictitious outdoor magazine site page, showcasing variable fonts, fluid typography, and a bit of CSS grid
45 |
46 |
--------------------------------------------------------------------------------
/crossdomain.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
--------------------------------------------------------------------------------
/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/css/.DS_Store
--------------------------------------------------------------------------------
/css/04-vf-samples.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* Paragraph variables */
8 | --p-line-height-min: 1.15;
9 | --p-line-height-max: 1.5;
10 | --p-font-size-min: 1.0;
11 | --p-font-size-max: 1.25;
12 | --p-vf-wght: 350;
13 | /* H1 variables */
14 | --h1-line-height-min: 1;
15 | --h1-line-height-max: 1.25;
16 | --h1-font-size-min: 5;
17 | --h1-font-size-max: 10;
18 | --h1-vf-wght-multiplier-s: 2.5;
19 | --h1-vf-wght-multiplier-m: 2.75;
20 | --h1-vf-wght-multiplier-l: 3;
21 | --wght-multiplier: 1; }
22 |
23 | /* Undo some of the Layout width bits */
24 | .section-content {
25 | margin: 0 auto;
26 | padding: 0 0.5em; }
27 |
28 | @media only screen and (min-width: calc( var(--bp-small) * 1em)) {
29 | .section-content {
30 | max-width: 98%; } }
31 |
32 | @media only screen and (min-width: 43.75em) {
33 | .section-content {
34 | max-width: 98%; } }
35 |
36 | @media only screen and (min-width: 56.25em) {
37 | .section-content {
38 | max-width: 98%; } }
39 |
40 | @media only screen and (min-width: 71.875em) {
41 | .section-content {
42 | max-width: 98em; } }
43 |
44 | @media only screen and (min-width: 81.25em) {
45 | .section-content {
46 | max-width: 98em; } }
47 |
48 | html {
49 | font-size: 100%;
50 | background-color: #E9DEC0; }
51 |
52 | body,
53 | p,
54 | th,
55 | td,
56 | ul,
57 | li {
58 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
59 | font-weight: normal;
60 | font-feature-settings: "liga" 1, "kern" 1;
61 | font-style: normal; }
62 |
63 | p {
64 | margin-left: auto;
65 | margin-right: auto;
66 | /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
67 | -ms-word-break: break-all;
68 | word-break: break-all;
69 | /* Non standard for webkit */
70 | word-break: break-word;
71 | -webkit-hyphens: auto;
72 | -moz-hyphens: auto;
73 | -ms-hyphens: auto;
74 | hyphens: auto; }
75 |
76 | /* Variations for font size and line height */
77 | p {
78 | font-size: calc( var(--p-font-size-min) * 1rem);
79 | font-variation-settings: "wght" var(--p-vf-wght), "wdth" 100, "opsz" calc( var(--p-font-size-max) * 16), "grad" 88;
80 | line-height: var(--p-line-height-min);
81 | max-width: 57.5em;
82 | transition: all linear 0.2s; }
83 |
84 | h1, h2, h3, h4, h5, h6 {
85 | color: #3E4F6B;
86 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
87 | font-variation-settings: 'wght' 600, 'wdth' 100, 'opsz' 24, 'grad' 88;
88 | font-weight: normal;
89 | transition: all linear 0.75s; }
90 |
91 | h1,
92 | button {
93 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
94 | font-size: calc( var(--h1-font-size-max) * 1em);
95 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88;
96 | line-height: calc( var(--h1-line-height-max) * 1em);
97 | margin: 0 auto 1em auto;
98 | max-width: 57.5rem;
99 | padding: 0 0 3rem 0; }
100 | h1.demo-wght-bold,
101 | button.demo-wght-bold {
102 | font-weight: calc( var(--p-vf-wght) * var(--wght-multiplier));
103 | font-variation-settings: "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
104 | h1.demo-wght-bold:hover,
105 | button.demo-wght-bold:hover {
106 | font-weight: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l));
107 | font-variation-settings: "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
108 | h1.demo-wght,
109 | button.demo-wght {
110 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--wght-multiplier)), "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
111 | h1.demo-wght:hover,
112 | button.demo-wght:hover {
113 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
114 | h1.demo-wdth-stretch,
115 | button.demo-wdth-stretch {
116 | font-stretch: 75;
117 | font-variation-settings: "wght" 500, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
118 | h1.demo-wdth-stretch:hover,
119 | button.demo-wdth-stretch:hover {
120 | font-stretch: 100;
121 | font-variation-settings: "wght" 500, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
122 | h1.demo-wdth,
123 | button.demo-wdth {
124 | font-variation-settings: "wght" 500, "wdth" 75, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
125 | h1.demo-wdth:hover,
126 | button.demo-wdth:hover {
127 | font-variation-settings: "wght" 500, "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88; }
128 | h1.demo-slnt,
129 | button.demo-slnt {
130 | font-family: "Output Sans VF";
131 | font-variation-settings: "wght" 250, "opsz" calc( var(--h1-font-size-max) * 16), "slnt" 0; }
132 | h1.demo-slnt:hover,
133 | button.demo-slnt:hover {
134 | font-variation-settings: "wght" 250, "opsz" calc( var(--h1-font-size-max) * 16), "slnt" 1000; }
135 | h1.demo-slnt-oblique,
136 | button.demo-slnt-oblique {
137 | font-family: "Output Sans VF";
138 | font-style: oblique 0deg;
139 | font-variation-settings: "wght" 250, "opsz" calc( var(--h1-font-size-max) * 16); }
140 | h1.demo-slnt-oblique:hover,
141 | button.demo-slnt-oblique:hover {
142 | font-style: oblique 20deg;
143 | font-variation-settings: "wght" 250, "opsz" calc( var(--h1-font-size-max) * 16); }
144 | h1.demo-ital,
145 | button.demo-ital {
146 | font-family: "Louvette VF";
147 | font-variation-settings: "wght" 300, "opsz" calc( var(--h1-font-size-max) * 16); }
148 | h1.demo-ital:hover,
149 | button.demo-ital:hover {
150 | font-style: italic;
151 | font-variation-settings: "wght" 300, "opsz" calc( var(--h1-font-size-max) * 16); }
152 | h1.demo-opsz,
153 | button.demo-opsz {
154 | font-size: calc( var(--h1-font-size-min) * 1em);
155 | font-variation-settings: 'wght' 400, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 12, 'grad' 88;
156 | vertical-align: baseline; }
157 | h1.demo-opsz:hover,
158 | button.demo-opsz:hover {
159 | font-size: calc( var(--h1-font-size-max) * 1em);
160 | font-variation-settings: 'wght' 400, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 72, 'grad' 88; }
161 | h1.demo-grad,
162 | button.demo-grad {
163 | font-variation-settings: 'wght' 600, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 24, 'GRAD' 88; }
164 | h1.demo-grad:hover,
165 | button.demo-grad:hover {
166 | font-variation-settings: 'wght' 600, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 24, 'GRAD' 150; }
167 | h1.demo-ascdesc,
168 | button.demo-ascdesc {
169 | font-variation-settings: 'wght' 500, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 60, 'grad' 88; }
170 | h1.demo-ascdesc:hover,
171 | button.demo-ascdesc:hover {
172 | font-variation-settings: 'wght' 500, 'wdth' 100, 'YTLC' 500, 'YTAS' 680, 'YTDE' 190, 'YTUC' 750, 'opsz' 60, 'grad' 88; }
173 | h1.demo-mayhem,
174 | button.demo-mayhem {
175 | font-family: "Decovar VF";
176 | font-size: 9em;
177 | font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 0, 'SKLD' 0, 'TRML' 0, 'SKLA' 0, 'TRMF' 0, 'TRMK' 0, 'BLDB' 0, 'WMX2' 900, 'TRMB' 0, 'TRMA' 0, 'SKLB' 0, 'TRMG' 0, 'TRME' 0; }
178 | h1.demo-mayhem:hover,
179 | button.demo-mayhem:hover {
180 | font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 750, 'SKLD' 0, 'TRML' 250, 'SKLA' 1000, 'TRMF' 250, 'TRMK' 250, 'BLDB' 1000, 'WMX2' 750, 'TRMB' 500, 'TRMA' 500, 'SKLB' 1000, 'TRMG' 750, 'TRME' 500; }
181 | h1.demo-viewport,
182 | button.demo-viewport {
183 | --h1-font-size-max: 7;
184 | font-size: 2.5vw;
185 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88;
186 | margin-left: 5%;
187 | max-width: 25vw;
188 | border: solid 5px;
189 | border-radius: 2rem;
190 | padding: 3rem 1rem 1rem 1rem;
191 | height: 30rem; }
192 | h1.demo-viewport:hover,
193 | button.demo-viewport:hover {
194 | border-radius: 1rem;
195 | font-size: 9vw;
196 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" 100, "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750, "opsz" calc( var(--h1-font-size-max) * 16), "grad" 88;
197 | height: 35rem;
198 | max-width: 90vw; }
199 | h1.demo-button,
200 | button.demo-button {
201 | transition: all linear 0.5s;
202 | padding: .5em 1em;
203 | border-radius: .25em;
204 | max-width: none;
205 | position: relative;
206 | z-index: 1;
207 | background: linear-gradient(to bottom, #e1e1f1 0%, #d9d9e9 34%, #b1b1c1 100%);
208 | font-variation-settings: 'wght' 600, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 60, 'GRAD' 88; }
209 | h1.demo-button::before,
210 | button.demo-button::before {
211 | position: absolute;
212 | content: "";
213 | top: 0;
214 | right: 0;
215 | bottom: 0;
216 | left: 0;
217 | border-radius: .25em;
218 | background: linear-gradient(to bottom, #b1b1c1 0%, #a9a9b9 34%, #818191 100%);
219 | z-index: -1;
220 | transition: opacity 0.5s linear;
221 | opacity: 0; }
222 | h1.demo-button:hover,
223 | button.demo-button:hover {
224 | cursor: pointer;
225 | font-variation-settings: 'wght' 600, 'wdth' 100, 'YTLC' 500, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'opsz' 60, 'GRAD' 150; }
226 | h1.demo-button:hover::before,
227 | button.demo-button:hover::before {
228 | opacity: 1; }
229 |
230 | @-webkit-keyframes pulse {
231 | 0% {
232 | --wght-multiplier: 1; }
233 | 70% {
234 | --wght-multiplier: 2; }
235 | 100% {
236 | --wght-multiplier: 3; } }
237 |
238 | @keyframes pulse {
239 | 0% {
240 | --wght-multiplier: 1; }
241 | 70% {
242 | --wght-multiplier: 2; }
243 | 100% {
244 | --wght-multiplier: 3; } }
245 |
--------------------------------------------------------------------------------
/css/05-plex-styles.css:
--------------------------------------------------------------------------------
1 | /* Undo some of the Layout width bits */
2 | .section-content {
3 | margin: 0 auto;
4 | padding: 0 0.5em; }
5 |
6 | @media only screen and (min-width: 24.15em) {
7 | .section-content {
8 | max-width: 98%; } }
9 |
10 | @media only screen and (min-width: 43.75em) {
11 | .section-content {
12 | max-width: 98%; } }
13 |
14 | @media only screen and (min-width: 60.25em) {
15 | .section-content {
16 | max-width: 98%; } }
17 |
18 | @media only screen and (min-width: 75em) {
19 | .section-content {
20 | max-width: 98em; } }
21 |
22 | html {
23 | background-color: #fbfbf6;
24 | color: #3c3d31;
25 | font-size: 100%; }
26 |
27 | body {
28 | padding-top: 5rem; }
29 |
30 | body,
31 | p,
32 | th,
33 | td,
34 | ul,
35 | li {
36 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
37 | font-weight: normal;
38 | font-style: normal; }
39 | .wf-inactive body, .wf-inactive
40 | p, .wf-inactive
41 | th, .wf-inactive
42 | td, .wf-inactive
43 | ul, .wf-inactive
44 | li {
45 | font-family: Georgia, "New Times Roman", serif; }
46 |
47 | .inverse {
48 | background-color: #3c3d31;
49 | color: #fbfbf6; }
50 |
51 | p {
52 | margin-left: auto;
53 | margin-right: auto;
54 | max-width: 38rem;
55 | transition: all linear 0.2s;
56 | hyphens: auto;
57 | font-feature-settings: "liga" 1, "kern" 1; }
58 |
59 | /* Variations and variables */
60 | p {
61 | font-size: 1.125em;
62 | line-height: 1.5; }
63 | .wf-inactive p {
64 | font-size: 1.2em;
65 | line-height: 1.475; }
66 |
67 | /* Generic header styles */
68 | h1, h2, h3, h4, h5, h6 {
69 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
70 | font-weight: bold; }
71 | .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4, .wf-inactive h5, .wf-inactive h6 {
72 | font-family: Georgia, "New Times Roman", serif; }
73 |
74 | h1 {
75 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
76 | font-size: 4em;
77 | line-height: 1.1;
78 | margin: 1rem auto;
79 | max-width: 70rem; }
80 | .wf-inactive h1 {
81 | font-family: Georgia, "New Times Roman", serif;
82 | letter-spacing: -.5px; }
83 |
84 | h2 {
85 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
86 | font-size: 3em;
87 | line-height: 1.2;
88 | margin: 0 auto 2rem auto;
89 | max-width: 70rem; }
90 | .wf-inactive h2 {
91 | font-family: Georgia, "New Times Roman", serif;
92 | letter-spacing: -1px; }
93 |
94 | blockquote {
95 | float: right;
96 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
97 | font-size: 5.5vw;
98 | line-height: .95;
99 | margin: 0 12vw 2rem 2rem;
100 | max-width: 29.5vw;
101 | transition: all linear 0.2s; }
102 | .wf-inactive blockquote {
103 | font-family: Georgia, "New Times Roman", serif; }
104 | blockquote.right {
105 | float: right;
106 | margin-left: 2rem;
107 | margin-right: 12vw; }
108 | blockquote.left {
109 | float: left;
110 | margin-left: 12vw;
111 | margin-right: 2rem; }
112 | blockquote .well-used {
113 | font-size: 1.33em;
114 | line-height: .75; }
115 | blockquote .invisible {
116 | font-size: 1.66em;
117 | font-weight: bold;
118 | line-height: .75; }
119 |
120 | img {
121 | height: auto;
122 | max-width: 100%;
123 | width: 100%; }
124 |
125 | h2 + p {
126 | margin-top: 1em; }
127 |
128 | /* Section end styles */
129 | .section-end:after {
130 | color: #777;
131 | content: "\00a7";
132 | display: block;
133 | font-family: Georgia, "New Times Roman", serif;
134 | font-size: 1.5em;
135 | font-weight: 300;
136 | margin-top: 1em;
137 | text-align: center; }
138 |
139 | /* Initial Cap styles */
140 | .article-detail.initial p:first-of-type:first-letter {
141 | float: left;
142 | padding-right: 0.05em;
143 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
144 | font-size: 5em;
145 | line-height: .925;
146 | margin-bottom: -.1em; }
147 | .wf-inactive .article-detail.initial p:first-of-type:first-letter {
148 | font-family: Georgia, "New Times Roman", serif;
149 | font-size: 4.95em; }
150 |
151 | /* Content end styles */
152 | .content-area p:last-child:after {
153 | color: #777;
154 | content: "\2766";
155 | display: block;
156 | font-family: Georgia, "New Times Roman", serif;
157 | font-size: 1.25em;
158 | font-style: italic;
159 | font-weight: 300;
160 | line-height: .75;
161 | margin-top: 1rem;
162 | margin-bottom: 2rem;
163 | text-align: center; }
164 |
165 | /* Goblet and max-width wrapper */
166 | .figure-wrapper {
167 | font-size: 1em;
168 | margin-left: auto;
169 | margin-right: auto;
170 | max-width: 38em; }
171 |
172 | /* CSS shape outline for the goblet */
173 | .goblet {
174 | float: left;
175 | margin: 0 1.5rem 0 -17.5%;
176 | width: 35%;
177 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
178 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%); }
179 |
--------------------------------------------------------------------------------
/css/06-plex-styles-rwt.css:
--------------------------------------------------------------------------------
1 | /* Undo some of the Layout width bits */
2 | .section-content {
3 | margin: 0 auto;
4 | padding: 0 0.5em; }
5 |
6 | @media only screen and (min-width: 24.15em) {
7 | .section-content {
8 | max-width: 98%; } }
9 |
10 | @media only screen and (min-width: 43.75em) {
11 | .section-content {
12 | max-width: 98%; } }
13 |
14 | @media only screen and (min-width: 60.25em) {
15 | .section-content {
16 | max-width: 98%; } }
17 |
18 | @media only screen and (min-width: 75em) {
19 | .section-content {
20 | max-width: 98em; } }
21 |
22 | html {
23 | background-color: #fbfbf6;
24 | color: #3c3d31;
25 | font-size: 100%; }
26 |
27 | body {
28 | padding-top: 5rem; }
29 |
30 | body,
31 | p,
32 | th,
33 | td,
34 | ul,
35 | li {
36 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
37 | font-weight: normal;
38 | font-style: normal; }
39 | .wf-inactive body, .wf-inactive
40 | p, .wf-inactive
41 | th, .wf-inactive
42 | td, .wf-inactive
43 | ul, .wf-inactive
44 | li {
45 | font-family: Georgia, "New Times Roman", serif; }
46 |
47 | .inverse {
48 | background-color: #3c3d31;
49 | color: #fbfbf6; }
50 |
51 | p {
52 | margin-left: auto;
53 | margin-right: auto;
54 | max-width: 38rem;
55 | transition: all linear 0.2s;
56 | hyphens: auto;
57 | font-feature-settings: "liga" 1, "kern" 1; }
58 |
59 | /* Variations and variables */
60 | p {
61 | font-size: 1em;
62 | line-height: 1.15; }
63 | .wf-inactive p {
64 | font-size: 1.05em;
65 | line-height: 1.125; }
66 | @media screen and (min-width: 24.15em) {
67 | p {
68 | line-height: 1.3; }
69 | .wf-inactive p {
70 | line-height: 1.2; } }
71 | @media (min-width: 60.25em) {
72 | p {
73 | font-size: 1.125em;
74 | line-height: 1.5; }
75 | .wf-inactive p {
76 | font-size: 1.2em;
77 | line-height: 1.475; } }
78 | @media (min-width: 75em) {
79 | p {
80 | font-size: 1.25em; }
81 | .wf-inactive p {
82 | font-size: 1.32em;
83 | line-height: 1.45;
84 | word-spacing: 1px; } }
85 |
86 | /* Generic header styles */
87 | h1, h2, h3, h4, h5, h6 {
88 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
89 | font-weight: bold; }
90 | .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4, .wf-inactive h5, .wf-inactive h6 {
91 | font-family: Georgia, "New Times Roman", serif; }
92 |
93 | h1 {
94 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
95 | font-size: 2em;
96 | line-height: .95;
97 | margin: 1rem auto;
98 | max-width: 50rem; }
99 | .wf-inactive h1 {
100 | font-family: Georgia, "New Times Roman", serif;
101 | letter-spacing: -.5px; }
102 | @media screen and (min-width: 24.15em) {
103 | h1 {
104 | font-size: 2.5em;
105 | line-height: 1; } }
106 | @media screen and (min-width: 43.75em) {
107 | h1 {
108 | font-size: 3.25em;
109 | max-width: 60rem; }
110 | .wf-inactive h1 {
111 | font-family: Georgia, "New Times Roman", serif;
112 | letter-spacing: normal; } }
113 | @media screen and (min-width: 60.25em) {
114 | h1 {
115 | font-size: 4em;
116 | line-height: 1.1;
117 | max-width: 70rem; } }
118 | @media (min-width: 75em) {
119 | h1 {
120 | font-size: 5em;
121 | max-width: 75rem; }
122 | .wf-inactive h1 {
123 | letter-spacing: -1px; } }
124 |
125 | h2 {
126 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
127 | font-size: 1.5em;
128 | line-height: 1.15;
129 | margin: 0 auto 2rem auto;
130 | max-width: 50rem; }
131 | .wf-inactive h2 {
132 | font-family: Georgia, "New Times Roman", serif;
133 | letter-spacing: -.75px; }
134 | @media screen and (min-width: 24.15em) {
135 | h2 {
136 | font-size: 2em; } }
137 | @media screen and (min-width: 43.75em) {
138 | h2 {
139 | font-size: 2.5em;
140 | line-height: 1.2;
141 | max-width: 60rem; }
142 | .wf-inactive h2 {
143 | letter-spacing: -1px; } }
144 | @media screen and (min-width: 60.25em) {
145 | h2 {
146 | font-size: 3em;
147 | max-width: 70rem; } }
148 | @media (min-width: 75em) {
149 | h2 {
150 | font-size: 3.5em;
151 | line-height: 1.25;
152 | max-width: 75rem; } }
153 |
154 | blockquote {
155 | float: right;
156 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
157 | font-size: 5.5vw;
158 | line-height: 1.1;
159 | margin: 0 5vw 1rem .5rem;
160 | max-width: 45vw;
161 | transition: all linear 0.2s; }
162 | .wf-inactive blockquote {
163 | font-family: Georgia, "New Times Roman", serif; }
164 | blockquote.right {
165 | float: right;
166 | margin-left: .5rem;
167 | margin-right: 5vw; }
168 | blockquote.left {
169 | float: left;
170 | margin-left: 5vw;
171 | margin-right: .5rem; }
172 | blockquote .well-used {
173 | font-size: 1em; }
174 | blockquote .invisible {
175 | font-size: 1.125em;
176 | font-weight: bold; }
177 | @media screen and (min-width: 24.15em) {
178 | blockquote {
179 | line-height: 1;
180 | margin: 0 5vw .5rem .5rem;
181 | max-width: 47.5vw; }
182 | blockquote.right {
183 | margin-left: .5rem;
184 | margin-right: 5vw; }
185 | blockquote.left {
186 | margin-left: 5vw;
187 | margin-right: .5rem; }
188 | blockquote .well-used {
189 | font-size: 1.33em; }
190 | blockquote .invisible {
191 | font-size: 1.55em; } }
192 | @media (min-width: 60.25em) {
193 | blockquote {
194 | line-height: .95;
195 | margin: 0 12vw 2rem 2rem;
196 | max-width: 29.5vw; }
197 | blockquote.right {
198 | margin-left: 2rem;
199 | margin-right: 12vw; }
200 | blockquote.left {
201 | margin-left: 12vw;
202 | margin-right: 2rem; }
203 | blockquote .well-used {
204 | font-size: 1.33em;
205 | line-height: .75; }
206 | blockquote .invisible {
207 | font-size: 1.66em;
208 | line-height: .75; } }
209 |
210 | img {
211 | height: auto;
212 | max-width: 100%;
213 | width: 100%; }
214 |
215 | h2 + p {
216 | margin-top: 1em; }
217 |
218 | /* Section end styles */
219 | .section-end:after {
220 | color: #777;
221 | content: "\00a7";
222 | display: block;
223 | font-family: Georgia, "New Times Roman", serif;
224 | font-size: 1.5em;
225 | font-weight: 300;
226 | margin-top: 1em;
227 | text-align: center; }
228 |
229 | /* Initial Cap styles */
230 | .article-detail.initial p:first-of-type:first-letter {
231 | float: left;
232 | padding-right: 0.05em;
233 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
234 | font-size: 2.7em;
235 | line-height: .9;
236 | margin-bottom: -.1em; }
237 | .wf-inactive .article-detail.initial p:first-of-type:first-letter {
238 | font-family: Georgia, "New Times Roman", serif; }
239 | @media screen and (min-width: 43.75em) {
240 | .article-detail.initial p:first-of-type:first-letter {
241 | font-size: 4.25em; }
242 | .wf-inactive .article-detail.initial p:first-of-type:first-letter {
243 | font-size: 4.2em; } }
244 | @media (min-width: 60.25em) {
245 | .article-detail.initial p:first-of-type:first-letter {
246 | font-size: 5em;
247 | line-height: .925; }
248 | .wf-inactive .article-detail.initial p:first-of-type:first-letter {
249 | font-size: 4.95em; } }
250 |
251 | /* Content end styles */
252 | .content-area p:last-child:after {
253 | color: #777;
254 | content: "\2766";
255 | display: block;
256 | font-family: Georgia, "New Times Roman", serif;
257 | font-size: 1.25em;
258 | font-style: italic;
259 | font-weight: 300;
260 | line-height: .75;
261 | margin-top: 1rem;
262 | margin-bottom: 2rem;
263 | text-align: center; }
264 |
265 | /* Goblet and max-width wrapper */
266 | .figure-wrapper {
267 | margin-left: auto;
268 | margin-right: auto;
269 | max-width: 38em; }
270 | @media (min-width: 60.25em) {
271 | .figure-wrapper {
272 | font-size: 1em; } }
273 | @media (min-width: 75em) {
274 | .figure-wrapper {
275 | font-size: 1.25em; } }
276 |
277 | /* CSS shape outline for the goblet */
278 | .goblet {
279 | float: left;
280 | margin: 0 1.5rem 0 0;
281 | width: 25%;
282 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
283 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%); }
284 | @media screen and (min-width: 60.25em) {
285 | .goblet {
286 | margin: 0 1.5rem 0 -17.5%;
287 | width: 35%;
288 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
289 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%); } }
290 |
--------------------------------------------------------------------------------
/css/06-vf-styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* text GRAD */
8 | --text-GRAD: 88;
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 | --p-vf-wdth: 100;
16 | /* H1 variables */
17 | --h1-line-height-min: .95;
18 | --h1-line-height-max: 1.05;
19 | --h1-font-size-min: 2.0;
20 | --h1-font-size-max: 5;
21 | --h1-vf-wght-multiplier-s: 2;
22 | --h1-vf-wght-multiplier-m: 2.25;
23 | --h1-vf-wght-multiplier-l: 2.5;
24 | --h1-vf-wdth: 100;
25 | /* H2 variables */
26 | --h2-line-height-min: 1.15;
27 | --h2-line-height-max: 1.25;
28 | --h2-font-size-min: 1.5;
29 | --h2-font-size-max: 3.5;
30 | --h2-vf-wght-multiplier-s: 1.25;
31 | --h2-vf-wght-multiplier-m: 1.5;
32 | --h2-vf-wght-multiplier-l: 1.75;
33 | --h2-vf-wdth: 100;
34 | /* Dropcap variables */
35 | --dc-line-height-min: .9;
36 | --dc-line-height-max: .95;
37 | --dc-font-size-min: 2.7;
38 | --dc-font-size-max: 5;
39 | /* Blockquote variables */
40 | --bq-line-height-min: 1.1;
41 | --bq-line-height-max: .95;
42 | --bq-font-size-min: 2.7;
43 | --bq-font-size-max: 5; }
44 |
45 | .graded {
46 | --text-GRAD: 150; }
47 |
48 | /* Undo some of the Layout width bits */
49 | .section-content {
50 | margin: 0 auto;
51 | padding: 0 0.5em; }
52 |
53 | @media only screen and (min-width: 24.15em) {
54 | .section-content {
55 | max-width: 98%; } }
56 |
57 | @media only screen and (min-width: 43.75em) {
58 | .section-content {
59 | max-width: 98%; } }
60 |
61 | @media only screen and (min-width: 60.25em) {
62 | .section-content {
63 | max-width: 98%; } }
64 |
65 | @media only screen and (min-width: 75em) {
66 | .section-content {
67 | max-width: 98em; } }
68 |
69 | html {
70 | background-color: #fbfbf6;
71 | color: #3c3d31;
72 | font-size: 100%; }
73 |
74 | body {
75 | padding-top: 5rem; }
76 |
77 | body,
78 | p,
79 | th,
80 | td,
81 | ul,
82 | li {
83 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
84 | font-weight: normal;
85 | font-style: normal; }
86 |
87 | .inverse {
88 | background-color: #3c3d31;
89 | color: #fbfbf6; }
90 |
91 | p {
92 | margin-left: auto;
93 | margin-right: auto;
94 | max-width: 38em;
95 | transition: all linear 0.2s;
96 | hyphens: auto; }
97 |
98 | /* Variations and variables */
99 | p {
100 | font-size: calc( var(--p-font-size-min) * 1rem);
101 | font-variation-settings: "wght" var(--p-vf-wght), "wdth" calc( var(--p-vf-wdth) * .85), "GRAD" var(--text-GRAD);
102 | line-height: var(--p-line-height-min); }
103 | .inverse p {
104 | --text-GRAD: 120; }
105 | @media screen and (min-width: 24.15em) {
106 | p {
107 | font-variation-settings: "wght" var(--p-vf-wght), "wdth" calc( var(--p-vf-wdth) * .90), "GRAD" var(--text-GRAD);
108 | line-height: calc(( var(--p-line-height-min) * 1em ) + ( var(--p-line-height-max) - var(--p-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) ))); } }
109 | @media (min-width: 60.25em) {
110 | p {
111 | font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
112 | font-variation-settings: "wght" var(--p-vf-wght), "wdth" calc( var(--p-vf-wdth) * 1), "GRAD" var(--text-GRAD);
113 | line-height: var(--p-line-height-max); } }
114 | @media (min-width: 75em) {
115 | p {
116 | font-size: calc( var(--p-font-size-max) * 1em); } }
117 |
118 | /* Generic header styles */
119 | h1, h2, h3, h4, h5, h6 {
120 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
121 | font-weight: normal;
122 | font-variation-settings: "wght" 600, "wdth" 100, "GRAD" var(--text-GRAD);
123 | transition: all linear 0.2s; }
124 |
125 | h1 {
126 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
127 | font-size: calc( var(--h1-font-size-min) * 1em);
128 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s)), "wdth" calc( var(--h1-vf-wdth) * .75), "GRAD" var(--text-GRAD);
129 | line-height: var(--h1-line-height-min);
130 | margin: 1rem auto;
131 | max-width: 50rem; }
132 | .inverse h1 {
133 | --text-GRAD: 100; }
134 | @media screen and (min-width: 24.15em) {
135 | h1 {
136 | line-height: calc(( var(--h1-line-height-min) * 1em ) + ( var(--h1-line-height-max) - var(--h1-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
137 | font-size: calc(( var(--h1-font-size-min) * 1em ) + ( var(--h1-font-size-max) - var(--h1-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) ))); } }
138 | @media screen and (min-width: 43.75em) {
139 | h1 {
140 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-m)), "wdth" calc( var(--h1-vf-wdth) * .82), "GRAD" var(--text-GRAD);
141 | max-width: 60rem; } }
142 | @media screen and (min-width: 60.25em) {
143 | h1 {
144 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" calc( var(--h1-vf-wdth) * .94), "GRAD" var(--text-GRAD);
145 | line-height: var(--h1-line-height-max);
146 | max-width: 70rem; } }
147 | @media (min-width: 75em) {
148 | h1 {
149 | font-size: calc( var(--h1-font-size-max) * 1em);
150 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)), "wdth" calc( var(--h1-vf-wdth) * 1), "GRAD" var(--text-GRAD);
151 | line-height: var(--h1-line-height-max);
152 | max-width: 75rem; } }
153 |
154 | h2 {
155 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
156 | font-size: calc( var(--h2-font-size-min) * 1em);
157 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-s)), "wdth" calc( var(--h2-vf-wdth) * .80), "GRAD" var(--text-GRAD);
158 | line-height: var(--h2-line-height-min);
159 | margin: 0 auto 2rem auto;
160 | max-width: 50rem; }
161 | .inverse h2 {
162 | --text-GRAD: 100; }
163 | @media screen and (min-width: 24.15em) {
164 | h2 {
165 | line-height: calc(( var(--h2-line-height-min) * 1em ) + ( var(--h2-line-height-max) - var(--h2-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
166 | font-size: calc(( var(--h2-font-size-min) * 1em ) + ( var(--h2-font-size-max) - var(--h2-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) ))); } }
167 | @media screen and (min-width: 43.75em) {
168 | h2 {
169 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-m)), "wdth" calc( var(--h2-vf-wdth) * .90), "GRAD" var(--text-GRAD);
170 | max-width: 60rem; } }
171 | @media screen and (min-width: 60.25em) {
172 | h2 {
173 | max-width: 70rem; } }
174 | @media (min-width: 75em) {
175 | h2 {
176 | font-size: calc( var(--h2-font-size-max) * 1em);
177 | font-variation-settings: "wght" calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-l)), "wdth" calc( var(--h2-vf-wdth) * 1), "GRAD" var(--text-GRAD);
178 | line-height: var(--h2-line-height-max);
179 | max-width: 75rem; } }
180 |
181 | blockquote {
182 | float: right;
183 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
184 | font-size: 6.5vw;
185 | font-variation-settings: "wght" 400, "wdth" 80, "GRAD" var(--text-GRAD);
186 | line-height: var(--bq-line-height-min);
187 | margin: 0 5vw 1rem .5rem;
188 | max-width: 45vw;
189 | transition: all linear 0.2s; }
190 | blockquote.right {
191 | float: right;
192 | margin-left: .5rem;
193 | margin-right: 5vw; }
194 | blockquote.left {
195 | float: left;
196 | margin-left: 5vw;
197 | margin-right: .5rem; }
198 | blockquote .well-used {
199 | font-size: 1.25em;
200 | font-variation-settings: "wght" 350, "wdth" 80, "GRAD" var(--text-GRAD); }
201 | blockquote .invisible {
202 | font-size: 1.5em;
203 | font-variation-settings: "wght" 400, "wdth" 80, "GRAD" var(--text-GRAD); }
204 | @media screen and (min-width: 24.15em) {
205 | blockquote {
206 | line-height: calc(( var(--bq-line-height-min) * 1em ) + ( var(--bq-line-height-max) - var(--bq-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
207 | font-variation-settings: "wght" 350, "wdth" 80, "GRAD" var(--text-GRAD);
208 | margin: 0 5vw .5rem .5rem;
209 | max-width: 47.5vw; }
210 | blockquote.right {
211 | margin-left: .5rem;
212 | margin-right: 5vw; }
213 | blockquote.left {
214 | margin-left: 5vw;
215 | margin-right: .5rem; }
216 | blockquote .well-used {
217 | font-size: 1.33em;
218 | font-variation-settings: "wght" 450, "wdth" 80, "GRAD" var(--text-GRAD); }
219 | blockquote .invisible {
220 | font-size: 1.55em;
221 | font-variation-settings: "wght" 425, "wdth" 85, "GRAD" var(--text-GRAD); } }
222 | @media (min-width: 60.25em) {
223 | blockquote {
224 | line-height: var(--bq-line-height-max);
225 | font-variation-settings: "wght" 300, "wdth" 80, "GRAD" var(--text-GRAD);
226 | margin: 0 12vw 2rem 2rem;
227 | max-width: 29.5vw; }
228 | blockquote.right {
229 | margin-left: 2rem;
230 | margin-right: 12vw; }
231 | blockquote.left {
232 | margin-left: 12vw;
233 | margin-right: 2rem; }
234 | blockquote .well-used {
235 | font-size: 1.33em;
236 | font-variation-settings: "wght" 400, "wdth" 85, "GRAD" var(--text-GRAD);
237 | line-height: .75; }
238 | blockquote .invisible {
239 | font-size: 1.66em;
240 | font-variation-settings: "wght" 325, "wdth" 85, "GRAD" var(--text-GRAD);
241 | line-height: .75; } }
242 |
243 | img {
244 | height: auto;
245 | max-width: 100%;
246 | width: 100%; }
247 |
248 | h2 + p {
249 | margin-top: 1em; }
250 |
251 | /* Section end styles */
252 | .section-end:after {
253 | color: #777;
254 | content: "\00a7";
255 | display: block;
256 | font-family: Georgia, "New Times Roman", serif;
257 | font-size: 1.5em;
258 | font-weight: 300;
259 | margin-top: 1em;
260 | text-align: center; }
261 |
262 | /* Initial Cap styles */
263 | .article-detail.initial p:first-of-type:first-letter {
264 | float: left;
265 | padding-right: 0.05em;
266 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
267 | font-variation-settings: "wght" 650, "wdth" 100, "GRAD" var(--text-GRAD);
268 | font-size: 2.7em;
269 | line-height: var(--dc-line-height-min);
270 | margin-bottom: -.1em; }
271 | @media screen and (min-width: 24.15em) {
272 | .article-detail.initial p:first-of-type:first-letter {
273 | font-size: calc(( var(--dc-font-size-min) * 1em ) + ( var(--dc-font-size-max) - var(--dc-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
274 | line-height: calc(( var(--dc-line-height-min) * 1em ) + ( var(--dc-line-height-max) - var(--dc-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) ))); } }
275 | @media screen and (min-width: 43.75em) {
276 | .article-detail.initial p:first-of-type:first-letter {
277 | font-variation-settings: "wght" 670, "wdth" 100, "GRAD" var(--text-GRAD); } }
278 | @media (min-width: 60.25em) {
279 | .article-detail.initial p:first-of-type:first-letter {
280 | font-size: calc( var(--dc-font-size-max) * 1em);
281 | font-variation-settings: "wght" 850, "wdth" 100, "GRAD" var(--text-GRAD);
282 | line-height: var(--dc-line-height-max); } }
283 |
284 | /* Content end styles */
285 | .content-area p:last-child:after {
286 | color: #777;
287 | content: "\2766";
288 | display: block;
289 | font-family: Georgia, "New Times Roman", serif;
290 | font-size: 1.25em;
291 | font-style: italic;
292 | font-weight: 300;
293 | line-height: .75;
294 | margin-top: 1rem;
295 | margin-bottom: 2rem;
296 | text-align: center; }
297 |
298 | /* Goblet and max-width wrapper */
299 | .figure-wrapper {
300 | margin-left: auto;
301 | margin-right: auto;
302 | max-width: 38em; }
303 | @media (min-width: 60.25em) {
304 | .figure-wrapper {
305 | font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) ))); } }
306 | @media (min-width: 75em) {
307 | .figure-wrapper {
308 | font-size: calc( var(--p-font-size-max) * 1em); } }
309 |
310 | /* CSS shape outline for the goblet */
311 | .goblet {
312 | float: left;
313 | margin: 0 1.5rem 0 0;
314 | width: 25%;
315 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
316 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%); }
317 | @media screen and (min-width: 60.25em) {
318 | .goblet {
319 | margin: 0 1.5rem 0 -17.5%;
320 | width: 35%;
321 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
322 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%); } }
323 |
--------------------------------------------------------------------------------
/css/07-index-01.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* text GRAD */
8 | --text-GRAD: 88;
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 | --p-vf-wdth: 100;
16 | /* H1 variables */
17 | --h1-line-height-min: .95;
18 | --h1-line-height-max: 1.05;
19 | --h1-font-size-min: 2.0;
20 | --h1-font-size-max: 5;
21 | --h1-vf-wght-multiplier-s: 2;
22 | --h1-vf-wght-multiplier-m: 2.25;
23 | --h1-vf-wght-multiplier-l: 2.5;
24 | --h1-vf-wdth: 100;
25 | /* H2 variables */
26 | --h2-line-height-min: 1.15;
27 | --h2-line-height-max: 1.25;
28 | --h2-font-size-min: 1.5;
29 | --h2-font-size-max: 3.5;
30 | --h2-vf-wght-multiplier-s: 1.25;
31 | --h2-vf-wght-multiplier-m: 1.5;
32 | --h2-vf-wght-multiplier-l: 1.75;
33 | --h2-vf-wdth: 100;
34 | /* Dropcap variables */
35 | --dc-line-height-min: .9;
36 | --dc-line-height-max: .95;
37 | --dc-font-size-min: 2.7;
38 | --dc-font-size-max: 5;
39 | /* Blockquote variables */
40 | --bq-line-height-min: 1.1;
41 | --bq-line-height-max: .95;
42 | --bq-font-size-min: 2.7;
43 | --bq-font-size-max: 5; }
44 |
45 | .graded {
46 | --text-GRAD: 150; }
47 |
48 | /* Undo some of the Layout width bits */
49 | .section-content {
50 | margin: 0 auto;
51 | padding: 0 0.5em; }
52 |
53 | @media only screen and (min-width: 24.15em) {
54 | .section-content {
55 | max-width: 98%; } }
56 |
57 | @media only screen and (min-width: 43.75em) {
58 | .section-content {
59 | max-width: 98%; } }
60 |
61 | @media only screen and (min-width: 60.25em) {
62 | .section-content {
63 | max-width: 98%; } }
64 |
65 | @media only screen and (min-width: 75em) {
66 | .section-content {
67 | max-width: 98em; } }
68 |
69 | html {
70 | background-color: #fbfbf6;
71 | color: #3c3d31;
72 | font-size: 100%; }
73 |
74 | body {
75 | padding-top: 5rem; }
76 |
77 | body,
78 | p,
79 | th,
80 | td,
81 | ul,
82 | li {
83 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
84 | font-weight: normal;
85 | font-style: normal; }
86 |
87 | .inverse {
88 | background-color: #3c3d31;
89 | color: #fbfbf6; }
90 |
91 | p {
92 | margin-left: auto;
93 | margin-right: auto;
94 | max-width: 38em;
95 | transition: all linear 0.2s;
96 | hyphens: auto; }
97 |
98 | /* Variations and variables */
99 | /* Generic header styles */
100 | h1, h2, h3, h4, h5, h6 {
101 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
102 |
103 | h1 {
104 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
105 | font-size: calc( var(--h1-font-size-min) * 1em);
106 | margin: 1rem auto;
107 | max-width: 50rem; }
108 |
109 | h2 {
110 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
111 | font-size: calc( var(--h2-font-size-min) * 1em);
112 | margin: 0 auto 2rem auto;
113 | max-width: 50rem; }
114 | .inverse h2 {
115 | --text-GRAD: 100; }
116 |
117 | blockquote {
118 | float: right;
119 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
120 | margin: 0 5vw 1rem .5rem;
121 | max-width: 45vw;
122 | transition: all linear 0.2s; }
123 | blockquote.right {
124 | float: right;
125 | margin-left: .5rem;
126 | margin-right: 5vw; }
127 | blockquote.left {
128 | float: left;
129 | margin-left: 5vw;
130 | margin-right: .5rem; }
131 | blockquote .well-used {
132 | font-size: 1.25em; }
133 | blockquote .invisible {
134 | font-size: 1.5em; }
135 |
136 | img {
137 | height: auto;
138 | max-width: 100%;
139 | width: 100%; }
140 |
141 | h2 + p {
142 | margin-top: 1em; }
143 |
144 | /* Section end styles */
145 | .section-end:after {
146 | color: #777;
147 | content: "\00a7";
148 | display: block;
149 | font-family: Georgia, "New Times Roman", serif;
150 | font-size: 1.5em;
151 | font-weight: 300;
152 | margin-top: 1em;
153 | text-align: center; }
154 |
155 | /* First-line styles */
156 | .article-detail > p:first-of-type:first-line {
157 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
158 |
159 | /* Initial Cap styles */
160 | .article-detail.initial p:first-of-type:first-letter {
161 | float: left;
162 | padding-right: 0.05em;
163 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
164 | font-size: 4em;
165 | line-height: .95;
166 | margin-bottom: -.1em; }
167 |
168 | /* Content end styles */
169 | .content-area p:last-child:after {
170 | color: #777;
171 | content: "\2766";
172 | display: block;
173 | font-family: Georgia, "New Times Roman", serif;
174 | font-size: 1.25em;
175 | font-style: italic;
176 | font-weight: 300;
177 | line-height: .75;
178 | margin-top: 1rem;
179 | margin-bottom: 2rem;
180 | text-align: center; }
181 |
182 | /* Goblet and max-width wrapper */
183 | .figure-wrapper {
184 | margin-left: auto;
185 | margin-right: auto;
186 | max-width: 38em; }
187 |
188 | /* CSS shape outline for the goblet */
189 | .goblet {
190 | float: left;
191 | margin: 0 1.5rem 0 0;
192 | width: 25%; }
193 | @media screen and (min-width: 60.25em) {
194 | .goblet {
195 | margin: 0 1.5rem 0 -17.5%;
196 | width: 35%; } }
197 |
--------------------------------------------------------------------------------
/css/07-index-02.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* text GRAD */
8 | --text-GRAD: 88;
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 | --p-vf-wdth: 100;
16 | /* H1 variables */
17 | --h1-line-height-min: .95;
18 | --h1-line-height-max: 1.05;
19 | --h1-font-size-min: 2.0;
20 | --h1-font-size-max: 5;
21 | --h1-vf-wght-multiplier-s: 2;
22 | --h1-vf-wght-multiplier-m: 2.25;
23 | --h1-vf-wght-multiplier-l: 2.5;
24 | --h1-vf-wdth: 100;
25 | /* H2 variables */
26 | --h2-line-height-min: 1.15;
27 | --h2-line-height-max: 1.25;
28 | --h2-font-size-min: 1.5;
29 | --h2-font-size-max: 3.5;
30 | --h2-vf-wght-multiplier-s: 1.25;
31 | --h2-vf-wght-multiplier-m: 1.5;
32 | --h2-vf-wght-multiplier-l: 1.75;
33 | --h2-vf-wdth: 100;
34 | /* Dropcap variables */
35 | --dc-line-height-min: .9;
36 | --dc-line-height-max: .95;
37 | --dc-font-size-min: 2.7;
38 | --dc-font-size-max: 5;
39 | /* Blockquote variables */
40 | --bq-line-height-min: 1.1;
41 | --bq-line-height-max: .95;
42 | --bq-font-size-min: 2.7;
43 | --bq-font-size-max: 5; }
44 |
45 | .graded {
46 | --text-GRAD: 150; }
47 |
48 | /* Undo some of the Layout width bits */
49 | .section-content {
50 | margin: 0 auto;
51 | padding: 0 0.5em; }
52 |
53 | @media only screen and (min-width: 24.15em) {
54 | .section-content {
55 | max-width: 98%; } }
56 |
57 | @media only screen and (min-width: 43.75em) {
58 | .section-content {
59 | max-width: 98%; } }
60 |
61 | @media only screen and (min-width: 60.25em) {
62 | .section-content {
63 | max-width: 98%; } }
64 |
65 | @media only screen and (min-width: 75em) {
66 | .section-content {
67 | max-width: 98em; } }
68 |
69 | html {
70 | background-color: #fbfbf6;
71 | color: #3c3d31;
72 | font-size: 100%; }
73 |
74 | body {
75 | padding-top: 5rem; }
76 |
77 | body,
78 | p,
79 | th,
80 | td,
81 | ul,
82 | li {
83 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
84 | font-weight: normal;
85 | font-style: normal; }
86 |
87 | .inverse {
88 | background-color: #3c3d31;
89 | color: #fbfbf6; }
90 |
91 | p {
92 | margin-left: auto;
93 | margin-right: auto;
94 | max-width: 38em;
95 | transition: all linear 0.2s;
96 | hyphens: auto; }
97 |
98 | /* Variations and variables */
99 | /* Generic header styles */
100 | h1, h2, h3, h4, h5, h6 {
101 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
102 |
103 | h1 {
104 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
105 | font-size: calc( var(--h1-font-size-max) * 1em);
106 | font-variation-settings: 'wght' 800, 'wdth' 100;
107 | margin: 1rem auto;
108 | max-width: 50rem; }
109 | .wf-inactive h1 {
110 | font-family: Georgia, "New Times Roman", serif;
111 | letter-spacing: -.005em;
112 | line-height: 1.2; }
113 |
114 | h2 {
115 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
116 | font-size: calc( var(--h2-font-size-max) * 1em);
117 | font-variation-settings: 'wght' 600, 'wdth' 80;
118 | margin: 0 auto 2rem auto;
119 | max-width: 50rem; }
120 | .wf-inactive h2 {
121 | --h2-font-size-max: 3;
122 | font-family: Georgia, "New Times Roman", serif;
123 | letter-spacing: -.035em;
124 | line-height: 1.4; }
125 |
126 | blockquote {
127 | float: right;
128 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
129 | margin: 0 5vw 1rem .5rem;
130 | max-width: 45vw;
131 | transition: all linear 0.2s; }
132 | blockquote.right {
133 | float: right;
134 | margin-left: .5rem;
135 | margin-right: 5vw; }
136 | blockquote.left {
137 | float: left;
138 | margin-left: 5vw;
139 | margin-right: .5rem; }
140 | blockquote .well-used {
141 | font-size: 1.25em; }
142 | blockquote .invisible {
143 | font-size: 1.5em; }
144 |
145 | img {
146 | height: auto;
147 | max-width: 100%;
148 | width: 100%; }
149 |
150 | h2 + p {
151 | margin-top: 1em; }
152 |
153 | /* Section end styles */
154 | .section-end:after {
155 | color: #777;
156 | content: "\00a7";
157 | display: block;
158 | font-family: Georgia, "New Times Roman", serif;
159 | font-size: 1.5em;
160 | font-weight: 300;
161 | margin-top: 1em;
162 | text-align: center; }
163 |
164 | /* First-line styles */
165 | .article-detail > p:first-of-type:first-line {
166 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
167 |
168 | /* Initial Cap styles */
169 | .article-detail.initial p:first-of-type:first-letter {
170 | float: left;
171 | padding-right: 0.05em;
172 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
173 | font-size: 4em;
174 | line-height: .95;
175 | margin-bottom: -.1em; }
176 |
177 | /* Content end styles */
178 | .content-area p:last-child:after {
179 | color: #777;
180 | content: "\2766";
181 | display: block;
182 | font-family: Georgia, "New Times Roman", serif;
183 | font-size: 1.25em;
184 | font-style: italic;
185 | font-weight: 300;
186 | line-height: .75;
187 | margin-top: 1rem;
188 | margin-bottom: 2rem;
189 | text-align: center; }
190 |
191 | /* Goblet and max-width wrapper */
192 | .figure-wrapper {
193 | margin-left: auto;
194 | margin-right: auto;
195 | max-width: 38em; }
196 |
197 | /* CSS shape outline for the goblet */
198 | .goblet {
199 | float: left;
200 | margin: 0 1.5rem 0 0;
201 | width: 25%; }
202 | @media screen and (min-width: 60.25em) {
203 | .goblet {
204 | margin: 0 1.5rem 0 -17.5%;
205 | width: 35%; } }
206 |
--------------------------------------------------------------------------------
/css/index-01.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* text GRAD */
8 | --text-GRAD: 88;
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 | --p-vf-wdth: 100;
16 | /* H1 variables */
17 | --h1-line-height-min: .95;
18 | --h1-line-height-max: 1.05;
19 | --h1-font-size-min: 2.0;
20 | --h1-font-size-max: 5;
21 | --h1-vf-wght-multiplier-s: 2;
22 | --h1-vf-wght-multiplier-m: 2.25;
23 | --h1-vf-wght-multiplier-l: 2.5;
24 | --h1-vf-wdth: 100;
25 | /* H2 variables */
26 | --h2-line-height-min: 1.15;
27 | --h2-line-height-max: 1.25;
28 | --h2-font-size-min: 1.5;
29 | --h2-font-size-max: 3.5;
30 | --h2-vf-wght-multiplier-s: 1.25;
31 | --h2-vf-wght-multiplier-m: 1.5;
32 | --h2-vf-wght-multiplier-l: 1.75;
33 | --h2-vf-wdth: 100;
34 | /* Dropcap variables */
35 | --dc-line-height-min: .9;
36 | --dc-line-height-max: .95;
37 | --dc-font-size-min: 2.7;
38 | --dc-font-size-max: 5;
39 | /* Blockquote variables */
40 | --bq-line-height-min: 1.1;
41 | --bq-line-height-max: .95;
42 | --bq-font-size-min: 2.7;
43 | --bq-font-size-max: 5; }
44 |
45 | .graded {
46 | --text-GRAD: 150; }
47 |
48 | /* Undo some of the Layout width bits */
49 | .section-content {
50 | margin: 0 auto;
51 | padding: 0 0.5em; }
52 |
53 | @media only screen and (min-width: 24.15em) {
54 | .section-content {
55 | max-width: 98%; } }
56 |
57 | @media only screen and (min-width: 43.75em) {
58 | .section-content {
59 | max-width: 98%; } }
60 |
61 | @media only screen and (min-width: 60.25em) {
62 | .section-content {
63 | max-width: 98%; } }
64 |
65 | @media only screen and (min-width: 75em) {
66 | .section-content {
67 | max-width: 98em; } }
68 |
69 | html {
70 | background-color: #fbfbf6;
71 | color: #3c3d31;
72 | font-size: 100%; }
73 |
74 | body {
75 | padding-top: 5rem; }
76 |
77 | body,
78 | p,
79 | th,
80 | td,
81 | ul,
82 | li {
83 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
84 | font-weight: normal;
85 | font-style: normal; }
86 |
87 | .inverse {
88 | background-color: #3c3d31;
89 | color: #fbfbf6; }
90 |
91 | p {
92 | margin-left: auto;
93 | margin-right: auto;
94 | max-width: 38em;
95 | transition: all linear 0.2s;
96 | hyphens: auto; }
97 |
98 | /* Variations and variables */
99 | /* Generic header styles */
100 | h1, h2, h3, h4, h5, h6 {
101 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
102 |
103 | h1 {
104 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
105 | font-size: calc( var(--h1-font-size-min) * 1em);
106 | margin: 1rem auto;
107 | max-width: 50rem; }
108 |
109 | h2 {
110 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
111 | font-size: calc( var(--h2-font-size-min) * 1em);
112 | margin: 0 auto 2rem auto;
113 | max-width: 50rem; }
114 | .inverse h2 {
115 | --text-GRAD: 100; }
116 |
117 | blockquote {
118 | float: right;
119 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
120 | margin: 0 5vw 1rem .5rem;
121 | max-width: 45vw;
122 | transition: all linear 0.2s; }
123 | blockquote.right {
124 | float: right;
125 | margin-left: .5rem;
126 | margin-right: 5vw; }
127 | blockquote.left {
128 | float: left;
129 | margin-left: 5vw;
130 | margin-right: .5rem; }
131 | blockquote .well-used {
132 | font-size: 1.25em; }
133 | blockquote .invisible {
134 | font-size: 1.5em; }
135 |
136 | img {
137 | height: auto;
138 | max-width: 100%;
139 | width: 100%; }
140 |
141 | h2 + p {
142 | margin-top: 1em; }
143 |
144 | /* Section end styles */
145 | .section-end:after {
146 | color: #777;
147 | content: "\00a7";
148 | display: block;
149 | font-family: Georgia, "New Times Roman", serif;
150 | font-size: 1.5em;
151 | font-weight: 300;
152 | margin-top: 1em;
153 | text-align: center; }
154 |
155 | /* First-line styles */
156 | .article-detail > p:first-of-type:first-line {
157 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
158 |
159 | /* Initial Cap styles */
160 | .article-detail.initial p:first-of-type:first-letter {
161 | float: left;
162 | padding-right: 0.05em;
163 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
164 | font-size: 4em;
165 | line-height: .95;
166 | margin-bottom: -.1em; }
167 |
168 | /* Content end styles */
169 | .content-area p:last-child:after {
170 | color: #777;
171 | content: "\2766";
172 | display: block;
173 | font-family: Georgia, "New Times Roman", serif;
174 | font-size: 1.25em;
175 | font-style: italic;
176 | font-weight: 300;
177 | line-height: .75;
178 | margin-top: 1rem;
179 | margin-bottom: 2rem;
180 | text-align: center; }
181 |
182 | /* Goblet and max-width wrapper */
183 | .figure-wrapper {
184 | margin-left: auto;
185 | margin-right: auto;
186 | max-width: 38em; }
187 |
188 | /* CSS shape outline for the goblet */
189 | .goblet {
190 | float: left;
191 | margin: 0 1.5rem 0 0;
192 | width: 25%; }
193 | @media screen and (min-width: 60.25em) {
194 | .goblet {
195 | margin: 0 1.5rem 0 -17.5%;
196 | width: 35%; } }
197 |
--------------------------------------------------------------------------------
/css/index-02.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Breakpoint variables */
3 | --bp-small: 24.15;
4 | --bp-medium: 43.75;
5 | --bp-large: 60.25;
6 | --bp-xlarge: 75;
7 | /* text GRAD */
8 | --text-GRAD: 88;
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 | --p-vf-wdth: 100;
16 | /* H1 variables */
17 | --h1-line-height-min: .95;
18 | --h1-line-height-max: 1.05;
19 | --h1-font-size-min: 2.0;
20 | --h1-font-size-max: 5;
21 | --h1-vf-wght-multiplier-s: 2;
22 | --h1-vf-wght-multiplier-m: 2.25;
23 | --h1-vf-wght-multiplier-l: 2.5;
24 | --h1-vf-wdth: 100;
25 | /* H2 variables */
26 | --h2-line-height-min: 1.15;
27 | --h2-line-height-max: 1.25;
28 | --h2-font-size-min: 1.5;
29 | --h2-font-size-max: 3.5;
30 | --h2-vf-wght-multiplier-s: 1.25;
31 | --h2-vf-wght-multiplier-m: 1.5;
32 | --h2-vf-wght-multiplier-l: 1.75;
33 | --h2-vf-wdth: 100;
34 | /* Dropcap variables */
35 | --dc-line-height-min: .9;
36 | --dc-line-height-max: .95;
37 | --dc-font-size-min: 2.7;
38 | --dc-font-size-max: 5;
39 | /* Blockquote variables */
40 | --bq-line-height-min: 1.1;
41 | --bq-line-height-max: .95;
42 | --bq-font-size-min: 2.7;
43 | --bq-font-size-max: 5; }
44 |
45 | .graded {
46 | --text-GRAD: 150; }
47 |
48 | /* Undo some of the Layout width bits */
49 | .section-content {
50 | margin: 0 auto;
51 | padding: 0 0.5em; }
52 |
53 | @media only screen and (min-width: 24.15em) {
54 | .section-content {
55 | max-width: 98%; } }
56 |
57 | @media only screen and (min-width: 43.75em) {
58 | .section-content {
59 | max-width: 98%; } }
60 |
61 | @media only screen and (min-width: 60.25em) {
62 | .section-content {
63 | max-width: 98%; } }
64 |
65 | @media only screen and (min-width: 75em) {
66 | .section-content {
67 | max-width: 98em; } }
68 |
69 | html {
70 | background-color: #fbfbf6;
71 | color: #3c3d31;
72 | font-size: 100%; }
73 |
74 | body {
75 | padding-top: 5rem; }
76 |
77 | body,
78 | p,
79 | th,
80 | td,
81 | ul,
82 | li {
83 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
84 | font-weight: normal;
85 | font-style: normal; }
86 |
87 | .inverse {
88 | background-color: #3c3d31;
89 | color: #fbfbf6; }
90 |
91 | p {
92 | margin-left: auto;
93 | margin-right: auto;
94 | max-width: 38em;
95 | transition: all linear 0.2s;
96 | hyphens: auto; }
97 |
98 | /* Variations and variables */
99 | /* Generic header styles */
100 | h1, h2, h3, h4, h5, h6 {
101 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
102 |
103 | h1 {
104 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
105 | font-size: calc( var(--h1-font-size-max) * 1em);
106 | font-variation-settings: 'wght' 800, 'wdth' 100;
107 | margin: 1rem auto;
108 | max-width: 50rem; }
109 | .wf-inactive h1 {
110 | font-family: Georgia, "New Times Roman", serif;
111 | letter-spacing: -.005em;
112 | line-height: 1.2; }
113 |
114 | h2 {
115 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
116 | font-size: calc( var(--h2-font-size-max) * 1em);
117 | font-variation-settings: 'wght' 600, 'wdth' 80;
118 | margin: 0 auto 2rem auto;
119 | max-width: 50rem; }
120 | .wf-inactive h2 {
121 | --h2-font-size-max: 3;
122 | font-family: Georgia, "New Times Roman", serif;
123 | letter-spacing: -.035em;
124 | line-height: 1.4; }
125 |
126 | blockquote {
127 | float: right;
128 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
129 | margin: 0 5vw 1rem .5rem;
130 | max-width: 45vw;
131 | transition: all linear 0.2s; }
132 | blockquote.right {
133 | float: right;
134 | margin-left: .5rem;
135 | margin-right: 5vw; }
136 | blockquote.left {
137 | float: left;
138 | margin-left: 5vw;
139 | margin-right: .5rem; }
140 | blockquote .well-used {
141 | font-size: 1.25em; }
142 | blockquote .invisible {
143 | font-size: 1.5em; }
144 |
145 | img {
146 | height: auto;
147 | max-width: 100%;
148 | width: 100%; }
149 |
150 | h2 + p {
151 | margin-top: 1em; }
152 |
153 | /* Section end styles */
154 | .section-end:after {
155 | color: #777;
156 | content: "\00a7";
157 | display: block;
158 | font-family: Georgia, "New Times Roman", serif;
159 | font-size: 1.5em;
160 | font-weight: 300;
161 | margin-top: 1em;
162 | text-align: center; }
163 |
164 | /* First-line styles */
165 | .article-detail > p:first-of-type:first-line {
166 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif; }
167 |
168 | /* Initial Cap styles */
169 | .article-detail.initial p:first-of-type:first-letter {
170 | float: left;
171 | padding-right: 0.05em;
172 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
173 | font-size: 4em;
174 | line-height: .95;
175 | margin-bottom: -.1em; }
176 |
177 | /* Content end styles */
178 | .content-area p:last-child:after {
179 | color: #777;
180 | content: "\2766";
181 | display: block;
182 | font-family: Georgia, "New Times Roman", serif;
183 | font-size: 1.25em;
184 | font-style: italic;
185 | font-weight: 300;
186 | line-height: .75;
187 | margin-top: 1rem;
188 | margin-bottom: 2rem;
189 | text-align: center; }
190 |
191 | /* Goblet and max-width wrapper */
192 | .figure-wrapper {
193 | margin-left: auto;
194 | margin-right: auto;
195 | max-width: 38em; }
196 |
197 | /* CSS shape outline for the goblet */
198 | .goblet {
199 | float: left;
200 | margin: 0 1.5rem 0 0;
201 | width: 25%; }
202 | @media screen and (min-width: 60.25em) {
203 | .goblet {
204 | margin: 0 1.5rem 0 -17.5%;
205 | width: 35%; } }
206 |
--------------------------------------------------------------------------------
/css/webfonts.css:
--------------------------------------------------------------------------------
1 | /* Amstelvar Variable Font */
2 | @font-face {
3 | font-family: "Amstelvar VF";
4 | src: url('../fonts/AmstelvarAlpha-VF.ttf') format('truetype');
5 | font-display: swap;
6 | }
7 |
8 | @font-face {
9 | font-family: "Amstelvar 1.1 VF";
10 | src: url('../fonts/AmstelvarAlpha-VF_v1.1.ttf') format('truetype');
11 | font-display: swap;
12 | }
13 |
14 | @font-face {
15 | font-family: "Plex Serif";
16 | font-style: normal;
17 | font-weight: normal;
18 | src: url('../fonts/plex-serif/IBMPlexSerif-Regular.woff2') format('woff'); /* Modern Browsers */
19 | }
20 |
21 | @font-face {
22 | font-family: "Plex Serif";
23 | font-style: normal;
24 | font-weight: bold;
25 | src: url('../fonts/plex-serif/IBMPlexSerif-Bold.woff2') format('woff'); /* Modern Browsers */
26 | }
27 |
28 | @font-face {
29 | font-family: "Plex Serif";
30 | font-style: italic;
31 | font-weight: normal;
32 | src: url('../fonts/plex-serif/IBMPlexSerif-Italic.woff2') format('woff'); /* Modern Browsers */
33 | }
34 |
35 | @font-face {
36 | font-family: "Plex Serif";
37 | font-style: italic;
38 | font-weight: bold;
39 | src: url('../fonts/plex-serif/IBMPlexSerif-BoldItalic.woff2') format('woff'); /* Modern Browsers */
40 | }
41 |
42 | /* Decovar Variable Font */
43 | @font-face {
44 | font-family: "Decovar VF";
45 | src: url('../fonts/DecovarAlpha-VF.ttf') format('truetype');
46 | font-display: swap;
47 | }
48 |
49 | /* Output Variable Font */
50 | @font-face {
51 | font-family: 'Output Sans VF';
52 | src: url('http://rwt.io/_demo_fonts/output/Output_Sans-VF.ttf') format('truetype');
53 | font-style: normal;
54 | font-weight: normal;
55 | }
56 |
57 | /* Louvette Variable Font BETA */
58 | @font-face {
59 | font-family: 'Louvette VF';
60 | font-style: normal;
61 | font-weight: 400;
62 | src: url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Var.woff2') format('woff2'), /* Super Modern Browsers */
63 | url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Var.woff') format('woff'), /* Modern Browsers */
64 | url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Var.ttf') format('truetype'); /* Safari, Android, iOS */
65 | font-display: swap;
66 | }
67 |
68 | /* Louvette Variable Font Italic BETA */
69 | @font-face {
70 | font-family: 'Louvette VF';
71 | font-style: italic;
72 | font-weight: 400;
73 | src: url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Italic_Var.woff2') format('woff2'), /* Super Modern Browsers */
74 | url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Italic_Var.woff') format('woff'), /* Modern Browsers */
75 | url('http://rwt.io/_demo_fonts/louvette/LouvetteBETA_Italic_Var.ttf') format('truetype'); /* Safari, Android, iOS */
76 | font-display: swap;
77 | }
78 |
--------------------------------------------------------------------------------
/fonts/AmstelvarAlpha-VF.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/AmstelvarAlpha-VF.ttf
--------------------------------------------------------------------------------
/fonts/AmstelvarAlpha-VF_v1.1.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/AmstelvarAlpha-VF_v1.1.ttf
--------------------------------------------------------------------------------
/fonts/DecovarAlpha-VF.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/DecovarAlpha-VF.ttf
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Bold.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-BoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-BoldItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-ExtraLight.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-ExtraLight.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-ExtraLightItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-ExtraLightItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Italic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Light.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-LightItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-LightItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Medium.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-MediumItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-MediumItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Regular.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-SemiBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-SemiBold.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-SemiBoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-SemiBoldItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Text.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Text.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-TextItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-TextItalic.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-Thin.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-Thin.woff2
--------------------------------------------------------------------------------
/fonts/plex-serif/IBMPlexSerif-ThinItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/fonts/plex-serif/IBMPlexSerif-ThinItalic.woff2
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var sass = require('gulp-sass');
3 | var browserSync = require('browser-sync');
4 | var runSequence = require('run-sequence');
5 |
6 | // Development Tasks
7 | // -----------------
8 |
9 | // Start browserSync server
10 | gulp.task('browserSync', function() {
11 | browserSync({
12 | server: {
13 | baseDir: './'
14 | }
15 | })
16 | })
17 |
18 | gulp.task('sass', function() {
19 | return gulp.src('scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
20 | .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
21 | .pipe(gulp.dest('css')) // Outputs it in the css folder
22 | .pipe(browserSync.reload({ // Reloading with Browser Sync
23 | stream: true
24 | }));
25 | })
26 |
27 | // Watchers
28 | gulp.task('watch', function() {
29 | gulp.watch('scss/**/*.scss', ['sass']);
30 | gulp.watch('*.html', browserSync.reload);
31 | gulp.watch('js/**/*.js', browserSync.reload);
32 | })
33 |
34 | // Build Sequences
35 | // ---------------
36 |
37 | gulp.task('default', function(callback) {
38 | runSequence(['sass', 'browserSync'], 'watch',
39 | callback
40 | )
41 | })
42 |
43 | gulp.task('build', function(callback) {
44 | runSequence(
45 | 'sass',
46 | callback
47 | )
48 | })
--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/.DS_Store
--------------------------------------------------------------------------------
/images/garamond_6pt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/garamond_6pt.png
--------------------------------------------------------------------------------
/images/garamond_72pt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/garamond_72pt.png
--------------------------------------------------------------------------------
/images/goblet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/goblet.png
--------------------------------------------------------------------------------
/images/goblet_mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/goblet_mask.png
--------------------------------------------------------------------------------
/images/magazine/campy.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/campy.JPG
--------------------------------------------------------------------------------
/images/magazine/mountains_back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/mountains_back.jpg
--------------------------------------------------------------------------------
/images/magazine/mountains_front.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/mountains_front.png
--------------------------------------------------------------------------------
/images/magazine/munich.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/munich.jpg
--------------------------------------------------------------------------------
/images/magazine/puerto_rico.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/puerto_rico.jpg
--------------------------------------------------------------------------------
/images/magazine/sydney_harbor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/sydney_harbor.jpg
--------------------------------------------------------------------------------
/images/magazine/vineyard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/vineyard.jpg
--------------------------------------------------------------------------------
/images/magazine/wilanow_palace.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/images/magazine/wilanow_palace.jpg
--------------------------------------------------------------------------------
/ish/.gitignore:
--------------------------------------------------------------------------------
1 | /js/.DS_Store
2 |
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/ish/README.md:
--------------------------------------------------------------------------------
1 | ## What
2 | View Demo . ish. is yet another viewport resizer. What's with the name, you ask? Small-ish. Medium-ish. Large-ish. That's the idea. Many have long been preaching to let content, not device widths determine breakpoints in responsive designs, so rather than determining several fixed breakpoints, ish. roughs out general ranges in order to better serve the entire resolution spectrum .
3 |
4 | ## Why
5 | Do we really need another viewport resizer? After all, there's no fewer than 19 viewport testing tools out there already.
6 |
7 | The real reasons for this tool is to educate and to facilitate a mental shift. Many clients, designers and developers get hung up on specific device widths, which is why this tool doesn't include any such language, device chrome or anything like that. Ish. helps keep everyone focused on making a design that looks and functions great at any resolution.
8 |
9 | ## How
10 |
11 | Find the URL button in the top left and enter any url.
12 | Once the site loads find the Size button and expand the sizing options
13 | Choose Small-ish, Medium-ish, Large-ish, Xtra-Large-ish, or any random size (many thanks to Jordan Moore and his Responsive Roulette for the idea). Or enter any specific value.
14 | Watch as the site resizes and look for any visual or functional oddities along the way.
15 | Use Alt+U to toggle in and out of Focus Mode
16 | Focus Mode will remove the ish. UI and focus on the content (useful if demonstrating a site to clients)
17 | Once in Focus Mode, use keys 1 - 5 to resize the viewport
18 |
19 |
20 | ## Who
21 | Who is this for? Clients. Visual designers. Developers. Really anyone involved in the project that needs educated about creating truly device-agnostic websites.
22 |
23 | ## Where
24 | You can find the project on Github. You should set up ish. on your own server or dev environment for best results.
--------------------------------------------------------------------------------
/ish/index.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ish. yet another viewport resizer.
5 |
6 |
7 |
8 |
9 |
10 |
13 |
45 |
46 |
47 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/ish/js/init-ck.js:
--------------------------------------------------------------------------------
1 | (function(e){function d(e){var t=e;$(".sg-size-options a").removeClass("active");e&&t.addClass("active")}function v(){g();b();d($("#sg-size-random"));E(T(r,t))}function m(){E(T(r,t))}function g(){c=!1;clearInterval(l);l=!1}function y(){c=!0;l=setInterval(m,800)}function b(){var e=o.width();h=!1;o.removeClass("hay-mode");$("#sg-gen-container").removeClass("hay-mode");E(Math.floor(e))}function w(){h=!0;$("#sg-gen-container").removeClass("vp-animate").width(r+s);o.removeClass("vp-animate").width(r);window.setTimeout(function(){$("#sg-gen-container").addClass("hay-mode").width(i+s);o.addClass("hay-mode").width(i);setInterval(function(){var e=o.width();x(e)},100)},200)}function E(e,t){var n;e>i?n=i:ee.clientX?n-(t-e.clientX)*2:n+(e.clientX-t)*2;if(viewportWidth>r){DataSaver.findValue("vpWidth")?DataSaver.updateValue("vpWidth",viewportWidth):DataSaver.addValue("vpWidth",viewportWidth);E(viewportWidth,!1)}})});$("body").mouseup(function(e){$("#sg-cover").unbind("mousemove");$("#sg-cover").css("display","none")});var C=$("#sg-viewport").width();$("#sg-gen-container").width(C);$("#sg-viewport").width(C-14);x($("#sg-viewport").width());var k=urlHandler.getRequestVars(),L=0,A=!0;if(k.h!=undefined||k.hay!=undefined)w();else if(k.d!=undefined||k.disco!=undefined)y();else if(k.w!=undefined||k.width!=undefined){L=k.w!=undefined?k.w:k.width;L=L.indexOf("em")!==-1?Math.floor(Math.floor(L.replace("em",""))*f):Math.floor(L.replace("px",""));DataSaver.updateValue("vpWidth",L);N(L)}else A&&(L=DataSaver.findValue("vpWidth"))&&N(L);p==="hay"?w():p==="disco"?y():p==="random"&&v()})(this);
--------------------------------------------------------------------------------
/ish/js/init.js:
--------------------------------------------------------------------------------
1 | (function(w){
2 | var sw = document.body.clientWidth, //Viewport Width
3 | minViewportWidth = 240, //Minimum Size for Viewport
4 | maxViewportWidth = 2600, //Maxiumum Size for Viewport
5 | viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
6 | $sgWrapper = $('#sg-gen-container'), //Wrapper around viewport
7 | $sgViewport = $('#sg-viewport'), //Viewport element
8 | $sizePx = $('.sg-size-px'), //Px size input element in toolbar
9 | $sizeEms = $('.sg-size-em'), //Em size input element in toolbar
10 | $bodySize = 16, //Body size of the document
11 | discoID = false,
12 | fullMode = true,
13 | discoMode = false,
14 | hayMode = false,
15 | hash = window.location.hash.replace(/^.*?#/,'');
16 |
17 | //URL Form Submission
18 | $('#url-form').submit(function(e) {
19 | var urlVal = $('#url').val();
20 | var regex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
21 |
22 | if(regex.test(urlVal)) {
23 | return;
24 | } else {
25 | var newURL = "http://"+urlVal;
26 | $('#url').val(newURL);
27 | return;
28 | }
29 |
30 | });
31 |
32 | $(w).resize(function(){ //Update dimensions on resize
33 | sw = document.body.clientWidth;
34 |
35 | if(fullMode == true) {
36 | sizeFull();
37 | }
38 | });
39 |
40 | /* Nav Active State */
41 | function changeActiveState(link) {
42 | var $activeLink = link;
43 | $('.sg-size-options a').removeClass('active');
44 |
45 | if(link) {
46 | $activeLink.addClass('active');
47 | }
48 | }
49 |
50 | /* Pattern Lab accordion dropdown */
51 | $('.sg-acc-handle').on("click", function(e){
52 | var $this = $(this),
53 | $panel = $this.next('.sg-acc-panel');
54 | e.preventDefault();
55 | $this.toggleClass('active');
56 | $panel.toggleClass('active');
57 | });
58 |
59 | //Size Trigger
60 | $('#sg-size-toggle').on("click", function(e){
61 | e.preventDefault();
62 | $(this).parents('ul').toggleClass('active');
63 | });
64 |
65 | //Size View Events
66 |
67 | //Click Size Small Button
68 | $('#sg-size-s').on("click", function(e){
69 | e.preventDefault();
70 | killDisco();
71 | killHay();
72 | fullMode = false;
73 | window.location.hash = 's';
74 | changeActiveState($(this));
75 | sizeSmall();
76 | });
77 |
78 | //Click Size Medium Button
79 | $('#sg-size-m').on("click", function(e){
80 | e.preventDefault();
81 | killDisco();
82 | killHay();
83 | fullMode = false;
84 | window.location.hash = 'm';
85 | changeActiveState($(this));
86 | sizeMedium();
87 | });
88 |
89 | //Click Size Large Button
90 | $('#sg-size-l').on("click", function(e){
91 | e.preventDefault();
92 | killDisco();
93 | killHay();
94 | fullMode = false;
95 | window.location.hash = 'l';
96 | changeActiveState($(this));
97 | sizeLarge();
98 | });
99 |
100 | //Click Full Width Button
101 | $('#sg-size-full').on("click", function(e){ //Resets
102 | e.preventDefault();
103 | killDisco();
104 | killHay();
105 | changeActiveState($(this));
106 | fullMode = true;
107 | window.location.hash = '';
108 | sizeiframe(sw);
109 | });
110 |
111 | //Click Random Size Button
112 | $('#sg-size-random').on("click", function(e){
113 | e.preventDefault();
114 | fullMode = false;
115 | sizeRandom();
116 | window.location.hash = 'random';
117 | });
118 |
119 | //Size Small
120 | function sizeSmall() {
121 | sizeiframe(getRandom(minViewportWidth,500));
122 | }
123 |
124 | //Size Medium
125 | function sizeMedium() {
126 | sizeiframe(getRandom(500,800));
127 | }
128 |
129 | //Size Large
130 | function sizeLarge() {
131 | sizeiframe(getRandom(800,1200));
132 | }
133 |
134 | //Size Random Size
135 | function sizeRandom() {
136 | killDisco();
137 | killHay();
138 | fullMode = false;
139 | changeActiveState($('#sg-size-random'));
140 | sizeiframe(getRandom(minViewportWidth,sw));
141 | }
142 |
143 | //Size Full
144 | function sizeFull() {
145 | sizeiframe(sw, false);
146 | updateSizeReading(sw);
147 | }
148 |
149 | //Click for Disco Mode, which resizes the viewport randomly
150 | $('#sg-size-disco').on("click", function(e){
151 | e.preventDefault();
152 | killHay();
153 | fullMode = false;
154 |
155 | if (discoMode) {
156 | killDisco();
157 | changeActiveState();
158 | window.location.hash = '';
159 |
160 | } else {
161 | startDisco();
162 | changeActiveState($(this));
163 | window.location.hash = 'disco';
164 | }
165 | });
166 |
167 | /* Disco Mode */
168 | function disco() {
169 | sizeiframe(getRandom(minViewportWidth,sw));
170 | }
171 |
172 | function killDisco() {
173 | discoMode = false;
174 | clearInterval(discoID);
175 | discoID = false;
176 | }
177 |
178 | function startDisco() {
179 | discoMode = true;
180 | discoID = setInterval(disco, 800);
181 | }
182 |
183 | //Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
184 | $('#sg-size-hay').on("click", function(e){
185 | e.preventDefault();
186 | killDisco();
187 |
188 | if (hayMode) {
189 | killHay();
190 | changeActiveState();
191 | window.location.hash = '';
192 | } else {
193 | startHay();
194 | changeActiveState($(this));
195 | window.location.hash = 'hay';
196 | }
197 | });
198 |
199 | //Stop Hay! Mode
200 | function killHay() {
201 | var currentWidth = $sgViewport.width();
202 | hayMode = false;
203 | $sgViewport.removeClass('hay-mode');
204 | $sgWrapper.removeClass('hay-mode');
205 | sizeiframe(Math.floor(currentWidth));
206 | }
207 |
208 | // start Hay! mode
209 | function startHay() {
210 | hayMode = true;
211 | $sgWrapper.removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
212 | $sgViewport.removeClass("vp-animate").width(minViewportWidth);
213 |
214 | window.setTimeout(function(){
215 | $sgWrapper.addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
216 | $sgViewport.addClass('hay-mode').width(maxViewportWidth);
217 |
218 | setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
219 | }, 200);
220 | }
221 |
222 | //Pixel input
223 | $sizePx.on('keydown', function(e){
224 | var val = Math.floor($(this).val());
225 |
226 | if(e.keyCode === 38) { //If the up arrow key is hit
227 | val++;
228 | sizeiframe(val,false);
229 | window.location.hash = val;
230 | } else if(e.keyCode === 40) { //If the down arrow key is hit
231 | val--;
232 | sizeiframe(val,false);
233 | window.location.hash = val;
234 | } else if(e.keyCode === 13) { //If the Enter key is hit
235 | e.preventDefault();
236 | sizeiframe(val); //Size Iframe to value of text box
237 | window.location.hash = val;
238 | $(this).blur();
239 | }
240 | changeActiveState();
241 | });
242 |
243 | $sizePx.on('keyup', function(){
244 | var val = Math.floor($(this).val());
245 | updateSizeReading(val,'px','updateEmInput');
246 | });
247 |
248 | //Em input
249 | $sizeEms.on('keydown', function(e){
250 | var val = parseFloat($(this).val());
251 |
252 | if(e.keyCode === 38) { //If the up arrow key is hit
253 | val++;
254 | sizeiframe(Math.floor(val*$bodySize),false);
255 | } else if(e.keyCode === 40) { //If the down arrow key is hit
256 | val--;
257 | sizeiframe(Math.floor(val*$bodySize),false);
258 | } else if(e.keyCode === 13) { //If the Enter key is hit
259 | e.preventDefault();
260 | sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
261 | }
262 | changeActiveState();
263 |
264 | window.location.hash = parseInt(val*$bodySize);
265 | });
266 |
267 | $sizeEms.on('keyup', function(){
268 | var val = parseFloat($(this).val());
269 | updateSizeReading(val,'em','updatePxInput');
270 | });
271 |
272 | // handle the MQ click
273 | $('#sg-mq a').on("click", function(e){
274 | e.preventDefault();
275 | var val = $(this).html();
276 | var type = (val.indexOf("px") !== -1) ? "px" : "em";
277 | val = val.replace(type,"");
278 | var width = (type === "px") ? val*1 : val*$bodySize;
279 | sizeiframe(width,true);
280 | });
281 |
282 | //Resize the viewport
283 | //'size' is the target size of the viewport
284 | //'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
285 | function sizeiframe(size,animate) {
286 | var theSize;
287 |
288 | if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
289 | theSize = maxViewportWidth;
290 | } else if(size event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
370 |
371 | if (viewportWidth > minViewportWidth) {
372 |
373 |
374 | window.location.hash = viewportWidth;
375 | sizeiframe(viewportWidth,false);
376 | }
377 | });
378 | });
379 |
380 | // on "mouseup" we unbind the "mousemove" event and hide the cover again
381 | $('body').mouseup(function(event) {
382 | $('#sg-cover').unbind('mousemove');
383 | $('#sg-cover').css("display","none");
384 | });
385 |
386 | // capture the viewport width that was loaded and modify it so it fits with the pull bar
387 | var origViewportWidth = $sgViewport.width();
388 | $sgWrapper.width(origViewportWidth);
389 | $sgViewport.width(origViewportWidth - 14);
390 | updateSizeReading($sgViewport.width());
391 |
392 |
393 |
394 | //Read Hash In URL
395 | if(hash === 'hay') {
396 | startHay(); ///Start Hay mode if hash says 'hay'
397 | } else if(hash === 'disco') {
398 | startDisco(); //Start disco mode if hash says 'disco'
399 | } else if(hash === 'random') {
400 | sizeRandom(); ///Random screen size if hash says 'random'
401 | } else if(hash === 'l') {
402 | sizeLarge();
403 | } else if(hash === 'm') {
404 | sizeMedium();
405 | } else if(hash === 's') {
406 | sizeSmall();
407 | } else if(!isNaN(hash) && hash !== '') { //if screen size is a number
408 | sizeiframe(parseInt(hash));
409 | console.log('this is a number');
410 | } else {
411 | sizeFull();
412 | console.log('this is not a number');
413 | }
414 |
415 | })(this);
416 |
--------------------------------------------------------------------------------
/ish/js/url-handler.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * URL Handler - v0.1
3 | *
4 | * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
5 | * Licensed under the MIT license
6 | *
7 | * Helps handle the initial iFrame source. Parses a string to see if it matches
8 | * an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial
9 | * matching style.
10 | *
11 | */
12 |
13 | var urlHandler = {
14 |
15 | // set-up some default vars
16 | skipBack: false,
17 | targetOrigin: (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host,
18 |
19 | /**
20 | * get the real file name for a given pattern name
21 | * @param {String} the shorthand partials syntax for a given pattern
22 | *
23 | * @return {String} the real file path
24 | */
25 | getFileName: function (name) {
26 |
27 | var baseDir = "patterns";
28 | var fileName = "";
29 |
30 | if (name == undefined) {
31 | return fileName;
32 | }
33 |
34 | if (name == "all") {
35 | return "styleguide/html/styleguide.html";
36 | }
37 |
38 | var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths;
39 | nameClean = name.replace("viewall-","");
40 |
41 | // look at this as a regular pattern
42 | var bits = this.getPatternInfo(nameClean, paths);
43 | var patternType = bits[0];
44 | var pattern = bits[1];
45 |
46 | if ((paths[patternType] != undefined) && (paths[patternType][pattern] != undefined)) {
47 |
48 | fileName = paths[patternType][pattern];
49 |
50 | } else if (paths[patternType] != undefined) {
51 |
52 | for (patternMatchKey in paths[patternType]) {
53 | if (patternMatchKey.indexOf(pattern) != -1) {
54 | fileName = paths[patternType][patternMatchKey];
55 | break;
56 | }
57 | }
58 |
59 | }
60 |
61 | if (fileName == "") {
62 | return fileName;
63 | }
64 |
65 | var regex = /\//g;
66 | if ((name.indexOf("viewall-") != -1) && (fileName != "")) {
67 | fileName = baseDir+"/"+fileName.replace(regex,"-")+"/index.html";
68 | } else if (fileName != "") {
69 | fileName = baseDir+"/"+fileName.replace(regex,"-")+"/"+fileName.replace(regex,"-")+".html";
70 | }
71 |
72 | return fileName;
73 | },
74 |
75 | /**
76 | * break up a pattern into its parts, pattern type and pattern name
77 | * @param {String} the shorthand partials syntax for a given pattern
78 | * @param {Object} the paths to be compared
79 | *
80 | * @return {Array} the pattern type and pattern name
81 | */
82 | getPatternInfo: function (name, paths) {
83 |
84 | var patternBits = name.split("-");
85 |
86 | var i = 1;
87 | var c = patternBits.length;
88 |
89 | var patternType = patternBits[0];
90 | while ((paths[patternType] == undefined) && (i < c)) {
91 | patternType += "-"+patternBits[i];
92 | i++;
93 | }
94 |
95 | pattern = name.slice(patternType.length+1,name.length);
96 |
97 | return [patternType, pattern];
98 |
99 | },
100 |
101 | /**
102 | * search the request vars for a particular item
103 | *
104 | * @return {Object} a search of the window.location.search vars
105 | */
106 | getRequestVars: function() {
107 |
108 | // the following is taken from https://developer.mozilla.org/en-US/docs/Web/API/window.location
109 | var oGetVars = new (function (sSearch) {
110 | if (sSearch.length > 1) {
111 | for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
112 | aItKey = aCouples[nKeyId].split("=");
113 | this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
114 | }
115 | }
116 | })(window.location.search);
117 |
118 | return oGetVars;
119 |
120 | },
121 |
122 | /**
123 | * push a pattern onto the current history based on a click
124 | * @param {String} the shorthand partials syntax for a given pattern
125 | * @param {String} the path given by the loaded iframe
126 | */
127 | pushPattern: function (pattern, givenPath) {
128 | var data = { "pattern": pattern };
129 | var fileName = urlHandler.getFileName(pattern);
130 | var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
131 | if (givenPath != expectedPath) {
132 | // make sure to update the iframe because there was a click
133 | document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
134 | } else {
135 | // add to the history
136 | var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
137 | history.pushState(data, null, addressReplacement);
138 | document.getElementById("title").innerHTML = "Pattern Lab - "+pattern;
139 | document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(pattern));
140 | }
141 | },
142 |
143 | /**
144 | * based on a click forward or backward modify the url and iframe source
145 | * @param {Object} event info like state and properties set in pushState()
146 | */
147 | popPattern: function (e) {
148 |
149 | var state = e.state;
150 |
151 | if (state == null) {
152 | this.skipBack = false;
153 | return;
154 | } else if (state != null) {
155 | var patternName = state.pattern;
156 | }
157 |
158 | var iFramePath = "";
159 | iFramePath = this.getFileName(patternName);
160 | if (iFramePath == "") {
161 | iFramePath = "styleguide/html/styleguide.html";
162 | }
163 |
164 | document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
165 | document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
166 | document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
167 |
168 | if (wsnConnected) {
169 | wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );
170 | }
171 |
172 | }
173 |
174 | }
175 |
176 | /**
177 | * handle the onpopstate event
178 | */
179 | window.onpopstate = function (event) {
180 | urlHandler.skipBack = true;
181 | urlHandler.popPattern(event);
182 | }
--------------------------------------------------------------------------------
/js/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/js/.DS_Store
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | /* Widowtamer */
2 | wt.fix({
3 | elements: 'p',
4 | chars: 15,
5 | method: 'nbsp',
6 | event: 'resize'
7 | });
8 |
9 | wt.fix({
10 | elements: 'blockquote',
11 | chars: 2,
12 | method: 'nbsp',
13 | event: 'resize'
14 | });
15 |
16 | wt.fix({
17 | elements: 'h1',
18 | chars: 6,
19 | method: 'nbsp',
20 | event: 'resize'
21 | });
22 |
23 | window.onload = function(){
24 | console.log('test onload');
25 | var style = getComputedStyle(document.body);
26 | var style_value = style.getPropertyValue('--p-vf-wdth-temp');
27 | console.log(style_value);
28 | }
29 |
30 | window.onresize = function(){
31 | console.log("test onresize");
32 | var style = getComputedStyle(document.body);
33 | var style_value = style.getPropertyValue('--p-vf-wdth-temp');
34 | console.log(style_value);
35 | }
--------------------------------------------------------------------------------
/js/vendor/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/js/vendor/.DS_Store
--------------------------------------------------------------------------------
/js/vendor/fontfaceobserver.js:
--------------------------------------------------------------------------------
1 | /* Font Face Observer v2.0.13 - © Bram Stein. License: BSD-3-Clause */(function(){'use strict';var f,g=[];function l(a){g.push(a);1==g.length&&f()}function m(){for(;g.length;)g[0](),g.shift()}f=function(){setTimeout(m)};function n(a){this.a=p;this.b=void 0;this.f=[];var b=this;try{a(function(a){q(b,a)},function(a){r(b,a)})}catch(c){r(b,c)}}var p=2;function t(a){return new n(function(b,c){c(a)})}function u(a){return new n(function(b){b(a)})}function q(a,b){if(a.a==p){if(b==a)throw new TypeError;var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d){d.call(b,function(b){c||q(a,b);c=!0},function(b){c||r(a,b);c=!0});return}}catch(e){c||r(a,e);return}a.a=0;a.b=b;v(a)}}
2 | function r(a,b){if(a.a==p){if(b==a)throw new TypeError;a.a=1;a.b=b;v(a)}}function v(a){l(function(){if(a.a!=p)for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0==a.a?"function"==typeof c?e(c.call(void 0,a.b)):e(a.b):1==a.a&&("function"==typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}})}n.prototype.g=function(a){return this.c(void 0,a)};n.prototype.c=function(a,b){var c=this;return new n(function(d,e){c.f.push([a,b,d,e]);v(c)})};
3 | function w(a){return new n(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e==a.length&&b(h)}}var e=0,h=[];0==a.length&&b(h);for(var k=0;kparseInt(a[1],10)}else C=!1;return C}function J(){null===F&&(F=!!document.fonts);return F}
8 | function K(){if(null===E){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}E=""!==a.style.font}return E}function L(a,b){return[a.style,a.weight,K()?a.stretch:"","100px",b].join(" ")}
9 | A.prototype.load=function(a,b){var c=this,k=a||"BESbswy",q=0,D=b||3E3,H=(new Date).getTime();return new Promise(function(a,b){if(J()&&!G()){var M=new Promise(function(a,b){function e(){(new Date).getTime()-H>=D?b():document.fonts.load(L(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),N=new Promise(function(a,c){q=setTimeout(c,D)});Promise.race([N,M]).then(function(){clearTimeout(q);a(c)},function(){b(c)})}else m(function(){function u(){var b;if(b=-1!=
10 | f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===B&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=B&&(f==v&&g==v&&h==v||f==w&&g==w&&h==w||f==x&&g==x&&h==x)),b=!b;b&&(d.parentNode&&d.parentNode.removeChild(d),clearTimeout(q),a(c))}function I(){if((new Date).getTime()-H>=D)d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,
11 | g=n.a.offsetWidth,h=p.a.offsetWidth,u();q=setTimeout(I,50)}}var e=new r(k),n=new r(k),p=new r(k),f=-1,g=-1,h=-1,v=-1,w=-1,x=-1,d=document.createElement("div");d.dir="ltr";t(e,L(c,"sans-serif"));t(n,L(c,"serif"));t(p,L(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);v=e.a.offsetWidth;w=n.a.offsetWidth;x=p.a.offsetWidth;I();z(e,function(a){f=a;u()});t(e,L(c,'"'+c.family+'",sans-serif'));z(n,function(a){g=a;u()});t(n,L(c,'"'+c.family+'",serif'));
12 | z(p,function(a){h=a;u()});t(p,L(c,'"'+c.family+'",monospace'))})})};"object"===typeof module?module.exports=A:(window.FontFaceObserver=A,window.FontFaceObserver.prototype.load=A.prototype.load);}());
13 |
--------------------------------------------------------------------------------
/js/vendor/modernizr-custom.js:
--------------------------------------------------------------------------------
1 | /*! modernizr 3.5.0 (Custom Build) | MIT *
2 | * https://modernizr.com/download/?-ambientlight-fontface-svg-touchevents-setclasses !*/
3 | !function(e,t,n){function s(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,r;for(var l in c)if(c.hasOwnProperty(l)){if(e=[],t=c[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n=9;return t||n}();g?Modernizr.addTest("fontface",!1):v('@font-face {font-family:"font";src:url("https://")}',function(e,n){var s=t.getElementById("smodernizr"),o=s.sheet||s.styleSheet,a=o?o.cssRules&&o.cssRules[0]?o.cssRules[0].cssText:o.cssText||"":"",i=/src/i.test(a)&&0===a.indexOf(n.split(" ")[0]);Modernizr.addTest("fontface",i)}),o(),a(f),delete d.addTest,delete d.addAsyncTest;for(var w=0;w35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2={u:{C:\'p,1i,1j\',v:14,6:\'1k\',D:\'1l\',O:\'1m\'},E:P 1n(),1o:4(a){3(w.1p===\'1q\')2.F(a);2.G(\'1r\',4(){2.F(a)})},F:4(a){5 m=a.6;1s(m){k\'8-Q\':k\'R\':k\'8-S\':k\'T-x\':k\'U-x\':k V:3(a.D==\'H\'&&m&&m.I(\'8\')){W.X(\'Y 6. 1t 1u 11 H 1v 8.\')}7 2.J(a);12;1w:W.X(\'Y 6. 1x 11 1y 8-Q, 8-S, T-x, 1z U-x.\')}},J:4(a){5 b=P 1A();3(a){1B(i 1C 2.u){3(a[i])b[i]=(i==\'6\'&&a[i].I(\'-\'))?2.13(a[i]):a[i];7 b[i]=2.u[i]}}7 b=2.u;3(w.15){5 d=w.15(b.C),i=0;16(i2.17(t,\'1D-1E\',18)){5 e=t.1F,j=e.K-1,c=1G;16(j>=0){5 f=2.y(e[j]);3(f!=V&&f.K>b.v){c=e[j];12}j--}t.19[b.6]=\'0\';5 g=2.y(c);3(c)2.M(c,t,g,0,b)}i++}2.G(b.O,4(){2.1a(b)})}},y:4(t){l t.N||t.1b},o:4(e,t){3(e.N)e.N=t;7 e.1b=t},M:4(c,t,a,i,b){5 h=t.L;2.o(c,a.1c(0,(b.v*-1)));3(t.L
2 |
3 |
4 |
5 |
6 |
7 |
8 | Responsive Type & Typography
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 |
26 |
27 |
53 |
54 |
55 |
56 |
57 |
58 |
64 |
65 |
66 |
67 |
68 |
69 | Weight (font-weight: [number]):
70 | Handglove
71 |
72 |
73 | Weight (font-variation-settings: 'wght' [number]):
74 | Handglove
75 |
76 |
77 | Width (font-stretch: [number]):
78 | Handglove
79 |
80 |
81 | Width (font-variation-settings: 'wdth' [number]):
82 | Handglove
83 |
84 |
85 | Slant (font-variation-settings: 'slnt' 20):
86 | Handglove
87 |
88 |
89 | Slant (font-style: oblique 20deg):
90 | Handglove
91 |
92 |
93 | Italic:
94 | Handglove
95 |
96 |
97 | Optical size:
98 | Handglove
99 |
100 |
101 | Grade:
102 | Handglove
103 |
104 |
105 | Ascender/Descender:
106 | Handglove
107 |
108 |
109 | Handglove
110 |
111 |
112 | Viewport:
113 | Moby Dick, or The White Whale
114 |
115 |
116 | handglove
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
--------------------------------------------------------------------------------
/part-06/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | The evolution of typography with variable fonts | Jason Pamental
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | The evolution of typography with variable fonts
61 | Words have power, and typography is their voice
62 | by Jason Pamental
63 |
64 |
65 | &
66 | &
67 | &
68 | &
69 | Click to
70 |
71 |
72 |
We’re sorry!
73 |
It appears that your browser does not support variable fonts. So while you can read the article, you’re not really seeing it as intended. There are a bunch of browsers that do support them already, including:
74 |
81 |
82 | For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. Unfortunately, for many years after the advent of the web, we were unable to apply all but the most basic of typographic design to online content. With the ability to use real fonts and OpenType features—like ligatures, specific figure sets, fractions, and true kerning—the typographic landscape improved tremendously. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights and reduced brand fidelity and voice.
83 |
84 | From many, one (paradigm: shifted)
85 | A variable font is a single font that acts as many
John Hudson
86 | The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format (which is technically part of the OpenType 1.8 specification) is completely extensible. The type designer has complete control over what axes are used, their ranges, and even the definition of new axes. There are currently 5 ‘registered’ axes (width, weight, slant, italics, and optical sizing), but the designer can vary any axis they choose. Some examples include the height of ascenders and descenders, text grade, even serif shape. The possibilities are nearly limitless. By removing the performance barrier, we open the door for more interesting and dynamic design and far greater ability to express the true voice of the brand. All this while maintaining fidelity to the typeface itself: only axes exposed by the type designer can be varied. No artificial distortion allowed.
87 |
88 | Web design, reinvented
89 |
90 | transform
91 | 18 files, over 288k
92 | into just
93 | 1 file 84k
94 |
95 | While the technology is still maturing and type designers are working to become more fluent in this new way of working, the promise for design on the web is ground-breaking. The typical scenario would be to constrain any given design to 3-5 different fonts to represent every aspect of a site’s design language and voice—including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading—greatly increasing their clarity and readability.
96 |
97 | One could also use slightly narrower character widths for headings or on data-dense displays of information. In fact the entire typographic system could be designed to be proportional: weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference. All of this with an accompanying increase in performance due to fewer HTTP requests (fewer font files) and an overall savings of data to download (though that will vary by font and compression used).
98 |
99 | But while these freedoms allow us to be more expressive, some of the really interesting capabilities will help transform the reading experience itself. This page has been set with a new variable font version of FF Meta , the classic sans-serif design by Erik Spiekermann first released in 1991. Even with only one axis of variation (weight) of both roman and italic variants, a wonderful range of voice can be achieved with massive gains in performance: 18 files and over 288k replaced with a single file of only 84k.
100 |
101 | Reinvented reading on screen
102 |
103 | [Meta] has to do more than look pretty: it has to work pretty hard
104 | Erik Spiekermann
105 |
106 | Some of the biggest challenges in creating a good reading experience are tied to the lack of finesse in proportion and fine details. The combination of modern CSS and OpenType features and variations presents a powerful combination. Being able to set features like ligatures and hyphenation based on language, turn hyphenation on and off based on screen size, and even tailor the character width on the smallest screens in order to fit more characters per line without reducing font size can make dramatic improvements in the smoothness and comfort of the reading experience.
107 |
108 | Ready for a close-up
109 |
110 |
111 |
112 | 18th century cut of Garamond cut in optical sizes. The first image is at 6pt size, the second is at 72. Note the difference in stroke contrast. It’s much more refined in the larger size.
113 |
114 | Another feature that was common in metal type but lost in translation to photo-typesetting and digital was optical sizing (well, some designers do still create separate optical sizes for different ranges, but it’s rare and somewhat limited). Not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.
115 |
116 | Optical sizing has made a return in variable fonts, and can be automatically applied where available, or set explicitly by the web designer or developer. As mentioned, it’s not as frequent a feature in sans-serif typefaces like this one, but can be used to quite dramatic effect in higher-stroke-contrast serif designs.
117 |
118 | Polish and poise
119 | With the benefits already discussed, the case for variable fonts is pretty compelling. But good typography isn’t all there is to great design. The range of axes like width and weight give us tremendous freedom to embrace more editorial design on the web without having to load an exorbitant number of file assets. And since we already have those few required variable fonts in place, the opportunity is to expose them for use by content publishers themselves. Imagine a role for designers inside the Content Management System (or CMS) where the website is housed. That designer could use some simple controls built into the CMS that would allow them to typeset specific headlines or pull-quotes, enabling a whole new level of design much like what we have in print, without having to write custom code every time.
120 |
121 | We may still be at the dawn of this new era, but it’s future is certainly bright
122 | As of May 2018, 3 out of 4 major web browsers already support variable fonts, in addition to both dominant mobile platforms (check support on caniuse.com ). With that in mind, we’re ready to start lighting up the web today.
123 |
124 |
125 |
126 |
127 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/part-07/index-01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | The Crystal Goblet | Responsive Type & Typography
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
36 |
37 |
38 |
39 |
40 | The Crystal Goblet, or Printing Should Be Invisible
41 | by Beatrice Warde (1900–1969)
42 | Imagine that you have before you a flagon of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than hide the beautiful thing which it was meant to contain.
43 |
47 | Bear with me in this long-winded and fragrant metaphor; for you will find that almost all the virtues of the perfect wine-glass have a parallel in typography. There is the long, thin stem that obviates fingerprints on the bowl. Why? Because no cloud must come between your eyes and the fiery heart of the liquid. Are not the margins on book pages similarly meant to obviate the necessity of fingering the type-page? Again: the glass is colourless or at the most only faintly tinged in the bowl, because the connoisseur judges wine partly by its colour and is impatient of anything that alters it. There are a thousand mannerisms in typography that are as impudent and arbitrary as putting port in tumblers of red or green glass! When a goblet has a base that looks too small for security, it does not matter how cleverly it is weighted; you feel nervous lest it should tip over. There are ways of setting lines of type which may work well enough, and yet keep the reader subconsciously worried by the fear of ‘doubling’ lines, reading three words as one, and so forth.
48 | Now the man who first chose glass instead of clay or metal to hold his wine was a ‘modernist’ in the sense in which I am going to use that term. That is, the first thing he asked of his particular object was not ‘How should it look?’ but ‘What must it do?’ and to that extent all good typography is modernist.
49 | Wine is so strange and potent a thing that it has been used in the central ritual of religion in one place and time, and attacked by a virago with a hatchet in another. There is only one thing in the world that is capable of stirring and altering men’s minds to the same extent, and that is the coherent expression of thought. That is man’s chief miracle, unique to man. There is no ‘explanation’ whatever of the fact that I can make arbitrary sounds which will lead a total stranger to think my own thought. It is sheer magic that I should be able to hold a one-sided conversation by means of black marks on paper with an unknown person half-way across the world. Talking, broadcasting, writing, and printing are all quite literally forms of thought transference, and it is the ability and eagerness to transfer and receive the contents of the mind that is almost alone responsible for human civilization.
50 | Type well used is invisible as type
51 | If you agree with this, you will agree with my one main idea, i.e. that the most important thing about printing is that it conveys thought, ideas, images, from one mind to other minds. This statement is what you might call the front door of the science of typography. Within lie hundreds of rooms; but unless you start by assuming that printing is meant to convey specific and coherent ideas, it is very easy to find yourself in the wrong house altogether.
52 | Before asking what this statement leads to, let us see what it does not necessarily lead to. If books are printed in order to be read, we must distinguish readability from what the optician would call legibility. A page set in 14-pt Bold Sans is, according to the laboratory tests, more ‘legible’ than one set in 11-pt Baskerville. A public speaker is more ‘audible’ in that sense when he bellows. But a good speaking voice is one which is inaudible as a voice. It is the transparent goblet again! I need not warn you that if you begin listening to the inflections and speaking rhythms of a voice from a platform, you are falling asleep. When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.
53 | We may say, therefore, that printing may be delightful for many reasons, but that it is important, first and foremost, as a means of doing something. That is why it is mischievous to call any printed piece a work of art, especially fine art: because that would imply that its first purpose was to exist as an expression of beauty for its own sake and for the delectation of the senses. Calligraphy can almost be considered a fine art nowadays, because its primary economic and educational purpose has been taken away; but printing in English will not qualify as an art until the present English language no longer conveys ideas to future generations, and until printing itself hands its usefulness to some yet unimagined successor.
54 | There is no end to the maze of practices in typography, and this idea of printing as a conveyor is, at least in the minds of all the great typographers with whom I have had the privilege of talking, the one clue that can guide you through the maze. Without this essential humility of mind, I have seen ardent designers go more hopelessly wrong, make more ludicrous mistakes out of an excessive enthusiasm, than I could have thought possible. And with this clue, this purposiveness in the back of your mind, it is possible to do the most unheard-of things, and find that they justify you triumphantly. It is not a waste of time to go to the simple fundamentals and reason from them. In the flurry of your individual problems, I think you will not mind spending half an hour on one broad and simple set of ideas involving abstract principles.
55 | I once was talking to a man who designed a very pleasing advertising type which undoubtedly all of you have used. I said something about what artists think about a certain problem, and he replied with a beautiful gesture: ‘Ah, madam, we artists do not think---we feel!’ That same day I quoted that remark to another designer of my acquaintance, and he, being less poetically inclined, murmured: ‘I’m not feeling very well today, I think!’ He was right, he did think; he was the thinking sort; and that is why he is not so good a painter, and to my mind ten times better as a typographer and type designer than the man who instinctively avoided anything as coherent as a reason. I always suspect the typographic enthusiast who takes a printed page from a book and frames it to hang on the wall, for I believe that in order to gratify a sensory delight he has mutilated something infinitely more important. I remember that T.M. Cleland, the famous American typographer, once showed me a very beautiful layout for a Cadillac booklet involving decorations in colour. He did not have the actual text to work with in drawing up his specimen pages, so he had set the lines in Latin. This was not only for the reason that you will all think of; if you have seen the old typefoundries’ famous Quousque Tandem copy (i.e. that Latin has few descenders and thus gives a remarkably even line). No, he told me that originally he had set up the dullest ‘wording’ that he could find (I dare say it was from Hansard), and yet he discovered that the man to whom he submitted it would start reading and making comments on the text. I made some remark on the mentality of Boards of Directors, but Mr Cleland said, ‘No: you’re wrong; if the reader had not been practically forced to read---if he had not seen those words suddenly imbued with glamour and significance---then the layout would have been a failure. Setting it in Italian or Latin is only an easy way of saying “This is not the text as it will appear”.’
56 | Let me start my specific conclusions with book typography, because that contains all the fundamentals, and then go on to a few points about advertising. The book typographer has the job of erecting a window between the reader inside the room and that landscape which is the author’s words. He may put up a stained-glass window of marvellous beauty, but a failure as a window; that is, he may use some rich superb type like text gothic that is something to be looked at, not through. Or he may work in what I call transparent or invisible typography. I have a book at home, of which I have no visual recollection whatever as far as its typography goes; when I think of it, all I see is the Three Musketeers and their comrades swaggering up and down the streets of Paris. The third type of window is one in which the glass is broken into relatively small leaded panes; and this corresponds to what is called ‘fine printing’ today, in that you are at least conscious that there is a window there, and that someone has enjoyed building it. That is not objectionable, because of a very important fact which has to do with the psychology of the subconscious mind. That is that the mental eye focuses through type and not upon it. The type which, through any arbitrary warping of design or excess of ‘colour’, gets in the way of the mental picture to be conveyed, is a bad type. Our subconsciousness is always afraid of blunders (which illogical setting, tight spacing and too-wide unleaded lines can trick us into), of boredom, and of officiousness. The running headline that keeps shouting at us, the line that looks like one long word, the capitals jammed together without hair-spaces---these mean subconscious squinting and loss of mental focus.
57 | And if what I have said is true of book printing, even of the most exquisite limited editions, it is fifty times more obvious in advertising, where the one and only justification for the purchase of space is that you are conveying a message---that you are implanting a desire, straight into the mind of the reader. It is tragically easy to throw away half the reader- interest of an advertisement by setting the simple and compelling argument in a face which is uncomfortably alien to the classic reasonableness of the book-face. Get attention as you will by your headline, and make any pretty type pictures you like if you are sure that the copy is useless as a means of selling goods; but if you are happy enough to have really good copy to work with, I beg you to remember that thousands of people pay hard-earned money for the privilege of reading quietly set book-pages, and that only your wildest ingenuity can stop people from reading a really interesting text.
58 | Printing demands a humility of mind, for the lack of which many of the fine arts are even now floundering in self-conscious and maudlin experiments. There is nothing simple or dull in achieving the transparent page. Vulgar ostentation is twice as easy as discipline. When you realise that ugly typography never effaces itself; you will be able to capture beauty as the wise men capture happiness by aiming at something else. The ‘stunt typographer’ learns the fickleness of rich men who hate to read. Not for them are long breaths held over serif and kern, they will not appreciate your splitting of hair-spaces. Nobody (save the other craftsmen) will appreciate half your skill. But you may spend endless years of happy experiment in devising that crystalline goblet which is worthy to hold the vintage of the human mind. (Originally printed in London in 1932, under the pseudonym Paul Beaujon. This version printed in London 1955).
59 |
60 |
61 |
62 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/part-08/example-magazine.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Outdoor Adventures
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
57 |
58 |
59 |
60 |
61 |
62 |
78 |
79 |
80 |
81 |
82 |
83 | Gone canyoning: pushing past the plateaus
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
Take a trip down from the edge. Most day-hikers stop at the plateaus just short way down from the South Rim. Follow our tips to help push past the usual stopping points and really explore what the Grand Canyon has to offer.
92 |
Our intrepid field editors go through the gear, the grub, and the plan to help you get the most out of your trek.
93 |
94 |
95 |
Also in this issue
96 |
97 |
Dream vacation or daycare disaster: woman unable to stand while being covered by inquisitive baby pandas
98 | Ellen always wanted to hold a baby panda. But she got a few more than she bargained for when visiting the Panda Center. Seven more, to be precise. She had to be rescued by staff when all 8 cubs decided she looked like the perfect perch.
99 |
100 |
101 |
102 | Arizona’s car-hood-egg-fry has it’s earliest date in decades
103 | It’s usually May before Phoenix residents have a chance to fire up the El Camino and fry up some breakfast. But in an unusually warm spring, the first 115-degree day came early and the competition will heat up fast.
104 |
105 |
106 | Cordless bungee jumping: craze or crazy?
107 | Embracing the latest trend in adventure jumping takes on new meaning when there’s no harness. Hold on! We send our intern to get the inside scoop.
108 |
109 |
110 | A third story without any outdoor connection
111 | Looking to fill that all-important lower-left spot in the front page, this story shockingly lacks any outdoor content at all. In fact, the editors didn’t seem to put any particular effort in at all to add anything outdoorsy whatsoever.
112 |
113 |
114 | Looking for Cod in all the wrong places
115 | Cod, the long-time staple of New England fisheries, has been going missing in recent years. Despite some saying the Blessing of the Fleet is to blame, others say 'we just ate them all.'
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | Wilanów Palace in Warsaw, Poland
124 |
125 |
126 |
127 |
128 |
129 | New neighbors in Puerto Rico
130 |
131 |
132 |
133 |
134 |
135 | Hang ten standing still in Munich, Germany
136 |
137 |
138 |
139 |
140 |
141 | Get a ticket to ride (the ferry) in Sydney, Australia
142 |
143 |
144 |
145 |
146 |
147 |
148 | Destinations
149 |
150 |
151 | Sonoma County, CA
152 |
153 |
154 |
155 | Campfire Stories
156 |
157 | The Tale of Two Socks
158 | By Susan Flicker | Mammoth, CA
159 |
160 |
161 | Loon’s Last Laugh
162 | By William McCurdy | Loon Mtn, NH
163 |
164 |
165 | My Stormy Monday
166 | By Jane Reynolds | Mt. Ranier, WA
167 |
168 |
169 |
170 | Gear Reports
171 |
172 |
173 |
174 |
175 | Bespoke beauty: London’s handbuilt bikcycle show
176 | Proof that treasures about in every era. We found some golden goodies.
177 |
178 |
179 | Handcrafted axe handles: we test the best
180 |
181 |
182 | Waterproof white noise that drowns out any squall
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
--------------------------------------------------------------------------------
/part-08/index-meta.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | The evolution of typography with variable fonts | Jason Pamental
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | The evolution of typography with variable fonts
61 | Words have power, and typography is their voice
62 | by Jason Pamental
63 |
64 |
65 | &
66 | &
67 | &
68 | &
69 | Click to
70 |
71 |
72 |
We’re sorry!
73 |
It appears that your browser does not support variable fonts. So while you can read the article, you’re not really seeing it as intended. There are a bunch of browsers that do support them already, including:
74 |
81 |
82 | For centuries, type has been how we ‘hear’ what we read. It’s also generally understood that typefaces and typography are a core element of branding, of expression, of vocal range. Great typography influences understanding, mood, and meaning in countless ways and is an essential part of design. Unfortunately, for many years after the advent of the web, we were unable to apply all but the most basic of typographic design to online content. With the ability to use real fonts and OpenType features—like ligatures, specific figure sets, fractions, and true kerning—the typographic landscape improved tremendously. But the reality of viewing content on the web dictates that speed is the most critical aspect of design—so we’ve traded typographic ‘vocal range’ for page speed. That means fewer font weights and reduced brand fidelity and voice.
83 |
84 | From many, one (paradigm: shifted)
85 | A variable font is a single font that acts as many
John Hudson
86 | The advent of Variable Fonts changes that entire dynamic. As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format (which is technically part of the OpenType 1.8 specification) is completely extensible. The type designer has complete control over what axes are used, their ranges, and even the definition of new axes. There are currently 5 ‘registered’ axes (width, weight, slant, italics, and optical sizing), but the designer can vary any axis they choose. Some examples include the height of ascenders and descenders, text grade, even serif shape. The possibilities are nearly limitless. By removing the performance barrier, we open the door for more interesting and dynamic design and far greater ability to express the true voice of the brand. All this while maintaining fidelity to the typeface itself: only axes exposed by the type designer can be varied. No artificial distortion allowed.
87 |
88 | Web design, reinvented
89 |
90 | transform
91 | 18 files, over 288k
92 | into just
93 | 1 file 84k
94 |
95 | While the technology is still maturing and type designers are working to become more fluent in this new way of working, the promise for design on the web is ground-breaking. The typical scenario would be to constrain any given design to 3-5 different fonts to represent every aspect of a site’s design language and voice—including every permutation for body copy and headings. At its simplest implementation, variable fonts would give us the freedom to use different weights for every level of heading—greatly increasing their clarity and readability.
96 |
97 | One could also use slightly narrower character widths for headings or on data-dense displays of information. In fact the entire typographic system could be designed to be proportional: weight and width could become multipliers on the standard body copy settings. Doing so would allow those aspects to scale easily along with the body copy should its settings change based on screen size or user preference. All of this with an accompanying increase in performance due to fewer HTTP requests (fewer font files) and an overall savings of data to download (though that will vary by font and compression used).
98 |
99 | But while these freedoms allow us to be more expressive, some of the really interesting capabilities will help transform the reading experience itself. This page has been set with a new variable font version of FF Meta , the classic sans-serif design by Erik Spiekermann first released in 1991. Even with only one axis of variation (weight) of both roman and italic variants, a wonderful range of voice can be achieved with massive gains in performance: 18 files and over 288k replaced with a single file of only 84k.
100 |
101 | Reinvented reading on screen
102 |
103 | [Meta] has to do more than look pretty: it has to work pretty hard
104 | Erik Spiekermann
105 |
106 | Some of the biggest challenges in creating a good reading experience are tied to the lack of finesse in proportion and fine details. The combination of modern CSS and OpenType features and variations presents a powerful combination. Being able to set features like ligatures and hyphenation based on language, turn hyphenation on and off based on screen size, and even tailor the character width on the smallest screens in order to fit more characters per line without reducing font size can make dramatic improvements in the smoothness and comfort of the reading experience.
107 |
108 | Ready for a close-up
109 |
110 |
111 |
112 | 18th century cut of Garamond cut in optical sizes. The first image is at 6pt size, the second is at 72. Note the difference in stroke contrast. It’s much more refined in the larger size.
113 |
114 | Another feature that was common in metal type but lost in translation to photo-typesetting and digital was optical sizing (well, some designers do still create separate optical sizes for different ranges, but it’s rare and somewhat limited). Not as often found on sans-serif designs, but in decades past (in truth, for centuries), it was quite common for the physically smaller sizes of a typeface to be cut with slightly heavier strokes, more open bowls and counters, and in some cases even wider apertures in order to preserve readability. Newspapers in particular found this critical to ensure lines didn’t get lost or letters didn’t suffer too greatly from ink gain.
115 |
116 | Optical sizing has made a return in variable fonts, and can be automatically applied where available, or set explicitly by the web designer or developer. As mentioned, it’s not as frequent a feature in sans-serif typefaces like this one, but can be used to quite dramatic effect in higher-stroke-contrast serif designs.
117 |
118 | Polish and poise
119 | With the benefits already discussed, the case for variable fonts is pretty compelling. But good typography isn’t all there is to great design. The range of axes like width and weight give us tremendous freedom to embrace more editorial design on the web without having to load an exorbitant number of file assets. And since we already have those few required variable fonts in place, the opportunity is to expose them for use by content publishers themselves. Imagine a role for designers inside the Content Management System (or CMS) where the website is housed. That designer could use some simple controls built into the CMS that would allow them to typeset specific headlines or pull-quotes, enabling a whole new level of design much like what we have in print, without having to write custom code every time.
120 |
121 | We may still be at the dawn of this new era, but it’s future is certainly bright
122 | As of May 2018, 3 out of 4 major web browsers already support variable fonts, in addition to both dominant mobile platforms (check support on caniuse.com ). With that in mind, we’re ready to start lighting up the web today.
123 |
124 |
125 |
126 |
127 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/scss/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/rwt-vf-workshop-full/d9a176aadd6620063318229bd52df0a81ca0801c/scss/.DS_Store
--------------------------------------------------------------------------------
/scss/04-vf-samples.scss:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | /* Breakpoint variables */
4 | --bp-small: 24.15;
5 | --bp-medium: 43.75;
6 | --bp-large: 60.25;
7 | --bp-xlarge: 75;
8 |
9 | /* Paragraph variables */
10 | --p-line-height-min: 1.15;
11 | --p-line-height-max: 1.5;
12 | --p-font-size-min: 1.0;
13 | --p-font-size-max: 1.25;
14 | --p-vf-wght: 350;
15 |
16 | /* H1 variables */
17 | --h1-line-height-min: 1;
18 | --h1-line-height-max: 1.25;
19 | --h1-font-size-min: 5;
20 | --h1-font-size-max: 10;
21 | --h1-vf-wght-multiplier-s: 2.5;
22 | --h1-vf-wght-multiplier-m: 2.75;
23 | --h1-vf-wght-multiplier-l: 3;
24 |
25 | --wght-multiplier: 1;
26 | }
27 |
28 |
29 | /* Undo some of the Layout width bits */
30 | .section-content {
31 | margin: 0 auto;
32 | padding: 0 0.5em;
33 | }
34 | @media only screen and (min-width: calc( var(--bp-small) * 1em )) {
35 | .section-content {
36 | max-width: 98%;
37 | }
38 | }
39 |
40 | @media only screen and (min-width: 43.75em) {
41 | .section-content {
42 | max-width: 98%;
43 | }
44 | }
45 |
46 | @media only screen and (min-width: 56.25em) {
47 | .section-content {
48 | max-width: 98%;
49 | }
50 | }
51 |
52 | @media only screen and (min-width: 71.875em) {
53 | .section-content {
54 | max-width: 98em;
55 | }
56 | }
57 |
58 | @media only screen and (min-width: 81.25em) {
59 | .section-content {
60 | max-width: 98em;
61 | }
62 | }
63 |
64 |
65 |
66 |
67 | html {
68 | font-size: 100%;
69 | background-color: #E9DEC0;
70 | }
71 |
72 |
73 | body,
74 | p,
75 | th,
76 | td,
77 | ul,
78 | li {
79 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
80 | font-weight: normal;
81 | font-feature-settings: "liga" 1, "kern" 1;
82 | font-style: normal;
83 | }
84 |
85 | p {
86 | margin-left: auto;
87 | margin-right: auto;
88 | /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
89 | -ms-word-break: break-all;
90 | word-break: break-all;
91 |
92 | /* Non standard for webkit */
93 | word-break: break-word;
94 |
95 | -webkit-hyphens: auto;
96 | -moz-hyphens: auto;
97 | -ms-hyphens: auto;
98 | hyphens: auto;
99 | }
100 |
101 | /* Variations for font size and line height */
102 | p {
103 | font-size: calc( var(--p-font-size-min) * 1rem );
104 | font-variation-settings:
105 | 'wght' var(--p-vf-wght),
106 | 'wdth' 100,
107 | 'opsz' calc( var(--p-font-size-max) * 16 ),
108 | 'grad' 88;
109 | line-height: var(--p-line-height-min);
110 | max-width: 57.5em;
111 | transition: all linear 0.2s;
112 | }
113 |
114 |
115 |
116 | h1, h2, h3, h4, h5, h6 {
117 | color: #3E4F6B;
118 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
119 | font-variation-settings:
120 | 'wght' 600,
121 | 'wdth' 100,
122 | 'opsz' 24,
123 | 'grad' 88;
124 | font-weight: normal;
125 | transition: all linear 0.75s;
126 | }
127 |
128 | h1,
129 | button {
130 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
131 | font-size: calc( var(--h1-font-size-max) * 1em );
132 | font-variation-settings:
133 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
134 | 'wdth' 100,
135 | 'YTLC' 500,
136 | 'YTAS' 750,
137 | 'YTDE' 250,
138 | 'YTUC' 750,
139 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
140 | 'grad' 88;
141 | line-height: calc( var(--h1-line-height-max) * 1em);
142 | margin: 0 auto 1em auto;
143 | max-width: 57.5rem;
144 | padding: 0 0 3rem 0;
145 | &.demo-wght-bold {
146 | font-weight: calc( var(--p-vf-wght) * var(--wght-multiplier) );
147 | font-variation-settings:
148 | 'wdth' 100,
149 | 'YTLC' 500,
150 | 'YTAS' 750,
151 | 'YTDE' 250,
152 | 'YTUC' 750,
153 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
154 | 'grad' 88;
155 | &:hover {
156 | font-weight: calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) );
157 | font-variation-settings:
158 | 'wdth' 100,
159 | 'YTLC' 500,
160 | 'YTAS' 750,
161 | 'YTDE' 250,
162 | 'YTUC' 750,
163 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
164 | 'grad' 88;
165 | }
166 | }
167 | &.demo-wght {
168 | font-variation-settings:
169 | 'wght' calc( var(--p-vf-wght) * var(--wght-multiplier) ),
170 | 'wdth' 100,
171 | 'YTLC' 500,
172 | 'YTAS' 750,
173 | 'YTDE' 250,
174 | 'YTUC' 750,
175 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
176 | 'grad' 88;
177 | &:hover {
178 | font-variation-settings:
179 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
180 | 'wdth' 100,
181 | 'YTLC' 500,
182 | 'YTAS' 750,
183 | 'YTDE' 250,
184 | 'YTUC' 750,
185 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
186 | 'grad' 88;
187 | }
188 | }
189 | &.demo-wdth-stretch {
190 | font-stretch: 75;
191 | font-variation-settings:
192 | 'wght' 500,
193 | 'YTLC' 500,
194 | 'YTAS' 750,
195 | 'YTDE' 250,
196 | 'YTUC' 750,
197 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
198 | 'grad' 88;
199 | &:hover {
200 | font-stretch: 100;
201 | font-variation-settings:
202 | 'wght' 500,
203 | 'YTLC' 500,
204 | 'YTAS' 750,
205 | 'YTDE' 250,
206 | 'YTUC' 750,
207 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
208 | 'grad' 88;
209 | }
210 | }
211 | &.demo-wdth {
212 | font-variation-settings:
213 | 'wght' 500,
214 | 'wdth' 75,
215 | 'YTLC' 500,
216 | 'YTAS' 750,
217 | 'YTDE' 250,
218 | 'YTUC' 750,
219 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
220 | 'grad' 88;
221 | &:hover {
222 | font-variation-settings:
223 | 'wght' 500,
224 | 'wdth' 100,
225 | 'YTLC' 500,
226 | 'YTAS' 750,
227 | 'YTDE' 250,
228 | 'YTUC' 750,
229 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
230 | 'grad' 88;
231 | }
232 | }
233 | &.demo-slnt {
234 | font-family: "Output Sans VF";
235 | font-variation-settings:
236 | 'wght' 250,
237 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
238 | 'slnt' 0;
239 | &:hover {
240 | font-variation-settings:
241 | 'wght' 250,
242 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
243 | 'slnt' 1000;
244 | }
245 | }
246 | &.demo-slnt-oblique {
247 | font-family: "Output Sans VF";
248 | font-style: oblique 0deg;
249 | font-variation-settings:
250 | 'wght' 250,
251 | 'opsz' calc( var(--h1-font-size-max) * 16 );
252 | &:hover {
253 | font-style: oblique 20deg;
254 | font-variation-settings:
255 | 'wght' 250,
256 | 'opsz' calc( var(--h1-font-size-max) * 16 );
257 | }
258 | }
259 | &.demo-ital {
260 | font-family: "Louvette VF";
261 | font-variation-settings:
262 | 'wght' 300,
263 | 'opsz' calc( var(--h1-font-size-max) * 16 );
264 | &:hover {
265 | font-style: italic;
266 | font-variation-settings:
267 | 'wght' 300,
268 | 'opsz' calc( var(--h1-font-size-max) * 16 );
269 | }
270 | }
271 | &.demo-opsz {
272 | font-size: calc( var(--h1-font-size-min) * 1em );
273 | font-variation-settings:
274 | 'wght' 400,
275 | 'wdth' 100,
276 | 'YTLC' 500,
277 | 'YTAS' 750,
278 | 'YTDE' 250,
279 | 'YTUC' 750,
280 | 'opsz' 12,
281 | 'grad' 88;
282 | vertical-align: baseline;
283 | &:hover {
284 | font-size: calc( var(--h1-font-size-max) * 1em );
285 | font-variation-settings:
286 | 'wght' 400,
287 | 'wdth' 100,
288 | 'YTLC' 500,
289 | 'YTAS' 750,
290 | 'YTDE' 250,
291 | 'YTUC' 750,
292 | 'opsz' 72,
293 | 'grad' 88;
294 | }
295 | }
296 | &.demo-grad {
297 | font-variation-settings:
298 | 'wght' 600,
299 | 'wdth' 100,
300 | 'YTLC' 500,
301 | 'YTAS' 750,
302 | 'YTDE' 250,
303 | 'YTUC' 750,
304 | 'opsz' 24,
305 | 'GRAD' 88;
306 | &:hover {
307 | font-variation-settings:
308 | 'wght' 600,
309 | 'wdth' 100,
310 | 'YTLC' 500,
311 | 'YTAS' 750,
312 | 'YTDE' 250,
313 | 'YTUC' 750,
314 | 'opsz' 24,
315 | 'GRAD' 150;
316 | }
317 | }
318 | &.demo-ascdesc {
319 | font-variation-settings:
320 | 'wght' 500,
321 | 'wdth' 100,
322 | 'YTLC' 500,
323 | 'YTAS' 750,
324 | 'YTDE' 250,
325 | 'YTUC' 750,
326 | 'opsz' 60,
327 | 'grad' 88;
328 | &:hover {
329 | font-variation-settings:
330 | 'wght' 500,
331 | 'wdth' 100,
332 | 'YTLC' 500,
333 | 'YTAS' 680,
334 | 'YTDE' 190,
335 | 'YTUC' 750,
336 | 'opsz' 60,
337 | 'grad' 88;
338 | }
339 | }
340 | &.demo-mayhem {
341 | font-family: "Decovar VF";
342 | font-size: 9em;
343 | font-variation-settings:
344 | 'BLDA' 0,
345 | 'TRMD' 0,
346 | 'TRMC' 0,
347 | 'SKLD' 0,
348 | 'TRML' 0,
349 | 'SKLA' 0,
350 | 'TRMF' 0,
351 | 'TRMK' 0,
352 | 'BLDB' 0,
353 | 'WMX2' 900,
354 | 'TRMB' 0,
355 | 'TRMA' 0,
356 | 'SKLB' 0,
357 | 'TRMG' 0,
358 | 'TRME' 0;
359 | &:hover {
360 | font-variation-settings:
361 | 'BLDA' 0,
362 | 'TRMD' 0,
363 | 'TRMC' 750,
364 | 'SKLD' 0,
365 | 'TRML' 250,
366 | 'SKLA' 1000,
367 | 'TRMF' 250,
368 | 'TRMK' 250,
369 | 'BLDB' 1000,
370 | 'WMX2' 750,
371 | 'TRMB' 500,
372 | 'TRMA' 500,
373 | 'SKLB' 1000,
374 | 'TRMG' 750,
375 | 'TRME' 500;
376 | }
377 | }
378 | &.demo-viewport {
379 | --h1-font-size-max: 7;
380 | font-size: 2.5vw;
381 | font-variation-settings:
382 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
383 | 'wdth' 100,
384 | 'YTLC' 500,
385 | 'YTAS' 750,
386 | 'YTDE' 250,
387 | 'YTUC' 750,
388 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
389 | 'grad' 88;
390 | margin-left: 5%;
391 | max-width: 25vw;
392 | border: solid 5px;
393 | border-radius: 2rem;
394 | padding: 3rem 1rem 1rem 1rem;
395 | height: 30rem;
396 | &:hover {
397 | border-radius: 1rem;
398 | font-size: 9vw;
399 | font-variation-settings:
400 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
401 | 'wdth' 100,
402 | 'YTLC' 500,
403 | 'YTAS' 750,
404 | 'YTDE' 250,
405 | 'YTUC' 750,
406 | 'opsz' calc( var(--h1-font-size-max) * 16 ),
407 | 'grad' 88;
408 | height: 35rem;
409 | max-width: 90vw
410 | }
411 | }
412 | &.demo-button {
413 | transition: all linear 0.5s;
414 | padding: .5em 1em;
415 | border-radius: .25em;
416 | max-width: none;
417 | position: relative;
418 | z-index: 1;
419 | background: linear-gradient(to bottom, #e1e1f1 0%,#d9d9e9 34%,#b1b1c1 100%);
420 | font-variation-settings:
421 | 'wght' 600,
422 | 'wdth' 100,
423 | 'YTLC' 500,
424 | 'YTAS' 750,
425 | 'YTDE' 250,
426 | 'YTUC' 750,
427 | 'opsz' 60,
428 | 'GRAD' 88;
429 | &::before {
430 | position: absolute;
431 | content: "";
432 | top: 0;
433 | right: 0;
434 | bottom: 0;
435 | left: 0;
436 | border-radius: .25em;
437 | background: linear-gradient(to bottom, #b1b1c1 0%,#a9a9b9 34%,#818191 100%);
438 | z-index: -1;
439 | transition: opacity 0.5s linear;
440 | opacity: 0;
441 | }
442 | &:hover {
443 | cursor: pointer;
444 | font-variation-settings:
445 | 'wght' 600,
446 | 'wdth' 100,
447 | 'YTLC' 500,
448 | 'YTAS' 750,
449 | 'YTDE' 250,
450 | 'YTUC' 750,
451 | 'opsz' 60,
452 | 'GRAD' 150;
453 | &::before {
454 | opacity: 1;
455 | }
456 | }
457 | }
458 | }
459 |
460 |
461 |
462 | .demo-wght {
463 | //animation: pulse 2s infinite;
464 | }
465 |
466 | @-webkit-keyframes pulse {
467 | 0% {
468 | --wght-multiplier: 1;
469 | }
470 | 70% {
471 | --wght-multiplier: 2;
472 | }
473 | 100% {
474 | --wght-multiplier: 3;
475 | }
476 | }
477 | @keyframes pulse {
478 | 0% {
479 | --wght-multiplier: 1;
480 | }
481 | 70% {
482 | --wght-multiplier: 2;
483 | }
484 | 100% {
485 | --wght-multiplier: 3;
486 | }
487 | }
488 |
489 |
490 |
491 |
--------------------------------------------------------------------------------
/scss/05-plex-styles.scss:
--------------------------------------------------------------------------------
1 |
2 | /* Undo some of the Layout width bits */
3 | .section-content {
4 | margin: 0 auto;
5 | padding: 0 0.5em;
6 | }
7 | @media only screen and (min-width: 24.15em) {
8 | .section-content {
9 | max-width: 98%;
10 | }
11 | }
12 |
13 | @media only screen and (min-width: 43.75em) {
14 | .section-content {
15 | max-width: 98%;
16 | }
17 | }
18 |
19 | @media only screen and (min-width: 60.25em) {
20 | .section-content {
21 | max-width: 98%;
22 | }
23 | }
24 |
25 | @media only screen and (min-width: 75em) {
26 | .section-content {
27 | max-width: 98em;
28 | }
29 | }
30 |
31 |
32 | html {
33 | background-color: #fbfbf6;
34 | color: #3c3d31;
35 | font-size: 100%;
36 | }
37 |
38 | body {
39 | padding-top: 5rem;
40 | }
41 |
42 | body,
43 | p,
44 | th,
45 | td,
46 | ul,
47 | li {
48 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
49 | font-weight: normal;
50 | font-style: normal;
51 | .wf-inactive & {
52 | font-family: Georgia, "New Times Roman", serif;
53 | }
54 | }
55 |
56 | .inverse {
57 | background-color: #3c3d31;
58 | color: #fbfbf6;
59 | }
60 |
61 |
62 | p {
63 | margin-left: auto;
64 | margin-right: auto;
65 | max-width: 38rem;
66 | transition: all linear 0.2s;
67 | hyphens: auto;
68 | font-feature-settings: "liga" 1, "kern" 1;
69 | }
70 |
71 | /* Variations and variables */
72 | p {
73 | font-size: 1.125em;
74 | line-height: 1.5;
75 | .wf-inactive & {
76 | font-size: 1.2em;
77 | line-height: 1.475;
78 | }
79 | }
80 |
81 |
82 | /* Generic header styles */
83 | h1, h2, h3, h4, h5, h6 {
84 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
85 | font-weight: bold;
86 | .wf-inactive & {
87 | font-family: Georgia, "New Times Roman", serif;
88 | }
89 | }
90 |
91 | h1 {
92 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
93 | font-size: 4em;
94 | line-height: 1.1;
95 | margin: 1rem auto;
96 | max-width: 70rem;
97 | .wf-inactive & {
98 | font-family: Georgia, "New Times Roman", serif;
99 | letter-spacing: -.5px;
100 | }
101 | }
102 |
103 |
104 |
105 |
106 |
107 | h2 {
108 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
109 | font-size: 3em;
110 | line-height: 1.2;
111 | margin: 0 auto 2rem auto;
112 | max-width: 70rem;
113 | .wf-inactive & {
114 | font-family: Georgia, "New Times Roman", serif;
115 | letter-spacing: -1px;
116 | }
117 | }
118 |
119 | blockquote {
120 | float: right;
121 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
122 | font-size: 5.5vw;
123 | line-height: .95;
124 | margin: 0 12vw 2rem 2rem;
125 | max-width: 29.5vw;
126 | transition: all linear 0.2s;
127 | .wf-inactive & {
128 | font-family: Georgia, "New Times Roman", serif;
129 | }
130 | &.right {
131 | float: right;
132 | margin-left: 2rem;
133 | margin-right: 12vw;
134 | }
135 | &.left {
136 | float: left;
137 | margin-left: 12vw;
138 | margin-right: 2rem;
139 | }
140 | .well-used {
141 | font-size: 1.33em;
142 | line-height: .75;
143 | }
144 | .invisible {
145 | font-size: 1.66em;
146 | font-weight: bold;
147 | line-height: .75;
148 | }
149 | }
150 |
151 | img {
152 | height: auto;
153 | max-width: 100%;
154 | width: 100%;
155 | }
156 |
157 | h2 + p {
158 | margin-top: 1em;
159 | }
160 |
161 | /* Section end styles */
162 | .section-end:after {
163 | color: #777;
164 | content: "\00a7";
165 | display: block;
166 | font-family: Georgia, "New Times Roman", serif;
167 | font-size: 1.5em;
168 | font-weight: 300;
169 | margin-top: 1em;
170 | text-align: center;
171 | }
172 |
173 | /* Initial Cap styles */
174 | .article-detail.initial p:first-of-type:first-letter {
175 | float: left;
176 | padding-right: 0.05em;
177 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
178 | font-size: 5em;
179 | line-height: .925;
180 | margin-bottom: -.1em;
181 | .wf-inactive & {
182 | font-family: Georgia, "New Times Roman", serif;
183 | font-size: 4.95em;
184 | }
185 | }
186 |
187 | /* Content end styles */
188 | .content-area p:last-child:after {
189 | color: #777;
190 | content: "\2766";
191 | display: block;
192 | font-family: Georgia, "New Times Roman", serif;
193 | font-size: 1.25em;
194 | font-style: italic;
195 | font-weight: 300;
196 | line-height: .75;
197 | margin-top: 1rem;
198 | margin-bottom: 2rem;
199 | text-align: center;
200 | }
201 |
202 | /* Goblet and max-width wrapper */
203 | .figure-wrapper {
204 | font-size: 1em;
205 | margin-left: auto;
206 | margin-right: auto;
207 | max-width: 38em;
208 | }
209 |
210 | /* CSS shape outline for the goblet */
211 | .goblet {
212 | float: left;
213 | margin: 0 1.5rem 0 -17.5%;
214 | width: 35%;
215 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
216 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
217 | }
--------------------------------------------------------------------------------
/scss/06-plex-styles-rwt.scss:
--------------------------------------------------------------------------------
1 |
2 | /* Undo some of the Layout width bits */
3 | .section-content {
4 | margin: 0 auto;
5 | padding: 0 0.5em;
6 | }
7 | @media only screen and (min-width: 24.15em) {
8 | .section-content {
9 | max-width: 98%;
10 | }
11 | }
12 |
13 | @media only screen and (min-width: 43.75em) {
14 | .section-content {
15 | max-width: 98%;
16 | }
17 | }
18 |
19 | @media only screen and (min-width: 60.25em) {
20 | .section-content {
21 | max-width: 98%;
22 | }
23 | }
24 |
25 | @media only screen and (min-width: 75em) {
26 | .section-content {
27 | max-width: 98em;
28 | }
29 | }
30 |
31 |
32 | html {
33 | background-color: #fbfbf6;
34 | color: #3c3d31;
35 | font-size: 100%;
36 | }
37 |
38 | body {
39 | padding-top: 5rem;
40 | }
41 |
42 | body,
43 | p,
44 | th,
45 | td,
46 | ul,
47 | li {
48 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
49 | font-weight: normal;
50 | font-style: normal;
51 | .wf-inactive & {
52 | font-family: Georgia, "New Times Roman", serif;
53 | }
54 | }
55 |
56 | .inverse {
57 | background-color: #3c3d31;
58 | color: #fbfbf6;
59 | }
60 |
61 |
62 | p {
63 | margin-left: auto;
64 | margin-right: auto;
65 | max-width: 38rem;
66 | transition: all linear 0.2s;
67 | hyphens: auto;
68 | font-feature-settings: "liga" 1, "kern" 1;
69 | }
70 |
71 | /* Variations and variables */
72 | p {
73 | font-size: 1em;
74 | line-height: 1.15;
75 | .wf-inactive & {
76 | font-size: 1.05em;
77 | line-height: 1.125;
78 | }
79 | @media screen and (min-width: 24.15em) {
80 | line-height: 1.3;
81 | .wf-inactive & {
82 | line-height: 1.2;
83 | }
84 | }
85 | @media (min-width: 60.25em) {
86 | font-size: 1.125em;
87 | line-height: 1.5;
88 | .wf-inactive & {
89 | font-size: 1.2em;
90 | line-height: 1.475;
91 | }
92 | }
93 | @media (min-width: 75em) {
94 | font-size: 1.25em;
95 | .wf-inactive & {
96 | font-size: 1.32em;
97 | line-height: 1.45;
98 | word-spacing: 1px;
99 | }
100 | }
101 | }
102 |
103 |
104 | /* Generic header styles */
105 | h1, h2, h3, h4, h5, h6 {
106 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
107 | font-weight: bold;
108 | .wf-inactive & {
109 | font-family: Georgia, "New Times Roman", serif;
110 | }
111 | }
112 |
113 | h1 {
114 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
115 | font-size: 2em;
116 | line-height: .95;
117 | margin: 1rem auto;
118 | max-width: 50rem;
119 | .wf-inactive & {
120 | font-family: Georgia, "New Times Roman", serif;
121 | letter-spacing: -.5px;
122 | }
123 | @media screen and (min-width: 24.15em) {
124 | font-size: 2.5em;
125 | line-height: 1;
126 | }
127 | @media screen and (min-width: 43.75em) {
128 | font-size: 3.25em;
129 | max-width: 60rem;
130 | .wf-inactive & {
131 | font-family: Georgia, "New Times Roman", serif;
132 | letter-spacing: normal;
133 | }
134 | }
135 | @media screen and (min-width: 60.25em) {
136 | font-size: 4em;
137 | line-height: 1.1;
138 | max-width: 70rem;
139 | }
140 | @media (min-width: 75em) {
141 | font-size: 5em;
142 | max-width: 75rem;
143 | .wf-inactive & {
144 | letter-spacing: -1px;
145 | }
146 | }
147 | }
148 |
149 |
150 |
151 |
152 |
153 | h2 {
154 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
155 | font-size: 1.5em;
156 | line-height: 1.15;
157 | margin: 0 auto 2rem auto;
158 | max-width: 50rem;
159 | .wf-inactive & {
160 | font-family: Georgia, "New Times Roman", serif;
161 | letter-spacing: -.75px;
162 | }
163 | @media screen and (min-width: 24.15em) {
164 | font-size: 2em;
165 | }
166 | @media screen and (min-width: 43.75em) {
167 | font-size: 2.5em;
168 | line-height: 1.2;
169 | max-width: 60rem;
170 | .wf-inactive & {
171 | letter-spacing: -1px;
172 | }
173 | }
174 | @media screen and (min-width: 60.25em) {
175 | font-size: 3em;
176 | max-width: 70rem;
177 | }
178 | @media (min-width: 75em) {
179 | font-size: 3.5em;
180 | line-height: 1.25;
181 | max-width: 75rem;
182 | }
183 | }
184 |
185 | blockquote {
186 | float: right;
187 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
188 | font-size: 5.5vw;
189 | line-height: 1.1;
190 | margin: 0 5vw 1rem .5rem;
191 | max-width: 45vw;
192 | transition: all linear 0.2s;
193 | .wf-inactive & {
194 | font-family: Georgia, "New Times Roman", serif;
195 | }
196 | &.right {
197 | float: right;
198 | margin-left: .5rem;
199 | margin-right: 5vw;
200 | }
201 | &.left {
202 | float: left;
203 | margin-left: 5vw;
204 | margin-right: .5rem;
205 | }
206 | .well-used {
207 | font-size: 1em;
208 | }
209 | .invisible {
210 | font-size: 1.125em;
211 | font-weight: bold;
212 | }
213 | @media screen and (min-width: 24.15em) {
214 | line-height: 1;
215 | margin: 0 5vw .5rem .5rem;
216 | max-width: 47.5vw;
217 | &.right {
218 | margin-left: .5rem;
219 | margin-right: 5vw;
220 | }
221 | &.left {
222 | margin-left: 5vw;
223 | margin-right: .5rem;
224 | }
225 | .well-used {
226 | font-size: 1.33em;
227 | }
228 | .invisible {
229 | font-size: 1.55em;
230 | }
231 | }
232 | @media (min-width: 60.25em) {
233 | line-height: .95;
234 | margin: 0 12vw 2rem 2rem;
235 | max-width: 29.5vw;
236 | &.right {
237 | margin-left: 2rem;
238 | margin-right: 12vw;
239 | }
240 | &.left {
241 | margin-left: 12vw;
242 | margin-right: 2rem;
243 | }
244 | .well-used {
245 | font-size: 1.33em;
246 | line-height: .75;
247 | }
248 | .invisible {
249 | font-size: 1.66em;
250 | line-height: .75;
251 | }
252 | }
253 | }
254 |
255 | img {
256 | height: auto;
257 | max-width: 100%;
258 | width: 100%;
259 | }
260 |
261 | h2 + p {
262 | margin-top: 1em;
263 | }
264 |
265 | /* Section end styles */
266 | .section-end:after {
267 | color: #777;
268 | content: "\00a7";
269 | display: block;
270 | font-family: Georgia, "New Times Roman", serif;
271 | font-size: 1.5em;
272 | font-weight: 300;
273 | margin-top: 1em;
274 | text-align: center;
275 | }
276 |
277 | /* Initial Cap styles */
278 | .article-detail.initial p:first-of-type:first-letter {
279 | float: left;
280 | padding-right: 0.05em;
281 | font-family: "Plex Serif", Georgia, "New Times Roman", serif;
282 | font-size: 2.7em;
283 | line-height: .9;
284 | margin-bottom: -.1em;
285 | .wf-inactive & {
286 | font-family: Georgia, "New Times Roman", serif;
287 | }
288 | @media screen and (min-width: 43.75em) {
289 | font-size: 4.25em;
290 | .wf-inactive & {
291 | font-size: 4.2em;
292 | }
293 | }
294 | @media (min-width: 60.25em) {
295 | font-size: 5em;
296 | line-height: .925;
297 | .wf-inactive & {
298 | font-size: 4.95em;
299 | }
300 | }
301 | }
302 |
303 | /* Content end styles */
304 | .content-area p:last-child:after {
305 | color: #777;
306 | content: "\2766";
307 | display: block;
308 | font-family: Georgia, "New Times Roman", serif;
309 | font-size: 1.25em;
310 | font-style: italic;
311 | font-weight: 300;
312 | line-height: .75;
313 | margin-top: 1rem;
314 | margin-bottom: 2rem;
315 | text-align: center;
316 | }
317 |
318 | /* Goblet and max-width wrapper */
319 | .figure-wrapper {
320 | margin-left: auto;
321 | margin-right: auto;
322 | max-width: 38em;
323 | @media (min-width: 60.25em) {
324 | font-size: 1em;
325 | }
326 | @media (min-width: 75em) {
327 | font-size: 1.25em;
328 | }
329 | }
330 |
331 | /* CSS shape outline for the goblet */
332 | .goblet {
333 | float: left;
334 | margin: 0 1.5rem 0 0;
335 | width: 25%;
336 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
337 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
338 | @media screen and (min-width: 60.25em) {
339 | margin: 0 1.5rem 0 -17.5%;
340 | width: 35%;
341 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
342 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
343 | }
344 | }
--------------------------------------------------------------------------------
/scss/06-vf-styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | /* Breakpoint variables */
4 | --bp-small: 24.15;
5 | --bp-medium: 43.75;
6 | --bp-large: 60.25;
7 | --bp-xlarge: 75;
8 |
9 | /* text GRAD */
10 | --text-GRAD: 88;
11 |
12 | /* Paragraph variables */
13 | --p-line-height-min: 1.15;
14 | --p-line-height-max: 1.5;
15 | --p-font-size-min: 1.0;
16 | --p-font-size-max: 1.25;
17 | --p-vf-wght: 350;
18 | --p-vf-wdth: 100;
19 |
20 | /* H1 variables */
21 | --h1-line-height-min: .95;
22 | --h1-line-height-max: 1.05;
23 | --h1-font-size-min: 2.0;
24 | --h1-font-size-max: 5;
25 | --h1-vf-wght-multiplier-s: 2;
26 | --h1-vf-wght-multiplier-m: 2.25;
27 | --h1-vf-wght-multiplier-l: 2.5;
28 | --h1-vf-wdth: 100;
29 |
30 | /* H2 variables */
31 | --h2-line-height-min: 1.15;
32 | --h2-line-height-max: 1.25;
33 | --h2-font-size-min: 1.5;
34 | --h2-font-size-max: 3.5;
35 | --h2-vf-wght-multiplier-s: 1.25;
36 | --h2-vf-wght-multiplier-m: 1.5;
37 | --h2-vf-wght-multiplier-l: 1.75;
38 | --h2-vf-wdth: 100;
39 |
40 | /* Dropcap variables */
41 | --dc-line-height-min: .9;
42 | --dc-line-height-max: .95;
43 | --dc-font-size-min: 2.7;
44 | --dc-font-size-max: 5;
45 |
46 | /* Blockquote variables */
47 | --bq-line-height-min: 1.1;
48 | --bq-line-height-max: .95;
49 | --bq-font-size-min: 2.7;
50 | --bq-font-size-max: 5;
51 | }
52 |
53 | .graded {
54 | --text-GRAD: 150;
55 | }
56 |
57 | /* Undo some of the Layout width bits */
58 | .section-content {
59 | margin: 0 auto;
60 | padding: 0 0.5em;
61 | }
62 | @media only screen and (min-width: 24.15em) {
63 | .section-content {
64 | max-width: 98%;
65 | }
66 | }
67 |
68 | @media only screen and (min-width: 43.75em) {
69 | .section-content {
70 | max-width: 98%;
71 | }
72 | }
73 |
74 | @media only screen and (min-width: 60.25em) {
75 | .section-content {
76 | max-width: 98%;
77 | }
78 | }
79 |
80 | @media only screen and (min-width: 75em) {
81 | .section-content {
82 | max-width: 98em;
83 | }
84 | }
85 |
86 |
87 | html {
88 | background-color: #fbfbf6;
89 | color: #3c3d31;
90 | font-size: 100%;
91 | }
92 |
93 | body {
94 | padding-top: 5rem;
95 | }
96 |
97 | body,
98 | p,
99 | th,
100 | td,
101 | ul,
102 | li {
103 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
104 | font-weight: normal;
105 | font-style: normal;
106 | }
107 |
108 | .inverse {
109 | background-color: #3c3d31;
110 | color: #fbfbf6;
111 | }
112 |
113 | p {
114 | margin-left: auto;
115 | margin-right: auto;
116 | max-width: 38em;
117 | transition: all linear 0.2s;
118 | hyphens: auto;
119 | }
120 |
121 | /* Variations and variables */
122 | p {
123 | font-size: calc( var(--p-font-size-min) * 1rem );
124 | font-variation-settings:
125 | 'wght' var(--p-vf-wght),
126 | 'wdth' calc( var(--p-vf-wdth) * .85 ),
127 | 'GRAD' var(--text-GRAD);
128 | line-height: var(--p-line-height-min);
129 | .inverse & {
130 | --text-GRAD: 120;
131 | }
132 | @media screen and (min-width: 24.15em) {
133 | font-variation-settings:
134 | 'wght' var(--p-vf-wght),
135 | 'wdth' calc( var(--p-vf-wdth) * .90 ),
136 | 'GRAD' var(--text-GRAD);
137 | line-height: calc(( var(--p-line-height-min) * 1em ) + ( var(--p-line-height-max) - var(--p-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
138 | }
139 | @media (min-width: 60.25em) {
140 | font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
141 | font-variation-settings:
142 | 'wght' var(--p-vf-wght),
143 | 'wdth' calc( var(--p-vf-wdth) * 1 ),
144 | 'GRAD' var(--text-GRAD);
145 | line-height: var(--p-line-height-max);
146 | }
147 | @media (min-width: 75em) {
148 | font-size: calc( var(--p-font-size-max) * 1em );
149 | }
150 | }
151 |
152 |
153 | /* Generic header styles */
154 | h1, h2, h3, h4, h5, h6 {
155 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
156 | font-weight: normal;
157 | font-variation-settings:
158 | 'wght' 600,
159 | 'wdth' 100,
160 | 'GRAD' var(--text-GRAD);
161 | transition: all linear 0.2s;
162 | }
163 |
164 | h1 {
165 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
166 | font-size: calc( var(--h1-font-size-min) * 1em );
167 | font-variation-settings:
168 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s) ),
169 | 'wdth' calc( var(--h1-vf-wdth) * .75 ),
170 | 'GRAD' var(--text-GRAD);
171 | line-height: var(--h1-line-height-min);
172 | margin: 1rem auto;
173 | max-width: 50rem;
174 | .inverse & {
175 | --text-GRAD: 100;
176 | }
177 | @media screen and (min-width: 24.15em) {
178 | line-height: calc(( var(--h1-line-height-min) * 1em ) + ( var(--h1-line-height-max) - var(--h1-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
179 | font-size: calc(( var(--h1-font-size-min) * 1em ) + ( var(--h1-font-size-max) - var(--h1-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
180 | }
181 | @media screen and (min-width: 43.75em) {
182 | font-variation-settings:
183 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-m) ),
184 | 'wdth' calc( var(--h1-vf-wdth) * .82 ),
185 | 'GRAD' var(--text-GRAD);
186 | max-width: 60rem;
187 | }
188 | @media screen and (min-width: 60.25em) {
189 | font-variation-settings:
190 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
191 | 'wdth' calc( var(--h1-vf-wdth) * .94 ),
192 | 'GRAD' var(--text-GRAD);
193 | line-height: var(--h1-line-height-max);
194 | max-width: 70rem;
195 | }
196 | @media (min-width: 75em) {
197 | font-size: calc( var(--h1-font-size-max) * 1em );
198 | font-variation-settings:
199 | 'wght' calc( var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l) ),
200 | 'wdth' calc( var(--h1-vf-wdth) * 1 ),
201 | 'GRAD' var(--text-GRAD);
202 | line-height: var(--h1-line-height-max);
203 | max-width: 75rem;
204 | }
205 | }
206 |
207 |
208 |
209 |
210 |
211 | h2 {
212 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
213 | font-size: calc( var(--h2-font-size-min) * 1em );
214 | font-variation-settings:
215 | 'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-s) ),
216 | 'wdth' calc( var(--h2-vf-wdth) * .80 ),
217 | 'GRAD' var(--text-GRAD);
218 | line-height: var(--h2-line-height-min);
219 | margin: 0 auto 2rem auto;
220 | max-width: 50rem;
221 | .inverse & {
222 | --text-GRAD: 100;
223 | }
224 | @media screen and (min-width: 24.15em) {
225 | line-height: calc(( var(--h2-line-height-min) * 1em ) + ( var(--h2-line-height-max) - var(--h2-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
226 | font-size: calc(( var(--h2-font-size-min) * 1em ) + ( var(--h2-font-size-max) - var(--h2-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
227 | }
228 | @media screen and (min-width: 43.75em) {
229 | font-variation-settings:
230 | 'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-m) ),
231 | 'wdth' calc( var(--h2-vf-wdth) * .90 ),
232 | 'GRAD' var(--text-GRAD);
233 | max-width: 60rem;
234 | }
235 | @media screen and (min-width: 60.25em) {
236 | max-width: 70rem;
237 | }
238 | @media (min-width: 75em) {
239 | font-size: calc( var(--h2-font-size-max) * 1em );
240 | font-variation-settings:
241 | 'wght' calc( var(--p-vf-wght) * var(--h2-vf-wght-multiplier-l) ),
242 | 'wdth' calc( var(--h2-vf-wdth) * 1 ),
243 | 'GRAD' var(--text-GRAD);
244 | line-height: var(--h2-line-height-max);
245 | max-width: 75rem;
246 | }
247 | }
248 |
249 | blockquote {
250 | float: right;
251 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
252 | font-size: 6.5vw;
253 | font-variation-settings:
254 | 'wght' 400,
255 | 'wdth' 80,
256 | 'GRAD' var(--text-GRAD);
257 | line-height: var(--bq-line-height-min);
258 | margin: 0 5vw 1rem .5rem;
259 | max-width: 45vw;
260 | transition: all linear 0.2s;
261 | &.right {
262 | float: right;
263 | margin-left: .5rem;
264 | margin-right: 5vw;
265 | }
266 | &.left {
267 | float: left;
268 | margin-left: 5vw;
269 | margin-right: .5rem;
270 | }
271 | .well-used {
272 | font-size: 1.25em;
273 | font-variation-settings:
274 | 'wght' 350,
275 | 'wdth' 80,
276 | 'GRAD' var(--text-GRAD);
277 | }
278 | .invisible {
279 | font-size: 1.5em;
280 | font-variation-settings:
281 | 'wght' 400,
282 | 'wdth' 80,
283 | 'GRAD' var(--text-GRAD);
284 | }
285 | @media screen and (min-width: 24.15em) {
286 | line-height: calc(( var(--bq-line-height-min) * 1em ) + ( var(--bq-line-height-max) - var(--bq-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
287 | font-variation-settings:
288 | 'wght' 350,
289 | 'wdth' 80,
290 | 'GRAD' var(--text-GRAD);
291 | margin: 0 5vw .5rem .5rem;
292 | max-width: 47.5vw;
293 | &.right {
294 | margin-left: .5rem;
295 | margin-right: 5vw;
296 | }
297 | &.left {
298 | margin-left: 5vw;
299 | margin-right: .5rem;
300 | }
301 | .well-used {
302 | font-size: 1.33em;
303 | font-variation-settings:
304 | 'wght' 450,
305 | 'wdth' 80,
306 | 'GRAD' var(--text-GRAD);
307 | }
308 | .invisible {
309 | font-size: 1.55em;
310 | font-variation-settings:
311 | 'wght' 425 ,
312 | 'wdth' 85,
313 | 'GRAD' var(--text-GRAD);
314 | }
315 | }
316 | @media (min-width: 60.25em) {
317 | line-height: var(--bq-line-height-max);
318 | font-variation-settings:
319 | 'wght' 300,
320 | 'wdth' 80,
321 | 'GRAD' var(--text-GRAD);
322 | margin: 0 12vw 2rem 2rem;
323 | max-width: 29.5vw;
324 | &.right {
325 | margin-left: 2rem;
326 | margin-right: 12vw;
327 | }
328 | &.left {
329 | margin-left: 12vw;
330 | margin-right: 2rem;
331 | }
332 | .well-used {
333 | font-size: 1.33em;
334 | font-variation-settings:
335 | 'wght' 400,
336 | 'wdth' 85,
337 | 'GRAD' var(--text-GRAD);
338 | line-height: .75;
339 | }
340 | .invisible {
341 | font-size: 1.66em;
342 | font-variation-settings:
343 | 'wght' 325,
344 | 'wdth' 85,
345 | 'GRAD' var(--text-GRAD);
346 | line-height: .75;
347 | }
348 | }
349 | }
350 |
351 | img {
352 | height: auto;
353 | max-width: 100%;
354 | width: 100%;
355 | }
356 |
357 | h2 + p {
358 | margin-top: 1em;
359 | }
360 |
361 | /* Section end styles */
362 | .section-end:after {
363 | color: #777;
364 | content: "\00a7";
365 | display: block;
366 | font-family: Georgia, "New Times Roman", serif;
367 | font-size: 1.5em;
368 | font-weight: 300;
369 | margin-top: 1em;
370 | text-align: center;
371 | }
372 |
373 | /* Initial Cap styles */
374 | .article-detail.initial p:first-of-type:first-letter {
375 | float: left;
376 | padding-right: 0.05em;
377 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
378 | font-variation-settings:
379 | 'wght' 650,
380 | 'wdth' 100,
381 | 'GRAD' var(--text-GRAD);
382 | font-size: 2.7em;
383 | line-height: var(--dc-line-height-min);
384 | margin-bottom: -.1em;
385 | @media screen and (min-width: 24.15em) {
386 | font-size: calc(( var(--dc-font-size-min) * 1em ) + ( var(--dc-font-size-max) - var(--dc-font-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
387 | line-height: calc(( var(--dc-line-height-min) * 1em ) + ( var(--dc-line-height-max) - var(--dc-line-height-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-large) - var(--bp-small) )));
388 | }
389 | @media screen and (min-width: 43.75em) {
390 | font-variation-settings:
391 | 'wght' 670,
392 | 'wdth' 100,
393 | 'GRAD' var(--text-GRAD);
394 | }
395 | @media (min-width: 60.25em) {
396 | font-size: calc( var(--dc-font-size-max) * 1em );
397 | font-variation-settings:
398 | 'wght' 850,
399 | 'wdth' 100,
400 | 'GRAD' var(--text-GRAD);
401 | line-height: var(--dc-line-height-max);
402 | }
403 | }
404 |
405 | /* Content end styles */
406 | .content-area p:last-child:after {
407 | color: #777;
408 | content: "\2766";
409 | display: block;
410 | font-family: Georgia, "New Times Roman", serif;
411 | font-size: 1.25em;
412 | font-style: italic;
413 | font-weight: 300;
414 | line-height: .75;
415 | margin-top: 1rem;
416 | margin-bottom: 2rem;
417 | text-align: center;
418 | }
419 |
420 | /* Goblet and max-width wrapper */
421 | .figure-wrapper {
422 | margin-left: auto;
423 | margin-right: auto;
424 | max-width: 38em;
425 | @media (min-width: 60.25em) {
426 | font-size: calc(( var(--p-font-size-min) * 1em ) + ( var(--p-font-size-max) - var(--p-font-size-min) ) * ((100vw - ( var(--bp-large) * 1em )) / ( var(--bp-xlarge) - var(--bp-large) )));
427 | }
428 | @media (min-width: 75em) {
429 | font-size: calc( var(--p-font-size-max) * 1em );
430 | }
431 | }
432 |
433 | /* CSS shape outline for the goblet */
434 | .goblet {
435 | float: left;
436 | margin: 0 1.5rem 0 0;
437 | width: 25%;
438 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
439 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 85% 93%, 55% 85%, 55% 55%, 90% 28%, 90% 10%, 80% 0%);
440 | @media screen and (min-width: 60.25em) {
441 | margin: 0 1.5rem 0 -17.5%;
442 | width: 35%;
443 | -webkit-shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
444 | shape-outside: polygon(nonzero, 0% 0%, 0% 100%, 60% 100%, 75% 93%, 30% 85%, 30% 55%, 90% 28%, 90% 10%, 80% 0%);
445 | }
446 | }
--------------------------------------------------------------------------------
/scss/07-index-01.scss:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | /* Breakpoint variables */
4 | --bp-small: 24.15;
5 | --bp-medium: 43.75;
6 | --bp-large: 60.25;
7 | --bp-xlarge: 75;
8 |
9 | /* text GRAD */
10 | --text-GRAD: 88;
11 |
12 | /* Paragraph variables */
13 | --p-line-height-min: 1.15;
14 | --p-line-height-max: 1.5;
15 | --p-font-size-min: 1.0;
16 | --p-font-size-max: 1.25;
17 | --p-vf-wght: 350;
18 | --p-vf-wdth: 100;
19 |
20 | /* H1 variables */
21 | --h1-line-height-min: .95;
22 | --h1-line-height-max: 1.05;
23 | --h1-font-size-min: 2.0;
24 | --h1-font-size-max: 5;
25 | --h1-vf-wght-multiplier-s: 2;
26 | --h1-vf-wght-multiplier-m: 2.25;
27 | --h1-vf-wght-multiplier-l: 2.5;
28 | --h1-vf-wdth: 100;
29 |
30 | /* H2 variables */
31 | --h2-line-height-min: 1.15;
32 | --h2-line-height-max: 1.25;
33 | --h2-font-size-min: 1.5;
34 | --h2-font-size-max: 3.5;
35 | --h2-vf-wght-multiplier-s: 1.25;
36 | --h2-vf-wght-multiplier-m: 1.5;
37 | --h2-vf-wght-multiplier-l: 1.75;
38 | --h2-vf-wdth: 100;
39 |
40 | /* Dropcap variables */
41 | --dc-line-height-min: .9;
42 | --dc-line-height-max: .95;
43 | --dc-font-size-min: 2.7;
44 | --dc-font-size-max: 5;
45 |
46 | /* Blockquote variables */
47 | --bq-line-height-min: 1.1;
48 | --bq-line-height-max: .95;
49 | --bq-font-size-min: 2.7;
50 | --bq-font-size-max: 5;
51 | }
52 |
53 | .graded {
54 | --text-GRAD: 150;
55 | }
56 |
57 | /* Undo some of the Layout width bits */
58 | .section-content {
59 | margin: 0 auto;
60 | padding: 0 0.5em;
61 | }
62 | @media only screen and (min-width: 24.15em) {
63 | .section-content {
64 | max-width: 98%;
65 | }
66 | }
67 |
68 | @media only screen and (min-width: 43.75em) {
69 | .section-content {
70 | max-width: 98%;
71 | }
72 | }
73 |
74 | @media only screen and (min-width: 60.25em) {
75 | .section-content {
76 | max-width: 98%;
77 | }
78 | }
79 |
80 | @media only screen and (min-width: 75em) {
81 | .section-content {
82 | max-width: 98em;
83 | }
84 | }
85 |
86 |
87 | html {
88 | background-color: #fbfbf6;
89 | color: #3c3d31;
90 | font-size: 100%;
91 | }
92 |
93 | body {
94 | padding-top: 5rem;
95 | }
96 |
97 | body,
98 | p,
99 | th,
100 | td,
101 | ul,
102 | li {
103 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
104 | font-weight: normal;
105 | font-style: normal;
106 | }
107 |
108 | .inverse {
109 | background-color: #3c3d31;
110 | color: #fbfbf6;
111 | }
112 |
113 | p {
114 | margin-left: auto;
115 | margin-right: auto;
116 | max-width: 38em;
117 | transition: all linear 0.2s;
118 | hyphens: auto;
119 | }
120 |
121 | /* Variations and variables */
122 | p {
123 |
124 | }
125 |
126 |
127 | /* Generic header styles */
128 | h1, h2, h3, h4, h5, h6 {
129 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
130 | }
131 |
132 | h1 {
133 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
134 | font-size: calc( var(--h1-font-size-min) * 1em );
135 | margin: 1rem auto;
136 | max-width: 50rem;
137 | }
138 |
139 |
140 |
141 |
142 |
143 | h2 {
144 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
145 | font-size: calc( var(--h2-font-size-min) * 1em );
146 | margin: 0 auto 2rem auto;
147 | max-width: 50rem;
148 | .inverse & {
149 | --text-GRAD: 100;
150 | }
151 | }
152 |
153 | blockquote {
154 | float: right;
155 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
156 | margin: 0 5vw 1rem .5rem;
157 | max-width: 45vw;
158 | transition: all linear 0.2s;
159 | &.right {
160 | float: right;
161 | margin-left: .5rem;
162 | margin-right: 5vw;
163 | }
164 | &.left {
165 | float: left;
166 | margin-left: 5vw;
167 | margin-right: .5rem;
168 | }
169 | .well-used {
170 | font-size: 1.25em;
171 | }
172 | .invisible {
173 | font-size: 1.5em;
174 | }
175 | }
176 |
177 | img {
178 | height: auto;
179 | max-width: 100%;
180 | width: 100%;
181 | }
182 |
183 | h2 + p {
184 | margin-top: 1em;
185 | }
186 |
187 | /* Section end styles */
188 | .section-end:after {
189 | color: #777;
190 | content: "\00a7";
191 | display: block;
192 | font-family: Georgia, "New Times Roman", serif;
193 | font-size: 1.5em;
194 | font-weight: 300;
195 | margin-top: 1em;
196 | text-align: center;
197 | }
198 |
199 | /* First-line styles */
200 | .article-detail > p:first-of-type:first-line {
201 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
202 | }
203 |
204 | /* Initial Cap styles */
205 | .article-detail.initial p:first-of-type:first-letter {
206 | float: left;
207 | padding-right: 0.05em;
208 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
209 | font-size: 4em;
210 | line-height: .95;
211 | margin-bottom: -.1em;
212 | }
213 |
214 | /* Content end styles */
215 | .content-area p:last-child:after {
216 | color: #777;
217 | content: "\2766";
218 | display: block;
219 | font-family: Georgia, "New Times Roman", serif;
220 | font-size: 1.25em;
221 | font-style: italic;
222 | font-weight: 300;
223 | line-height: .75;
224 | margin-top: 1rem;
225 | margin-bottom: 2rem;
226 | text-align: center;
227 | }
228 |
229 | /* Goblet and max-width wrapper */
230 | .figure-wrapper {
231 | margin-left: auto;
232 | margin-right: auto;
233 | max-width: 38em;
234 | }
235 |
236 | /* CSS shape outline for the goblet */
237 | .goblet {
238 | float: left;
239 | margin: 0 1.5rem 0 0;
240 | width: 25%;
241 | @media screen and (min-width: 60.25em) {
242 | margin: 0 1.5rem 0 -17.5%;
243 | width: 35%;
244 | }
245 | }
--------------------------------------------------------------------------------
/scss/07-index-02.scss:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | /* Breakpoint variables */
4 | --bp-small: 24.15;
5 | --bp-medium: 43.75;
6 | --bp-large: 60.25;
7 | --bp-xlarge: 75;
8 |
9 | /* text GRAD */
10 | --text-GRAD: 88;
11 |
12 | /* Paragraph variables */
13 | --p-line-height-min: 1.15;
14 | --p-line-height-max: 1.5;
15 | --p-font-size-min: 1.0;
16 | --p-font-size-max: 1.25;
17 | --p-vf-wght: 350;
18 | --p-vf-wdth: 100;
19 |
20 | /* H1 variables */
21 | --h1-line-height-min: .95;
22 | --h1-line-height-max: 1.05;
23 | --h1-font-size-min: 2.0;
24 | --h1-font-size-max: 5;
25 | --h1-vf-wght-multiplier-s: 2;
26 | --h1-vf-wght-multiplier-m: 2.25;
27 | --h1-vf-wght-multiplier-l: 2.5;
28 | --h1-vf-wdth: 100;
29 |
30 | /* H2 variables */
31 | --h2-line-height-min: 1.15;
32 | --h2-line-height-max: 1.25;
33 | --h2-font-size-min: 1.5;
34 | --h2-font-size-max: 3.5;
35 | --h2-vf-wght-multiplier-s: 1.25;
36 | --h2-vf-wght-multiplier-m: 1.5;
37 | --h2-vf-wght-multiplier-l: 1.75;
38 | --h2-vf-wdth: 100;
39 |
40 | /* Dropcap variables */
41 | --dc-line-height-min: .9;
42 | --dc-line-height-max: .95;
43 | --dc-font-size-min: 2.7;
44 | --dc-font-size-max: 5;
45 |
46 | /* Blockquote variables */
47 | --bq-line-height-min: 1.1;
48 | --bq-line-height-max: .95;
49 | --bq-font-size-min: 2.7;
50 | --bq-font-size-max: 5;
51 | }
52 |
53 | .graded {
54 | --text-GRAD: 150;
55 | }
56 |
57 | /* Undo some of the Layout width bits */
58 | .section-content {
59 | margin: 0 auto;
60 | padding: 0 0.5em;
61 | }
62 | @media only screen and (min-width: 24.15em) {
63 | .section-content {
64 | max-width: 98%;
65 | }
66 | }
67 |
68 | @media only screen and (min-width: 43.75em) {
69 | .section-content {
70 | max-width: 98%;
71 | }
72 | }
73 |
74 | @media only screen and (min-width: 60.25em) {
75 | .section-content {
76 | max-width: 98%;
77 | }
78 | }
79 |
80 | @media only screen and (min-width: 75em) {
81 | .section-content {
82 | max-width: 98em;
83 | }
84 | }
85 |
86 |
87 | html {
88 | background-color: #fbfbf6;
89 | color: #3c3d31;
90 | font-size: 100%;
91 | }
92 |
93 | body {
94 | padding-top: 5rem;
95 | }
96 |
97 | body,
98 | p,
99 | th,
100 | td,
101 | ul,
102 | li {
103 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
104 | font-weight: normal;
105 | font-style: normal;
106 | }
107 |
108 | .inverse {
109 | background-color: #3c3d31;
110 | color: #fbfbf6;
111 | }
112 |
113 | p {
114 | margin-left: auto;
115 | margin-right: auto;
116 | max-width: 38em;
117 | transition: all linear 0.2s;
118 | hyphens: auto;
119 | }
120 |
121 | /* Variations and variables */
122 | p {
123 |
124 | }
125 |
126 |
127 | /* Generic header styles */
128 | h1, h2, h3, h4, h5, h6 {
129 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
130 | }
131 |
132 | h1 {
133 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
134 | font-size: calc( var(--h1-font-size-max) * 1em );
135 | font-variation-settings: 'wght' 800, 'wdth' 100;
136 | margin: 1rem auto;
137 | max-width: 50rem;
138 | .wf-inactive & {
139 | font-family: Georgia, "New Times Roman", serif;
140 | letter-spacing: -.005em;
141 | line-height: 1.2;
142 | }
143 | }
144 |
145 |
146 |
147 |
148 |
149 | h2 {
150 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
151 | font-size: calc( var(--h2-font-size-max) * 1em );
152 | font-variation-settings: 'wght' 600, 'wdth' 80;
153 | margin: 0 auto 2rem auto;
154 | max-width: 50rem;
155 | .wf-inactive & {
156 | --h2-font-size-max: 3;
157 | font-family: Georgia, "New Times Roman", serif;
158 | letter-spacing: -.035em;
159 | line-height: 1.4;
160 | }
161 | }
162 |
163 | blockquote {
164 | float: right;
165 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
166 | margin: 0 5vw 1rem .5rem;
167 | max-width: 45vw;
168 | transition: all linear 0.2s;
169 | &.right {
170 | float: right;
171 | margin-left: .5rem;
172 | margin-right: 5vw;
173 | }
174 | &.left {
175 | float: left;
176 | margin-left: 5vw;
177 | margin-right: .5rem;
178 | }
179 | .well-used {
180 | font-size: 1.25em;
181 | }
182 | .invisible {
183 | font-size: 1.5em;
184 | }
185 | }
186 |
187 | img {
188 | height: auto;
189 | max-width: 100%;
190 | width: 100%;
191 | }
192 |
193 | h2 + p {
194 | margin-top: 1em;
195 | }
196 |
197 | /* Section end styles */
198 | .section-end:after {
199 | color: #777;
200 | content: "\00a7";
201 | display: block;
202 | font-family: Georgia, "New Times Roman", serif;
203 | font-size: 1.5em;
204 | font-weight: 300;
205 | margin-top: 1em;
206 | text-align: center;
207 | }
208 |
209 | /* First-line styles */
210 | .article-detail > p:first-of-type:first-line {
211 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
212 | }
213 |
214 | /* Initial Cap styles */
215 | .article-detail.initial p:first-of-type:first-letter {
216 | float: left;
217 | padding-right: 0.05em;
218 | font-family: "Amstelvar 1.1 VF", Georgia, "New Times Roman", serif;
219 | font-size: 4em;
220 | line-height: .95;
221 | margin-bottom: -.1em;
222 | }
223 |
224 | /* Content end styles */
225 | .content-area p:last-child:after {
226 | color: #777;
227 | content: "\2766";
228 | display: block;
229 | font-family: Georgia, "New Times Roman", serif;
230 | font-size: 1.25em;
231 | font-style: italic;
232 | font-weight: 300;
233 | line-height: .75;
234 | margin-top: 1rem;
235 | margin-bottom: 2rem;
236 | text-align: center;
237 | }
238 |
239 | /* Goblet and max-width wrapper */
240 | .figure-wrapper {
241 | margin-left: auto;
242 | margin-right: auto;
243 | max-width: 38em;
244 | }
245 |
246 | /* CSS shape outline for the goblet */
247 | .goblet {
248 | float: left;
249 | margin: 0 1.5rem 0 0;
250 | width: 25%;
251 | @media screen and (min-width: 60.25em) {
252 | margin: 0 1.5rem 0 -17.5%;
253 | width: 35%;
254 | }
255 | }
--------------------------------------------------------------------------------