├── .gitignore
├── .prettierrc.json
├── README.md
├── appendixB
    ├── build
    │   ├── styles.css
    │   └── styles.css.map
    ├── package-lock.json
    ├── package.json
    └── sass
    │   ├── _button.scss
    │   └── index.scss
├── ch01
    ├── listing-1.01.html
    ├── listing-1.02.html
    ├── listing-1.03.html
    ├── listing-1.04.html
    ├── listing-1.05.html
    ├── listing-1.06.html
    ├── listing-1.07.html
    ├── listing-1.08.html
    ├── listing-1.09.html
    ├── listing-1.10.html
    ├── listing-1.11.html
    ├── listing-1.12.html
    ├── listing-1.13.html
    ├── listing-1.14.html
    ├── listing-1.15.html
    ├── listing-1.16.html
    ├── listing-1.17.html
    ├── listing-1.18.html
    ├── listing-1.19.html
    ├── listing-1.20.html
    ├── listing-1.21.html
    ├── listing-1.22.html
    ├── listing-1.23.html
    ├── listing-1.24.html
    └── listing-1.25.html
├── ch02
    ├── listing-2.01.html
    ├── listing-2.02.html
    ├── listing-2.03.html
    ├── listing-2.04.html
    ├── listing-2.05.html
    ├── listing-2.07.html
    ├── listing-2.08.html
    ├── listing-2.09.html
    ├── listing-2.10.html
    ├── listing-2.11.html
    ├── listing-2.12.html
    ├── listing-2.13.html
    ├── listing-2.14.html
    ├── listing-2.15.html
    ├── listing-2.16.html
    ├── listing-2.17.html
    ├── listing-2.18.html
    ├── listing-2.19.html
    ├── listing-2.20.html
    ├── listing-2.21.html
    ├── listing-2.22.html
    ├── listing-2.23.html
    └── listing-2.24.html
├── ch03
    ├── listing-3.01.html
    ├── listing-3.02.html
    ├── listing-3.03.html
    ├── listing-3.04.html
    ├── listing-3.05.html
    ├── listing-3.06.html
    ├── listing-3.07.html
    ├── listing-3.08.html
    ├── listing-3.09.html
    ├── listing-3.10.html
    ├── listing-3.11.html
    ├── listing-3.12.html
    ├── listing-3.13.html
    ├── listing-3.14.html
    ├── listing-3.15.html
    └── listing-3.16.html
├── ch04
    ├── listing-4.01.html
    ├── listing-4.02.html
    ├── listing-4.03.html
    ├── listing-4.04.html
    ├── listing-4.05.html
    ├── listing-4.06.html
    ├── listing-4.07.html
    ├── listing-4.08.html
    ├── listing-4.09.html
    ├── listing-4.10.html
    └── listing-4.11.html
├── ch05
    ├── images
    │   ├── bear.jpg
    │   ├── bird.jpg
    │   ├── eagle.jpg
    │   ├── elephants.jpg
    │   ├── monkey.jpg
    │   ├── owl.jpg
    │   └── swan.jpg
    ├── listing-5.01.html
    ├── listing-5.02.html
    ├── listing-5.03.html
    ├── listing-5.04.html
    ├── listing-5.05.html
    ├── listing-5.06.html
    ├── listing-5.07.html
    ├── listing-5.08.html
    ├── listing-5.09.html
    ├── listing-5.10.html
    ├── listing-5.11.html
    ├── listing-5.12.html
    ├── listing-5.13.html
    └── listing-5.14.html
├── ch06
    ├── listing-6.01.html
    ├── listing-6.02.html
    ├── listing-6.03.html
    ├── listing-6.04.html
    ├── listing-6.05.html
    ├── listing-6.06.html
    ├── listing-6.07.html
    ├── listing-6.08.html
    ├── listing-6.09.html
    ├── listing-6.10.html
    ├── listing-6.11.html
    ├── listing-6.12.html
    ├── listing-6.13.html
    ├── listing-6.14.html
    └── listing-6.15.html
├── ch07
    ├── coffee-beans-medium.jpg
    ├── coffee-beans-small.jpg
    ├── coffee-beans.jpg
    ├── listing-7.01.html
    ├── listing-7.02.html
    ├── listing-7.03.html
    ├── listing-7.04.html
    ├── listing-7.05.html
    ├── listing-7.06.html
    ├── listing-7.07.html
    ├── listing-7.09.html
    ├── listing-7.10.html
    ├── listing-7.11.html
    ├── listing-7.12.html
    ├── listing-7.13.html
    ├── listing-7.14.html
    └── listing-7.15.html
├── ch08
    ├── listing-8.01.html
    ├── listing-8.02.html
    ├── listing-8.03.html
    ├── listing-8.04.html
    ├── listing-8.05.html
    ├── listing-8.06.html
    ├── listing-8.07.html
    ├── listing-8.08.html
    ├── listing-8.09.html
    ├── listing-8.10.html
    ├── listing-8.11.html
    ├── listing-8.12.html
    ├── listing-8.13.html
    ├── listing-8.14.html
    ├── listing-8.15.html
    ├── listing-8.16.html
    ├── listing-8.17.html
    ├── listing-8.18.html
    └── listing-8.19.html
├── ch09
    ├── listing-9.01.html
    ├── listing-9.02.html
    ├── listing-9.03.html
    ├── listing-9.04.html
    ├── listing-9.06.html
    ├── listing-9.08.html
    ├── listing-9.10.html
    ├── listing-9.11.html
    ├── listing-9.12.html
    ├── listing-9.13.html
    ├── listing-9.14.html
    ├── listing-9.16.html
    ├── listing-9.18.html
    ├── listing-9.19.html
    ├── listing-9.20.html
    └── runner.png
├── ch10
    ├── listing-10.01.html
    ├── listing-10.02.html
    ├── listing-10.03.html
    ├── listing-10.04.html
    ├── listing-10.05.html
    ├── listing-10.06.html
    ├── listing-10.07.html
    ├── listing-10.08.html
    ├── listing-10.08b.html
    ├── listing-10.09.html
    ├── listing-10.10.html
    ├── race.jpg
    ├── runner-hill.jpg
    ├── runner.png
    └── shoe.jpg
├── ch11
    ├── collaboration.jpg
    ├── listing-11.01.html
    ├── listing-11.02.html
    ├── listing-11.03.html
    ├── listing-11.04.html
    ├── listing-11.05.html
    ├── listing-11.06.html
    └── listing-11.08.html
├── ch12
    ├── collaboration.jpg
    ├── listing-12.01.html
    ├── listing-12.02.html
    ├── listing-12.03.html
    ├── listing-12.04.html
    ├── listing-12.05.html
    ├── listing-12.06.html
    ├── listing-12.07.html
    ├── listing-12.11.html
    ├── listing-12.12.html
    ├── listing-12.13.html
    ├── listing-12.14.html
    └── open-sans.woff2
├── ch13
    ├── images
    │   ├── bear.jpg
    │   └── scratches.png
    ├── listing-13.01.html
    ├── listing-13.03.html
    ├── listing-13.04.html
    ├── listing-13.05.html
    ├── listing-13.06.html
    ├── listing-13.07.html
    ├── listing-13.08.html
    ├── listing-13.09.html
    ├── listing-13.10.html
    ├── listing-13.11.html
    ├── listing-13.12.html
    ├── listing-13.13.html
    ├── listing-13.14.html
    ├── listing-13.15.html
    ├── listing-13.16.html
    └── listing-13.17.html
├── ch14
    ├── images
    │   ├── bird.jpg
    │   ├── eagle.jpg
    │   ├── star-mask.png
    │   └── star-mask.svg
    ├── listing-14.01.html
    ├── listing-14.02.html
    ├── listing-14.03.html
    ├── listing-14.05.html
    ├── listing-14.06.html
    ├── listing-14.07.html
    ├── listing-14.08.html
    ├── listing-14.10.html
    ├── listing-14.10b.html
    ├── listing-14.11.html
    ├── listing-14.12.html
    ├── listing-14.12b.html
    ├── listing-14.14.html
    ├── listing-14.15.html
    ├── listing-14.16.html
    └── listing-14.17.html
├── ch15
    ├── listing-15.02.html
    ├── listing-15.04.html
    ├── listing-15.05.html
    ├── listing-15.07.html
    ├── listing-15.08.html
    ├── listing-15.09.html
    ├── listing-15.10.html
    ├── listing-15.11.html
    └── listing-15.12.html
├── ch16
    ├── images
    │   ├── calendar.svg
    │   ├── chicken1.jpg
    │   ├── chicken2.jpg
    │   ├── chicken3.jpg
    │   ├── chicken4.jpg
    │   ├── home.svg
    │   ├── members.svg
    │   └── star.svg
    ├── listing-16.02.html
    ├── listing-16.03.html
    ├── listing-16.04.html
    ├── listing-16.06.html
    ├── listing-16.07.html
    ├── listing-16.08.html
    ├── listing-16.09.html
    ├── listing-16.10.html
    ├── listing-16.11.html
    ├── listing-16.13.html
    ├── listing-16.14.html
    └── listing-16.15.html
├── ch17
    ├── images
    │   ├── calendar.svg
    │   ├── chicken1.jpg
    │   ├── chicken2.jpg
    │   ├── chicken3.jpg
    │   ├── chicken4.jpg
    │   ├── home.svg
    │   ├── members.svg
    │   └── star.svg
    ├── listing-17.03.html
    ├── listing-17.05.html
    ├── listing-17.06.html
    ├── listing-17.07.html
    ├── listing-17.08.html
    ├── listing-17.09.html
    ├── listing-17.11.html
    ├── listing-17.12.html
    ├── listing-17.13.html
    ├── listing-17.14.html
    ├── listing-17.15.html
    └── listing-17.16.html
