Skip to content

Commit

Permalink
refactor(global styles): create global styles and add fonts and colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@gael-boyenval @eko
gael-boyenval authored and eko committed Jun 23, 2017
1 parent 0c19213 commit fd09dbd
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 73 deletions.
40 changes: 20 additions & 20 deletions _includes/icons.html
View file
@@ -1,158 +1,158 @@
{% if include.data.rss %}
<li>
<a href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" title="{{ site.theme_settings.str_rss_follow }}">
<a href class="no-link-style" ="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" title="{{ site.theme_settings.str_rss_follow }}">
<i class="fa fa-fw fa-rss"></i>
</a>
</li>
{% endif %}

{% if include.data.email_address %}
<li>
<a href="mailto:{{ include.data.email_address }}" title="{{ site.theme_settings.str_email }}">
<a href class="no-link-style" ="mailto:{{ include.data.email_address }}" title="{{ site.theme_settings.str_email }}">
<i class="fa fa-fw fa-envelope"></i>
</a>
</li>
{% endif %}

{% if include.data.behance %}
<li>
<a href="https://www.behance.net/{{ include.data.behance }}" title="{{ site.theme_settings.str_follow_on }} Behance">
<a href class="no-link-style" ="https://www.behance.net/{{ include.data.behance }}" title="{{ site.theme_settings.str_follow_on }} Behance">
<i class="fa fa-fw fa-behance"></i>
</a>
</li>
{% endif %}

{% if include.data.bitbucket %}
<li>
<a href="https://bitbucket.org/{{ include.data.bitbucket }}" title="{{ site.theme_settings.str_follow_on }} Bitbucket">
<a href class="no-link-style" ="https://bitbucket.org/{{ include.data.bitbucket }}" title="{{ site.theme_settings.str_follow_on }} Bitbucket">
<i class="fa fa-fw fa-bitbucket"></i>
</a>
</li>
{% endif %}

{% if include.data.dribbble %}
<li>
<a href="https://dribbble.com/{{ include.data.dribbble }}" title="{{ site.theme_settings.str_follow_on }} Dribbble">
<a href class="no-link-style" ="https://dribbble.com/{{ include.data.dribbble }}" title="{{ site.theme_settings.str_follow_on }} Dribbble">
<i class="fa fa-fw fa-dribbble"></i>
</a>
</li>
{% endif %}

{% if include.data.facebook %}
<li>
<a href="https://www.facebook.com/{{ include.data.facebook }}" title="{{ site.theme_settings.str_follow_on }} Facebook">
<a href class="no-link-style" ="https://www.facebook.com/{{ include.data.facebook }}" title="{{ site.theme_settings.str_follow_on }} Facebook">
<i class="fa fa-fw fa-facebook"></i>
</a>
</li>
{% endif %}

{% if include.data.flickr %}
<li>
<a href="https://www.flickr.com/photos/{{ include.data.flickr }}" title="{{ site.theme_settings.str_follow_on }} Flickr">
<a href class="no-link-style" ="https://www.flickr.com/photos/{{ include.data.flickr }}" title="{{ site.theme_settings.str_follow_on }} Flickr">
<i class="fa fa-fw fa-flickr"></i>
</a>
</li>
{% endif %}

{% if include.data.github %}
<li>
<a href="https://github.com/{{ include.data.github }}" title="{{ site.theme_settings.str_follow_on }} GitHub">
<a href class="no-link-style" ="https://github.com/{{ include.data.github }}" title="{{ site.theme_settings.str_follow_on }} GitHub">
<i class="fa fa-fw fa-github"></i>
</a>
</li>
{% endif %}

{% if include.data.google_plus %}
<li>
<a href="https://plus.google.com/{{ include.data.google_plus }}" title="{{ site.theme_settings.str_follow_on }} Google+">
<a href class="no-link-style" ="https://plus.google.com/{{ include.data.google_plus }}" title="{{ site.theme_settings.str_follow_on }} Google+">
<i class="fa fa-fw fa-google-plus"></i>
</a>
</li>
{% endif %}

