Transfer full control over links to _config.yml

_config.yml

@@ -38,64 +38,138 @@ baseurl: '/fuse-core'
 # In order to comply with EU cookie law, enable 'cookieconsent' to show a little popup asking users to acknowledge the GA cookies.
 # Also, some places require you to anonymize the users' IPs, which can be enabled via 'anonymizeip' below. When in doubt, enable.
 # https://support.google.com/analytics/answer/2763052
-ga:
 #ga:
-#    account: 'UA-12345678-1'
+ga:
-#    cookieconsent: true
+    account: 'UA-120960520-1'
-#    anonymizeip: true
+    cookieconsent: true
+    anonymizeip: true
 
 # A picture of you. Leave empty for generic placeholder image.
 # You can use your GitHub image:
-#avatar:
 avatar: "https://avatars3.githubusercontent.com/u/32414568"
 #avatar: "images/jonathan_doe.jpg"
+#avatar:
 
-# All the user IDs on other websites that we want to link to. Leave blank what you don't need.
+
-# The order in which these links appear is controlled in index.html, by reordering the paragraphs.
+# All the social media and other sites that we want to link to. The 'show' flag determines if the link is shown.
+# The order of this list controls the order of the links on the page. Feel free to add.
 links:
-    github:  tsjensen
+  - xing:
-    codepen:
+      name: Xing
-    facebook: your_facebook_username
+      show: false
-    vkontakte: your_vkontakte_username
+      href: https://www.xing.com/profile/YOUR_XING_USERNAME/
-    twitter: your_twitter_username
+      icon: fab fa-xing
-    weibo: your_weibo_username
+  - linkedin:
-    linkedin:
+      name: LinkedIn
-    xing:
+      show: false
-    googleplus:
+      href: https://linkedin.com/in/YOUR_LINKEDIN_USERNAME/
-    vine:
+      icon: fab fa-linkedin
-    instagram:
+  - googleplus:
-    flickr:
+      name: Google+
-    steam:
+      show: false
-    soundcloud:
+      href: https://plus.google.com/+YOUR_GOOGLEPLUS_USERNAME
-    stackoverflow:
+      icon: fab fa-google-plus
-    reddit:
+  - twitter:
-    medium:
+      name: Twitter
-    tumblr:
+      show: true
-    lastfm:
+      href: https://twitter.com/YOUR_TWITTER_USERNAME
-    blog: http://host.domain/your_blog
+      icon: fab fa-twitter
-    publickey: https://pastebin.com/raw/YOUR_PUBLIC_KEY
+  - weibo:
-    email: jonathan.doe@host.domain
+      name: 微博
+      show: true
+      href: https://weibo.com/YOUR_WEIBO_USERNAME
+      icon: fab fa-weibo
+  - vine:
+      name: Vine
+      show: false
+      href: https://vine.co/YOUR_VINE_USERNAME
+      icon: fab fa-vine
+  - facebook:
+      name: Facebook
+      show: false
+      href: https://facebook.com/YOUR_FB_USERNAME
+      icon: fab fa-facebook
+  - vkontakte:
+      name: ВКонтакте
+      show: true
+      href: https://vk.com/YOUR_VK_USERNAME
+      icon: fab fa-vk
+  - instagram:
+      name: Instagram
+      show: false
+      href: https://instagram.com/YOUR_INSTAGRAM_USERNAME
+      icon: fab fa-instagram
+  - flickr:
+      name: Flickr
+      show: false
+      href: https://flickr.com/photos/YOUR_FLICKR_USERNAME
+      icon: fab fa-flickr
+  - steam:
+      name: Steam
+      show: false
+      href: http://steamcommunity.com/id/YOUR_STEAM_CUSTOM_ID
+      icon: fab fa-steam
+  - soundcloud:
+      name: Soundcloud
+      show: false
+      href: https://soundcloud.com/YOUR_SOUNDCLOUD_USERNAME
+      icon: fab fa-soundcloud
+  - lastfm:
+      name: Last.fm
+      show: false
+      href: http://www.last.fm/user/YOUR_LASTFM_USERNAME
+      icon: fab fa-lastfm
+  - github:
+      name: GitHub
+      show: true
+      href: https://github.com/tsjensen
+      icon: fab fa-github
+  - codepen:
+      name: CodePen
+      show: false
+      href: https://codepen.io/YOUR_CODEPEN_USERNAME
+      icon: fab fa-codepen
+  - stackoverflow:
+      name: Stack Overflow
+      show: false
+      href: https://stackoverflow.com/users/YOUR_SO_USERNAME/
+      icon: fab fa-stack-overflow
+  - reddit:
+      name: Reddit
+      show: false
+      href: https://reddit.com/user/YOUR_REDDIT_USERNAME
+      icon: fab fa-reddit
+  - medium:
+      name: Medium
+      show: false
+      href: https://medium.com/@YOUR_MEDIUM_USERNAME
+      icon: fab fa-medium
+  - tumblr:
+      name: Tumblr
+      show: false
+      href: https://YOUR_TUMBLR_USERNAME.tumblr.com/
+      icon: fab fa-tumblr
+  - blog:
+      name: Blog
+      show: true
+      href: http://host.domain/your_blog
+      icon: fas fa-book-open
+  - email:
+      name: Email
+      show: true
+      href: mailto:jonathan.doe@host.domain
+      icon: fas fa-envelope
+  - publickey:
+      name: PGP Key
+      show: true
+      href: https://pastebin.com/raw/YOUR_PUBLIC_KEY
+      icon: fas fa-key
 
