├── .gitignore
├── README.md
├── appendixB
    ├── build
    │   ├── styles.css
    │   └── styles.css.map
    ├── package.json
    └── sass
    │   ├── button.scss
    │   └── index.scss
├── ch01
    ├── listing-1.10.html
    ├── listing-1.11.html
    ├── listing-1.12.html
    ├── listing-1.13.html
    ├── listing-1.15.html
    ├── listing-1.16.html
    ├── listing-1.17.html
    ├── listing-1.18.html
    ├── listing-1.19.html
    ├── listing-1.2.html
    ├── listing-1.20.html
    ├── listing-1.21.html
    ├── listing-1.3.html
    ├── listing-1.4.html
    ├── listing-1.5.html
    ├── listing-1.7.html
    ├── listing-1.8.html
    ├── listing-1.9.html
    └── mug.png
├── ch02
    ├── listing-2.1.html
    ├── listing-2.10.html
    ├── listing-2.14.html
    ├── listing-2.15-figure.html
    ├── listing-2.15.html
    ├── listing-2.16.html
    ├── listing-2.18.html
    ├── listing-2.19.html
    ├── listing-2.21.html
    ├── listing-2.22.html
    ├── listing-2.24.html
    ├── listing-2.25.html
    ├── listing-2.26.html
    ├── listing-2.28.html
    ├── listing-2.29.html
    ├── listing-2.3.html
    ├── listing-2.31.html
    ├── listing-2.5.html
    ├── listing-2.6.html
    ├── listing-2.7.html
    └── listing-2.9.html
├── ch03
    ├── listing-3.10.html
    ├── listing-3.11.html
    ├── listing-3.12.html
    ├── listing-3.13.html
    ├── listing-3.14.html
    ├── listing-3.16.html
    ├── listing-3.16b.html
    ├── listing-3.17.html
    ├── listing-3.19.html
    ├── listing-3.2.html
    ├── listing-3.20.html
    ├── listing-3.21.html
    ├── listing-3.3.html
    ├── listing-3.4.html
    ├── listing-3.6.html
    ├── listing-3.7.html
    ├── listing-3.8.html
    └── listing-3.9.html
├── ch04
    ├── listing-4.10.html
    ├── listing-4.11.html
    ├── listing-4.14.html
    ├── listing-4.15.html
    ├── listing-4.16.html
    ├── listing-4.17.html
    ├── listing-4.18.html
    ├── listing-4.2.html
    ├── listing-4.3.html
    ├── listing-4.4.html
    ├── listing-4.5.html
    ├── listing-4.6.html
    ├── listing-4.7.html
    ├── listing-4.8.html
    ├── listing-4.9.html
    ├── runner.png
    └── shoes.png
├── ch05
    ├── listing-5.10.html
    ├── listing-5.11.html
    ├── listing-5.2.html
    ├── listing-5.3.html
    ├── listing-5.4.html
    ├── listing-5.5.html
    ├── listing-5.6.html
    ├── listing-5.7.html
    ├── listing-5.8.html
    ├── listing-5.9-before.html
    └── listing-5.9.html
├── ch06
    ├── images
    │   ├── bear.jpg
    │   ├── bird.jpg
    │   ├── eagle.jpg
    │   ├── elephants.jpg
    │   ├── monkey.jpg
    │   ├── owl.jpg
    │   └── swan.jpg
    ├── listing-6.10.html
    ├── listing-6.11.html
    ├── listing-6.12.html
    ├── listing-6.2.html
    ├── listing-6.4.html
    ├── listing-6.5.html
    ├── listing-6.6.html
    ├── listing-6.7.html
    └── listing-6.9.html
├── ch07
    ├── listing-7.10.html
    ├── listing-7.12.html
    ├── listing-7.2.html
    ├── listing-7.3.html
    ├── listing-7.4.html
    ├── listing-7.6.html
    ├── listing-7.7.html
    └── listing-7.8.html
├── ch08
    ├── coffee-beans-medium.jpg
    ├── coffee-beans-small.jpg
    ├── coffee-beans.jpg
    ├── 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.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
├── ch09
    ├── listing-9.01.html
    ├── listing-9.03.html
    ├── listing-9.04.html
    ├── listing-9.06.html
    ├── listing-9.08.html
    ├── listing-9.10.html
    ├── listing-9.12.html
    ├── listing-9.13.html
    ├── listing-9.14.html
    └── runner.png
├── ch10
    ├── .gitignore
    ├── README.md
    ├── css
    │   ├── homepage.md
    │   └── styles.css
    ├── docs
    │   ├── index.html
    │   ├── kss-assets
    │   │   ├── WARNING.txt
    │   │   ├── github-fork--black.png
    │   │   ├── kss.css
    │   │   ├── kss.js
    │   │   ├── kss.scss
    │   │   ├── noise-low.png
    │   │   ├── prettify.js
    │   │   ├── sample-inline.png
    │   │   ├── sample-inline.svg
    │   │   ├── sample.png
    │   │   ├── sample.svg
    │   │   └── scrollspy.js
    │   ├── section-buttons.html
    │   ├── section-dropdown.html
    │   ├── section-media.html
    │   ├── section-menu.html
    │   ├── section-message.html
    │   └── section-utilities.html
    ├── js
    │   └── docs.js
    ├── kss-config.json
    └── package.json
├── ch11
    ├── images
    │   ├── bear.jpg
    │   ├── elephants.jpg
    │   └── scratches.png
    ├── listing-11.01.html
    ├── listing-11.03.html
    ├── listing-11.04.html
    ├── listing-11.05.html
    ├── listing-11.06.html
    ├── listing-11.07.html
    ├── listing-11.09.html
    ├── listing-11.10.html
    ├── listing-11.11.html
    ├── listing-11.13.html
    ├── listing-11.14.html
    ├── listing-11.15.html
    └── listing-11.17.html
├── ch12
    ├── collaboration.jpg
    ├── listing-12.10.html
    ├── listing-12.11.html
    ├── listing-12.12.html
    ├── listing-12.2.html
    ├── listing-12.3.html
    ├── listing-12.4.html
    ├── listing-12.5.html
    ├── listing-12.6.html
    ├── listing-12.7.html
    ├── listing-12.8.html
    └── listing-12.9.html
├── ch13
    ├── collaboration.jpg
    ├── fontfaceobserver.js
    ├── listing-13.10.html
    ├── listing-13.11.html
    ├── listing-13.2.html
    ├── listing-13.3.css
    ├── listing-13.6.html
    ├── listing-13.7.html
    ├── listing-13.8.html
    └── listing-13.9.html
├── ch14
    ├── listing-14.10.html
    ├── listing-14.12.html
    ├── listing-14.2.html
    ├── listing-14.3.html
    ├── listing-14.5.html
    ├── listing-14.6.html
    ├── listing-14.8.html
    └── listing-14.9.html
├── ch15
    ├── images
    │   ├── calendar.svg
    │   ├── chicken1.jpg
    │   ├── chicken2.jpg
    │   ├── chicken3.jpg
    │   ├── chicken4.jpg
    │   ├── home.svg
    │   ├── members.svg
    │   └── star.svg
    ├── listing-15.02.html
    ├── listing-15.03.html
    ├── listing-15.05.html
    ├── listing-15.06.html
    ├── listing-15.07.html
    ├── listing-15.08.html
    ├── listing-15.09.html
    ├── listing-15.10.html
    ├── listing-15.12.html
    ├── listing-15.13.html
    ├── listing-15.14.html
    └── listing-15.15.html
├── ch16
    ├── images
    │   ├── calendar.svg
    │   ├── chicken1.jpg
    │   ├── chicken2.jpg
    │   ├── chicken3.jpg
    │   ├── chicken4.jpg
    │   ├── home.svg
    │   ├── members.svg
    │   └── star.svg
    ├── listing-16.10.html
    ├── listing-16.12.html
    ├── listing-16.13.html
    ├── listing-16.14.html
    ├── listing-16.15.html
    ├── listing-16.16.html
    ├── listing-16.3.html
    ├── listing-16.5.html
    ├── listing-16.6.html
    ├── listing-16.7.html
    ├── listing-16.8.html
    └── listing-16.9.html