├── cover.png
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .sass-cache
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "overrides": [
 3 |     {
 4 |       "files": ["*.html", "*.css"],
 5 |       "options": {
 6 |         "singleQuote": false
 7 |       }
 8 |     }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS in Depth, 2nd edition
2 | 
3 | Code listings from [CSS In Depth, second edition](https://www.manning.com/books/css-in-depth-second-edition?a_aid=kjg&a_bid=a7bc24da) by Keith J. Grant
4 | 
5 | Because working examples requires both HTML and CSS, I have put most listings in an HTML file, using <style> tags for the CSS. This means that both an HTML listing and CSS listing are combined in one file in the repository.
6 | For example, in Chapter 1, listing 1.1 is HTML code and listing 1.2 is CSS that is meant to be applied to that HTML. I have included these both in the repository in the file named ch01/listing-1.2.html. Changes are made to this CSS in ch01/listing 1.3; these are included in ch01/listing-1.3.html, along with the corresponding HTML from listing 1.1.
7 | 


--------------------------------------------------------------------------------
/appendixB/build/styles.css:
--------------------------------------------------------------------------------
  1 | /* listing B.7 */
  2 | /* B.6 */
  3 | .button {
  4 |   padding: 1em 1.25em;
  5 |   background-color: #265559;
  6 |   color: #333;
  7 | }
  8 | 
  9 | /* listing B.2 */
 10 | a:link {
 11 |   color: #0086b3;
 12 | }
 13 | 
 14 | .page-heading {
 15 |   font-size: 1.6rem;
 16 |   color: #0086b3;
 17 | }
 18 | 
 19 | /* listing B.3 */
 20 | .note-author {
 21 |   padding-left: 3em;
 22 |   font-weight: bold;
 23 | }
 24 | 
 25 | .note-body {
 26 |   padding-left: 1em;
 27 | }
 28 | 
 29 | /* listing B.4 */
 30 | .site-nav {
 31 |   display: flex;
 32 | }
 33 | .site-nav > li {
 34 |   margin-top: 0;
 35 | }
 36 | .site-nav > li.is-active {
 37 |   font-weight: bold;
 38 | }
 39 | 
 40 | /* listing B.5 */
 41 | html {
 42 |   font-size: 1rem;
 43 | }
 44 | @media (min-width: 45em) {
 45 |   html {
 46 |     font-size: 1.25rem;
 47 |   }
 48 | }
 49 | 
 50 | /* listing B.8 */
 51 | .main-tile {
 52 |   border-radius: 5px;
 53 |   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
 54 |   color: #333;
 55 | }
 56 | 
 57 | /* listing B.9 */
 58 | .alert-info {
 59 |   padding: 0.3em 0.5em;
 60 |   border: 1px solid blue;
 61 |   color: blue;
 62 |   background-color: lightblue;
 63 | }
 64 | 
 65 | .alert-danger {
 66 |   padding: 0.3em 0.5em;
 67 |   border: 1px solid red;
 68 |   color: red;
 69 |   background-color: pink;
 70 | }
 71 | 
 72 | /* listing B.10 */
 73 | .message-danger, .message-info {
 74 |   padding: 0.3em 0.5em;
 75 |   border-radius: 0.5em;
 76 | }
 77 | 
 78 | .message-info {
 79 |   color: blue;
 80 |   background-color: lightblue;
 81 | }
 82 | 
 83 | .message-danger {
 84 |   color: red;
 85 |   background-color: pink;
 86 | }
 87 | 
 88 | /* listing B.11 */
 89 | .colors {
 90 |   color: #4f824a;
 91 |   color: #82b57d;
 92 |   color: #4fbd43;
 93 |   color: #778a76;
 94 |   color: #9c5ca3;
 95 |   color: #5c87a3;
 96 | }
 97 | 
 98 | /* listing B.12 */
 99 | .nav-links > li:nth-child(2) {
100 |   transition-delay: 0.1s;
101 | }
102 | 
103 | .nav-links > li:nth-child(3) {
104 |   transition-delay: 0.2s;
105 | }
106 | 
107 | .nav-links > li:nth-child(4) {
108 |   transition-delay: 0.3s;
109 | }
110 | 
111 | /*# sourceMappingURL=styles.css.map */
112 | 


--------------------------------------------------------------------------------
/appendixB/build/styles.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_button.scss"],"names":[],"mappings":"AAAA;ACAA;AACA;EACE;EACA;EACA;;;ADDF;AAGA;EACE,OAHW;;;AAMb;EACE;EACA,OARW;;;AAWb;AAGA;EACE,cAHa;EAIb;;;AAGF;EACE;;;AAGF;AACA;EACE;;AAEA;EACE;;AAEA;EACE;;;AAKN;AACA;EACE;;AAEA;EAHF;IAII;;;;AAIJ;AAMA;EAJE;EACA;EAKA;;;AAGF;AAQA;EANE;EACA;EACA,OAKuB;EAJvB,kBAI6B;;;AAG/B;EAVE;EACA;EACA,OASuB;EARvB,kBAQ4B;;;AAG9B;AACA;EACE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;AAYA;EACE,OAVW;EAWX,OAVY;EAWZ,OATY;EAUZ,OATW;EAUX,OARO;EASP,OARK;;;AAWP;AAEE;EACE;;;AADF;EACE;;;AADF;EACE","file":"styles.css"}


--------------------------------------------------------------------------------
/appendixB/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "appendixb",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "sass": "sass sass/index.scss build/styles.css"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "sass": "^1.69.7"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/appendixB/sass/_button.scss:
--------------------------------------------------------------------------------
1 | /* B.6 */
2 | .button {
3 |   padding: 1em 1.25em;
4 |   background-color: #265559;
5 |   color: #333;
6 | }
7 | 


--------------------------------------------------------------------------------
/appendixB/sass/index.scss:
--------------------------------------------------------------------------------
  1 | /* listing B.7 */
  2 | @use "button";
  3 | 
  4 | /* listing B.2 */
  5 | $brand-blue: #0086b3;
  6 | 
  7 | a:link {
  8 |   color: $brand-blue;
  9 | }
 10 | 
 11 | .page-heading {
 12 |   font-size: 1.6rem;
 13 |   color: $brand-blue;
 14 | }
 15 | 
 16 | /* listing B.3 */
 17 | $padding-left: 3em;
 18 | 
 19 | .note-author {
 20 |   padding-left: $padding-left;
 21 |   font-weight: bold;
 22 | }
 23 | 
 24 | .note-body {
 25 |   padding-left: $padding-left % 2;
 26 | }
 27 | 
 28 | /* listing B.4 */
 29 | .site-nav {
 30 |   display: flex;
 31 | 
 32 |   > li {
 33 |     margin-top: 0;
 34 | 
 35 |     &.is-active {
 36 |       font-weight: bold;
 37 |     }
 38 |   }
 39 | }
 40 | 
 41 | /* listing B.5 */
 42 | html {
 43 |   font-size: 1rem;
 44 | 
 45 |   @media (min-width: 45em) {
 46 |     font-size: 1.25rem;
 47 |   }
 48 | }
 49 | 
 50 | /* listing B.8 */
 51 | @mixin box {
 52 |   border-radius: 5px;
 53 |   box-shadow: 5px 5px 10px rgb(0 0 0 / 0.1);
 54 | }
 55 | 
 56 | .main-tile {
 57 |   @include box;
 58 |   color: #333;
 59 | }
 60 | 
 61 | /* listing B.9 */
 62 | @mixin alert-variant($color, $bg-color) {
 63 |   padding: 0.3em 0.5em;
 64 |   border: 1px solid $color;
 65 |   color: $color;
 66 |   background-color: $bg-color;
 67 | }
 68 | 
 69 | .alert-info {
 70 |   @include alert-variant(blue, lightblue);
 71 | }
 72 | 
 73 | .alert-danger {
 74 |   @include alert-variant(red, pink);
 75 | }
 76 | 
 77 | /* listing B.10 */
 78 | %message {
 79 |   padding: 0.3em 0.5em;
 80 |   border-radius: 0.5em;
 81 | }
 82 | 
 83 | .message-info {
 84 |   @extend %message;
 85 |   color: blue;
 86 |   background-color: lightblue;
 87 | }
 88 | 
 89 | .message-danger {
 90 |   @extend %message;
 91 |   color: red;
 92 |   background-color: pink;
 93 | }
 94 | 
 95 | /* listing B.11 */
 96 | $green: #63a35c;
 97 | 
 98 | $green-dark: darken($green, 10%);
 99 | $green-light: lighten($green, 10%);
100 | 
101 | $green-vivid: saturate($green, 20%);
102 | $green-dull: desaturate($green, 20%);
103 | 
104 | $purple: adjust-hue($green, 180deg);
105 | $teal: adjust-hue($green, 90deg);
106 | 
107 | .colors {
108 |   color: $green-dark;
109 |   color: $green-light;
110 |   color: $green-vivid;
111 |   color: $green-dull;
112 |   color: $purple;
113 |   color: $teal;
114 | }
115 | 
116 | /* listing B.12 */
117 | @for $index from 2 to 5 {
118 |   .nav-links > li:nth-child(#{$index}) {
119 |     transition-delay: (0.1s * $index) - 0.1s;
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/ch01/listing-1.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     /* styles added in subsequent listings */
 6 |   </style>
 7 | </head>
 8 | <body>
 9 |   <header class="page-header">
10 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
11 |     <nav>
12 |       <ul id="main-nav" class="nav">
13 |         <li><a href="/">Home</a></li>
14 |         <li><a href="/coffees">Coffees</a></li>
15 |         <li><a href="/brewers">Brewers</a></li>
16 |         <li><a href="/specials" class="featured">Specials</a></li>
17 |       </ul>
18 |     </nav>
19 |   </header>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch01/listing-1.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       font-family: serif;
 7 |     }
 8 | 
 9 |     #page-title {
10 |       font-family: sans-serif;
11 |     }
12 | 
13 |     .title {
14 |       font-family: monospace;
15 |     }
16 |   </style>
17 | </head>
18 | <body>
19 |   <header class="page-header">
20 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
21 |     <nav>
22 |       <ul id="main-nav" class="nav">
23 |         <li><a href="/">Home</a></li>
24 |         <li><a href="/coffees">Coffees</a></li>
25 |         <li><a href="/brewers">Brewers</a></li>
26 |         <li><a href="/specials" class="featured">Specials</a></li>
27 |       </ul>
28 |     </nav>
29 |   </header>
30 | </body>
31 | 


--------------------------------------------------------------------------------
/ch01/listing-1.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     #main-nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     #main-nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     #main-nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 |   </style>
28 | </head>
29 | <body>
30 |   <header class="page-header">
31 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
32 |     <nav>
33 |       <ul id="main-nav" class="nav">
34 |         <li><a href="/">Home</a></li>
35 |         <li><a href="/coffees">Coffees</a></li>
36 |         <li><a href="/brewers">Brewers</a></li>
37 |         <li><a href="/specials" class="featured">Specials</a></li>
38 |       </ul>
39 |     </nav>
40 |   </header>
41 | </body>
42 | 


--------------------------------------------------------------------------------
/ch01/listing-1.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     #main-nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     #main-nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     #main-nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 |   </style>
28 | </head>
29 | <body>
30 |   <header class="page-header">
31 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
32 |     <nav>
33 |       <ul id="main-nav" class="nav">
34 |         <li><a href="/">Home</a></li>
35 |         <li><a href="/coffees">Coffees</a></li>
36 |         <li><a href="/brewers">Brewers</a></li>
37 |         <li>
38 |           <a href="/specials" class="featured" style="background-color: orange"
39 |             >Specials</a
40 |           >
41 |         </li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     #main-nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     #main-nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     #main-nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     .featured {
29 |       background-color: orange;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     html body header h1 {
 6 |       color: blue;
 7 |     }
 8 | 
 9 |     body header.page-header h1 {
10 |       color: orange;
11 |     }
12 | 
13 |     .page-header .title {
14 |       color: green;
15 |     }
16 | 
17 |     #page-title {
18 |       color: red;
19 |     }
20 |   </style>
21 | </head>
22 | <body>
23 |   <header class="page-header">
24 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
25 |     <nav>
26 |       <ul id="main-nav" class="nav">
27 |         <li><a href="/">Home</a></li>
28 |         <li><a href="/coffees">Coffees</a></li>
29 |         <li><a href="/brewers">Brewers</a></li>
30 |         <li><a href="/specials" class="featured">Specials</a></li>
31 |       </ul>
32 |     </nav>
33 |   </header>
34 | </body>
35 | 


--------------------------------------------------------------------------------
/ch01/listing-1.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     #main-nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     #main-nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     #main-nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     .featured {
29 |       background-color: orange !important;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     #main-nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     #main-nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     #main-nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     #main-nav .featured {
29 |       background-color: orange;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     .nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     .nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     .nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     .nav .featured {
29 |       background-color: orange;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     .nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     .nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     .nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     a.featured {
29 |       background-color: orange;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch01/listing-1.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     h1 {
 6 |       color: #2f4f4f;
 7 |       margin-bottom: 10px;
 8 |     }
 9 | 
10 |     .nav {
11 |       margin-top: 10px;
12 |       list-style: none;
13 |       padding-left: 0;
14 |     }
15 | 
16 |     .nav li {
17 |       display: inline-block;
18 |     }
19 | 
20 |     .nav a {
21 |       color: white;
22 |       background-color: #13a4a4;
23 |       padding: 5px;
24 |       border-radius: 2px;
25 |       text-decoration: none;
26 |     }
27 | 
28 |     a.featured {
29 |       background-color: orange;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <header class="page-header">
35 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
36 |     <nav>
37 |       <ul id="main-nav" class="nav">
38 |         <li><a href="/">Home</a></li>
39 |         <li><a href="/coffees">Coffees</a></li>
40 |         <li><a href="/brewers">Brewers</a></li>
41 |         <li><a href="/specials" class="featured">Specials</a></li>
42 |       </ul>
43 |     </nav>
44 |   </header>
45 |   <main>
46 |     <p>
47 |       Be sure to check out
48 |       <a href="/specials" class="featured">our specials</a>.
49 |     </p>
50 |   </main>
51 | </body>
52 | 


--------------------------------------------------------------------------------
/ch01/listing-1.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     a:link {
 6 |       background-color: blue;
 7 |       color: white;
 8 |       text-decoration: none;
 9 |       padding: 2px;
10 |     }
11 | 
12 |     a:visited {
13 |       background-color: purple;
14 |     }
15 | 
16 |     a:hover {
17 |       background-color: transparent;
18 |       color: blue;
19 |       text-decoration: underline;
20 |     }
21 | 
22 |     a:active {
23 |       color: red;
24 |     }
25 | 
26 |     h1 {
27 |       color: #2f4f4f;
28 |       margin-bottom: 10px;
29 |     }
30 | 
31 |     .nav {
32 |       margin-top: 10px;
33 |       list-style: none;
34 |       padding-left: 0;
35 |     }
36 | 
37 |     .nav li {
38 |       display: inline-block;
39 |     }
40 | 
41 |     .nav a {
42 |       color: white;
43 |       background-color: #13a4a4;
44 |       padding: 5px;
45 |       border-radius: 2px;
46 |       text-decoration: none;
47 |     }
48 | 
49 |     .nav .featured {
50 |       background-color: orange;
51 |     }
52 |   </style>
53 | </head>
54 | <body>
55 |   <header class="page-header">
56 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
57 |     <nav>
58 |       <ul id="main-nav" class="nav">
59 |         <li><a href="/">Home</a></li>
60 |         <li><a href="/coffees">Coffees</a></li>
61 |         <li><a href="/brewers">Brewers</a></li>
62 |         <li><a href="/specials" class="featured">Specials</a></li>
63 |       </ul>
64 |     </nav>
65 |   </header>
66 |   <main>
67 |     <p>
68 |       Be sure to check out
69 |       <a href="/specials" class="featured">our specials</a>.
70 |     </p>
71 |   </main>
72 | </body>
73 | 


--------------------------------------------------------------------------------
/ch01/listing-1.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 |   </style>
57 | </head>
58 | <body>
59 |   <header class="page-header">
60 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
61 |     <nav>
62 |       <ul id="main-nav" class="nav">
63 |         <li><a href="/">Home</a></li>
64 |         <li><a href="/coffees">Coffees</a></li>
65 |         <li><a href="/brewers">Brewers</a></li>
66 |         <li><a href="/specials" class="featured">Specials</a></li>
67 |       </ul>
68 |     </nav>
69 |   </header>
70 |   <main>
71 |     <p>
72 |       Be sure to check out
73 |       <a href="/specials" class="featured">our specials</a>.
74 |     </p>
75 |   </main>
76 | </body>
77 | 


--------------------------------------------------------------------------------
/ch01/listing-1.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     /* footer styled will be added in the next listing */
58 |   </style>
59 | </head>
60 | <body>
61 |   <header class="page-header">
62 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
63 |     <nav>
64 |       <ul id="main-nav" class="nav">
65 |         <li><a href="/">Home</a></li>
66 |         <li><a href="/coffees">Coffees</a></li>
67 |         <li><a href="/brewers">Brewers</a></li>
68 |         <li><a href="/specials" class="featured">Specials</a></li>
69 |       </ul>
70 |     </nav>
71 |   </header>
72 |   <main>
73 |     <p>
74 |       Be sure to check out
75 |       <a href="/specials" class="featured">our specials</a>.
76 |     </p>
77 |   </main>
78 |   <footer class="footer">
79 |     &copy; 2023 Wombat Coffee Roasters &mdash;
80 |     <a href="/terms-of-use">Terms of use</a>
81 |   </footer>
82 | </body>
83 | 


--------------------------------------------------------------------------------
/ch01/listing-1.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: inherit;
67 |       background-color: transparent;
68 |       text-decoration: underline;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: inherit;
67 |       background-color: initial;
68 |       text-decoration: underline;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: unset;
67 |       background-color: unset;
68 |       text-decoration: underline;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.18.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: unset;
67 |       background-color: unset;
68 |       text-decoration: revert;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.19.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <meta charset="utf-8" />
  4 |   <style>
  5 |     body {
  6 |       font-family: sans-serif;
  7 |     }
  8 | 
  9 |     a:link {
 10 |       background-color: blue;
 11 |       color: white;
 12 |       text-decoration: none;
 13 |       padding: 2px;
 14 |     }
 15 | 
 16 |     a:visited {
 17 |       background-color: purple;
 18 |     }
 19 | 
 20 |     a:hover {
 21 |       background-color: transparent;
 22 |       color: blue;
 23 |       text-decoration: underline;
 24 |     }
 25 | 
 26 |     a:active {
 27 |       color: red;
 28 |     }
 29 | 
 30 |     h1 {
 31 |       color: #2f4f4f;
 32 |       margin-bottom: 10px;
 33 |       font-weight: bold;
 34 |     }
 35 | 
 36 |     .title {
 37 |       font:
 38 |         32px Helvetica,
 39 |         Arial,
 40 |         sans-serif;
 41 |     }
 42 | 
 43 |     .nav {
 44 |       margin-top: 10px;
 45 |       list-style: none;
 46 |       padding-left: 0;
 47 |     }
 48 | 
 49 |     .nav li {
 50 |       display: inline-block;
 51 |     }
 52 | 
 53 |     .nav a {
 54 |       color: white;
 55 |       background-color: #13a4a4;
 56 |       padding: 5px;
 57 |       border-radius: 2px;
 58 |       text-decoration: none;
 59 |     }
 60 | 
 61 |     .nav .featured {
 62 |       background-color: orange;
 63 |     }
 64 | 
 65 |     .footer {
 66 |       color: #666;
 67 |       background-color: #ccc;
 68 |       padding: 15px 0;
 69 |       text-align: center;
 70 |       font-size: 14px;
 71 |     }
 72 | 
 73 |     .footer a {
 74 |       color: unset;
 75 |       background-color: unset;
 76 |       text-decoration: revert;
 77 |     }
 78 |   </style>
 79 | </head>
 80 | <body>
 81 |   <header class="page-header">
 82 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
 83 |     <nav>
 84 |       <ul id="main-nav" class="nav">
 85 |         <li><a href="/">Home</a></li>
 86 |         <li><a href="/coffees">Coffees</a></li>
 87 |         <li><a href="/brewers">Brewers</a></li>
 88 |         <li><a href="/specials" class="featured">Specials</a></li>
 89 |       </ul>
 90 |     </nav>
 91 |   </header>
 92 |   <main>
 93 |     <p>
 94 |       Be sure to check out
 95 |       <a href="/specials" class="featured">our specials</a>.
 96 |     </p>
 97 |   </main>
 98 |   <footer class="footer">
 99 |     &copy; 2023 Wombat Coffee Roasters &mdash;
100 |     <a href="/terms-of-use">Terms of use</a>
101 |   </footer>
102 | </body>
103 | 


--------------------------------------------------------------------------------
/ch01/listing-1.21.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 10px 15px 0 5px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: unset;
67 |       background-color: unset;
68 |       text-decoration: revert;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.22.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px 15px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: unset;
67 |       background-color: unset;
68 |       text-decoration: revert;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>
86 |       Be sure to check out
87 |       <a href="/specials" class="featured">our specials</a>.
88 |     </p>
89 |   </main>
90 |   <footer class="footer">
91 |     &copy; 2023 Wombat Coffee Roasters &mdash;
92 |     <a href="/terms-of-use">Terms of use</a>
93 |   </footer>
94 | </body>
95 | 


--------------------------------------------------------------------------------
/ch01/listing-1.23.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px 15px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |       box-shadow: 10px 2px #6f9090;
56 |     }
57 | 
58 |     .footer {
59 |       color: #666;
60 |       background-color: #ccc;
61 |       padding: 15px 0;
62 |       text-align: center;
63 |       font-size: 14px;
64 |     }
65 | 
66 |     .footer a {
67 |       color: unset;
68 |       background-color: unset;
69 |       text-decoration: revert;
70 |     }
71 |   </style>
72 | </head>
73 | <body>
74 |   <header class="page-header">
75 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
76 |     <nav>
77 |       <ul id="main-nav" class="nav">
78 |         <li><a href="/">Home</a></li>
79 |         <li><a href="/coffees">Coffees</a></li>
80 |         <li><a href="/brewers">Brewers</a></li>
81 |         <li><a href="/specials" class="featured">Specials</a></li>
82 |       </ul>
83 |     </nav>
84 |   </header>
85 |   <main>
86 |     <p>
87 |       Be sure to check out
88 |       <a href="/specials" class="featured">our specials</a>.
89 |     </p>
90 |   </main>
91 |   <footer class="footer">
92 |     &copy; 2023 Wombat Coffee Roasters &mdash;
93 |     <a href="/terms-of-use">Terms of use</a>
94 |   </footer>
95 | </body>
96 | 


--------------------------------------------------------------------------------
/ch01/listing-1.24.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8" />
 4 |   <style>
 5 |     body {
 6 |       font-family: sans-serif;
 7 |     }
 8 | 
 9 |     a:link {
10 |       background-color: blue;
11 |       color: white;
12 |       text-decoration: none;
13 |       padding: 2px;
14 |     }
15 | 
16 |     a:visited {
17 |       background-color: purple;
18 |     }
19 | 
20 |     a:hover {
21 |       background-color: transparent;
22 |       color: blue;
23 |       text-decoration: underline;
24 |     }
25 | 
26 |     a:active {
27 |       color: red;
28 |     }
29 | 
30 |     h1 {
31 |       color: #2f4f4f;
32 |       margin-bottom: 10px;
33 |     }
34 | 
35 |     .nav {
36 |       margin-top: 10px;
37 |       list-style: none;
38 |       padding-left: 0;
39 |     }
40 | 
41 |     .nav li {
42 |       display: inline-block;
43 |     }
44 | 
45 |     .nav a {
46 |       color: white;
47 |       background-color: #13a4a4;
48 |       padding: 5px 15px;
49 |       border-radius: 2px;
50 |       text-decoration: none;
51 |     }
52 | 
53 |     .nav .featured {
54 |       background-color: orange;
55 |     }
56 | 
57 |     .footer {
58 |       color: #666;
59 |       background-color: #ccc;
60 |       padding: 15px 0;
61 |       text-align: center;
62 |       font-size: 14px;
63 |     }
64 | 
65 |     .footer a {
66 |       color: unset;
67 |       background-color: unset;
68 |       text-decoration: revert;
69 |     }
70 |   </style>
71 | </head>
72 | <body>
73 |   <header class="page-header">
74 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
75 |     <nav>
76 |       <ul id="main-nav" class="nav">
77 |         <li><a href="/">Home</a></li>
78 |         <li><a href="/coffees">Coffees</a></li>
79 |         <li><a href="/brewers">Brewers</a></li>
80 |         <li><a href="/specials" class="featured">Specials</a></li>
81 |       </ul>
82 |     </nav>
83 |   </header>
84 |   <main>
85 |     <p>Try some of our newest coffees:</p>
86 |     <div class="coffees">
87 |       <a href="/coffees/costa-rica">Costa Rica</a>
88 |       <a href="/coffees/ethiopia">Ethiopia</a>
89 |       <a href="/coffees/guatamala">Guatemala</a>
90 |       <a href="/coffees/kenya">Kenya</a>
91 |       <a href="/coffees/mexico">Mexico</a>
92 |     </div>
93 |   </main>
94 |   <footer class="footer">
95 |     &copy; 2023 Wombat Coffee Roasters &mdash;
96 |     <a href="/terms-of-use">Terms of use</a>
97 |   </footer>
98 | </body>
99 | 


--------------------------------------------------------------------------------
/ch02/listing-2.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     .padded {
 5 |       font-size: 16px;
 6 |       padding: 1em;
 7 |     }
 8 |   </style>
 9 | </head>
10 | 
11 | <body>
12 |   <div class="padded">
13 |     We have built partnerships with small farms around the world to hand-select
14 |     beans at the peak of season. We then carefully roast in
15 |     <a href="/batches">small batches</a> to maximize their potential.
16 |   </div>
17 | </body>
18 | 


--------------------------------------------------------------------------------
/ch02/listing-2.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* keep the spans from bleeding off the top of the page */
 5 |     body {
 6 |       margin: 1.5em;
 7 |     }
 8 | 
 9 |     .box {
10 |       padding: 1em;
11 |       border-radius: 1em;
12 |       background-color: lightgray;
13 |     }
14 | 
15 |     .box-small {
16 |       font-size: 12px;
17 |     }
18 | 
19 |     .box-large {
20 |       font-size: 18px;
21 |     }
22 |   </style>
23 | </head>
24 | 
25 | <body>
26 |   <span class="box box-small">Small</span>
27 |   <span class="box box-large">Large</span>
28 | </body>
29 | 


--------------------------------------------------------------------------------
/ch02/listing-2.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-size: 16px;
 6 |     }
 7 | 
 8 |     .slogan {
 9 |       font-size: 1.2em;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   We love coffee
16 |   <p class="slogan">We love coffee</p>
17 | </body>
18 | 


--------------------------------------------------------------------------------
/ch02/listing-2.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-size: 16px;
 6 |     }
 7 | 
 8 |     .slogan {
 9 |       font-size: 1.2em;
10 |       padding: 1.2em;
11 |       background-color: #ccc;
12 |     }
13 |   </style>
14 | </head>
15 | 
16 | <body>
17 |   <p class="slogan">We love coffee</p>
18 | </body>
19 | 


--------------------------------------------------------------------------------
/ch02/listing-2.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-size: 16px;
 6 |     }
 7 | 
 8 |     ul {
 9 |       font-size: 0.8em;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <ul>
16 |     <li>
17 |       Top level
18 |       <ul>
19 |         <li>
20 |           Second level
21 |           <ul>
22 |             <li>
23 |               Third level
24 |               <ul>
25 |                 <li>
26 |                   Fourth level
27 |                   <ul>
28 |                     <li>Fifth level</li>
29 |                   </ul>
30 |                 </li>
31 |               </ul>
32 |             </li>
33 |           </ul>
34 |         </li>
35 |       </ul>
36 |     </li>
37 |   </ul>
38 | </body>
39 | 


--------------------------------------------------------------------------------
/ch02/listing-2.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-size: 16px;
 6 |     }
 7 | 
 8 |     ul {
 9 |       font-size: 0.8em;
10 |     }
11 | 
12 |     ul ul {
13 |       font-size: 1em;
14 |     }
15 |   </style>
16 | </head>
17 | 
18 | <body>
19 |   <ul>
20 |     <li>
21 |       Top level
22 |       <ul>
23 |         <li>
24 |           Second level
25 |           <ul>
26 |             <li>
27 |               Third level
28 |               <ul>
29 |                 <li>
30 |                   Fourth level
31 |                   <ul>
32 |                     <li>Fifth level</li>
33 |                   </ul>
34 |                 </li>
35 |               </ul>
36 |             </li>
37 |           </ul>
38 |         </li>
39 |       </ul>
40 |     </li>
41 |   </ul>
42 | </body>
43 | 


--------------------------------------------------------------------------------
/ch02/listing-2.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-size: 1em;
 6 |     }
 7 | 
 8 |     ul {
 9 |       font-size: 0.8rem;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <ul>
16 |     <li>
17 |       Top level
18 |       <ul>
19 |         <li>
20 |           Second level
21 |           <ul>
22 |             <li>
23 |               Third level
24 |               <ul>
25 |                 <li>
26 |                   Fourth level
27 |                   <ul>
28 |                     <li>Fifth level</li>
29 |                   </ul>
30 |                 </li>
31 |               </ul>
32 |             </li>
33 |           </ul>
34 |         </li>
35 |       </ul>
36 |     </li>
37 |   </ul>
38 | </body>
39 | 


--------------------------------------------------------------------------------
/ch02/listing-2.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.875em;
 6 |     }
 7 | 
 8 |     body {
 9 |       font-family: Helvetica, Arial, sans-serif;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body></body>
15 | 


--------------------------------------------------------------------------------
/ch02/listing-2.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.875em;
 6 |     }
 7 | 
 8 |     body {
 9 |       font-family: Helvetica, Arial, sans-serif;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <div class="panel">
16 |     <h2>Single-origin</h2>
17 |     <div class="panel-body">
18 |       We have built partnerships with small farms around the world to
19 |       hand-select beans at the peak of season. We then carefully roast in
20 |       <a href="/batch-size.html">small batches</a> to maximize their potential.
21 |     </div>
22 |   </div>
23 | </body>
24 | 


--------------------------------------------------------------------------------
/ch02/listing-2.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.875em;
 6 |     }
 7 | 
 8 |     body {
 9 |       font-family: Helvetica, Arial, sans-serif;
10 |     }
11 | 
12 |     .panel {
13 |       padding: 1em;
14 |       border: 1px solid #999;
15 |       border-radius: 0.5em;
16 |     }
17 |     .panel > h2 {
18 |       margin-top: 0;
19 |       font-size: 0.8rem;
20 |       font-weight: bold;
21 |       text-transform: uppercase;
22 |     }
23 |   </style>
24 | </head>
25 | 
26 | <body>
27 |   <div class="panel">
28 |     <h2>Single-origin</h2>
29 |     <div class="panel-body">
30 |       We have built partnerships with small farms around the world to
31 |       hand-select beans at the peak of season. We then carefully roast in
32 |       <a href="/batch-size.html">small batches</a> to maximize their potential.
33 |     </div>
34 |   </div>
35 | </body>
36 | 


--------------------------------------------------------------------------------
/ch02/listing-2.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.85em;
 6 |     }
 7 |     @media (min-width: 800px) {
 8 |       :root {
 9 |         font-size: 1em;
10 |       }
11 |     }
12 |     @media (min-width: 1200px) {
13 |       :root {
14 |         font-size: 1.15em;
15 |       }
16 |     }
17 | 
18 |     body {
19 |       font-family: Helvetica, Arial, sans-serif;
20 |     }
21 | 
22 |     .panel {
23 |       padding: 1em;
24 |       border: 1px solid #999;
25 |       border-radius: 0.5em;
26 |     }
27 |     .panel > h2 {
28 |       margin-top: 0;
29 |       font-size: 0.8rem;
30 |       font-weight: bold;
31 |       text-transform: uppercase;
32 |     }
33 |   </style>
34 | </head>
35 | 
36 | <body>
37 |   <div class="panel">
38 |     <h2>Single-origin</h2>
39 |     <div class="body">
40 |       We have built partnerships with small farms around the world to
41 |       hand-select beans at the peak of season. We then carefully roast in
42 |       <a href="/batch-size.html">small batches</a> to maximize their potential.
43 |     </div>
44 |   </div>
45 | </body>
46 | 


--------------------------------------------------------------------------------
/ch02/listing-2.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.85em;
 6 |     }
 7 |     @media (min-width: 800px) {
 8 |       :root {
 9 |         font-size: 1em;
10 |       }
11 |     }
12 |     @media (min-width: 1200px) {
13 |       :root {
14 |         font-size: 1.15em;
15 |       }
16 |     }
17 | 
18 |     body {
19 |       font-family: Helvetica, Arial, sans-serif;
20 |     }
21 | 
22 |     .panel {
23 |       font-size: 1rem;
24 |       padding: 1em;
25 |       border: 1px solid #999;
26 |       border-radius: 0.5em;
27 |     }
28 | 
29 |     .panel > h2 {
30 |       margin-top: 0;
31 |       font-size: 0.8em;
32 |       font-weight: bold;
33 |       text-transform: uppercase;
34 |     }
35 | 
36 |     .panel.large {
37 |       font-size: 1.2em;
38 |     }
39 |   </style>
40 | </head>
41 | 
42 | <body>
43 |   <div class="panel">
44 |     <h2>Single-origin</h2>
45 |     <div class="body">
46 |       We have built partnerships with small farms around the world to
47 |       hand-select beans at the peak of season. We then carefully roast in
48 |       <a href="/batch-size.html">small batches</a> to maximize their potential.
49 |     </div>
50 |   </div>
51 |   <div class="panel large">
52 |     <h2>Single-origin</h2>
53 |     <div class="body">
54 |       We have built partnerships with small farms around the world to
55 |       hand-select beans at the peak of season. We then carefully roast in
56 |       <a href="/batch-size.html">small batches</a> to maximize their potential.
57 |     </div>
58 |   </div>
59 | </body>
60 | 


--------------------------------------------------------------------------------
/ch02/listing-2.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     .square {
 5 |       width: 90vmin;
 6 |       height: 90vmin;
 7 |       background-color: #369;
 8 |     }
 9 |   </style>
10 | </head>
11 | 
12 | <body>
13 |   <div class="square"></div>
14 | </body>
15 | 


--------------------------------------------------------------------------------
/ch02/listing-2.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* styles will be added in subsequent listings */
 5 |   </style>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <p class="about-us">
10 |     We have built partnerships with small farms around the world to hand-select
11 |     beans at the peak of season. We then carefully roast in small batches to
12 |     maximize their potential.
13 |   </p>
14 | </body>
15 | 


--------------------------------------------------------------------------------
/ch02/listing-2.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       line-height: 1.2;
 6 |     }
 7 | 
 8 |     .about-us {
 9 |       font-size: 2em;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <p class="about-us">
16 |     We have built partnerships with small farms around the world to hand-select
17 |     beans at the peak of season. We then carefully roast in small batches to
18 |     maximize their potential.
19 |   </p>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch02/listing-2.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       line-height: 1.2em;
 6 |     }
 7 | 
 8 |     .about-us {
 9 |       font-size: 2em;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <p class="about-us">
16 |     We have built partnerships with small farms around the world to hand-select
17 |     beans at the peak of season. We then carefully roast in small batches to
18 |     maximize their potential.
19 |   </p>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch02/listing-2.18.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --main-font: Helvetica, Arial, sans-serif;
 6 |     }
 7 | 
 8 |     p {
 9 |       font-family: var(--main-font);
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 |   <p>
16 |     We have built partnerships with small farms around the world to hand-select
17 |     beans at the peak of season. We then carefully roast in small batches to
18 |     maximize their potential.
19 |   </p>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch02/listing-2.19.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --main-font: Helvetica, Arial, sans-serif;
 6 |       --brand-color: #369;
 7 |     }
 8 | 
 9 |     p {
10 |       font-family: var(--main-font);
11 |       color: var(--brand-color);
12 |     }
13 |   </style>
14 | </head>
15 | 
16 | <body>
17 |   <p>
18 |     We have built partnerships with small farms around the world to hand-select
19 |     beans at the peak of season. We then carefully roast in small batches to
20 |     maximize their potential.
21 |   </p>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/ch02/listing-2.20.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --main-font: Helvetica, Arial, sans-serif;
 6 |       --brand-color: #369;
 7 |     }
 8 | 
 9 |     p {
10 |       font-family: var(--main-font, sans-serif);
11 |       color: var(--brand-color, blue);
12 |     }
13 |   </style>
14 | </head>
15 | 
16 | <body>
17 |   <p>
18 |     We have built partnerships with small farms around the world to hand-select
19 |     beans at the peak of season. We then carefully roast in small batches to
20 |     maximize their potential.
21 |   </p>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/ch02/listing-2.21.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       font-family: Helvetica, Arial, sans-serif;
 6 |     }
 7 | 
 8 |     .panel {
 9 |       font-size: 1rem;
10 |       padding: 1em;
11 |       border: 1px solid #999;
12 |       border-radius: 0.5em;
13 |       background-color: #fff;
14 |       color: #000;
15 |     }
16 | 
17 |     .panel > h2 {
18 |       margin-top: 0;
19 |       font-size: 0.8em;
20 |       font-weight: bold;
21 |       text-transform: uppercase;
22 |     }
23 | 
24 |     .panel.large {
25 |       font-size: 1.2em;
26 |     }
27 |   </style>
28 | </head>
29 | 
30 | <body>
31 |   <div class="panel">
32 |     <h2>Single-origin</h2>
33 |     <div class="body">
34 |       We have built partnerships with small farms around the world to
35 |       hand-select beans at the peak of season. We then carefully roast in small
36 |       batches to maximize their potential.
37 |     </div>
38 |   </div>
39 | 
40 |   <aside class="dark">
41 |     <div class="panel">
42 |       <h2>Single-origin</h2>
43 |       <div class="body">
44 |         We have built partnerships with small farms around the world to
45 |         hand-select beans at the peak of season. We then carefully roast in
46 |         small batches to maximize their potential.
47 |       </div>
48 |     </div>
49 |   </aside>
50 | </body>
51 | 


--------------------------------------------------------------------------------
/ch02/listing-2.22.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: calc(0.5em + 1vw);
 6 |       --main-bg: #fff;
 7 |       --main-color: #000;
 8 |     }
 9 | 
10 |     body {
11 |       font-family: Helvetica, Arial, sans-serif;
12 |     }
13 | 
14 |     .panel {
15 |       font-size: 1rem;
16 |       padding: 1em;
17 |       border: 1px solid #999;
18 |       border-radius: 0.5em;
19 |       background-color: var(--main-bg);
20 |       color: var(--main-color);
21 |     }
22 | 
23 |     .panel > h2 {
24 |       margin-top: 0;
25 |       font-size: 0.8em;
26 |       font-weight: bold;
27 |       text-transform: uppercase;
28 |     }
29 | 
30 |     .panel.large {
31 |       font-size: 1.2em;
32 |     }
33 |   </style>
34 | </head>
35 | 
36 | <body>
37 |   <div class="panel">
38 |     <h2>Single-origin</h2>
39 |     <div class="body">
40 |       We have built partnerships with small farms around the world to
41 |       hand-select beans at the peak of season. We then carefully roast in small
42 |       batches to maximize their potential.
43 |     </div>
44 |   </div>
45 | 
46 |   <aside class="dark">
47 |     <div class="panel">
48 |       <h2>Single-origin</h2>
49 |       <div class="body">
50 |         We have built partnerships with small farms around the world to
51 |         hand-select beans at the peak of season. We then carefully roast in
52 |         small batches to maximize their potential.
53 |       </div>
54 |     </div>
55 |   </aside>
56 | </body>
57 | 


--------------------------------------------------------------------------------
/ch02/listing-2.23.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: calc(0.5em + 1vw);
 6 |       --main-bg: #fff;
 7 |       --main-color: #000;
 8 |     }
 9 | 
10 |     body {
11 |       font-family: Helvetica, Arial, sans-serif;
12 |     }
13 | 
14 |     .dark {
15 |       margin-top: 2em;
16 |       padding: 1em;
17 |       background-color: #999;
18 |       --main-bg: #333;
19 |       --main-color: #fff;
20 |     }
21 | 
22 |     .panel {
23 |       font-size: 1rem;
24 |       padding: 1em;
25 |       border: 1px solid #999;
26 |       border-radius: 0.5em;
27 |       background-color: var(--main-bg);
28 |       color: var(--main-color);
29 |     }
30 | 
31 |     .panel > h2 {
32 |       margin-top: 0;
33 |       font-size: 0.8em;
34 |       font-weight: bold;
35 |       text-transform: uppercase;
36 |     }
37 | 
38 |     .panel.large {
39 |       font-size: 1.2em;
40 |     }
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <div class="panel">
46 |     <h2>Single-origin</h2>
47 |     <div class="body">
48 |       We have built partnerships with small farms around the world to
49 |       hand-select beans at the peak of season. We then carefully roast in small
50 |       batches to maximize their potential.
51 |     </div>
52 |   </div>
53 | 
54 |   <aside class="dark">
55 |     <div class="panel">
56 |       <h2>Single-origin</h2>
57 |       <div class="body">
58 |         We have built partnerships with small farms around the world to
59 |         hand-select beans at the peak of season. We then carefully roast in
60 |         small batches to maximize their potential.
61 |       </div>
62 |     </div>
63 |   </aside>
64 | </body>
65 | 


--------------------------------------------------------------------------------
/ch02/listing-2.24.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: calc(0.5em + 1vw);
 6 |       --main-bg: #fff;
 7 |       --main-color: #000;
 8 |     }
 9 | 
10 |     body {
11 |       font-family: Helvetica, Arial, sans-serif;
12 |     }
13 | 
14 |     .dark {
15 |       margin-top: 2em;
16 |       padding: 1em;
17 |       background-color: #999;
18 |       --main-bg: #333;
19 |       --main-color: #fff;
20 |     }
21 | 
22 |     .panel {
23 |       font-size: 1rem;
24 |       padding: 1em;
25 |       border: 1px solid #999;
26 |       border-radius: 0.5em;
27 |       background-color: var(--main-bg);
28 |       color: var(--main-color);
29 |     }
30 | 
31 |     .panel > h2 {
32 |       margin-top: 0;
33 |       font-size: 0.8em;
34 |       font-weight: bold;
35 |       text-transform: uppercase;
36 |     }
37 | 
38 |     .panel.large {
39 |       font-size: 1.2em;
40 |     }
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <div class="panel">
46 |     <h2>Single-origin</h2>
47 |     <div class="body">
48 |       We have built partnerships with small farms around the world to
49 |       hand-select beans at the peak of season. We then carefully roast in small
50 |       batches to maximize their potential.
51 |     </div>
52 |   </div>
53 | 
54 |   <aside class="dark">
55 |     <div class="panel">
56 |       <h2>Single-origin</h2>
57 |       <div class="body">
58 |         We have built partnerships with small farms around the world to
59 |         hand-select beans at the peak of season. We then carefully roast in
60 |         small batches to maximize their potential.
61 |       </div>
62 |     </div>
63 |   </aside>
64 | 
65 |   <script type="text/javascript">
66 |     const rootElement = document.documentElement;
67 |     const styles = getComputedStyle(rootElement);
68 |     const mainColor = styles.getPropertyValue("--main-bg");
69 |     console.log(String(mainColor).trim());
70 | 
71 |     rootElement.style.setProperty("--main-bg", "#cdf");
72 |   </script>
73 | </body>
74 | 


--------------------------------------------------------------------------------
/ch03/listing-3.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* styles to be added in subsequent listings */
 5 |   </style>
 6 | </head>
 7 | <body lang="en-US">
 8 |   <header class="page-header">
 9 |     <h1>Franklin Running Club</h1>
10 |   </header>
11 |   <div class="container">
12 |     <main class="main">
13 |       <h2>Come join us!</h2>
14 |       <p>
15 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
16 |         town square. Runs are three to five miles, at your own pace.
17 |       </p>
18 |       <p>
19 |         Join us while we train for the
20 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
21 |         green!
22 |       </p>
23 |     </main>
24 |     <aside class="social-links">
25 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
26 |       <a href="/facebook" class="button-link">like us on Facebook</a>
27 |     </aside>
28 |   </div>
29 | </body>
30 | 


--------------------------------------------------------------------------------
/ch03/listing-3.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |     }
 7 | 
 8 |     body {
 9 |       margin: unset;
10 |       background-color: #eee;
11 |       font-family: Helvetica, Arial, sans-serif;
12 |     }
13 | 
14 |     .page-header {
15 |       color: #fff;
16 |       background-color: var(--brand-color);
17 |     }
18 | 
19 |     .main {
20 |       background-color: #fff;
21 |       border-radius: 0.5em;
22 |     }
23 | 
24 |     .social-links {
25 |       background-color: #fff;
26 |       border-radius: 0.5em;
27 |     }
28 |   </style>
29 | </head>
30 | <body lang="en-US">
31 |   <header class="page-header">
32 |     <h1>Franklin Running Club</h1>
33 |   </header>
34 |   <div class="container">
35 |     <main class="main">
36 |       <h2>Come join us!</h2>
37 |       <p>
38 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
39 |         town square. Runs are three to five miles, at your own pace.
40 |       </p>
41 |       <p>
42 |         Join us while we train for the
43 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
44 |         green!
45 |       </p>
46 |     </main>
47 |     <aside class="social-links">
48 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
49 |       <a href="/facebook" class="button-link">like us on Facebook</a>
50 |     </aside>
51 |   </div>
52 | </body>
53 | 


--------------------------------------------------------------------------------
/ch03/listing-3.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 1080px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       max-width: var(--column-width);
22 |       margin: 0 auto;
23 |     }
24 | 
25 |     .container {
26 |       max-width: var(--column-width);
27 |       margin: 0 auto;
28 |     }
29 | 
30 |     .main {
31 |       background-color: #fff;
32 |       border-radius: 0.5em;
33 |     }
34 | 
35 |     .social-links {
36 |       background-color: #fff;
37 |       border-radius: 0.5em;
38 |     }
39 |   </style>
40 | </head>
41 | <body lang="en-US">
42 |   <header class="page-header">
43 |     <h1>Franklin Running Club</h1>
44 |   </header>
45 |   <div class="container">
46 |     <main class="main">
47 |       <h2>Come join us!</h2>
48 |       <p>
49 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
50 |         town square. Runs are three to five miles, at your own pace.
51 |       </p>
52 |       <p>
53 |         Join us while we train for the
54 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
55 |         green!
56 |       </p>
57 |     </main>
58 |     <aside class="social-links">
59 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
60 |       <a href="/facebook" class="button-link">like us on Facebook</a>
61 |     </aside>
62 |   </div>
63 | </body>
64 | 


--------------------------------------------------------------------------------
/ch03/listing-3.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 1080px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       max-inline-size: var(--column-width);
22 |       margin-inline: auto;
23 |     }
24 | 
25 |     .container {
26 |       max-inline-size: var(--column-width);
27 |       margin-inline: auto;
28 |     }
29 | 
30 |     .main {
31 |       background-color: #fff;
32 |       border-radius: 0.5em;
33 |     }
34 | 
35 |     .social-links {
36 |       background-color: #fff;
37 |       border-radius: 0.5em;
38 |     }
39 |   </style>
40 | </head>
41 | <body lang="en-US">
42 |   <header class="page-header">
43 |     <h1>Franklin Running Club</h1>
44 |   </header>
45 |   <div class="container">
46 |     <main class="main">
47 |       <h2>Come join us!</h2>
48 |       <p>
49 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
50 |         town square. Runs are three to five miles, at your own pace.
51 |       </p>
52 |       <p>
53 |         Join us while we train for the
54 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
55 |         green!
56 |       </p>
57 |     </main>
58 |     <aside class="social-links">
59 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
60 |       <a href="/facebook" class="button-link">like us on Facebook</a>
61 |     </aside>
62 |   </div>
63 | </body>
64 | 


--------------------------------------------------------------------------------
/ch03/listing-3.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 1080px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       max-inline-size: var(--column-width);
22 |       margin-inline: auto;
23 |     }
24 | 
25 |     .container {
26 |       max-inline-size: var(--column-width);
27 |       margin-inline: auto;
28 |     }
29 | 
30 |     .main {
31 |       padding: 1em 1.5rem;
32 |       background-color: #fff;
33 |       border-radius: 0.5em;
34 |     }
35 | 
36 |     .social-links {
37 |       padding: 1em 1.5rem;
38 |       background-color: #fff;
39 |       border-radius: 0.5em;
40 |     }
41 |   </style>
42 | </head>
43 | <body lang="en-US">
44 |   <header class="page-header">
45 |     <h1>Franklin Running Club</h1>
46 |   </header>
47 |   <div class="container">
48 |     <main class="main">
49 |       <h2>Come join us!</h2>
50 |       <p>
51 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
52 |         town square. Runs are three to five miles, at your own pace.
53 |       </p>
54 |       <p>
55 |         Join us while we train for the
56 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
57 |         green!
58 |       </p>
59 |     </main>
60 |     <aside class="social-links">
61 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
62 |       <a href="/facebook" class="button-link">like us on Facebook</a>
63 |     </aside>
64 |   </div>
65 | </body>
66 | 


--------------------------------------------------------------------------------
/ch03/listing-3.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 1080px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       max-inline-size: var(--column-width);
22 |       margin-inline: auto;
23 |       padding-inline: 1.5rem;
24 |     }
25 | 
26 |     .container {
27 |       max-inline-size: var(--column-width);
28 |       margin-inline: auto;
29 |     }
30 | 
31 |     .main {
32 |       padding: 1em 1.5rem;
33 |       background-color: #fff;
34 |       border-radius: 0.5em;
35 |     }
36 | 
37 |     .social-links {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 |   </style>
43 | </head>
44 | <body lang="en-US">
45 |   <header class="page-header">
46 |     <h1>Franklin Running Club</h1>
47 |   </header>
48 |   <div class="container">
49 |     <main class="main">
50 |       <h2>Come join us!</h2>
51 |       <p>
52 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
53 |         town square. Runs are three to five miles, at your own pace.
54 |       </p>
55 |       <p>
56 |         Join us while we train for the
57 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
58 |         green!
59 |       </p>
60 |     </main>
61 |     <aside class="social-links">
62 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
63 |       <a href="/facebook" class="button-link">like us on Facebook</a>
64 |     </aside>
65 |   </div>
66 | </body>
67 | 


--------------------------------------------------------------------------------
/ch03/listing-3.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 1080px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       box-sizing: border-box;
22 |       max-inline-size: var(--column-width);
23 |       margin-inline: auto;
24 |       padding-inline: 1.5rem;
25 |     }
26 | 
27 |     .container {
28 |       max-inline-size: var(--column-width);
29 |       margin-inline: auto;
30 |     }
31 | 
32 |     .main {
33 |       padding: 1em 1.5rem;
34 |       background-color: #fff;
35 |       border-radius: 0.5em;
36 |     }
37 | 
38 |     .social-links {
39 |       padding: 1em 1.5rem;
40 |       background-color: #fff;
41 |       border-radius: 0.5em;
42 |     }
43 |   </style>
44 | </head>
45 | <body lang="en-US">
46 |   <header class="page-header">
47 |     <h1>Franklin Running Club</h1>
48 |   </header>
49 |   <div class="container">
50 |     <main class="main">
51 |       <h2>Come join us!</h2>
52 |       <p>
53 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
54 |         town square. Runs are three to five miles, at your own pace.
55 |       </p>
56 |       <p>
57 |         Join us while we train for the
58 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
59 |         green!
60 |       </p>
61 |     </main>
62 |     <aside class="social-links">
63 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
64 |       <a href="/facebook" class="button-link">like us on Facebook</a>
65 |     </aside>
66 |   </div>
67 | </body>
68 | 


--------------------------------------------------------------------------------
/ch03/listing-3.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin-inline: auto;
29 |       padding-inline: 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       padding: 1em 1.5rem;
45 |       background-color: #fff;
46 |       border-radius: 0.5em;
47 |     }
48 |   </style>
49 | </head>
50 | <body lang="en-US">
51 |   <header class="page-header">
52 |     <h1>Franklin Running Club</h1>
53 |   </header>
54 |   <div class="container">
55 |     <main class="main">
56 |       <h2>Come join us!</h2>
57 |       <p>
58 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
59 |         town square. Runs are three to five miles, at your own pace.
60 |       </p>
61 |       <p>
62 |         Join us while we train for the
63 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
64 |         green!
65 |       </p>
66 |     </main>
67 |     <aside class="social-links">
68 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
69 |       <a href="/facebook" class="button-link">like us on Facebook</a>
70 |     </aside>
71 |   </div>
72 | </body>
73 | 


--------------------------------------------------------------------------------
/ch03/listing-3.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       --brand-color: #0072b0;
 6 |       --column-width: 600px;
 7 |     }
 8 | 
 9 |     body {
10 |       margin: unset;
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .page-header {
16 |       color: #fff;
17 |       background-color: var(--brand-color);
18 |     }
19 | 
20 |     .page-header h1 {
21 |       max-width: var(--column-width);
22 |       margin-inline: auto;
23 |     }
24 | 
25 |     .container {
26 |       max-width: var(--column-width);
27 |       margin-inline: auto;
28 |       border: 1px dashed gray;
29 |     }
30 | 
31 |     .expanded-child {
32 |       margin-inline: -2em;
33 |       padding-inline: 2em;
34 |       background-color: #79b;
35 |       overflow: auto;
36 |     }
37 |   </style>
38 | </head>
39 | <body>
40 |   <header class="page-header">
41 |     <h1>Franklin Running Club</h1>
42 |   </header>
43 |   <div class="container">
44 |     <h2>Come join us!</h2>
45 |     <p>
46 |       The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
47 |       town square. Runs are three to five miles, at your own pace.
48 |     </p>
49 |     <div class="expanded-child">
50 |       <p>
51 |         Negative margins expand this element outside its container. An equal
52 |         amount of padding brings the content into alignment with the content
53 |         above and below.
54 |       </p>
55 |     </div>
56 |     <p>
57 |       Join us while we train for the
58 |       <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
59 |       green!
60 |     </p>
61 |   </div>
62 | </body>
63 | 


--------------------------------------------------------------------------------
/ch03/listing-3.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin-inline: auto;
29 |       padding-inline: 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       padding: 1em 1.5rem;
45 |       background-color: #fff;
46 |       border-radius: 0.5em;
47 |     }
48 |   </style>
49 | </head>
50 | <body lang="en-US">
51 |   <header class="page-header">
52 |     <h1>Franklin Running Club</h1>
53 |   </header>
54 |   <div class="container">
55 |     <main class="main">
56 |       <h2>Come join us!</h2>
57 |       <div>
58 |         <p>
59 |           The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
60 |           town square. Runs are three to five miles, at your own pace.
61 |         </p>
62 |         <p>
63 |           Join us while we train for the
64 |           <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
65 |           green!
66 |         </p>
67 |       </div>
68 |     </main>
69 |     <aside class="social-links">
70 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
71 |       <a href="/facebook" class="button-link">like us on Facebook</a>
72 |     </aside>
73 |   </div>
74 | </body>
75 | 


