Update labels, and colors, and things
This commit is contained in:
parent
f029ce6e25
commit
0feeb21821
15 changed files with 212 additions and 69 deletions
|
@ -249,6 +249,7 @@ author:
|
||||||
steam :
|
steam :
|
||||||
tumblr :
|
tumblr :
|
||||||
twitter : *twitter
|
twitter : *twitter
|
||||||
|
vine :
|
||||||
weibo :
|
weibo :
|
||||||
xing :
|
xing :
|
||||||
youtube :
|
youtube :
|
|
@ -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:
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: mix(#fff, $notice-color, 70%)
|
background-color: mix(#fff, $notice-color, 95%)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: $border-color;
|
background: $lighter-gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
Loading…
Reference in a new issue