/************************************************* * 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; } hr { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } /* 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; } } .universal-wrapper { margin: 0 auto; padding-right: 15px; padding-left: 15px; width: 100%; } @media only screen and (min-width: 1001px) { .universal-wrapper { width: 1000px; } } /************************************************* * 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; } .home-section:first-of-type { padding-top: 50px; } .home-section:nth-of-type(even) { background-color: rgb(247, 247, 247); } @media screen and (max-width: 768px) { .home-section { padding: 60px 0 60px 0; } .home-section:first-of-type { padding-top: 40px; } } .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-container { max-width: 760px; padding: 1rem 20px 0 20px; margin: 0 auto 0 auto; } .article-header { position: relative; clear: both; } .article-banner { width: 100%; height: auto; } .article-header-caption { position: absolute; bottom: 0; right: 0; margin: 0 auto; padding: 2px 5px; color: #fff; font-size: .7em; background: #000; text-align: right; z-index: 5; opacity: 0.65; border-radius: 5px 0 0 0; } @media (min-width: 64em) { .article-header-caption { padding: 5px 10px; } } .article-header-caption a { color: #fff; text-decoration: none; } .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. */ overflow: hidden; 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-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-top: 1rem; } /************************************************* * 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; } .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; } .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; }