├── .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 |
  1. Find the URL button in the top left and enter any url.
  2. 12 |
  3. Once the site loads find the Size button and expand the sizing options
  4. 13 |
  5. 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.
  6. 14 |
  7. Watch as the site resizes and look for any visual or functional oddities along the way.
  8. 15 |
  9. Use Alt+U to toggle in and out of Focus Mode
  10. 16 |
  11. Focus Mode will remove the ish. UI and focus on the content (useful if demonstrating a site to clients)
  12. 17 |
  13. Once in Focus Mode, use keys 1 - 5 to resize the viewport
  14. 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 |
48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
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