Skip to content

Commit 568a9ff

Browse files
meyerwebmeyerweb
committed
Final publication
1 parent 8678c5f commit 568a9ff

17 files changed

+251
-62
lines changed

‎01-css-fundamentals/external-stylesheet-representation.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
section[id] {position: absolute; padding: 0 1em 3.25em;
88
border: 2px solid; box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
99
background-color: white;
10-
font: 0.9em Courier New, monospace; white-space: pre;}
10+
font: 1.3em Courier New, monospace; white-space: pre;}
1111

1212
#doc {top: 3em; left: 2.5em; width: 28em; line-height: 1.4; z-index: -1;}
1313
#css1 {top: 4.5em; left: 42em; width: 31em;}
@@ -18,11 +18,11 @@
1818

1919
section img {position: absolute;
2020
z-index: -1;}
21-
#css1 img {top: 50%; margin-top: -50px; left: -40%;
22-
transform: rotate(0);
21+
#css1 img {top: 50%; margin-top: -25px; left: -23%;
22+
transform: scale(1.7);
2323
transform-origin: 100% 100%;}
24-
#css2 img {top: 0; margin-top: -13px; left: -94%;
25-
transform: rotate(19deg);
24+
#css2 img {top: 0; left: -60%;
25+
transform: rotate(19deg) scale(1.6);
2626
transform-origin: 100% 0;}
2727

2828
</style>

‎06-basic-visual-formatting/fit-content-sizing.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<style type="text/css">
88
.arena {display: flex; align-items: start;}
99
body {width: auto; font: 1.25em/1.25 Calibri, Arial, Helvetica, sans-serif;}
10-
[id^="cb"] {margin: 4em 0.25em 0; flex-basis: 25%; position: relative;}
10+
[id^="cb"] {margin: 4em 0.25em 0; flex-basis: 33%; position: relative;}
1111
[id^="cb"] p {background: silver;}
1212
[id^="cb"] code {font-size: 95%;}
1313
</style>
@@ -21,9 +21,8 @@
2121
<main class="arena">
2222

2323
<div id="cb1"><p>This content is short.</p></div>
24-
<div id="cb1"><p>This content is a little longer.</p></div>
25-
<div id="cb1"><p>This content is longer, because there is more of it, which probably makes sense and seems obvious.</p></div>
26-
<div id="cb1"><p>This is a lot of content that will end up wrapping to multiple lines, because there is so darn much of it, just going on and on as if the author is being paid by the word.</p></div>
24+
<div id="cb2"><p>This content is a little bit longer.</p></div>
25+
<div id="cb3"><p>This is a lot of content that will end up wrapping to multiple lines, because there is so darn much of it, just going on and on as if the author is being paid by the word.</p></div>
2726
</main>
2827

2928
</body>

‎10-floating-and-positioning/stickypos-every-side.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@
66
<title>Making every side a sticky side</title>
77
<style type="text/css">
88
body {font: medium sans-serif; display: flex; padding: 1em;}
9-
.scrollbox {border: 1px solid gray; width: 18em; height: 15em;
9+
.scrollbox {border: 1px solid gray; width: 13em; height: 15em;
1010
overflow: scroll;}
1111
.scrollbox * {font-size: inherit;}
1212
.scrollbox h2 {margin: 0; padding: 0.5em 0.25em 0.25em; background: rgb(77%,77%,77%);
13-
position: sticky; top: 0; bottom: 0; left: 0; right: 0;}
13+
position: sticky; top: 0; bottom: 0.8em; left: 0; right: 0; font-size: 1.2em;}
1414
.scrollbox ol {list-style: none; margin: 0; padding: 0;}
1515
.scrollbox ol li {border: 1px solid #DDD; border-width: 1px 0;
1616
padding: 0.4em 0.25em 0.3em; margin-bottom: -1px;
1717
white-space: nowrap;}
1818

