Update labels, and colors, and things

This commit is contained in:
Michael Rose 2016-03-22 22:59:39 -04:00
parent f029ce6e25
commit 0feeb21821
15 changed files with 212 additions and 69 deletions

View file

@ -249,6 +249,7 @@ author:
steam : steam :
tumblr : tumblr :
twitter : *twitter twitter : *twitter
vine :
weibo : weibo :
xing : xing :
youtube : youtube :

View file

@ -17,7 +17,7 @@ en: &DEFAULT_EN
date_label : "Last Updated:" date_label : "Last Updated:"
comments_label : "Leave a Comment" comments_label : "Leave a Comment"
related_label : "You May Also Enjoy" related_label : "You May Also Enjoy"
follow_label : "Follow " follow_label : "Follow:"
feed_label : "Feed" feed_label : "Feed"
powered_by : "Powered by" powered_by : "Powered by"
en_US: en_US:

View file

@ -19,7 +19,7 @@
<div class="author__urls-wrapper"> <div class="author__urls-wrapper">
<button class="btn btn--inverse">Follow</button> <button class="btn btn--inverse">Follow</button>
<ul class="author__urls"> <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>Website</a></li> <li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>
{% endif %} {% endif %}
@ -54,7 +54,7 @@
<li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a></li> <li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a></li>
{% endif %} {% endif %}
{% if author.lastfm %} {% if author.lastfm %}
<li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a></li> <li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-lastfm-square"></i> Last.fm</a></li>
{% endif %} {% endif %}
{% if author.dribbble %} {% if author.dribbble %}
<li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li> <li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li>
@ -83,6 +83,9 @@
{% if author.codepen %} {% if author.codepen %}
<li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li> <li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li>
{% endif %} {% endif %}
{% if author.vine %}
<li><a href="https://vine.co/u/{{ author.vine }}" target="_blank"><i class="fa fa-fw fa-vine"></i> Vine</a></li>
{% endif %}
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -15,7 +15,7 @@
{% endif %} {% endif %}
<div class="page__footer-follow"> <div class="page__footer-follow">
<ul> <ul class="social-icons">
{% if site.data.ui-text[site.locale].follow_label %} {% if site.data.ui-text[site.locale].follow_label %}
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li> <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
{% endif %} {% endif %}

View file

@ -164,8 +164,8 @@ li code,
figcaption code { figcaption code {
padding-top: 0.1rem; padding-top: 0.1rem;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
background: mix(#fff, $light-gray, 40%); background: mix(#fff, $lighter-gray, 20%);
border: 1px solid $light-gray; border: 1px solid $lighter-gray;
border-radius: $border-radius; border-radius: $border-radius;
&:before, &:after { &:before, &:after {

View file

@ -49,12 +49,13 @@
/* for dark backgrounds */ /* for dark backgrounds */
&--inverse { &--inverse {
color: currentColor !important; color: $gray !important;
border: 1px solid currentColor !important; // override border: 1px solid $light-gray !important; // override
background-color: #fff; background-color: #fff;
&:hover { &:hover {
background-color: mix(#000, #fff, 20%); color: #fff !important;
border-color: $gray;
} }
} }

View file

@ -55,8 +55,10 @@
li { li {
display: inline-block; display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;
font-size: 16px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
} }
@ -66,6 +68,7 @@
} }
a { a {
padding-right: 10px;
font-weight: bold; font-weight: bold;
} }
} }

View file

@ -64,10 +64,4 @@
list-style-type: none; list-style-type: none;
font-size: 16px; font-size: 16px;
white-space: nowrap; white-space: nowrap;
a {
&:hover {
color: $gray;
}
}
} }

View file

