mirror of
https://github.com/gcushen/hugo-academic.git
synced 2025-07-26 03:00:50 +02:00
CSS improvements: convert @import to <link ...> for increased speed; add auto-numbering to figure captions; various refactoring.
This commit is contained in:
George Cushen
parent
5d0e59ddd1
commit
d2b55a6e28
3 changed files with 179 additions and 118 deletions
|
|
@ -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/{{ . }}">
|
||||
|
|
|
|||
|
|
@ -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 }}">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue