steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Replace px font-size with relative units (em and rem)

Browse Source
This commit is contained in:
Michael Rose
2016-03-30 16:59:48 -04:00
parent 570864dfb8
commit 045c7db1dd
18 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/author-profile.html
View File

@@ -18,7 +18,7 @@
</div>
<div class="author__urls-wrapper">
<button class="btn btn--inverse btn--small">Follow</button>
<button class="btn btn--inverse">Follow</button>
<ul class="author__urls social-icons">
{% if author.uri %}
<li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i> {{ site.data.ui-text[site.locale].website_label }}</a></li>

2
_posts/2013-01-11-markup-html-tags-and-formatting.md
View File

@@ -131,14 +131,12 @@ Make any link standout more when applying the `.btn` class.
[Large Button](#){: .btn .btn--large}
[Default Button](#){: .btn}
[Small Button](#){: .btn .btn--small}
[X-Small Button](#){: .btn .btn--x-small}
```markdown
[X-Large Button](#link){: .btn .btn--x-large}
[Large Button](#link){: .btn .btn--large}
[Default Button](#link){: .btn}
[Small Button](#link){: .btn .btn--small}
[X-Small Button](#link){: .btn .btn--x-small}
```
## Notices

44
assets/_scss/_archive.scss
View File

@@ -23,21 +23,25 @@
}
.archive__subtitle {
margin: 2em 0 0;
margin: 1.414em 0 0;
padding-bottom: 0.5em;
font-size: 14px;
font-size: $type-size-5;
color: mix(#fff, $gray, 25%);
border-bottom: 1px solid $border-color;
+ .list__item .archive__item-title {
margin-top: 0.5em;
}
}
.archive__item-title {
margin-bottom: 4px;
margin-bottom: 0.25em;
font-family: $sans-serif-narrow;
font-size: 20px;
font-size: $type-size-5;
}
.archive__item-excerpt {
font-size: 14px;
font-size: $type-size-6;
& + p {
text-indent: 0;
@@ -97,6 +101,11 @@ a:hover {
margin: 0 0 4px;
}
.archive__item-title {
margin-top: 0.5em;
font-size: $type-size-5;
}
.archive__item-excerpt {
display: none;
}
@@ -119,6 +128,7 @@ a:hover {
.archive__item-excerpt {
display: block;
font-size: $type-size-6;
}
}
}
@@ -149,15 +159,15 @@ a:hover {
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
font-size: $type-size-4;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
font-size: $type-size-5;
p {
font-size: 18px;
font-size: $type-size-5;
}
}
@@ -179,15 +189,15 @@ a:hover {
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
font-size: $type-size-4;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
font-size: $type-size-5;
p {
font-size: 18px;
font-size: $type-size-5;
}
}
}
@@ -211,15 +221,15 @@ a:hover {
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
font-size: $type-size-4;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
font-size: $type-size-5;
p {
font-size: 18px;
font-size: $type-size-5;
}
}
}
@@ -243,15 +253,15 @@ a:hover {
.archive__item-title {
margin-bottom: 0.5em;
font-size: 30px;
font-size: $type-size-4;
}
.archive__item-excerpt {
margin-bottom: 1em;
font-size: 18px;
font-size: $type-size-5;
p {
font-size: 18px;
font-size: $type-size-5;
}
}
}

42
assets/_scss/_base.scss
View File

@@ -7,7 +7,7 @@ body {
padding: 0;
color: $text-color;
font-family: $serif;
line-height: 1.5;
line-height: 1.45;
background-color: $background-color;
&.overflow--hidden {
@@ -17,36 +17,42 @@ body {
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
margin: 1.414em 0 0.5em;
line-height: 1.2;
font-family: $sans-serif;
}
h1 {
font-size: 32px;
margin-top: 0;
font-size: $type-size-3;
}
h2 {
font-size: 28px;
font-size: $type-size-4;
}
h3 {
font-size: 24px;
font-size: $type-size-5;
}
h4 {
font-size: 18px;
font-size: $type-size-6;
}
h5 {
font-size: 16px;
font-size: $type-size-6;
}
h6 {
font-size: 14px;
font-size: $type-size-6;
}
small {
font-size: 0.8rem;
font-size: $type-size-6;
}
p {
margin-bottom: 1.3em;
}
u,
@@ -93,7 +99,7 @@ blockquote {
cite {
font-family: $sans-serif;
font-size: 14px;
font-size: $type-size-6;
font-style: normal;
&:before {
@@ -126,18 +132,18 @@ a {
tt, code, kbd, samp, pre {
font-family: $monospace;
font-size: 12px;
}
pre {
overflow-x: auto; // add scrollbars to wide code blocks
}
p code,
li code,
figcaption code {
p > code,
li > code,
figcaption > code {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
font-size: $type-size-6;
background: $code-background-color;
border: 1px solid $lighter-gray;
border-radius: $border-radius;
@@ -216,10 +222,10 @@ figure {
/* Figure captions */
figcaption {
margin-bottom: 0.65rem;
margin-bottom: 0.5em;
color: mix(#fff, $text-color, 25%);
font-family: $sans-serif;
font-size: 0.8rem;
font-size: $type-size-6;
a {
color: inherit;
@@ -232,10 +238,6 @@ figcaption {
border-bottom-color: #000;
}
}
code {
font-size: 0.64rem;
}
}

15
assets/_scss/_buttons.scss
View File

@@ -13,9 +13,8 @@
padding: 0.5em 1em;
color: #fff !important;
font-family: $sans-serif;
font-size: 14px;
font-size: $type-size-6;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: $primary-color;
@@ -137,24 +136,18 @@
/* extra large button */
&--x-large {
font-size: 24px;
font-size: $type-size-3;
}
/* large button */
&--large {
font-size: 18px;
font-size: $type-size-4;
}
/* small button */
&--small {
font-size: 12px;
}
/* extra small button */
&--x-small {
font-size: 10px;
font-weight: normal;
font-size: $type-size-7;
}
}

4
assets/_scss/_footer.scss
View File

@@ -35,7 +35,7 @@
@include prefix(2.5 of 12);
}
font-size: 14px;
font-size: $type-size-6;
}
.page__footer-follow {
@@ -58,7 +58,7 @@
padding-top: 5px;
padding-bottom: 5px;
font-family: $sans-serif-narrow;
font-size: 14px;
font-size: $type-size-6;
text-transform: uppercase;
}

2
assets/_scss/_forms.scss
View File

@@ -336,7 +336,7 @@ select:focus {
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px;
font-size: $type-size-6;
background-color: #fff;
color: #000;
border-width: 2px !important;

4
assets/_scss/_masthead.scss
View File

@@ -38,7 +38,7 @@
@include prefix(2.5 of 12);
}
font-size: 24px;
font-size: $type-size-5;
}
.masthead__menu {
@@ -61,6 +61,6 @@
.masthead__menu-item {
display: block;
list-style-type: none;
font-size: 16px;
font-size: $type-size-6;
white-space: nowrap;
}

14
assets/_scss/_navigation.scss
View File

@@ -27,7 +27,7 @@
ol {
padding: 0;
list-style: none;
font-size: 14px;
font-size: $type-size-6;
@include breakpoint($large) {
@include span(10 of 12 last);
@@ -63,7 +63,6 @@
padding: 0;
list-style-type: none;
font-family: $sans-serif;
font-size: 12px;
}
li {
@@ -123,9 +122,8 @@
float: left;
width: 50%;
font-family: $sans-serif;
font-size: 18px;
font-size: $type-size-5;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: mix(#fff, $gray, 25%);
@@ -257,7 +255,7 @@
a {
margin: 0;
padding: 10px 20px;
font-size: 0.8em;
font-size: $type-size-5;
&:hover {
color: #000;
@@ -308,6 +306,8 @@
========================================================================== */
.nav__list {
font-size: 1.5rem;
a {
display: block;
padding: 4px 0;
@@ -327,7 +327,7 @@
margin: 0;
padding: 10px 20px;
font-family: $sans-serif-narrow;
font-size: 16px;
font-size: $type-size-5;
font-weight: bold;
border-bottom: 1px solid $border-color;
}
@@ -337,7 +337,7 @@
margin: 10px 0;
padding: 10px 0;
font-family: $sans-serif-narrow;
font-size: 16px;
font-size: $type-size-5;
font-weight: bold;
border-bottom: 1px solid $border-color;
}

2
assets/_scss/_notices.scss
View File

@@ -26,7 +26,7 @@
@at-root .page__content #{&} h4 {
// using at-root to override .page-content h4 font size
margin-bottom: 0;
font-size: 1rem;
font-size: 1em;
}
@at-root .page__content #{&} a {

25
assets/_scss/_page.scss
View File

@@ -35,7 +35,6 @@
.page__content,
.page__meta,
.page__share {
@include clearfix();
@include full();
}
}
@@ -44,20 +43,21 @@
.page__title {
margin-top: 0;
font-family: $serif;
font-weight: normal;
line-height: 1;
& + .page__meta {
margin-top: -1.5em;
margin-top: -0.5em;
}
}
.page__lead {
font-family: $sans-serif;
font-size: 20px;
font-size: $type-size-4;
}
.page__content {
p, li, dl {
font-size: 16px;
font-size: 1em;
}
/* paragraph indents */
@@ -112,10 +112,10 @@
}
.page__title {
font-size: 48px;
font-size: $type-size-2;
@include breakpoint($small) {
font-size: 60px;
font-size: $type-size-1;
}
}
@@ -139,7 +139,7 @@
padding: 2px 5px;
color: #fff;
font-family: $sans-serif;
font-size: 10px;
font-size: $type-size-7;
background: #000;
text-align: right;
z-index: 5;
@@ -167,8 +167,8 @@
}
.page__share-title {
font-size: 14px;
margin-bottom: 10px;
font-size: $type-size-6;
text-transform: uppercase;
}
@@ -181,7 +181,7 @@
margin-top: 2em;
color: mix(#fff, $gray, 25%);
font-family: $sans-serif;
font-size: 14px;
font-size: $type-size-6;
p {
margin-bottom: 0.5em;
@@ -189,8 +189,8 @@
}
.page__meta-title {
font-size: 14px;
margin-bottom: 10px;
font-size: $type-size-6;
text-transform: uppercase;
}
@@ -230,15 +230,14 @@
========================================================================== */
.page__comments {
@include clearfix();
@include full();
}
.page__comments-title {
font-size: 14px;
margin-top: 2rem;
margin-bottom: 10px;
padding-top: 2rem;
font-size: $type-size-6;
border-top: 1px solid $border-color;
text-transform: uppercase;
}
@@ -269,7 +268,7 @@
}
.page__related-title {
font-size: 14px;
margin-bottom: 10px;
font-size: $type-size-6;
text-transform: uppercase;
}

6
assets/_scss/_reset.scss
View File

@@ -8,13 +8,9 @@ html {
/* apply a natural box layout model to all elements */
box-sizing: border-box;
background-color: $background-color;
font-size: 15px;
font-size: 16px;
@include breakpoint($medium) {
font-size: 16px;
}
@include breakpoint($large) {
font-size: 18px;
}

15
assets/_scss/_sidebar.scss
View File

@@ -24,17 +24,17 @@
}
h3 {
font-size: 20px;
font-size: $type-size-4;
}
h4 {
font-size: 18px;
font-size: $type-size-4;
}
p, li {
font-family: $sans-serif;
font-size: 12px;
line-height: 1.2;
font-size: $type-size-6;
line-height: 1.45;
}
img {
@@ -108,16 +108,15 @@
}
.sidebar .author__name {
font-family: $sans-serif;
font-size: 16px;
font-size: $type-size-5;
@include breakpoint($large) {
font-size: 18px;
font-size: $type-size-4;
}
}
.author__bio {
margin: 0;
font-size: 12px;
@include breakpoint($large) {
margin-top: 10px;
@@ -213,7 +212,7 @@
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 14px;
font-size: $type-size-5;
text-decoration: none;
white-space: nowrap;

4
assets/_scss/_syntax.scss
View File

@@ -12,8 +12,8 @@ div.highlighter-rouge, figure.highlight {
.highlight {
margin: 0;
font-family: $monospace;
font-size: 12px;
line-height: 1.5;
font-size: $type-size-6;
line-height: 1.45;
}
}

2
assets/_scss/_tables.scss
View File

@@ -5,7 +5,7 @@
table {
width: 100%;
font-family: $sans-serif;
font-size: 0.8rem;
font-size: $type-size-6;
border-collapse: collapse;
border-bottom: 2px solid $border-color;

2
assets/_scss/_utilities.scss
View File

@@ -360,7 +360,7 @@ $navicon-height : 4px;
.footnotes {
ol, li, p {
margin-bottom: 0;
font-size: 14px;
font-size: $type-size-6;
}
}

15
assets/_scss/_variables.scss
View File

@@ -7,11 +7,10 @@
========================================================================== */
$doc-font-size : 16;
$doc-line-height : 26;
/* paragraph indention */
$paragraph-indent : false; // true, false (default)
$indent-var : 0rem + ($doc-line-height / $doc-font-size);
$indent-var : 1.3em;
/* system typefaces */
$serif : Georgia, Times, serif;
@@ -29,6 +28,16 @@ $bodoni : "Bodoni MT", serif;
$calisto : "Calisto MT", serif;
$garamond : Garamond, serif;
/* type scale */
$type-size-1 : 3.998em;
$type-size-2 : 2.827em;
$type-size-3 : 1.999em;
$type-size-4 : 1.414em;
$type-size-5 : 1em;
$type-size-6 : 0.707em;
$type-size-7 : 0.5em;
$type-size-8 : 0.354em;
/*
Colors
@@ -41,7 +50,7 @@ $lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff;
$background-color : #f5f5f5;
$code-background-color : #f8f8f8;
$code-background-color : #fff;
$text-color : #333332;
$border-color : $lighter-gray;
$base-color : #343434;

2
assets/css/main.css
View File

File diff suppressed because one or more lines are too long