--------------------------------------------------------------------------------
/ch03/listing-3.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin: 0 auto;
29 |       padding: 1em 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       padding: 1em 1.5rem;
45 |       background-color: #fff;
46 |       border-radius: 0.5em;
47 |     }
48 |   </style>
49 | </head>
50 | <body lang="en-US">
51 |   <header class="page-header">
52 |     <h1>Franklin Running Club</h1>
53 |   </header>
54 |   <div class="container">
55 |     <main class="main">
56 |       <h2>Come join us!</h2>
57 |       <p>
58 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
59 |         town square. Runs are three to five miles, at your own pace.
60 |       </p>
61 |       <p>
62 |         Join us while we train for the
63 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
64 |         green!
65 |       </p>
66 |     </main>
67 |     <aside class="social-links">
68 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
69 |       <a href="/facebook" class="button-link">like us on Facebook</a>
70 |     </aside>
71 |   </div>
72 | </body>
73 | 


--------------------------------------------------------------------------------
/ch03/listing-3.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin: 0 auto;
29 |       padding: 1em 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       max-inline-size: 25em;
45 |       padding: 1em 1.5rem;
46 |       background-color: #fff;
47 |       border-radius: 0.5em;
48 |     }
49 | 
50 |     .button-link {
51 |       display: block;
52 |       padding: 0.5em;
53 |       color: #fff;
54 |       background-color: var(--brand-color);
55 |       text-align: center;
56 |       text-decoration: none;
57 |       text-transform: uppercase;
58 |     }
59 |   </style>
60 | </head>
61 | <body lang="en-US">
62 |   <header class="page-header">
63 |     <h1>Franklin Running Club</h1>
64 |   </header>
65 |   <div class="container">
66 |     <main class="main">
67 |       <h2>Come join us!</h2>
68 |       <p>
69 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
70 |         town square. Runs are three to five miles, at your own pace.
71 |       </p>
72 |       <p>
73 |         Join us while we train for the
74 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
75 |         green!
76 |       </p>
77 |     </main>
78 |     <aside class="social-links">
79 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
80 |       <a href="/facebook" class="button-link">like us on Facebook</a>
81 |     </aside>
82 |   </div>
83 | </body>
84 | 


--------------------------------------------------------------------------------
/ch03/listing-3.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin: 0 auto;
29 |       padding: 1em 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       max-inline-size: 25em;
45 |       padding: 1em 1.5rem;
46 |       background-color: #fff;
47 |       border-radius: 0.5em;
48 |     }
49 | 
50 |     .button-link {
51 |       display: block;
52 |       padding: 0.5em;
53 |       color: #fff;
54 |       background-color: var(--brand-color);
55 |       text-align: center;
56 |       text-decoration: none;
57 |       text-transform: uppercase;
58 |     }
59 | 
60 |     .button-link + .button-link {
61 |       margin-block-start: 1.5em;
62 |     }
63 |   </style>
64 | </head>
65 | <body lang="en-US">
66 |   <header class="page-header">
67 |     <h1>Franklin Running Club</h1>
68 |   </header>
69 |   <div class="container">
70 |     <main class="main">
71 |       <h2>Come join us!</h2>
72 |       <p>
73 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
74 |         town square. Runs are three to five miles, at your own pace.
75 |       </p>
76 |       <p>
77 |         Join us while we train for the
78 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
79 |         green!
80 |       </p>
81 |     </main>
82 |     <aside class="social-links">
83 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
84 |       <a href="/facebook" class="button-link">like us on Facebook</a>
85 |     </aside>
86 |   </div>
87 | </body>
88 | 


--------------------------------------------------------------------------------
/ch03/listing-3.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     :root {
11 |       --brand-color: #0072b0;
12 |       --column-width: 1080px;
13 |     }
14 | 
15 |     body {
16 |       margin: unset;
17 |       background-color: #eee;
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .page-header {
22 |       color: #fff;
23 |       background-color: var(--brand-color);
24 |     }
25 | 
26 |     .page-header h1 {
27 |       max-inline-size: var(--column-width);
28 |       margin: 0 auto;
29 |       padding: 1em 1.5rem;
30 |     }
31 | 
32 |     .container {
33 |       max-inline-size: var(--column-width);
34 |       margin-inline: auto;
35 |     }
36 | 
37 |     .main {
38 |       padding: 1em 1.5rem;
39 |       background-color: #fff;
40 |       border-radius: 0.5em;
41 |     }
42 | 
43 |     .social-links {
44 |       max-inline-size: 25em;
45 |       padding: 1em 1.5rem;
46 |       background-color: #fff;
47 |       border-radius: 0.5em;
48 |     }
49 | 
50 |     .button-link {
51 |       display: block;
52 |       padding: 0.5em;
53 |       color: #fff;
54 |       background-color: var(--brand-color);
55 |       text-align: center;
56 |       text-decoration: none;
57 |       text-transform: uppercase;
58 |     }
59 | 
60 |     .button-link + .button-link {
61 |       margin-block-start: 1.5em;
62 |     }
63 | 
64 |     /* sponsor-link styles to be added in the following listing */
65 |   </style>
66 | </head>
67 | <body lang="en-US">
68 |   <header class="page-header">
69 |     <h1>Franklin Running Club</h1>
70 |   </header>
71 |   <div class="container">
72 |     <main class="main">
73 |       <h2>Come join us!</h2>
74 |       <p>
75 |         The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
76 |         town square. Runs are three to five miles, at your own pace.
77 |       </p>
78 |       <p>
79 |         Join us while we train for the
80 |         <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
81 |         green!
82 |       </p>
83 |     </main>
84 |     <aside class="social-links">
85 |       <a href="/mastodon" class="button-link">follow us on Mastodon</a>
86 |       <a href="/facebook" class="button-link">like us on Facebook</a>
87 |       <a href="/sponsors" class="sponsor-link">Become a sponsor</a>
88 |     </aside>
89 |   </div>
90 | </body>
91 | 


--------------------------------------------------------------------------------
/ch04/listing-4.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       /* styles to be added in subsequent listings */
 6 |     </style>
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <div class="container">
11 |       <header>
12 |         <h1>Ink</h1>
13 |       </header>
14 |       <nav>
15 |         <ul class="site-nav">
16 |           <li><a href="/">Home</a></li>
17 |           <li><a href="/features">Features</a></li>
18 |           <li><a href="/pricing">Pricing</a></li>
19 |           <li><a href="/support">Support</a></li>
20 |           <li class="nav-right">
21 |             <a href="/about">About</a>
22 |           </li>
23 |         </ul>
24 |       </nav>
25 |       <main class="flex">
26 |         <div class="column-main tile">
27 |           <h1>Team collaboration done right</h1>
28 |           <p>
29 |             Thousands of teams from all over the world turn to <b>Ink</b> to
30 |             communicate and get things done.
31 |           </p>
32 |         </div>
33 |         <div class="column-sidebar">
34 |           <div class="tile">
35 |             <form class="login-form">
36 |               <h3>Login</h3>
37 |               <p>
38 |                 <label for="username">Username</label>
39 |                 <input id="username" type="text" name="username" />
40 |               </p>
41 |               <p>
42 |                 <label for="password">Password</label>
43 |                 <input id="password" type="password" name="password" />
44 |               </p>
45 |               <button type="submit">Login</button>
46 |             </form>
47 |           </div>
48 |           <div class="tile centered stack">
49 |             <small>Starting at</small>
50 |             <div class="cost">
51 |               <span class="cost-currency">$</span>
52 |               <span class="cost-dollars">20</span>
53 |               <span class="cost-cents">.00</span>
54 |             </div>
55 |             <a class="cta-button" href="/pricing"> Sign up </a>
56 |           </div>
57 |         </div>
58 |       </main>
59 |     </div>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/ch04/listing-4.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       *,
 6 |       ::before,
 7 |       ::after {
 8 |         box-sizing: border-box;
 9 |       }
10 | 
11 |       body {
12 |         margin: unset;
13 |         background-color: #709b90;
14 |         font-family: Helvetica, Arial, sans-serif;
15 |       }
16 | 
17 |       .stack > * + * {
18 |         margin-block-start: 1.5em;
19 |       }
20 | 
21 |       .container {
22 |         max-inline-size: 1080px;
23 |         margin-inline: auto;
24 |       }
25 |     </style>
26 |   </head>
27 | 
28 |   <body>
29 |     <div class="container">
30 |       <header>
31 |         <h1>Ink</h1>
32 |       </header>
33 |       <nav>
34 |         <ul class="site-nav">
35 |           <li><a href="/">Home</a></li>
36 |           <li><a href="/features">Features</a></li>
37 |           <li><a href="/pricing">Pricing</a></li>
38 |           <li><a href="/support">Support</a></li>
39 |           <li class="nav-right">
40 |             <a href="/about">About</a>
41 |           </li>
42 |         </ul>
43 |       </nav>
44 |       <main class="flex">
45 |         <div class="column-main tile">
46 |           <h1>Team collaboration done right</h1>
47 |           <p>
48 |             Thousands of teams from all over the world turn to <b>Ink</b> to
49 |             communicate and get things done.
50 |           </p>
51 |         </div>
52 |         <div class="column-sidebar">
53 |           <div class="tile">
54 |             <form class="login-form">
55 |               <h3>Login</h3>
56 |               <p>
57 |                 <label for="username">Username</label>
58 |                 <input id="username" type="text" name="username" />
59 |               </p>
60 |               <p>
61 |                 <label for="password">Password</label>
62 |                 <input id="password" type="password" name="password" />
63 |               </p>
64 |               <button type="submit">Login</button>
65 |             </form>
66 |           </div>
67 |           <div class="tile centered stack">
68 |             <small>Starting at</small>
69 |             <div class="cost">
70 |               <span class="cost-currency">$</span>
71 |               <span class="cost-dollars">20</span>
72 |               <span class="cost-cents">.00</span>
73 |             </div>
74 |             <a class="cta-button" href="/pricing"> Sign up </a>
75 |           </div>
76 |         </div>
77 |       </main>
78 |     </div>
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/ch05/images/bear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/bear.jpg


--------------------------------------------------------------------------------
/ch05/images/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/bird.jpg


--------------------------------------------------------------------------------
/ch05/images/eagle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/eagle.jpg


--------------------------------------------------------------------------------
/ch05/images/elephants.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/elephants.jpg


--------------------------------------------------------------------------------
/ch05/images/monkey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/monkey.jpg


--------------------------------------------------------------------------------
/ch05/images/owl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/owl.jpg


--------------------------------------------------------------------------------
/ch05/images/swan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch05/images/swan.jpg


--------------------------------------------------------------------------------
/ch05/listing-5.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       /* styles to be added in the next listing */
 6 |     </style>
 7 |   </head>
 8 |   <body>
 9 |     <div class="grid">
10 |       <div class="a">a</div>
11 |       <div class="b">b</div>
12 |       <div class="c">c</div>
13 |       <div class="d">d</div>
14 |       <div class="e">e</div>
15 |       <div class="f">f</div>
16 |     </div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/ch05/listing-5.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       *,
 6 |       ::before,
 7 |       ::after {
 8 |         box-sizing: border-box;
 9 |       }
10 | 
11 |       .grid {
12 |         display: grid;
13 |         grid-template-columns: 1fr 1fr 1fr;
14 |         grid-template-rows: 1fr 1fr;
15 |         gap: 0.5em;
16 |       }
17 | 
18 |       .grid > * {
19 |         background-color: darkgray;
20 |         color: white;
21 |         padding: 2em;
22 |         border-radius: 0.5em;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <div class="grid">
28 |       <div class="a">a</div>
29 |       <div class="b">b</div>
30 |       <div class="c">c</div>
31 |       <div class="d">d</div>
32 |       <div class="e">e</div>
33 |       <div class="f">f</div>
34 |     </div>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/ch05/listing-5.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       /* styles to be added in subsequent listings */
 6 |     </style>
 7 |   </head>
 8 |   <body>
 9 |     <div class="container">
10 |       <header>
11 |         <h1 class="page-heading">Ink</h1>
12 |       </header>
13 |       <nav>
14 |         <ul class="site-nav">
15 |           <li><a href="/">Home</a></li>
16 |           <li><a href="/features">Features</a></li>
17 |           <li><a href="/pricing">Pricing</a></li>
18 |           <li><a href="/support">Support</a></li>
19 |           <li class="nav-right">
20 |             <a href="/about">About</a>
21 |           </li>
22 |         </ul>
23 |       </nav>
24 |       <main class="main tile">
25 |         <h1>Team collaboration done right</h1>
26 |         <p>
27 |           Thousands of teams from all over the world turn to <b>Ink</b> to
28 |           communicate and get things done.
29 |         </p>
30 |       </main>
31 |       <div class="sidebar-top tile">
32 |         <form class="login-form">
33 |           <h3>Login</h3>
34 |           <p>
35 |             <label for="username">Username</label>
36 |             <input id="username" type="text" name="username" />
37 |           </p>
38 |           <p>
39 |             <label for="password">Password</label>
40 |             <input id="password" type="password" name="password" />
41 |           </p>
42 |           <button type="submit">Login</button>
43 |         </form>
44 |       </div>
45 |       <div class="sidebar-bottom tile centered stack">
46 |         <small>Starting at</small>
47 |         <div class="cost">
48 |           <span class="cost-currency">$</span>
49 |           <span class="cost-dollars">20</span>
50 |           <span class="cost-cents">.00</span>
51 |         </div>
52 |         <a class="cta-button" href="/pricing"> Sign up </a>
53 |       </div>
54 |     </div>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/ch05/listing-5.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* styles to be added in subsequent listings */
 5 |   </style>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div class="portfolio">
10 |     <figure class="featured">
11 |       <img src="images/monkey.jpg" alt="monkey" />
12 |       <figcaption>Monkey</figcaption>
13 |     </figure>
14 |     <figure>
15 |       <img src="images/eagle.jpg" alt="eagle" />
16 |       <figcaption>Eagle</figcaption>
17 |     </figure>
18 |     <figure class="featured">
19 |       <img src="images/bird.jpg" alt="bird" />
20 |       <figcaption>Bird</figcaption>
21 |     </figure>
22 |     <figure>
23 |       <img src="images/bear.jpg" alt="bear" />
24 |       <figcaption>Bear</figcaption>
25 |     </figure>
26 |     <figure class="featured">
27 |       <img src="images/swan.jpg" alt="swan" />
28 |       <figcaption>Swan</figcaption>
29 |     </figure>
30 |     <figure>
31 |       <img src="images/elephants.jpg" alt="elephants" />
32 |       <figcaption>Elephants</figcaption>
33 |     </figure>
34 |     <figure>
35 |       <img src="images/owl.jpg" alt="owl" />
36 |       <figcaption>Owl</figcaption>
37 |     </figure>
38 |   </div>
39 | </body>
40 | 


--------------------------------------------------------------------------------
/ch05/listing-5.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     ::before,
 6 |     ::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       background-color: #709b90;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .portfolio {
16 |       display: grid;
17 |       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
18 |       grid-auto-rows: 1fr;
19 |       gap: 1em;
20 |     }
21 | 
22 |     .portfolio > figure {
23 |       margin: 0;
24 |     }
25 | 
26 |     .portfolio img {
27 |       max-inline-size: 100%;
28 |     }
29 | 
30 |     .portfolio figcaption {
31 |       padding: 0.3em 0.8em;
32 |       background-color: rgb(0 0 0 / 0.5);
33 |       color: #fff;
34 |       text-align: right;
35 |     }
36 |   </style>
37 | </head>
38 | 
39 | <body>
40 |   <div class="portfolio">
41 |     <figure class="featured">
42 |       <img src="images/monkey.jpg" alt="monkey" />
43 |       <figcaption>Monkey</figcaption>
44 |     </figure>
45 |     <figure>
46 |       <img src="images/eagle.jpg" alt="eagle" />
47 |       <figcaption>Eagle</figcaption>
48 |     </figure>
49 |     <figure class="featured">
50 |       <img src="images/bird.jpg" alt="bird" />
51 |       <figcaption>Bird</figcaption>
52 |     </figure>
53 |     <figure>
54 |       <img src="images/bear.jpg" alt="bear" />
55 |       <figcaption>Bear</figcaption>
56 |     </figure>
57 |     <figure class="featured">
58 |       <img src="images/swan.jpg" alt="swan" />
59 |       <figcaption>Swan</figcaption>
60 |     </figure>
61 |     <figure>
62 |       <img src="images/elephants.jpg" alt="elephants" />
63 |       <figcaption>Elephants</figcaption>
64 |     </figure>
65 |     <figure>
66 |       <img src="images/owl.jpg" alt="owl" />
67 |       <figcaption>Owl</figcaption>
68 |     </figure>
69 |   </div>
70 | </body>
71 | 


--------------------------------------------------------------------------------
/ch05/listing-5.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     ::before,
 6 |     ::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       background-color: #709b90;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .portfolio {
16 |       display: grid;
17 |       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
18 |       grid-auto-rows: 1fr;
19 |       gap: 1em;
20 |       grid-auto-flow: dense;
21 |     }
22 | 
23 |     .portfolio .featured {
24 |       grid-row: span 2;
25 |       grid-column: span 2;
26 |     }
27 | 
28 |     .portfolio > figure {
29 |       margin: 0;
30 |     }
31 | 
32 |     .portfolio img {
33 |       max-inline-size: 100%;
34 |     }
35 | 
36 |     .portfolio figcaption {
37 |       padding: 0.3em 0.8em;
38 |       background-color: rgb(0 0 0 / 0.5);
39 |       color: #fff;
40 |       text-align: right;
41 |     }
42 |   </style>
43 | </head>
44 | 
45 | <body>
46 |   <div class="portfolio">
47 |     <figure class="featured">
48 |       <img src="images/monkey.jpg" alt="monkey" />
49 |       <figcaption>Monkey</figcaption>
50 |     </figure>
51 |     <figure>
52 |       <img src="images/eagle.jpg" alt="eagle" />
53 |       <figcaption>Eagle</figcaption>
54 |     </figure>
55 |     <figure class="featured">
56 |       <img src="images/bird.jpg" alt="bird" />
57 |       <figcaption>Bird</figcaption>
58 |     </figure>
59 |     <figure>
60 |       <img src="images/bear.jpg" alt="bear" />
61 |       <figcaption>Bear</figcaption>
62 |     </figure>
63 |     <figure class="featured">
64 |       <img src="images/swan.jpg" alt="swan" />
65 |       <figcaption>Swan</figcaption>
66 |     </figure>
67 |     <figure>
68 |       <img src="images/elephants.jpg" alt="elephants" />
69 |       <figcaption>Elephants</figcaption>
70 |     </figure>
71 |     <figure>
72 |       <img src="images/owl.jpg" alt="owl" />
73 |       <figcaption>Owl</figcaption>
74 |     </figure>
75 |   </div>
76 | </body>
77 | 


--------------------------------------------------------------------------------
/ch05/listing-5.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     ::before,
 6 |     ::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       background-color: #709b90;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .portfolio {
16 |       display: grid;
17 |       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
18 |       grid-auto-rows: 1fr;
19 |       gap: 1em;
20 |       grid-auto-flow: dense;
21 |     }
22 | 
23 |     .portfolio .featured {
24 |       grid-row: span 2;
25 |       grid-column: span 2;
26 |     }
27 | 
28 |     .portfolio > figure {
29 |       display: flex;
30 |       flex-direction: column;
31 |       margin: 0;
32 |     }
33 | 
34 |     .portfolio img {
35 |       flex: 1;
36 |       object-fit: cover;
37 |       max-inline-size: 100%;
38 |     }
39 | 
40 |     .portfolio figcaption {
41 |       padding: 0.3em 0.8em;
42 |       background-color: rgb(0 0 0 / 0.5);
43 |       color: #fff;
44 |       text-align: right;
45 |     }
46 |   </style>
47 | </head>
48 | 
49 | <body>
50 |   <div class="portfolio">
51 |     <figure class="featured">
52 |       <img src="images/monkey.jpg" alt="monkey" />
53 |       <figcaption>Monkey</figcaption>
54 |     </figure>
55 |     <figure>
56 |       <img src="images/eagle.jpg" alt="eagle" />
57 |       <figcaption>Eagle</figcaption>
58 |     </figure>
59 |     <figure class="featured">
60 |       <img src="images/bird.jpg" alt="bird" />
61 |       <figcaption>Bird</figcaption>
62 |     </figure>
63 |     <figure>
64 |       <img src="images/bear.jpg" alt="bear" />
65 |       <figcaption>Bear</figcaption>
66 |     </figure>
67 |     <figure class="featured">
68 |       <img src="images/swan.jpg" alt="swan" />
69 |       <figcaption>Swan</figcaption>
70 |     </figure>
71 |     <figure>
72 |       <img src="images/elephants.jpg" alt="elephants" />
73 |       <figcaption>Elephants</figcaption>
74 |     </figure>
75 |     <figure>
76 |       <img src="images/owl.jpg" alt="owl" />
77 |       <figcaption>Owl</figcaption>
78 |     </figure>
79 |   </div>
80 | </body>
81 | 


