hugo-academic-mirror/static/css/hugo-academic.css
2017-01-12 09:51:57 +00:00

1072 lines
18 KiB
CSS

/*************************************************
* Hugo Academic: an academic theme for Hugo.
* Designed by @GeorgeCushen.
* https://github.com/gcushen/hugo-academic
**************************************************/
/*************************************************
* Core
**************************************************/
*,
*::after,
*::before {
box-sizing: border-box;
}
.row:after,
.row:before {
content: " ";
display: table;
}
html {
font-family: 'Merriweather', serif;
font-size: 16px;
color: rgba(0,0,0,0.8);
line-height: 1.65;
}
@media screen and (min-width: 58em) {
html {
font-size: 20px;
}
}
body {
font-family: inherit;
font-size: 1rem;
line-height: inherit;
color: inherit;
margin-top: 71px; /* Offset body content by navbar height. */
padding-top: 0;
counter-reset: captions;
}
@media screen and (max-width: 1200px) { /* Match max-width of .nav-bar query. */
body {
margin-top: 51px; /* Offset body content by navbar height. */
}
}
/* Body text */
p {
margin-top: 0;
margin-bottom: 1rem;
}
/* Lists */
ul, ol, dl {
margin-top: 0;
margin-bottom: 1rem;
}
/* Navigation bar text */
.navbar-default {
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.25;
text-rendering: optimizeLegibility;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
font-weight: 400;
margin-bottom: .5rem;
line-height: 1.25;
color: #313131;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 2.25rem;
}
h2 {
margin-top: 1rem;
font-size: 1.5rem;
}
h3 {
font-weight: 700;
margin-top: 1.5rem;
font-size: 1.25rem;
}
h4, h5, h6 {
font-weight: 700;
margin-top: 1rem;
font-size: 1rem;
}
a,
h3.article-title a:hover {
color: #0095eb;
text-decoration: none;
transition: color 0.6s ease;
}
a:hover,
a:focus {
color: #005181;
}
img,
video {
height: auto;
max-width: 100%;
display: block;
}
.img-responsive {
/* Extend Bootstrap declaration with centering. */
margin: 0 auto;
}
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;
}
pre {
margin: 0 0 1rem 0;
overflow: auto;
}
/* Quotes */
blockquote {
padding: .5rem 1rem;
margin: .8rem 0;
color: #7a7a7a;
border-left: .25rem solid #e5e5e5;
}
blockquote p:last-child {
margin-bottom: 0;
}
@media (min-width: 30em) {
blockquote {
padding-right: 5rem;
padding-left: 1.25rem;
}
}
.space-below {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.space-below {
margin-bottom: 10px;
}
}
/*************************************************
* Home Sections
**************************************************/
@keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.home-section {
background-color: rgb(255, 255, 255);
padding: 110px 0 110px 0;
animation: intro 0.3s both;
animation-delay: 0.15s;
}
@media screen and (max-width: 768px) {
.home-section {
padding: 60px 0 60px 0;
}
}
.home-section:first-of-type {
padding-top: 0;
}
.home-section:nth-of-type(even) {
background-color: rgb(247, 247, 247);
}
.section-heading h1 {
margin: 0 0 10px 0;
}
.section-heading p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 1.1rem;
color: #b2b2b2;
}
/*************************************************
* 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: 2rem;
}
ul.ul-interests li {
font-size: 0.9rem;
}
ul.ul-edu {
list-style: none;
}
ul.ul-edu li {
position: relative;
padding: 0px 15px 4px 3px;
}
ul.ul-edu li .description p {
margin: 0;
}
ul.ul-edu li .description p.course {
font-size: 0.9rem;
}
ul.ul-edu li .description p.institution {
font-size: 0.75rem;
color: rgba(0,0,0,0.6);
}
/*************************************************
* Sharing
**************************************************/
.share-box {
float: right;
}
ul.share {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
ul.share li {
display: inline-flex;
margin-right: 5px;
}
ul.share li:last-of-type {
margin-right: 0;
}
ul.share li .fa {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 16px;
text-align: center;
transition: all 150ms ease-in-out;
color: #fff;
}
ul.share li a {
background-color: #b5c6ce;
display: block;
border-radius: 50%;
text-decoration: none !important;
margin: 0;
}
ul.share li:hover .fa {
transform: scale(1.4)
}
/*************************************************
* Blog Articles
**************************************************/
article {
animation: intro 0.3s both;
animation-delay: 0.15s;
}
.article-title {
font-size: 1.75rem;
}
.article-title a {
color: #151515;
transition: color 0.6s ease;
}
.article-metadata {
margin-bottom: 20px;
line-height: 30px; /* Match share bar line height. */
font-size: 14px;
letter-spacing: 0.03em;
color: #888;
}
.article-metadata a {
color: #888;
}
.article-metadata a:hover {
color: #0095eb;
}
.article-list-item {
margin-bottom: 40px;
}
.article-list-item:last-child {
margin-bottom: 0 !important;
}
.article-list-item .article-metadata {
margin-bottom: 5px;
}
.article-metadata .article-date,
.article-metadata .article-categories,
.article-metadata .article-tags {
margin-right: 10px;
}
.article-banner {
width: 100%;
height: auto;
}
.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;
margin-bottom: 60px;
padding-left: 0;
padding-right: 0;
}
.article-style figure {
margin-top: 60px;
margin-bottom: 60px;
}
.article-style figure img {
margin-top: 0;
margin-bottom: 0;
}
#comments {
padding: 20px;
}
/*************************************************
* Publications
**************************************************/
.pub-icon {
color: #03396c;
font-size: 0.81em;
padding-top: 6px;
}
.pub-banner {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.pub .pub-title {
margin-bottom: 5px;
}
.pub .pub-authors {
font-style: italic;
line-height: 30px; /* Match share bar line height. */
}
.pub .pub-row-heading {
font-weight: bold;
}
.pub-list-item {
margin-bottom: 40px;
}
.pub-list-item .pub-abstract {
font-size: 1rem;
}
.pub-list-item .pub-authors {
line-height: normal;
font-style: normal;
font-size: 1rem;
color: #3170A5;
}
.pub-list-item .pub-publication {
color: #090;
font-size: 1rem;
}
.pub-list-item .pub-links {
padding-top: 10px;
}
#container-publications {
display: block;
position: relative;
overflow: hidden;
}
/*************************************************
* Talks
**************************************************/
.talk-event {
color: #090;
font-size: 1rem;
}
/*************************************************
* Projects
**************************************************/
#projects.home-section li {
margin-bottom: 1rem;
}
#projects.home-section li:last-of-type {
margin-bottom: 0;
}
#projects.home-section .project-title {
display: inline-block;
margin-bottom: 6px;
}
#projects.home-section .project-summary {
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
#projects.home-section .project-tags {
font-size: 0.75rem;
color: #9c9c9c;
}
#container-projects {
display: block;
position: relative;
/*margin-top: 5rem;*/
overflow: hidden;
}
.project-toolbar{
margin-bottom: 2rem;
}
.project-item {
margin-bottom: 1.5rem;
}
.isotope-item {
z-index: 2;
}
.isotope-item:hover{
z-index: 3;
}
/*************************************************
* Card component
**************************************************/
.card {
margin-bottom: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: all 0.2s ease-out;
}
.card .card-image {
display: block;
position: relative;
min-height: 100px;
}
.card h4 {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.5;
text-transform: uppercase;
}
.card h4 a {
color: #000;
border-bottom: solid 1px transparent;
}
.card h4 a:hover {
color: #000;
border-bottom: solid 1px #000;
text-decoration: none;
}
.card .card-text {
padding: 0.75rem 1rem 0.75rem;
}
.card .card-text p {
color: #999999;
font-size: 0.75rem;
}
.card p:last-child {
margin-bottom: 0;
}
.card .card-image.hover-overlay:before {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
content: " ";
opacity: 0;
transition: all 0.2s ease-out;
}
.card .card-image.hover-overlay:after {
display: block;
position: absolute;
left: 0;
top: 50%;
width: 100%;
transform: translate(0, -50%);
opacity: 0;
transition: all 0.2s ease-out;
font-family: 'FontAwesome';
content: '\f0c1';
text-align: center;
font-size: 3rem;
color: #666;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card:hover .card-image.hover-overlay:before {
opacity: 0.8;
}
.card:hover .card-image.hover-overlay:after {
opacity: 0.6;
}
/*************************************************
* Contact
**************************************************/
#contact.home-section .fa-ul {
margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
}
#contact.home-section .fa-li {
position: absolute;
left: -3.14285714rem; /* Negative of `#contact.home-section .fa-ul` margin. */
width: 2rem; /* Match `fa-2x` icon size. */
top: 0.14285714em; /* Default FA value. */
text-align: center;
}
#contact.home-section li {
padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
margin-bottom: 0.3rem;
}
#contact.home-section li:last-of-type {
margin-bottom: 0;
}
/*************************************************
* 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;
}
/*************************************************
* Button Primary: Color Override
**************************************************/
.btn-primary {
border-color: #0095eb;
background: #0095eb;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background: #0095eb;
}
/*************************************************
* Toolbar Buttons
**************************************************/
.btn-toolbar .btn {
font-size: 0.9rem;
padding: 10px 14px 9px;
border: none;
}
.btn-toolbar .btn:first-child {
border-radius: 6px 0 0 6px;
}
.btn-toolbar .btn:last-child {
border-radius: 0 6px 6px 0;
}
.btn-toolbar .btn.btn-primary:hover,
.btn-toolbar .btn.btn-primary:focus {
background-color: rgba(0,149,235,0.6);
}
.btn-toolbar .btn.btn-primary:active,
.btn-toolbar .btn.btn-primary.active {
background-color: rgba(0,89,175,1);
}
/*************************************************
* Button Outlines
**************************************************/
.btn-outline {
background-color: transparent;
color: inherit;
transition: all .5s;
}
.btn-primary.btn-outline {
color: #0095eb;
border-color: #0095eb;
}
.btn-success.btn-outline {
color: #5cb85c;
}
.btn-info.btn-outline {
color: #5bc0de;
}
.btn-warning.btn-outline {
color: #f0ad4e;
}
.btn-danger.btn-outline {
color: #d9534f;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
color: #fff;
}
/*************************************************
* Navigation Bar
**************************************************/
.navbar {
min-height: 70px !important;
}
/* Prevent navbar hiding initial content when jumping to in-page anchor. */
*[id]:not([id^="fn"]):before {
display: block;
content: " ";
margin-top: -70px;
height: 70px;
visibility: hidden;
}
.navbar-default {
background: #fff;
box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11)
}
nav#navbar-main li {
font-size: 16px;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>a:focus,
.navbar-default .navbar-nav>a:hover {
white-space: nowrap;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
color: #34495e;
font-weight: 600;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: #0095eb;
font-weight: 700;
background-color: transparent !important; /* Override Bootstrap. */
}
.navbar-brand,
.navbar-nav li a {
height: inherit;
line-height: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #34495e;
white-space: nowrap;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
color: #fff;
text-decoration: none;
background-color: #0095eb;
outline: 0;
}
.navbar-default .navbar-brand {
text-transform: uppercase;
font-weight: bold;
font-size: 1.2em;
color: #2b2b2b;
}
@media screen and (max-width: 1200px) {
.navbar {
min-height: 50px !important;
}
/* Prevent navbar hiding initial content when jumping to in-page anchor. */
*[id]:not([id^="fn"]):before {
margin-top: -50px;
height: 50px;
}
.navbar-brand,
.navbar-nav li a {
height: inherit;
line-height: 40px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-header {
float: none;
min-height: inherit;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: normal;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #34495e;
white-space: nowrap;
}
.navbar-default .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 25px;
line-height: 20px;
color: #34495e;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: inherit;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
color: #0095eb;
background-color: transparent;
}
.collapse.in {
display: block !important;
}
}
/*************************************************
* Tables
**************************************************/
table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
font-size: 0.93rem;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
padding: 8px;
line-height: 1.43;
vertical-align: top;
border-top: 1px solid #ddd;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
border-top: 0;
}
table > tbody + tbody {
border-top: 2px solid #ddd;
}
table table {
background-color: #fff;
}
/* Table Striped */
table > tbody > tr:nth-child(odd) > td,
table > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
/* Table Hover */
table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
background-color: #e5e5e5;
}
/*************************************************
* Alerts
**************************************************/
div.alert {
border-radius: 10px;
margin-bottom: 1rem;
}
div.alert p {
position: relative;
display: block;
font-size: 1rem;
margin-left: 2rem;
margin-top: 0;
margin-bottom: 0;
}
div.alert p:first-child::before {
position: absolute;
top: -0.5rem;
left: -2rem;
font-family: 'FontAwesome';
font-size: 1.5rem;
color: #fff;
content: '\f05a';
width: 1.5rem;
text-align: center;
}
div.alert-warning p:first-child::before {
content: '\f071';
}
div.alert a {
color: rgba(255,255,255,0.9);
text-decoration: none;
border-bottom: solid 1px #e4e4e4;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
div.alert a:hover {
border-bottom-color: transparent;
color: rgba(255,255,255,0.5) !important;
}
.alert-note {
color: #fff;
background-color: #03A9F4; /* Material LightBlue500 */
border-color: #bce8f1;
}
.alert-warning {
color: #fff;
background-color: #f44336; /* Material Red500 */
border-color: #ebccd1;
}