N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
Show stats 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>
<div class="author__urls-wrapper"> <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"> <ul class="author__urls social-icons">
{% if author.uri %} {% 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> <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} [Large Button](#){: .btn .btn--large}
[Default Button](#){: .btn} [Default Button](#){: .btn}
[Small Button](#){: .btn .btn--small} [Small Button](#){: .btn .btn--small}
[X-Small Button](#){: .btn .btn--x-small}
```markdown ```markdown
[X-Large Button](#link){: .btn .btn--x-large} [X-Large Button](#link){: .btn .btn--x-large}
[Large Button](#link){: .btn .btn--large} [Large Button](#link){: .btn .btn--large}
[Default Button](#link){: .btn} [Default Button](#link){: .btn}
[Small Button](#link){: .btn .btn--small} [Small Button](#link){: .btn .btn--small}
[X-Small Button](#link){: .btn .btn--x-small}
``` ```
## Notices ## Notices

44
assets/_scss/_archive.scss
View file

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

42
assets/_scss/_base.scss
View file

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

15
assets/_scss/_buttons.scss
View file

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

4
assets/_scss/_footer.scss
View file

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

2
assets/_scss/_forms.scss
View file

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

4
assets/_scss/_masthead.scss
View file

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

14
assets/_scss/_navigation.scss
View file

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

2
assets/_scss/_notices.scss
View file

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

25
assets/_scss/_page.scss
View file

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

6
assets/_scss/_reset.scss
View file

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

15
assets/_scss/_sidebar.scss
View file

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

4
assets/_scss/_syntax.scss
View file

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

2
assets/_scss/_tables.scss
View file

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

2
assets/_scss/_utilities.scss
View file

@ -360,7 +360,7 @@ $navicon-height : 4px;
.footnotes { .footnotes {
ol, li, p { ol, li, p {
margin-bottom: 0; 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-font-size : 16;
$doc-line-height : 26;
/* paragraph indention */ /* paragraph indention */
$paragraph-indent : false; // true, false (default) $paragraph-indent : false; // true, false (default)
$indent-var : 0rem + ($doc-line-height / $doc-font-size); $indent-var : 1.3em;
/* system typefaces */ /* system typefaces */
$serif : Georgia, Times, serif; $serif : Georgia, Times, serif;
@ -29,6 +28,16 @@ $bodoni : "Bodoni MT", serif;
$calisto : "Calisto MT", serif; $calisto : "Calisto MT", serif;
$garamond : Garamond, 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 Colors
@ -41,7 +50,7 @@ $lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff; $body-color : #fff;
$background-color : #f5f5f5; $background-color : #f5f5f5;
$code-background-color : #f8f8f8; $code-background-color : #fff;
$text-color : #333332; $text-color : #333332;
$border-color : $lighter-gray; $border-color : $lighter-gray;
$base-color : #343434; $base-color : #343434;

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long