CSS improvements: convert `@import` to `<link ...>` for increased speed; add auto-numbering to figure captions; various refactoring.

layouts/partials/header.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.min.css">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/font-awesome.min.css">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/academicons.min.css">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,700|Merriweather|Roboto+Mono">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/hugo-academic.css">
     {{ range .Site.Params.custom_css }}
     <link rel="stylesheet" href="{{ $.Site.BaseURL }}css/{{ . }}">

layouts/partials/home_biography.html

@@ -10,7 +10,7 @@
                 <h3 itemprop="worksFor">{{ .Site.Params.organization }}</h3>
             </div>
 
-            <ul class="list-inline social-icon">
+            <ul class="social-icon">
                 {{ range .Site.Params.social }}
                 <li>
                     <a href="{{ .link }}">

static/css/hugo-academic.css

@@ -3,11 +3,6 @@
  *  https://github.com/gcushen/hugo-academic
  **************************************************/
 
-/*************************************************
- *  Fonts
- **************************************************/
-
-@import url(//fonts.googleapis.com/css?family=Lato:400,700|Merriweather|Roboto+Mono);
 
 /*************************************************
  *  Core
@@ -17,16 +12,21 @@ html {
     box-sizing: border-box;
 }
 
-*, *::after, *::before {
+*,
+*::after,
+*::before {
     box-sizing: inherit;
 }
 
-.row:after, .row:before {
+.row:after,
+.row:before {
     content: " ";
     display: table;
 }
 
-html, body, p {
+html,
+body,
+p {
     font-family: 'Merriweather', serif;
     font-size: 16px;
     line-height: 1.65;
@@ -46,7 +46,13 @@ body {
     }
 }
 
-h1, h2, h3, h4, h5, h6, .navbar-default {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.navbar-default {
     font-family: 'Lato', sans-serif;
     font-weight: 400;
     line-height: 1.25;
@@ -63,11 +69,15 @@ h3 {
     font-weight: 700;
 }
 
-a, a:visited, h3.post-title a:hover {
+h4 {
+    font-weight: 700;
+}
+
+a, a:visited,
+h3.post-title a:hover {
     color: #0095eb;
     text-decoration:none;
     transition:color 0.6s ease;
-    -webkit-transition:color 0.6s ease;
 }
 
 a:hover {
@@ -77,16 +87,40 @@ a:hover {
 h3.post-title a {
     color: #151515;
     transition: color 0.6s ease;
-    -webkit-transition: color 0.6s ease;
 }
 
-img, video {
+img,
+video {
     height: auto;
     max-width: 100%;
     display: block;
 }
 
-pre, code {
+figcaption:before {
+    font-weight: 700;
+    text-transform: uppercase;
+    content: "Figure " counter(captions) ": ";
+}
+
+figcaption {
+    display: block;
+    margin-top: 0.75em;
+    line-height: 1.25;
+    font-size: 1rem;
+    margin-bottom: 1.65rem;
+    font-family: 'Lato', sans-serif;
+    counter-increment: captions;
+}
+
+figcaption h4 {
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: 400;
+    margin: 0;
+}
+
+pre,
+code {
     font-family: 'Roboto Mono', 'Courier New', 'Courier', monospace;
 }
 
@@ -104,25 +138,6 @@ pre {
     }
 }
 
-/*************************************************
- *  Footer
- **************************************************/
-
-footer {
-    margin: 4rem 0 0;
-    padding: 2rem 0;
-    width: 100%;
-}
-
-footer p {
-    font-size: 0.75rem;
-    text-align: center;
-}
-
-.site-footer, footer a#back_to_top i {
-    color: #899596;
-}
-
 /*************************************************
  *  Home Sections
  **************************************************/
@@ -145,6 +160,88 @@ footer p {
     background-color: rgb(247, 247, 247);
 }
 
+/*************************************************
+ *  Biography
+ **************************************************/
+
+#profile {
+    text-align: center;
+    padding: 30px 10px;
+    position: relative;
+}
+
+#profile .portrait {
+    background-image: url('../img/portrait.jpg');
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+    border-radius: 50%;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+}
+
+#profile .portrait-title h2 {
+    font-size: 1.75em;
+    font-weight: 300;
+    color: #000000;
+    margin: 20px 0 10px 0;
+}
+
+#profile .portrait-title h3 {
+    font-size: 1.13em;
+    font-weight: 300;
+    color: #AAAAAA;
+    margin: 0px 0 10px 0;
+}
+
+#profile ul.social-icon {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin-top: 30px;
+}
+
+#profile .social-icon li {
+    margin-right: 10px;
+}
+
+#profile .social-icon li:last-of-type {
+    margin-right: 0;
+}
+
+#profile .social-icon li:hover {
+    transform: scale(1.2)
+}
+
+.big-icon {
+    font-size: 40px;
+}
+
+ul.ul-edu {
+    list-style: none;
+}
+
+ul.ul-edu li {
+    position: relative;
+    padding: 0px 15px 4px 3px;
+    color: #333333;
+}
+
+ul.ul-edu li .description p {
+    margin: 0;
+}
+
+ul.ul-edu li .description p.course {
+    font-size: 1em;
+}
+
+ul.ul-edu li .description p.institution {
+    font-size: 0.88em;
+}
+
 /*************************************************
  *  Sharing
  **************************************************/
