Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 46906db

Browse files
MichaelArestadMichaelArestad
committed
Build: Updated focus styles
1 parent 76bfa64 commit 46906db

File tree

2 files changed

+17
-31
lines changed

2 files changed

+17
-31
lines changed

‎demos/typography.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="x-ua-compatible" content="ie=edge">
4+
<meta charset='utf-8'>
5+
<meta http-equiv='x-ua-compatible' content='ie=edge'>
66
<title>CSS Chasis - Typography</title>
7-
<meta name="description" content="Typography skeleton for styling">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<link rel="stylesheet" href="../dist/css/chassis.css">
7+
<meta name='description' content='Typography skeleton for styling'>
8+
<meta name='viewport' content='width=device-width, initial-scale=1'>
9+
<link rel='stylesheet' href='../dist/css/chassis.css'>
1010
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic' rel='stylesheet' type='text/css'>
1111
<style>
1212
body {
@@ -53,7 +53,7 @@ <h6>Heading 6 &lt;h6&gt;</h6>
5353

5454
<h2>Block-level elements</h2>
5555

56-
<p>Here's a paragraph &lt;p&gt; filled with some <a href="http://spaceipsum.com/" target="_blank">Space Ipsum</a>. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
56+
<p>Here's a paragraph &lt;p&gt; filled with some <a href='http://spaceipsum.com/'>Space Ipsum</a>. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
5757

5858
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
5959

@@ -66,7 +66,7 @@ <h3>This is an article &lt;article&gt; with a paragraph</h3>
6666
<p>End of the article.</p>
6767
</article>
6868

69-
<blockquote>Let's light this fire one more time, Mike, and witness this great nation at its best. &lt;blockquote&gt; via <a href="http://spaceipsum.com/" target="_blank">Space Ipsum</a></blockquote>
69+
<blockquote>Let's light this fire one more time, Mike, and witness this great nation at its best. &lt;blockquote&gt; via <a href='http://spaceipsum.com/'>Space Ipsum</a></blockquote>
7070

7171
<p>We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.</p>
7272

@@ -127,7 +127,7 @@ <h2>Text-level elements</h2>
127127

128128
<ul>
129129
<li><a href="#">anchor link</a> &lt;a&gt;</li>
130-
<li>abbreviation: <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> &lt;abbr&gt;</li>
130+
<li>abbreviation: <abbr title='Syntactically Awesome Stylesheets'>SASS</abbr> &lt;abbr&gt;</li>
131131
<li><b>bold</b> &lt;b&gt;</li>
132132
<li>citation: <cite>A Study in Scarlet</cite> &lt;cite&gt;</li>
133133
<li>Here's the <code>&lt;code&gt;</code> element</li>
@@ -138,8 +138,8 @@ <h2>Text-level elements</h2>
138138
<li><ins>inserted text</ins> &lt;ins&gt;</li>
139139
<li>keyboard input: <kbd>control + space</kbd> &lt;kbd&gt;</li>
140140
<li><mark>mark element</mark> &lt;mark&gt;</li>
141-
<li>meter: <meter min="200" max="500" value="423">awesomeness</meter> &lt;meter&gt;</li>
142-
<li>progress: <progress value="90" max="100">70 %</progress> &lt;progress&gt;</li>
141+
<li>meter: <meter min='200' max='500' value='423'>awesomeness</meter> &lt;meter&gt;</li>
142+
<li>progress: <progress value='90' max='100'>70 %</progress> &lt;progress&gt;</li>
143143
<li>quotation (short): <q>You just gotta believe!</q> &lt;q&gt;</li>
144144
<li>quotation within a quotation (short): <q>Yo dawg, I heard you like quotes so I put <q>this quote</q> within this quote.</q> &lt;q&gt;</li>
145145
<li>strikethough: <s>Lance Armstrong remains steroid-free.</s> &lt;s&gt;</li>
@@ -149,7 +149,7 @@ <h2>Text-level elements</h2>
149149
<li>strong: <strong>The Hammer</strong> &lt;strong&gt;</li>
150150
<li>subscript: <sub>Lower</sub> 0<sub>1<sub>2<sub>3</sub></sub></sub> &lt;sub&gt;</li>
151151
<li>superscript: I need a good <sup>superman</sup> joke to go here. 0<sup>1<sup>2<sup>3</sup></sup></sup> &lt;sup&gt;</li>
152-
<li>time: <time datetime="1985-12-09 19:00">Dec 9</time> &lt;time&gt;</li>
152+
<li>time: <time datetime='1985-12-09 19:00'>Dec 9</time> &lt;time&gt;</li>
153153
<li>underline: Never underline <u>anything</u>. &lt;u&gt;</li>
154154
<li>variable: <var>cat</var> + <var>dog</var> = <var>catdog</var> &lt;var&gt;</li>
155155
</ul>

‎scss/atoms/typography/_typography.scss

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
@import
66
"variables",
7-
"functions";
7+
"functions",
8+
"mixins";
89

910
body {
1011
font: $normal #{ map-get( $root-font, font-size ) }/1.5 $sans-serif;
@@ -95,25 +96,10 @@ dd {
9596

9697
a {
9798
color: inherit;
98-
text-decoration: none;
99-
background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 50% );
100-
background-repeat: repeat-x;
101-
background-size: 2px 2px;
102-
background-position: 0 em( 22px );
103-
outline: 0;
104-
105-
&:hover,
106-
&:active,
107-
&:focus {
108-
background-size: 2px 6px;
109-
background-position: 0 em( 18px );
110-
}
111-
@media not all,
112-
only screen and ( min-resolution: 2dppx ),
113-
only screen and ( -webkit-min-device-pixel-ratio: 2 ) {
114-
background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 75%, #000 75% );
115-
background-repeat: repeat-x;
116-
}
99+
}
100+
101+
p > a {
102+
@include slim-underline;
117103
}
118104

119105
b,

0 commit comments

Comments
 (0)