--------------------------------------------------------------------------------
/ch05/listing-5.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* styles to be added in subsequent listings */
 5 |   </style>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div class="author-bios">
10 |     <div class="card">
11 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
12 |       <div>
13 |         <p>
14 |           A British writer and physician who created the fictional detective
15 |           Sherlock Holmes.
16 |         </p>
17 |       </div>
18 |       <div class="read-more"><a href="/conan-doyle"> Read more </a></div>
19 |     </div>
20 |     <div class="card">
21 |       <h3>Mark Twain</h3>
22 |       <div>
23 |         <p>
24 |           An American author famous for <i>The Adventures of Tom Sawyer</i> and
25 |           <i>Adventures of Huckleberry Finn</i>. He has been called “the father
26 |           of American literature.”
27 |         </p>
28 |       </div>
29 |       <div class="read-more"><a href="/mark-twain"> Read more </a></div>
30 |     </div>
31 |     <div class="card">
32 |       <h3>Homer</h3>
33 |       <div>
34 |         <p>
35 |           Author of the Greek epic poems <i>The Iliad</i> and
36 |           <i>The Odyssey</i>.
37 |         </p>
38 |       </div>
39 |       <div class="read-more"><a href="/homer"> Read more </a></div>
40 |     </div>
41 |   </div>
42 | </body>
43 | 


--------------------------------------------------------------------------------
/ch05/listing-5.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .author-bios {
16 |       display: grid;
17 |       grid-template-columns: repeat(3, 1fr);
18 |       gap: 1em;
19 |       max-inline-size: 800px;
20 |       margin-inline: auto;
21 |     }
22 | 
23 |     .card {
24 |       padding: 1rem;
25 |       border-radius: 0.5rem;
26 |       background-color: #fff;
27 |     }
28 | 
29 |     .card > h3 {
30 |       margin-block: 0;
31 |       padding-block-end: 0.5rem;
32 |       border-block-end: 1px solid #eee;
33 |     }
34 | 
35 |     .read-more {
36 |       margin-block-start: 1em;
37 |       text-align: right;
38 |     }
39 |   </style>
40 | </head>
41 | 
42 | <body>
43 |   <div class="author-bios">
44 |     <div class="card">
45 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
46 |       <div>
47 |         <p>
48 |           A British writer and physician who created the fictional detective
49 |           Sherlock Holmes.
50 |         </p>
51 |       </div>
52 |       <div class="read-more"><a href="/conan-doyle"> Read more </a></div>
53 |     </div>
54 |     <div class="card">
55 |       <h3>Mark Twain</h3>
56 |       <div>
57 |         <p>
58 |           An American author famous for <i>The Adventures of Tom Sawyer</i> and
59 |           <i>Adventures of Huckleberry Finn</i>. He has been called “the father
60 |           of American literature.”
61 |         </p>
62 |       </div>
63 |       <div class="read-more"><a href="/mark-twain"> Read more </a></div>
64 |     </div>
65 |     <div class="card">
66 |       <h3>Homer</h3>
67 |       <div>
68 |         <p>
69 |           Author of the Greek epic poems <i>The Iliad</i> and
70 |           <i>The Odyssey</i>.
71 |         </p>
72 |       </div>
73 |       <div class="read-more"><a href="/homer"> Read more </a></div>
74 |     </div>
75 |   </div>
76 | </body>
77 | 


--------------------------------------------------------------------------------
/ch05/listing-5.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       background-color: #eee;
12 |       font-family: Helvetica, Arial, sans-serif;
13 |     }
14 | 
15 |     .author-bios {
16 |       display: grid;
17 |       grid-template-columns: repeat(3, 1fr);
18 |       gap: 1em;
19 |       max-inline-size: 800px;
20 |       margin-inline: auto;
21 |     }
22 | 
23 |     .card {
24 |       display: grid;
25 |       gap: 0;
26 |       grid-template-rows: max-content auto max-content;
27 |       grid-template-rows: subgrid;
28 |       grid-row: span 3;
29 |       padding: 1rem;
30 |       border-radius: 0.5rem;
31 |       background-color: #fff;
32 |     }
33 | 
34 |     .card > h3 {
35 |       align-self: end;
36 |       margin-block: 0;
37 |       padding-block-end: 0.5rem;
38 |       border-block-end: 1px solid #eee;
39 |     }
40 | 
41 |     .read-more {
42 |       margin-block-start: 1em;
43 |       text-align: right;
44 |     }
45 |   </style>
46 | </head>
47 | 
48 | <body>
49 |   <div class="author-bios">
50 |     <div class="card">
51 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
52 |       <div>
53 |         <p>
54 |           A British writer and physician who created the fictional detective
55 |           Sherlock Holmes.
56 |         </p>
57 |       </div>
58 |       <div class="read-more"><a href="/conan-doyle"> Read more </a></div>
59 |     </div>
60 |     <div class="card">
61 |       <h3>Mark Twain</h3>
62 |       <div>
63 |         <p>
64 |           An American author famous for <i>The Adventures of Tom Sawyer</i> and
65 |           <i>Adventures of Huckleberry Finn</i>. He has been called “the father
66 |           of American literature.”
67 |         </p>
68 |       </div>
69 |       <div class="read-more"><a href="/mark-twain"> Read more </a></div>
70 |     </div>
71 |     <div class="card">
72 |       <h3>Homer</h3>
73 |       <div>
74 |         <p>
75 |           Author of the Greek epic poems <i>The Iliad</i> and
76 |           <i>The Odyssey</i>.
77 |         </p>
78 |       </div>
79 |       <div class="read-more"><a href="/homer"> Read more </a></div>
80 |     </div>
81 |   </div>
82 | </body>
83 | 


--------------------------------------------------------------------------------
/ch06/listing-6.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       /* styles to be added in subsequent listings */
 6 |     </style>
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <header class="top-banner">
11 |       <div class="top-banner-inner">
12 |         <p>
13 |           Find out what's going on at Wombat Coffee each month. Sign up for our
14 |           newsletter:
15 |           <button id="open">Sign up</button>
16 |         </p>
17 |       </div>
18 |     </header>
19 |     <div class="modal" id="modal" role="dialog" aria-modal="true">
20 |       <div class="modal-backdrop"></div>
21 |       <div class="modal-body">
22 |         <button class="modal-close" id="close">close</button>
23 |         <h2>Wombat Newsletter</h2>
24 |         <p>Sign up for our monthly newsletter. No spam. We promise!</p>
25 |         <form>
26 |           <p>
27 |             <label for="email">Email address:</label>
28 |             <input type="text" name="email" />
29 |           </p>
30 |           <p><button type="submit">Submit</button></p>
31 |         </form>
32 |       </div>
33 |     </div>
34 |     <main class="container">
35 |       <h1>Wombat Coffee Roasters</h1>
36 |     </main>
37 | 
38 |     <script type="text/javascript">
39 |       const button = document.getElementById("open");
40 |       const close = document.getElementById("close");
41 |       const modal = document.getElementById("modal");
42 | 
43 |       button.addEventListener("click", function (event) {
44 |         modal.classList.add("is-open");
45 |       });
46 | 
47 |       close.addEventListener("click", function (event) {
48 |         modal.classList.remove("is-open");
49 |       });
50 |     </script>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/ch06/listing-6.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     /* styles to be added in next listing */
 5 |   </style>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div class="box one positioned">
10 |     one
11 |     <div class="absolute">nested</div>
12 |   </div>
13 |   <div class="box two positioned">two</div>
14 |   <div class="box three">three</div>
15 | </body>
16 | 


--------------------------------------------------------------------------------
/ch06/listing-6.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     *,
 5 |     *::before,
 6 |     *::after {
 7 |       box-sizing: border-box;
 8 |     }
 9 | 
10 |     body {
11 |       font-family: Helvetica, Arial, sans-serif;
12 |       margin: 40px;
13 |     }
14 | 
15 |     .box {
16 |       display: inline-block;
17 |       height: 200px;
18 |       width: 200px;
19 |       line-height: 200px;
20 |       text-align: center;
21 |       border: 2px solid black;
22 |       background-color: #ea5;
23 |       margin-left: -60px;
24 |       vertical-align: top;
25 |     }
26 | 
27 |     .one {
28 |       margin-left: 0;
29 |     }
30 | 
31 |     .two {
32 |       margin-top: 30px;
33 |     }
34 | 
35 |     .three {
36 |       margin-top: 60px;
37 |     }
38 | 
39 |     .positioned {
40 |       position: relative;
41 |       background-color: #5ae;
42 |       z-index: 1;
43 |     }
44 | 
45 |     .absolute {
46 |       position: absolute;
47 |       top: 1em;
48 |       right: 1em;
49 |       background-color: #fff;
50 |       border: 2px dashed #888;
51 |       z-index: 100;
52 |       line-height: initial;
53 |       padding: 1em;
54 |     }
55 |   </style>
56 | </head>
57 | 
58 | <body>
59 |   <div class="box one positioned">
60 |     one
61 |     <div class="absolute">nested</div>
62 |   </div>
63 |   <div class="box two positioned">two</div>
64 |   <div class="box three">three</div>
65 | </body>
66 | 


--------------------------------------------------------------------------------
/ch07/coffee-beans-medium.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch07/coffee-beans-medium.jpg


--------------------------------------------------------------------------------
/ch07/coffee-beans-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch07/coffee-beans-small.jpg


--------------------------------------------------------------------------------
/ch07/coffee-beans.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch07/coffee-beans.jpg


--------------------------------------------------------------------------------
/ch07/listing-7.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>Wombat Coffee Roasters</title>
 6 |     <style>
 7 |       /* styles to be added in subsequent listings */
 8 |     </style>
 9 |   </head>
10 | 
11 |   <body>
12 |     <header id="header" class="page-header">
13 |       <div class="title">
14 |         <h1>Wombat Coffee Roasters</h1>
15 |         <div class="slogan">We love coffee</div>
16 |       </div>
17 |     </header>
18 | 
19 |     <nav class="menu" id="main-menu">
20 |       <button class="menu-toggle" id="toggle-menu">toggle menu</button>
21 |       <div class="menu-dropdown">
22 |         <ul class="nav-menu">
23 |           <li><a href="/about.html">About</a></li>
24 |           <li><a href="/shop.html">Shop</a></li>
25 |           <li><a href="/menu.html">Menu</a></li>
26 |           <li><a href="/brew.html">Brew</a></li>
27 |         </ul>
28 |       </div>
29 |     </nav>
30 | 
31 |     <aside id="hero" class="hero">
32 |       Welcome to Wombat Coffee Roasters! We are passionate about our craft,
33 |       striving to bring you the best hand-crafted coffee in the city.
34 |     </aside>
35 | 
36 |     <main class="main">
37 |       <section class="column">
38 |         <h2 class="subtitle">Single-origin</h2>
39 |         <p>
40 |           We have built partnerships with small farms around the world to
41 |           hand-select beans at the peak of season. We then carefully roast in
42 |           <a href="/batch-size.html">small batches</a>
43 |           to maximize their potential.
44 |         </p>
45 |       </section>
46 |       <section class="column">
47 |         <h2 class="subtitle">Blends</h2>
48 |         <p>
49 |           Our tasters have put together a selection of carefully balanced
50 |           blends. Our famous
51 |           <a href="/house-blend.html">house blend</a>
52 |           is available year round.
53 |         </p>
54 |       </section>
55 |       <section class="column">
56 |         <h2 class="subtitle">Brewing Equipment</h2>
57 |         <p>
58 |           We offer our favorite kettles, French presses, and pour-over cones.
59 |           Come to one of our <a href="/classes.html">brewing classes</a> to
60 |           learn how to brew the perfect pour-over cup.
61 |         </p>
62 |       </section>
63 |     </main>
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/ch07/listing-7.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Responsive table example</title>
 7 |     <style>
 8 |       table {
 9 |         border-collapse: collapse;
10 |       }
11 | 
12 |       th,
13 |       td {
14 |         border: 1px solid black;
15 |         padding: 0.3em 0.5em;
16 |       }
17 | 
18 |       table {
19 |         inline-size: 100%;
20 |       }
21 | 
22 |       @media (max-width: 480px) {
23 |         table,
24 |         thead,
25 |         tbody,
26 |         tr,
27 |         th,
28 |         td {
29 |           display: block;
30 |         }
31 | 
32 |         thead tr {
33 |           position: absolute;
34 |           top: -9999px;
35 |           left: -9999px;
36 |         }
37 | 
38 |         tr {
39 |           margin-block-end: 1em;
40 |         }
41 |       }
42 |     </style>
43 |   </head>
44 | 
45 |   <body>
46 |     <table>
47 |       <thead>
48 |         <tr>
49 |           <th>Country</th>
50 |           <th>Region/Farm</th>
51 |           <th>Tasting notes</th>
52 |           <th>Price</th>
53 |         </tr>
54 |       </thead>
55 |       <tbody>
56 |         <tr>
57 |           <td>Nicaragua</td>
58 |           <td>Matagulpa</td>
59 |           <td>Dark chocolate, almond</td>
60 |           <td>$13.95</td>
61 |         </tr>
62 |         <tr>
63 |           <td>Ethiopia</td>
64 |           <td>Yirgacheffe</td>
65 |           <td>Sweet tea, blueberry</td>
66 |           <td>$15.95</td>
67 |         </tr>
68 |         <tr>
69 |           <td>Ethiopia</td>
70 |           <td>Nano Challa</td>
71 |           <td>Tangerine, jasmine</td>
72 |           <td>$14.95</td>
73 |         </tr>
74 |       </tbody>
75 |     </table>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/ch07/listing-7.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <body>
 4 |     <img
 5 |       alt="A white coffee mug on a bed of coffee beans"
 6 |       src="coffee-beans-small.jpg"
 7 |       srcset="
 8 |         coffee-beans-small.jpg   560w,
 9 |         coffee-beans-medium.jpg  800w,
10 |         coffee-beans.jpg        1280w
11 |       "
12 |     />
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/ch08/listing-8.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer global {
 6 |         :root {
 7 |           --brand-blue: #0063cc;
 8 |         }
 9 | 
10 |         a:any-link {
11 |           color: var(--brand-blue);
12 |           font-weight: bold;
13 |         }
14 |       }
15 | 
16 |       @layer theme {
17 |         .button {
18 |           display: inline-block;
19 |           padding: 0.5rem;
20 |           color: white;
21 |           background-color: var(--brand-blue);
22 |           font-weight: normal;
23 |           text-decoration: none;
24 |         }
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <p><a href="#">normal link</a></p>
30 |     <p><a href="#" class="button">Button link</a></p>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/ch08/listing-8.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer {
 6 |         :root {
 7 |           --brand-blue: #0063cc;
 8 |         }
 9 | 
10 |         a:any-link {
11 |           color: var(--brand-blue);
12 |           font-weight: bold;
13 |         }
14 |       }
15 | 
16 |       @layer {
17 |         .button {
18 |           display: inline-block;
19 |           padding: 0.5rem;
20 |           color: white;
21 |           background-color: var(--brand-blue);
22 |           font-weight: normal;
23 |           text-decoration: none;
24 |         }
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <p><a href="#">normal link</a></p>
30 |     <p><a href="#" class="button">Button link</a></p>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/ch08/listing-8.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer global {
 6 |         :root {
 7 |           --brand-blue: #0063cc;
 8 |         }
 9 |       }
10 | 
11 |       @layer theme {
12 |         .button {
13 |           display: inline-block;
14 |           padding: 0.5rem;
15 |           color: white;
16 |           background-color: var(--brand-blue);
17 |           font-weight: normal;
18 |           text-decoration: none;
19 |         }
20 |       }
21 | 
22 |       @layer global {
23 |         a:any-link {
24 |           color: var(--brand-blue);
25 |           font-weight: bold;
26 |         }
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <p><a href="#">normal link</a></p>
32 |     <p><a href="#" class="button">Button link</a></p>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/ch08/listing-8.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer reset {
 6 |         @media (prefers-reduced-motion: reduce) {
 7 |           *,
 8 |           *::before,
 9 |           *::after {
10 |             animation-duration: 0.01ms !important;
11 |             animation-iteration-count: 1 !important;
12 |             transition-duration: 0.01ms !important;
13 |             scroll-behavior: auto !important;
14 |           }
15 |         }
16 |       }
17 |     </style>
18 |   </head>
19 |   <body></body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/ch08/listing-8.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer global, theme;
 6 | 
 7 |       @layer global {
 8 |         :root {
 9 |           --brand-blue: #0063cc;
10 |         }
11 | 
12 |         a:any-link {
13 |           color: var(--brand-blue);
14 |           font-weight: bold;
15 |         }
16 |       }
17 | 
18 |       @layer theme {
19 |         .button {
20 |           display: inline-block;
21 |           padding: 0.5rem;
22 |           color: white;
23 |           background-color: var(--brand-blue);
24 |           font-weight: normal;
25 |           text-decoration: none;
26 |         }
27 | 
28 |         .blog-content a:any-link {
29 |           display: revert-layer;
30 |           padding: revert-layer;
31 |           color: revert-layer;
32 |           background-color: revert-layer;
33 |           font-weight: revert-layer;
34 |           text-decoration: revert-layer;
35 | 
36 |           /* or use all: */
37 |           all: revert-layer;
38 |         }
39 |       }
40 |     </style>
41 |   </head>
42 |   <body>
43 |     <div class="blog-content">
44 |       <p><a class="button" href="#">normal link</a></p>
45 |     </div>
46 |     <p><a class="button" href="#">A button link outside blog content</a></p>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/ch08/listing-8.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer reset, theme, global, layout, modules, utilities;
 6 | 
 7 |       @layer reset {
 8 |         *,
 9 |         *::before,
10 |         *::after {
11 |           box-sizing: border-box;
12 |         }
13 | 
14 |         body {
15 |           margin: unset;
16 |         }
17 | 
18 |         button,
19 |         input,
20 |         textarea,
21 |         select {
22 |           font: inherit;
23 |         }
24 | 
25 |         img,
26 |         picture,
27 |         svg,
28 |         canvas {
29 |           display: block;
30 |           max-inline-size: 100%;
31 |           height: auto;
32 |         }
33 | 
34 |         @media (prefers-reduced-motion: reduce) {
35 |           *,
36 |           *::before,
37 |           *::after {
38 |             animation-duration: 0.01ms !important;
39 |             animation-iteration-count: 1 !important;
40 |             transition-duration: 0.01ms !important;
41 |             scroll-behavior: auto !important;
42 |           }
43 |         }
44 |       }
45 |     </style>
46 |   </head>
47 |   <body>
48 |     <h1>Example heading</h1>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/ch08/listing-8.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       @layer reset, theme, global, layout, modules, utilities;
 6 | 
 7 |       @layer reset {
 8 |         *,
 9 |         *::before,
10 |         *::after {
11 |           box-sizing: border-box;
12 |         }
13 | 
14 |         body {
15 |           margin: unset;
16 |         }
17 | 
18 |         button,
19 |         input,
20 |         textarea,
21 |         select {
22 |           font: inherit;
23 |         }
24 | 
25 |         img,
26 |         picture,
27 |         svg,
28 |         canvas {
29 |           display: block;
30 |           max-inline-size: 100%;
31 |           height: auto;
32 |         }
33 | 
34 |         @media (prefers-reduced-motion: reduce) {
35 |           *,
36 |           *::before,
37 |           *::after {
38 |             animation-duration: 0.01ms !important;
39 |             animation-iteration-count: 1 !important;
40 |             transition-duration: 0.01ms !important;
41 |             scroll-behavior: auto !important;
42 |           }
43 |         }
44 |       }
45 | 
46 |       @layer theme {
47 |         :root {
48 |           --brand-color: #0063cc;
49 |           --background-color-1: #edf3fa;
50 |           --background-color-2: #c6cdd5;
51 |           --foreground-color-1: #39434d;
52 |           --foreground-color-2: #5a636d;
53 |           --font-main: "Helvetica Neue", "Nimbus Sans", Arial, sans-serif;
54 |           --font-heading: Georgia, sans-serif;
55 | 
56 |           accent-color: var(--brand-color);
57 |           color-scheme: light;
58 |         }
59 |       }
60 |     </style>
61 |   </head>
62 |   <body>
63 |     <h1>Example heading</h1>
64 |     <form>
65 |       <label><input type="checkbox" /> A checkbox with the accent color</label>
66 |     </form>
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/ch08/listing-8.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       :root {
 6 |         --brand-blue: #0063cc;
 7 |       }
 8 | 
 9 |       a:where(:any-link) {
10 |         color: var(--brand-blue);
11 |         font-weight: bold;
12 |       }
13 | 
14 |       .button {
15 |         display: inline-block;
16 |         padding: 0.5rem;
17 |         color: white;
18 |         background-color: var(--brand-blue);
19 |         font-weight: normal;
20 |         text-decoration: none;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <p><a href="#">normal link</a></p>
26 |     <p><a href="#" class="button">Button link</a></p>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/ch08/listing-8.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       body {
 6 |         background-color: #eee;
 7 |       }
 8 | 
 9 |       .card {
10 |         padding: 1rem;
11 |         border-radius: 0.5rem;
12 |         background-color: #fff;
13 |       }
14 | 
15 |       .card > h3 {
16 |         margin-block: 0;
17 |         border-block-end: 1px solid #eee;
18 |       }
19 | 
20 |       .card .card-body {
21 |         padding-block: 1em;
22 |       }
23 |     </style>
24 |   </head>
25 |   <body>
26 |     <div class="card">
27 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
28 |       <div class="card-body">
29 |         <p>
30 |           A British writer and physician who created the fictional detective
31 |           Sherlock Holmes.
32 |         </p>
33 |       </div>
34 |     </div>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/ch08/listing-8.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       body {
 6 |         background-color: #eee;
 7 |       }
 8 | 
 9 |       .card {
10 |         padding: 1rem;
11 |         border-radius: 0.5rem;
12 |         background-color: #fff;
13 | 
14 |         > h3 {
15 |           margin-block: 0;
16 |           border-block-end: 1px solid #eee;
17 |         }
18 | 
19 |         .card-body {
20 |           padding-block: 1em;
21 |         }
22 |       }
23 |     </style>
24 |   </head>
25 |   <body>
26 |     <div class="card">
27 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
28 |       <div class="card-body">
29 |         <p>
30 |           A British writer and physician who created the fictional detective
31 |           Sherlock Holmes.
32 |         </p>
33 |       </div>
34 |     </div>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/ch08/listing-8.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       body {
 7 |         background-color: #eee;
 8 |       }
 9 | 
10 |       .card {
11 |         padding: 1rem;
12 |         border-radius: 0.5rem;
13 |         background-color: #fff;
14 | 
15 |         .homepage & {
16 |           background-color: #ccc;
17 |         }
18 |       }
19 |     </style>
20 |   </head>
21 |   <body class="homepage">
22 |     <div class="card">
23 |       <h3>Sir Arthur Ignatius Conan Doyle</h3>
24 |       <div class="card-body">
25 |         <p>
26 |           A British writer and physician who created the fictional detective
27 |           Sherlock Holmes.
28 |         </p>
29 |       </div>
30 |     </div>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/ch08/listing-8.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       :root {
 7 |         --font-heading: Georgia, sans-serif;
 8 |       }
 9 | 
10 |       h1 {
11 |         font-family: var(--font-heading);
12 |         font-size: 2.2rem;
13 | 
14 |         @media (min-width: 800px) {
15 |           font-size: 2.6rem;
16 |         }
17 | 
18 |         @media (min-width: 1200px) {
19 |           font-size: 3rem;
20 |         }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body class="homepage">
25 |     <h1>Example heading</h1>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/ch08/listing-8.18.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       input {
 7 |         @layer base {
 8 |           font: inherit;
 9 |           border: 2px solid #999;
10 |         }
11 | 
12 |         @layer modules {
13 |           padding: 5px 10px;
14 | 
15 |           @supports selector(:user-invalid) {
16 |             border-color: green;
17 | 
18 |             &:user-invalid {
19 |               border-color: red;
20 |             }
21 |           }
22 |         }
23 |       }
24 |     </style>
25 |   </head>
26 |   <body class="homepage">
27 |     <input type="input" required />
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch08/listing-8.19.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       h1 {
 7 |         @media (min-width: 800px) {
 8 |           font-size: 2.6rem;
 9 |         }
10 | 
11 |         font-size: 2.2rem;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body class="homepage">
16 |     <h1>Example heading</h1>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/ch09/listing-9.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 |     </style>
43 |   </head>
44 | 
45 |   <body></body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/ch09/listing-9.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       /* module styles to be added in next listing */
44 |     </style>
45 |   </head>
46 | 
47 |   <body>
48 |     <div class="message">Save successful</div>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/ch09/listing-9.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       @layer modules {
44 |         .message {
45 |           padding: 0.8em 1.2em;
46 |           border-radius: 0.2em;
47 |           border: 1px solid #265559;
48 |           color: #265559;
49 |           background-color: #e0f0f2;
50 |         }
51 |       }
52 |     </style>
53 |   </head>
54 | 
55 |   <body>
56 |     <div class="message">Save successful</div>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/ch09/listing-9.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       @layer modules {
44 |         .message {
45 |           padding: 0.8em 1.2em;
46 |           border-radius: 0.2em;
47 |           border: 1px solid #265559;
48 |           color: #265559;
49 |           background-color: #e0f0f2;
50 |         }
51 | 
52 |         .message--success {
53 |           color: #2f5926;
54 |           border-color: #2f5926;
55 |           background-color: #cfe8c9;
56 |         }
57 | 
58 |         .message--warning {
59 |           color: #594826;
60 |           border-color: #594826;
61 |           background-color: #e8dec9;
62 |         }
63 | 
64 |         .message--error {
65 |           color: #59262f;
66 |           border-color: #59262f;
67 |           background-color: #e8c9cf;
68 |         }
69 |       }
70 |     </style>
71 |   </head>
72 | 
73 |   <body>
74 |     <div class="message message--success">Save successful</div>
75 | 
76 |     <div class="message message--warning">Password strength: Weak</div>
77 | 
78 |     <div class="message message--error">Invalid password</div>
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/ch09/listing-9.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       @layer modules {
44 |         .media {
45 |           display: flex;
46 |           gap: 1.5em;
47 |           padding: 1.5rem;
48 |           background-color: #eee;
49 |           border-radius: 5px;
50 |         }
51 | 
52 |         .media__image {
53 |           align-self: start;
54 |         }
55 | 
56 |         .media__body {
57 |           overflow: auto;
58 |           margin-block-start: 0;
59 |         }
60 | 
61 |         .media__body > h4 {
62 |           margin-block-start: 0;
63 |           color: #333;
64 |         }
65 | 
66 |         /* restrict width for demo purposes */
67 |         .wrapper {
68 |           max-inline-size: 600px;
69 |           margin: 2em auto;
70 |         }
71 |       }
72 |     </style>
73 |   </head>
74 | 
75 |   <body>
76 |     <div class="wrapper">
77 |       <div class="media">
78 |         <img
79 |           class="media__image"
80 |           src="runner.png"
81 |           alt="Silhouette of a person running"
82 |         />
83 |         <div class="media__body">
84 |           <h4>Strength</h4>
85 |           <p>
86 |             Strength training is an important part of injury prevention. Focus
87 |             on your core&mdash; especially your abs and glutes.
88 |           </p>
89 |         </div>
90 |       </div>
91 |     </div>
92 |   </body>
93 | </html>
94 | 


--------------------------------------------------------------------------------
/ch09/listing-9.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       @layer modules {
44 |         .media {
45 |           display: flex;
46 |           gap: 1.5em;
47 |           padding: 1.5rem;
48 |           background-color: #eee;
49 |           border-radius: 5px;
50 |         }
51 | 
52 |         .media__image {
53 |           align-self: start;
54 |         }
55 | 
56 |         .media__body {
57 |           overflow: auto;
58 |           margin-block-start: 0;
59 |         }
60 | 
61 |         .media__body > h4 {
62 |           margin-block-start: 0;
63 |           color: #333;
64 |         }
65 | 
66 |         .media--right {
67 |           flex-direction: row-reverse;
68 |         }
69 | 
70 |         /* restrict width for demo purposes */
71 |         .wrapper {
72 |           max-inline-size: 600px;
73 |           margin: 2em auto;
74 |         }
75 |       }
76 |     </style>
77 |   </head>
78 | 
79 |   <body>
80 |     <div class="wrapper">
81 |       <div class="media media--right">
82 |         <img
83 |           class="media__image"
84 |           src="runner.png"
85 |           alt="Silhouette of a person running"
86 |         />
87 |         <div class="media__body">
88 |           <h4>Strength</h4>
89 |           <p>
90 |             Strength training is an important part of injury prevention. Focus
91 |             on your core&mdash; especially your abs and glutes.
92 |           </p>
93 |         </div>
94 |       </div>
95 |     </div>
96 |   </body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/ch09/listing-9.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       /* dropdown styles to be added in next listing */
44 |     </style>
45 |   </head>
46 | 
47 |   <body>
48 |     <div class="dropdown">
49 |       <button class="dropdown__toggle">Main Menu</button>
50 |       <div class="dropdown__drawer">
51 |         <ul class="menu">
52 |           <li><a href="/">Home</a></li>
53 |           <li><a href="/coffees">Coffees</a></li>
54 |           <li><a href="/brewers">Brewers</a></li>
55 |           <li><a href="/specials">Specials</a></li>
56 |           <li><a href="/about">About us</a></li>
57 |         </ul>
58 |       </div>
59 |     </div>
60 | 
61 |     <script type="module">
62 |       var toggle = document.querySelector(".dropdown__toggle");
63 |       toggle.addEventListener("click", function (event) {
64 |         event.preventDefault();
65 |         var dropdown = event.target.parentNode;
66 |         dropdown.classList.toggle("is-open");
67 |       });
68 |     </script>
69 |   </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/ch09/listing-9.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 | 
43 |       @layer modules {
44 |         @scope (.media) {
45 |           :scope {
46 |             display: flex;
47 |             gap: 1.5em;
48 |             padding: 1.5rem;
49 |             background-color: #eee;
50 |             border-radius: 5px;
51 |           }
52 | 
53 |           :scope.right {
54 |             flex-direction: row-reverse;
55 |           }
56 | 
57 |           img {
58 |             align-self: start;
59 |           }
60 | 
61 |           .body {
62 |             overflow: auto;
63 |             margin-block-start: 0;
64 |           }
65 | 
66 |           h4 {
67 |             margin-block-start: 0;
68 |             color: #333;
69 |           }
70 |         }
71 |       }
72 |     </style>
73 |   </head>
74 | 
75 |   <body>
76 |     <div class="media">
77 |       <img src="runner.png" alt="Silhouette of a person running" />
78 |       <div class="body">
79 |         <h4>Strength</h4>
80 |         <p>
81 |           Strength training is an important part of injury prevention. Focus on
82 |           your core&mdash; especially your abs and glutes.
83 |         </p>
84 |       </div>
85 |     </div>
86 |   </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/ch09/listing-9.20.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, global, modules;
 8 | 
 9 |       @layer reset {
10 |         *,
11 |         *::before,
12 |         *::after {
13 |           box-sizing: border-box;
14 |         }
15 | 
16 |         body {
17 |           margin: unset;
18 |         }
19 | 
20 |         button,
21 |         input,
22 |         textarea,
23 |         select {
24 |           font: inherit;
25 |         }
26 | 
27 |         img,
28 |         picture,
29 |         svg,
30 |         canvas {
31 |           display: block;
32 |           max-width: 100%;
33 |           height: auto;
34 |         }
35 |       }
36 | 
37 |       @layer global {
38 |         body {
39 |           font-family: Helvetica, Arial, sans-serif;
40 |         }
41 |       }
42 |     </style>
43 |   </head>
44 | 
45 |   <body>
46 |     <div class="wrapper">
47 |       <style>
48 |         @scope {
49 |           .message {
50 |             padding: 0.8em 1.2em;
51 |             border-radius: 0.2em;
52 |             border: 1px solid #265559;
53 |             color: #265559;
54 |             background-color: #e0f0f2;
55 |           }
56 |         }
57 |       </style>
58 |       <div class="message">Save successful</div>
59 |     </div>
60 |     <p class="message">This is out of scope.</p>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/ch09/runner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch09/runner.png


--------------------------------------------------------------------------------
/ch10/listing-10.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       /* styles to be added in subsequent listings */
 8 |     </style>
 9 |   </head>
10 |   <body class="l-page">
11 |     <main>
12 |       <h1>Franklin Running Club</h1>
13 |     </main>
14 |     <aside>
15 |       <h3>Running tips</h3>
16 |       <div class="media">
17 |         <img class="media__image" src="runner.png" />
18 |         <div class="media__body">
19 |           <h4>Change it up</h4>
20 |           <p>
21 |             Don't run the same every time you hit the road. Vary your pace, and
22 |             vary the distance of your runs.
23 |           </p>
24 |         </div>
25 |       </div>
26 |     </aside>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/ch10/listing-10.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, layout, modules;
 8 | 
 9 |       @layer base {
10 |         img {
11 |           display: block;
12 |           max-width: 100%;
13 |         }
14 |       }
15 | 
16 |       @layer layout {
17 |         .l-page {
18 |           margin-inline: 1rem;
19 |         }
20 | 
21 |         @media (min-width: 800px) {
22 |           .l-page {
23 |             display: grid;
24 |             gap: 1rem;
25 |             grid-template-columns: 1fr 30%;
26 |           }
27 |         }
28 |       }
29 | 
30 |       @layer modules {
31 |         .media {
32 |           padding: 1.5rem;
33 |           background-color: #eee;
34 |           border-radius: 5px;
35 |         }
36 | 
37 |         .media__image {
38 |           margin-inline: auto;
39 |         }
40 | 
41 |         @media (min-width: 450px) {
42 |           .media {
43 |             display: flex;
44 |             gap: 1.5em;
45 |           }
46 | 
47 |           .media__image {
48 |             align-self: start;
49 |             margin-inline: revert;
50 |           }
51 |         }
52 |       }
53 |     </style>
54 |   </head>
55 |   <body class="l-page">
56 |     <main>
57 |       <h1>Franklin Running Club</h1>
58 |     </main>
59 |     <aside>
60 |       <h3>Running tips</h3>
61 |       <div class="media">
62 |         <img class="media__image" src="runner.png" />
63 |         <div class="media__body">
64 |           <h4>Change it up</h4>
65 |           <p>
66 |             Don't run the same every time you hit the road. Vary your pace, and
67 |             vary the distance of your runs.
68 |           </p>
69 |         </div>
70 |       </div>
71 |     </aside>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/ch10/listing-10.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, layout, modules;
 8 | 
 9 |       @layer base {
10 |         img {
11 |           display: block;
12 |           max-width: 100%;
13 |         }
14 |       }
15 | 
16 |       @layer layout {
17 |         .l-page {
18 |           margin-inline: 1rem;
19 |         }
20 | 
21 |         .l-page > * {
22 |           container: layout / inline-size;
23 |         }
24 | 
25 |         @media (min-width: 800px) {
26 |           .l-page {
27 |             display: grid;
28 |             gap: 1rem;
29 |             grid-template-columns: 1fr 30%;
30 |           }
31 |         }
32 |       }
33 | 
34 |       @layer modules {
35 |         .media {
36 |           padding: 1.5rem;
37 |           background-color: #eee;
38 |           border-radius: 5px;
39 |         }
40 | 
41 |         .media__image {
42 |           margin-inline: auto;
43 |         }
44 | 
45 |         @container layout (width >= 450px) {
46 |           .media {
47 |             display: flex;
48 |             gap: 1.5em;
49 |           }
50 | 
51 |           .media__image {
52 |             align-self: start;
53 |             margin-inline: revert;
54 |           }
55 |         }
56 |       }
57 |     </style>
58 |   </head>
59 |   <body class="l-page">
60 |     <main>
61 |       <h1>Franklin Running Club</h1>
62 |     </main>
63 |     <aside>
64 |       <h3>Running tips</h3>
65 |       <div class="media">
66 |         <img class="media__image" src="runner.png" />
67 |         <div class="media__body">
68 |           <h4>Change it up</h4>
69 |           <p>
70 |             Don't run the same every time you hit the road. Vary your pace, and
71 |             vary the distance of your runs.
72 |           </p>
73 |         </div>
74 |       </div>
75 |     </aside>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/ch10/listing-10.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <style>
 7 |       @layer reset, layout, modules;
 8 | 
 9 |       @layer base {
10 |         img {
11 |           display: block;
12 |           max-width: 100%;
13 |         }
14 |       }
15 | 
16 |       @layer layout {
17 |         .l-page {
18 |           margin-inline: 1rem;
19 |         }
20 | 
21 |         .l-page > * {
22 |           container: layout / inline-size;
23 |         }
24 | 
25 |         @media (min-width: 800px) {
26 |           .l-page {
27 |             display: grid;
28 |             gap: 1rem;
29 |             grid-template-columns: 1fr 30%;
30 |           }
31 |         }
32 |       }
33 | 
34 |       @layer modules {
35 |         .media {
36 |           padding: 1.5rem;
37 |           background-color: #eee;
38 |           border-radius: 5px;
39 |         }
40 | 
41 |         .media__image {
42 |           margin-inline: auto;
43 |         }
44 | 
45 |         .media__body {
46 |           container: layout / inline-size;
47 |           flex-grow: 1;
48 |         }
49 | 
50 |         @container layout (width >= 450px) {
51 |           .media {
52 |             display: flex;
53 |             gap: 1.5em;
54 |           }
55 | 
56 |           .media__image {
57 |             align-self: start;
58 |             margin-inline: revert;
59 |           }
60 |         }
61 |       }
62 |     </style>
63 |   </head>
64 |   <body class="l-page">
65 |     <main>
66 |       <h1>Franklin Running Club</h1>
67 |     </main>
68 |     <aside>
69 |       <h3>Running tips</h3>
70 |       <div class="media">
71 |         <img class="media__image" src="runner.png" />
72 |         <div class="media__body">
73 |           <h4>Change it up</h4>
74 |           <p>
75 |             Don't run the same every time you hit the road. Vary your pace, and
76 |             vary the distance of your runs.
77 |           </p>
78 |         </div>
79 |       </div>
80 |     </aside>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/ch10/race.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch10/race.jpg


--------------------------------------------------------------------------------
/ch10/runner-hill.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch10/runner-hill.jpg


--------------------------------------------------------------------------------
/ch10/runner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch10/runner.png


--------------------------------------------------------------------------------
/ch10/shoe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch10/shoe.jpg


--------------------------------------------------------------------------------
/ch11/collaboration.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch11/collaboration.jpg


--------------------------------------------------------------------------------
/ch11/listing-11.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <style>
 5 |       /* styles to be added in subsequent listings */
 6 |     </style>
 7 |   </head>
 8 |   <body>
 9 |     <nav class="nav-container">
10 |       <div class="nav-container__inner">
11 |         <a class="home-link" href="/">Ink</a>
12 |         <ul class="top-nav">
13 |           <li><a href="/features">Features</a></li>
14 |           <li><a href="/pricing">Pricing</a></li>
15 |           <li><a href="/support">Support</a></li>
16 |           <li class="top-nav__featured"><a href="/login">Login</a></li>
17 |         </ul>
18 |       </div>
19 |     </nav>
20 | 
21 |     <div class="hero">
22 |       <div class="hero__inner">
23 |         <h2>Team collaboration done right</h2>
24 |         <a href="/sign-up" class="button button--cta">Get started</a>
25 |       </div>
26 |     </div>
27 | 
28 |     <div class="container">
29 |       <div class="tile-row">
30 |         <div class="tile">
31 |           <h4>Work together, even if you're apart</h4>
32 |           <p>
33 |             Organize your team conversations into threads. Collaborate together
34 |             on documents in real-time. Use face-to-face
35 |             <a href="/features/video-calling">video calls</a> when typing just
36 |             won't do.
37 |           </p>
38 |           <a href="/collaboration" class="button">Read more</a>
39 |         </div>
40 | 
41 |         <div class="tile">
42 |           <h4>Take it with you</h4>
43 |           <p>
44 |             Ink is available on a wide array of devices, so you can work from
45 |             anywhere:
46 |           </p>
47 |           <ul class="tag-list">
48 |             <li>Web</li>
49 |             <li>iOS</li>
50 |             <li>Android</li>
51 |             <li>Windows Phone</li>
52 |           </ul>
53 |           <a href="/supported-devices" class="button">Read more</a>
54 |         </div>
55 | 
56 |         <div class="tile">
57 |           <h4>Priced right</h4>
58 |           <p>
59 |             Whether you work on a team of three or a three hundred, you'll find
60 |             our tiered pricing reasonable at every level.
61 |           </p>
62 |           <a href="/pricing" class="button">Read more</a>
63 |         </div>
64 |       </div>
65 |     </div>
66 | 
67 |     <footer class="page-footer">
68 |       <div class="page-footer__inner">Copyright &copy; 2024 Ink, Inc.</div>
69 |     </footer>
70 |   </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/ch12/collaboration.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch12/collaboration.jpg


--------------------------------------------------------------------------------
/ch12/open-sans.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch12/open-sans.woff2


--------------------------------------------------------------------------------
/ch13/images/bear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch13/images/bear.jpg


--------------------------------------------------------------------------------
/ch13/images/scratches.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch13/images/scratches.png


--------------------------------------------------------------------------------
/ch13/listing-13.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(to right, white, blue);
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div class="fade"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch13/listing-13.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(90deg, white, blue);
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div class="fade"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch13/listing-13.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(90deg, turquoise, white, blue);
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div class="fade"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch13/listing-13.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(
10 |           90deg,
11 |           turquoise 40%,
12 |           white 40% 60%,
13 |           blue 60%
14 |         );
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div class="fade"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/ch13/listing-13.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 1em;
 8 |         width: 400px;
 9 |         background-image: repeating-linear-gradient(
10 |           -45deg,
11 |           oklch(60% 0.1 257deg) 0px 10px,
12 |           oklch(40% 0.1 257deg) 10px 20px
13 |         );
14 |         border-radius: 0.3em;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div class="fade"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/ch13/listing-13.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(90deg, yellow, blue);
10 |         background-image: linear-gradient(90deg in oklch, yellow, blue);
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div class="fade"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/ch13/listing-13.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: linear-gradient(90deg, yellow, blue);
10 |         background-image: linear-gradient(
11 |           90deg in oklch longer hue,
12 |           yellow,
13 |           blue
14 |         );
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div class="fade"></div>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/ch13/listing-13.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: radial-gradient(white, blue);
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div class="fade"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch13/listing-13.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .fade {
 7 |         height: 200px;
 8 |         width: 400px;
 9 |         background-image: conic-gradient(white, blue);
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div class="fade"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch13/listing-13.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       button {
 7 |         font: inherit;
 8 |       }
 9 | 
10 |       .button {
11 |         padding: 1em;
12 |         border: 0;
13 |         font-family: Helvetica, Arial, sans-serif;
14 |         color: white;
15 |         border-radius: 0.5em;
16 |         background-image: linear-gradient(
17 |           to bottom,
18 |           oklch(57% 0.11 263deg),
19 |           oklch(40% 0.13 263deg)
20 |         );
21 |         box-shadow: 0.1em 0.1em 0.5em oklch(26% 0.07 263deg);
22 |       }
23 | 
24 |       .button:active {
25 |         box-shadow:
26 |           inset 0 0 0.5em oklch(26% 0.07 263deg),
27 |           inset 0 0.5em 1em rgb(0 0 0 / 0.4);
28 |       }
29 |     </style>
30 |   </head>
31 |   <body>
32 |     <button class="button">Sign up now</button>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/ch13/listing-13.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       button {
 7 |         font: inherit;
 8 |       }
 9 | 
10 |       .button {
11 |         padding: 0.8em;
12 |         border: 0;
13 |         font-family: Helvetica, Arial, sans-serif;
14 |         color: white;
15 |         background-color: oklch(57% 0.11 263deg);
16 |         box-shadow: 0 0.2em 0.2em rgb(0 0 0 / 0.15);
17 |       }
18 |       .button:hover {
19 |         background-color: oklch(53% 0.13 263deg);
20 |       }
21 |       .button:active {
22 |         background-color: oklch(40% 0.13 263deg);
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <button class="button">Sign up now</button>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch13/listing-13.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       button {
 7 |         font: inherit;
 8 |       }
 9 | 
10 |       .button {
11 |         padding: 0.8em;
12 |         border: 0;
13 |         border-radius: 0.5em;
14 |         font-family: Helvetica, Arial, sans-serif;
15 |         color: white;
16 |         background-color: oklch(57% 0.11 263deg);
17 |         box-shadow: 0 0.4em oklch(40% 0.13 263deg);
18 |         text-shadow: 1px 1px oklch(40% 0.13 263deg);
19 |       }
20 |       .button:active {
21 |         background-color: oklch(53% 0.13 263deg);
22 |         transform: translateY(0.1em);
23 |         box-shadow: 0 0.3em oklch(40% 0.13 263deg);
24 |       }
25 |     </style>
26 |   </head>
27 |   <body>
28 |     <button class="button">Sign up now</button>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/ch13/listing-13.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .blend {
 7 |         min-height: 70vmin;
 8 |         background-image: url(images/bear.jpg), url(images/bear.jpg);
 9 |         background-size: cover;
10 |         background-repeat: no-repeat;
11 |         background-position: -30svw, 30svw;
12 |         background-blend-mode: multiply;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <div class="blend"></div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/ch13/listing-13.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .blend {
 7 |         min-height: 70vmin;
 8 |         background-image: url("images/bear.jpg");
 9 |         background-color: #148;
10 |         background-size: cover;
11 |         background-repeat: no-repeat;
12 |         background-position: center;
13 |         background-blend-mode: luminosity;
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <div class="blend"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/ch13/listing-13.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .blend {
 7 |         min-height: 70vmin;
 8 |         background-image: url("images/scratches.png"), url("images/bear.jpg");
 9 |         background-size: 200px, cover;
10 |         background-repeat: repeat, no-repeat;
11 |         background-position: center;
12 |         background-blend-mode: soft-light;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <div class="blend"></div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/ch13/listing-13.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <style type="text/css">
 6 |       .blend {
 7 |         background-image: url("images/bear.jpg");
 8 |         background-size: cover;
 9 |         background-position: center;
10 |         padding: 50vmin 0 1em;
11 |       }
12 | 
13 |       .blend > h1 {
14 |         margin: 0;
15 |         font-family: Helvetica, Arial, sans-serif;
16 |         font-size: 6rem;
17 |         text-align: center;
18 |         mix-blend-mode: hard-light;
19 |         background-color: oklch(25% 0.2 25deg);
20 |         color: #808080;
21 |         border: 0.1em solid #ccc;
22 |         border-width: 0.1em 0;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <div class="blend">
28 |       <h1>Ursa major</h1>
29 |     </div>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/ch14/images/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch14/images/bird.jpg


--------------------------------------------------------------------------------
/ch14/images/eagle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch14/images/eagle.jpg


--------------------------------------------------------------------------------
/ch14/images/star-mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch14/images/star-mask.png


--------------------------------------------------------------------------------
/ch14/images/star-mask.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 606 577" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 4 |     <g transform="matrix(1,0,0,1,-59.3963,-42.457)">
 5 |         <g transform="matrix(1,0,0,1,-52.3637,-61.51)">
 6 |             <path d="M414.71,103.967L486.227,324.073L717.66,324.073L530.427,460.106L601.944,680.212L414.71,544.179L227.477,680.212L298.993,460.106L111.76,324.073L343.193,324.073L414.71,103.967Z"/>
 7 |         </g>
 8 |     </g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/ch14/listing-14.01.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       /* styles to be added in next listing */
 7 |     </style>
 8 |   </head>
 9 |   <body>
10 |     <!--
11 |       Bird image by Vincent van Zalinge on Unsplash
12 |       https://unsplash.com/@vincentvanzalinge
13 |     -->
14 |     <img
15 |       src="images/bird.jpg"
16 |       alt="Blue and orange bird perched on a branch"
17 |       width="568"
18 |       height="379"
19 |     />
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/ch14/listing-14.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       img {
 7 |         filter: blur(5px);
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <!--
13 |       Bird image by Vincent van Zalinge on Unsplash
14 |       https://unsplash.com/@vincentvanzalinge
15 |     -->
16 |     <img
17 |       src="images/bird.jpg"
18 |       alt="Blue and orange bird perched on a branch"
19 |       width="568"
20 |       height="379"
21 |     />
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/ch14/listing-14.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 |       .gallery {
12 |         display: grid;
13 |         grid-template-columns: repeat(3, 1fr);
14 |         gap: 20px;
15 |       }
16 | 
17 |       .gallery:hover img {
18 |         filter: blur(2px) grayscale(50%);
19 |       }
20 | 
21 |       .gallery img:hover {
22 |         filter: none;
23 |       }
24 | 
25 |       .gallery img {
26 |         transition: filter 1s;
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <div class="gallery">
32 |       <img
33 |         src="images/bird.jpg"
34 |         alt="Blue and orange bird perched on a branch"
35 |         width="568"
36 |         height="379"
37 |       />
38 |       <img
39 |         src="images/bird.jpg"
40 |         alt="Blue and orange bird perched on a branch"
41 |         width="568"
42 |         height="379"
43 |       />
44 |       <img
45 |         src="images/bird.jpg"
46 |         alt="Blue and orange bird perched on a branch"
47 |         width="568"
48 |         height="379"
49 |       />
50 |       <img
51 |         src="images/bird.jpg"
52 |         alt="Blue and orange bird perched on a branch"
53 |         width="568"
54 |         height="379"
55 |       />
56 |       <img
57 |         src="images/bird.jpg"
58 |         alt="Blue and orange bird perched on a branch"
59 |         width="568"
60 |         height="379"
61 |       />
62 |       <img
63 |         src="images/bird.jpg"
64 |         alt="Blue and orange bird perched on a branch"
65 |         width="568"
66 |         height="379"
67 |       />
68 |     </div>
69 |   </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/ch14/listing-14.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 |       body {
12 |         font-family: Helvetic, Arial, sans-serif;
13 |       }
14 | 
15 |       .box {
16 |         padding: 30px;
17 |         background-image: url(images/bird.jpg);
18 |         background-size: cover;
19 |         background-position: center 30%;
20 |       }
21 | 
22 |       .box__content {
23 |         max-inline-size: 500px;
24 |         margin-inline: auto;
25 |         padding: 50px 30px 70px;
26 |         border-radius: 10px;
27 |         background-color: oklch(100% none none / 0.3);
28 |         -webkit-backdrop-filter: blur(10px);
29 |         backdrop-filter: blur(10px);
30 |       }
31 |     </style>
32 |   </head>
33 |   <body>
34 |     <div class="box">
35 |       <div class="box__content">
36 |         <h1>Common Kingfisher</h1>
37 |         <p>
38 |           The Common Kingfisher is a bird native found in Europe, Asia, and
39 |           north Africa. It has bright blue plumage with an orange belly.
40 |         </p>
41 |       </div>
42 |     </div>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/ch14/listing-14.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .mask {
13 |         width: 300px;
14 |         min-height: 300px;
15 |         background-image: url(images/bird.jpg);
16 |         background-size: cover;
17 |         background-position: 100%;
18 |         -webkit-mask-image: url(images/star-mask.png);
19 |         mask-image: url(images/star-mask.png);
20 |         -webkit-mask-size: 100% 100%;
21 |         mask-size: 100% 100%;
22 |       }
23 |     </style>
24 |   </head>
25 |   <body>
26 |     <div class="mask"></div>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/ch14/listing-14.07.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .mask {
13 |         width: 300px;
14 |         min-height: 300px;
15 |         background-image: url(images/bird.jpg);
16 |         background-size: cover;
17 |         background-position: 100%;
18 |         -webkit-mask-image: linear-gradient(to bottom, transparent, black);
19 |         mask-image: linear-gradient(to bottom, transparent, black);
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <div class="mask"></div>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/ch14/listing-14.08.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .mask {
13 |         width: 300px;
14 |         min-height: 300px;
15 |         background-image: url(images/bird.jpg);
16 |         background-size: cover;
17 |         background-position: 100%;
18 |         -webkit-mask-image: linear-gradient(to bottom, black, white);
19 |         mask-image: linear-gradient(to bottom, black, white);
20 |         mask-mode: luminance;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div class="mask"></div>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/ch14/listing-14.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .clipped {
13 |         clip-path: circle(398px);
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <img
19 |       class="clipped"
20 |       src="images/eagle.jpg"
21 |       alt="Golden Eagle"
22 |       width="796"
23 |       height="529"
24 |     />
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/ch14/listing-14.10b.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .clipped {
13 |         clip-path: circle(229px at 377px 293px);
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <img
19 |       class="clipped"
20 |       src="images/eagle.jpg"
21 |       alt="Golden Eagle"
22 |       width="796"
23 |       height="529"
24 |     />
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/ch14/listing-14.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .clipped {
13 |         clip-path: ellipse(300px 170px at 360px 290px);
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <img
19 |       class="clipped"
20 |       src="images/eagle.jpg"
21 |       alt="Golden Eagle"
22 |       width="796"
23 |       height="529"
24 |     />
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/ch14/listing-14.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .clipped {
13 |         clip-path: polygon(380px 50px, 650px 210px, 520px 500px, 20px 360px);
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <img
19 |       class="clipped"
20 |       src="images/eagle.jpg"
21 |       alt="Golden Eagle"
22 |       width="796"
23 |       height="529"
24 |     />
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/ch14/listing-14.12b.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         body {
 8 |           margin: unset;
 9 |         }
10 |       }
11 | 
12 |       .clipped {
13 |         clip-path: path(
14 |           "M68,312C17,239 117,63 223,62C328,61 409,276 370,319C330,365 118,384 68,312Z"
15 |         );
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <img
21 |       class="clipped"
22 |       src="images/eagle.jpg"
23 |       alt="Golden Eagle"
24 |       width="796"
25 |       height="529"
26 |     />
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/ch14/listing-14.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         * {
 8 |           box-sizing: border-box;
 9 |         }
10 | 
11 |         body {
12 |           margin: unset;
13 |         }
14 | 
15 |         img {
16 |           display: block;
17 |         }
18 |       }
19 | 
20 |       .poem-image {
21 |         float: left;
22 |         margin-right: 15px;
23 |       }
24 | 
25 |       .poem-image > img {
26 |         height: 350px;
27 |         width: 350px;
28 |         object-fit: cover;
29 |       }
30 |     </style>
31 |   </head>
32 |   <body>
33 |     <div>
34 |       <div class="poem-image">
35 |         <img src="images/eagle.jpg" alt="Golden Eagle" />
36 |       </div>
37 |       <h1>Hope is the thing with feathers</h1>
38 |       <p><cite>Emily Dickinson</cite></p>
39 |       <p>
40 |         “Hope” is the thing with feathers<br />
41 |         That perches in the soul,<br />
42 |         And sings the tune without the words,<br />
43 |         And never stops at all,
44 |       </p>
45 |       <p>
46 |         And sweetest in the Gale is heard;<br />
47 |         And sore must be the storm<br />
48 |         That could abash the little bird<br />
49 |         That kept so many warm.
50 |       </p>
51 |       <p>
52 |         I’ve heard it in the chillest land,<br />
53 |         And on the strangest sea;<br />
54 |         Yet, never, in extremity,<br />
55 |         It asked a crumb of me.
56 |       </p>
57 |     </div>
58 |   </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/ch14/listing-14.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         * {
 8 |           box-sizing: border-box;
 9 |         }
10 | 
11 |         body {
12 |           margin: unset;
13 |         }
14 | 
15 |         img {
16 |           display: block;
17 |         }
18 |       }
19 | 
20 |       .poem-image {
21 |         float: left;
22 |         margin-right: 15px;
23 |         --shape: circle(50%);
24 |         clip-path: var(--shape);
25 |         shape-outside: var(--shape);
26 |       }
27 | 
28 |       .poem-image > img {
29 |         height: 350px;
30 |         width: 350px;
31 |         object-fit: cover;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <div>
37 |       <div class="poem-image">
38 |         <img src="images/eagle.jpg" alt="Golden Eagle" />
39 |       </div>
40 |       <h1>Hope is the thing with feathers</h1>
41 |       <p><cite>Emily Dickinson</cite></p>
42 |       <p>
43 |         “Hope” is the thing with feathers<br />
44 |         That perches in the soul,<br />
45 |         And sings the tune without the words,<br />
46 |         And never stops at all,
47 |       </p>
48 |       <p>
49 |         And sweetest in the Gale is heard;<br />
50 |         And sore must be the storm<br />
51 |         That could abash the little bird<br />
52 |         That kept so many warm.
53 |       </p>
54 |       <p>
55 |         I’ve heard it in the chillest land,<br />
56 |         And on the strangest sea;<br />
57 |         Yet, never, in extremity,<br />
58 |         It asked a crumb of me.
59 |       </p>
60 |     </div>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/ch14/listing-14.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         * {
 8 |           box-sizing: border-box;
 9 |         }
10 | 
11 |         body {
12 |           margin: unset;
13 |         }
14 | 
15 |         img {
16 |           display: block;
17 |         }
18 |       }
19 | 
20 |       .poem-image {
21 |         float: left;
22 |         margin-right: 15px;
23 |         shape-outside: margin-box;
24 |         border-radius: 50%;
25 |       }
26 | 
27 |       .poem-image > img {
28 |         height: 350px;
29 |         width: 350px;
30 |         object-fit: cover;
31 |         border-radius: 50%;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <div>
37 |       <div class="poem-image">
38 |         <img src="images/eagle.jpg" alt="Golden Eagle" />
39 |       </div>
40 |       <h1>Hope is the thing with feathers</h1>
41 |       <p><cite>Emily Dickinson</cite></p>
42 |       <p>
43 |         “Hope” is the thing with feathers<br />
44 |         That perches in the soul,<br />
45 |         And sings the tune without the words,<br />
46 |         And never stops at all,
47 |       </p>
48 |       <p>
49 |         And sweetest in the Gale is heard;<br />
50 |         And sore must be the storm<br />
51 |         That could abash the little bird<br />
52 |         That kept so many warm.
53 |       </p>
54 |       <p>
55 |         I’ve heard it in the chillest land,<br />
56 |         And on the strangest sea;<br />
57 |         Yet, never, in extremity,<br />
58 |         It asked a crumb of me.
59 |       </p>
60 |     </div>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/ch14/listing-14.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @layer reset {
 7 |         * {
 8 |           box-sizing: border-box;
 9 |         }
10 | 
11 |         body {
12 |           margin: unset;
13 |         }
14 | 
15 |         img {
16 |           display: block;
17 |         }
18 |       }
19 | 
20 |       .poem-image {
21 |         float: left;
22 |         --gradient: linear-gradient(65deg, black 0 375px, transparent 375px);
23 |         mask: var(--gradient);
24 |         shape-outside: var(--gradient);
25 |         shape-margin: 15px;
26 |       }
27 | 
28 |       .poem-image > img {
29 |         height: 350px;
30 |         object-position: -100px 0;
31 |       }
32 |     </style>
33 |   </head>
34 |   <body>
35 |     <div>
36 |       <div class="poem-image">
37 |         <img src="images/eagle.jpg" alt="Golden Eagle" />
38 |       </div>
39 |       <h1>Hope is the thing with feathers</h1>
40 |       <p><cite>Emily Dickinson</cite></p>
41 |       <p>
42 |         “Hope” is the thing with feathers<br />
43 |         That perches in the soul,<br />
44 |         And sings the tune without the words,<br />
45 |         And never stops at all,
46 |       </p>
47 |       <p>
48 |         And sweetest in the Gale is heard;<br />
49 |         And sore must be the storm<br />
50 |         That could abash the little bird<br />
51 |         That kept so many warm.
52 |       </p>
53 |       <p>
54 |         I’ve heard it in the chillest land,<br />
55 |         And on the strangest sea;<br />
56 |         Yet, never, in extremity,<br />
57 |         It asked a crumb of me.
58 |       </p>
59 |     </div>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/ch15/listing-15.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style>
 5 |       button {
 6 |         padding: 0.3em 1em;
 7 |         border: 0;
 8 |         font-size: 1rem;
 9 |         color: white;
10 |         background-color: oklch(74% 0.11 195deg);
11 |         transition-property: all;
12 |         transition-duration: 0.5s;
13 |       }
14 |       button:hover {
15 |         border-radius: 1em;
16 |         background-color: oklch(55% 0.16 24deg);
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <button type="button">Hover over me</button>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/ch15/listing-15.04.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE >
 2 | <html lang="en">
 3 |   <head>
 4 |     <style>
 5 |       .container {
 6 |         position: relative;
 7 |         height: 50px;
 8 |       }
 9 | 
10 |       .box {
11 |         position: absolute;
12 |         left: 0;
13 |         height: 50px;
14 |         width: 50px;
15 |         background-color: oklch(70% 0.18 145deg);
16 |         transition: all 1s linear;
17 |       }
18 | 
19 |       .container:hover .box {
20 |         left: 400px;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div class="container">
26 |       <div class="box"></div>
27 |     </div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch15/listing-15.05.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE >
 2 | <html lang="en">
 3 |   <head>
 4 |     <style>
 5 |       .container {
 6 |         position: relative;
 7 |         height: 50px;
 8 |       }
 9 | 
10 |       .box {
11 |         position: absolute;
12 |         left: 0;
13 |         height: 50px;
14 |         width: 50px;
15 |         background-color: oklch(70% 0.18 145deg);
16 |         transition: all 1s steps(3);
17 |       }
18 | 
19 |       .container:hover .box {
20 |         left: 400px;
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div class="container">
26 |       <div class="box"></div>
27 |     </div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch15/listing-15.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       @property --hue {
 7 |         syntax: "<angle>";
 8 |         inherits: false;
 9 |         initial-value: 0deg;
10 |       }
11 | 
12 |       button {
13 |         padding: 0.5em 1em;
14 |         border: none;
15 |         color: white;
16 |         --hue: 314deg;
17 |         background-color: oklch(39% 0.1 var(--hue));
18 |         transition: --hue 0.5s linear;
19 |       }
20 | 
21 |       button:hover {
22 |         --hue: 250deg;
23 |       }
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <button type="button">Submit</button>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch16/images/chicken1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch16/images/chicken1.jpg


--------------------------------------------------------------------------------
/ch16/images/chicken2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch16/images/chicken2.jpg


--------------------------------------------------------------------------------
/ch16/images/chicken3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch16/images/chicken3.jpg


--------------------------------------------------------------------------------
/ch16/images/chicken4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch16/images/chicken4.jpg


--------------------------------------------------------------------------------
/ch16/images/home.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- LinearIcons from Generated by IcoMoon.io
3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
6 | <path fill="#ffffff" d="M19.871 12.165l-8.829-9.758c-0.274-0.303-0.644-0.47-1.042-0.47-0 0 0 0 0 0-0.397 0-0.767 0.167-1.042 0.47l-8.829 9.758c-0.185 0.205-0.169 0.521 0.035 0.706 0.096 0.087 0.216 0.129 0.335 0.129 0.136 0 0.272-0.055 0.371-0.165l2.129-2.353v8.018c0 0.827 0.673 1.5 1.5 1.5h11c0.827 0 1.5-0.673 1.5-1.5v-8.018l2.129 2.353c0.185 0.205 0.501 0.221 0.706 0.035s0.221-0.501 0.035-0.706zM12 19h-4v-4.5c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v4.5zM16 18.5c0 0.276-0.224 0.5-0.5 0.5h-2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0-1.5 0.673-1.5 1.5v4.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5v-9.123l5.7-6.3c0.082-0.091 0.189-0.141 0.3-0.141s0.218 0.050 0.3 0.141l5.7 6.3v9.123z"></path>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/ch16/images/members.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- LinearIcons from Generated by IcoMoon.io
 3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
 4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
 6 | <path fill="#ffffff" d="M18.5 18h-11c-0.827 0-1.5-0.673-1.5-1.5 0-0.048 0.011-1.19 0.924-2.315 0.525-0.646 1.241-1.158 2.128-1.522 1.071-0.44 2.4-0.662 3.948-0.662s2.876 0.223 3.948 0.662c0.887 0.364 1.603 0.876 2.128 1.522 0.914 1.125 0.924 2.267 0.924 2.315 0 0.827-0.673 1.5-1.5 1.5zM7 16.503c0.001 0.275 0.225 0.497 0.5 0.497h11c0.275 0 0.499-0.223 0.5-0.497-0.001-0.035-0.032-0.895-0.739-1.734-0.974-1.157-2.793-1.768-5.261-1.768s-4.287 0.612-5.261 1.768c-0.707 0.84-0.738 1.699-0.739 1.734z"></path>
 7 | <path fill="#ffffff" d="M13 11c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4c0 2.206-1.794 4-4 4zM13 4c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z"></path>
 8 | <path fill="#ffffff" d="M4.5 18h-3c-0.827 0-1.5-0.673-1.5-1.5 0-0.037 0.008-0.927 0.663-1.8 0.378-0.505 0.894-0.904 1.533-1.188 0.764-0.34 1.708-0.512 2.805-0.512 0.179 0 0.356 0.005 0.527 0.014 0.276 0.015 0.487 0.25 0.473 0.526s-0.25 0.488-0.526 0.473c-0.153-0.008-0.312-0.012-0.473-0.012-3.894 0-3.997 2.379-4 2.503 0.001 0.274 0.225 0.497 0.5 0.497h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
 9 | <path fill="#ffffff" d="M5 12c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM5 7c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2c0-1.103-0.897-2-2-2z"></path>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/ch16/images/star.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- LinearIcons from Generated by IcoMoon.io
3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
6 | <path fill="#ffffff" d="M15.5 19c-0.082 0-0.164-0.020-0.239-0.061l-5.261-2.869-5.261 2.869c-0.168 0.092-0.373 0.079-0.529-0.032s-0.235-0.301-0.203-0.49l0.958-5.746-3.818-3.818c-0.132-0.132-0.18-0.328-0.123-0.506s0.209-0.31 0.394-0.341l5.749-0.958 2.386-4.772c0.085-0.169 0.258-0.276 0.447-0.276s0.363 0.107 0.447 0.276l2.386 4.772 5.749 0.958c0.185 0.031 0.337 0.162 0.394 0.341s0.010 0.374-0.123 0.506l-3.818 3.818 0.958 5.746c0.031 0.189-0.048 0.379-0.203 0.49-0.086 0.061-0.188 0.093-0.29 0.093zM10 15c0.082 0 0.165 0.020 0.239 0.061l4.599 2.508-0.831-4.987c-0.027-0.159 0.025-0.322 0.14-0.436l3.313-3.313-5.042-0.84c-0.158-0.026-0.293-0.127-0.365-0.27l-2.053-4.106-2.053 4.106c-0.072 0.143-0.207 0.243-0.365 0.27l-5.042 0.84 3.313 3.313c0.114 0.114 0.166 0.276 0.14 0.436l-0.831 4.987 4.599-2.508c0.075-0.041 0.157-0.061 0.239-0.061z"></path>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/ch16/listing-16.02.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       * {
 7 |         box-sizing: border-box;
 8 |       }
 9 | 
10 |       body {
11 |         background-color: hsl(210, 80%, 20%);
12 |         font-family: Helvetica, Arial, sans-serif;
13 |       }
14 | 
15 |       img {
16 |         max-inline-size: 100%;
17 |       }
18 | 
19 |       .card {
20 |         max-inline-size: 300px;
21 |         padding: 0.5em;
22 |         margin-inline: auto;
23 |         background-color: white;
24 |         transform: rotate(15deg);
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <div class="card">
30 |       <img src="images/chicken1.jpg" alt="a chicken" />
31 |       <h4>Mrs. Featherstone</h4>
32 |       <p>
33 |         She may be a bit frumpy, but Mrs. Featherstone gets the job done. She
34 |         lays her largish cream-colored eggs on a daily basis. She is gregarious
35 |         to a fault.
36 |       </p>
37 |       <p>This Austra White is our most prolific producer.</p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/ch16/listing-16.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       * {
 7 |         box-sizing: border-box;
 8 |       }
 9 | 
10 |       body {
11 |         background-color: hsl(210, 80%, 20%);
12 |         font-family: Helvetica, Arial, sans-serif;
13 |       }
14 | 
15 |       img {
16 |         max-inline-size: 100%;
17 |       }
18 | 
19 |       .card {
20 |         max-inline-size: 300px;
21 |         padding: 0.5em;
22 |         margin-inline: auto;
23 |         background-color: white;
24 |         transform: translate(50px, 0) rotate(15deg);
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <div class="card">
30 |       <img src="images/chicken1.jpg" alt="a chicken" />
31 |       <h4>Mrs. Featherstone</h4>
32 |       <p>
33 |         She may be a bit frumpy, but Mrs. Featherstone gets the job done. She
34 |         lays her largish cream-colored eggs on a daily basis. She is gregarious
35 |         to a fault.
36 |       </p>
37 |       <p>This Austra White is our most prolific producer.</p>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/ch16/listing-16.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       * {
 7 |         box-sizing: border-box;
 8 |       }
 9 | 
10 |       body {
11 |         background-color: hsl(210, 80%, 20%);
12 |         font-family: Helvetica, Arial, sans-serif;
13 |       }
14 | 
15 |       img {
16 |         max-inline-size: 100%;
17 |       }
18 | 
19 |       .card {
20 |         max-inline-size: 300px;
21 |         padding: 0.5em;
22 |         margin-inline: auto;
23 |         background-color: white;
24 |         translate: 50px 0;
25 |         rotate: 15deg;
26 |       }
27 |     </style>
28 |   </head>
29 |   <body>
30 |     <div class="card">
31 |       <img src="images/chicken1.jpg" alt="a chicken" />
32 |       <h4>Mrs. Featherstone</h4>
33 |       <p>
34 |         She may be a bit frumpy, but Mrs. Featherstone gets the job done. She
35 |         lays her largish cream-colored eggs on a daily basis. She is gregarious
36 |         to a fault.
37 |       </p>
38 |       <p>This Austra White is our most prolific producer.</p>
39 |     </div>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/ch16/listing-16.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 |       .row {
 6 |         display: flex;
 7 |         gap: 4em;
 8 |         justify-content: center;
 9 |       }
10 | 
11 |       .box {
12 |         box-sizing: border-box;
13 |         width: 150px;
14 |         padding: 60px 0;
15 |         text-align: center;
16 |         background-color: oklch(60% 0.12 158deg);
17 |         transform: perspective(200px) rotateX(30deg);
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div class="row">
23 |       <div class="box">One</div>
24 |       <div class="box">Two</div>
25 |       <div class="box">Three</div>
26 |       <div class="box">Four</div>
27 |     </div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/ch16/listing-16.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 |       .row {
 6 |         display: flex;
 7 |         gap: 4em;
 8 |         justify-content: center;
 9 |         perspective: 200px;
10 |       }
11 | 
12 |       .box {
13 |         box-sizing: border-box;
14 |         width: 150px;
15 |         padding: 60px 0;
16 |         text-align: center;
17 |         background-color: oklch(60% 0.12 158deg);
18 |         transform: rotateX(30deg);
19 |       }
20 |     </style>
21 |   </head>
22 |   <body>
23 |     <div class="row">
24 |       <div class="box">One</div>
25 |       <div class="box">Two</div>
26 |       <div class="box">Three</div>
27 |       <div class="box">Four</div>
28 |     </div>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/ch16/listing-16.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 |       .row {
 6 |         display: flex;
 7 |         gap: 4em;
 8 |         justify-content: center;
 9 |         perspective: 200px;
10 |         perspective-origin: left bottom;
11 |       }
12 | 
13 |       .box {
14 |         box-sizing: border-box;
15 |         width: 150px;
16 |         padding: 60px 0;
17 |         text-align: center;
18 |         background-color: hsl(150, 50%, 40%);
19 |         transform: rotateX(30deg);
20 |       }
21 |     </style>
22 |   </head>
23 |   <body>
24 |     <div class="row">
25 |       <div class="box">One</div>
26 |       <div class="box">Two</div>
27 |       <div class="box">Three</div>
28 |       <div class="box">Four</div>
29 |     </div>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/ch17/images/chicken1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch17/images/chicken1.jpg


--------------------------------------------------------------------------------
/ch17/images/chicken2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch17/images/chicken2.jpg


--------------------------------------------------------------------------------
/ch17/images/chicken3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch17/images/chicken3.jpg


--------------------------------------------------------------------------------
/ch17/images/chicken4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/ch17/images/chicken4.jpg


--------------------------------------------------------------------------------
/ch17/images/home.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- LinearIcons from Generated by IcoMoon.io
3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
6 | <path fill="#ffffff" d="M19.871 12.165l-8.829-9.758c-0.274-0.303-0.644-0.47-1.042-0.47-0 0 0 0 0 0-0.397 0-0.767 0.167-1.042 0.47l-8.829 9.758c-0.185 0.205-0.169 0.521 0.035 0.706 0.096 0.087 0.216 0.129 0.335 0.129 0.136 0 0.272-0.055 0.371-0.165l2.129-2.353v8.018c0 0.827 0.673 1.5 1.5 1.5h11c0.827 0 1.5-0.673 1.5-1.5v-8.018l2.129 2.353c0.185 0.205 0.501 0.221 0.706 0.035s0.221-0.501 0.035-0.706zM12 19h-4v-4.5c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v4.5zM16 18.5c0 0.276-0.224 0.5-0.5 0.5h-2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0-1.5 0.673-1.5 1.5v4.5h-2.5c-0.276 0-0.5-0.224-0.5-0.5v-9.123l5.7-6.3c0.082-0.091 0.189-0.141 0.3-0.141s0.218 0.050 0.3 0.141l5.7 6.3v9.123z"></path>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/ch17/images/members.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- LinearIcons from Generated by IcoMoon.io
 3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
 4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
 6 | <path fill="#ffffff" d="M18.5 18h-11c-0.827 0-1.5-0.673-1.5-1.5 0-0.048 0.011-1.19 0.924-2.315 0.525-0.646 1.241-1.158 2.128-1.522 1.071-0.44 2.4-0.662 3.948-0.662s2.876 0.223 3.948 0.662c0.887 0.364 1.603 0.876 2.128 1.522 0.914 1.125 0.924 2.267 0.924 2.315 0 0.827-0.673 1.5-1.5 1.5zM7 16.503c0.001 0.275 0.225 0.497 0.5 0.497h11c0.275 0 0.499-0.223 0.5-0.497-0.001-0.035-0.032-0.895-0.739-1.734-0.974-1.157-2.793-1.768-5.261-1.768s-4.287 0.612-5.261 1.768c-0.707 0.84-0.738 1.699-0.739 1.734z"></path>
 7 | <path fill="#ffffff" d="M13 11c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4c0 2.206-1.794 4-4 4zM13 4c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z"></path>
 8 | <path fill="#ffffff" d="M4.5 18h-3c-0.827 0-1.5-0.673-1.5-1.5 0-0.037 0.008-0.927 0.663-1.8 0.378-0.505 0.894-0.904 1.533-1.188 0.764-0.34 1.708-0.512 2.805-0.512 0.179 0 0.356 0.005 0.527 0.014 0.276 0.015 0.487 0.25 0.473 0.526s-0.25 0.488-0.526 0.473c-0.153-0.008-0.312-0.012-0.473-0.012-3.894 0-3.997 2.379-4 2.503 0.001 0.274 0.225 0.497 0.5 0.497h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
 9 | <path fill="#ffffff" d="M5 12c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM5 7c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2c0-1.103-0.897-2-2-2z"></path>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/ch17/images/star.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- LinearIcons from Generated by IcoMoon.io
3 | https://creativecommons.org/licenses/by-sa/4.0/ -->
4 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
6 | <path fill="#ffffff" d="M15.5 19c-0.082 0-0.164-0.020-0.239-0.061l-5.261-2.869-5.261 2.869c-0.168 0.092-0.373 0.079-0.529-0.032s-0.235-0.301-0.203-0.49l0.958-5.746-3.818-3.818c-0.132-0.132-0.18-0.328-0.123-0.506s0.209-0.31 0.394-0.341l5.749-0.958 2.386-4.772c0.085-0.169 0.258-0.276 0.447-0.276s0.363 0.107 0.447 0.276l2.386 4.772 5.749 0.958c0.185 0.031 0.337 0.162 0.394 0.341s0.010 0.374-0.123 0.506l-3.818 3.818 0.958 5.746c0.031 0.189-0.048 0.379-0.203 0.49-0.086 0.061-0.188 0.093-0.29 0.093zM10 15c0.082 0 0.165 0.020 0.239 0.061l4.599 2.508-0.831-4.987c-0.027-0.159 0.025-0.322 0.14-0.436l3.313-3.313-5.042-0.84c-0.158-0.026-0.293-0.127-0.365-0.27l-2.053-4.106-2.053 4.106c-0.072 0.143-0.207 0.243-0.365 0.27l-5.042 0.84 3.313 3.313c0.114 0.114 0.166 0.276 0.14 0.436l-0.831 4.987 4.599-2.508c0.075-0.041 0.157-0.061 0.239-0.061z"></path>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/ch17/listing-17.03.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       .box {
 7 |         width: 100px;
 8 |         height: 100px;
 9 |         background-color: green;
10 |         animation: over-and-back 1.5s linear 3;
11 |       }
12 | 
13 |       @keyframes over-and-back {
14 |         0% {
15 |           background-color: hsl(0, 50%, 50%);
16 |           transform: translate(0);
17 |         }
18 | 
19 |         50% {
20 |           transform: translate(50px);
21 |         }
22 | 
23 |         100% {
24 |           background-color: hsl(270, 50%, 90%);
25 |           transform: translate(0);
26 |         }
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <div class="box"></div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/ch17/listing-17.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <meta charset="utf-8" />
 4 |   <head>
 5 |     <style type="text/css">
 6 |       body {
 7 |         font-family: Helvetica, Arial, sans-serif;
 8 |       }
 9 | 
10 |       form {
11 |         max-width: 500px;
12 |       }
13 | 
14 |       label,
15 |       textarea {
16 |         display: block;
17 |         margin-bottom: 1em;
18 |       }
19 | 
20 |       textarea {
21 |         width: 100%;
22 |         font-size: inherit;
23 |       }
24 | 
25 |       button {
26 |         padding: 0.6em 1em;
27 |         border: 0;
28 |         font: inherit;
29 |         color: white;
30 |         background-color: oklch(54% 0.14 260deg);
31 |         transition: background-color 0.3s linear;
32 |       }
33 |       button:hover {
34 |         background-color: oklch(46% 0.11 260deg);
35 |       }
36 |     </style>
37 |   </head>
38 |   <body>
39 |     <form>
40 |       <label for="trip">Tell us about your first trip to the zoo:</label>
41 |       <textarea id="trip" name="about-my-trip" rows="5"></textarea>
42 |       <button type="submit" id="submit-button">Save</button>
43 |     </form>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/ch17/listing-17.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <meta charset="utf-8" />
 4 |   <head>
 5 |     <style type="text/css">
 6 |       body {
 7 |         font-family: Helvetica, Arial, sans-serif;
 8 |       }
 9 | 
10 |       form {
11 |         max-width: 500px;
12 |       }
13 | 
14 |       label,
15 |       textarea {
16 |         display: block;
17 |         margin-bottom: 1em;
18 |       }
19 | 
20 |       textarea {
21 |         width: 100%;
22 |         font-size: inherit;
23 |       }
24 | 
25 |       button {
26 |         padding: 0.6em 1em;
27 |         border: 0;
28 |         font: inherit;
29 |         color: white;
30 |         background-color: oklch(54% 0.14 260deg);
31 |         transition: background-color 0.3s linear;
32 |       }
33 |       button:hover {
34 |         background-color: oklch(46% 0.11 260deg);
35 |       }
36 | 
37 |       button.is-loading {
38 |         position: relative;
39 |         color: transparent;
40 |       }
41 |       button.is-loading::after {
42 |         position: absolute;
43 |         content: "";
44 |         display: block;
45 |         width: 1.4em;
46 |         height: 1.4em;
47 |         top: 50%;
48 |         left: 50%;
49 |         margin-left: -0.7em;
50 |         margin-top: -0.7em;
51 |         border-top: 2px solid white;
52 |         border-radius: 50%;
53 |         animation: spin 0.5s linear infinite;
54 |       }
55 | 
56 |       @keyframes spin {
57 |         0% {
58 |           transform: rotate(0deg);
59 |         }
60 |         100% {
61 |           transform: rotate(360deg);
62 |         }
63 |       }
64 |     </style>
65 |   </head>
66 |   <body>
67 |     <form>
68 |       <label for="trip">Tell us about your first trip to the zoo:</label>
69 |       <textarea id="trip" name="about-my-trip" rows="5"></textarea>
70 |       <button type="submit" id="submit-button" class="is-loading">Save</button>
71 |     </form>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/ch17/listing-17.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en-US">
 3 |   <meta charset="utf-8" />
 4 |   <head>
 5 |     <style type="text/css">
 6 |       body {
 7 |         font-family: Helvetica, Arial, sans-serif;
 8 |       }
 9 | 
10 |       form {
11 |         max-width: 500px;
12 |       }
13 | 
14 |       label,
15 |       textarea {
16 |         display: block;
17 |         margin-bottom: 1em;
18 |       }
19 | 
20 |       textarea {
21 |         width: 100%;
22 |         font-size: inherit;
23 |       }
24 | 
25 |       button {
26 |         padding: 0.6em 1em;
27 |         border: 0;
28 |         font: inherit;
29 |         color: white;
30 |         background-color: oklch(54% 0.14 260deg);
31 |         transition: background-color 0.3s linear;
32 |       }
33 |       button:hover {
34 |         background-color: oklch(46% 0.11 260deg);
35 |       }
36 | 
37 |       button.is-loading {
38 |         position: relative;
39 |         color: transparent;
40 |       }
41 |       button.is-loading::after {
42 |         position: absolute;
43 |         content: "";
44 |         display: block;
45 |         width: 1.4em;
46 |         height: 1.4em;
47 |         top: 50%;
48 |         left: 50%;
49 |         margin-left: -0.7em;
50 |         margin-top: -0.7em;
51 |         border-top: 2px solid white;
52 |         border-radius: 50%;
53 |         animation: spin 0.5s linear infinite;
54 |       }
55 | 
56 |       @keyframes spin {
57 |         0% {
58 |           transform: rotate(0deg);
59 |         }
60 |         100% {
61 |           transform: rotate(360deg);
62 |         }
63 |       }
64 |     </style>
65 |   </head>
66 |   <body>
67 |     <script type="module">
68 |       var input = document.getElementById("trip");
69 |       var button = document.getElementById("submit-button");
70 | 
71 |       button.addEventListener("click", (event) => {
72 |         event.preventDefault();
73 |         button.classList.add("is-loading");
74 |         button.disabled = true;
75 |         input.disabled = true;
76 |       });
77 |     </script>
78 | 
79 |     <form>
80 |       <label for="trip">Tell us about your first trip to the zoo:</label>
81 |       <textarea id="trip" name="about-my-trip" rows="5"></textarea>
82 |       <button type="submit" id="submit-button">Save</button>
83 |     </form>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/ch17/listing-17.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <style>
 6 |       body {
 7 |         margin: unset;
 8 |         height: 200lvh;
 9 |       }
10 | 
11 |       .indicator {
12 |         position: fixed;
13 |         top: 15px;
14 |         right: 15px;
15 |         height: 50px;
16 |         width: 50px;
17 |         background-color: oklch(74% 0.08 260deg);
18 |         animation-name: spin;
19 |         animation-timeline: scroll();
20 |       }
21 | 
22 |       @keyframes spin {
23 |         from {
24 |           rotate: 0deg;
25 |         }
26 | 
27 |         to {
28 |           rotate: 360deg;
29 |         }
30 |       }
31 |     </style>
32 |   </head>
33 |   <body>
34 |     <div class="indicator"></div>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth-2/43814baa7b3208b299cfd2e9ccd4cbba355ef26e/cover.png


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-in-depth-2",
 3 |   "lockfileVersion": 3,
 4 |   "requires": true,
 5 |   "packages": {
 6 |     "": {
 7 |       "dependencies": {
 8 |         "prettier": "^3.1.0"
 9 |       }
10 |     },
11 |     "node_modules/prettier": {
12 |       "version": "3.1.0",
13 |       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
14 |       "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
15 |       "bin": {
16 |         "prettier": "bin/prettier.cjs"
17 |       },
18 |       "engines": {
19 |         "node": ">=14"
20 |       },
21 |       "funding": {
22 |         "url": "https://github.com/prettier/prettier?sponsor=1"
23 |       }
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "prettier": "prettier --check */*.html",
 4 |     "prettier:fix": "prettier --write */*.html"
 5 |   },
 6 |   "dependencies": {
 7 |     "prettier": "^3.1.0"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------