Improve flexibility of applying color to the theme
This commit is contained in:
parent
1b9508d229
commit
ecae46746d
13 changed files with 69 additions and 58 deletions
|
@ -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}
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue