Skip to content

Commit

Permalink
Merge pull request #1 from richarcher/type-fix
Browse files Browse the repository at this point in the history 
Typography fix
  • Loading branch information
Rich Archer authored Apr 25, 2017
2 parents c1d5cae + 094ef41 commit 2914b32
Show file tree
Hide file tree
Showing 18 changed files with 367 additions and 74 deletions.
132 changes: 127 additions & 5 deletions app/answers.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,136 @@
@font-face {
font-family: 'Open Sans';
font-family: 'opensanskata';
src: url("./assets/OpenSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal; }

body {
background-color: #efefef;
font-family: 'Open Sans', sans-serif;
font-family: 'opensanskata', sans-serif;
}

section {
border: 1px solid slategrey;
background-color: white;
position: relative;
}

h1, .h1 {
font-size: 2em;
line-height: 1.25em;
font-weight: normal;
letter-spacing: -0.01em;
}
h2 {
font-size: 1.625em;
line-height: 1.153em;
font-weight: normal;
}
h3 {
font-size: 1.375em;
line-height: 1.136em;
font-weight: normal;
}
h4 {
font-size: 1.125em;
line-height: 1.111em;
font-weight: normal;
}

.display-block img {
display: block;
}

.display-inline > * {
display: inline-block;
vertical-align: middle;
}

.medium-image img {
width: 150px;
height: 150px;
}

.small-image img {
width: 100px;
height: 100px;
}

.simple-box {
display: block;
padding: 1em;
background-color: tomato;
width: 5em;
height: 5em;
}
.simple-box img {
width: 100%;
height: 100%;
}
.simple-box--bordered {
border: 1em solid royalblue;
}
.simple-box--margined {
margin: 1em;
}
.simple-box--small {
box-sizing: border-box;
}

.box {
background-color: tomato;
text-indent: -1000px;
display: inline-block;
width: 5em;
height: 5em;
vertical-align: bottom;
}

.nolist {
padding-left: 0;
list-style-type: none;
}

.circle {
background-color: dodgerblue;
text-indent: -1000px;
display: inline-block;
width: 7em;
height: 7em;
border-radius: 50%;
vertical-align: bottom;
}

.outline {
display: inline-block;
width: 10em;
height: 10em;
border: 3px solid royalblue;
border-radius: 50%;
text-indent: -1000px;
box-sizing: border-box;
vertical-align: bottom;
}

.lawn {
display: block;
background-color: seagreen;
width: 20em;
height: 20em;
position: relative;
}

.ball {
display: block;
width: 4em;
height: 4em;
border-radius: 50%;
background-color: yellow;
}

.lawn-override {
position: static;
}

.ball--br {
position: absolute;
bottom: 0;
right: 0;
}
12 changes: 6 additions & 6 deletions app/box-model.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h2>The Box Model</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-box_0_phone.png">this</a> guide.</p>

<section id="box-model-simple-box">
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box"><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box"><img src='assets/kitten.jpg' alt='a kitten'></div>
</section>

</li>
Expand All @@ -28,8 +28,8 @@ <h2>The Box Model</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-border-box_0_phone.png">this</a> guide.</p>

<section id="box-model-simple-border-box">
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box simple-box--bordered"><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box simple-box--bordered"><img src='assets/kitten.jpg' alt='a kitten'></div>
</section>
</li>

Expand All @@ -39,8 +39,8 @@ <h2>The Box Model</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-border-margin-box_0_phone.png">this</a> guide.</p>

<section id="box-model-simple-border-margin-box">
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box simple-box--bordered simple-box--margined"><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="simple-box simple-box--bordered simple-box--margined"><img src='assets/kitten.jpg' alt='a kitten'></div>
</section>
</li>
</ol>
Expand Down
28 changes: 14 additions & 14 deletions app/css-shapes-101.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ <h2>CSS shapes 101</h2>
<section id="box-align">

<div>
<div>list item</div>
<div>list item</div>
<div>list item</div>
<div class="box">list item</div>
<div class="box">list item</div>
<div class="box">list item</div>
</div>

</section>
Expand All @@ -33,10 +33,10 @@ <h2>CSS shapes 101</h2>
<p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Circles_0_circle-align_0_phone.png">this</a> guide.</p>
<section id="circle-align">

<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<ul class="nolist">
<li class="circle">list item</li>
<li class="circle">list item</li>
<li class="circle">list item</li>
</ul>

</section>
Expand All @@ -48,9 +48,9 @@ <h2>CSS shapes 101</h2>
<p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Circle_Outlines_0_circle-outlines-align_0_phone.png">this</a> guide.</p>
<section id="circle-outlines-align">

<ol>
<li>list item</li>
<li>list item</li>
<ol class="nolist">
<li class="outline">list item</li>
<li class="outline">list item</li>
</ol>

</section>
Expand All @@ -62,10 +62,10 @@ <h2>CSS shapes 101</h2>
<p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Combo_0_shapes-align_0_phone.png">this</a> guide.</p>
<section id="shapes-align">

<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<ul class="nolist">
<li class="box">list item</li>
<li class="circle">list item</li>
<li class="outline">list item</li>
</ul>

</section>
Expand Down
12 changes: 6 additions & 6 deletions app/display-inline-block.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h2>Display: inline, inline-block, and block</h2>

<section id="display-stack-images">

<div>
<div class="display-block">
<img src='assets/kitten.jpg' alt='a kitten'>
<img src='assets/puppy.jpg' alt='a puppy'>
</div>
Expand All @@ -33,7 +33,7 @@ <h2>Display: inline, inline-block, and block</h2>

<section id="display-align-images">

<div>
<div class="display-inline">
<div><img src='assets/puppy.jpg' alt='a puppy'></div>
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
</div>
Expand All @@ -51,10 +51,10 @@ <h2>Display: inline, inline-block, and block</h2>

<section id="display-align-resize-images">

<div>
<div><img src='assets/kitten.jpg' alt='a kitten'></div>
<div><img src='assets/puppy.jpg' alt='a puppy'></div>
<span><img src='assets/chinchilla.jpg' alt='a chinchilla'></span>
<div class="display-inline">
<div class="medium-image"><img src='assets/kitten.jpg' alt='a kitten'></div>
<div class="small-image"><img src='assets/puppy.jpg' alt='a puppy'></div>
<span class="medium-image"><img src='assets/chinchilla.jpg' alt='a chinchilla'></span>
</div>

</section>
Expand Down
1 change: 1 addition & 0 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ <h1>In the following exercises, you will be asked to complete a series of CSS ka
<h2>Contents</h2>
<dl>
<dt><a href="css-kata-boilerplate.html">CSS Kata boilerplate</a></dt>
<dt><a href="typography-101.html">Typography 101</a></dt>
<dt><a href="display-inline-block.html">Display: inline, inline-block, and block</a></dt>
<dt><a href="box-model.html">Box model</a></dt>
<dt><a href="css-shapes-101.html">CSS shapes 101</a></dt>
Expand Down
12 changes: 6 additions & 6 deletions app/positioning.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ <h2>Positioning</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-setup_0_phone.png">this</a> guide.</p>

<section id="position-setup">
<div>
<div></div>
<div class="lawn">
<div class="ball"></div>
</div>
</section>
</li>
Expand All @@ -29,8 +29,8 @@ <h2>Positioning</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-bottom_0_phone.png">this</a> guide.</p>

<section id="position-bottom">
<div>
<div></div>
<div class="lawn">
<div class="ball ball--br"></div>
</div>
</section>
</li>
Expand All @@ -40,8 +40,8 @@ <h2>Positioning</h2>
<p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-override_0_phone.png">this</a> guide.</p>

<section id="position-override">
<div>
<div></div>
<div class="lawn lawn-override">
<div class="ball ball--br"></div>
</div>
</section>
</li>
Expand Down
Loading

0 comments on commit 2914b32

Please sign in to comment.