{% if include.data.instagram %}
<li>
<a href="http://instagram.com/{{ include.data.instagram }}" title="{{ site.theme_settings.str_follow_on }} Instagram">
<a href class="no-link-style" ="http://instagram.com/{{ include.data.instagram }}" title="{{ site.theme_settings.str_follow_on }} Instagram">
<i class="fa fa-fw fa-instagram"></i>
</a>
</li>
{% endif %}

{% if include.data.linkedin %}
<li>
<a href="{{ include.data.linkedin }}" title="{{ site.theme_settings.str_follow_on }} LinkedIn">
<a href class="no-link-style" ="{{ include.data.linkedin }}" title="{{ site.theme_settings.str_follow_on }} LinkedIn">
<i class="fa fa-fw fa-linkedin"></i>
</a>
</li>
{% endif %}

{% if include.data.pinterest %}
<li>
<a href="http://www.pinterest.com/{{ include.data.pinterest }}" title="{{ site.theme_settings.str_follow_on }} Pinterest">
<a href class="no-link-style" ="http://www.pinterest.com/{{ include.data.pinterest }}" title="{{ site.theme_settings.str_follow_on }} Pinterest">
<i class="fa fa-fw fa-pinterest"></i>
</a>
</li>
{% endif %}

{% if include.data.reddit %}
<li>
<a href="https://www.reddit.com/user/{{ include.data.reddit }}" title="{{ site.theme_settings.str_follow_on }} Reddit">
<a href class="no-link-style" ="https://www.reddit.com/user/{{ include.data.reddit }}" title="{{ site.theme_settings.str_follow_on }} Reddit">
<i class="fa fa-fw fa-reddit"></i>
</a>
</li>
{% endif %}

{% if include.data.soundcloud %}
<li>
<a href="https://soundcloud.com/{{ include.data.soundcloud }}" title="{{ site.theme_settings.str_follow_on }} SoundCloud">
<a href class="no-link-style" ="https://soundcloud.com/{{ include.data.soundcloud }}" title="{{ site.theme_settings.str_follow_on }} SoundCloud">
<i class="fa fa-fw fa-soundcloud"></i>
</a>
</li>
{% endif %}

{% if include.data.stack_exchange %}
<li>
<a href="{{ include.data.stack_exchange }}" title="{{ site.theme_settings.str_follow_on }} Stack Exchange">
<a href class="no-link-style" ="{{ include.data.stack_exchange }}" title="{{ site.theme_settings.str_follow_on }} Stack Exchange">
<i class="fa fa-fw fa-stack-exchange"></i>
</a>
</li>
{% endif %}

{% if include.data.steam %}
<li>
<a href="http://steamcommunity.com/id/{{ include.data.steam }}" title="{{ site.theme_settings.str_follow_on }} Steam">
<a href class="no-link-style" ="http://steamcommunity.com/id/{{ include.data.steam }}" title="{{ site.theme_settings.str_follow_on }} Steam">
<i class="fa fa-fw fa-steam"></i>
</a>
</li>
{% endif %}

{% if include.data.tumblr %}
<li>
<a href="http://{{ include.data.tumblr }}.tumblr.com/" title="{{ site.theme_settings.str_follow_on }} Tumblr">
<a href class="no-link-style" ="http://{{ include.data.tumblr }}.tumblr.com/" title="{{ site.theme_settings.str_follow_on }} Tumblr">
<i class="fa fa-fw fa-tumblr"></i>
</a>
</li>
{% endif %}

{% if include.data.twitter %}
<li>
<a href="https://twitter.com/{{ include.data.twitter }}" title="{{ site.theme_settings.str_follow_on }} Twitter">
<a href class="no-link-style" ="https://twitter.com/{{ include.data.twitter }}" title="{{ site.theme_settings.str_follow_on }} Twitter">
<i class="fa fa-fw fa-twitter"></i>
</a>
</li>
{% endif %}

{% if include.data.wordpress %}
<li>
<a href="https://{{ include.data.wordpress }}.wordpress.com/" title="{{ site.theme_settings.str_follow_on }} WordPress">
<a href class="no-link-style" ="https://{{ include.data.wordpress }}.wordpress.com/" title="{{ site.theme_settings.str_follow_on }} WordPress">
<i class="fa fa-fw fa-wordpress"></i>
</a>
</li>
{% endif %}

