Selected updates from latest beautiful-jekyll changes

Update main.css, nexted menus: ensure title width is wide enough to accommodate children, Integrating public custom linkedin URL, add instagram, snapchat, youtube, and spotify links, updated awesome-font to v4.6, and updated CSS
2017-02-20 00:10:26 -08:00 · 2017-02-20 00:10:26 -08:00 · b418d4c303
parent 46de23e692
commit b418d4c303
9 changed files with 213 additions and 20 deletions
--- a/3
+++ b/3
@ -1,6 +1,7 @@
 The MIT License (MIT)

-Copyright (c) 2015 Dean Attali
+Original work Copyright (c) 2015 Dean Attali
+Modified work Copyright (c) 2017 Michael Romero

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -19,10 +19,12 @@ pygmentCodeFences = true
  facebook = "username"
  github = "username"
  twitter = "username"
-  linkedin = "pub/username/X/YYY/ZZZ"
+  linkedin = "username"
  stackoverflow = "users/XXXXXXX/username"
  soundcloud = "username"
-  wikipedia = "User:username"
+  instagram = "username"
+  youtube = "user/username" # or channel/channelname
+  spotify = "username"

 [[menu.main]]
    name = "Blog"
--- a/exampleSite/content/post/2015-02-20-test-markdown.md
+++ b/exampleSite/content/post/2015-02-20-test-markdown.md
@ -22,16 +22,18 @@ Here's a useless table:

 How about a yummy crepe?

-![Crepe](http://lafenicegelato.com/wp-content/uploads/2014/09/crepes-with-chocolate.jpg)
+![Crepe](http://s3-media3.fl.yelpcdn.com/bphoto/cQ1Yoa75m2yUFFbY2xwuqw/348s.jpg)

 Here's a code chunk:

 ~~~
-x <- 5 + 10
-print(x)
+var foo = function(x) {
+  return(x + 5);
+}
+foo(3)
 ~~~

-And here is some code with syntax highlighting
+And here is the same code with syntax highlighting:

 ```javascript
 var foo = function(x) {
@ -39,3 +41,12 @@ var foo = function(x) {
 }
 foo(3)
 ```
+
+And here is the same code yet again but with line numbers:
+
+{{< highlight python linenos >}}
+var foo = function(x) {
+  return(x + 5);
+}
+foo(3)
+{{</ highlight >}}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -45,7 +45,7 @@
          {{ end }}
 		      {{ if .Site.Author.linkedin }}
          <li>
-            <a href="https://linkedin.com/{{ .Site.Author.linkedin }}" title="LinkedIn">
+            <a href="https://linkedin.com/in/{{ .Site.Author.linkedin }}" title="LinkedIn">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
@ -73,12 +73,32 @@
            </a>
          </li>
          {{ end }}
-          {{ if .Site.Author.wikipedia }}
+          {{ if .Site.Author.instagram }}
          <li>
-            <a href="https://wikipedia.org/wiki/{{ .Site.Author.wikipedia }}" title="Wikipedia">
+            <a href="https://www.instagram.com/{{ .Site.Author.instagram }}" title="Instagram">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
-                <i class="fa fa-wikipedia-w fa-stack-1x fa-inverse"></i>
+                <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
+              </span>
+            </a>
+          </li>
+          {{ end }} 
+          {{ if .Site.Author.youtube }}
+          <li>
+            <a href="https://www.youtube.com/{{ .Site.Author.youtube }}" title="Youtube">
+              <span class="fa-stack fa-lg">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
+              </span>
+            </a>
+          </li>
+          {{ end }}
+          {{ if .Site.Author.spotify }}
+          <li>
+            <a href="https://open.spotify.com/user/{{ .Site.Author.spotify }}" title="Spotify">
+              <span class="fa-stack fa-lg">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-spotify fa-stack-1x fa-inverse"></i>
              </span>
            </a>
          </li>
@ -106,7 +126,7 @@
  	    </p>
  	    <!-- Please don't remove this, keep my open source work credited :) -->
    	<p class="credits theme-by text-muted">
-          <a href="http://gohugo.io">Hugo v{{ .Hugo.Version }}</a> powered &nbsp;&bull;&nbsp; Theme by <a href="http://deanattali.com/beautiful-jekyll/">beautiful-jekyll</a> adapted to <a href="https://github.com/1138-4EB/beautifulhugo">Beautiful Hugo</a>
+          <a href="http://gohugo.io">Hugo v{{ .Hugo.Version }}</a> powered &nbsp;&bull;&nbsp; Theme by <a href="http://deanattali.com/beautiful-jekyll/">beautiful-jekyll</a> adapted to <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a>
          {{ with .Site.Params.commit }}&nbsp;&bull;&nbsp;[<a href="{{.}}{{ getenv "GIT_COMMIT_SHA" }}">{{ getenv "GIT_COMMIT_SHA_SHORT" }}</a>]{{ end }}
    	</p>
      </div>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -11,7 +11,7 @@

  <link rel="alternate" href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="{{ .Site.Title }}">

-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/bootstrap.min.css" />
  <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/main.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
--- a/static/css/main.css
+++ b/static/css/main.css
@ -32,6 +32,9 @@ blockquote {
  color: #808080;
  font-style: italic;
 }
+blockquote p:first-child {
+  margin-top: 0;
+}
 hr.small {
  max-width: 100px;
  margin: 15px auto;
@ -118,6 +121,25 @@ img {
  color: #0085a1;
 }

+.navbar-custom .navbar-brand-logo {
+  padding-top: 0;
+  -webkit-transition: padding .5s ease-in-out;
+  -moz-transition: padding .5s ease-in-out;
+  transition: padding .5s ease-in-out;  
+}
+.navbar-custom .navbar-brand-logo img {
+  height: 50px;
+  -webkit-transition: height .5s ease-in-out;
+  -moz-transition: height .5s ease-in-out;
+  transition: height .5s ease-in-out;
+}
+.navbar-custom.top-nav-short .navbar-brand-logo {
+  padding-top: 5px;
+}
+.navbar-custom.top-nav-short .navbar-brand-logo img {
+  height: 40px;
+}
+
@media only screen and (min-width: 768px) {
  .navbar-custom {
    padding: 20px 0;
@ -212,6 +234,9 @@ img {
  }
 }
@media only screen and (min-width: 768px) {
+  .navbar-custom .nav .navlinks-container {
+    text-align: center;
+  }  
  .navbar-custom .nav .navlinks-container:hover {
    background: #eee;
  }
@ -220,7 +245,6 @@ img {
  }
  .navbar-custom .nav .navlinks-children {
    position: absolute;
-  text-align: center;
  }
  .navbar-custom .nav .navlinks-container .navlinks-children a {
    padding-left: 10px;
@ -247,14 +271,13 @@ footer .list-inline {
  margin: 0;
  padding: 0;
 }
-footer .credits {
-  text-align: center;
-}
 footer .copyright {
  font-family: Open Sans;
+  text-align: center;
  margin-bottom: 0;
 }
 footer .theme-by {
+  text-align: center;
  margin: 10px 0 0;
 }

@ -317,6 +340,28 @@ footer .theme-by {
 .post-preview .post-entry {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+.post-entry-container {
+  display: inline-block;
+  width: 100%;
+}
+.post-entry {
+  width: 100%;
+}
+.post-image {
+  float: right;
+  height: 192px;
+  width: 192px;
+  margin-top: -35px;
+  filter: grayscale(90%);
+}
+.post-image:hover {
+  filter: grayscale(0%);
+}
+.post-image img {
+  border-radius: 100px;
+  height: 192px;
+  width: 192px;
+}
 .post-preview .post-read-more {
  font-weight: 800;
  float: right;
@ -328,6 +373,51 @@ footer .theme-by {
  }
 }

+/* --- Tags --- */
+
+.blog-tags {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #999;
+  font-size: 15px;
+  margin-bottom: 30px;
+}
+
+.blog-tags a {
+  color: #008AFF;
+  text-decoration: none;
+  padding: 0px 5px;
+}
+
+.blog-tags a:hover {
+  border-radius: 2px;
+  color: #008AFF;
+  background-color: #CCC;
+}
+
+.post-preview .blog-tags {
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .post-preview .blog-tags {
+    margin-top: 10px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .post-image, .post-image img {
+    height: 100px;
+    width: 100px;
+  }
+  
+  .post-image {
+    width: 100%;
+    text-align: center;
+    margin-top: 0;
+    float: left;
+  }
+}
 /* --- Post and page headers --- */

 .intro-header {
@ -415,7 +505,7 @@ footer .theme-by {
  }
  .intro-header.big-img {
    margin-top: 91px;  /* Full navbar is small navbar + 20px padding on each side when expanded */
-  } 
+  }	
  .intro-header.big-img .page-heading,
  .intro-header.big-img .post-heading  {
    padding: 150px 0;
@ -549,3 +639,45 @@ table tr th :last-child,
 table tr td :last-child {
  margin-bottom: 0;
 }
+
+/* --- Code blocks --- */
+
+pre {
+  font-size: 16px;
+  line-height: 1.5em;
+}
+pre code {
+  white-space: pre;
+}
+pre.highlight, .highlight > pre, td.code pre {
+  background: #FAFAFA;
+  background-image: linear-gradient(#F9F9F9 50%, #FDFDFD 50%);
+  background-repeat: repeat;
+  background-size: 3em 3em;
+  background-position: 0px 10px;
+  border-left: 7px solid #444;
+}
+code table, code table td, code table th, code table tbody, code table tr,
+td.gutter pre {
+  padding: 0;
+  border: none;
+  background-color: #fff;
+}
+.highlight > pre {
+  padding: 0;
+}
+td.code pre {
+  border-width: 0 0 0 2px;
+  border-style: solid;
+  border-color: #444;
+  border-radius: 0;
+}
+td.gutter {
+  padding-top: 3px;
+}
+
+/* --- Social media sharing section --- */
+
+#social-share-section {
+  margin-bottom: 30px;
+}
--- a/static/css/pygment_highlights.css
+++ b/static/css/pygment_highlights.css
@ -1,5 +1,5 @@
-.highlight  { background: #ffffff; }
-.highlight pre { background-color: #fff; font-size: 16px }
+/* .highlight  { background: #ffffff; } */
+/* .highlight pre { background-color: #fff; font-size: 16px } */
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */
--- a/static/img/install-steps.gif
+++ b/static/img/install-steps.gif
--- a/static/js/main.js
+++ b/static/js/main.js
@ -35,6 +35,33 @@ var main = {
      });
    });
    
+    // Ensure nested navbar menus are not longer than the menu header
+    var menus = $(".navlinks-container");
+    if (menus.length > 0) {
+      var navbar = $("#main-navbar ul");
+      var fakeMenuHtml = "<li class='fake-menu' style='display:none;'><a></a></li>";
+      navbar.append(fakeMenuHtml);
+      var fakeMenu = $(".fake-menu");
+
+      $.each(menus, function(i) {
+        var parent = $(menus[i]).find(".navlinks-parent");
+        var children = $(menus[i]).find(".navlinks-children a");
+        var words = [];
+        $.each(children, function(idx, el) { words = words.concat($(el).text().trim().split(/\s+/)); });
+        var maxwidth = 0;
+        $.each(words, function(id, word) {
+          fakeMenu.html("<a>" + word + "</a>");
+          var width =  fakeMenu.width();
+          if (width > maxwidth) {
+            maxwidth = width;
+          }
+        });
+        $(menus[i]).css('min-width', maxwidth + 'px')
+      });
+
+      fakeMenu.remove();
+    }      
+
    // show the big header image  
    main.initImgs();
  },