diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index dad00292..b679acfe 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -14,6 +14,7 @@
+
{{ range .Site.Params.custom_css }}
diff --git a/layouts/partials/home_biography.html b/layouts/partials/home_biography.html
index 5721d82a..0a839efe 100644
--- a/layouts/partials/home_biography.html
+++ b/layouts/partials/home_biography.html
@@ -10,7 +10,7 @@
{{ .Site.Params.organization }}
-
+
{{ range .Site.Params.social }}
-
diff --git a/static/css/hugo-academic.css b/static/css/hugo-academic.css
index f71806a3..ee357f39 100644
--- a/static/css/hugo-academic.css
+++ b/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
+ * Footer
**************************************************/
-#profile {
+footer {
+ margin: 4rem 0 0;
+ padding: 2rem 0;
+ width: 100%;
+}
+
+footer p {
+ font-size: 0.75rem;
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
- **************************************************/
-
-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;
+.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 {