hugo-academic/wowchemy/assets/scss/wowchemy/widgets/_base.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: 0.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;
}

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

/*************************************************
 * Talks
 **************************************************/

.talk-metadata {
  color: #4b4f56;
  font-size: 0.8rem;
}

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