└── cover.png


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS in Depth
 2 | 
 3 | Code listings from [CSS In Depth](https://manning.com/books/css-in-depth) by Keith J. Grant
 4 | 
 5 | _Note: These listings are for the first edition. For second edition listings, see [the second edition repository](https://github.com/cssindepth/css-in-depth-2)._
 6 | 
 7 | At first glance, it may appear that some listings are missing—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.
 8 | 
 9 | 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.
10 | 


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


--------------------------------------------------------------------------------
/appendixB/build/styles.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "AAAA,SAAS;AAGT,MAAO;EACL,KAAK,EAHM,OAAO;;AAMpB,aAAc;EACZ,SAAS,EAAE,MAAM;EACjB,KAAK,EARM,OAAO;;AAYpB,SAAS;AAGT,YAAa;EACX,YAAY,EAHC,GAAG;EAIhB,WAAW,EAAE,IAAI;;AAGnB,UAAW;EACT,YAAY,EAAE,GAAiB;;AAIjC,SAAS;AACT,SAAU;EACR,OAAO,EAAE,IAAI;EAEb,cAAK;IACH,UAAU,EAAE,CAAC;IAEb,wBAAW;MACT,WAAW,EAAE,IAAI;;AAMvB,SAAS;AACT,IAAK;EACH,SAAS,EAAE,IAAI;EAEf,wBAAyB;IAH3B,IAAK;MAID,SAAS,EAAE,OAAO;;AAKtB,SAAS;AClDT,SAAS;AACT,OAAQ;EACN,OAAO,EAAE,UAAU;EACnB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;;ADkDb,SAAS;AAYT,MAAO;EAEL,gBAAgB,EAAE,IAAI;EAZtB,cAAU;IACR,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,GAAG;EAGd,aAAS;IACP,KAAK,EAAE,IAAI;;AAUf,SAAS;AAQT,WAAY;EANV,OAAO,EAAE,WAAW;EACpB,MAAM,EAAE,cAAgB;EACxB,KAAK,EAKkB,IAAI;EAJ3B,gBAAgB,EAIa,SAAS;;AAGxC,aAAc;EAVZ,OAAO,EAAE,WAAW;EACpB,MAAM,EAAE,aAAgB;EACxB,KAAK,EASkB,GAAG;EAR1B,gBAAgB,EAQY,IAAI;;AAIlC,UAAU;AACV,wCAAS;EACP,OAAO,EAAE,WAAW;EACpB,aAAa,EAAE,KAAK;;AAGtB,aAAc;EAEZ,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,SAAS;;AAG7B,eAAgB;EAEd,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,IAAI;;AAIxB,UAAU;AAcV,OAAQ;EACN,KAAK,EAZM,OAAmB;EAa9B,KAAK,EAZO,OAAoB;EAahC,KAAK,EAXO,OAAqB;EAYjC,KAAK,EAXM,OAAuB;EAYlC,KAAK,EAVE,OAA0B;EAWjC,KAAK,EAVA,OAAyB;EAW9B,KAAK,EATa,sBAAiB;;AAarC,UAAU;AAER,4BAAqC;EACnC,gBAAgB,EAAE,IAAsB;;AAD1C,4BAAqC;EACnC,gBAAgB,EAAE,IAAsB;;AAD1C,4BAAqC;EACnC,gBAAgB,EAAE,IAAsB",
4 | "sources": ["../sass/index.scss","../sass/button.scss"],
5 | "names": [],
6 | "file": "styles.css"
7 | }
8 | 


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


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/ch01/listing-1.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 | body {
 5 |   font-family: sans-serif;
 6 | }
 7 | 
 8 | a:link {
 9 |   color: blue;
10 |   text-decoration: none;
11 | }
12 | 
13 | a:visited {
14 |   color: purple;
15 | }
16 | 
17 | a:hover {
18 |   text-decoration: underline;
19 | }
20 | 
21 | a:active {
22 |   color: red;
23 | }
24 | 
25 | h1 {
26 |   color: #2f4f4f;
27 |   margin-bottom: 10px;
28 |   font-weight: bold;
29 | }
30 | 
31 | .title {
32 |   font: 32px Helvetica, Arial, sans-serif;
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 |   text-decoration: underline;
68 | }
69 |   </style>
70 | </head>
71 | <body>
72 |   <header class="page-header">
73 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
74 |     <nav>
75 |       <ul id="main-nav" class="nav">
76 |         <li><a href="/">Home</a></li>
77 |         <li><a href="/coffees">Coffees</a></li>
78 |         <li><a href="/brewers">Brewers</a></li>
79 |         <li><a href="/specials" class="featured">Specials</a></li>
80 |       </ul>
81 |     </nav>
82 |   </header>
83 |   <footer class="footer">
84 |     &copy; 2016 Wombat Coffee Roasters &mdash;
85 |     <a href="/terms-of-use">Terms of use</a>
86 |   </footer>
87 | </body>
88 | 


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


--------------------------------------------------------------------------------
/ch01/listing-1.19.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 | body {
 5 |   font-family: sans-serif;
 6 | }
 7 | 
 8 | a:link {
 9 |   color: blue;
10 |   text-decoration: none;
11 | }
12 | 
13 | a:visited {
14 |   color: purple;
15 | }
16 | 
17 | a:hover {
18 |   text-decoration: underline;
19 | }
20 | 
21 | a:active {
22 |   color: red;
23 | }
24 | 
25 | h1 {
26 |   color: #2f4f4f;
27 |   margin-bottom: 10px;
28 |   font-weight: bold;
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: 10px 15px 0 5px;
45 |   border-radius: 2px;
46 |   text-decoration: none;
47 | }
48 | 
49 | .nav .featured {
50 |   background-color: orange;
51 | }
52 | 
53 | .footer {
54 |   color: #666;
55 |   background-color: #ccc;
56 |   padding: 15px 0;
57 |   text-align: center;
58 |   font-size: 14px;
59 | }
60 | 
61 | .footer a {
62 |   color: inherit;
63 |   text-decoration: underline;
64 | }
65 |   </style>
66 | </head>
67 | <body>
68 |   <header class="page-header">
69 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
70 |     <nav>
71 |       <ul id="main-nav" class="nav">
72 |         <li><a href="/">Home</a></li>
73 |         <li><a href="/coffees">Coffees</a></li>
74 |         <li><a href="/brewers">Brewers</a></li>
75 |         <li><a href="/specials" class="featured">Specials</a></li>
76 |       </ul>
77 |     </nav>
78 |   </header>
79 |   <footer class="footer">
80 |     &copy; 2016 Wombat Coffee Roasters &mdash;
81 |     <a href="/terms-of-use">Terms of use</a>
82 |   </footer>
83 | </body>
84 | 


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


--------------------------------------------------------------------------------
/ch01/listing-1.20.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 | body {
 5 |   font-family: sans-serif;
 6 | }
 7 | 
 8 | a:link {
 9 |   color: blue;
10 |   text-decoration: none;
11 | }
12 | 
13 | a:visited {
14 |   color: purple;
15 | }
16 | 
17 | a:hover {
18 |   text-decoration: underline;
19 | }
20 | 
21 | a:active {
22 |   color: red;
23 | }
24 | 
25 | h1 {
26 |   color: #2f4f4f;
27 |   margin-bottom: 10px;
28 |   font-weight: bold;
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 15px;
45 |   border-radius: 2px;
46 |   text-decoration: none;
47 | }
48 | 
49 | .nav .featured {
50 |   background-color: orange;
51 | }
52 | 
53 | .footer {
54 |   color: #666;
55 |   background-color: #ccc;
56 |   padding: 15px 0;
57 |   text-align: center;
58 |   font-size: 14px;
59 | }
60 | 
61 | .footer a {
62 |   color: inherit;
63 |   text-decoration: underline;
64 | }
65 |   </style>
66 | </head>
67 | <body>
68 |   <header class="page-header">
69 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
70 |     <nav>
71 |       <ul id="main-nav" class="nav">
72 |         <li><a href="/">Home</a></li>
73 |         <li><a href="/coffees">Coffees</a></li>
74 |         <li><a href="/brewers">Brewers</a></li>
75 |         <li><a href="/specials" class="featured">Specials</a></li>
76 |       </ul>
77 |     </nav>
78 |   </header>
79 |   <footer class="footer">
80 |     &copy; 2016 Wombat Coffee Roasters &mdash;
81 |     <a href="/terms-of-use">Terms of use</a>
82 |   </footer>
83 | </body>
84 | 


--------------------------------------------------------------------------------
/ch01/listing-1.21.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 | body {
 5 |   font-family: sans-serif;
 6 | }
 7 | 
 8 | a:link {
 9 |   color: blue;
10 |   text-decoration: none;
11 | }
12 | 
13 | a:visited {
14 |   color: purple;
15 | }
16 | 
17 | a:hover {
18 |   text-decoration: underline;
19 | }
20 | 
21 | a:active {
22 |   color: red;
23 | }
24 | 
25 | h1 {
26 |   color: #2f4f4f;
27 |   margin-bottom: 10px;
28 |   font-weight: bold;
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 15px;
45 |   border-radius: 2px;
46 |   text-decoration: none;
47 | }
48 | 
49 | .nav .featured {
50 |   background-color: orange;
51 |   box-shadow: 10px 2px #6f9090;
52 | }
53 | 
54 | .footer {
55 |   color: #666;
56 |   background-color: #ccc;
57 |   padding: 15px 0;
58 |   text-align: center;
59 |   font-size: 14px;
60 | }
61 | 
62 | .footer a {
63 |   color: inherit;
64 |   text-decoration: underline;
65 | }
66 |   </style>
67 | </head>
68 | <body>
69 |   <header class="page-header">
70 |     <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
71 |     <nav>
72 |       <ul id="main-nav" class="nav">
73 |         <li><a href="/">Home</a></li>
74 |         <li><a href="/coffees">Coffees</a></li>
75 |         <li><a href="/brewers">Brewers</a></li>
76 |         <li><a href="/specials" class="featured">Specials</a></li>
77 |       </ul>
78 |     </nav>
79 |   </header>
80 |   <footer class="footer">
81 |     &copy; 2016 Wombat Coffee Roasters &mdash;
82 |     <a href="/terms-of-use">Terms of use</a>
83 |   </footer>
84 | </body>
85 | 


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


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


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


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


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


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


--------------------------------------------------------------------------------
/ch01/mug.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch01/mug.png


--------------------------------------------------------------------------------
/ch02/listing-2.1.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
14 |     hand-select beans at the peak of season. We then carefully roast in <a href="/batches">small batches</a> to maximize their potential.
15 |   </div>
16 | </body>
17 | 


--------------------------------------------------------------------------------
/ch02/listing-2.10.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>Top level
17 |     <ul>
18 |       <li>Second level
19 |         <ul>
20 |           <li>Third level
21 |             <ul>
22 |               <li>Fourth level
23 |                 <ul>
24 |                   <li>Fifth level</li>
25 |                 </ul>
26 |               </li>
27 |             </ul>
28 |           </li>
29 |         </ul>
30 |       </li>
31 |     </ul>
32 |   </li>
33 | </ul>
34 | </body>
35 | 


--------------------------------------------------------------------------------
/ch02/listing-2.14.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
32 |       in <a href="/batch-size.html">small batches</a> to maximize their
33 |       potential.
34 |     </div>
35 |   </div>
36 | </body>
37 | 


--------------------------------------------------------------------------------
/ch02/listing-2.15-figure.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     .panel.a {
 5 |       font-size: 0.75em;
 6 |     }
 7 |     .panel.b {
 8 |       font-size: 0.875em;
 9 |     }
10 |     .panel.c {
11 |       font-size: 1em;
12 |     }
13 | 
14 |     body {
15 |       font-family: Helvetica, Arial, sans-serif;
16 |     }
17 | 
18 |     .panel {
19 |       padding: 1em;
20 |       border: 1px solid #999;
21 |       border-radius: 0.5em;
22 |     }
23 |     .panel > h2 {
24 |       margin-top: 0;
25 |       font-size: 0.8rem;
26 |       font-weight: bold;
27 |       text-transform: uppercase;
28 |     }
29 |   </style>
30 | </head>
31 | 
32 | <body>
33 |   <div style="width: 300px; float: left;">
34 |     <div class="panel a">
35 |       <h2>Single-origin</h2>
36 |       <div class="body">
37 |         We have built partnerships with small farms around the world to
38 |         hand-select beans at the peak of season. We then carefully roast
39 |         in <a href="/batch-size.html">small batches</a> to maximize their
40 |         potential.
41 |       </div>
42 |     </div>
43 |   </div>
44 |   <div style="width: 800px; float: left; margin-left: 1rem">
45 |     <div class="panel b">
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
50 |         in <a href="/batch-size.html">small batches</a> to maximize their
51 |         potential.
52 |       </div>
53 |     </div>
54 |   </div>
55 |   <div style="width: 1115px; float: left; clear: left; margin-top: 1rem">
56 |     <div class="panel c">
57 |       <h2>Single-origin</h2>
58 |       <div class="body">
59 |         We have built partnerships with small farms around the world to
60 |         hand-select beans at the peak of season. We then carefully roast
61 |         in <a href="/batch-size.html">small batches</a> to maximize their
62 |         potential.
63 |       </div>
64 |     </div>
65 |   </div>
66 | </body>
67 | 


--------------------------------------------------------------------------------
/ch02/listing-2.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.75em;
 6 |     }
 7 |     @media (min-width: 800px) {
 8 |       :root {
 9 |         font-size: 0.875em;
10 |       }
11 |     }
12 |     @media (min-width: 1200px) {
13 |       :root {
14 |         font-size: 1em;
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
42 |       in <a href="/batch-size.html">small batches</a> to maximize their
43 |       potential.
44 |     </div>
45 |   </div>
46 | </body>
47 | 


--------------------------------------------------------------------------------
/ch02/listing-2.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       font-size: 0.75em;
 6 |     }
 7 |     @media (min-width: 800px) {
 8 |       :root {
 9 |         font-size: 0.875em;
10 |       }
11 |     }
12 |     @media (min-width: 1200px) {
13 |       :root {
14 |         font-size: 1em;
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
48 |       in <a href="/batch-size.html">small batches</a> to maximize their
49 |       potential.
50 |     </div>
51 |   </div>
52 |   <div class="panel large">
53 |     <h2>Single-origin</h2>
54 |     <div class="body">
55 |       We have built partnerships with small farms around the world to
56 |       hand-select beans at the peak of season. We then carefully roast
57 |       in <a href="/batch-size.html">small batches</a> to maximize their
58 |       potential.
59 |     </div>
60 |   </div>
61 | </body>
62 | 


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


--------------------------------------------------------------------------------
/ch02/listing-2.21.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
17 |     hand-select beans at the peak of season. We then carefully roast in
18 |     small batches to maximize their potential.
19 |   </p>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch02/listing-2.22.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
17 |     hand-select beans at the peak of season. We then carefully roast in
18 |     small batches to maximize their potential.
19 |   </p>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch02/listing-2.24.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
17 |     hand-select beans at the peak of season. We then carefully roast
18 |     in small batches to maximize their
19 |     potential.
20 |   </p>
21 | </body>
22 | 


--------------------------------------------------------------------------------
/ch02/listing-2.25.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
19 |     hand-select beans at the peak of season. We then carefully roast
20 |     in small batches to maximize their
21 |     potential.
22 |   </p>
23 | </body>
24 | 


--------------------------------------------------------------------------------
/ch02/listing-2.26.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
19 |     hand-select beans at the peak of season. We then carefully roast
20 |     in small batches to maximize their
21 |     potential.
22 |   </p>
23 | </body>
24 | 


--------------------------------------------------------------------------------
/ch02/listing-2.28.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
41 |       around the world to hand-select beans at the
42 |       peak of season. We then carefully roast in
43 |       small batches to maximize their potential.
44 |     </div>
45 |   </div>
46 | 
47 |   <aside class="dark">
48 |     <div class="panel">
49 |       <h2>Single-origin</h2>
50 |       <div class="body">
51 |         We have built partnerships with small farms
52 |         around the world to hand-select beans at the
53 |         peak of season. We then carefully roast in
54 |         small batches to maximize their potential.
55 |       </div>
56 |     </div>
57 |   </aside>
58 | </body>
59 | 


--------------------------------------------------------------------------------
/ch02/listing-2.29.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
49 |       around the world to hand-select beans at the
50 |       peak of season. We then carefully roast in
51 |       small batches to maximize their potential.
52 |     </div>
53 |   </div>
54 | 
55 |   <aside class="dark">
56 |     <div class="panel">
57 |       <h2>Single-origin</h2>
58 |       <div class="body">
59 |         We have built partnerships with small farms
60 |         around the world to hand-select beans at the
61 |         peak of season. We then carefully roast in
62 |         small batches to maximize their potential.
63 |       </div>
64 |     </div>
65 |   </aside>
66 | </body>
67 | 


--------------------------------------------------------------------------------
/ch02/listing-2.3.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.31.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
49 |       around the world to hand-select beans at the
50 |       peak of season. We then carefully roast in
51 |       small batches to maximize their potential.
52 |     </div>
53 |   </div>
54 | 
55 |   <aside class="dark">
56 |     <div class="panel">
57 |       <h2>Single-origin</h2>
58 |       <div class="body">
59 |         We have built partnerships with small farms
60 |         around the world to hand-select beans at the
61 |         peak of season. We then carefully roast in
62 |         small batches to maximize their potential.
63 |       </div>
64 |     </div>
65 |   </aside>
66 | 
67 |   <script type="text/javascript">
68 |   let rootElement = document.documentElement;
69 | let styles = getComputedStyle(rootElement);
70 | let mainColor = styles.getPropertyValue('--main-bg');
71 | console.log(String(mainColor).trim());
72 | 
73 | rootElement = document.documentElement;
74 | rootElement.style.setProperty('--main-bg', '#cdf');
75 | </script>
76 | </body>
77 | 


--------------------------------------------------------------------------------
/ch02/listing-2.5.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.6.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.7.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>Top level
17 |     <ul>
18 |       <li>Second level
19 |         <ul>
20 |           <li>Third level
21 |             <ul>
22 |               <li>Fourth level
23 |                 <ul>
24 |                   <li>Fifth level</li>
25 |                 </ul>
26 |               </li>
27 |             </ul>
28 |           </li>
29 |         </ul>
30 |       </li>
31 |     </ul>
32 |   </li>
33 | </ul>
34 | </body>
35 | 


--------------------------------------------------------------------------------
/ch02/listing-2.9.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>Top level
21 |     <ul>
22 |       <li>Second level
23 |         <ul>
24 |           <li>Third level
25 |             <ul>
26 |               <li>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 | 


--------------------------------------------------------------------------------
/ch03/listing-3.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .wrapper {
26 |       margin-left: -1.5em;
27 |       margin-right: -1.5em;
28 |     }
29 | 
30 |     .container {
31 |       display: table;
32 |       width: 100%;
33 |       border-spacing: 1.5em 0;
34 |     }
35 | 
36 |     .main {
37 |       display: table-cell;
38 |       width: 70%;
39 |       background-color: #fff;
40 |       border-radius: .5em;
41 |     }
42 | 
43 |     .sidebar {
44 |       display: table-cell;
45 |       width: 30%;
46 |       padding: 1.5em;
47 |       background-color: #fff;
48 |       border-radius: .5em;
49 |     }
50 | 
51 |   </style>
52 | </head>
53 | 
54 | <body>
55 |   <header>
56 |     <h1>Franklin Running Club</h1>
57 |   </header>
58 |   <div class="wrapper">
59 |     <div class="container">
60 |       <main class="main">
61 |         <h2>Come join us!</h2>
62 |         <p>
63 |           The Franklin Running club meets at 6:00pm every Thursday
64 |           at the town square. Runs are three to five miles, at your
65 |           own pace.
66 |         </p>
67 |       </main>
68 |       <aside class="sidebar">
69 |         <div class="widget"></div>
70 |         <div class="widget"></div>
71 |         <div class="gizmo"></div>
72 |       </aside>
73 |     </div>
74 |   </div>
75 | </body>
76 | 


--------------------------------------------------------------------------------
/ch03/listing-3.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .container {
26 |       display: flex;
27 |     }
28 | 
29 |     .main {
30 |       width: 70%;
31 |       background-color: #fff;
32 |       border-radius: .5em;
33 |     }
34 | 
35 |     .sidebar {
36 |       width: 30%;
37 |       padding: 1.5em;
38 |       margin-left: 1.5em;
39 |       background-color: #fff;
40 |       border-radius: .5em;
41 |     }
42 | 
43 |   </style>
44 | </head>
45 | 
46 | <body>
47 |   <header>
48 |     <h1>Franklin Running Club</h1>
49 |   </header>
50 |   <div class="container">
51 |     <main class="main">
52 |       <h2>Come join us!</h2>
53 |       <p>
54 |         The Franklin Running club meets at 6:00pm every Thursday
55 |         at the town square. Runs are three to five miles, at your
56 |         own pace.
57 |       </p>
58 |     </main>
59 |     <aside class="sidebar">
60 |       <div class="widget"></div>
61 |       <div class="widget"></div>
62 |       <div class="gizmo"></div>
63 |     </aside>
64 |   </div>
65 | </body>
66 | 


--------------------------------------------------------------------------------
/ch03/listing-3.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding-top: 4em;
21 |       padding-bottom: 4em;
22 |       color: #fff;
23 |       background-color: #0072b0;
24 |       border-radius: .5em;
25 |     }
26 | 
27 |   </style>
28 | </head>
29 | 
30 | <body>
31 |   <header>
32 |     <h1>Franklin Running Club</h1>
33 |   </header>
34 | </body>
35 | 


--------------------------------------------------------------------------------
/ch03/listing-3.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .container {
26 |       display: flex;
27 |     }
28 | 
29 |     .main {
30 |       width: 70%;
31 |       background-color: #fff;
32 |       border-radius: .5em;
33 |     }
34 | 
35 |     .sidebar {
36 |       width: 30%;
37 |       padding: 1.5em;
38 |       margin-left: 1.5em;
39 |       background-color: #fff;
40 |       border-radius: .5em;
41 |     }
42 | 
43 |   </style>
44 | </head>
45 | 
46 | <body>
47 |   <header>
48 |     <h1>Franklin Running Club</h1>
49 |   </header>
50 |   <div class="container">
51 |     <main class="main">
52 |       <h2>Come join us!</h2>
53 |       <div>
54 |         <p>
55 |           The Franklin Running club meets at 6:00pm every Thursday
56 |           at the town square. Runs are three to five miles, at your
57 |           own pace.
58 |         </p>
59 |       </div>
60 |     </main>
61 |     <aside class="sidebar">
62 |       <div class="widget"></div>
63 |       <div class="widget"></div>
64 |       <div class="gizmo"></div>
65 |     </aside>
66 |   </div>
67 | </body>
68 | 


--------------------------------------------------------------------------------
/ch03/listing-3.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding: 1em 1.5em;
21 |       color: #fff;
22 |       background-color: #0072b0;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |     .container {
27 |       display: flex;
28 |     }
29 | 
30 |     .main {
31 |       width: 70%;
32 |       background-color: #fff;
33 |       border-radius: .5em;
34 |     }
35 | 
36 |     .sidebar {
37 |       width: 30%;
38 |       padding: 1.5em;
39 |       margin-left: 1.5em;
40 |       background-color: #fff;
41 |       border-radius: .5em;
42 |     }
43 | 
44 |   </style>
45 | </head>
46 | 
47 | <body>
48 |   <header>
49 |     <h1>Franklin Running Club</h1>
50 |   </header>
51 |   <div class="container">
52 |     <main class="main">
53 |       <h2>Come join us!</h2>
54 |       <p>
55 |         The Franklin Running club meets at 6:00pm every Thursday
56 |         at the town square. Runs are three to five miles, at your
57 |         own pace.
58 |       </p>
59 |     </main>
60 |     <aside class="sidebar">
61 |     </aside>
62 |   </div>
63 | </body>
64 | 


--------------------------------------------------------------------------------
/ch03/listing-3.16.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding: 1em 1.5em;
21 |       color: #fff;
22 |       background-color: #0072b0;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |     .container {
27 |       display: flex;
28 |     }
29 | 
30 |     .main {
31 |       width: 70%;
32 |       background-color: #fff;
33 |       border-radius: .5em;
34 |     }
35 | 
36 |     .sidebar {
37 |       width: 30%;
38 |       padding: 1.5em;
39 |       margin-left: 1.5em;
40 |       background-color: #fff;
41 |       border-radius: .5em;
42 |     }
43 | 
44 |     .button-link {
45 |       display: block;
46 |       padding: .5em;
47 |       color: #fff;
48 |       background-color: #0090C9;
49 |       text-align: center;
50 |       text-decoration: none;
51 |       text-transform: uppercase;
52 |     }
53 | 
54 |   </style>
55 | </head>
56 | 
57 | <body>
58 |   <header>
59 |     <h1>Franklin Running Club</h1>
60 |   </header>
61 |   <div class="container">
62 |     <main class="main">
63 |       <h2>Come join us!</h2>
64 |       <p>
65 |         The Franklin Running club meets at 6:00pm every Thursday
66 |         at the town square. Runs are three to five miles, at your
67 |         own pace.
68 |       </p>
69 |     </main>
70 |     <aside class="sidebar">
71 |       <a href="/twitter" class="button-link">follow us on Twitter</a>
72 |       <a href="/facebook" class="button-link">like us on Facebook</a>
73 |     </aside>
74 |   </div>
75 | </body>
76 | 


--------------------------------------------------------------------------------
/ch03/listing-3.16b.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding: 1em 1.5em;
21 |       color: #fff;
22 |       background-color: #0072b0;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |     .container {
27 |       display: flex;
28 |     }
29 | 
30 |     .main {
31 |       width: 70%;
32 |       background-color: #fff;
33 |       border-radius: .5em;
34 |     }
35 | 
36 |     .sidebar {
37 |       width: 30%;
38 |       padding: 1.5em;
39 |       margin-left: 1.5em;
40 |       background-color: #fff;
41 |       border-radius: .5em;
42 |     }
43 | 
44 |     .button-link {
45 |       display: block;
46 |       padding: .5em;
47 |       margin-top: 1.5em;
48 |       color: #fff;
49 |       background-color: #0090C9;
50 |       text-align: center;
51 |       text-decoration: none;
52 |       text-transform: uppercase;
53 |     }
54 | 
55 |   </style>
56 | </head>
57 | 
58 | <body>
59 |   <header>
60 |     <h1>Franklin Running Club</h1>
61 |   </header>
62 |   <div class="container">
63 |     <main class="main">
64 |       <h2>Come join us!</h2>
65 |       <p>
66 |         The Franklin Running club meets at 6:00pm every Thursday
67 |         at the town square. Runs are three to five miles, at your
68 |         own pace.
69 |       </p>
70 |     </main>
71 |     <aside class="sidebar">
72 |       <a href="/twitter" class="button-link">follow us on Twitter</a>
73 |       <a href="/facebook" class="button-link">like us on Facebook</a>
74 |     </aside>
75 |   </div>
76 | </body>
77 | 


