diff options
| author | Gabriel Albo <gabriel@albo.com.br> | 2014-08-20 17:37:03 -0300 |
|---|---|---|
| committer | Gabriel Albo <gabriel@albo.com.br> | 2014-08-20 17:37:03 -0300 |
| commit | 27ebf2d416df50513c19d83472e999530c9ce568 (patch) | |
| tree | 7588b7fb1ea8eb10e583c29253e25b97b8a7a961 | |
| parent | bc6c616791ac0a81f64313001c5173a92c8ae172 (diff) | |
Adding typography information
| -rw-r--r-- | web-ui/app/scss/style-guide.scss | 20 | ||||
| -rw-r--r-- | web-ui/app/style-guide.html | 29 |
2 files changed, 32 insertions, 17 deletions
diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss index 77efdfa8..f1b31ddd 100644 --- a/web-ui/app/scss/style-guide.scss +++ b/web-ui/app/scss/style-guide.scss @@ -18,13 +18,16 @@ nav { ul li { display: inline; +} - a { - color: $primary_color; - } - a:hover { - color: lighten($primary_color, 15%); - } +ul.typography li { + display: inline-block; + text-align: center; + margin: 20px 10px 0 0; + padding: 30px; + min-height: 125px; + min-width: 130px; + border: 1px solid #EEE; } ul.left, ul.right { @@ -43,7 +46,7 @@ section.guide-section { display: block; height: 100%; overflow-y: auto; - padding: 82px 32px; + padding: 66px 32px; } .color-swatch { @@ -58,6 +61,9 @@ section.guide-section { .color-label { position: relative; top: 173px; +} + +.color-label, .typeface-sample { background-color: white; border: 1px solid #eee; text-align: center; diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html index 35a3797b..39a4cdfe 100644 --- a/web-ui/app/style-guide.html +++ b/web-ui/app/style-guide.html @@ -124,16 +124,25 @@ <h2>Typography</h2> </br> - Typography. Basic references to typefaces and sizes. - </br> - Typography. Basic references to typefaces and sizes. - </br> - Typography. Basic references to typefaces and sizes. - </br> - Typography. Basic references to typefaces and sizes. - </br> - Typography. Basic references to typefaces and sizes. - </br> + Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson. + </br> + <ul class="typography"> + <li> + <h2>Aa</h2> + <span>Regular</span> + </li> + <li> + <h2 style="font-weight: bold;">Aa</h2> + <span>Bold</span> + </li> + <li> + <h2 style="font-weight: 800;">Aa</h2> + <span>Extra Bold</span> + </li> + <li> + <h2 style="font-weight: lighter;">Aa</h2> + <span>Lighter</span> + </li> </section> <section id="components" class="guide-section" name="components"> <h2>Components</h2> |