From 346f1575e05ebc953a4c6fafcc0d0fb3410bd9ce Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 5 May 2019 20:43:05 +0100 Subject: [PATCH] refactor: Academic's SCSS style file into more manageable modules See #680 --- assets/sass/academic.scss | 2471 --------------------------- assets/sass/academic/_card.scss | 118 ++ assets/sass/academic/_content.scss | 366 ++++ assets/sass/academic/_dark.scss | 157 ++ assets/sass/academic/_docs.scss | 255 +++ assets/sass/academic/_listings.scss | 60 + assets/sass/academic/_nav.scss | 199 +++ assets/sass/academic/_root.scss | 580 +++++++ assets/sass/academic/_search.scss | 131 ++ assets/sass/academic/_widgets.scss | 547 ++++++ assets/sass/academic/academic.scss | 16 + assets/sass/main.scss | 2 +- 12 files changed, 2430 insertions(+), 2472 deletions(-) delete mode 100644 assets/sass/academic.scss create mode 100644 assets/sass/academic/_card.scss create mode 100644 assets/sass/academic/_content.scss create mode 100644 assets/sass/academic/_dark.scss create mode 100644 assets/sass/academic/_docs.scss create mode 100644 assets/sass/academic/_listings.scss create mode 100644 assets/sass/academic/_nav.scss create mode 100644 assets/sass/academic/_root.scss create mode 100644 assets/sass/academic/_search.scss create mode 100644 assets/sass/academic/_widgets.scss create mode 100644 assets/sass/academic/academic.scss diff --git a/assets/sass/academic.scss b/assets/sass/academic.scss deleted file mode 100644 index 29beffb5..00000000 --- a/assets/sass/academic.scss +++ /dev/null @@ -1,2471 +0,0 @@ -/************************************************* - * Hugo Academic: an academic theme for Hugo. - * Designed by @GeorgeCushen. - * https://github.com/gcushen/hugo-academic - **************************************************/ - -/************************************************* - * Core - **************************************************/ - -html { - font-family: $sta-font-body, sans-serif; - font-size: #{$sta-font-size-small}px; - color: rgba(0,0,0,0.8); - line-height: 1.65; -} -@media screen and (min-width: 58em) { - html { - font-size: #{$sta-font-size}px; - } -} - -body { - font-family: inherit; - font-size: 1rem; - line-height: inherit; - color: inherit; - background-color: $sta-background; - margin-top: 70px; /* 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: 50px; /* Offset body content by navbar height. */ - } -} - -.max-width-640 { - max-width: 640px; -} - -.margin-auto { - margin-left: auto; - margin-right: auto; -} - -.center-text { - text-align: center; -} - -/* Body text */ -p { - margin-top: 0; - margin-bottom: 1rem; -} - -/* Lists */ -ul, ol, dl { - margin-top: 0; - margin-bottom: 1rem; -} - -/* Navigation bar text */ -.navbar-light { - font-family: $sta-font-nav, sans-serif; - font-weight: 400; - line-height: 1.25; - text-rendering: optimizeLegibility; -} - -/* Headings */ -h1, h2, h3, h4, h5, h6 { - font-family: $sta-font-heading, sans-serif; - font-weight: 400; - margin-top: 1rem; - margin-bottom: .5rem; - line-height: 1.25; - color: #313131; - text-rendering: optimizeLegibility; - - /* Ensure long words do not overflow into content. */ - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - - /* Add a hyphen where the word breaks (use `­` to insert a soft-hyphen in a word). */ - -webkit-hyphens: manual; - -ms-hyphens: manual; - hyphens: manual; -} -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: $sta-link; - text-decoration: none; - transition: color 0.6s ease; -} - -a:hover, -a:focus { - color: $sta-link-hover; -} - -img, -video { - height: auto; - max-width: 100%; - display: block; -} - -video { - width: 100%; - height: auto; - max-height: 400px; -} - -.img-responsive { - /* Extend Bootstrap declaration with centering. */ - margin: 0 auto; -} - -figcaption { - display: block; - margin-top: 0.75em; - line-height: 1.25; - font-size: 1rem; - margin-bottom: 1.65rem; - font-family: $sta-font-heading, sans-serif; -} - -figcaption.numbered:before { - font-weight: 700; - text-transform: uppercase; - content: attr(data-pre) counter(captions) attr(data-post); -} - -figcaption.numbered { - counter-increment: captions; -} - -figcaption h4 { - display: inline; - font-size: 1rem; - font-weight: 400; - margin: 0; -} - -pre, -code { - font-family: '$sta-font-mono', monospace; - color: #c7254e; - background-color: #f9f2f4; -} - -pre { - margin: 0 0 1rem 0; - background-color: rgb(248, 248, 248); /* Match default highlight theme. */ - border-color: rgb(248, 248, 248); - font-size: 0.7rem; - border-radius: 4px; -} - -pre code { - white-space: pre; /* Override Bootstrap to preserve line breaks in code. */ - overflow-x: 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; - } -} - -.markup-quote { - background-color: transparent; - background-image: linear-gradient(to bottom, rgba(233, 231, 245, 1), rgba(233, 231, 245, 1)); -} - -.space-below { - margin-bottom: 50px; -} -@media screen and (max-width: 768px) { - .space-below { - margin-bottom: 10px; - } -} - -.universal-wrapper { - margin: 0 auto; - padding-right: 1rem; - padding-left: 1rem; - padding-top: 0.1rem; - width: 100%; -} - -@media only screen and (min-width: 1001px) { - .universal-wrapper { - width: 1000px; - } -} - -small, -.small { - font-size: .75em; -} - -.responsive-wrap iframe { - max-width: 100%; -} - -/************************************************* - * Search. - **************************************************/ - -.search-results { - transform: scale(0); - -webkit-transform: scale(0); - background-color: $sta-background; - bottom: 0; - left: 0; - right: 0; - top: 0; - overflow: scroll; - position: fixed; - visibility: hidden; - z-index: -99; -} - -.dark .search-results { - background-color: rgb(40, 42, 54); -} - -.searching { - overflow: hidden; -} - -.searching .search-results { - transform: scale(1); - -webkit-transform: scale(1); - visibility: visible; - z-index: 1031; /* Highest index, higher than navbar. */ -} - -.searching #search-box #search-query { - width: 100%; -} - -.search-results > .container { - padding-top: 70px; /* Navbar height. */ -} -@media screen and (max-width: 1200px) { - .search-results > .container { - padding-top: 50px; /* Navbar height. */ - } -} - -.search-header { - position: -webkit-sticky; - position: sticky; - top: 70px; /* Navbar height. */ - background-color: $sta-background; - padding-top: 2rem; - padding-bottom: 1rem; -} -@media screen and (max-width: 1200px) { - .search-header { - top: 50px; /* Navbar height. */ - } -} - -.dark .search-header { - background-color: rgb(40, 42, 54); -} - -.search-header h1 { - margin: 0; - line-height: 1; -} - -.col-search-close { - text-align: right; -} - -.search-header i { - font-size: 2rem; - line-height: 1; -} - -#search-box { - position: relative; /* Required for search icon positioning. */ - margin-bottom: 0.5rem; -} - -#search-box::before { - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - content: "\f002"; - font-size: 1rem; - opacity: 0.25; - line-height: 1rem; - position: absolute; - left: 0.7rem; - top: 0.6rem; - overflow-x: hidden; -} - -#search-box #search-query { - border: 1px solid #dedede; - border-radius: 1rem; - padding: 1rem 1rem 1rem 2rem; /* Wider left padding for search icon to fit in. */ - width: 250px; - line-height: 1rem; - height: 1rem; - font-size: 0.8rem; -} - -.search-hit em { - font-style: normal; - background-color: #FFE0B2; - color: #E65100; - border-bottom: 1px solid #E65100; -} - -.search-hit-type { - margin-bottom: 0 !important; /* Override .article-metadata margin. */ - text-transform: capitalize; -} - -.search-hit-description { - font-size: 0.7rem; -} - -/* Load more results button - hide when there are no more results. */ -#search-hits button[disabled] { - display: none; -} - -.form-control:focus { - border-color: $sta-primary; - box-shadow: 0 0 0 .2rem $sta-primary-light; -} - -/************************************************* - * Modals. - **************************************************/ - -.modal-content { - background: $sta-background; -} - -.modal-title { - margin: 0; /* Override default h5 margin. */ -} - -.modal-content pre { - margin: 0; -} - -.modal-header { - border: 0; - color: rgba(0,0,0,0.8); -} - -.modal-footer { - border: 0; -} - -#modal-error { - color: red; -} - -/************************************************* - * Gallery. - **************************************************/ - -.gallery { - margin: 0.5em -4px 1.5em -4px; - font-size: 0; -} - -a[data-fancybox] { - text-decoration: none; -} - -a[data-fancybox] img { - height: 250px; - max-width: inherit; - display: inherit; - margin: 0; - padding: 4px; - box-shadow: none; - vertical-align: inherit; -} - -.fancybox-caption { - font-size: 1rem; - line-height: 1.5rem; - text-align: center; -} - -/************************************************* - * Pager. - **************************************************/ - -.post-nav { - margin-top: 1rem; - font-size: 0.8rem; -} - -.post-nav-item { - hyphens: auto; - word-wrap: break-word; - padding: 11px 0 12px; - width: 100%; -} - -.post-nav-item a { - color: #2b2b2b; - line-height: 1.7; - text-transform: none; -} - -.post-nav-item .meta-nav { - color: #767676; - font-weight: 900; - line-height: 2; - text-transform: uppercase; -} - -.dark .post-nav-item a { - color: #ddd; -} - -/************************************************* - * Home Sections - **************************************************/ - -@keyframes intro { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -.home-section { - background-color: $sta-home-section-odd; - padding: 110px 0 110px 0; - animation: intro 0.3s both; - animation-delay: 0.15s; -} - -/* Override dark colors that may be inherited from body.dark */ -.home-section.dark, -.home-section.dark h1, -.home-section.dark h2, -.home-section.dark h3, -.home-section.dark a:not(.btn) { - color: rgb(248, 248, 242); -} - -/* Underline links in dark sections to separate them from text */ -.home-section.dark a:not(.btn):not(.hero-cta-alt) { - text-decoration: underline; -} - -/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */ -.home-section.dark .alert a { - color: inherit !important; - text-decoration: inherit !important; -} - -/* Big underline style for links in dark sections */ -/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */ -/* -.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) { - text-decoration: none; - position: relative; -} -.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after { - background: #fff; - content: ""; - height: 2px; - left: 0; - right: 0; - position: absolute; - top: 100%; -}*/ - -/* Create the parallax scrolling effect */ -.parallax { - height: 100%; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-size: cover; -} - -.home-section:first-of-type { - padding-top: 50px; -} - -.home-section:nth-of-type(even) { - background-color: $sta-home-section-even; -} - -.dark .home-section { - background-color: $sta-dark-home-section-odd; -} - -.dark .home-section:nth-of-type(even) { - background-color: $sta-dark-home-section-even; -} - -@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-weight: 400; - font-size: 1.1rem; - color: #b2b2b2; -} - -/************************************************* - * Widgets (common) - **************************************************/ - -.see-all { - margin-top: 2rem; - text-transform: uppercase; -} - -/************************************************* - * Hero Widget - **************************************************/ - -.wg-hero { - padding: 3em 0; - clear: both; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - animation: intro 0.3s both; - animation-delay: 0s; - animation-delay: 0.25s; -} - -.hero-title { - font-size: 2.7rem; - margin-top: 0; - line-height: 1; -} - -.hero-lead { - max-width: 768px; - font-size: 1.35rem; -} - -.wg-hero.dark .hero-title, -.wg-hero.dark .hero-lead, -.wg-hero.dark .hero-cta-alt, -.wg-hero.dark .hero-note > * { - color: #fff; - /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */ -} - -.wg-hero.dark a:not(.wg-hero .btn) { - color: #fff; -} - -.wg-hero .hero-lead a { - text-decoration: underline; -} - -.wg-hero .cta-btns { - margin-bottom: 16px; -} - -.wg-hero .btn { - padding: .6em 2.1em; -} - -.wg-hero.dark .btn { - color: $sta-primary-dark; -} - -a.hero-cta-alt { - display: inline-block; - position: relative; - transition-duration: .2s; - transition-property: transform; - transition-timing-function: ease-out; - font-size: 1.1rem; -} - -a.hero-cta-alt:active, -a.hero-cta-alt:focus, -a.hero-cta-alt:hover { - transform: scale(1.1); -} - -.wg-hero .btn-lg { - font-size: 1.1rem; -} - -.wg-hero .hero-note { - font-size: 0.8rem; -} - -.hero-media { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - text-align: center; -} - -/************************************************* - * Slider Widget - **************************************************/ - -/* The Slider widget reuses the Hero widget's `.wg-hero` class. - * We must remove the `animation` and `clear` in this instance or - * multiple slides can be `.active` at once. */ -.carousel-inner .wg-hero { - animation: none; - clear: none; -} - -/************************************************* - * Featurette Widget - **************************************************/ - -.featurette { - font-size: 0.8rem; - line-height: 1.5; - color: #555; - text-align: center; -} - -.featurette h3 { - margin-top: 0; - margin-bottom: 5px; - font-weight: 400; - color: #333; -} - -.dark .featurette, -.dark .featurette h3 { - color: #fff; -} - -.featurette-icon { - display: block; - width: 100%; - color: $sta-primary; - font-size: 3rem; - text-align: center; -} - -/************************************************* - * About widget - **************************************************/ - -#profile { - text-align: center; - padding: 30px 10px; - position: relative; -} - -.portrait { - width: 200px; - height: 200px; - margin: 0 auto; - border-radius: 50%; - object-fit: cover; -} - -.portrait-title h2 { - font-size: 1.75em; - font-weight: 300; - color: #000000; - margin: 20px 0 10px 0; -} - -.portrait-title h3 { - font-size: 1rem; - font-weight: 300; - color: rgba(0,0,0, 0.54); - margin: 0px 0 10px 0; -} - -ul.network-icon { - display: inline-flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - list-style: none; - padding: 0; -} - -#profile .network-icon { - margin-top: 30px; -} - -.network-icon li { - margin-right: 10px; -} - -.network-icon li:last-of-type { - margin-right: 0; -} - -.network-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); -} - -/************************************************* - * People widget - **************************************************/ - -.people-widget { - font-size: 0.8rem; - text-align: center; -} - -.people-widget .portrait-title h2 { - font-size: 1rem; -} - -.people-widget .portrait-title h3 { - font-size: 0.7rem; -} - -.people-widget .portrait { - width: 80%; - max-width: 150px; - height: auto; -} - -@media (min-width: 576px) { - .people-widget .col-sm-auto { - max-width: 30% !important; - } -} -@media (min-width: 992px) { - .people-widget .col-sm-auto { - max-width: 20% !important; - } -} - -/************************************************* - * 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 i { - display: block; - width: 30px; - height: 30px; - line-height: 30px; - font-size: 16px; - text-align: center; - transition: all 150ms ease-in-out; - color: #fff; -} - -.dark ul.share li i { - color: rgb(68, 71, 90); -} - -ul.share li a { - background-color: #b5c6ce; - display: block; - border-radius: 50%; - text-decoration: none !important; - margin: 0; -} - -ul.share li:hover i { - transform: scale(1.4) -} - -/************************************************* - * Page content style - **************************************************/ - -article { - animation: intro 0.3s both; - animation-delay: 0.15s; -} - -.article-container { - max-width: 760px; - padding: 0 20px 0 20px; - margin: 0 auto 0 auto; -} - -.split-header { - margin-bottom: 2rem; -} - -.split-header .share-box { - float: left; -} - -.page-subtitle { - font-size: 1.15rem; - color: rgba(0,0,0,.54); - margin-bottom: 1rem; -} - -.dark .page-subtitle { - color: rgba(255,255,255,0.54); -} - -.split-header .page-subtitle { - margin-bottom: 1.5rem; -} - -.split-header-content { - max-width: 612px; - width: 100%; - padding: 60px 60px 32px 0; - margin-left: auto; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.split-header-image { - position: relative; /* Required for caption positioning */ - clear: both; - max-width: 580px; -} - -.article-header { - position: relative; /* Required for caption positioning */ - clear: both; -} - -.article-banner { - width: 100%; - height: auto; -} - -.featured-image { - width: 100%; - background-position: left; - background-origin: border-box; - background-size: cover; - height: 60vh; - min-height: 500px; - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto -} - -@media screen and (max-width: 1199px) { - .featured-image { - min-height: 400px; - height: auto; - } -} - -@media screen and (max-width: 767px) { - .featured-image { - min-height: 300px; - } -} - -.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; -} - -.text-muted { - color: rgba(0,0,0,0.54); /* Override Bootstrap */ -} - -.dark .text-muted { - color: rgba(255,255,255,0.54); -} - -.article-metadata { - margin-bottom: 15px; - overflow: hidden; - font-size: 14px; - letter-spacing: 0.03em; - color: rgba(0,0,0,0.54); -} - -.dark .article-metadata { - color: rgba(255,255,255,0.54); -} - -.stream-meta.article-metadata { - margin-bottom: 5px; -} - -/* For article page only, not lists. */ -article .article-metadata { - margin-bottom: 20px; - line-height: 30px; /* Match share bar line height. */ -} - -.article-metadata a { - color: rgba(0,0,0,.54); -} - -.dark .article-metadata a { - color: rgba(255,255,255,0.54); -} - -.article-metadata a:hover { - color: $sta-primary; -} - -.middot-divider { - padding-right: .45em; - padding-left: .45em; - font-size: 15px; -} - -.middot-divider::after { - content: '\00B7'; -} - -.article-style img, -.article-style video { - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; - padding: 0; -} - -.article-style td img, -.article-style td video { - margin-top: 0; - margin-bottom: 0; -} - -.article-style figure { - margin-top: 2rem; - margin-bottom: 2rem; -} - -.article-style figure img { - margin-top: 0; - margin-bottom: 0; -} - -.article-widget { - padding-top: 1rem; -} - -.article-widget h3 { - margin-top: 0; -} - -.hr-light { - border-top: 1px solid rgba(0,0,0,.05); - margin-top: 0.5rem; - margin-bottom: 1rem; -} - -#comments { - padding-top: 1rem; -} - -/************************************************* - * Stream - **************************************************/ - -.media.stream-item { - margin-bottom: 2rem; -} - -.media.stream-item .article-title, -.card-simple .article-title { - font-size: 1.2rem; -} - -.media.stream-item .article-style, -.card-simple .article-style { - margin-top: 2px; - font-size: 0.8rem; -} - -.media.stream-item .stream-meta { - margin-top: 12px; -} - -.media.stream-item img { - max-width: 150px; - height: auto; - object-fit: cover; -} - -@media screen and (max-width: 768px) { - .media.stream-item img { - max-width: 80px; - } -} - -/************************************************* - * Author profile card - **************************************************/ - -.author-card { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid rgba(0,0,0,.05); -} - -.dark .author-card { - border-top: 1px solid rgba(255,255,255,.05); -} - -.author-card .portrait { - width: 60px; - height: 60px; - margin: 0 auto; - border-radius: 50%; - object-fit: cover; -} - -.author-card .card-title { - margin-top: 0; - margin-bottom: 15px; - font-weight: 600; - color: rgba(0, 0, 0, 0.84); -} - -.author-card .card-title a { - color: rgba(0, 0, 0, 0.84); -} - -.dark .author-card .card-title, -.dark .author-card .card-title a { - color: rgba(255, 255, 255, 0.84); -} - -.author-card p { - margin-bottom: 5px; -} - -.author-card .card-subtitle { - font-weight: 300; - font-size: 0.8rem; - color: rgba(0, 0, 0, 0.54); - margin-bottom: 7px; -} - -.dark .author-card .card-subtitle { - color: rgba(255, 255, 255, 0.54); -} - -.author-card .card-text { - color: rgba(0, 0, 0, 0.76); - font-size: 0.8rem; - margin-bottom: 4px; -} - -.dark .author-card .card-text { - color: rgba(255, 255, 255, 0.76); -} - -/************************************************* - * List items - **************************************************/ - -.view-list-item { - margin-bottom: 1rem; -} - -.pub-icon { - color: rgba(0, 0, 0, 0.54); - font-size: 0.81em; - padding-right: 6px; -} - -.view-list-item .article-metadata { - margin-bottom: 0; -} - -.pub-list-item .pub-abstract { - font-size: 1rem; -} - -.pub-list-item .btn-links { - padding-top: 10px; -} - -/************************************************* - * Publications - **************************************************/ - -.pub-banner { - max-width: 100%; - height: auto; - margin-left: auto; - margin-right: auto; -} - -.pub-row-heading { - font-weight: bold; -} - -#container-publications { - display: block; - position: relative; - overflow: hidden; -} - -.li-cite-author { - font-size: 1em; - color: inherit; -} - -.li-cite-author a { - color: inherit; -} - -.dark .li-cite-author a { - color: rgb(248, 248, 242); -} - -/************************************************* - * Experience - **************************************************/ - -.exp-title { - text-transform: none !important; -} - -.exp-company { - font-weight: normal !important; - text-transform: none !important; -} - -.exp-meta { - font-size: 0.8rem; -} - -.experience .card-text, -.experience .card-text p { - color: #000 !important; - font-size: 0.75rem !important; -} - -.dark .experience .text-muted { - color: rgba(255, 255, 255, 0.8) !important; -} - -.dark .experience .card-text, -.dark .experience .card-text p { - color: rgb(248, 248, 242) !important; -} - -.card .card-text ul { - margin-top: -1rem; - margin-bottom: 0rem; -} - -.experience .m-2 .border, -.experience .col.border-right { - border-color: $sta-primary !important; -} - -.experience .m-2 .border.exp-fill { - background-color: $sta-primary !important; -} - -/************************************************* - * Talks - **************************************************/ - -.talk-metadata { - color: #4b4f56; - font-size: 0.8rem; -} - -/************************************************* - * Projects - **************************************************/ - -.project-widget-simple li { - margin-bottom: 1rem; -} - -.project-widget-simple li:last-of-type { - margin-bottom: 0; -} - -.project-widget-simple .project-title { - margin-bottom: 6px; -} - -.project-widget-simple .project-summary { - font-size: 0.9rem; - margin-bottom: 0.4rem; -} - -.projects-container { - display: block; - position: relative; - /*margin-top: 5rem;*/ - overflow: hidden; -} - -.project-toolbar{ - margin-bottom: 2rem; -} - -.project-card { - position: relative; - width: calc(33.3% - 2*20px); /* Fluid 3 columns (inc. 20px gutter) */ -} -@media screen and (max-width: 1199px) { - .project-card { - width: calc(50% - 20px); /* Fluid 2 columns (inc. 20px gutter) */ - } -} -@media screen and (max-width: 768px) { - .project-card { - width: 100%; /* 1 column */ - } -} - -.project-item { - margin-bottom: 1.5rem; -} - -.project-card.project-item { - margin: 0 0 20px 0; /* Set to Isotope's gutter size */ -} - -.project-card .card { - margin: 0; /* Remove default card margin and use Isotope gutter */ -} - -.project-showcase .project-item { - margin-bottom: 3rem; -} - -.project-item:last-of-type { - margin-bottom: 0; -} - -.isotope-item { - z-index: 2; -} - -.isotope-item:hover{ - z-index: 3; -} - -/************************************************* - * Accomplishments - **************************************************/ - -.card.course { - margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */ -} - -.card.course:last-of-type { - margin-bottom: 0; -} - -.course .card-subtitle a { - border-bottom: solid 1px transparent; -} - -.course .card-subtitle a:hover { - border-bottom: solid 1px; - text-decoration: none; -} - -/************************************************* - * Card component - **************************************************/ - -.card-simple { - background: #fff; - box-shadow: 0 1px 4px rgba(0,0,0,.04); - border: 1px solid rgba(0,0,0,.09); - border-radius: 3px; - margin-top: 20px; - padding: 15px 20px 15px 20px; -} - -.card-simple:first-of-type { - margin-top: 0; -} - -.card-simple p.read-more { - margin: 0; -} - -.dark .card-simple { - background: rgb(40, 42, 54); - box-shadow: 0 1px 4px rgba(0,0,0,.04); - border: 1px solid rgb(68, 71, 90); -} - -.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: rgba(0,0,0,0.54); - font-size: 0.75rem; -} - -.dark .card-text p { - color: rgb(248, 248, 242); -} - -.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: 'Font Awesome 5 Free'; - font-weight: 900; - 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-widget .fa-ul { - margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */ -} - -.contact-widget .fa-li { - position: absolute; - left: -3.14285714rem; /* Negative of `.contact-widget .fa-ul` margin. */ - width: 2rem; /* Match `fa-2x` icon size. */ - top: 0.14285714em; /* Default FA value. */ - text-align: center; -} - -.contact-widget li { - padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */ - margin-bottom: 0.3rem; -} - -.contact-widget li:last-of-type { - margin-bottom: 0; -} - -#map { - height: 350px; - width: 100%; -} - -/************************************************* - * 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: rgba(0,0,0,0.54); -} - -.dark .site-footer, -.dark footer a#back_to_top i, -.dark .docs .body-footer { - color: rgba(255,255,255,0.54); -} - -/************************************************** - * Tags/Labels - **************************************************/ - -.badge-light { - border: none; - color: rgba(0,0,0,.68); - background: rgba(0,0,0,.05); - font-weight: normal; - border-radius: 3px; - padding: 5px 10px; - margin-right: 8px; - margin-bottom: 8px; -} - -.article-tags > .badge-light:last-child { - margin-right: 0; -} - -.badge-light[href]:focus, -.badge-light[href]:hover { - background: rgba(0,0,0,.1); -} - -a.badge:focus, -a.badge:hover { - color: rgba(0,0,0,.68); -} - -.tag-cloud a { - display: inline-block; - position: relative; - margin: 5px 10px; - word-wrap: break-word; - transition-duration: .2s; - transition-property: transform; - transition-timing-function: ease-out; -} - -.tag-cloud a:active, -.tag-cloud a:focus, -.tag-cloud a:hover { - color: $sta-primary-dark; - transform: scale(1.2); -} - -.dark .tag-cloud a:active, -.dark .tag-cloud a:focus, -.dark .tag-cloud a:hover { - color: $sta-primary-light; -} - -/************************************************* - * Button size override - *************************************************/ - -.btn { - padding: .5rem; - font-size: .8rem; - line-height: .5; - border-radius: .3rem; -} - -.btn-links .btn { - padding: 5px .5rem 5px .5rem; - line-height: 1; -} - -.btn.btn-sm { - padding: 5px .4rem 5px .4rem; - font-size: .6rem; - border-radius: .2rem; -} - -/************************************************* - * Button Primary: Color override - **************************************************/ - -.btn-primary { - border-color: $sta-primary; - background: $sta-primary; -} - -.btn-outline-primary { - border-color: $sta-primary; - color: $sta-primary; -} - -.btn-primary:hover, -.btn-primary:active, -.btn-primary.active, -.btn-primary:visited, -.open > .dropdown-toggle.btn-primary { - background: $sta-primary; -} - -.btn-outline-light:hover, -.btn-outline-light:active, -.btn-outline-light.active { - background: rgba(0,0,0,0.4); -} - -.btn-outline-primary:not(:disabled):not(.disabled).active, -.btn-outline-primary:not(:disabled):not(.disabled):active, -.show > .btn-outline-primary.dropdown-toggle { - color: #fff; - background-color: $sta-primary; - border-color: $sta-primary; -} - -.dark .btn-outline-primary:not(:disabled):not(.disabled).active, -.dark .btn-outline-primary:not(:disabled):not(.disabled):active, -.dark .show > .btn-outline-primary.dropdown-toggle { - color: rgb(68, 71, 90); -} - -.btn-outline-primary:hover { - color: #fff; - background-color: $sta-primary; - border-color: $sta-primary; -} - -.dark .btn-outline-primary:hover { - color: rgb(68, 71, 90); -} - -/************************************************* - * 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: $sta-primary-light !important; -} - -.btn-toolbar .btn.btn-primary:active, -.btn-toolbar .btn.btn-primary.active { - background-color: $sta-primary-dark !important; -} - -.btn-primary:not(:disabled):not(.disabled).active:focus, -.btn-primary:not(:disabled):not(.disabled):active:focus, -.show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 .2rem $sta-primary-light; -} - -/************************************************* - * Navigation Bar - **************************************************/ - -.navbar { - min-height: 70px !important; -} - -.navbar-light { - background: $sta-menu-primary !important; - box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11) -} - -.navbar-light .navbar-toggler { - border-color: transparent; -} - -.navbar-toggler { - color: $sta-menu-text !important; -} - -.navbar-light .navbar-toggler:focus, -.navbar-light .navbar-toggler:hover { - background-color: transparent; -} - -.dropdown-menu, -nav#navbar-main li.nav-item { - font-size: #{$sta-font-size-small}px; -} - -.navbar-light .navbar-nav>.nav-item>.nav-link, -.navbar-light .navbar-nav>.nav-item>.nav-link:focus, -.navbar-light .navbar-nav>.nav-item>.nav-link:hover { - white-space: nowrap; - -webkit-transition: 0.2s ease; - transition: 0.2s ease; - color: $sta-menu-text; - font-weight: 600; -} - -.navbar-light .navbar-nav>.nav-item>.nav-link:focus { - color: $sta-menu-text; - background-color: transparent; -} - -.navbar-light .navbar-nav>.nav-item>.nav-link:hover { - color: $sta-menu-text-active; - background-color: transparent; -} - -.navbar-light .navbar-nav>li.nav-item>a.active, -.navbar-light .navbar-nav>li.nav-item>a.active:focus, -.navbar-light .navbar-nav>li.nav-item>a.active:hover { - color: $sta-menu-text-active; - font-weight: 700; - background-color: transparent !important; /* Override Bootstrap. */ -} - -.navbar-brand, -.navbar-nav li.nav-item a.nav-link { - height: inherit; - line-height: 50px; - padding-top: 10px; - padding-bottom: 10px; -} - -.navbar-brand img { - max-height: 50px; -} - -.navbar-light .navbar-toggler .icon-bar { - background-color: $sta-menu-text !important; -} - -.dropdown-menu { - background-color: $sta-menu-primary !important; -} - -.dropdown-menu > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: 400; - line-height: 1.42857143; - color: $sta-menu-text; - white-space: nowrap; -} - -.dropdown-menu>li>a:focus, -.dropdown-menu>li>a:hover { - color: $sta-menu-text-active; - text-decoration: none; - background-color: $sta-menu-primary; -} - -.dropdown-menu > .active, -.dropdown-menu > .active:focus, -.dropdown-menu > .active:hover { - color: $sta-menu-primary; - text-decoration: none; - background-color: $sta-menu-text-active; - outline: 0; -} - -.navbar-light .navbar-nav>.open>a, -.navbar-light .navbar-nav>.open>a:focus, -.navbar-light .navbar-nav>.open>a:hover, -.navbar-light .navbar-nav>.open>a:visited { - color: $sta-menu-text !important; - background-color: $sta-menu-primary !important; -} - -.navbar-light .navbar-brand { - font-weight: bold; - font-size: 1.2em; - color: $sta-menu-title; -} - -.navbar-light .navbar-brand:focus, -.navbar-light .navbar-brand:hover { - color: $sta-menu-title; - background-color: transparent; -} - -@media screen and (max-width: 1200px) { - .navbar { - min-height: 50px !important; - } - - .navbar-brand, - .navbar-nav li.nav-item a.nav-link { - height: inherit; - line-height: 40px; - padding-top: 5px; - padding-bottom: 5px; - } - - .navbar-brand img { - max-height: 40px; - } - - .navbar-toggler { - display: block; - } - - .fixed-top { - top: 0; - border-width: 0 0 1px; - } - - .navbar-nav > li.nav-item > a.nav-link { - 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: $sta-menu-text; - white-space: nowrap; - } - - .navbar-light .navbar-nav .open .dropdown-menu { - position: static; - width: auto; - margin-top: 0; - background-color: transparent; - border: 0; - box-shadow: none; - } - - .navbar-light .navbar-nav .open .dropdown-menu > li > a { - padding: 5px 15px 5px 25px; - line-height: 20px; - color: $sta-menu-text; - } - - .navbar-light .navbar-nav .open .dropdown-menu > li > a:focus, - .navbar-light .navbar-nav .open .dropdown-menu > li > a:hover { - color: inherit; - background-color: transparent; - } - - .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active, - .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:focus, - .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:hover { - color: $sta-menu-text-active; - 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 > div { - position: relative; - display: block; - font-size: 1rem; - margin-left: 2rem; - margin-top: 0; - margin-bottom: 0; -} - -div.alert div > * { - margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */ -} - -div.alert div > :last-child { - margin-bottom: 0; -} - -div.alert > div:first-child::before { - position: absolute; - top: -0.5rem; - left: -2rem; - font-size: 1.5rem; - color: #209cee; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - content: '\f05a'; - width: 1.5rem; - text-align: center; -} - -div.alert-warning > div:first-child::before { - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - color: #ff3860; - content: '\f071'; -} - -div.alert a { - color: currentColor; - text-decoration: none; - border-bottom: solid 1px currentColor; -} - -.alert-note { - color: #12537e; - background-color: #f6fbfe; - border-color: #209cee; -} - -.alert-warning { - color: #cd0930; - background-color: #fff5f7; - border-color: #ff3860; -} - -/************************************************* - * Documentation layout - **************************************************/ - -.docs-article-container { - max-width: 760px; -} - -/* Documentation: article footer. */ - -.docs .body-footer { - border-top: 1px solid #e8e8e8; - margin-top: 30px; - padding-top: 10px; - font-size: 14px; - color: #707070; -} - -/* Docs content. */ - -.docs-content { - order: 1; - position: relative; -} - -.docs-content>h2[id], -.docs-content>h3[id], -.docs-content>h4[id] { - pointer-events: none; -} - -.docs-content>ol li, -.docs-content>ul li { - margin-bottom: .25rem; -} - -/* Docs search. */ - -.docs-search { - position: relative; - padding: 1rem 15px; - margin-right: -15px; - margin-left: -15px; - border-bottom: 1px solid rgba(0, 0, 0, .05); -} - -.docs-search .form-control:focus { - border-color: $sta-primary; - box-shadow: 0 0 0 3px $sta-primary-light; -} - -/* Docs sidebar. */ - -.docs-sidebar { - order: 0; - border-bottom: 1px solid rgba(0, 0, 0, .1) -} - -@media (min-width:768px) { - .docs-sidebar { - border-right: 1px solid rgba(0, 0, 0, .1) - } - @supports ((position:-webkit-sticky) or (position:sticky)) { - .docs-sidebar { - position: -webkit-sticky; - position: sticky; - top: 50px; - z-index: 10; - height: calc(100vh - 50px) - } - } -} - -@media (min-width:1200px) { - .docs-sidebar { - border-right: 1px solid rgba(0, 0, 0, .1) - } - @supports ((position:-webkit-sticky) or (position:sticky)) { - .docs-sidebar { - position: -webkit-sticky; - position: sticky; - top: 70px; - z-index: 10; - height: calc(100vh - 70px) - } - } -} - -@media (min-width:1200px) { - .docs-sidebar { - flex: 0 1 320px - } -} - -/* Docs sidebar li>a. */ - -.docs-sidebar .nav>li>a { - display: block; - padding: .25rem 1.5rem; - font-size: 0.8rem; - color: rgba(0, 0, 0, .65); -} - -.docs-sidebar .nav>li>a:hover { - color: rgba(0, 0, 0, .85); - text-decoration: none; - background-color: transparent; -} - -.docs-sidebar .docs-toc-item.active a, -.docs-sidebar .nav>.active:hover>a, -.docs-sidebar .nav>.active>a { - font-weight: bold; - color: $sta-primary; - background-color: transparent; -} - -/* Docs links. */ - -.docs-toggle { - line-height: 1; - font-size: 1.2rem; - color: $sta-primary; - background-color: transparent; -} - -.docs-links { - padding-top: 1rem; - padding-bottom: 1rem; - margin-right: -15px; - margin-left: -15px; -} - -@media (min-width:768px) { - @supports ((position:-webkit-sticky) or (position:sticky)) { - .docs-links { - max-height: calc(100vh - 5rem - 70px); - overflow-y: auto; - } - } -} - -@media (min-width:768px) { - .docs-links { - display: block!important; - } -} - -/* Docs TOC. */ - -.docs-toc { - order: 2; - padding-top: 1.5rem; - padding-bottom: 1.5rem; - font-size: .875rem -} - -@supports ((position:-webkit-sticky) or (position:sticky)) { - .docs-toc { - position: -webkit-sticky; - position: sticky; - top: 70px; - height: calc(100vh - 70px); - overflow-y: auto - } -} - -/* Docs TOC item links. */ - -.docs-toc-link { - display: block; - padding: .25rem 1.5rem; - font-weight: bold; - color: rgba(0, 0, 0, .65); -} - -.docs-toc-link:hover { - color: rgba(0, 0, 0, .85); - text-decoration: none; -} - -.docs-toc-item.active { - margin-bottom: 1rem; -} - -.docs-toc-item.active:not(:first-child) { - margin-top: 1rem; -} - -.docs-toc-item.active>.docs-toc-link { - color: rgba(0, 0, 0, .85); -} - -.docs-toc-item.active>.docs-toc-link:hover { - background-color: transparent; -} - -.docs-sidenav { - display: block; -} - -/* Docs TOC nav. */ - -.docs-toc-title { - color: #b5b5b5; - font-size: .875rem; - font-weight: 600; - padding-left: calc(1.5rem + 1px); - margin-bottom: .5rem; -} - -#TableOfContents { - padding-left: 0; - border-left: 1px solid #eee; -} - -#TableOfContents ul, -ul.toc-top { - padding-left: 0; -} - -#TableOfContents ul ul { - display: none; -} - -#TableOfContents li { - display: block; -} - -#TableOfContents li a, -.toc-top li a { - display: block; - padding: .125rem 1.5rem; - color: #99979c; - font-size: 0.7rem; -} - -#TableOfContents li a:hover, -.toc-top li a:hover { - color: $sta-primary; - text-decoration: none; -} - -/* Docs achnorjs links. */ - -.anchorjs-link { - font-weight: 400; - color: $sta-primary-dark; - transition: color .16s linear; -} - -.anchorjs-link:hover { - color: $sta-primary; - text-decoration: none; -} - -/************************************************* - * Dark themed components - **************************************************/ - -body.dark, -.dark .docs-toc-link, -.dark .docs-sidebar .nav > li:not(.active) > a, -.dark .modal button.close, -.dark input, -.dark .form-control, -.dark .form-control:focus { - color: rgb(248, 248, 242); - background: $sta-dark-background; -} - -.dark .form-control { - background-color: rgb(68, 71, 90); -} - -.dark .form-control:focus { - background-color: rgb(68, 71, 90); - border-color: $sta-primary; - box-shadow: 0 0 0 .2rem $sta-primary-dark; -} - -.dark h1, -.dark h2, -.dark h3, -.dark h4, -.dark h5, -.dark h6 { - color: rgb(152, 166, 173); -} - -.dark pre, -.dark code { - color: rgb(139, 233, 253); - background-color: rgb(68, 71, 90); -} - -.dark pre { - background-color: rgb(68, 71, 90); - border-color: rgb(68, 71, 90); -} - -.dark .markup-quote { - background-image: linear-gradient(to bottom, rgba(233, 231, 245, 0.2), rgba(233, 231, 245, 0.2)); -} - -.dark #MathJax_Zoom { - background-color: rgb(68, 71, 90) !important; -} - -.dark ul.share li a { - background-color: $sta-primary; -} - -.dark table table { - background-color: rgb(40, 42, 54); -} - -/* Table Striped */ -.dark table > tbody > tr:nth-child(odd) > td, -.dark table > tbody > tr:nth-child(odd) > th { - background-color: rgb(50, 52, 64); -} - -/* Table Hover */ -.dark table > tbody > tr:hover > td, -.dark table > tbody > tr:hover > th { - background-color: rgb(60, 62, 74); -} - -.dark .article-title a { - color: #fff; -} - -.dark .portrait-title h2 { - color: #fff; -} - -.dark .portrait-title h3 { - color: rgba(255, 255, 255, 0.54); -} - -.dark ul.ul-edu li .description p.institution { - color: rgba(255, 255, 255, 0.6); -} - -.dark .pub-icon { - color: rgba(255, 255, 255, 0.54); -} - -.dark .talk-metadata { - color: rgba(255, 255, 255, 0.54); -} - -.dark .pagination li > a, .pagination li > span { - background-color: rgb(40, 42, 54); - border: 1px solid #ddd; -} - -.dark .card { - background: #343a40; -} - -.dark .card h4 a { - color: $sta-primary; - border-bottom: solid 1px transparent; -} - -.dark .card .card-image.hover-overlay::before { - background: #666; -} - -.dark .card .card-image.hover-overlay::after { - color: #fff; -} - -.dark .navbar-light { - box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11); - border-color: #070707; -} - -.dark select { - background: rgb(40, 42, 54); - color: rgb(248, 248, 242); -} - -/* Algolia search input */ -.dark .ais-search-box--input { - background-color: rgb(68, 71, 90); -} - -.dark #search-query { - background-color: rgb(68, 71, 90); -} - -.dark .badge-light { - color: rgba(255, 255, 255, .68); - background: rgba(255, 255, 255, .2); -} - -.dark .badge-light[href]:focus, -.dark .badge-light[href]:hover { - background: rgba(255, 255, 255, .3); -} - -.dark a.badge:focus, -.dark a.badge:hover { - color: rgba(255, 255, 255, .68); -} - -.dark .btn-primary, -.dark .btn.btn-primary.active { - color: initial; -} diff --git a/assets/sass/academic/_card.scss b/assets/sass/academic/_card.scss new file mode 100644 index 00000000..d7fca550 --- /dev/null +++ b/assets/sass/academic/_card.scss @@ -0,0 +1,118 @@ +/************************************************* + * Card component + **************************************************/ + +.card-simple { + background: #fff; + box-shadow: 0 1px 4px rgba(0,0,0,.04); + border: 1px solid rgba(0,0,0,.09); + border-radius: 3px; + margin-top: 20px; + padding: 15px 20px 15px 20px; +} + +.card-simple:first-of-type { + margin-top: 0; +} + +.card-simple p.read-more { + margin: 0; +} + +.dark .card-simple { + background: rgb(40, 42, 54); + box-shadow: 0 1px 4px rgba(0,0,0,.04); + border: 1px solid rgb(68, 71, 90); +} + +.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: rgba(0,0,0,0.54); + font-size: 0.75rem; +} + +.dark .card-text p { + color: rgb(248, 248, 242); +} + +.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: 'Font Awesome 5 Free'; + font-weight: 900; + 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; +} diff --git a/assets/sass/academic/_content.scss b/assets/sass/academic/_content.scss new file mode 100644 index 00000000..6a58e51b --- /dev/null +++ b/assets/sass/academic/_content.scss @@ -0,0 +1,366 @@ +/************************************************* + * Page content + **************************************************/ + +article { + animation: intro 0.3s both; + animation-delay: 0.15s; +} + +.article-container { + max-width: 760px; + padding: 0 20px 0 20px; + margin: 0 auto 0 auto; +} + +.split-header { + margin-bottom: 2rem; +} + +.split-header .share-box { + float: left; +} + +.page-subtitle { + font-size: 1.15rem; + color: rgba(0,0,0,.54); + margin-bottom: 1rem; +} + +.dark .page-subtitle { + color: rgba(255,255,255,0.54); +} + +.split-header .page-subtitle { + margin-bottom: 1.5rem; +} + +.split-header-content { + max-width: 612px; + width: 100%; + padding: 60px 60px 32px 0; + margin-left: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.split-header-image { + position: relative; /* Required for caption positioning */ + clear: both; + max-width: 580px; +} + +.article-header { + position: relative; /* Required for caption positioning */ + clear: both; +} + +.article-banner { + width: 100%; + height: auto; +} + +.featured-image { + width: 100%; + background-position: left; + background-origin: border-box; + background-size: cover; + height: 60vh; + min-height: 500px; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto +} + +@media screen and (max-width: 1199px) { + .featured-image { + min-height: 400px; + height: auto; + } +} + +@media screen and (max-width: 767px) { + .featured-image { + min-height: 300px; + } +} + +.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; +} + +.text-muted { + color: rgba(0,0,0,0.54); /* Override Bootstrap */ +} + +.dark .text-muted { + color: rgba(255,255,255,0.54); +} + +.article-metadata { + margin-bottom: 15px; + overflow: hidden; + font-size: 14px; + letter-spacing: 0.03em; + color: rgba(0,0,0,0.54); +} + +.dark .article-metadata { + color: rgba(255,255,255,0.54); +} + +.stream-meta.article-metadata { + margin-bottom: 5px; +} + +/* For article page only, not lists. */ +article .article-metadata { + margin-bottom: 20px; + line-height: 30px; /* Match share bar line height. */ +} + +.article-metadata a { + color: rgba(0,0,0,.54); +} + +.dark .article-metadata a { + color: rgba(255,255,255,0.54); +} + +.article-metadata a:hover { + color: $sta-primary; +} + +.middot-divider { + padding-right: .45em; + padding-left: .45em; + font-size: 15px; +} + +.middot-divider::after { + content: '\00B7'; +} + +.article-style img, +.article-style video { + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + padding: 0; +} + +.article-style td img, +.article-style td video { + margin-top: 0; + margin-bottom: 0; +} + +.article-style figure { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.article-style figure img { + margin-top: 0; + margin-bottom: 0; +} + +.article-widget { + padding-top: 1rem; +} + +.article-widget h3 { + margin-top: 0; +} + +.hr-light { + border-top: 1px solid rgba(0,0,0,.05); + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +#comments { + padding-top: 1rem; +} + +/************************************************* + * Publications + **************************************************/ + +.pub-banner { + max-width: 100%; + height: auto; + margin-left: auto; + margin-right: auto; +} + +.pub-row-heading { + font-weight: bold; +} + +#container-publications { + display: block; + position: relative; + overflow: hidden; +} + +.li-cite-author { + font-size: 1em; + color: inherit; +} + +.li-cite-author a { + color: inherit; +} + +.dark .li-cite-author a { + color: rgb(248, 248, 242); +} + +/************************************************* + * Author profile card + **************************************************/ + +.author-card { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(0,0,0,.05); +} + +.dark .author-card { + border-top: 1px solid rgba(255,255,255,.05); +} + +.author-card .portrait { + width: 60px; + height: 60px; + margin: 0 auto; + border-radius: 50%; + object-fit: cover; +} + +.author-card .card-title { + margin-top: 0; + margin-bottom: 15px; + font-weight: 600; + color: rgba(0, 0, 0, 0.84); +} + +.author-card .card-title a { + color: rgba(0, 0, 0, 0.84); +} + +.dark .author-card .card-title, +.dark .author-card .card-title a { + color: rgba(255, 255, 255, 0.84); +} + +.author-card p { + margin-bottom: 5px; +} + +.author-card .card-subtitle { + font-weight: 300; + font-size: 0.8rem; + color: rgba(0, 0, 0, 0.54); + margin-bottom: 7px; +} + +.dark .author-card .card-subtitle { + color: rgba(255, 255, 255, 0.54); +} + +.author-card .card-text { + color: rgba(0, 0, 0, 0.76); + font-size: 0.8rem; + margin-bottom: 4px; +} + +.dark .author-card .card-text { + color: rgba(255, 255, 255, 0.76); +} + +/************************************************* + * 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 i { + display: block; + width: 30px; + height: 30px; + line-height: 30px; + font-size: 16px; + text-align: center; + transition: all 150ms ease-in-out; + color: #fff; +} + +.dark ul.share li i { + color: rgb(68, 71, 90); +} + +ul.share li a { + background-color: #b5c6ce; + display: block; + border-radius: 50%; + text-decoration: none !important; + margin: 0; +} + +ul.share li:hover i { + transform: scale(1.4) +} diff --git a/assets/sass/academic/_dark.scss b/assets/sass/academic/_dark.scss new file mode 100644 index 00000000..4d27b850 --- /dev/null +++ b/assets/sass/academic/_dark.scss @@ -0,0 +1,157 @@ +/************************************************* + * Dark themed components + **************************************************/ + +body.dark, +.dark .docs-toc-link, +.dark .docs-sidebar .nav > li:not(.active) > a, +.dark .modal button.close, +.dark input, +.dark .form-control, +.dark .form-control:focus { + color: rgb(248, 248, 242); + background: $sta-dark-background; +} + +.dark .form-control { + background-color: rgb(68, 71, 90); +} + +.dark .form-control:focus { + background-color: rgb(68, 71, 90); + border-color: $sta-primary; + box-shadow: 0 0 0 .2rem $sta-primary-dark; +} + +.dark h1, +.dark h2, +.dark h3, +.dark h4, +.dark h5, +.dark h6 { + color: rgb(152, 166, 173); +} + +.dark pre, +.dark code { + color: rgb(139, 233, 253); + background-color: rgb(68, 71, 90); +} + +.dark pre { + background-color: rgb(68, 71, 90); + border-color: rgb(68, 71, 90); +} + +.dark .markup-quote { + background-image: linear-gradient(to bottom, rgba(233, 231, 245, 0.2), rgba(233, 231, 245, 0.2)); +} + +.dark #MathJax_Zoom { + background-color: rgb(68, 71, 90) !important; +} + +.dark ul.share li a { + background-color: $sta-primary; +} + +.dark table table { + background-color: rgb(40, 42, 54); +} + +/* Table Striped */ +.dark table > tbody > tr:nth-child(odd) > td, +.dark table > tbody > tr:nth-child(odd) > th { + background-color: rgb(50, 52, 64); +} + +/* Table Hover */ +.dark table > tbody > tr:hover > td, +.dark table > tbody > tr:hover > th { + background-color: rgb(60, 62, 74); +} + +.dark .article-title a { + color: #fff; +} + +.dark .portrait-title h2 { + color: #fff; +} + +.dark .portrait-title h3 { + color: rgba(255, 255, 255, 0.54); +} + +.dark ul.ul-edu li .description p.institution { + color: rgba(255, 255, 255, 0.6); +} + +.dark .pub-icon { + color: rgba(255, 255, 255, 0.54); +} + +.dark .talk-metadata { + color: rgba(255, 255, 255, 0.54); +} + +.dark .pagination li > a, .pagination li > span { + background-color: rgb(40, 42, 54); + border: 1px solid #ddd; +} + +.dark .card { + background: #343a40; +} + +.dark .card h4 a { + color: $sta-primary; + border-bottom: solid 1px transparent; +} + +.dark .card .card-image.hover-overlay::before { + background: #666; +} + +.dark .card .card-image.hover-overlay::after { + color: #fff; +} + +.dark .navbar-light { + box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11); + border-color: #070707; +} + +.dark select { + background: rgb(40, 42, 54); + color: rgb(248, 248, 242); +} + +/* Algolia search input */ +.dark .ais-search-box--input { + background-color: rgb(68, 71, 90); +} + +.dark #search-query { + background-color: rgb(68, 71, 90); +} + +.dark .badge-light { + color: rgba(255, 255, 255, .68); + background: rgba(255, 255, 255, .2); +} + +.dark .badge-light[href]:focus, +.dark .badge-light[href]:hover { + background: rgba(255, 255, 255, .3); +} + +.dark a.badge:focus, +.dark a.badge:hover { + color: rgba(255, 255, 255, .68); +} + +.dark .btn-primary, +.dark .btn.btn-primary.active { + color: initial; +} diff --git a/assets/sass/academic/_docs.scss b/assets/sass/academic/_docs.scss new file mode 100644 index 00000000..ab534620 --- /dev/null +++ b/assets/sass/academic/_docs.scss @@ -0,0 +1,255 @@ +/************************************************* + * Documentation layout + **************************************************/ + +.docs-article-container { + max-width: 760px; +} + +/* Documentation: article footer. */ + +.docs .body-footer { + border-top: 1px solid #e8e8e8; + margin-top: 30px; + padding-top: 10px; + font-size: 14px; + color: #707070; +} + +/* Docs content. */ + +.docs-content { + order: 1; + position: relative; +} + +.docs-content>h2[id], +.docs-content>h3[id], +.docs-content>h4[id] { + pointer-events: none; +} + +.docs-content>ol li, +.docs-content>ul li { + margin-bottom: .25rem; +} + +/* Docs search. */ + +.docs-search { + position: relative; + padding: 1rem 15px; + margin-right: -15px; + margin-left: -15px; + border-bottom: 1px solid rgba(0, 0, 0, .05); +} + +.docs-search .form-control:focus { + border-color: $sta-primary; + box-shadow: 0 0 0 3px $sta-primary-light; +} + +/* Docs sidebar. */ + +.docs-sidebar { + order: 0; + border-bottom: 1px solid rgba(0, 0, 0, .1) +} + +@media (min-width:768px) { + .docs-sidebar { + border-right: 1px solid rgba(0, 0, 0, .1) + } + @supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-sidebar { + position: -webkit-sticky; + position: sticky; + top: 50px; + z-index: 10; + height: calc(100vh - 50px) + } + } +} + +@media (min-width:1200px) { + .docs-sidebar { + border-right: 1px solid rgba(0, 0, 0, .1) + } + @supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-sidebar { + position: -webkit-sticky; + position: sticky; + top: 70px; + z-index: 10; + height: calc(100vh - 70px) + } + } +} + +@media (min-width:1200px) { + .docs-sidebar { + flex: 0 1 320px + } +} + +/* Docs sidebar li>a. */ + +.docs-sidebar .nav>li>a { + display: block; + padding: .25rem 1.5rem; + font-size: 0.8rem; + color: rgba(0, 0, 0, .65); +} + +.docs-sidebar .nav>li>a:hover { + color: rgba(0, 0, 0, .85); + text-decoration: none; + background-color: transparent; +} + +.docs-sidebar .docs-toc-item.active a, +.docs-sidebar .nav>.active:hover>a, +.docs-sidebar .nav>.active>a { + font-weight: bold; + color: $sta-primary; + background-color: transparent; +} + +/* Docs links. */ + +.docs-toggle { + line-height: 1; + font-size: 1.2rem; + color: $sta-primary; + background-color: transparent; +} + +.docs-links { + padding-top: 1rem; + padding-bottom: 1rem; + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width:768px) { + @supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-links { + max-height: calc(100vh - 5rem - 70px); + overflow-y: auto; + } + } +} + +@media (min-width:768px) { + .docs-links { + display: block!important; + } +} + +/* Docs TOC. */ + +.docs-toc { + order: 2; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + font-size: .875rem +} + +@supports ((position:-webkit-sticky) or (position:sticky)) { + .docs-toc { + position: -webkit-sticky; + position: sticky; + top: 70px; + height: calc(100vh - 70px); + overflow-y: auto + } +} + +/* Docs TOC item links. */ + +.docs-toc-link { + display: block; + padding: .25rem 1.5rem; + font-weight: bold; + color: rgba(0, 0, 0, .65); +} + +.docs-toc-link:hover { + color: rgba(0, 0, 0, .85); + text-decoration: none; +} + +.docs-toc-item.active { + margin-bottom: 1rem; +} + +.docs-toc-item.active:not(:first-child) { + margin-top: 1rem; +} + +.docs-toc-item.active>.docs-toc-link { + color: rgba(0, 0, 0, .85); +} + +.docs-toc-item.active>.docs-toc-link:hover { + background-color: transparent; +} + +.docs-sidenav { + display: block; +} + +/* Docs TOC nav. */ + +.docs-toc-title { + color: #b5b5b5; + font-size: .875rem; + font-weight: 600; + padding-left: calc(1.5rem + 1px); + margin-bottom: .5rem; +} + +#TableOfContents { + padding-left: 0; + border-left: 1px solid #eee; +} + +#TableOfContents ul, +ul.toc-top { + padding-left: 0; +} + +#TableOfContents ul ul { + display: none; +} + +#TableOfContents li { + display: block; +} + +#TableOfContents li a, +.toc-top li a { + display: block; + padding: .125rem 1.5rem; + color: #99979c; + font-size: 0.7rem; +} + +#TableOfContents li a:hover, +.toc-top li a:hover { + color: $sta-primary; + text-decoration: none; +} + +/* Docs achnorjs links. */ + +.anchorjs-link { + font-weight: 400; + color: $sta-primary-dark; + transition: color .16s linear; +} + +.anchorjs-link:hover { + color: $sta-primary; + text-decoration: none; +} diff --git a/assets/sass/academic/_listings.scss b/assets/sass/academic/_listings.scss new file mode 100644 index 00000000..c1b80891 --- /dev/null +++ b/assets/sass/academic/_listings.scss @@ -0,0 +1,60 @@ +/************************************************* + * List items + **************************************************/ + +.view-list-item { + margin-bottom: 1rem; +} + +.pub-icon { + color: rgba(0, 0, 0, 0.54); + font-size: 0.81em; + padding-right: 6px; +} + +.view-list-item .article-metadata { + margin-bottom: 0; +} + +.pub-list-item .pub-abstract { + font-size: 1rem; +} + +.pub-list-item .btn-links { + padding-top: 10px; +} + +/************************************************* + * Compact (stream) list view + **************************************************/ + +.media.stream-item { + margin-bottom: 2rem; +} + +.media.stream-item .article-title, +.card-simple .article-title { + font-size: 1.2rem; +} + +.media.stream-item .article-style, +.card-simple .article-style { + margin-top: 2px; + font-size: 0.8rem; +} + +.media.stream-item .stream-meta { + margin-top: 12px; +} + +.media.stream-item img { + max-width: 150px; + height: auto; + object-fit: cover; +} + +@media screen and (max-width: 768px) { + .media.stream-item img { + max-width: 80px; + } +} diff --git a/assets/sass/academic/_nav.scss b/assets/sass/academic/_nav.scss new file mode 100644 index 00000000..cca97408 --- /dev/null +++ b/assets/sass/academic/_nav.scss @@ -0,0 +1,199 @@ +/************************************************* + * Navigation bar + **************************************************/ + +.navbar { + min-height: 70px !important; +} + +.navbar-light { + background: $sta-menu-primary !important; + box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11) +} + +.navbar-light .navbar-toggler { + border-color: transparent; +} + +.navbar-toggler { + color: $sta-menu-text !important; +} + +.navbar-light .navbar-toggler:focus, +.navbar-light .navbar-toggler:hover { + background-color: transparent; +} + +.dropdown-menu, +nav#navbar-main li.nav-item { + font-size: #{$sta-font-size-small}px; +} + +.navbar-light .navbar-nav>.nav-item>.nav-link, +.navbar-light .navbar-nav>.nav-item>.nav-link:focus, +.navbar-light .navbar-nav>.nav-item>.nav-link:hover { + white-space: nowrap; + -webkit-transition: 0.2s ease; + transition: 0.2s ease; + color: $sta-menu-text; + font-weight: 600; +} + +.navbar-light .navbar-nav>.nav-item>.nav-link:focus { + color: $sta-menu-text; + background-color: transparent; +} + +.navbar-light .navbar-nav>.nav-item>.nav-link:hover { + color: $sta-menu-text-active; + background-color: transparent; +} + +.navbar-light .navbar-nav>li.nav-item>a.active, +.navbar-light .navbar-nav>li.nav-item>a.active:focus, +.navbar-light .navbar-nav>li.nav-item>a.active:hover { + color: $sta-menu-text-active; + font-weight: 700; + background-color: transparent !important; /* Override Bootstrap. */ +} + +.navbar-brand, +.navbar-nav li.nav-item a.nav-link { + height: inherit; + line-height: 50px; + padding-top: 10px; + padding-bottom: 10px; +} + +.navbar-brand img { + max-height: 50px; +} + +.navbar-light .navbar-toggler .icon-bar { + background-color: $sta-menu-text !important; +} + +.dropdown-menu { + background-color: $sta-menu-primary !important; +} + +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.42857143; + color: $sta-menu-text; + white-space: nowrap; +} + +.dropdown-menu>li>a:focus, +.dropdown-menu>li>a:hover { + color: $sta-menu-text-active; + text-decoration: none; + background-color: $sta-menu-primary; +} + +.dropdown-menu > .active, +.dropdown-menu > .active:focus, +.dropdown-menu > .active:hover { + color: $sta-menu-primary; + text-decoration: none; + background-color: $sta-menu-text-active; + outline: 0; +} + +.navbar-light .navbar-nav>.open>a, +.navbar-light .navbar-nav>.open>a:focus, +.navbar-light .navbar-nav>.open>a:hover, +.navbar-light .navbar-nav>.open>a:visited { + color: $sta-menu-text !important; + background-color: $sta-menu-primary !important; +} + +.navbar-light .navbar-brand { + font-weight: bold; + font-size: 1.2em; + color: $sta-menu-title; +} + +.navbar-light .navbar-brand:focus, +.navbar-light .navbar-brand:hover { + color: $sta-menu-title; + background-color: transparent; +} + +@media screen and (max-width: 1200px) { + .navbar { + min-height: 50px !important; + } + + .navbar-brand, + .navbar-nav li.nav-item a.nav-link { + height: inherit; + line-height: 40px; + padding-top: 5px; + padding-bottom: 5px; + } + + .navbar-brand img { + max-height: 40px; + } + + .navbar-toggler { + display: block; + } + + .fixed-top { + top: 0; + border-width: 0 0 1px; + } + + .navbar-nav > li.nav-item > a.nav-link { + 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: $sta-menu-text; + white-space: nowrap; + } + + .navbar-light .navbar-nav .open .dropdown-menu { + position: static; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + + .navbar-light .navbar-nav .open .dropdown-menu > li > a { + padding: 5px 15px 5px 25px; + line-height: 20px; + color: $sta-menu-text; + } + + .navbar-light .navbar-nav .open .dropdown-menu > li > a:focus, + .navbar-light .navbar-nav .open .dropdown-menu > li > a:hover { + color: inherit; + background-color: transparent; + } + + .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active, + .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:focus, + .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:hover { + color: $sta-menu-text-active; + background-color: transparent; + } + + .collapse.in { + display: block !important; + } +} diff --git a/assets/sass/academic/_root.scss b/assets/sass/academic/_root.scss new file mode 100644 index 00000000..faee8320 --- /dev/null +++ b/assets/sass/academic/_root.scss @@ -0,0 +1,580 @@ +/************************************************* + * Academic's Core + **************************************************/ + +html { + font-family: $sta-font-body, sans-serif; + font-size: #{$sta-font-size-small}px; + color: rgba(0,0,0,0.8); + line-height: 1.65; +} +@media screen and (min-width: 58em) { + html { + font-size: #{$sta-font-size}px; + } +} + +body { + font-family: inherit; + font-size: 1rem; + line-height: inherit; + color: inherit; + background-color: $sta-background; + margin-top: 70px; /* 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: 50px; /* Offset body content by navbar height. */ + } +} + +.max-width-640 { + max-width: 640px; +} + +.margin-auto { + margin-left: auto; + margin-right: auto; +} + +.center-text { + text-align: center; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +/* Lists */ +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +/* Navigation bar text */ +.navbar-light { + font-family: $sta-font-nav, sans-serif; + font-weight: 400; + line-height: 1.25; + text-rendering: optimizeLegibility; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + font-family: $sta-font-heading, sans-serif; + font-weight: 400; + margin-top: 1rem; + margin-bottom: .5rem; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; + + /* Ensure long words do not overflow into content. */ + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + + /* Add a hyphen where the word breaks (use `­` to insert a soft-hyphen in a word). */ + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +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: $sta-link; + text-decoration: none; + transition: color 0.6s ease; +} + +a:hover, +a:focus { + color: $sta-link-hover; +} + +img, +video { + height: auto; + max-width: 100%; + display: block; +} + +video { + width: 100%; + height: auto; + max-height: 400px; +} + +.img-responsive { + /* Extend Bootstrap declaration with centering. */ + margin: 0 auto; +} + +figcaption { + display: block; + margin-top: 0.75em; + line-height: 1.25; + font-size: 1rem; + margin-bottom: 1.65rem; + font-family: $sta-font-heading, sans-serif; +} + +figcaption.numbered:before { + font-weight: 700; + text-transform: uppercase; + content: attr(data-pre) counter(captions) attr(data-post); +} + +figcaption.numbered { + counter-increment: captions; +} + +figcaption h4 { + display: inline; + font-size: 1rem; + font-weight: 400; + margin: 0; +} + +pre, +code { + font-family: '$sta-font-mono', monospace; + color: #c7254e; + background-color: #f9f2f4; +} + +pre { + margin: 0 0 1rem 0; + background-color: rgb(248, 248, 248); /* Match default highlight theme. */ + border-color: rgb(248, 248, 248); + font-size: 0.7rem; + border-radius: 4px; +} + +pre code { + white-space: pre; /* Override Bootstrap to preserve line breaks in code. */ + overflow-x: 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; + } +} + +.markup-quote { + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(233, 231, 245, 1), rgba(233, 231, 245, 1)); +} + +.space-below { + margin-bottom: 50px; +} +@media screen and (max-width: 768px) { + .space-below { + margin-bottom: 10px; + } +} + +.universal-wrapper { + margin: 0 auto; + padding-right: 1rem; + padding-left: 1rem; + padding-top: 0.1rem; + width: 100%; +} + +@media only screen and (min-width: 1001px) { + .universal-wrapper { + width: 1000px; + } +} + +small, +.small { + font-size: .75em; +} + +.responsive-wrap iframe { + max-width: 100%; +} + +/************************************************* + * Modals. + **************************************************/ + +.modal-content { + background: $sta-background; +} + +.modal-title { + margin: 0; /* Override default h5 margin. */ +} + +.modal-content pre { + margin: 0; +} + +.modal-header { + border: 0; + color: rgba(0,0,0,0.8); +} + +.modal-footer { + border: 0; +} + +#modal-error { + color: red; +} + +/************************************************* + * Gallery. + **************************************************/ + +.gallery { + margin: 0.5em -4px 1.5em -4px; + font-size: 0; +} + +a[data-fancybox] { + text-decoration: none; +} + +a[data-fancybox] img { + height: 250px; + max-width: inherit; + display: inherit; + margin: 0; + padding: 4px; + box-shadow: none; + vertical-align: inherit; +} + +.fancybox-caption { + font-size: 1rem; + line-height: 1.5rem; + text-align: center; +} + +/************************************************* + * Pager. + **************************************************/ + +.post-nav { + margin-top: 1rem; + font-size: 0.8rem; +} + +.post-nav-item { + hyphens: auto; + word-wrap: break-word; + padding: 11px 0 12px; + width: 100%; +} + +.post-nav-item a { + color: #2b2b2b; + line-height: 1.7; + text-transform: none; +} + +.post-nav-item .meta-nav { + color: #767676; + font-weight: 900; + line-height: 2; + text-transform: uppercase; +} + +.dark .post-nav-item a { + color: #ddd; +} + +/************************************************* + * 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: rgba(0,0,0,0.54); +} + +.dark site-footer, +.dark footer a#back_to_top i, +.dark .docs .body-footer { + color: rgba(255,255,255,0.54); +} + +/************************************************** + * Tags/Labels + **************************************************/ + +.badge-light { + border: none; + color: rgba(0,0,0,.68); + background: rgba(0,0,0,.05); + font-weight: normal; + border-radius: 3px; + padding: 5px 10px; + margin-right: 8px; + margin-bottom: 8px; +} + +.article-tags > .badge-light:last-child { + margin-right: 0; +} + +.badge-light[href]:focus, +.badge-light[href]:hover { + background: rgba(0,0,0,.1); +} + +a.badge:focus, +a.badge:hover { + color: rgba(0,0,0,.68); +} + +.tag-cloud a { + display: inline-block; + position: relative; + margin: 5px 10px; + word-wrap: break-word; + transition-duration: .2s; + transition-property: transform; + transition-timing-function: ease-out; +} + +.tag-cloud a:active, +.tag-cloud a:focus, +.tag-cloud a:hover { + color: $sta-primary-dark; + transform: scale(1.2); +} + +.dark .tag-cloud a:active, +.dark .tag-cloud a:focus, +.dark .tag-cloud a:hover { + color: $sta-primary-light; +} + +/************************************************* + * Button size override + *************************************************/ + +.btn { + padding: .5rem; + font-size: .8rem; + line-height: .5; + border-radius: .3rem; +} + +.btn-links .btn { + padding: 5px .5rem 5px .5rem; + line-height: 1; +} + +.btn.btn-sm { + padding: 5px .4rem 5px .4rem; + font-size: .6rem; + border-radius: .2rem; +} + +/************************************************* + * 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: $sta-primary-light !important; +} + +.btn-toolbar .btn.btn-primary:active, +.btn-toolbar .btn.btn-primary.active { + background-color: $sta-primary-dark !important; +} + +.btn-primary:not(:disabled):not(.disabled).active:focus, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.show > .btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 .2rem $sta-primary-light; +} + +/************************************************* + * 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 > div { + position: relative; + display: block; + font-size: 1rem; + margin-left: 2rem; + margin-top: 0; + margin-bottom: 0; +} + +div.alert div > * { + margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */ +} + +div.alert div > :last-child { + margin-bottom: 0; +} + +div.alert > div:first-child::before { + position: absolute; + top: -0.5rem; + left: -2rem; + font-size: 1.5rem; + color: #209cee; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + content: '\f05a'; + width: 1.5rem; + text-align: center; +} + +div.alert-warning > div:first-child::before { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + color: #ff3860; + content: '\f071'; +} + +div.alert a { + color: currentColor; + text-decoration: none; + border-bottom: solid 1px currentColor; +} + +.alert-note { + color: #12537e; + background-color: #f6fbfe; + border-color: #209cee; +} + +.alert-warning { + color: #cd0930; + background-color: #fff5f7; + border-color: #ff3860; +} diff --git a/assets/sass/academic/_search.scss b/assets/sass/academic/_search.scss new file mode 100644 index 00000000..a6fd06f9 --- /dev/null +++ b/assets/sass/academic/_search.scss @@ -0,0 +1,131 @@ +/************************************************* + * Search + **************************************************/ + +.search-results { + transform: scale(0); + -webkit-transform: scale(0); + background-color: $sta-background; + bottom: 0; + left: 0; + right: 0; + top: 0; + overflow: scroll; + position: fixed; + visibility: hidden; + z-index: -99; +} + +.dark .search-results { + background-color: rgb(40, 42, 54); +} + +.searching { + overflow: hidden; +} + +.searching .search-results { + transform: scale(1); + -webkit-transform: scale(1); + visibility: visible; + z-index: 1031; /* Highest index, higher than navbar. */ +} + +.searching #search-box #search-query { + width: 100%; +} + +.search-results > .container { + padding-top: 70px; /* Navbar height. */ +} +@media screen and (max-width: 1200px) { + .search-results > .container { + padding-top: 50px; /* Navbar height. */ + } +} + +.search-header { + position: -webkit-sticky; + position: sticky; + top: 70px; /* Navbar height. */ + background-color: $sta-background; + padding-top: 2rem; + padding-bottom: 1rem; +} +@media screen and (max-width: 1200px) { + .search-header { + top: 50px; /* Navbar height. */ + } +} + +.dark .search-header { + background-color: rgb(40, 42, 54); +} + +.search-header h1 { + margin: 0; + line-height: 1; +} + +.col-search-close { + text-align: right; +} + +.search-header i { + font-size: 2rem; + line-height: 1; +} + +#search-box { + position: relative; /* Required for search icon positioning. */ + margin-bottom: 0.5rem; +} + +#search-box::before { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + content: "\f002"; + font-size: 1rem; + opacity: 0.25; + line-height: 1rem; + position: absolute; + left: 0.7rem; + top: 0.6rem; + overflow-x: hidden; +} + +#search-box #search-query { + border: 1px solid #dedede; + border-radius: 1rem; + padding: 1rem 1rem 1rem 2rem; /* Wider left padding for search icon to fit in. */ + width: 250px; + line-height: 1rem; + height: 1rem; + font-size: 0.8rem; +} + +.search-hit em { + font-style: normal; + background-color: #FFE0B2; + color: #E65100; + border-bottom: 1px solid #E65100; +} + +.search-hit-type { + margin-bottom: 0 !important; /* Override .article-metadata margin. */ + text-transform: capitalize; +} + +.search-hit-description { + font-size: 0.7rem; +} + +/* Load more results button - hide when there are no more results. */ +#search-hits button[disabled] { + display: none; +} + +.form-control:focus { + border-color: $sta-primary; + box-shadow: 0 0 0 .2rem $sta-primary-light; +} diff --git a/assets/sass/academic/_widgets.scss b/assets/sass/academic/_widgets.scss new file mode 100644 index 00000000..bc5ef0c8 --- /dev/null +++ b/assets/sass/academic/_widgets.scss @@ -0,0 +1,547 @@ +/************************************************* + * Page Builder: sections and widgets + **************************************************/ + +@keyframes intro { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.home-section { + background-color: $sta-home-section-odd; + padding: 110px 0 110px 0; + animation: intro 0.3s both; + animation-delay: 0.15s; +} + +/* Override dark colors that may be inherited from body.dark */ +.home-section.dark, +.home-section.dark h1, +.home-section.dark h2, +.home-section.dark h3, +.home-section.dark a:not(.btn) { + color: rgb(248, 248, 242); +} + +/* Underline links in dark sections to separate them from text */ +.home-section.dark a:not(.btn):not(.hero-cta-alt) { + text-decoration: underline; +} + +/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */ +.home-section.dark .alert a { + color: inherit !important; + text-decoration: inherit !important; +} + +/* Big underline style for links in dark sections */ +/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */ +/* +.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) { + text-decoration: none; + position: relative; +} +.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after { + background: #fff; + content: ""; + height: 2px; + left: 0; + right: 0; + position: absolute; + top: 100%; +}*/ + +/* Create the parallax scrolling effect */ +.parallax { + height: 100%; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.home-section:first-of-type { + padding-top: 50px; +} + +.home-section:nth-of-type(even) { + background-color: $sta-home-section-even; +} + +.dark .home-section { + background-color: $sta-dark-home-section-odd; +} + +.dark .home-section:nth-of-type(even) { + background-color: $sta-dark-home-section-even; +} + +@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-weight: 400; + font-size: 1.1rem; + color: #b2b2b2; +} + +/************************************************* + * Widgets (common) + **************************************************/ + +.see-all { + margin-top: 2rem; + text-transform: uppercase; +} + +/* Reset code highlighting style in Alerts when Alert is child of a `.dark` widget, but Alert should be light.` */ +/* But will this affect page which should have dark Alert? */ +.dark .alert pre, +.dark .alert code { + color: initial; + background-color: initial; +} + +/************************************************* + * Hero Widget + **************************************************/ + +.wg-hero { + padding: 3em 0; + clear: both; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + animation: intro 0.3s both; + animation-delay: 0s; + animation-delay: 0.25s; +} + +.hero-title { + font-size: 2.7rem; + margin-top: 0; + line-height: 1; +} + +.hero-lead { + max-width: 768px; + font-size: 1.35rem; +} + +.wg-hero.dark .hero-title, +.wg-hero.dark .hero-lead, +.wg-hero.dark .hero-cta-alt, +.wg-hero.dark .hero-note > * { + color: #fff; + /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */ +} + +.wg-hero.dark a:not(.wg-hero .btn) { + color: #fff; +} + +.wg-hero .hero-lead a { + text-decoration: underline; +} + +.wg-hero .cta-btns { + margin-bottom: 16px; +} + +.wg-hero .btn { + padding: .6em 2.1em; +} + +.wg-hero.dark .btn { + color: $sta-primary-dark; +} + +a.hero-cta-alt { + display: inline-block; + position: relative; + transition-duration: .2s; + transition-property: transform; + transition-timing-function: ease-out; + font-size: 1.1rem; +} + +a.hero-cta-alt:active, +a.hero-cta-alt:focus, +a.hero-cta-alt:hover { + transform: scale(1.1); +} + +.wg-hero .btn-lg { + font-size: 1.1rem; +} + +.wg-hero .hero-note { + font-size: 0.8rem; +} + +.hero-media { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + text-align: center; +} + +/************************************************* + * Slider Widget + **************************************************/ + +/* The Slider widget reuses the Hero widget's `.wg-hero` class. + * We must remove the `animation` and `clear` in this instance or + * multiple slides can be `.active` at once. */ +.carousel-inner .wg-hero { + animation: none; + clear: none; +} + +/************************************************* + * Featurette Widget + **************************************************/ + +.featurette { + font-size: 0.8rem; + line-height: 1.5; + color: #555; + text-align: center; +} + +.featurette h3 { + margin-top: 0; + margin-bottom: 5px; + font-weight: 400; + color: #333; +} + +.dark .featurette, +.dark .featurette h3 { + color: #fff; +} + +.featurette-icon { + display: block; + width: 100%; + color: $sta-primary; + font-size: 3rem; + text-align: center; +} + +/************************************************* + * About widget + **************************************************/ + +#profile { + text-align: center; + padding: 30px 10px; + position: relative; +} + +.portrait { + width: 200px; + height: 200px; + margin: 0 auto; + border-radius: 50%; + object-fit: cover; +} + +.portrait-title h2 { + font-size: 1.75em; + font-weight: 300; + color: #000000; + margin: 20px 0 10px 0; +} + +.portrait-title h3 { + font-size: 1rem; + font-weight: 300; + color: rgba(0,0,0, 0.54); + margin: 0px 0 10px 0; +} + +ul.network-icon { + display: inline-flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + list-style: none; + padding: 0; +} + +#profile .network-icon { + margin-top: 30px; +} + +.network-icon li { + margin-right: 10px; +} + +.network-icon li:last-of-type { + margin-right: 0; +} + +.network-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); +} + +/************************************************* + * Experience + **************************************************/ + +.exp-title { + text-transform: none !important; +} + +.exp-company { + font-weight: normal !important; + text-transform: none !important; +} + +.exp-meta { + font-size: 0.8rem; +} + +.experience .card-text, +.experience .card-text p { + color: #000 !important; + font-size: 0.75rem !important; +} + +.dark .experience .text-muted { + color: rgba(255, 255, 255, 0.8) !important; +} + +.dark .experience .card-text, +.dark .experience .card-text p { + color: rgb(248, 248, 242) !important; +} + +.card .card-text ul { + margin-top: -1rem; + margin-bottom: 0rem; +} + +.experience .m-2 .border, +.experience .col.border-right { + border-color: $sta-primary !important; +} + +.experience .m-2 .border.exp-fill { + background-color: $sta-primary !important; +} + +/************************************************* + * Talks + **************************************************/ + +.talk-metadata { + color: #4b4f56; + font-size: 0.8rem; +} + +/************************************************* + * Projects + **************************************************/ + +.project-widget-simple li { + margin-bottom: 1rem; +} + +.project-widget-simple li:last-of-type { + margin-bottom: 0; +} + +.project-widget-simple .project-title { + margin-bottom: 6px; +} + +.project-widget-simple .project-summary { + font-size: 0.9rem; + margin-bottom: 0.4rem; +} + +.projects-container { + display: block; + position: relative; + /*margin-top: 5rem;*/ + overflow: hidden; +} + +.project-toolbar{ + margin-bottom: 2rem; +} + +.project-card { + position: relative; + width: calc(33.3% - 2*20px); /* Fluid 3 columns (inc. 20px gutter) */ +} +@media screen and (max-width: 1199px) { + .project-card { + width: calc(50% - 20px); /* Fluid 2 columns (inc. 20px gutter) */ + } +} +@media screen and (max-width: 768px) { + .project-card { + width: 100%; /* 1 column */ + } +} + +.project-item { + margin-bottom: 1.5rem; +} + +.project-card.project-item { + margin: 0 0 20px 0; /* Set to Isotope's gutter size */ +} + +.project-card .card { + margin: 0; /* Remove default card margin and use Isotope gutter */ +} + +.project-showcase .project-item { + margin-bottom: 3rem; +} + +.project-item:last-of-type { + margin-bottom: 0; +} + +.isotope-item { + z-index: 2; +} + +.isotope-item:hover{ + z-index: 3; +} + +/************************************************* + * Accomplishments + **************************************************/ + +.card.course { + margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */ +} + +.card.course:last-of-type { + margin-bottom: 0; +} + +.course .card-subtitle a { + border-bottom: solid 1px transparent; +} + +.course .card-subtitle a:hover { + border-bottom: solid 1px; + text-decoration: none; +} + +/************************************************* + * People widget + **************************************************/ + +.people-widget { + font-size: 0.8rem; + text-align: center; +} + +.people-widget .portrait-title h2 { + font-size: 1rem; +} + +.people-widget .portrait-title h3 { + font-size: 0.7rem; +} + +.people-widget .portrait { + width: 80%; + max-width: 150px; + height: auto; +} + +@media (min-width: 576px) { + .people-widget .col-sm-auto { + max-width: 30% !important; + } +} +@media (min-width: 992px) { + .people-widget .col-sm-auto { + max-width: 20% !important; + } +} + +/************************************************* + * Contact + **************************************************/ + +.contact-widget .fa-ul { + margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */ +} + +.contact-widget .fa-li { + position: absolute; + left: -3.14285714rem; /* Negative of `.contact-widget .fa-ul` margin. */ + width: 2rem; /* Match `fa-2x` icon size. */ + top: 0.14285714em; /* Default FA value. */ + text-align: center; +} + +.contact-widget li { + padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */ + margin-bottom: 0.3rem; +} + +.contact-widget li:last-of-type { + margin-bottom: 0; +} + +#map { + height: 350px; + width: 100%; +} diff --git a/assets/sass/academic/academic.scss b/assets/sass/academic/academic.scss new file mode 100644 index 00000000..603c98a4 --- /dev/null +++ b/assets/sass/academic/academic.scss @@ -0,0 +1,16 @@ +/************************************************* + * Academic: The Website Builder for Hugo + * Designed by @GeorgeCushen + * https://sourcethemes.com/academic/ + * License: https://github.com/gcushen/hugo-academic/blob/master/LICENSE.md + **************************************************/ + +@import "root"; +@import "nav"; +@import "card"; +@import "search"; +@import "content"; +@import "listings"; +@import "widgets"; +@import "docs"; +@import "dark"; diff --git a/assets/sass/main.scss b/assets/sass/main.scss index e615457c..7d7c2a7e 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -33,4 +33,4 @@ $sta-dark-home-section-even: {{ $scr.Get "dark_home_section_even" }}; @import "bootstrap_variables"; @import "vendor/bootstrap/bootstrap"; -@import "academic.scss"; +@import "academic/academic";