--------------------------------------------------------------------------------
/ch03/listing-3.17.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding: 1em 1.5em;
21 |       color: #fff;
22 |       background-color: #0072b0;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |     .container {
27 |       display: flex;
28 |     }
29 | 
30 |     .main {
31 |       width: 70%;
32 |       background-color: #fff;
33 |       border-radius: .5em;
34 |     }
35 | 
36 |     .sidebar {
37 |       width: 30%;
38 |       padding: 1.5em;
39 |       margin-left: 1.5em;
40 |       background-color: #fff;
41 |       border-radius: .5em;
42 |     }
43 | 
44 |     .button-link {
45 |       display: block;
46 |       padding: .5em;
47 |       color: #fff;
48 |       background-color: #0090C9;
49 |       text-align: center;
50 |       text-decoration: none;
51 |       text-transform: uppercase;
52 |     }
53 | 
54 |     .button-link + .button-link {
55 |       margin-top: 1.5em;
56 |     }
57 | 
58 |   </style>
59 | </head>
60 | 
61 | <body>
62 |   <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 Franklin Running club meets at 6:00pm every Thursday
70 |         at the town square. Runs are three to five miles, at your
71 |         own pace.
72 |       </p>
73 |     </main>
74 |     <aside class="sidebar">
75 |       <a href="/twitter" class="button-link">follow us on Twitter</a>
76 |       <a href="/facebook" class="button-link">like us on Facebook</a>
77 |     </aside>
78 |   </div>
79 | </body>
80 | 


--------------------------------------------------------------------------------
/ch03/listing-3.19.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       padding: 1em 1.5em;
21 |       color: #fff;
22 |       background-color: #0072b0;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |     .container {
27 |       display: flex;
28 |     }
29 | 
30 |     .main {
31 |       width: 70%;
32 |       background-color: #fff;
33 |       border-radius: .5em;
34 |     }
35 | 
36 |     .sidebar {
37 |       width: 30%;
38 |       padding: 1.5em;
39 |       margin-left: 1.5em;
40 |       background-color: #fff;
41 |       border-radius: .5em;
42 |     }
43 | 
44 |     .button-link {
45 |       display: block;
46 |       padding: .5em;
47 |       color: #fff;
48 |       background-color: #0090C9;
49 |       text-align: center;
50 |       text-decoration: none;
51 |       text-transform: uppercase;
52 |     }
53 | 
54 |     .button-link + .button-link {
55 |       margin-top: 1.5em;
56 |     }
57 | 
58 |     .sponsor-link {
59 |       display: block;
60 |       color: #0072b0;
61 |       font-weight: bold;
62 |       text-decoration: none;
63 |     }
64 | 
65 |   </style>
66 | </head>
67 | 
68 | <body>
69 |   <header>
70 |     <h1>Franklin Running Club</h1>
71 |   </header>
72 |   <div class="container">
73 |     <main class="main">
74 |       <h2>Come join us!</h2>
75 |       <p>
76 |         The Franklin Running club meets at 6:00pm every Thursday
77 |         at the town square. Runs are three to five miles, at your
78 |         own pace.
79 |       </p>
80 |     </main>
81 |     <aside class="sidebar">
82 |       <a href="/twitter" class="button-link">
83 |         follow us on Twitter
84 |       </a>
85 |       <a href="/facebook" class="button-link">
86 |         like us on Facebook
87 |       </a>
88 |       <a href="/sponsors" class="sponsor-link">
89 |         become a sponsor
90 |       </a>
91 |     </aside>
92 |   </div>
93 | </body>
94 | 


--------------------------------------------------------------------------------
/ch03/listing-3.2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       background-color: #eee;
 6 |       font-family: Helvetica, Arial, sans-serif;
 7 |     }
 8 | 
 9 |     header {
10 |       color: #fff;
11 |       background-color: #0072b0;
12 |       border-radius: .5em;
13 |     }
14 | 
15 |     .main {
16 |       background-color: #fff;
17 |       border-radius: .5em;
18 |     }
19 | 
20 |     .sidebar {
21 |       padding: 1.5em;
22 |       background-color: #fff;
23 |       border-radius: .5em;
24 |     }
25 | 
26 |   </style>
27 | </head>
28 | 
29 | <body>
30 |   <header>
31 |     <h1>Franklin Running Club</h1>
32 |   </header>
33 |   <div class="container">
34 |     <main class="main">
35 |       <h2>Come join us!</h2>
36 |       <p>
37 |         The Franklin Running club meets at 6:00pm every Thursday
38 |         at the town square. Runs are three to five miles, at your
39 |         own pace.
40 |       </p>
41 |     </main>
42 |     <aside class="sidebar">
43 |       <div class="widget"></div>
44 |       <div class="widget"></div>
45 |       <div class="gizmo"></div>
46 |     </aside>
47 |   </div>
48 | </body>
49 | 


--------------------------------------------------------------------------------
/ch03/listing-3.20.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     body * + * {
20 |       margin-top: 1.5em;
21 |     }
22 | 
23 |     header {
24 |       padding: 1em 1.5em;
25 |       color: #fff;
26 |       background-color: #0072b0;
27 |       border-radius: .5em;
28 |     }
29 | 
30 |     .container {
31 |       display: flex;
32 |     }
33 | 
34 |     .main {
35 |       width: 70%;
36 |       background-color: #fff;
37 |       border-radius: .5em;
38 |     }
39 | 
40 |     .sidebar {
41 |       width: 30%;
42 |       padding: 1.5em;
43 |       margin-left: 1.5em;
44 |       background-color: #fff;
45 |       border-radius: .5em;
46 |     }
47 | 
48 |     .button-link {
49 |       display: block;
50 |       padding: .5em;
51 |       color: #fff;
52 |       background-color: #0090C9;
53 |       text-align: center;
54 |       text-decoration: none;
55 |       text-transform: uppercase;
56 |     }
57 | 
58 |     .sponsor-link {
59 |       display: block;
60 |       color: #0072b0;
61 |       font-weight: bold;
62 |       text-decoration: none;
63 |     }
64 | 
65 |   </style>
66 | </head>
67 | 
68 | <body>
69 |   <header>
70 |     <h1>Franklin Running Club</h1>
71 |   </header>
72 |   <div class="container">
73 |     <main class="main">
74 |       <h2>Come join us!</h2>
75 |       <p>
76 |         The Franklin Running club meets at 6:00pm every Thursday
77 |         at the town square. Runs are three to five miles, at your
78 |         own pace.
79 |       </p>
80 |     </main>
81 |     <aside class="sidebar">
82 |       <a href="/twitter" class="button-link">
83 |         follow us on Twitter
84 |       </a>
85 |       <a href="/facebook" class="button-link">
86 |         like us on Facebook
87 |       </a>
88 |       <a href="/sponsors" class="sponsor-link">
89 |         become a sponsor
90 |       </a>
91 |     </aside>
92 |   </div>
93 | </body>
94 | 


--------------------------------------------------------------------------------
/ch03/listing-3.21.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     body * + * {
20 |       margin-top: 1.5em;
21 |     }
22 | 
23 |     header {
24 |       padding: 1em 1.5em;
25 |       color: #fff;
26 |       background-color: #0072b0;
27 |       border-radius: .5em;
28 |     }
29 | 
30 |     .container {
31 |       display: flex;
32 |     }
33 | 
34 |     .main {
35 |       width: 70%;
36 |       padding: 1em 1.5em;
37 |       background-color: #fff;
38 |       border-radius: .5em;
39 |     }
40 | 
41 |     .sidebar {
42 |       width: 30%;
43 |       padding: 1.5em;
44 |       margin-top: 0;
45 |       margin-left: 1.5em;
46 |       background-color: #fff;
47 |       border-radius: .5em;
48 |     }
49 | 
50 |     .button-link {
51 |       display: block;
52 |       padding: .5em;
53 |       color: #fff;
54 |       background-color: #0090C9;
55 |       text-align: center;
56 |       text-decoration: none;
57 |       text-transform: uppercase;
58 |     }
59 | 
60 |     .sponsor-link {
61 |       display: block;
62 |       color: #0072b0;
63 |       font-weight: bold;
64 |       text-decoration: none;
65 |     }
66 | 
67 |   </style>
68 | </head>
69 | 
70 | <body>
71 |   <header>
72 |     <h1>Franklin Running Club</h1>
73 |   </header>
74 |   <div class="container">
75 |     <main class="main">
76 |       <h2>Come join us!</h2>
77 |       <p>
78 |         The Franklin Running club meets at 6:00pm every Thursday
79 |         at the town square. Runs are three to five miles, at your
80 |         own pace.
81 |       </p>
82 |     </main>
83 |     <aside class="sidebar">
84 |       <a href="/twitter" class="button-link">
85 |         follow us on Twitter
86 |       </a>
87 |       <a href="/facebook" class="button-link">
88 |         like us on Facebook
89 |       </a>
90 |       <a href="/sponsors" class="sponsor-link">
91 |         become a sponsor
92 |       </a>
93 |     </aside>
94 |   </div>
95 | </body>
96 | 


--------------------------------------------------------------------------------
/ch03/listing-3.3.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       background-color: #eee;
 6 |       font-family: Helvetica, Arial, sans-serif;
 7 |     }
 8 | 
 9 |     header {
10 |       color: #fff;
11 |       background-color: #0072b0;
12 |       border-radius: .5em;
13 |     }
14 | 
15 |     .main {
16 |       float: left;
17 |       width: 70%;
18 |       background-color: #fff;
19 |       border-radius: .5em;
20 |     }
21 | 
22 |     .sidebar {
23 |       float: left;
24 |       width: 30%;
25 |       padding: 1.5em;
26 |       background-color: #fff;
27 |       border-radius: .5em;
28 |     }
29 | 
30 |   </style>
31 | </head>
32 | 
33 | <body>
34 |   <header>
35 |     <h1>Franklin Running Club</h1>
36 |   </header>
37 |   <div class="container">
38 |     <main class="main">
39 |       <h2>Come join us!</h2>
40 |       <p>
41 |         The Franklin Running club meets at 6:00pm every Thursday
42 |         at the town square. Runs are three to five miles, at your
43 |         own pace.
44 |       </p>
45 |     </main>
46 |     <aside class="sidebar">
47 |       <div class="widget"></div>
48 |       <div class="widget"></div>
49 |       <div class="gizmo"></div>
50 |     </aside>
51 |   </div>
52 | </body>
53 | 


--------------------------------------------------------------------------------
/ch03/listing-3.4.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     body {
 5 |       background-color: #eee;
 6 |       font-family: Helvetica, Arial, sans-serif;
 7 |     }
 8 | 
 9 |     header {
10 |       color: #fff;
11 |       background-color: #0072b0;
12 |       border-radius: .5em;
13 |     }
14 | 
15 |     .main {
16 |       box-sizing: border-box;
17 |       float: left;
18 |       width: 70%;
19 |       background-color: #fff;
20 |       border-radius: .5em;
21 |     }
22 | 
23 |     .sidebar {
24 |       box-sizing: border-box;
25 |       float: left;
26 |       width: 30%;
27 |       padding: 1.5em;
28 |       background-color: #fff;
29 |       border-radius: .5em;
30 |     }
31 | 
32 |   </style>
33 | </head>
34 | 
35 | <body>
36 |   <header>
37 |     <h1>Franklin Running Club</h1>
38 |   </header>
39 |   <div class="container">
40 |     <main class="main">
41 |       <h2>Come join us!</h2>
42 |       <p>
43 |         The Franklin Running club meets at 6:00pm every Thursday
44 |         at the town square. Runs are three to five miles, at your
45 |         own pace.
46 |       </p>
47 |     </main>
48 |     <aside class="sidebar">
49 |       <div class="widget"></div>
50 |       <div class="widget"></div>
51 |       <div class="gizmo"></div>
52 |     </aside>
53 |   </div>
54 | </body>
55 | 


--------------------------------------------------------------------------------
/ch03/listing-3.6.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .main {
26 |       float: left;
27 |       width: 70%;
28 |       background-color: #fff;
29 |       border-radius: .5em;
30 |     }
31 | 
32 |     .sidebar {
33 |       float: left;
34 |       width: 30%;
35 |       padding: 1.5em;
36 |       background-color: #fff;
37 |       border-radius: .5em;
38 |     }
39 | 
40 |   </style>
41 | </head>
42 | 
43 | <body>
44 |   <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 Franklin Running club meets at 6:00pm every Thursday
52 |         at the town square. Runs are three to five miles, at your
53 |         own pace.
54 |       </p>
55 |     </main>
56 |     <aside class="sidebar">
57 |       <div class="widget"></div>
58 |       <div class="widget"></div>
59 |       <div class="gizmo"></div>
60 |     </aside>
61 |   </div>
62 | </body>
63 | 


--------------------------------------------------------------------------------
/ch03/listing-3.7.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .main {
26 |       float: left;
27 |       width: 70%;
28 |       background-color: #fff;
29 |       border-radius: .5em;
30 |     }
31 | 
32 |     .sidebar {
33 |       float: left;
34 |       width: 29%;
35 |       margin-left: 1%;
36 |       padding: 1.5em;
37 |       background-color: #fff;
38 |       border-radius: .5em;
39 |     }
40 | 
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <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 Franklin Running club meets at 6:00pm every Thursday
53 |         at the town square. Runs are three to five miles, at your
54 |         own pace.
55 |       </p>
56 |     </main>
57 |     <aside class="sidebar">
58 |       <div class="widget"></div>
59 |       <div class="widget"></div>
60 |       <div class="gizmo"></div>
61 |     </aside>
62 |   </div>
63 | </body>
64 | 


--------------------------------------------------------------------------------
/ch03/listing-3.8.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .main {
26 |       float: left;
27 |       width: 70%;
28 |       background-color: #fff;
29 |       border-radius: .5em;
30 |     }
31 | 
32 |     .sidebar {
33 |       float: left;
34 |       width: calc(30% - 1.5em);
35 |       margin-left: 1.5em;
36 |       padding: 1.5em;
37 |       background-color: #fff;
38 |       border-radius: .5em;
39 |     }
40 | 
41 |   </style>
42 | </head>
43 | 
44 | <body>
45 |   <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 Franklin Running club meets at 6:00pm every Thursday
53 |         at the town square. Runs are three to five miles, at your
54 |         own pace.
55 |       </p>
56 |     </main>
57 |     <aside class="sidebar">
58 |       <div class="widget"></div>
59 |       <div class="widget"></div>
60 |       <div class="gizmo"></div>
61 |     </aside>
62 |   </div>
63 | </body>
64 | 


--------------------------------------------------------------------------------
/ch03/listing-3.9.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 |     :root {
 5 |       box-sizing: border-box;
 6 |     }
 7 | 
 8 |     *,
 9 |     ::before,
10 |     ::after {
11 |       box-sizing: inherit;
12 |     }
13 | 
14 |     body {
15 |       background-color: #eee;
16 |       font-family: Helvetica, Arial, sans-serif;
17 |     }
18 | 
19 |     header {
20 |       color: #fff;
21 |       background-color: #0072b0;
22 |       border-radius: .5em;
23 |     }
24 | 
25 |     .container {
26 |       display: table;
27 |       width: 100%;
28 |     }
29 | 
30 |     .main {
31 |       display: table-cell;
32 |       width: 70%;
33 |       background-color: #fff;
34 |       border-radius: .5em;
35 |     }
36 | 
37 |     .sidebar {
38 |       display: table-cell;
39 |       width: 30%;
40 |       margin-left: 1.5em;
41 |       padding: 1.5em;
42 |       background-color: #fff;
43 |       border-radius: .5em;
44 |     }
45 | 
46 |   </style>
47 | </head>
48 | 
49 | <body>
50 |   <header>
51 |     <h1>Franklin Running Club</h1>
52 |   </header>
53 |   <div class="container">
54 |     <main class="main">
55 |       <h2>Come join us!</h2>
56 |       <p>
57 |         The Franklin Running club meets at 6:00pm every Thursday
58 |         at the town square. Runs are three to five miles, at your
59 |         own pace.
60 |       </p>
61 |     </main>
62 |     <aside class="sidebar">
63 |       <div class="widget"></div>
64 |       <div class="widget"></div>
65 |       <div class="gizmo"></div>
66 |     </aside>
67 |   </div>
68 | </body>
69 | 