@ -75,8 +75,14 @@
a { a {
display: block; display: block;
padding: 10px 20px; margin: 0 20px;
padding: 10px 0;
color: $gray;
text-decoration: none; text-decoration: none;
&:hover {
color: #000;
}
} }
button { button {
@ -99,17 +105,27 @@
&:first-child { &:first-child {
font-weight: bold; font-weight: bold;
a { a {
padding-left: 0; margin-left: 0;
} }
} }
&:last-child { &:last-child {
a { a {
padding-right: 0; margin-right: 0;
} }
} }
} }
a {
border-bottom: 4px solid transparent;
&:hover {
color: #000;
border-bottom-color: $border-color;
}
}
} }
.hidden-links { .hidden-links {
@ -124,7 +140,14 @@
box-shadow: 0 0 10px rgba(#000, 0.25); box-shadow: 0 0 10px rgba(#000, 0.25);
a { a {
margin: 0;
padding: 10px 20px;
font-size: 0.8em; font-size: 0.8em;
&:hover {
color: #000;
background: $border-color;
}
} }
&:before { &:before {
@ -156,6 +179,7 @@
li { li {
display: block; display: block;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }

View file

@ -52,7 +52,7 @@
} }
code { code {
background-color: mix(#fff, $notice-color, 70%) background-color: mix(#fff, $notice-color, 95%)
} }
} }

View file

@ -214,6 +214,8 @@
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
padding-right: 5px; padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;

View file

@ -36,7 +36,7 @@
&:hover { &:hover {
color: #000; color: #000;
background: $border-color; background: $lighter-gray;
} }
} }

View file

@ -153,6 +153,112 @@ body:hover .visually-hidden button {
vertical-align: middle; vertical-align: middle;
} }
// social icons
.social-icons {
.fa-behance,
.fa-behance-square {
color: $behance-color;
}
.fa-dribbble {
color: $dribbble-color;
}
.fa-facebook,
.fa-facebook-square {
color: $facebook-color;
}
.fa-twitter,
.fa-twitter-square {
color: $twitter-color;
}
.fa-flickr {
color: $flickr-color;
}
.fa-foursquare {
color: $foursquare-color;
}
.fa-github,
.fa-github-alt,
.fa-github-square {
color: $github-color;
}
.fa-google-plus,
.fa-google-plus-square {
color: $google-plus-color;
}
.fa-instagram {
color: $instagram-color;
}
.fa-lastfm,
.fa-lastfm-square {
color: $lastfm-color;
}
.fa-linkedin,
.fa-linkedin-square {
color: $linkedin-color;
}
.fa-pinterest,
.fa-pinterest-p,
.fa-pinterest-square {
color: $pinterest-color;
}
.fa-rss,
.fa-rss-square {
color: $rss-color;
}
.fa-soundcloud {
color: $soundcloud-color;
}
.fa-stack-exchange,
.fa-stack-overflow {
color: $stackoverflow-color;
}
.fa-tumblr,
.fa-tumblr-square {
color: $tumblr-color;
}
.fa-twitter,
.fa-twitter-square {
color: $twitter-color;
}
.fa-vimeo,
.fa-vimeo-square {
color: $vimeo-color;
}
.fa-vine {
color: $vine-color;
}
.fa-youtube,
.fa-youtube-square,
.fa-youtube-play {
color: $youtube-color;
}
.fa-xing,
.fa-xing-square {
color: $xing-color;
}
}
/* /*
Navicons Navicons

View file

@ -6,73 +6,82 @@
Typography Typography
========================================================================== */ ========================================================================== */
$doc-font-size : 16; $doc-font-size : 16;
$doc-line-height : 26; $doc-line-height : 26;
$paragraph-indent : false !default; $paragraph-indent : false !default;
$indent-var : 0rem + ($doc-line-height / $doc-font-size); $indent-var : 0rem + ($doc-line-height / $doc-font-size);
/* system typefaces */ /* system typefaces */
$serif : Georgia, Times, serif; $serif : Georgia, Times, serif;
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; $sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
$monospace : Monaco, Consolas, "Lucida Console", monospace; $monospace : Monaco, Consolas, "Lucida Console", monospace;
/* sans serif typefaces */ /* sans serif typefaces */
$sans-serif-narrow : $sans-serif; $sans-serif-narrow : $sans-serif;
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif; $helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif;
/* serif typefaces */ /* serif typefaces */
$georgia : Georgia, serif; $georgia : Georgia, serif;
$times : Times, serif; $times : Times, serif;
$bodoni : "Bodoni MT", serif; $bodoni : "Bodoni MT", serif;
$calisto : "Calisto MT", serif; $calisto : "Calisto MT", serif;
$garamond : Garamond, serif; $garamond : Garamond, serif;
/* /*
Colors Colors
========================================================================== */ ========================================================================== */
$gray : #4c4c4c; $gray : #4c4c4c;
$dark-gray : #191413; $dark-gray : #191413;
$light-gray : #e2e2e2; $light-gray : mix(#fff, $gray, 70%);
$lighter-gray : #f9f9f9; $lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff; $body-color : #fff;
$background-color : #fff; $background-color : #fff;
$text-color : #333332; $text-color : #333332;
$border-color : $light-gray; $border-color : $lighter-gray;
$base-color : #343434; $base-color : #343434;
$comp-color : spin($base-color, 180); $comp-color : spin($base-color, 180);
$accent-color : #000; $accent-color : #000;
/* buttons */ /* buttons */
$primary-color : #000; $primary-color : #000;
$success-color : #5cb85c; $success-color : #5cb85c;
$warning-color : #dd8338; $warning-color : #dd8338;
$danger-color : #C64537; $danger-color : #C64537;
$info-color : #308cbc; $info-color : #308cbc;
/* brands */ /* brands */
$facebook-color : #3b5998; $behance-color : #1769FF;
$flickr-color : #ff0084; $dribbble-color : #ea4c89;
$foursquare-color : #0cbadf; $facebook-color : #3b5998;
$google-plus-color : #dd4b39; $flickr-color : #ff0084;
$instagram-color : #4e433c; $foursquare-color : #0072b1;
$linkedin-color : #4875b4; $github-color : #171516;
$pinterest-color : #cb2027; $google-plus-color : #dd4b39;
$rss-color : #fa9b39; $instagram-color : #517fa4;
$tumblr-color : #2c4762; $lastfm-color : #d51007;
$twitter-color : #55acee; $linkedin-color : #007bb6;
$vimeo-color : #1ab7ea; $pinterest-color : #cb2027;
$youtube-color : #ff3333; $rss-color : #fa9b39;
$soundcloud-color : #ff3300;
$stackoverflow-color : #fe7a15;
$tumblr-color : #32506d;
$twitter-color : #55acee;
$vimeo-color : #1ab7ea;
$vine-color : #00bf8f;
$youtube-color : #bb0000;
$xing-color : #006567;
/* links */ /* links */
$link-color : #343434; $link-color : #343434;
$link-color-hover : darken($link-color, 10); $link-color-hover : darken($link-color, 10);
$link-color-visited : lighten($link-color-hover, 20); $link-color-visited : lighten($link-color-hover, 20);
$link-color-focus : darken($link-color-visited, 10); $link-color-focus : darken($link-color-visited, 10);
$border-radius : 4px; $border-radius : 4px;
/* /*

File diff suppressed because one or more lines are too long