Popcorn Hack: Parade Invite Rescue

Homework Hack: Parade Hub Page (Required)

Optional SASS Extra: Custom Tinted Container Variant

Here is the custom SCSS to create a wider, Rotary-themed tinted container (.ocs__container--rotary-wide):

// Custom SASS block
.ocs__container--rotary-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  font-family: var(--pref-font-family);
  color: var(--pref-text-color);
  background-color: rgba(0, 128, 128, 0.05); // Slight teal tint for the Rotary theme
  border-radius: 12px;
  
  * {
    box-sizing: border-box;
  }
}

Submission Info

Lesson: OCS SASS Containers Grammar

Popcorn: Rebuilt invite using ocs__container, ocs__card, ocs__section-title, description, and a cols-3 grid. Removed all inline CSS.

Homework: Created a full page utilizing ocs__container, ocs__card, standard grid (with header, accent, and muted cells), table-wrap, and a callout line.

Extra Credit: Designed and implemented a .ocs__container--rotary-wide SCSS class.