--------------------------------------------------------------------------------
/ch04/listing-4.2.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |   </style>
 38 | </head>
 39 | 
 40 | <body>
 41 |   <div class="container">
 42 |     <header>
 43 |       <h1>Franklin Running Club</h1>
 44 |     </header>
 45 | 
 46 |     <main class="main clearfix">
 47 |       <h2>Running tips</h2>
 48 | 
 49 |       <div>
 50 |         <div class="media">
 51 |           <img class="media-image" src="shoes.png">
 52 |           <div class="media-body">
 53 |             <h4>Strength</h4>
 54 |             <p>
 55 |               Strength training is an important part of
 56 |               injury prevention. Focus on your core&mdash;
 57 |               especially your abs and glutes.
 58 |             </p>
 59 |           </div>
 60 |         </div>
 61 | 
 62 |         <div class="media">
 63 |           <img class="media-image" src="runner.png">
 64 |           <div class="media-body">
 65 |             <h4>Cadence</h4>
 66 |             <p>
 67 |               Check your stride turnover. The most efficient
 68 |               runners take about 180 steps per minute.
 69 |             </p>
 70 |           </div>
 71 |         </div>
 72 | 
 73 |         <div class="media">
 74 |           <img class="media-image" src="runner.png">
 75 |           <div class="media-body">
 76 |             <h4>Change it up</h4>
 77 |             <p>
 78 |               Don't run the same every time you hit the
 79 |               road. Vary your pace, and vary the distance
 80 |               of your runs.
 81 |             </p>
 82 |           </div>
 83 |         </div>
 84 | 
 85 |         <div class="media">
 86 |           <img class="media-image" src="shoes.png">
 87 |           <div class="media-body">
 88 |             <h4>Focus on form</h4>
 89 |             <p>
 90 |               Run tall but relaxed. Your feet should hit
 91 |               the ground beneath your hips, not out in
 92 |               front of you.
 93 |             </p>
 94 |           </div>
 95 |         </div>
 96 | 
 97 |       </div>
 98 |     </main>
 99 |   </div>
100 | </body>
101 | 


--------------------------------------------------------------------------------
/ch04/listing-4.3.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |     .container {
 38 |       max-width: 1080px;
 39 |       margin: 0 auto;
 40 |     }
 41 |   </style>
 42 | </head>
 43 | 
 44 | <body>
 45 |   <div class="container">
 46 |     <header>
 47 |       <h1>Franklin Running Club</h1>
 48 |     </header>
 49 | 
 50 |     <main class="main clearfix">
 51 |       <h2>Running tips</h2>
 52 | 
 53 |       <div>
 54 |         <div class="media">
 55 |           <img class="media-image" src="runner.png">
 56 |           <div class="media-body">
 57 |             <h4>Strength</h4>
 58 |             <p>
 59 |               Strength training is an important part of
 60 |               injury prevention. Focus on your core&mdash;
 61 |               especially your abs and glutes.
 62 |             </p>
 63 |           </div>
 64 |         </div>
 65 | 
 66 |         <div class="media">
 67 |           <img class="media-image" src="shoes.png">
 68 |           <div class="media-body">
 69 |             <h4>Cadence</h4>
 70 |             <p>
 71 |               Check your stride turnover. The most efficient
 72 |               runners take about 180 steps per minute.
 73 |             </p>
 74 |           </div>
 75 |         </div>
 76 | 
 77 |         <div class="media">
 78 |           <img class="media-image" src="shoes.png">
 79 |           <div class="media-body">
 80 |             <h4>Change it up</h4>
 81 |             <p>
 82 |               Don't run the same every time you hit the
 83 |               road. Vary your pace, and vary the distance
 84 |               of your runs.
 85 |             </p>
 86 |           </div>
 87 |         </div>
 88 | 
 89 |         <div class="media">
 90 |           <img class="media-image" src="runner.png">
 91 |           <div class="media-body">
 92 |             <h4>Focus on form</h4>
 93 |             <p>
 94 |               Run tall but relaxed. Your feet should hit
 95 |               the ground beneath your hips, not out in
 96 |               front of you.
 97 |             </p>
 98 |           </div>
 99 |         </div>
100 | 
101 |       </div>
102 |     </main>
103 |   </div>
104 | </body>
105 | 


--------------------------------------------------------------------------------
/ch04/listing-4.4.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |     .container {
 38 |       max-width: 1080px;
 39 |       margin: 0 auto;
 40 |     }
 41 | 
 42 |     .media {
 43 |       float: left;
 44 |       width: 50%;
 45 |       padding: 1.5em;
 46 |       background-color: #eee;
 47 |       border-radius: 0.5em;
 48 |     }
 49 |   </style>
 50 | </head>
 51 | 
 52 | <body>
 53 |   <div class="container">
 54 |     <header>
 55 |       <h1>Franklin Running Club</h1>
 56 |     </header>
 57 | 
 58 |     <main class="main clearfix">
 59 |       <h2>Running tips</h2>
 60 | 
 61 |       <div>
 62 |         <div class="media">
 63 |           <img class="media-image" src="runner.png">
 64 |           <div class="media-body">
 65 |             <h4>Strength</h4>
 66 |             <p>
 67 |               Strength training is an important part of
 68 |               injury prevention. Focus on your core&mdash;
 69 |               especially your abs and glutes.
 70 |             </p>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         <div class="media">
 75 |           <img class="media-image" src="shoes.png">
 76 |           <div class="media-body">
 77 |             <h4>Cadence</h4>
 78 |             <p>
 79 |               Check your stride turnover. The most efficient
 80 |               runners take about 180 steps per minute.
 81 |             </p>
 82 |           </div>
 83 |         </div>
 84 | 
 85 |         <div class="media">
 86 |           <img class="media-image" src="shoes.png">
 87 |           <div class="media-body">
 88 |             <h4>Change it up</h4>
 89 |             <p>
 90 |               Don't run the same every time you hit the
 91 |               road. Vary your pace, and vary the distance
 92 |               of your runs.
 93 |             </p>
 94 |           </div>
 95 |         </div>
 96 | 
 97 |         <div class="media">
 98 |           <img class="media-image" src="runner.png">
 99 |           <div class="media-body">
100 |             <h4>Focus on form</h4>
101 |             <p>
102 |               Run tall but relaxed. Your feet should hit
103 |               the ground beneath your hips, not out in
104 |               front of you.
105 |             </p>
106 |           </div>
107 |         </div>
108 | 
109 |       </div>
110 |     </main>
111 |   </div>
112 | </body>
113 | 


--------------------------------------------------------------------------------
/ch04/listing-4.5.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |     .container {
 38 |       max-width: 1080px;
 39 |       margin: 0 auto;
 40 |     }
 41 | 
 42 |     .media {
 43 |       float: left;
 44 |       width: 50%;
 45 |       padding: 1.5em;
 46 |       background-color: #eee;
 47 |       border-radius: 0.5em;
 48 |     }
 49 |   </style>
 50 | </head>
 51 | 
 52 | <body>
 53 |   <div class="container">
 54 |     <header>
 55 |       <h1>Franklin Running Club</h1>
 56 |     </header>
 57 | 
 58 |     <main class="main clearfix">
 59 |       <h2>Running tips</h2>
 60 | 
 61 |       <div>
 62 |         <div class="media">
 63 |           <img class="media-image" src="runner.png">
 64 |           <div class="media-body">
 65 |             <h4>Strength</h4>
 66 |             <p>
 67 |               Strength training is an important part of
 68 |               injury prevention. Focus on your core&mdash;
 69 |               especially your abs and glutes.
 70 |             </p>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         <div class="media">
 75 |           <img class="media-image" src="shoes.png">
 76 |           <div class="media-body">
 77 |             <h4>Cadence</h4>
 78 |             <p>
 79 |               Check your stride turnover. The most efficient
 80 |               runners take about 180 steps per minute.
 81 |             </p>
 82 |           </div>
 83 |         </div>
 84 | 
 85 |         <div class="media">
 86 |           <img class="media-image" src="shoes.png">
 87 |           <div class="media-body">
 88 |             <h4>Change it up</h4>
 89 |             <p>
 90 |               Don't run the same every time you hit the
 91 |               road. Vary your pace, and vary the distance
 92 |               of your runs.
 93 |             </p>
 94 |           </div>
 95 |         </div>
 96 | 
 97 |         <div class="media">
 98 |           <img class="media-image" src="runner.png">
 99 |           <div class="media-body">
100 |             <h4>Focus on form</h4>
101 |             <p>
102 |               Run tall but relaxed. Your feet should hit
103 |               the ground beneath your hips, not out in
104 |               front of you.
105 |             </p>
106 |           </div>
107 |         </div>
108 | 
109 |       </div>
110 |       <div style="clear: both"></div>
111 |     </main>
112 |   </div>
113 | </body>
114 | 


--------------------------------------------------------------------------------
/ch04/listing-4.6.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |     .container {
 38 |       max-width: 1080px;
 39 |       margin: 0 auto;
 40 |     }
 41 | 
 42 |     .media {
 43 |       float: left;
 44 |       width: 50%;
 45 |       padding: 1.5em;
 46 |       background-color: #eee;
 47 |       border-radius: 0.5em;
 48 |     }
 49 | 
 50 |     .clearfix::after {
 51 |       display: block;
 52 |       content: " ";
 53 |       clear: both;
 54 |     }
 55 |   </style>
 56 | </head>
 57 | 
 58 | <body>
 59 |   <div class="container">
 60 |     <header>
 61 |       <h1>Franklin Running Club</h1>
 62 |     </header>
 63 | 
 64 |     <main class="main clearfix">
 65 |       <h2>Running tips</h2>
 66 | 
 67 |       <div>
 68 |         <div class="media">
 69 |           <img class="media-image" src="runner.png">
 70 |           <div class="media-body">
 71 |             <h4>Strength</h4>
 72 |             <p>
 73 |               Strength training is an important part of
 74 |               injury prevention. Focus on your core&mdash;
 75 |               especially your abs and glutes.
 76 |             </p>
 77 |           </div>
 78 |         </div>
 79 | 
 80 |         <div class="media">
 81 |           <img class="media-image" src="shoes.png">
 82 |           <div class="media-body">
 83 |             <h4>Cadence</h4>
 84 |             <p>
 85 |               Check your stride turnover. The most efficient
 86 |               runners take about 180 steps per minute.
 87 |             </p>
 88 |           </div>
 89 |         </div>
 90 | 
 91 |         <div class="media">
 92 |           <img class="media-image" src="shoes.png">
 93 |           <div class="media-body">
 94 |             <h4>Change it up</h4>
 95 |             <p>
 96 |               Don't run the same every time you hit the
 97 |               road. Vary your pace, and vary the distance
 98 |               of your runs.
 99 |             </p>
100 |           </div>
101 |         </div>
102 | 
103 |         <div class="media">
104 |           <img class="media-image" src="runner.png">
105 |           <div class="media-body">
106 |             <h4>Focus on form</h4>
107 |             <p>
108 |               Run tall but relaxed. Your feet should hit
109 |               the ground beneath your hips, not out in
110 |               front of you.
111 |             </p>
112 |           </div>
113 |         </div>
114 |       </div>
115 |     </main>
116 |   </div>
117 | </body>
118 | 


--------------------------------------------------------------------------------
/ch04/listing-4.7.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #eee;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     header {
 24 |       padding: 1em 1.5em;
 25 |       color: #fff;
 26 |       background-color: #0072b0;
 27 |       border-radius: .5em;
 28 |       margin-bottom: 1.5em;
 29 |     }
 30 | 
 31 |     .main {
 32 |       padding: 0 1.5em;
 33 |       background-color: #fff;
 34 |       border-radius: .5em;
 35 |     }
 36 | 
 37 |     .container {
 38 |       max-width: 1080px;
 39 |       margin: 0 auto;
 40 |     }
 41 | 
 42 |     .media {
 43 |       float: left;
 44 |       width: 50%;
 45 |       padding: 1.5em;
 46 |       background-color: #eee;
 47 |       border-radius: 0.5em;
 48 |     }
 49 | 
 50 |     .clearfix::before,
 51 |     .clearfix::after {
 52 |       display: table;
 53 |       content: " ";
 54 |     }
 55 |     .clearfix::after {
 56 |       clear: both;
 57 |     }
 58 |   </style>
 59 | </head>
 60 | 
 61 | <body>
 62 |   <div class="container">
 63 |     <header>
 64 |       <h1>Franklin Running Club</h1>
 65 |     </header>
 66 | 
 67 |     <main class="main clearfix">
 68 |       <h2>Running tips</h2>
 69 | 
 70 |       <div>
 71 |         <div class="media">
 72 |           <img class="media-image" src="runner.png">
 73 |           <div class="media-body">
 74 |             <h4>Strength</h4>
 75 |             <p>
 76 |               Strength training is an important part of
 77 |               injury prevention. Focus on your core&mdash;
 78 |               especially your abs and glutes.
 79 |             </p>
 80 |           </div>
 81 |         </div>
 82 | 
 83 |         <div class="media">
 84 |           <img class="media-image" src="shoes.png">
 85 |           <div class="media-body">
 86 |             <h4>Cadence</h4>
 87 |             <p>
 88 |               Check your stride turnover. The most efficient
 89 |               runners take about 180 steps per minute.
 90 |             </p>
 91 |           </div>
 92 |         </div>
 93 | 
 94 |         <div class="media">
 95 |           <img class="media-image" src="shoes.png">
 96 |           <div class="media-body">
 97 |             <h4>Change it up</h4>
 98 |             <p>
 99 |               Don't run the same every time you hit the
100 |               road. Vary your pace, and vary the distance
101 |               of your runs.
102 |             </p>
103 |           </div>
104 |         </div>
105 | 
106 |         <div class="media">
107 |           <img class="media-image" src="runner.png">
108 |           <div class="media-body">
109 |             <h4>Focus on form</h4>
110 |             <p>
111 |               Run tall but relaxed. Your feet should hit
112 |               the ground beneath your hips, not out in
113 |               front of you.
114 |             </p>
115 |           </div>
116 |         </div>
117 |       </div>
118 |     </main>
119 |   </div>
120 | </body>
121 | 


--------------------------------------------------------------------------------
/ch04/runner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch04/runner.png


--------------------------------------------------------------------------------
/ch04/shoes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch04/shoes.png


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


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


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


--------------------------------------------------------------------------------
/ch05/listing-5.5.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     :root {
  5 |       box-sizing: border-box;
  6 |     }
  7 | 
  8 |     *,
  9 |     ::before,
 10 |     ::after {
 11 |       box-sizing: inherit;
 12 |     }
 13 | 
 14 |     body {
 15 |       background-color: #709b90;
 16 |       font-family: Helvetica, Arial, sans-serif;
 17 |     }
 18 | 
 19 |     body * + * {
 20 |       margin-top: 1.5em;
 21 |     }
 22 | 
 23 |     .container {
 24 |       max-width: 1080px;
 25 |       margin: 0 auto;
 26 |     }
 27 | 
 28 |     .site-nav {
 29 |       display: flex;
 30 |       padding: .5em;
 31 |       background-color: #5f4b44;
 32 |       list-style-type: none;
 33 |       border-radius: .2em;
 34 |     }
 35 | 
 36 |     .site-nav > li {
 37 |       margin-top: 0;
 38 |     }
 39 | 
 40 |     .site-nav > li > a {
 41 |       display: block;
 42 |       padding: .5em 1em;
 43 |       background-color: #cc6b5a;
 44 |       color: white;
 45 |       text-decoration: none;
 46 |     }
 47 | 
 48 |     .site-nav > li + li {
 49 |       margin-left: 1.5em;
 50 |     }
 51 | 
 52 |     .site-nav > .nav-right {
 53 |       margin-left: auto;
 54 |     }
 55 | 
 56 |   </style>
 57 | </head>
 58 | 
 59 | <body>
 60 |   <div class="container">
 61 |     <header>
 62 |       <h1>Ink</h1>
 63 |     </header>
 64 |     <nav>
 65 |       <ul class="site-nav">
 66 |         <li><a href="/">Home</a></li>
 67 |         <li><a href="/features">Features</a></li>
 68 |         <li><a href="/pricing">Pricing</a></li>
 69 |         <li><a href="/support">Support</a></li>
 70 |         <li class="nav-right">
 71 |           <a href="/about">About</a>
 72 |         </li>
 73 |       </ul>
 74 |     </nav>
 75 |     <main class="flex">
 76 |       <div class="column-main tile">
 77 |         <h1>Team collaboration done right</h1>
 78 |         <p>Thousands of teams from all over the
 79 |           world turn to <b>Ink</b> to communicate
 80 |           and get things done.</p>
 81 |       </div>
 82 |       <div class="column-sidebar">
 83 |         <div class="tile">
 84 |           <form class="login-form">
 85 |             <h3>Login</h3>
 86 |             <p>
 87 |               <label for="username">Username</label>
 88 |               <input id="username" type="text"
 89 |                 name="username"/>
 90 |             </p>
 91 |             <p>
 92 |               <label for="password">Password</label>
 93 |               <input id="password" type="password"
 94 |                 name="password"/>
 95 |             </p>
 96 |             <button type="submit">Login</button>
 97 |           </form>
 98 |         </div>
 99 |         <div class="tile centered">
100 |           <small>Starting at</small>
101 |           <div class="cost">
102 |             <span class="cost-currency">$</span>
103 |             <span class="cost-dollars">20</span>
104 |             <span class="cost-cents">.00</span>
105 |           </div>
106 |           <a class="cta-button" href="/pricing">
107 |             Sign up
108 |           </a>
109 |         </div>
110 |       </div>
111 |     </main>
112 |   </div>
113 | </body>
114 | 


--------------------------------------------------------------------------------
/ch06/images/bear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/bear.jpg


--------------------------------------------------------------------------------
/ch06/images/bird.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/bird.jpg


--------------------------------------------------------------------------------
/ch06/images/eagle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/eagle.jpg


--------------------------------------------------------------------------------
/ch06/images/elephants.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/elephants.jpg


--------------------------------------------------------------------------------
/ch06/images/monkey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/monkey.jpg


--------------------------------------------------------------------------------
/ch06/images/owl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/owl.jpg


--------------------------------------------------------------------------------
/ch06/images/swan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch06/images/swan.jpg


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


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


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


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


