ソースを参照

refactor: Academic's SCSS style file into more manageable modules

See #680
George Cushen 6 年 前
コミット
346f1575e0

+ 0 - 2471
assets/sass/academic.scss

@@ -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;
-}

+ 118 - 0
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;
+}

+ 366 - 0
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)
+}

+ 157 - 0
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;
+}

+ 255 - 0
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;
+}

+ 60 - 0
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;
+  }
+}

+ 199 - 0
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;
+  }
+}

+ 580 - 0
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;
+}

+ 131 - 0
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;
+}

+ 547 - 0
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%;
+}

+ 16 - 0
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";

+ 1 - 1
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";