rscss for social links + some modifications in configs + social at in…

…cludes
Ryccoo · Feb 20, 2016 · 7ff554f · 7ff554f
1 parent 8c97ff2
commit 7ff554f
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 68 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,16 +1,23 @@
 name: John Doe
 bio: 'A Man who travels the world eating noodles'
+
+# main text of home
 picture: 'assets/images/profile.jpg'
 
-url: http://sergiokopplin.github.io/indigo
+# url: http://sergiokopplin.github.io/indigo
+ulr: http://localhost:3000
 # your url: http://USERNAME.github.io
+# if testing locally: http://localhost:3000
+
 permalink: /:title/
 
 markdown: kramdown
 highlighter: rouge
 
-analytics: 'UA-MYANALYTICS'
+analytics-google: 'UA-MYANALYTICS'
 disqus: mydisqus
+
+# if you don't have any of social below, set to false then
 facebook: myfacebook
 twitter: mytwitter
 instagram: myinstagram

diff --git a/_includes/analytics-google.html b/_includes/analytics-google.html
@@ -1,7 +1,7 @@
 <!-- Google Analytics Tracking code -->
 <script type="text/javascript">
     var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', '{{ site.analytics }}']);
+    _gaq.push(['_setAccount', '{{ site.analytics-google }}']);
     _gaq.push(['_trackPageview']);
     (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,21 +1,13 @@
-{% if page.title == "Home" or page.title == "Blog" or page.title == "Projects" %}{% assign x = true %}{% endif %}
+{% if page.title == "Home" or page.title == "Blog" or page.title == "Projects" %}{% assign showHeader = true %}{% endif %}
 
-{% if x == true %}
+{% if showHeader == true %}
     <header class="home__header">
         <img alt="{{ site.name }}" src="{{ site.url }}/{{ site.picture }}" />
 
         <h1>{{ site.name }}</h1>
         <h2>{{ site.bio }}</h2>
 
-        <div class="home__header-social">
-            <a href="http://facebook.com/{{ site.facebook }}" target="_blank"><svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></a>
-            <a href="http://twitter.com/{{ site.twitter }}" target="_blank"><svg class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg></a>
-            <a href="https://github.com/{{ site.github }}" target="_blank"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
-            <a href="http://instagram.com/{{ site.instagram }}" target="_blank"><svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg></a>
-            <a href="http://linkedin.com/{{ site.linkedin }}" target="_blank"><svg class="icon icon-linkedin"><use xlink:href="#icon-linkedin"></use></svg></a>
-            <a href="http://youtube.com/{{ site.youtube }}" target="_blank"><svg class="icon icon-youtube"><use xlink:href="#icon-youtube"></use></svg></a>
-            <a href="mailto:{{ site.email }}" target="_blank"><svg class="icon icon-mail"><use xlink:href="#icon-mail"></use></svg></a>
-        </div>
+        {% include social-links.html %}
     </header>
 {% endif %}
 

diff --git a/_includes/main.css b/_includes/main.css
@@ -447,27 +447,6 @@ pre {
 .projects .home__header h2 a {
   font-weight: 200;
 }
-.home .home__header .home__header-social,
-.blog .home__header .home__header-social,
-.projects .home__header .home__header-social {
-  margin-top: 20px;
-}
-.home .home__header .home__header-social a,
-.blog .home__header .home__header-social a,
-.projects .home__header .home__header-social a {
-  margin: 0 3px;
-}
-.home .home__header .home__header-social a:hover svg,
-.blog .home__header .home__header-social a:hover svg,
-.projects .home__header .home__header-social a:hover svg {
-  fill: #4b0082;
-}
-.home .home__header .home__header-social svg,
-.blog .home__header .home__header-social svg,
-.projects .home__header .home__header-social svg {
-  -webkit-transition: all ease-in-out 0.2s;
-          transition: all ease-in-out 0.2s;
-}
 .home .home__sections,
 .blog .home__sections,
 .projects .home__sections {
@@ -668,6 +647,20 @@ pre {
 .home__header-nav ul li a:hover {
   color: #666;
 }
+.social-links {
+  margin-top: 20px;
+}
+.social-links > .link {
+  margin: 0 3px;
+  text-decoration: none;
+}
+.social-links > .link:hover > .icon {
+  fill: #4b0082;
+}
+.social-links > .icon {
+  -webkit-transition: all ease-in-out 0.2s;
+          transition: all ease-in-out 0.2s;
+}
 footer {
   border-top: 1px solid #ededed;
   padding: 40px 0;

diff --git a/_includes/social-links.html b/_includes/social-links.html
@@ -0,0 +1,43 @@
+<div class="social-links">
+    {% if site.facebook != false %}
+        <a class="link" href="http://facebook.com/{{ site.facebook }}" target="_blank">
+            <svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.twitter != false %}
+        <a class="link" href="http://twitter.com/{{ site.twitter }}" target="_blank">
+            <svg class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.github != false %}
+        <a class="link" href="https://github.com/{{ site.github }}" target="_blank">
+            <svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.instagram != false %}
+        <a class="link" href="http://instagram.com/{{ site.instagram }}" target="_blank">
+            <svg class="icon icon-instagram"><use xlink:href="#icon-instagram"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.linkedin != false %}
+        <a class="link" href="http://linkedin.com/{{ site.linkedin }}" target="_blank">
+            <svg class="icon icon-linkedin"><use xlink:href="#icon-linkedin"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.youtube != false %}
+        <a class="link" href="http://youtube.com/{{ site.youtube }}" target="_blank">
+            <svg class="icon icon-youtube"><use xlink:href="#icon-youtube"></use></svg>
+        </a>
+    {% endif %}
+
+    {% if site.email != false %}
+        <a class="link" href="mailto:{{ site.email }}" target="_blank">
+            <svg class="icon icon-mail"><use xlink:href="#icon-mail"></use></svg>
+        </a>
+    {% endif %}
+</div>
diff --git a/assets/styles/main.css b/assets/styles/main.css
@@ -447,27 +447,6 @@ pre {
 .projects .home__header h2 a {
   font-weight: 200;
 }
-.home .home__header .home__header-social,
-.blog .home__header .home__header-social,
-.projects .home__header .home__header-social {
-  margin-top: 20px;
-}
-.home .home__header .home__header-social a,
-.blog .home__header .home__header-social a,
-.projects .home__header .home__header-social a {
-  margin: 0 3px;
-}
-.home .home__header .home__header-social a:hover svg,
-.blog .home__header .home__header-social a:hover svg,
-.projects .home__header .home__header-social a:hover svg {
-  fill: #4b0082;
-}
-.home .home__header .home__header-social svg,
-.blog .home__header .home__header-social svg,
-.projects .home__header .home__header-social svg {
-  -webkit-transition: all ease-in-out 0.2s;
-          transition: all ease-in-out 0.2s;
-}
 .home .home__sections,
 .blog .home__sections,
 .projects .home__sections {
@@ -668,6 +647,20 @@ pre {
 .home__header-nav ul li a:hover {
   color: #666;
 }
+.social-links {
+  margin-top: 20px;
+}
+.social-links > .link {
+  margin: 0 3px;
+  text-decoration: none;
+}
+.social-links > .link:hover > .icon {
+  fill: #4b0082;
+}
+.social-links > .icon {
+  -webkit-transition: all ease-in-out 0.2s;
+          transition: all ease-in-out 0.2s;
+}
 footer {
   border-top: 1px solid #ededed;
   padding: 40px 0;

diff --git a/src/styles/components/_social-links.styl b/src/styles/components/_social-links.styl
@@ -0,0 +1,13 @@
+.social-links
+    margin-top 20px
+
+    > .link
+        margin 0 3px
+        text-decoration none
+
+        &:hover
+            > .icon
+                fill delta
+
+    > .icon
+        transition all ease-in-out .2s
diff --git a/src/styles/main.styl b/src/styles/main.styl
@@ -9,6 +9,7 @@
 @import "pages/_post"
 
 @import "components/_nav"
+@import "components/_social-links"
 @import "components/_footer"
 @import "components/_disqus"
 @import "components/_author"

diff --git a/src/styles/pages/_home-blog-projects.styl b/src/styles/pages/_home-blog-projects.styl
@@ -29,18 +29,6 @@
             a
                 font-weight 200
 
-        .home__header-social
-            margin-top 20px
-
-            a
-                margin 0 3px
-
-                &:hover svg
-                    fill delta
-
-            svg
-                transition all ease-in-out .2s
-
     .home__sections
         border-top 1px solid epsilon
         margin-top 30px