--------------------------------------------------------------------------------
/ch06/listing-6.4.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 | :root {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | *,
  9 | ::before,
 10 | ::after {
 11 |   box-sizing: inherit;
 12 | }
 13 | 
 14 | body {
 15 |   background-color: #709b90;
 16 |   font-family: Helvetica, Arial, sans-serif;
 17 | }
 18 | 
 19 | .container {
 20 |   display: grid;
 21 |   grid-template-columns: 2fr 1fr;
 22 |   grid-template-rows: repeat(4, auto);
 23 |   grid-gap: 1.5em;
 24 |   max-width: 1080px;
 25 |   margin: 0 auto;
 26 | }
 27 | 
 28 | header,
 29 | nav {
 30 |   grid-column: 1 / 3;
 31 |   grid-row: span 1;
 32 | }
 33 | 
 34 | .main {
 35 |   grid-column: 1 / 2;
 36 |   grid-row: 3 / 5;
 37 | }
 38 | 
 39 | .sidebar-top {
 40 |   grid-column: 2 / 3;
 41 |   grid-row: 3 / 4;
 42 | }
 43 | 
 44 | .sidebar-bottom {
 45 |   grid-column: 2 / 3;
 46 |   grid-row: 4 / 5;
 47 | }
 48 | 
 49 | .tile {
 50 |   padding: 1.5em;
 51 |   background-color: #fff;
 52 | }
 53 | 
 54 | .tile > :first-child {
 55 |   margin-top: 0;
 56 | }
 57 | 
 58 | .tile * + * {
 59 |   margin-top: 1.5em;
 60 | }
 61 |   </style>
 62 | </head>
 63 | <body>
 64 |   <div class="container">
 65 |     <header>
 66 |       <h1 class="page-heading">Ink</h1>
 67 |     </header>
 68 |     <nav>
 69 |       <ul class="site-nav">
 70 |         <li><a href="/">Home</a></li>
 71 |         <li><a href="/features">Features</a></li>
 72 |         <li><a href="/pricing">Pricing</a></li>
 73 |         <li><a href="/support">Support</a></li>
 74 |         <li class="nav-right">
 75 |           <a href="/about">About</a>
 76 |         </li>
 77 |       </ul>
 78 |     </nav>
 79 |     <main class="main tile">
 80 |       <h1>Team collaboration done right</h1>
 81 |       <p>Thousands of teams from all over the
 82 |         world turn to <b>Ink</b> to communicate
 83 |         and get things done.</p>
 84 |     </main>
 85 |     <div class="sidebar-top tile">
 86 |       <form class="login-form">
 87 |         <h3>Login</h3>
 88 |         <p>
 89 |           <label for="username">Username</label>
 90 |           <input id="username" type="text"
 91 |             name="username"/>
 92 |         </p>
 93 |         <p>
 94 |           <label for="password">Password</label>
 95 |           <input id="password" type="password"
 96 |             name="password"/>
 97 |         </p>
 98 |         <button type="submit">Login</button>
 99 |       </form>
100 |     </div>
101 |     <div class="sidebar-bottom tile centered">
102 |       <small>Starting at</small>
103 |       <div class="cost">
104 |         <span class="cost-currency">$</span>
105 |         <span class="cost-dollars">20</span>
106 |         <span class="cost-cents">.00</span>
107 |       </div>
108 |       <a class="cta-button" href="/pricing">
109 |         Sign up
110 |       </a>
111 |     </div>
112 |   </div>
113 | </body>
114 | 


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


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


--------------------------------------------------------------------------------
/ch07/listing-7.2.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     body {
  5 |       font-family: Helvetica, Arial, sans-serif;
  6 |       min-height: 200vh;
  7 |       margin: 0;
  8 |     }
  9 | 
 10 |     button {
 11 |       padding: .5em .7em;
 12 |       border: 1px solid #8d8d8d;
 13 |       background-color: white;
 14 |       font-size: 1em;
 15 |     }
 16 | 
 17 |     .top-banner {
 18 |       padding: 1em 0;
 19 |       background-color: #ffd698;
 20 |     }
 21 | 
 22 |     .top-banner-inner {
 23 |       width: 80%;
 24 |       max-width: 1000px;
 25 |       margin: 0 auto;
 26 |     }
 27 | 
 28 |     .modal {
 29 |       display: none;
 30 |     }
 31 | 
 32 |     .modal-backdrop {
 33 |       position: fixed;
 34 |       top: 0;
 35 |       right: 0;
 36 |       bottom: 0;
 37 |       left: 0;
 38 |       background-color: rgba(0, 0, 0, 0.5);
 39 |     }
 40 | 
 41 |     .modal-body {
 42 |       position: fixed;
 43 |       top: 3em;
 44 |       bottom: 3em;
 45 |       right: 20%;
 46 |       left: 20%;
 47 |       padding: 2em 3em;
 48 |       background-color: white;
 49 |       overflow: auto;
 50 |     }
 51 | 
 52 |     .modal-close {
 53 |       cursor: pointer;
 54 |     }
 55 |   </style>
 56 | </head>
 57 | 
 58 | <body>
 59 |   <header class="top-banner">
 60 |     <div class="top-banner-inner">
 61 |       <p>Find out what's going on at Wombat Coffee each
 62 |         month. Sign up for our newsletter:
 63 |         <button id="open">Sign up</button>
 64 |       </p>
 65 |     </div>
 66 |   </header>
 67 |   <div class="modal" id="modal">
 68 |     <div class="modal-backdrop"></div>
 69 |     <div class="modal-body">
 70 |       <button class="modal-close" id="close">close</button>
 71 |       <h2>Wombat Newsletter</h2>
 72 |       <p>Sign up for our monthly newsletter. No spam.
 73 |          We promise!</p>
 74 |       <form>
 75 |         <p>
 76 |           <label for="email">Email address:</label>
 77 |           <input type="text" name="email"/>
 78 |         </p>
 79 |         <p><button type="submit">Submit</button></p>
 80 |       </form>
 81 |     </div>
 82 |   </div>
 83 | 
 84 |   <script type="text/javascript">
 85 |   var button = document.getElementById('open');
 86 | var close = document.getElementById('close');
 87 | var modal = document.getElementById('modal');
 88 | 
 89 | button.addEventListener('click', function(event) {
 90 |   event.preventDefault();
 91 |   modal.style.display = 'block';
 92 | });
 93 | 
 94 | close.addEventListener('click', function(event) {
 95 |   event.preventDefault();
 96 |   modal.style.display = 'none';
 97 | });
 98 | </script>
 99 | </body>
100 | 


--------------------------------------------------------------------------------
/ch07/listing-7.3.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     body {
  5 |       font-family: Helvetica, Arial, sans-serif;
  6 |       min-height: 200vh;
  7 |       margin: 0;
  8 |     }
  9 | 
 10 |     button {
 11 |       padding: .5em .7em;
 12 |       border: 1px solid #8d8d8d;
 13 |       background-color: white;
 14 |       font-size: 1em;
 15 |     }
 16 | 
 17 |     .top-banner {
 18 |       padding: 1em 0;
 19 |       background-color: #ffd698;
 20 |     }
 21 | 
 22 |     .top-banner-inner {
 23 |       width: 80%;
 24 |       max-width: 1000px;
 25 |       margin: 0 auto;
 26 |     }
 27 | 
 28 |     .modal {
 29 |       display: none;
 30 |     }
 31 | 
 32 |     .modal-backdrop {
 33 |       position: fixed;
 34 |       top: 0;
 35 |       right: 0;
 36 |       bottom: 0;
 37 |       left: 0;
 38 |       background-color: rgba(0, 0, 0, 0.5);
 39 |     }
 40 | 
 41 |     .modal-body {
 42 |       position: fixed;
 43 |       top: 3em;
 44 |       bottom: 3em;
 45 |       right: 20%;
 46 |       left: 20%;
 47 |       padding: 2em 3em;
 48 |       background-color: white;
 49 |       overflow: auto;
 50 |     }
 51 | 
 52 |     .modal-close {
 53 |       position: absolute;
 54 |       top: 0.3em;
 55 |       right: 0.3em;
 56 |       padding: 0.3em;
 57 |       cursor: pointer;
 58 |     }
 59 |   </style>
 60 | </head>
 61 | 
 62 | <body>
 63 |   <header class="top-banner">
 64 |     <div class="top-banner-inner">
 65 |       <p>Find out what's going on at Wombat Coffee each
 66 |         month. Sign up for our newsletter:
 67 |         <button id="open">Sign up</button>
 68 |       </p>
 69 |     </div>
 70 |   </header>
 71 |   <div class="modal" id="modal">
 72 |     <div class="modal-backdrop"></div>
 73 |     <div class="modal-body">
 74 |       <button class="modal-close" id="close">close</button>
 75 |       <h2>Wombat Newsletter</h2>
 76 |       <p>Sign up for our monthly newsletter. No spam.
 77 |          We promise!</p>
 78 |       <form>
 79 |         <p>
 80 |           <label for="email">Email address:</label>
 81 |           <input type="text" name="email"/>
 82 |         </p>
 83 |         <p><button type="submit">Submit</button></p>
 84 |       </form>
 85 |     </div>
 86 |   </div>
 87 | 
 88 |   <script type="text/javascript">
 89 |   var button = document.getElementById('open');
 90 | var close = document.getElementById('close');
 91 | var modal = document.getElementById('modal');
 92 | 
 93 | button.addEventListener('click', function(event) {
 94 |   event.preventDefault();
 95 |   modal.style.display = 'block';
 96 | });
 97 | 
 98 | close.addEventListener('click', function(event) {
 99 |   event.preventDefault();
100 |   modal.style.display = 'none';
101 | });
102 | </script>
103 | </body>
104 | 


--------------------------------------------------------------------------------
/ch07/listing-7.4.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 |   <style>
  4 |     body {
  5 |       font-family: Helvetica, Arial, sans-serif;
  6 |       min-height: 200vh;
  7 |       margin: 0;
  8 |     }
  9 | 
 10 |     button {
 11 |       padding: .5em .7em;
 12 |       border: 1px solid #8d8d8d;
 13 |       background-color: white;
 14 |       font-size: 1em;
 15 |     }
 16 | 
 17 |     .top-banner {
 18 |       padding: 1em 0;
 19 |       background-color: #ffd698;
 20 |     }
 21 | 
 22 |     .top-banner-inner {
 23 |       width: 80%;
 24 |       max-width: 1000px;
 25 |       margin: 0 auto;
 26 |     }
 27 | 
 28 |     .modal {
 29 |       display: none;
 30 |     }
 31 | 
 32 |     .modal-backdrop {
 33 |       position: fixed;
 34 |       top: 0;
 35 |       right: 0;
 36 |       bottom: 0;
 37 |       left: 0;
 38 |       background-color: rgba(0, 0, 0, 0.5);
 39 |     }
 40 | 
 41 |     .modal-body {
 42 |       position: fixed;
 43 |       top: 3em;
 44 |       bottom: 3em;
 45 |       right: 20%;
 46 |       left: 20%;
 47 |       padding: 2em 3em;
 48 |       background-color: white;
 49 |       overflow: auto;
 50 |     }
 51 | 
 52 |     .modal-close {
 53 |       position: absolute;
 54 |       top: 0;
 55 |       right: 0;
 56 |       padding: 0.3em;
 57 |       font-size: 2em;
 58 |       height: 1.5em;
 59 |       width: 1.5em;
 60 |       cursor: pointer;
 61 |       border: 0;
 62 |     }
 63 |     .modal-close::before {
 64 |       display: block;
 65 |       content: '\00D7';
 66 |     }
 67 | 
 68 |     .sr-only {
 69 |       position: absolute;
 70 |       width: 1px;
 71 |       height: 1px;
 72 |       padding: 0;
 73 |       margin: -1px;
 74 |       overflow: hidden;
 75 |     }
 76 |   </style>
 77 | </head>
 78 | 
 79 | <body>
 80 |   <header class="top-banner">
 81 |     <div class="top-banner-inner">
 82 |       <p>Find out what's going on at Wombat Coffee each
 83 |         month. Sign up for our newsletter:
 84 |         <button id="open">Sign up</button>
 85 |       </p>
 86 |     </div>
 87 |   </header>
 88 |   <div class="modal" id="modal">
 89 |     <div class="modal-backdrop"></div>
 90 |     <div class="modal-body">
 91 |       <button class="modal-close" id="close">
 92 |         <span class="sr-only">close</span>
 93 |       </button>
 94 |       <h2>Wombat Newsletter</h2>
 95 |       <p>Sign up for our monthly newsletter. No spam.
 96 |          We promise!</p>
 97 |       <form>
 98 |         <p>
 99 |           <label for="email">Email address:</label>
100 |           <input type="text" name="email"/>
101 |         </p>
102 |         <p><button type="submit">Submit</button></p>
103 |       </form>
104 |     </div>
105 |   </div>
106 | 
107 |   <script type="text/javascript">
108 |   var button = document.getElementById('open');
109 | var close = document.getElementById('close');
110 | var modal = document.getElementById('modal');
111 | 
112 | button.addEventListener('click', function(event) {
113 |   event.preventDefault();
114 |   modal.style.display = 'block';
115 | });
116 | 
117 | close.addEventListener('click', function(event) {
118 |   event.preventDefault();
119 |   modal.style.display = 'none';
120 | });
121 | </script>
122 | </body>
123 | 


--------------------------------------------------------------------------------
/ch08/coffee-beans-medium.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch08/coffee-beans-medium.jpg


--------------------------------------------------------------------------------
/ch08/coffee-beans-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch08/coffee-beans-small.jpg


--------------------------------------------------------------------------------
/ch08/coffee-beans.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch08/coffee-beans.jpg


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


--------------------------------------------------------------------------------
/ch08/listing-8.16.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 image example</title>
 7 |   <style>
 8 |     img {
 9 |       max-width: 100%;
10 |     }
11 |   </style>
12 | </head>
13 | 
14 | <body>
15 | 
16 |   <img alt="A white coffee mug on a bed of coffee beans"
17 |        src="coffee-beans-small.jpg"
18 |        srcset="coffee-beans-small.jpg 560w,
19 |                coffee-beans-medium.jpg 800w,
20 |                coffee-beans.jpg 1280w">
21 | 
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |       margin: 0;
20 |     }
21 |   </style>
22 | </head>
23 | 
24 | <body>
25 | 
26 | </body>
27 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .message {
22 |       padding: 0.8em 1.2em;
23 |       border-radius: 0.2em;
24 |       border: 1px solid #265559;
25 |       color: #265559;
26 |       background-color: #e0f0f2;
27 |     }
28 |   </style>
29 | </head>
30 | 
31 | <body>
32 |   <div class="message">
33 |     Save successful
34 |   </div>
35 | 
36 | </body>
37 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .message {
22 |       padding: 0.8em 1.2em;
23 |       border-radius: 0.2em;
24 |       border: 1px solid #265559;
25 |       color: #265559;
26 |       background-color: #e0f0f2;
27 |     }
28 | 
29 |     .message--success {
30 |       color: #2f5926;
31 |       border-color: #2f5926;
32 |       background-color:  #cfe8c9;
33 |     }
34 | 
35 |     .message--warning {
36 |       color: #594826;
37 |       border-color: #594826;
38 |       background-color:  #e8dec9;
39 |     }
40 | 
41 |     .message--error {
42 |       color: #59262f;
43 |       border-color: #59262f;
44 |       background-color:  #e8c9cf;
45 |     }
46 |   </style>
47 | </head>
48 | 
49 | <body>
50 |   <div class="message message--success">
51 |     Save successful
52 |   </div>
53 | 
54 |   <div class="message message--warning">
55 |     Password strength: Weak
56 |   </div>
57 | 
58 |   <div class="message message--error">
59 |     Invalid password
60 |   </div>
61 | </body>
62 | 