1919
.container {position: relative; margin: 0 1em;}
20-
.rect {position: absolute; z-index: 10; top: 0; left: 0; height: 14.2em; width: 17.2em;
20+
.rect {position: absolute; z-index: 10; top: 0; left: 0; height: 14.2em; width: 12.5em;
2121
box-sizing: border-box;
2222
border: 2px dashed red;}
2323
</style>

‎10-floating-and-positioning/stickypos-from-the-top.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@
66
<title>Detaching from the top of the sticky-positioning rectangle</title>
77
<style type="text/css">
88
body {font: medium sans-serif; display: flex; padding: 1em; max-width: max-content;}
9-
.scrollbox {border: 1px solid gray; width: 15em; height: 15em; margin: 0;
9+
.scrollbox {border: 1px solid gray; width: 13em; height: 15em; margin: 0;
1010
overflow: scroll;}
1111
.scrollbox * {font-size: inherit;}
1212
.scrollbox h2 {margin: 0; padding: 0.5em 0.25em 0.25em; background: rgb(77%,77%,77%);
13-
position: sticky; top: 2em;}
13+
position: sticky; top: 2rem; font-size: 1.3em;}
14+
.scrollbox h2 + p::first-line {font-style: italic;}
1415
.scrollbox ol {list-style: none; margin: 0; padding: 0;}
1516
.scrollbox ol li {border: 1px solid #DDD; border-width: 1px 0;
1617
padding: 0.4em 0.25em 0.3em; margin-bottom: -1px;
1718
white-space: nowrap;}
18-
1919
.container {position: relative; margin: 0 1em;}
20-
.rect {position: absolute; z-index: 10; top: 2em; left: 0; height: 12.2em; width: 14.2em;
20+
.rect {position: absolute; z-index: 10; top: 2rem; left: 0; height: 12.2em; width: 12.5em;
2121
box-sizing: border-box;
2222
border: 2px dashed red;}
23+
2324
</style>
2425
</head>
2526
<body>

‎10-floating-and-positioning/stickypos-to-the-bottom.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@
66
<title>Sticking to the bottom of the sticky-positioning rectangle</title>
77
<style type="text/css">
88
body {font: medium sans-serif; display: flex; padding: 1em; max-width: max-content;}
9-
.scrollbox {border: 1px solid gray; width: 15em; height: 15em;
9+
.scrollbox {border: 1px solid gray; width: 13em; height: 15em;
1010
overflow: scroll;}
1111
.scrollbox * {font-size: inherit;}
1212
.scrollbox h2 {margin: 0; padding: 0.5em 0.25em 0.25em; background: rgb(77%,77%,77%);
13-
position: sticky; bottom: 0;}
13+
position: sticky; bottom: 0; font-size: 1.3em;}
1414
.scrollbox ol {list-style: none; margin: 0; padding: 0;}
1515
.scrollbox ol li {border: 1px solid #DDD; border-width: 1px 0;
1616
padding: 0.4em 0.25em 0.3em; margin-bottom: -1px;
1717
white-space: nowrap;}
1818

1919
.container {position: relative; margin: 0 1em;}
20-
.rect {position: absolute; z-index: 10; top: 0; left: 0; height: 14.2em; width: 14.2em;
20+
.rect {position: absolute; z-index: 10; top: 0; left: 0; height: 15.1em; width: 12.5em;
2121
box-sizing: border-box;
2222
border: 2px dashed red;}
2323
</style>

‎10-floating-and-positioning/stickypos-to-the-top.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@
66
<title>Sticking to the top of the sticky-positioning rectangle</title>
77
<style type="text/css">
88
body {font: medium sans-serif; display: flex; padding: 1em; max-width: max-content;}
9-
.scrollbox {border: 1px solid gray; width: 15em; height: 15em; margin: 0;
9+
.scrollbox {border: 1px solid gray; width: 13em; height: 15em; margin: 0;
1010
overflow: scroll;}
1111
.scrollbox * {font-size: inherit;}
1212
.scrollbox h2 {margin: 0; padding: 0.5em 0.25em 0.25em; background: rgb(77%,77%,77%);
13-
position: sticky; top: 2em;}
13+
position: sticky; top: 2rem; font-size: 1.3em;}
14+
.scrollbox h2 + p::first-line {font-style: italic;}
1415
.scrollbox ol {list-style: none; margin: 0; padding: 0;}
1516
.scrollbox ol li {border: 1px solid #DDD; border-width: 1px 0;
1617
padding: 0.4em 0.25em 0.3em; margin-bottom: -1px;
1718
white-space: nowrap;}
18-
1919
.container {position: relative; margin: 0 1em;}
20-
.rect {position: absolute; z-index: 10; top: 2em; left: 0; height: 12.2em; width: 14.2em;
20+
.rect {position: absolute; z-index: 10; top: 2rem; left: 0; height: 12.2em; width: 12.5em;
2121
box-sizing: border-box;
2222
border: 2px dashed red;}
2323
</style>

‎11-flexbox/align-content-overflow.html

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88

99
<style>
1010
body {
11-
padding: 3em 0;
11+
padding: 6em 0;
1212
margin: 0;
1313
display: flex;
1414
justify-content: center;
1515
flex-flow: wrap;
16-
gap: 7em 1em;
16+
gap: 15em 1em;
1717
font-size: 1.5vw;
1818
}
1919
div {
@@ -28,11 +28,12 @@
2828
position: absolute;
2929
left: 0;
3030
right: 0;
31-
margin: 0 3px;
32-
padding: 1em 2em;
33-
top: calc(50% - 1.5em);
34-
font: bold 70% monospace;
35-
background: hsl(0deg,0%,100%,0.97);
31+
margin: 2.3em 0;
32+
padding: 0.5em;
33+
top: 100%;
34+
font: bold 150% monospace;
35+
text-align: center;
36+
background: hsl(0deg,0%,100%,0.9);
3637
}
3738
figure > div {
3839
position: relative;
@@ -67,7 +68,7 @@
6768
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
6869
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
6970
</div>
70-
<figcaption>align-content: normal<br/>align-content: stretch</figcaption>
71+
<figcaption>normal<br/>stretch</figcaption>
7172
</figure>
7273

7374
<figure>
@@ -81,7 +82,7 @@
8182
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
8283
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
8384
</div>
84-
<figcaption>align-content: center</figcaption>
85+
<figcaption>center</figcaption>
8586
</figure>
8687

8788
<figure>
@@ -95,7 +96,7 @@
9596
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
9697
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
9798
</div>
98-
<figcaption>align-content: start<br/>align-content: flex-start<br/>align-content: baseline</figcaption>
99+
<figcaption>start<br/>flex-start<br/>baseline</figcaption>
99100
</figure>
100101

101102
<figure>
@@ -109,7 +110,7 @@
109110
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
110111
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
111112
</div>
112-
<figcaption>align-content: end<br/>align-content: flex-end<br/>align-content: last baseline</figcaption>
113+
<figcaption>end<br/>flex-end<br/>last baseline</figcaption>
113114
</figure>
114115

115116
<figure>
@@ -123,7 +124,7 @@
123124
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
124125
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
125126
</div>
126-
<figcaption>align-content: space-between</figcaption>
127+
<figcaption>space-between</figcaption>
127128
</figure>
128129

129130
<figure>
@@ -137,7 +138,7 @@
137138
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
138139
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
139140
</div>
140-
<figcaption>align-content: space-around</figcaption>
141+
<figcaption>space-around</figcaption>
141142
</figure>
142143

143144
<figure>
@@ -151,7 +152,7 @@
151152
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
152153
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
153154
</div>
154-
<figcaption>align-content: space-evenly</figcaption>
155+
<figcaption>space-evenly</figcaption>
155156
</figure>
156157

157158
</body>

‎11-flexbox/align-content.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@
2525
figure > figcaption {
2626
margin: 0.33em auto;
2727
max-width: max-content;
28-
font: bold 85% monospace;
28+
font: bold 135% monospace;
2929
background: hsl(0deg,0%,100%,0.97);
30+
text-align: center;
3031
}
3132
figure > div {
3233
display: flex;
@@ -65,7 +66,7 @@
6566
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
6667
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
6768
</div>
68-
<figcaption>align-content: normal<br/>align-content: stretch</figcaption>
69+
<figcaption>normal<br/>stretch</figcaption>
6970
</figure>
7071

7172
<figure>
@@ -79,7 +80,7 @@
7980
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
8081
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
8182
</div>
82-
<figcaption>align-content: center</figcaption>
83+
<figcaption>center</figcaption>
8384
</figure>
8485

8586
<figure>
@@ -93,7 +94,7 @@
9394
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
9495
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
9596
</div>
96-
<figcaption>align-content: start<br/>align-content: flex-start<br/>align-content: baseline</figcaption>
97+
<figcaption>start<br/>flex-start<br/>baseline</figcaption>
9798
</figure>
9899

99100
<figure>
@@ -107,7 +108,7 @@
107108
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
108109
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
109110
</div>
110-
<figcaption>align-content: end<br/>align-content: flex-end<br/>align-content: last baseline</figcaption>
111+
<figcaption>end<br/>flex-end<br/>last baseline</figcaption>
111112
</figure>
112113

113114
<figure>
@@ -121,7 +122,7 @@
121122
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
122123
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
123124
</div>
124-
<figcaption>align-content: space-between</figcaption>
125+
<figcaption> space-between</figcaption>
125126
</figure>
126127

127128
<figure>
@@ -135,7 +136,7 @@
135136
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
136137
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
137138
</div>
138-
<figcaption>align-content: space-around</figcaption>
139+
<figcaption> space-around</figcaption>
139140
</figure>
140141

141142
<figure>
@@ -149,7 +150,7 @@
149150
<div class="g">GGGGGGG<br/>GGGGGGG<br/>GGGGGGG</div>
150151
<div class="h">HHHHHHHH<br/>HHHHHHHH<br/>HHHHHHHH</div>
151152
</div>
152-
<figcaption>align-content: space-evenly</figcaption>
153+
<figcaption> space-evenly</figcaption>
153154
</figure>
154155

155156
</body>

‎11-flexbox/align-items-values-rows-cols.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
}
6767

6868
figcaption {
69-
font: bold 1.67em monospace;
69+
font: bold 2.5em monospace;
7070
}
7171
div > p {
7272
border: 1px solid;

0 commit comments

Comments
 (0)