steffen/website
1
0
Fork 0
Code Actions Packages Releases 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
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.
{: .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.
{: .notice--info}

1
assets/_scss/_archive.scss
View File

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

15
assets/_scss/_base.scss
View File

@@ -6,7 +6,7 @@ body {
margin: 0;
padding: 0;
color: $text-color;
font-family: $serif;
font-family: $global-font-family;
line-height: 1.5;
&.overflow--hidden {
@@ -18,7 +18,7 @@ body {
h1, h2, h3, h4, h5, h6 {
margin: 1.414em 0 0.5em;
line-height: 1.2;
font-family: $sans-serif;
font-family: $header-font-family;
font-weight: bold;
}
@@ -91,14 +91,13 @@ blockquote {
padding-left: 1em;
padding-right: 1em;
font-style: italic;
border-left: 0.25em solid $accent-color;
border-left: 0.25em solid $primary-color;
a {
color: inherit;
}
cite {
font-family: $sans-serif;
font-style: italic;
&:before {
@@ -186,7 +185,7 @@ figure {
img {
width: 100%;
border-radius: $border-radius;
transition: box-shadow 0.3s;
transition: $global-transition;
}
> a {
@@ -225,14 +224,14 @@ figure {
figcaption {
margin-bottom: 0.5em;
color: mix(#fff, $text-color, 25%);
font-family: $sans-serif;
font-family: $caption-font-family;
font-size: $type-size-6;
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid $light-gray;
transition: border 0.4s ease-in-out;
transition: $global-transition;
&:hover {
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 {
transition: all 0.2s ease-in-out;
transition: $global-transition;
}

3
assets/_scss/_footer.scss
View File

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

6
assets/_scss/_forms.scss
View File

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

15
assets/_scss/_navigation.scss
View File

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

8
assets/_scss/_notices.scss
View File

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

9
assets/_scss/_page.scss
View File

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

3
assets/_scss/_reset.scss
View File

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

19
assets/_scss/_sidebar.scss
View File

@@ -9,7 +9,12 @@
.sidebar {
@include clearfix();
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 span(2 of 12);
@@ -37,14 +42,6 @@
img {
width: 100%;
}
a {
color: mix(#fff, $gray, 25%);
&:hover {
color: $link-color-hover;
}
}
}
.sidebar__right {
@@ -73,8 +70,8 @@
@include breakpoint($large) {
display: block;
width: 100%;
height: 100%;
width: auto;
height: auto;
}
img {

2
assets/_scss/_tables.scss
View File

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

41
assets/_scss/_variables.scss
View File

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