--------------------------------------------------------------------------------
/ch09/listing-9.06.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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .message {
22 |       padding: 0.8em 1.2em;
23 |       border-radius: 0.2em;
24 |       border: 1px solid #265559;
25 |       color: #265559;
26 |       background-color: #e0f0f2;
27 |     }
28 | 
29 |     .message--success {
30 |       color: #2f5926;
31 |       border-color: #2f5926;
32 |       background-color:  #cfe8c9;
33 |     }
34 | 
35 |     .message--warning {
36 |       color: #594826;
37 |       border-color: #594826;
38 |       background-color:  #e8dec9;
39 |     }
40 | 
41 |     .message--error {
42 |       color: #59262f;
43 |       border-color: #59262f;
44 |       background-color:  #e8c9cf;
45 |     }
46 | 
47 |     .button {
48 |       padding: 0.5em 0.8em;
49 |       border: 1px solid #265559;
50 |       border-radius: 0.2em;
51 |       background-color: transparent;
52 |       font-size: 1rem;
53 |     }
54 | 
55 |     .button--success {
56 |       border-color: #cfe8c9;
57 |       color: #fff;
58 |       background-color: #2f5926;
59 |     }
60 | 
61 |     .button--danger {
62 |       border-color: #e8c9c9;
63 |       color: #fff;
64 |       background-color: #a92323;
65 |     }
66 | 
67 |     .button--small {
68 |       font-size: 0.8rem;
69 |     }
70 | 
71 |     .button--large {
72 |       font-size: 1.2rem;
73 |     }
74 |   </style>
75 | </head>
76 | 
77 | <body>
78 |   <button class="button button--large">Read more</button>
79 |   <button class="button button--success">Save</button>
80 |   <button class="button button--danger button--small">Cancel</button>
81 | </body>
82 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .media {
22 |       padding: 1.5em;
23 |       background-color: #eee;
24 |       border-radius: 0.5em;
25 |     }
26 |     .media::after {
27 |       content: "";
28 |       display: block;
29 |       clear: both;
30 |     }
31 | 
32 |     .media__image {
33 |       float: left;
34 |       margin-right: 1.5em;
35 |     }
36 | 
37 |     .media__body {
38 |       overflow: auto;
39 |       margin-top: 0;
40 |     }
41 | 
42 |     .media__body > h4 {
43 |       margin-top: 0;
44 |     }
45 |   </style>
46 | </head>
47 | 
48 | <body>
49 |   <div class="media">
50 |     <img class="media__image" src="runner.png">
51 |     <div class="media__body">
52 |       <h4>Strength</h4>
53 |       <p>
54 |         Strength training is an important part of
55 |         injury prevention. Focus on your core&mdash;
56 |         especially your abs and glutes.
57 |       </p>
58 |     </div>
59 |   </div>
60 | </body>
61 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .media {
22 |       padding: 1.5em;
23 |       background-color: #eee;
24 |       border-radius: 0.5em;
25 |     }
26 |     .media::after {
27 |       content: "";
28 |       display: block;
29 |       clear: both;
30 |     }
31 | 
32 |     .media__image {
33 |       float: left;
34 |       margin-right: 1.5em;
35 |     }
36 | 
37 |     .media__body {
38 |       overflow: auto;
39 |       margin-top: 0;
40 |     }
41 | 
42 |     .media__body > h4 {
43 |       margin-top: 0;
44 |     }
45 | 
46 |     .media--right > .media__image {
47 |       float: right;
48 |     }
49 |   </style>
50 | </head>
51 | 
52 | <body>
53 |   <div class="media media--right">
54 |     <img class="media__image" src="runner.png">
55 |     <div class="media__body">
56 |       <h4>Strength</h4>
57 |       <p>
58 |         Strength training is an important part of
59 |         injury prevention. Focus on your core&mdash;
60 |         especially your abs and glutes.
61 |       </p>
62 |     </div>
63 |   </div>
64 | </body>
65 | 


--------------------------------------------------------------------------------
/ch09/listing-9.12.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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .dropdown {
22 |       display: inline-block;
23 |       position: relative;
24 |     }
25 | 
26 |     .dropdown__toggle {
27 |       padding: 0.5em 2em 0.5em 1.5em;
28 |       border: 1px solid #ccc;
29 |       font-size: 1rem;
30 |       background-color: #eee;
31 |     }
32 | 
33 |     .dropdown__toggle::after {
34 |       content: "";
35 |       position: absolute;
36 |       right: 1em;
37 |       top: 1em;
38 |       border: 0.3em solid;
39 |       border-color: black transparent transparent;
40 |     }
41 | 
42 |     .dropdown__drawer {
43 |       display: none;
44 |       position: absolute;
45 |       left: 0;
46 |       top: 2.1em;
47 |       min-width: 100%;
48 |       background-color: #eee;
49 |     }
50 | 
51 |     .dropdown.is-open .dropdown__toggle::after {
52 |       top: 0.7em;
53 |       border-color: transparent transparent black;
54 |     }
55 |     .dropdown.is-open .dropdown__drawer {
56 |       display: block;
57 |     }
58 | 
59 |   </style>
60 | </head>
61 | 
62 | <body>
63 | <div class="dropdown">
64 |   <button class="dropdown__toggle">Main Menu</button>
65 |   <div class="dropdown__drawer">
66 |     <ul class="menu">
67 |       <li><a href="/">Home</a></li>
68 |       <li><a href="/coffees">Coffees</a></li>
69 |       <li><a href="/brewers">Brewers</a></li>
70 |       <li><a href="/specials">Specials</a></li>
71 |       <li><a href="/about">About us</a></li>
72 |     </ul>
73 |   </div>
74 | </div>
75 | 
76 | <script type="text/javascript">
77 |   (function () {
78 |     var toggle = document.querySelector('.dropdown__toggle');
79 |     toggle.addEventListener('click', function (event) {
80 |       event.preventDefault();
81 |       var dropdown = event.target.parentNode;
82 |       dropdown.classList.toggle('is-open');
83 |     });
84 |   }());
85 | </script>
86 | </body>
87 | 


--------------------------------------------------------------------------------
/ch09/listing-9.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 |   <style>
  7 |     :root {
  8 |       box-sizing: border-box;
  9 |     }
 10 | 
 11 |     *,
 12 |     *::before,
 13 |     *::after {
 14 |       box-sizing: inherit;
 15 |     }
 16 | 
 17 |     body {
 18 |       font-family: Helvetica, Arial, sans-serif;
 19 |     }
 20 | 
 21 |     .dropdown {
 22 |       display: inline-block;
 23 |       position: relative;
 24 |     }
 25 | 
 26 |     .dropdown__toggle {
 27 |       padding: 0.5em 2em 0.5em 1.5em;
 28 |       border: 1px solid #ccc;
 29 |       font-size: 1rem;
 30 |       background-color: #eee;
 31 |     }
 32 | 
 33 |     .dropdown__toggle::after {
 34 |       content: "";
 35 |       position: absolute;
 36 |       right: 1em;
 37 |       top: 1em;
 38 |       border: 0.3em solid;
 39 |       border-color: black transparent transparent;
 40 |     }
 41 | 
 42 |     .dropdown__drawer {
 43 |       display: none;
 44 |       position: absolute;
 45 |       left: 0;
 46 |       top: 2.1em;
 47 |       min-width: 100%;
 48 |       background-color: #eee;
 49 |     }
 50 | 
 51 |     .dropdown.is-open .dropdown__toggle::after {
 52 |       top: 0.7em;
 53 |       border-color: transparent transparent black;
 54 |     }
 55 |     .dropdown.is-open .dropdown__drawer {
 56 |       display: block;
 57 |     }
 58 | 
 59 |     .menu {
 60 |       padding-left: 0;
 61 |       margin: 0;
 62 |       list-style-type: none;
 63 |       border: 1px solid #999;
 64 |     }
 65 | 
 66 |     .menu > li + li {
 67 |       border-top: 1px solid #999;
 68 |     }
 69 | 
 70 |     .menu > li > a {
 71 |       display: block;
 72 |       padding: 0.5em 1.5em;
 73 |       background-color: #eee;
 74 |       color: #369;
 75 |       text-decoration: none;
 76 |     }
 77 | 
 78 |     .menu > li > a:hover {
 79 |       background-color: #fff;
 80 |     }
 81 | 
 82 |   </style>
 83 | </head>
 84 | 
 85 | <body>
 86 | <div class="dropdown">
 87 |   <button class="dropdown__toggle">Main Menu</button>
 88 |   <div class="dropdown__drawer">
 89 |     <ul class="menu">
 90 |       <li><a href="/">Home</a></li>
 91 |       <li><a href="/coffees">Coffees</a></li>
 92 |       <li><a href="/brewers">Brewers</a></li>
 93 |       <li><a href="/specials">Specials</a></li>
 94 |       <li><a href="/about">About us</a></li>
 95 |     </ul>
 96 |   </div>
 97 | </div>
 98 | 
 99 | <script type="text/javascript">
100 |   (function () {
101 |     var toggle = document.querySelector('.dropdown__toggle');
102 |     toggle.addEventListener('click', function (event) {
103 |       event.preventDefault();
104 |       var dropdown = event.target.parentNode;
105 |       dropdown.classList.toggle('is-open');
106 |     });
107 |   }());
108 | </script>
109 | </body>
110 | 


--------------------------------------------------------------------------------
/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 |     :root {
 8 |       box-sizing: border-box;
 9 |     }
10 | 
11 |     *,
12 |     *::before,
13 |     *::after {
14 |       box-sizing: inherit;
15 |     }
16 | 
17 |     body {
18 |       font-family: Helvetica, Arial, sans-serif;
19 |     }
20 | 
21 |     .text-center {
22 |       text-align: center !important;
23 |     }
24 | 
25 |     .float-left {
26 |       float: left;
27 |     }
28 | 
29 |     .clearfix::before,
30 |     .clearfix::after {
31 |         content: " ";
32 |         display: table;
33 |     }
34 | 
35 |     .clearfix::after {
36 |         clear: both;
37 |     }
38 | 
39 |     .hidden {
40 |       display: none !important;
41 |     }
42 |   </style>
43 | </head>
44 | 
45 | <body>
46 |   <div class="text-center">
47 |     Centered text
48 |   </div>
49 |   <p class="clearfix">
50 |     <img src="runner.png" class="float-left" />
51 |     A paragraph that, if long enough, would wrap around the image.
52 |   </p>
53 | </body>
54 | 


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


--------------------------------------------------------------------------------
/ch10/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/ch10/README.md:
--------------------------------------------------------------------------------
1 | The listing example for this chapter is a bit different. This is a complete KSS pattern library. All the styles from the chapter, as well as some others from Chapter 9, are included in css/styles.css, along with their documentation comments.
2 | 
3 | To install, run `npm install` at the command line. Run `npm run build` to build a fresh version of the pattern library. Then open docs/index.html in your browser.
4 | 


--------------------------------------------------------------------------------
/ch10/css/homepage.md:
--------------------------------------------------------------------------------
1 | # Pattern library
2 | 
3 | This is a collection of all the modules in our
4 | stylesheet. You may use any of these modules when
5 | constructing a page.
6 | 


--------------------------------------------------------------------------------
/ch10/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="no-js" lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>My pattern library</title>
 6 | 
 7 |   <meta name="description" content="">
 8 |   <meta name="generator" content="kss-node">
 9 |   <meta name="viewport" content="width=device-width">
10 | 
11 |   <link rel="stylesheet" href="kss-assets/kss.css">
12 |   <link rel="stylesheet" href="../css/styles.css">
13 | 
14 | </head>
15 | <body id="kss-node">
16 | 
17 | <div class="kss-sidebar kss-style">
18 |   <header class="kss-header">
19 |     <h1 class="kss-doc-title">My pattern library</h1>
20 |   </header>
21 |   <nav class="kss-nav">
22 |     <ul class="kss-nav__menu">
23 |       <li class="kss-nav__menu-item">
24 |         <a class="kss-nav__menu-link" href="./">
25 |           <span class="kss-nav__ref">0</span
26 |           ><span class="kss-nav__name">Overview</span>
27 |         </a>
28 |       </li>
29 |       <li class="kss-nav__menu-item">
30 |         <a class="kss-nav__menu-link" href="section-buttons.html">
31 |           <span class="kss-nav__ref">1</span><span class="kss-nav__name">Buttons</span>
32 |         </a>
33 |       </li>
34 |       <li class="kss-nav__menu-item">
35 |         <a class="kss-nav__menu-link" href="section-dropdown.html">
36 |           <span class="kss-nav__ref">2</span><span class="kss-nav__name">Dropdown</span>
37 |         </a>
38 |       </li>
39 |       <li class="kss-nav__menu-item">
40 |         <a class="kss-nav__menu-link" href="section-media.html">
41 |           <span class="kss-nav__ref">3</span><span class="kss-nav__name">Media</span>
42 |         </a>
43 |       </li>
44 |       <li class="kss-nav__menu-item">
45 |         <a class="kss-nav__menu-link" href="section-menu.html">
46 |           <span class="kss-nav__ref">4</span><span class="kss-nav__name">Menu</span>
47 |         </a>
48 |       </li>
49 |       <li class="kss-nav__menu-item">
50 |         <a class="kss-nav__menu-link" href="section-message.html">
51 |           <span class="kss-nav__ref">5</span><span class="kss-nav__name">Message</span>
52 |         </a>
53 |       </li>
54 |       <li class="kss-nav__menu-item">
55 |         <a class="kss-nav__menu-link" href="section-utilities.html">
56 |           <span class="kss-nav__ref">6</span><span class="kss-nav__name">Utilities</span>
57 |         </a>
58 |       </li>
59 |     </ul>
60 |   </nav>
61 | </div>
62 | <article role="main" class="kss-main">
63 |   <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
64 |     <h1 id="pattern-library">Pattern library</h1>
65 | <p>This is a collection of all the modules in our
66 | stylesheet. You may use any of these modules when
67 | constructing a page.</p>
68 | 
69 |   </div>
70 | </article>
71 | 
72 | <!-- SCRIPTS -->
73 | <script src="kss-assets/kss.js"></script>
74 | <script src="kss-assets/scrollspy.js"></script>
75 | <script src="kss-assets/prettify.js"></script>
76 | <script>
77 |   prettyPrint();
78 |   var spy = new ScrollSpy('#kss-node', {
79 |     nav: '.kss-nav__menu-child > li > a',
80 |     className: 'is-in-viewport'
81 |   });
82 | </script>
83 | <script src="../js/docs.js"></script>
84 | 
85 | 
86 | 
87 | <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/WARNING.txt:
--------------------------------------------------------------------------------
1 | WARNING: This folder is deleted and re-recreated each time the style guide is
2 | built. Do NOT put your own files in this folder.
3 | 


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/github-fork--black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch10/docs/kss-assets/github-fork--black.png


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/kss.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   var KssStateGenerator;
 3 | 
 4 |   KssStateGenerator = (function() {
 5 |     var pseudo_selectors;
 6 | 
 7 |     pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child'];
 8 | 
 9 |     function KssStateGenerator() {
10 |       var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
11 |       pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g");
12 |       try {
13 |         _ref = document.styleSheets;
14 |         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
15 |           stylesheet = _ref[_i];
16 |           if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) {
17 |             idxs = [];
18 |             _ref2 = stylesheet.cssRules;
19 |             for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
20 |               rule = _ref2[idx];
21 |               if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
22 |                 replaceRule = function(matched, stuff) {
23 |                   return matched.replace(/\:/g, '.pseudo-class-');
24 |                 };
25 |                 this.insertRule(rule.cssText.replace(pseudos, replaceRule));
26 |               }
27 |               pseudos.lastIndex = 0;
28 |             }
29 |           }
30 |         }
31 |       } catch (_error) {}
32 |     }
33 | 
34 |     KssStateGenerator.prototype.insertRule = function(rule) {
35 |       var headEl, styleEl;
36 |       headEl = document.getElementsByTagName('head')[0];
37 |       styleEl = document.createElement('style');
38 |       styleEl.type = 'text/css';
39 |       if (styleEl.styleSheet) {
40 |         styleEl.styleSheet.cssText = rule;
41 |       } else {
42 |         styleEl.appendChild(document.createTextNode(rule));
43 |       }
44 |       return headEl.appendChild(styleEl);
45 |     };
46 | 
47 |     return KssStateGenerator;
48 | 
49 |   })();
50 | 
51 |   new KssStateGenerator;
52 | 
53 | }).call(this);
54 | 


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/noise-low.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch10/docs/kss-assets/noise-low.png


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/sample-inline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch10/docs/kss-assets/sample-inline.png


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/sample-inline.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
2 | <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch10/docs/kss-assets/sample.png


--------------------------------------------------------------------------------
/ch10/docs/kss-assets/sample.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
2 | <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/ch10/js/docs.js:
--------------------------------------------------------------------------------
1 | (function () {
2 |   var dropdowns = document.querySelectorAll('.dropdown__toggle');
3 |   Array.prototype.forEach.call(dropdowns, function(dropdown) {
4 |     dropdown.addEventListener('click', function (event) {
5 |       event.target.parentNode.classList.toggle('is-open');
6 |     });
7 |   });
8 | }());
9 | 


--------------------------------------------------------------------------------
/ch10/kss-config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "My pattern library",
 3 |   "source": [
 4 |     "./css"
 5 |   ],
 6 |   "destination":  "docs/",
 7 |   "css": [
 8 |     "../css/styles.css"
 9 |   ],