{% if include.data.youtube %}
<li>
<a href="https://www.youtube.com/channel/{{ include.data.youtube }}" title="{{ site.theme_settings.str_follow_on }} YouTube">
<a href class="no-link-style" ="https://www.youtube.com/channel/{{ include.data.youtube }}" title="{{ site.theme_settings.str_follow_on }} YouTube">
<i class="fa fa-fw fa-youtube"></i>
</a>
</li>
Expand Down
70 changes: 40 additions & 30 deletions _sass/base/_global.scss
View file
Expand Up @@ -12,6 +12,7 @@ figure {
}
html {
background: $background-color;
font-size: 10px;
}

// Typography
Expand All @@ -23,34 +24,20 @@ html {
}
body {
color: $brand-black;
font-family: $font-family-main;
font-size: $font-size;
word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-headings;
line-height: 1.3;
margin: 0.67em 0;
a {
color: $brand-black;
font-weight: lighter;
word-wrap: break-word;

@media (min-width: 480px) {
font-size: $font-size;
}

@media (max-width: 480px) {
font-size: $font-size-mobile;
}

}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.15em;
}
blockquote {
border-left: 2px solid;
padding: 1em 1em;
}

blockquote p:last-child,
footer p:last-child {
margin-bottom: 0;
Expand All @@ -66,7 +53,7 @@ table {
}
td,
th {
padding: 0.5em 1em;
padding: 0.5em 1rem;
border: 1px solid $border-color;
text-align: left;
}
Expand All @@ -79,15 +66,20 @@ pre,
samp {
margin: 1em 0;
}

h1, h2, h3, h4 {
margin: 0;
}

dt {
font-weight: bold;
}
dd {
margin-left: 2em;
margin-left: 2rem;
}
p, ol, ul, dl, .math-display {
line-height: 1.5;
margin-bottom: 1em;
margin-bottom: 1rem;
}
// KaTeX math display
.math-display {
Expand All @@ -97,7 +89,7 @@ p, ol, ul, dl, .math-display {
// Lists within lists
li > ul, li > ol {
margin-bottom: 0;
margin-left: 1em;
margin-left: 1rem;
}
ol, ul {
list-style-position: inside;
Expand All @@ -108,10 +100,28 @@ hr {
border-bottom: 1px solid #fff;
margin: 1em 0;
}
a {

a:not(.no-link-style) {
color: $link-color;
text-decoration: none;
color: $brand-black;
display: inline-block;
letter-spacing: 0.05em;
text-decoration: underline;

&:hover {
text-decoration: none;
background: $brand-yellow;
}

&:visited,
&:visited:hover {
color: #999;
}
}



.nav {
list-style: none;
margin: 0;
Expand Down
67 changes: 54 additions & 13 deletions _sass/base/_utility.scss
View file
Expand Up @@ -12,23 +12,64 @@
}
}
%link-hover {
text-decoration: underline;
color: darken($link-color, 15%);
font-family: $font-family-headings;
line-height: 1.1;
}
// Buttons
.button {
border-radius: 0.3em;
border: 1px solid;

%h1 {
font-family: $font-family-headings;
line-height: 1.1;
font-weight: lighter;
text-transform: uppercase;

@media (min-width: 480px) {
font-size: 5rem;
}

@media (max-width: 480px) {
font-size: 3rem;
}
}

%h2 {
font-family: $font-family-headings;
line-height: 1.1;
font-weight: 800;
text-transform: uppercase;

@media (min-width: 480px) {
font-size: 2.4rem;
}

@media (max-width: 480px) {
font-size: 2rem;
}
}

%h3 {
font-family: $font-family-headings;
line-height: 1.1;
padding: 0.3em 0.5em;
background: $brand-yellow;
font-weight: lighter;
display: inline-block;
margin: 1em 0;
padding: 0.5em 0.75em;
text-transform: uppercase;

@media (min-width: 480px) {
font-size: 1.6rem;
}

@media (max-width: 480px) {
font-size: 1.3rem;
}
}
a.button:hover {
background: $link-color;
border: 1px solid $link-color;
color: $background-color;
text-decoration: none;

%h4 {
font-family: $font-family-headings;
line-height: 1.1;
font-size: 1.8rem;
}

// States
.disabled {
opacity: 0.7;
Expand Down

0 comments on commit fd09dbd

Please sign in to comment.