N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve flexibility of applying color to the theme

Browse source
This commit is contained in:
Michael Rose 2016-04-05 15:18:05 -04:00
parent 1b9508d229
commit ecae46746d
13 changed files with 69 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_posts/2010-02-05-post-notice.md
View file

@ -14,6 +14,9 @@ When using Kramdown `{: .notice}` can be added after a sentence to assign the `.
**Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes. **Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
{: .notice} {: .notice}
**Primary Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--primary}
**Info Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. **Info Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
{: .notice--info} {: .notice--info}

1
assets/_scss/_archive.scss
View file

@ -18,6 +18,7 @@
} }
a { a {
color: inherit;
text-decoration: none; text-decoration: none;
} }
} }

15
assets/_scss/_base.scss
View file

@ -6,7 +6,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $text-color; color: $text-color;
font-family: $serif; font-family: $global-font-family;
line-height: 1.5; line-height: 1.5;
&.overflow--hidden { &.overflow--hidden {
@ -18,7 +18,7 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 1.414em 0 0.5em; margin: 1.414em 0 0.5em;
line-height: 1.2; line-height: 1.2;
font-family: $sans-serif; font-family: $header-font-family;
font-weight: bold; font-weight: bold;
} }
@ -91,14 +91,13 @@ blockquote {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
font-style: italic; font-style: italic;
border-left: 0.25em solid $accent-color; border-left: 0.25em solid $primary-color;
a { a {
color: inherit; color: inherit;
} }
cite { cite {
font-family: $sans-serif;
font-style: italic; font-style: italic;
&:before { &:before {
@ -186,7 +185,7 @@ figure {
img { img {
width: 100%; width: 100%;
border-radius: $border-radius; border-radius: $border-radius;
transition: box-shadow 0.3s; transition: $global-transition;
} }
> a { > a {
@ -225,14 +224,14 @@ figure {
figcaption { figcaption {
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: mix(#fff, $text-color, 25%); color: mix(#fff, $text-color, 25%);
font-family: $sans-serif; font-family: $caption-font-family;
font-size: $type-size-6; font-size: $type-size-6;
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $light-gray; border-bottom: 1px solid $light-gray;
transition: border 0.4s ease-in-out; transition: $global-transition;
&:hover { &:hover {
color: #000; color: #000;
@ -286,5 +285,5 @@ nav {
========================================================================== */ ========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser { b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
transition: all 0.2s ease-in-out; transition: $global-transition;
} }

3
assets/_scss/_footer.scss
View file

@ -19,6 +19,7 @@
} }
a { a {
color: inherit;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -28,7 +29,7 @@
} }
.page__footer-copyright { .page__footer-copyright {
font-family: $sans-serif; font-family: $global-font-family;
font-size: $type-size-7; font-size: $type-size-7;
@include breakpoint($large) { @include breakpoint($large) {

6
assets/_scss/_forms.scss
View file

@ -51,7 +51,7 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: $serif; font-family: $sans-serif;
box-sizing: border-box; box-sizing: border-box;
} }
@ -81,7 +81,7 @@ select {
color: $text-color; color: $text-color;
&:hover { &:hover {
border-color: mix(#fff, $accent-color, 50%); border-color: mix(#fff, $primary-color, 50%);
} }
} }
@ -212,7 +212,7 @@ textarea[readonly] {
input:focus, input:focus,
textarea:focus { textarea:focus {
border-color: $accent-color; border-color: $primary-color;
outline: 0; outline: 0;
outline: thin dotted \9; outline: thin dotted \9;
} }

15
assets/_scss/_navigation.scss
View file

@ -177,11 +177,11 @@
display: block; display: block;
margin: 0 1rem; margin: 0 1rem;
padding: 0.5rem 0; padding: 0.5rem 0;
color: $gray; color: $masthead-link-color;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: #000; color: $masthead-link-color-hover;
} }
} }
@ -227,15 +227,12 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 4px; height: 4px;
background: $light-gray; background: mix(#fff, $primary-color, 50%);
width: 0; width: 0;
transition: 0.3s; transition: $global-transition;
} }
&:hover { &:hover {
color: #000;
border-bottom-color: $border-color;
&:before { &:before {
width: 100%; width: 100%;
} }
@ -260,8 +257,8 @@
font-size: $type-size-5; font-size: $type-size-5;
&:hover { &:hover {
color: #000; color: $masthead-link-color-hover;
background: $border-color; background: mix(#fff, $primary-color, 75%);
} }
} }

8
assets/_scss/_notices.scss
View file

@ -13,7 +13,7 @@
@mixin notice($notice-color) { @mixin notice($notice-color) {
margin: 2em 0 !important; // override margin: 2em 0 !important; // override
padding: 1em; padding: 1em;
font-family: $sans-serif; font-family: $global-font-family;
font-size: $type-size-6 !important; font-size: $type-size-6 !important;
text-indent: initial; // override text-indent: initial; // override
background-color: mix(#fff, $notice-color, 90%); background-color: mix(#fff, $notice-color, 90%);
@ -70,6 +70,12 @@
/* Default notice */ /* Default notice */
.notice { .notice {
@include notice($light-gray);
}
/* Primary notice */
.notice--primary {
@include notice($primary-color); @include notice($primary-color);
} }

9
assets/_scss/_page.scss
View file

@ -51,7 +51,7 @@
} }
.page__lead { .page__lead {
font-family: $sans-serif; font-family: $global-font-family;
font-size: $type-size-4; font-size: $type-size-4;
} }
@ -151,7 +151,7 @@
margin: 0 auto; margin: 0 auto;
padding: 2px 5px; padding: 2px 5px;
color: #fff; color: #fff;
font-family: $sans-serif; font-family: $caption-font-family;
font-size: $type-size-7; font-size: $type-size-7;
background: #000; background: #000;
text-align: right; text-align: right;
@ -212,6 +212,10 @@
p { p {
margin: 0; margin: 0;
} }
a {
color: inherit;
}
} }
.page__meta-title { .page__meta-title {
@ -289,6 +293,7 @@
} }
a { a {
color: inherit;
text-decoration: none; text-decoration: none;
} }
} }

3
assets/_scss/_reset.scss
View file

@ -61,9 +61,8 @@ audio:not([controls]) {
display: none; display: none;
} }
/* Remove blue color */
a { a {
color: inherit; color: $primary-color;
} }
/* Apply focus state */ /* Apply focus state */

19
assets/_scss/_sidebar.scss
View file

@ -9,7 +9,12 @@
.sidebar { .sidebar {
@include clearfix(); @include clearfix();
margin-bottom: 1em; margin-bottom: 1em;
color: mix(#fff, $gray, 25%); opacity: 0.75;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 1;
}
@include breakpoint($large) { @include breakpoint($large) {
@include span(2 of 12); @include span(2 of 12);
@ -37,14 +42,6 @@
img { img {
width: 100%; width: 100%;
} }
a {
color: mix(#fff, $gray, 25%);
&:hover {
color: $link-color-hover;
}
}
} }
.sidebar__right { .sidebar__right {
@ -73,8 +70,8 @@
@include breakpoint($large) { @include breakpoint($large) {
display: block; display: block;
width: 100%; width: auto;
height: 100%; height: auto;
} }
img { img {

2
assets/_scss/_tables.scss
View file

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

41
assets/_scss/_variables.scss
View file

@ -28,6 +28,10 @@ $bodoni : "Bodoni MT", serif;
$calisto : "Calisto MT", serif; $calisto : "Calisto MT", serif;
$garamond : Garamond, serif; $garamond : Garamond, serif;
$global-font-family : $sans-serif;
$header-font-family : $sans-serif;
$caption-font-family : $sans-serif;
/* type scale */ /* type scale */
$type-size-1 : 2.441em; // ~39.056px $type-size-1 : 2.441em; // ~39.056px
$type-size-2 : 1.953em; // ~31.248px $type-size-2 : 1.953em; // ~31.248px
@ -43,27 +47,24 @@ $type-size-8 : 0.625em; // ~10px
Colors Colors
========================================================================== */ ========================================================================== */
$gray : #4c4c4c; $gray : #7a8288;
$dark-gray : #191413; $dark-gray : mix(#000, $gray, 30%);
$light-gray : mix(#fff, $gray, 70%); $darker-gray : mix(#000, $gray, 50%);
$light-gray : mix(#fff, $gray, 50%);
$lighter-gray : mix(#fff, $gray, 90%); $lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff; $body-color : #fff;
$background-color : #fff; $background-color : #fff;
$code-background-color : #f8f8f8; $code-background-color : $lighter-gray;
$code-background-color-dark : #1b1a24; $code-background-color-dark : $light-gray;
$text-color : #333332; $text-color : $dark-gray;
$border-color : $lighter-gray; $border-color : $lighter-gray;
$base-color : #343434;
$comp-color : spin($base-color, 180);
$accent-color : #000;
/* buttons */ $primary-color : #7a8288;
$primary-color : #000; $success-color : #62c462;
$success-color : #5cb85c; $warning-color : #f89406;
$warning-color : #dd8338; $danger-color : #ee5f5b;
$danger-color : #C64537; $info-color : #5bc0de;
$info-color : #308cbc;
/* brands */ /* brands */
$behance-color : #1769FF; $behance-color : #1769FF;
@ -89,10 +90,11 @@ $xing-color : #006567;
/* links */ /* links */
$link-color : #343434; $link-color : $primary-color;
$link-color-hover : darken($link-color, 10); $link-color-hover : mix(#000, $link-color, 25%);
$link-color-visited : lighten($link-color-hover, 20); $link-color-visited : mix(#fff, $link-color, 25%);
$link-color-focus : darken($link-color-visited, 10); $masthead-link-color : $link-color;
$masthead-link-color-hover : $link-color-hover;
/* /*
@ -142,3 +144,4 @@ $border-radius : 4px;
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); $box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
$navicon-width : 28px; $navicon-width : 28px;
$navicon-height : 4px; $navicon-height : 4px;
$global-transition : all 0.2s ease-in-out;

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long