10 |   "js": [
11 |     "../js/docs.js"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/ch10/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pattern-library",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "kss --config kss-config.json",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [],
11 |   "author": "Keith J. Grant",
12 |   "devDependencies": {
13 |     "kss": "^3.0.0-beta.14"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/ch11/images/bear.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch11/images/bear.jpg


--------------------------------------------------------------------------------
/ch11/images/elephants.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch11/images/elephants.jpg


--------------------------------------------------------------------------------
/ch11/images/scratches.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch11/images/scratches.png


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


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


--------------------------------------------------------------------------------
/ch11/listing-11.04.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 |     .fade {
 5 |       height: 200px;
 6 |       width: 400px;
 7 |       background-image: linear-gradient(90deg, red, white, blue);
 8 |     }
 9 |   </style>
10 | </head>
11 | <body>
12 |   <div class="fade"></div>
13 | </body>
14 | 


--------------------------------------------------------------------------------
/ch11/listing-11.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 |     .fade {
 5 |       height: 200px;
 6 |       width: 400px;
 7 |       background-image: linear-gradient(90deg, red 40%, white 40%, white 60%, blue 60%);
 8 |     }
 9 |   </style>
10 | </head>
11 | <body>
12 |   <div class="fade"></div>
13 | </body>
14 | 


--------------------------------------------------------------------------------
/ch11/listing-11.06.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 |     .fade {
 5 |       height: 1em;
 6 |       width: 400px;
 7 |       background-image: repeating-linear-gradient(-45deg, #57b, #57b 10px, #148 10px, #148 20px);
 8 |       border-radius: 0.3em;
 9 |     }
10 |   </style>
11 | </head>
12 | <body>
13 |   <div class="fade"></div>
14 | </body>
15 | 


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


--------------------------------------------------------------------------------
/ch11/listing-11.09.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 |   .button {
 5 |     padding: 1em;
 6 |     border: 0;
 7 |     font-size: 0.8rem;
 8 |     color: white;
 9 |     border-radius: 0.5em;
10 |     background-image: linear-gradient(to bottom, #57b, #148);
11 |     box-shadow: 0.1em 0.1em 0.5em #124;
12 |   }
13 |   .button:active {
14 |     box-shadow: inset 0 0 0.5em #124, inset 0 0.5em 1em rgba(0,0,0,0.4);
15 |   }
16 |   </style>
17 | </head>
18 | <body>
19 |   <button class="button">Sign up now</button>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/ch11/listing-11.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 | .button {
 5 |   padding: 1em;
 6 |   border: 0;
 7 |   color: white;
 8 |   background-color: #57b;
 9 |   font-size: 1rem;
10 |   padding: 0.8em;
11 |   box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.15);
12 | }
13 | .button:hover {
14 |   background-color: #456ab6;
15 | }
16 | .button:active {
17 |   background-color: #148;
18 | }
19 |   </style>
20 | </head>
21 | <body>
22 |   <button class="button">Sign up now</button>
23 | </body>
24 | 


--------------------------------------------------------------------------------
/ch11/listing-11.11.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 | .button {
 5 |   padding: 0.8em;
 6 |   border: 0;
 7 |   font-size: 1rem;
 8 |   color: white;
 9 |   border-radius: 0.5em;
10 |   background-color: #57b;
11 |   box-shadow: 0 0.4em #148;
12 |   text-shadow: 1px 1px #148;
13 | }
14 | .button:active {
15 |   background-color: #456ab5;
16 |   transform: translateY(0.1em);
17 |   box-shadow: 0 0.3em #148;
18 | }
19 | .button:focus {
20 |   outline: none;
21 | }
22 |   </style>
23 | </head>
24 | <body>
25 |   <button class="button">Sign up now</button>
26 | </body>
27 | 


--------------------------------------------------------------------------------
/ch11/listing-11.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 | .blend {
 5 |     min-height: 400px;
 6 |     background-image: url(images/bear.jpg), url(images/bear.jpg);
 7 |     background-size: cover;
 8 |     background-repeat: no-repeat;
 9 |     background-position: -30vw, 30vw;
10 |     background-blend-mode: multiply;
11 | }
12 |   </style>
13 | </head>
14 | <body>
15 |   <div class="blend"></div>
16 | </body>
17 | 


--------------------------------------------------------------------------------
/ch11/listing-11.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <head>
 3 |   <style type="text/css">
 4 | .blend {
 5 |     min-height: 400px;
 6 |     background-image: url("images/bear.jpg");
 7 |     background-color: #148;
 8 |     background-size: cover;
 9 |     background-repeat: no-repeat;
10 |     background-position: center;
11 |     background-blend-mode: luminosity;
12 | }
13 |   </style>
14 | </head>
15 | <body>
16 |   <div class="blend"></div>
17 | </body>
18 | 


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


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


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


--------------------------------------------------------------------------------
/ch12/listing-12.2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <style>
 4 | html {
 5 |   --brand-green: #076448;
 6 |   --dark-green: #099268;
 7 |   --medium-green: #20c997;
 8 |   --text-color: #212529;
 9 |   --gray: #868e96;
10 |   --light-gray: #f1f3f5;
11 |   --extra-light-gray: #f8f9fa;
12 |   --white: #fff;
13 | 
14 |   box-sizing: border-box;
15 |   color: var(--text-color);
16 | }
17 | *,
18 | *::before,
19 | *::after {
20 |   box-sizing: inherit;
21 | }
22 | 
23 | body {
24 |   margin: 0;
25 |   font-family: Helvetica, Arial, sans-serif;
26 |   line-height: 1.4;
27 |   background-color: var(--extra-light-gray);
28 | }
29 | 
30 | h1, h2, h3, h4 {
31 |   font-family: Georgia, serif;
32 | }
33 | 
34 | a {
35 |   color: var(--medium-green);
36 | }
37 | a:visited {
38 |   color: var(--brand-green);
39 | }
40 | a:hover {
41 |   color: var(--brand-green);
42 | }
43 | a:active {
44 | }
45 |   </style>
46 | </head>
47 | <body>
48 |   <nav class="nav-container">
49 |     <ul class="top-nav">
50 |       <li class="top-nav__home"><a href="/">Ink</a></li>
51 |       <li><a href="/features">Features</a></li>
52 |       <li><a href="/pricing">Pricing</a></li>
53 |       <li><a href="/support">Support</a></li>
54 |       <li class="top-nav__featured"><a href="/login">Login</a></li>
55 |     </ul>
56 |   </nav>
57 |   <div class="hero">
58 |     <div class="hero__inner">
59 |       <h2>Team collaboration done right</h2>
60 |       <a href="/sign-up" class="button button--cta">Get started</a>
61 |     </div>
62 |   </div>
63 | 
64 |   <div class="container">
65 |     <div class="tile-row">
66 |       <div class="tile">
67 |         <h4>Work together, even if you're apart</h4>
68 |         <p>Organize your team conversations into threads. Collaborate together on documents in real-time. Use face-to-face <a href="/features/video-calling">video calls</a> when typing just won't do.</p>
69 |         <a href="/collaboration" class="button">Read more</a>
70 |       </div>
71 | 
72 |       <div class="tile">
73 |         <h4>Take it with you</h4>
74 |         <p>Ink is available on a wide array of devices, so you can work from anywhere:</p>
75 |         <ul class="tag-list">
76 |           <li>Web</li>
77 |           <li>iOS</li>
78 |           <li>Android</li>
79 |           <li>Windows Phone</li>
80 |         </ul>
81 |         <a href="/supported-devices" class="button">Read more</a>
82 |       </div>
83 | 
84 |       <div class="tile">
85 |         <h4>Priced right</h4>
86 |         <p>Whether you work on a team of three or a three hundred, you'll find our tiered pricing reasonable at every level.</p>
87 |         <a href="/pricing" class="button">Read more</a>
88 |       </div>
89 |     </div>
90 |   </div>
91 | 
92 |   <footer class="page-footer">
93 |     <div class="page-footer__inner">
94 |       Copyright &copy; 2017 Ink, Inc.
95 |     </div>
96 |   </footer>
97 | </body>
98 | 


--------------------------------------------------------------------------------
/ch13/collaboration.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch13/collaboration.jpg


--------------------------------------------------------------------------------
/ch13/listing-13.3.css:
--------------------------------------------------------------------------------
 1 | /* latin */
 2 | @font-face {
 3 |   font-family: 'Roboto';
 4 |   font-style: normal;
 5 |   font-weight: 300;
 6 |   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
 7 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 8 | }
 9 | /* latin */
10 | @font-face {
11 |   font-family: 'Sansita';
12 |   font-style: normal;
13 |   font-weight: 800;
14 |   src: local('Sansita ExtraBold'), local('Sansita-ExtraBold'), url(https://fonts.gstatic.com/s/sansita/v1/M0VOVsEPZWhxh-yeRPQtpQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
15 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
16 | }
17 | 


--------------------------------------------------------------------------------
/ch14/listing-14.10.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <style>
 6 | 
 7 |     body {
 8 |       font-family: Helvetica, Arial, sans-serif;
 9 |     }
10 | 
11 |     .dropdown__toggle {
12 |       display: block;
13 |       padding: 0.5em 1em;
14 |       border: 1px solid hsl(280, 10%, 80%);
15 |       color: hsl(280, 30%, 60%);
16 |       background-color: white;
17 |       font: inherit;
18 |       text-decoration: none;
19 |       transition: background-color 0.2s linear;
20 |     }
21 |     .dropdown__toggle:hover {
22 |       background-color: hsl(280, 15%, 95%);
23 |     }
24 |     .dropdown__drawer {
25 |       position: absolute;
26 |       background-color: white;
27 |       width: 10em;
28 |       opacity: 0;
29 |       visibility: hidden;
30 |       transition: opacity 0.2s linear,
31 |                   visibility 0s linear 0.2s;
32 |     }
33 |     .dropdown.is-open .dropdown__drawer {
34 |       opacity: 1;
35 |       visibility: visible;
36 |       transition-delay: 0s;
37 |     }
38 | 
39 |     .menu {
40 |       padding-left: 0;
41 |       margin: 0;
42 |       list-style: none;
43 |     }
44 |     .menu > li + li > a {
45 |       border-top: 0;
46 |     }
47 |     .menu > li > a {
48 |       display: block;
49 |       padding: 0.5em 1em;
50 |       color: hsl(280, 40%, 60%);
51 |       background-color: white;
52 |       text-decoration: none;
53 |       transition: all .2s linear;
54 |       border: 1px solid hsl(280, 10%, 80%);
55 |     }
56 |     .menu > li > a:hover {
57 |       background-color: hsl(280, 15%, 95%);
58 |       color: hsl(280, 25%, 10%);
59 |     }
60 | 
61 |     </style>
62 |   </head>
63 |   <body>
64 |     <div class="dropdown" aria-haspopup="true">
65 |       <button class="dropdown__toggle">Menu</button>
66 |       <div class="dropdown__drawer">
67 |         <ul class="menu" role="menu">
68 |           <li role="menuitem">
69 |             <a href="/features">Features</a>
70 |           </li>
71 |           <li role="menuitem">
72 |             <a href="/pricing">Pricing</a>
73 |           </li>
74 |           <li role="menuitem">
75 |             <a href="/support">Support</a>
76 |           </li>
77 |           <li role="menuitem">
78 |             <a href="/about">About</a>
79 |           </li>
80 |         </ul>
81 |       </div>
82 |     </div>
83 |     <p><a href="/read-more">Read more</a></p>
84 | 
85 |     <script type="text/javascript">
86 |       (function () {
87 |         var toggle = document.getElementsByClassName('dropdown__toggle')[0];
88 |         var dropdown = toggle.parentElement;
89 |         toggle.addEventListener('click', function (e) {
90 |           e.preventDefault();
91 |           dropdown.classList.toggle('is-open');
92 |         });
93 |       }());
94 |     </script>
95 |   </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/ch14/listing-14.12.html:
--------------------------------------------------------------------------------
  1 | <!doctype>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <style>
  6 | 
  7 |     body {
  8 |       font-family: Helvetica, Arial, sans-serif;
  9 |     }
 10 | 
 11 |     .dropdown__toggle {
 12 |       display: block;
 13 |       padding: 0.5em 1em;
 14 |       border: 1px solid hsl(280, 10%, 80%);
 15 |       color: hsl(280, 30%, 60%);
 16 |       background-color: white;
 17 |       font: inherit;
 18 |       text-decoration: none;
 19 |       transition: background-color 0.2s linear;
 20 |     }
 21 |     .dropdown__toggle:hover {
 22 |       background-color: hsl(280, 15%, 95%);
 23 |     }
 24 |     .dropdown__drawer {
 25 |       position: absolute;
 26 |       background-color: white;
 27 |       width: 10em;
 28 |       height: 0;
 29 |       overflow: hidden;
 30 |       transition: height 0.3s ease-out;
 31 |     }
 32 |     .dropdown.is-open .dropdown__drawer {
 33 |       height: auto;
 34 |     }
 35 | 
 36 |     .menu {
 37 |       padding-left: 0;
 38 |       margin: 0;
 39 |       list-style: none;
 40 |     }
 41 |     .menu > li + li > a {
 42 |       border-top: 0;
 43 |     }
 44 |     .menu > li > a {
 45 |       display: block;
 46 |       padding: 0.5em 1em;
 47 |       color: hsl(280, 40%, 60%);
 48 |       background-color: white;
 49 |       text-decoration: none;
 50 |       transition: all .2s linear;
 51 |       border: 1px solid hsl(280, 10%, 80%);
 52 |     }
 53 |     .menu > li > a:hover {
 54 |       background-color: hsl(280, 15%, 95%);
 55 |       color: hsl(280, 25%, 10%);
 56 |     }
 57 | 
 58 |     </style>
 59 |   </head>
 60 |   <body>
 61 |     <div class="dropdown" aria-haspopup="true">
 62 |       <button class="dropdown__toggle">Menu</button>
 63 |       <div class="dropdown__drawer">
 64 |         <ul class="menu" role="menu">
 65 |           <li role="menuitem">
 66 |             <a href="/features">Features</a>
 67 |           </li>
 68 |           <li role="menuitem">
 69 |             <a href="/pricing">Pricing</a>
 70 |           </li>
 71 |           <li role="menuitem">
 72 |             <a href="/support">Support</a>
 73 |           </li>
 74 |           <li role="menuitem">
 75 |             <a href="/about">About</a>
 76 |           </li>
 77 |         </ul>
 78 |       </div>
 79 |     </div>
 80 |     <p><a href="/read-more">Read more</a></p>
 81 | 
 82 |     <script type="text/javascript">
 83 |       (function () {
 84 |         var toggle = document.getElementsByClassName('dropdown__toggle')[0];
 85 |         var dropdown = toggle.parentElement;
 86 |         var drawer = document.getElementsByClassName('dropdown__drawer')[0];
 87 |         var height = drawer.scrollHeight;
 88 | 
 89 |         toggle.addEventListener('click', function (e) {
 90 |           e.preventDefault();
 91 |           dropdown.classList.toggle('is-open');
 92 |           if (dropdown.classList.contains('is-open')) {
 93 |             drawer.style.setProperty('height', height + 'px');
 94 |           } else {
 95 |             drawer.style.setProperty('height', '0');
 96 |           }
 97 |         });
 98 |       }());
 99 |     </script>
100 |   </body>
101 | </html>
102 | 


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


--------------------------------------------------------------------------------
/ch14/listing-14.3.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html lang="en">
 3 | <head>
 4 |   <style>
 5 | button {
 6 |   background-color: hsl(180, 50%, 50%);
 7 |   border: 0;
 8 |   color: white;
 9 |   font-size: 1rem;
10 |   padding: .3em 1em;
11 |   transition: border-radius 0.5s ease,
12 |               background-color 1s linear;
13 | }
14 | button:hover {
15 |   background-color: hsl(0, 50%, 50%);
16 |   border-radius: 1em;
17 | }
18 | 
19 | 
20 | .flex {
21 |   margin: 0 -1em;
22 | }
23 | .flex > * {
24 |   margin: 0 1em;
25 | }
26 | 
27 |   </style>
28 | </head>
29 | <body>
30 |   <button>Hover over me</button>
31 | </body>
32 | </html>
33 | 


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


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


--------------------------------------------------------------------------------
/ch14/listing-14.8.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <style>
 6 | 
 7 |     body {
 8 |       font-family: Helvetica, Arial, sans-serif;
 9 |     }
10 | 
11 |     .dropdown__toggle {
12 |       display: block;
13 |       padding: 0.5em 1em;
14 |       border: 1px solid hsl(280, 10%, 80%);
15 |       color: hsl(280, 30%, 60%);
16 |       background-color: white;
17 |       font: inherit;
18 |       text-decoration: none;
19 |       transition: background-color 0.2s linear;
20 |     }
21 |     .dropdown__toggle:hover {
22 |       background-color: hsl(280, 15%, 95%);
23 |     }
24 |     .dropdown__drawer {
25 |       position: absolute;
26 |       display: none;
27 |       background-color: white;
28 |       width: 10em;
29 |     }
30 |     .dropdown.is-open .dropdown__drawer {
31 |       display: block;
32 |     }
33 | 
34 |     .menu {
35 |       padding-left: 0;
36 |       margin: 0;
37 |       list-style: none;
38 |     }
39 |     .menu > li + li > a {
40 |       border-top: 0;
41 |     }
42 |     .menu > li > a {
43 |       display: block;
44 |       padding: 0.5em 1em;
45 |       color: hsl(280, 40%, 60%);
46 |       background-color: white;
47 |       text-decoration: none;
48 |       transition: all .2s linear;
49 |       border: 1px solid hsl(280, 10%, 80%);
50 |     }
51 |     .menu > li > a:hover {
52 |       background-color: hsl(280, 15%, 95%);
53 |       color: hsl(280, 25%, 10%);
54 |     }
55 | 
56 |     </style>
57 |   </head>
58 |   <body>
59 |     <div class="dropdown" aria-haspopup="true">
60 |       <button class="dropdown__toggle">Menu</button>
61 |       <div class="dropdown__drawer">
62 |         <ul class="menu" role="menu">
63 |           <li role="menuitem">
64 |             <a href="/features">Features</a>
65 |           </li>
66 |           <li role="menuitem">
67 |             <a href="/pricing">Pricing</a>
68 |           </li>
69 |           <li role="menuitem">
70 |             <a href="/support">Support</a>
71 |           </li>
72 |           <li role="menuitem">
73 |             <a href="/about">About</a>
74 |           </li>
75 |         </ul>
76 |       </div>
77 |     </div>
78 |     <p><a href="/read-more">Read more</a></p>
79 | 
80 |     <script type="text/javascript">
81 |       (function () {
82 |         var toggle = document.getElementsByClassName('dropdown__toggle')[0];
83 |         var dropdown = toggle.parentElement;
84 |         toggle.addEventListener('click', function (e) {
85 |           e.preventDefault();
86 |           dropdown.classList.toggle('is-open');
87 |         });
88 |       }());
89 |     </script>
90 |   </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/ch14/listing-14.9.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <style>
 6 | 
 7 |     body {
 8 |       font-family: Helvetica, Arial, sans-serif;
 9 |     }
10 | 
11 |     .dropdown__toggle {
12 |       display: block;
13 |       padding: 0.5em 1em;
14 |       border: 1px solid hsl(280, 10%, 80%);
15 |       color: hsl(280, 30%, 60%);
16 |       background-color: white;
17 |       font: inherit;
18 |       text-decoration: none;
19 |       transition: background-color 0.2s linear;
20 |     }
21 |     .dropdown__toggle:hover {
22 |       background-color: hsl(280, 15%, 95%);
23 |     }
24 |     .dropdown__drawer {
25 |       position: absolute;
26 |       background-color: white;
27 |       width: 10em;
28 |       opacity: 0;
29 |       transition: all 0.2s linear;
30 |     }
31 |     .dropdown.is-open .dropdown__drawer {
32 |       opacity: 1;
33 |     }
34 | 
35 |     .menu {
36 |       padding-left: 0;
37 |       margin: 0;
38 |       list-style: none;
39 |     }
40 |     .menu > li + li > a {
41 |       border-top: 0;
42 |     }
43 |     .menu > li > a {
44 |       display: block;
45 |       padding: 0.5em 1em;
46 |       color: hsl(280, 40%, 60%);
47 |       background-color: white;
48 |       text-decoration: none;
49 |       transition: all .2s linear;
50 |       border: 1px solid hsl(280, 10%, 80%);
51 |     }
52 |     .menu > li > a:hover {
53 |       background-color: hsl(280, 15%, 95%);
54 |       color: hsl(280, 25%, 10%);
55 |     }
56 | 
57 |     </style>
58 |   </head>
59 |   <body>
60 |     <div class="dropdown" aria-haspopup="true">
61 |       <button class="dropdown__toggle">Menu</button>
62 |       <div class="dropdown__drawer">
63 |         <ul class="menu" role="menu">
64 |           <li role="menuitem">
65 |             <a href="/features">Features</a>
66 |           </li>
67 |           <li role="menuitem">
68 |             <a href="/pricing">Pricing</a>
69 |           </li>
70 |           <li role="menuitem">
71 |             <a href="/support">Support</a>
72 |           </li>
73 |           <li role="menuitem">
74 |             <a href="/about">About</a>
75 |           </li>
76 |         </ul>
77 |       </div>
78 |     </div>
79 |     <p><a href="/read-more">Read more</a></p>
80 | 
81 |     <script type="text/javascript">
82 |       (function () {
83 |         var toggle = document.getElementsByClassName('dropdown__toggle')[0];
84 |         var dropdown = toggle.parentElement;
85 |         toggle.addEventListener('click', function (e) {
86 |           e.preventDefault();
87 |           dropdown.classList.toggle('is-open');
88 |         });
89 |       }());
90 |     </script>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/ch15/images/chicken1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch15/images/chicken1.jpg


--------------------------------------------------------------------------------
/ch15/images/chicken2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch15/images/chicken2.jpg


--------------------------------------------------------------------------------
/ch15/images/chicken3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch15/images/chicken3.jpg


--------------------------------------------------------------------------------
/ch15/images/chicken4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/ch15/images/chicken4.jpg


--------------------------------------------------------------------------------
/ch15/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 | 


--------------------------------------------------------------------------------
/ch15/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 | 


--------------------------------------------------------------------------------
/ch15/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 | 


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


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


--------------------------------------------------------------------------------
/ch15/listing-15.05.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet">
 5 |     <style type="text/css">
 6 | 
 7 |       html {
 8 |         box-sizing: border-box;
 9 |       }
10 |       *,
11 |       *::before,
12 |       *::after {
13 |         box-sizing: inherit;
14 |       }
15 | 
16 |       body {
17 |         background-color: hsl(200, 80%, 30%);
18 |         background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
19 |         color: white;
20 |         font-family: Raleway, Helvetica, Arial, sans-serif;
21 |         line-height: 1.4;
22 |         margin: 0;
23 |         min-height: 100vh;
24 |       }
25 | 
26 |       h1, h2, h3 {
27 |         font-family: Alfa Slab One, serif;
28 |         font-weight: 400;
29 |       }
30 | 
31 |       main {
32 |         display: block;
33 |       }
34 | 
35 |       img {
36 |         max-width: 100%;
37 |       }
38 | 
39 |       .page-header {
40 |         margin: 0;
41 |         padding: 1rem;
42 |       }
43 | 
44 |       @media (min-width: 30em) {
45 |         .page-header {
46 |           padding: 2rem 2rem 3rem;
47 |         }
48 |       }
49 | 
50 |     </style>
51 |   </head>
52 |   <body>
53 |     <header>
54 |       <h1 class="page-header">The Yolk Factory</h1>
55 |     </header>
56 |     <nav class="main-nav">
57 |       <ul class="nav-links">
58 |         <li>
59 |           <a href="/">
60 |             <img src="images/home.svg" class="nav-links__icon"/>
61 |             <span class="nav-links__label">Home</span>
62 |           </a>
63 |         </li>
64 |         <li>
65 |           <a href="/events">
66 |             <img src="images/calendar.svg" class="nav-links__icon"/>
67 |             <span class="nav-links__label">Events</span>
68 |           </a>
69 |         </li>
70 |         <li>
71 |           <a href="/members">
72 |             <img src="images/members.svg" class="nav-links__icon"/>
73 |             <span class="nav-links__label">Members</span>
74 |           </a>
75 |         </li>
76 |         <li>
77 |           <a href="/about">
78 |             <img src="images/star.svg" class="nav-links__icon"/>
79 |             <span class="nav-links__label">About</span>
80 |           </a>
81 |         </li>
82 |       </ul>
83 |     </nav>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/ch15/listing-15.06.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet">
  5 |     <style type="text/css">
  6 | 
  7 |       html {
  8 |         box-sizing: border-box;
  9 |       }
 10 |       *,
 11 |       *::before,
 12 |       *::after {
 13 |         box-sizing: inherit;
 14 |       }
 15 | 
 16 |       body {
 17 |         background-color: hsl(200, 80%, 30%);
 18 |         background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
 19 |         color: white;
 20 |         font-family: Raleway, Helvetica, Arial, sans-serif;
 21 |         line-height: 1.4;
 22 |         margin: 0;
 23 |         min-height: 100vh;
 24 |       }
 25 | 
 26 |       h1, h2, h3 {
 27 |         font-family: Alfa Slab One, serif;
 28 |         font-weight: 400;
 29 |       }
 30 | 
 31 |       main {
 32 |         display: block;
 33 |       }
 34 | 
 35 |       img {
 36 |         max-width: 100%;
 37 |       }
 38 | 
 39 |       .page-header {
 40 |         margin: 0;
 41 |         padding: 1rem;
 42 |       }
 43 | 
 44 |       @media (min-width: 30em) {
 45 |         .page-header {
 46 |           padding: 2rem 2rem 3rem;
 47 |         }
 48 |       }
 49 | 
 50 |       .nav-links {
 51 |         display: flex;
 52 |         margin-top: 0;
 53 |         margin-bottom: 1rem;
 54 |         padding: 0 1rem;
 55 |         list-style: none;
 56 |         justify-content: space-between;
 57 |       }
 58 |       .nav-links > li + li {
 59 |         margin-left: 0.8em;
 60 |       }
 61 |       .nav-links > li > a {
 62 |         display: block;
 63 |         padding: 0.8em 0;
 64 |         color: white;
 65 |         font-size: 0.8rem;
 66 |         text-decoration: none;
 67 |         text-transform: uppercase;
 68 |         letter-spacing: 0.06em;
 69 |       }
 70 |       .nav-links__icon {
 71 |         height: 1.5em;
 72 |         width: 1.5em;
 73 |         vertical-align: -0.2em;
 74 |       }
 75 |       .nav-links > li > a:hover {
 76 |         color: hsl(40, 100%, 70%);
 77 |       }
 78 | 
 79 |     </style>
 80 |   </head>
 81 |   <body>
 82 |     <header>
 83 |       <h1 class="page-header">The Yolk Factory</h1>
 84 |     </header>
 85 |     <nav class="main-nav">
 86 |       <ul class="nav-links">
 87 |         <li>
 88 |           <a href="/">
 89 |             <img src="images/home.svg" class="nav-links__icon"/>
 90 |             <span class="nav-links__label">Home</span>
 91 |           </a>
 92 |         </li>
 93 |         <li>
 94 |           <a href="/events">
 95 |             <img src="images/calendar.svg" class="nav-links__icon"/>
 96 |             <span class="nav-links__label">Events</span>
 97 |           </a>
 98 |         </li>
 99 |         <li>
100 |           <a href="/members">
101 |             <img src="images/members.svg" class="nav-links__icon"/>
102 |             <span class="nav-links__label">Members</span>
103 |           </a>
104 |         </li>
105 |         <li>
106 |           <a href="/about">
107 |             <img src="images/star.svg" class="nav-links__icon"/>
108 |             <span class="nav-links__label">About</span>
109 |           </a>
110 |         </li>
111 |       </ul>
112 |     </nav>
113 |   </body>
114 | </html>
115 | 


--------------------------------------------------------------------------------
/ch15/listing-15.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 6 |       .row {
 7 |         display: flex;
 8 |         justify-content: center;
 9 |       }
10 | 
11 |       .box {
12 |         box-sizing: border-box;
13 |         width: 150px;
14 |         margin: 0 2em;
15 |         padding: 60px 0;
16 |         text-align: center;
17 |         background-color: hsl(150, 50%, 40%);
18 |         transform: perspective(200px) rotateX(30deg);
19 |       }
20 |     </style>
21 |   </head>
22 |   <body>
23 | 
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 | 


--------------------------------------------------------------------------------
/ch15/listing-15.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 6 |       .row {
 7 |         display: flex;
 8 |         justify-content: center;
 9 |         perspective: 200px;
10 |       }
11 | 
12 |       .box {
13 |         box-sizing: border-box;
14 |         width: 150px;
15 |         margin: 0 2em;
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 | 
25 |     <div class="row">
26 |       <div class="box">One</div>
27 |       <div class="box">Two</div>
28 |       <div class="box">Three</div>
29 |       <div class="box">Four</div>
30 |     </div>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/ch15/listing-15.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 6 |       .row {
 7 |         display: flex;
 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 |         margin: 0 2em;
17 |         padding: 60px 0;
18 |         text-align: center;
19 |         background-color: hsl(150, 50%, 40%);
20 |         transform: rotateX(30deg);
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 | 
26 |     <div class="row">
27 |       <div class="box">One</div>
28 |       <div class="box">Two</div>
29 |       <div class="box">Three</div>
30 |       <div class="box">Four</div>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/ch15/listing-15.15.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 6 |       .row {
 7 |         display: flex;
 8 |         justify-content: center;
 9 |         perspective: 200px;
10 |       }
11 | 
12 |       .box {
13 |         box-sizing: border-box;
14 |         width: 150px;
15 |         margin: 0 2em;
16 |         padding: 60px 0;
17 |         text-align: center;
18 |         background-color: hsl(150, 50%, 40%);
19 |       }
20 | 
21 |       .box:nth-child(2n) {
22 |         transform: rotateY(180deg);
23 |       }
24 | 
25 |       .box:nth-child(n + 3) {
26 |         backface-visibility: hidden;
27 |       }
28 | 
29 |     </style>
30 |   </head>
31 |   <body>
32 | 
33 |     <div class="row">
34 |       <div class="box">One</div>
35 |       <div class="box">Two</div>
36 |       <div class="box">Three</div>
37 |       <div class="box">Four</div>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


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


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


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


--------------------------------------------------------------------------------
/ch16/images/chicken4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSSInDepth/css-in-depth/2c6595f52480db8fcc9bcb19ebebb42642b42812/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.12.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 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 |       background-color: hsl(220, 50%, 50%);
29 |       color: white;
30 |       font: inherit;
31 |       transition: background-color 0.3s linear;
32 |     }
33 |     button:hover {
34 |       background-color: hsl(220, 45%, 40%);
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 | 


--------------------------------------------------------------------------------
/ch16/listing-16.13.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 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 |       background-color: hsl(220, 50%, 50%);
29 |       color: white;
30 |       font: inherit;
31 |       transition: background-color 0.3s linear;
32 |     }
33 |     button:hover {
34 |       background-color: hsl(220, 45%, 40%);
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 | 


--------------------------------------------------------------------------------
/ch16/listing-16.14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <style type="text/css">
 5 | 
 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 |       background-color: hsl(220, 50%, 50%);
29 |       color: white;
30 |       font: inherit;
31 |       transition: background-color 0.3s linear;
32 |     }
33 |     button:hover {
34 |       background-color: hsl(220, 45%, 40%);
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">Save</button>
71 |     </form>
72 | 
73 | <script type="text/javascript">
74 | var input = document.getElementById('trip');
75 | var button = document.getElementById('submit-button');
76 | 
77 | button.addEventListener('click', function(event) {
78 |   event.preventDefault();
79 |   button.classList.add('is-loading');
80 |   button.disabled = true;
81 |   input.disabled = true;
82 | });
83 | </script>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/ch16/listing-16.15.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <style type="text/css">
  5 | 
  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 |       background-color: hsl(220, 50%, 50%);
 29 |       color: white;
 30 |       font: inherit;
 31 |       transition: background-color 0.3s linear;
 32 |     }
 33 |     button:hover {
 34 |       background-color: hsl(220, 45%, 40%);
 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 |     .shake {
 57 |       animation: shake 0.7s linear;
 58 |     }
 59 | 
 60 |     @keyframes spin {
 61 |       0% {
 62 |         transform: rotate(0deg);
 63 |       }
 64 |       100% {
 65 |         transform: rotate(360deg);
 66 |       }
 67 |     }
 68 | 
 69 |     @keyframes shake {
 70 |       0%,
 71 |       100% {
 72 |         transform: translateX(0);
 73 |       }
 74 |       10%,
 75 |       30%,
 76 |       50%,
 77 |       70% {
 78 |         transform: translateX(-0.4em);
 79 |       }
 80 |       20%,
 81 |       40%,
 82 |       60% {
 83 |         transform: translateX(0.4em);
 84 |       }
 85 |       80% {
 86 |         transform: translateX(0.3em);
 87 |       }
 88 |       90% {
 89 |         transform: translateX(-0.3em);
 90 |       }
 91 |     }
 92 |     </style>
 93 |   </head>
 94 |   <body>
 95 |     <form>
 96 |       <label for="trip">Tell us about your first trip to the zoo:</label>
 97 |       <textarea id="trip" name="about-my-trip" rows="5"></textarea>
 98 |       <button type="submit" id="submit-button" class="shake">Save</button>
 99 |     </form>
100 | 
101 | <script type="text/javascript">
102 | var input = document.getElementById('trip');
103 | var button = document.getElementById('submit-button');
104 | 
105 | button.addEventListener('click', function(event) {
106 |   event.preventDefault();
107 |   button.classList.add('is-loading');
108 |   button.disabled = true;
109 |   input.disabled = true;
110 | });
111 | </script>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/ch16/listing-16.16.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <style type="text/css">
  5 | 
  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 |       background-color: hsl(220, 50%, 50%);
 29 |       color: white;
 30 |       font: inherit;
 31 |       transition: background-color 0.3s linear;
 32 |     }
 33 |     button:hover {
 34 |       background-color: hsl(220, 45%, 40%);
 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 |     .shake {
 57 |       animation: shake 0.7s linear;
 58 |     }
 59 | 
 60 |     @keyframes spin {
 61 |       0% {
 62 |         transform: rotate(0deg);
 63 |       }
 64 |       100% {
 65 |         transform: rotate(360deg);
 66 |       }
 67 |     }
 68 | 
 69 |     @keyframes shake {
 70 |       0%,
 71 |       100% {
 72 |         transform: translateX(0);
 73 |       }
 74 |       10%,
 75 |       30%,
 76 |       50%,
 77 |       70% {
 78 |         transform: translateX(-0.4em);
 79 |       }
 80 |       20%,
 81 |       40%,
 82 |       60% {
 83 |         transform: translateX(0.4em);
 84 |       }
 85 |       80% {
 86 |         transform: translateX(0.3em);
 87 |       }
 88 |       90% {
 89 |         transform: translateX(-0.3em);
 90 |       }
 91 |     }
 92 |     </style>
 93 |   </head>
 94 |   <body>
 95 |     <form>
 96 |       <label for="trip">Tell us about your first trip to the zoo:</label>
 97 |       <textarea id="trip" name="about-my-trip" rows="5"></textarea>
 98 |       <button type="submit" id="submit-button">Save</button>
 99 |     </form>
100 | 
101 | <script type="text/javascript">
102 | var input = document.getElementById('trip');
103 | var button = document.getElementById('submit-button');
104 | 
105 | var timeout = null;
106 | 
107 | button.addEventListener('click', function(event) {
108 |   event.preventDefault();
109 |   clearTimeout(timeout);
110 |   button.classList.add('is-loading');
111 |   button.disabled = true;
112 |   input.disabled = true;
113 | });
114 | 
115 | input.addEventListener('keyup', function() {
116 |   clearTimeout(timeout);
117 |   timeout = setTimeout(function() {
118 |     button.classList.add('shake');
119 |   }, 1000);
120 | });
121 | button.addEventListener('animationend', function() {
122 |   button.classList.remove('shake');
123 | });
124 | </script>
125 |   </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/ch16/listing-16.3.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <style>
 5 | 
 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 | 
29 |   </style>
30 | </head>
31 | <body>
32 |   <div class="box"></div>
33 | </body>
34 | </html>
35 | 


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


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