-# Featured links appear in their own row below the other links in their own color. Add any number of links.
+
-# Leave empty to disable. 'icon' is the name of any "solid" icon in the Font Awesome
+# Extra HTML which will be displayed below the links. Keep it short. Leave empty to disable.
-# Gallery: https://fontawesome.com/icons?d=gallery&s=solid
+#extra_html:
-# 'caption' may be empty; if set, text displayed below the icon.
+extra_html: >
-featured_links:
+    Any (multiline) text containing simple HTML,
-#featured_links:
+    such as links or ... lorem ipsum.
-#  - link_one:
-#      name: Number One
-#      icon: link
-#      link: https://host.domain/foo/
-#      caption: O-n-e
-#  - link_two:
-#      name: Number Two
-#      icon: link
-#      link: https://host.domain/bar/
-#      caption:
-#  - link_three:
-#      name: Number Three
-#      icon: link
-#      link: /baz/
-#      caption: More than<br>one line
 
 #EOF

css/theme.css

@@ -1,4 +1,4 @@
-/* Fuse Core Jekyll Theme */
+/* ========= Fuse Core Jekyll Theme ============================================================ */
 
 html, body {
     font-family: 'Open Sans',Arial,Helvetica,sans-serif;
@@ -10,6 +10,7 @@ html {
 body {
     margin-bottom: 44px;  /* footer height */
 }
+
 .fullscreen-background {
     background: url("../images/background.jpg") no-repeat center center fixed; 
     -webkit-background-size: cover;
@@ -18,9 +19,6 @@ body {
     background-size: cover;
 }
 
-
-/* --------- Content (avatar, title, normal links) --------------------------------------------- */
-
 div.glass-pane {
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
@@ -30,19 +28,35 @@ div.glass-pane {
 div.fuse-core-content {
     color: white;
 }
+
+
+/* --------- Avatar ---------------------------------------------------------------------------- */
+
 #avatar {
     height: 180px;
     border-radius: 100%;
     border: 5px solid white;
 }
+
+
+/* --------- Title / Subtitle ------------------------------------------------------------------ */
+
 h1 {
     letter-spacing: 0.1em;
     font-size: 3em;
 }
+@media (max-width: 575.98px) {  /* bootstrap 'xs' */
+    h1 {
+        letter-spacing: 0;
+    }
+}
 h3 {
     font-size: 1.2em;
 }
 
+
+/* --------- The Main Links -------------------------------------------------------------------- */
+
 div.row.links > div {
     white-space: nowrap;
     padding: 0;
@@ -72,9 +86,6 @@ div.row.links a:hover {
 }
 
 @media (max-width: 575.98px) {  /* bootstrap 'xs' */
-    h1 {
-        letter-spacing: 0;
-    }
     div.row.links a {
         border-radius: 10px;
         width: 100%;
@@ -82,20 +93,20 @@ div.row.links a:hover {
 }
 
 
-/* --------- Featured Links -------------------------------------------------------------------- */
+/* --------- Extra HTML ------------------------------------------------------------------------ */
 
-div.row.links.featured a {
+.fuse-core-extra {
-    color: #f9cf93;
+    color: rgba(255, 255, 255, 0.7);
-    border-color: #f9cf93;
 }
-div.row.links.featured a:hover {
+.fuse-core-extra a {
-    color: #ffe4be;
+    color: rgba(255, 255, 255, 0.9);
-    border-color: #ffe4be;
+    border-radius: 3px;
+    padding: 0 2px;
 }
-div.row.links.featured .fc-caption {
+.fuse-core-extra a:hover {
-    color: #f9cf93;
+    color: white;
-    line-height: 14px;
+    text-decoration: none;
-    font-size: smaller;
+    background-color: rgba(0, 0, 0, 0.6);
 }
 
 

index.html

@@ -74,6 +74,7 @@ permalink: /
 
 <div class="glass-pane">
 <div class="container fuse-core-content pb-4">
+
 <div class="row pt-sm-4">
     <div class="col text-center"><img id="avatar" class="my-3 my-sm-4"
         src="{% if site.avatar %}{% if site.avatar contains '://' %}{{ site.avatar }}{%
@@ -88,147 +89,16 @@ permalink: /
 </div>
 
 <div class="row justify-content-center links pt-1 pt-sm-2">
-    {% if site.links.xing %}
+{% for hash in site.links %}{% for linkInfo in hash %}{% if linkInfo[1].show %}
     <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://www.xing.com/profile/{{ site.links.xing }}/"><i class="fab fa-xing fa-fw"></i>
+        href="{{ linkInfo[1].href }}"><i class="{{ linkInfo[1].icon }} fa-fw"></i>
-        <span class="d-inline d-sm-none">Xing</span></a></div>
+        <span class="d-inline d-sm-none">{{ linkInfo[1].name }}</span></a></div>
-    {% endif %}
+{% endif %}{% endfor %}{% endfor %}
-
-    {% if site.links.linkedin %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://linkedin.com/in/{{ site.links.linkedin }}/"><i class="fab fa-linkedin fa-fw"></i>
-        <span class="d-inline d-sm-none">LinkedIn</span></a></div>
-    {% endif %}
-
-    {% if site.links.googleplus %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://plus.google.com/+{{ site.links.googleplus }}"><i class="fab fa-google-plus fa-fw"></i>
-        <span class="d-inline d-sm-none">Google+</span></a></div>
-    {% endif %}
-
-    {% if site.links.twitter %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://twitter.com/{{ site.links.twitter }}"><i class="fab fa-twitter fa-fw"></i>
-        <span class="d-inline d-sm-none">Twitter</span></a></div>
-    {% endif %}
-
-    {% if site.links.weibo %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://weibo.com/{{ site.links.weibo }}"><i class="fab fa-weibo fa-fw"></i>
-        <span class="d-inline d-sm-none">微博</span></a></div>
-    {% endif %}
-
-    {% if site.links.vine %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://vine.co/{{ site.links.vine }}"><i class="fab fa-vine fa-fw"></i>
-        <span class="d-inline d-sm-none">Vine</span></a></div>
-    {% endif %}
-
-    {% if site.links.facebook %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://facebook.com/{{ site.links.facebook }}"><i class="fab fa-facebook fa-fw"></i>
-        <span class="d-inline d-sm-none">Facebook</span></a></div>
-    {% endif %}
-
-    {% if site.links.vkontakte %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://vk.com/{{ site.links.vkontakte }}"><i class="fab fa-vk fa-fw"></i>
-        <span class="d-inline d-sm-none">ВКонтакте</span></a></div>
-    {% endif %}
-
-    {% if site.links.instagram %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://instagram.com/{{ site.links.instagram }}"><i class="fab fa-instagram fa-fw"></i>
-        <span class="d-inline d-sm-none">Instagram</span></a></div>
-    {% endif %}
-
-    {% if site.links.flickr %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://flickr.com/photos/{{ site.links.flickr }}"><i class="fab fa-flickr fa-fw"></i>
-        <span class="d-inline d-sm-none">Flickr</span></a></div>
-    {% endif %}
-
-    {% if site.links.steam %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="http://steamcommunity.com/id/{{ site.links.steam }}"><i class="fab fa-steam fa-fw"></i>
-        <span class="d-inline d-sm-none">Steam</span></a></div>
-    {% endif %}
-
-    {% if site.links.soundcloud %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://soundcloud.com/{{ site.links.soundcloud }}"><i class="fab fa-soundcloud fa-fw"></i>
-        <span class="d-inline d-sm-none">Soundcloud</span></a></div>
-    {% endif %}
-
-    {% if site.links.lastfm %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="http://www.last.fm/user/{{ site.links.lastfm }}"><i class="fab fa-lastfm fa-fw"></i>
-        <span class="d-inline d-sm-none">Last.fm</span></a></div>
-    {% endif %}
-
-    {% if site.links.github %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://github.com/{{ site.links.github }}"><i class="fab fa-github fa-fw"></i>
-        <span class="d-inline d-sm-none">GitHub</span></a></div>
-    {% endif %}
-
-    {% if site.links.codepen %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://codepen.io/{{ site.links.codepen }}"><i class="fab fa-codepen fa-fw"></i>
-        <span class="d-inline d-sm-none">CodePen</span></a></div>
-    {% endif %}
-
-    {% if site.links.stackoverflow %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://stackoverflow.com/users/{{ site.links.stackoverflow }}/"><i class="fab fa-stack-overflow fa-fw"></i>
-        <span class="d-inline d-sm-none">Stack Overflow</span></a></div>
-    {% endif %}
-
-    {% if site.links.reddit %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://reddit.com/user/{{ site.links.reddit }}"><i class="fab fa-reddit fa-fw"></i>
-        <span class="d-inline d-sm-none">Reddit</span></a></div>
-    {% endif %}
-
-    {% if site.links.medium %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://medium.com/@{{ site.links.medium }}"><i class="fab fa-medium fa-fw"></i>
-        <span class="d-inline d-sm-none">Medium</span></a></div>
-    {% endif %}
-
-    {% if site.links.tumblr %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="https://{{ site.links.tumblr }}.tumblr.com/"><i class="fab fa-tumblr fa-fw"></i><span
-        class="d-inline d-sm-none">Tumblr</span></a></div>
-    {% endif %}
-
-    {% if site.links.blog %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="{{ site.baseurl }}{{ site.links.blog }}"><i class="fas fa-book-open fa-fw"></i>
-        <span class="d-inline d-sm-none">Blog</span></a></div>
-    {% endif %}
-
-    {% if site.links.email %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="mailto:{{ site.links.email }}"><i class="fas fa-envelope fa-fw"></i>
-        <span class="d-inline d-sm-none">Email</span></a></div>
-    {% endif %}
-
-    {% if site.links.publickey %}
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="{{ site.links.publickey }}"><i class="fas fa-key fa-fw"></i>
-        <span class="d-inline d-sm-none">PGP Key</span></a></div>
-    {% endif %}
 </div>
 
-{% if site.featured_links %}
+{% if site.extra_html %}
-<div class="row justify-content-center links featured">
+<div class="row justify-content-center">
-{% for hash in site.featured_links %}{% for featuredLink in hash %}
+    <div class="col mt-2 mt-sm-3 text-sm-center fuse-core-extra">{{ site.extra_html }}</div>
-    <div class="col-xs-12 col-sm-2 col-lg-1 px-3 px-sm-0 mt-2 mt-sm-3 text-sm-center"><a
-        href="{{ featuredLink[1].link }}"><i class="fas fa-{{ featuredLink[1].icon }} fa-fw"></i>
-        <span class="d-inline d-sm-none">{{ featuredLink[1].name }}</span></a>{% if featuredLink[1].caption %}
-    <div class="fc-caption pt-1 d-none d-sm-block">{{ featuredLink[1].caption }}</div>{% endif %}</div>
-{% endfor %}{% endfor %}
 </div>
 {% endif %}
 
@@ -236,7 +106,8 @@ permalink: /
 </div>
 
 <footer><div class="container"><div class="row">
-<div class="col text-center">Built on the <a href="https://github.com/tsjensen/fuse-core">Fuse Core</a> Jekyll theme.</div>
+    <div class="col text-center">Built on the <a href="https://github.com/tsjensen/fuse-core">Fuse Core</a>
+    Jekyll theme.</div>
 </div></div></footer>
 
 </body>