hugo-academic/wowchemy/assets/scss/wowchemy/_widgets.scss

/*************************************************
 *  Page Builder: sections and widgets
 **************************************************/

.home-section {
  // Use `background` rather than `background-color` so it can support gradients in theme packs.
  background: $sta-home-section-odd;
  position: relative;  // Required for component positioning within section.
  padding: 110px 0 110px 0;
  z-index: 0;  // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
}

// Responsive fullscreen option for widgets
.home-section.fullscreen {
  min-height: calc(100vh - 70px);
}
@include media-breakpoint-down(md) {
  .home-section.fullscreen {
    min-height: calc(100vh - 50px);
  }
}
.no-navbar .home-section.fullscreen {
  min-height: 100vh;
}

// Section theming

.home-section.light,
.home-section.light h1 {
  color: #000;
}

.home-section.light a {
  color: $sta-link;
}

.home-section.dark a {
  color: $sta-dark-link;
}

/* 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: #fff;
}

/* 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%;
}*/

// Fill padding of `.home-section` parent
.home-section-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%; // Or fill-available when supported.
  width: 100%; // Or fill-available when supported.
  z-index: -1; // Place bg div behind content.
}

/* Default background image properties for home sections. */
.home-section-bg.bg-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Create a parallax-like scrolling effect on desktop browsers. */
.parallax {
  background-attachment: fixed;
}
// Workaround issue with mobile browser support for fixed parallax background.
@include media-breakpoint-down(md) {
  .parallax {
    background-attachment: scroll;
  }
}

.home-section:first-of-type {
  padding-top: 50px;
}

.home-section:nth-of-type(even) {
  background: $sta-home-section-even;
}

.dark .home-section {
  background: $sta-dark-home-section-odd;
}

.dark .home-section:nth-of-type(even) {
  background: $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-subheading {
  font-size: 1.25rem;
  font-family: $sta-font-heading, sans-serif;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.section-heading p {
  font-weight: 400;
  font-size: 1.1rem;
  color: rgba(0,0,0,0.54);  // Accessible contrast, matching footer text color.
}

.dark .section-heading p {
  color: rgb(158, 158, 158);
}

/*************************************************
 *  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; // More compact top and bottom padding for Hero.
}

.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
 **************************************************/

/* Clear `.home-section` as any padding or animation interferes with Slider's layout and animations. */
.home-section.wg-slider {
  padding: 0;
  animation: none;
  animation-delay: unset;
}

/* The Slider widget reuses the Hero widget's `.wg-hero` class.
 * We must remove any `animation` and `clear` (although Hero no longer sets `clear: both`) 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 .section-subheading {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 400;
  color: #333;
}

.dark .featurette,
.dark .featurette .section-subheading {
  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;
}

.avatar {
  width: 270px;
  height: 270px;
  margin: 0 auto;
  object-fit: cover;
}

// Use smaller avatar size in About widget on small devices.
@include media-breakpoint-down(sm) {
  .wg-about .avatar {
    width: 200px;
    height: 200px;
  }
}

.avatar-circle {
  border-radius: 50%;
}

.avatar-square {
  border-radius: 3px;
}

.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;
  margin: 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;
}

// For a UL after P, remove the spacing between (P margin-bottom) without affecting any nested lists.
.card .card-text p + 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% - 13.3px); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
}
@media screen and (max-width: 1199px) {
  .project-card {
    width: calc(50% - 10px); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
  }
}
@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 .avatar {
  width: 80%;
  max-width: 150px;
  height: auto;
}

@media (min-width: 576px) {
  .people-widget .col-sm-auto {
    width: 30%;
  }
}
@media (min-width: 992px) {
  .people-widget .col-sm-auto {
    width: 20%;
  }
}

/*************************************************
 *  Contact
 **************************************************/

.wg-contact .fa-ul {
  margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
}

.wg-contact .fa-li {
  position: absolute;
  left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
  width: 2rem; /* Match `fa-2x` icon size. */
  top: 0.14285714em; /* Default FA value. */
  text-align: center;
}

.wg-contact li {
  padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
  margin-bottom: 0.3rem;
}

.wg-contact li:last-of-type {
  margin-bottom: 0;
}

#map {
  height: 350px;
  width: 100%;
}

// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
// from a dark widget page section.
#map a {
  color: initial;
}