@@ -154,22 +251,29 @@ footer p {
 }
 
 ul.share {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     list-style: none;
-    text-align: right;
     margin: 0;
     padding: 0;
 }
 
 ul.share li {
-    display: inline-block;
+    display: inline-flex;
+    margin-right: 5px;
+}
+
+ul.share li:last-of-type {
+    margin-right: 0;
 }
 
 ul.share li .fa {
-    display: inline-block;
-    width: 35px;
-    height: 35px;
-    line-height: 37px;
-    font-size: 18px;
+    display: block;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 16px;
     text-align: center;
     transition: all 150ms ease-in-out;
     color: #fff;
@@ -177,14 +281,13 @@ ul.share li .fa {
 
 ul.share li a {
     background-color: #b5c6ce;
-    display: inline-block;
+    display: block;
     border-radius: 50%;
     text-decoration: none !important;
+    margin: 0;
 }
 
 ul.share li:hover .fa {
-    -moz-transform: scale(1.4);
-    -webkit-transform: scale(1.4);
     transform: scale(1.4)
 }
 
@@ -194,8 +297,9 @@ ul.share li:hover .fa {
 
 .article-metadata {
     margin-bottom: 20px;
-    line-height: 37px; /* Match share bar line height. */
+    line-height: 30px; /* Match share bar line height. */
     font-size: 14px;
+    letter-spacing: 0.03em;
 }
 
 .article-list-item {
@@ -210,18 +314,15 @@ ul.share li:hover .fa {
     margin-bottom: 5px;
 }
 
-.article-metadata .article-date, .article-metadata .article-tags {
+.article-metadata .article-date,
+.article-metadata .article-tags {
     margin-right: 10px;
     color: #888;
 }
 
-.article-style img, .article-style video {
-    box-shadow: 0 0 1px #edefed;
-    -moz-box-shadow: 0 0 1px #edefed;
-    -webkit-box-shadow: 0 0 1px #edefed;
-    box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed; */
-    -moz-box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed;
-    -webkit-box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed;
+.article-style img,
+.article-style video {
+    box-shadow: 1px 1px 0px #edefed,-1px -1px 0px #edefed,1px -1px 0px #edefed,-1px 1px 0px #edefed;
     margin-left: auto;
     margin-right: auto;
     margin-top: 60px;
@@ -298,72 +399,23 @@ section#projects.home-section .project-tags {
 }
 
 /*************************************************
- *  Profile
- **************************************************/
-
-#profile {
-    text-align: center;
-    padding: 30px 10px;
-    position: relative;
-}
-
-#profile .portrait {
-    background-image: url('../img/portrait.jpg');
-    width: 200px;
-    height: 200px;
-    margin: 0 auto;
-    border-radius: 50%;
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-}
-
-#profile .portrait-title h2 {
-    font-size: 1.75em;
-    font-weight: 300;
-    color: #000000;
-    margin: 20px 0 10px 0;
-}
-
-#profile .portrait-title h3 {
-    font-size: 1.13em;
-    font-weight: 300;
-    color: #AAAAAA;
-    margin: 0px 0 10px 0;
-}
-
-#profile .social-icon li {
-    margin: 30px 5px 5px 5px;
-}
-
-.big-icon {
-    font-size: 40px;
-}
-
-/*************************************************
- *  Education
+ *  Footer
  **************************************************/
 
-ul.ul-edu {
-    list-style: none;
-}
-
-ul.ul-edu li {
-    position: relative;
-    padding: 0px 15px 4px 3px;
-    color: #333333;
-}
-
-ul.ul-edu li .description p {
-    margin: 0;
+footer {
+    margin: 4rem 0 0;
+    padding: 2rem 0;
+    width: 100%;
 }
 
-ul.ul-edu li .description p.course {
-    font-size: 1em;
+footer p {
+    font-size: 0.75rem;
+    text-align: center;
 }
 
-ul.ul-edu li .description p.institution {
-    font-size: 0.88em;
+.site-footer,
+footer a#back_to_top i {
+    color: #899596;
 }
 
 /*************************************************
@@ -373,7 +425,12 @@ ul.ul-edu li .description p.institution {
 .btn-primary {
     border-color: #0095eb;
 }
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
     background: #0095eb;
 }
 
@@ -434,7 +491,8 @@ nav#navbar-main li {
     font-size: 16px;
 }
 
-.navbar-default .navbar-nav li a, .navbar-default .navbar-nav li a:visited {
+.navbar-default .navbar-nav li a,
+.navbar-default .navbar-nav li a:visited {
     white-space: nowrap;
     -webkit-transition: 0.2s ease;
     transition: 0.2s ease;
@@ -445,7 +503,8 @@ nav#navbar-main li {
     color: #0095eb;
 }
 
-.navbar-brand, .navbar-nav li a {
+.navbar-brand,
+.navbar-nav li a {
     line-height: 60px;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -466,7 +525,8 @@ nav#navbar-main li {
         float: none;
         min-height: inherit;
     }
-    .navbar-left,.navbar-right {
+    .navbar-left,
+    .navbar-right {
         float: none !important;
     }
     .navbar-toggle {