<header class="c-banner" id="top">
    <h1 class="c-banner__title">
        <a class="c-banner__home" href="/pages/" rel="home">24 ways <span>to impress your friends</span></a>
    </h1>
</header>
<header class="c-banner" id="top">
  <h1 class="c-banner__title">
    <a class="c-banner__home" href="/pages/" rel="home">24 ways <span>to impress your friends</span></a>
  </h1>
</header>
{
  "site": {
    "title": "24 ways",
    "handle": "24ways",
    "description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
    "url": "https://24ways.org",
    "feed": "https://feeds.feedburner.com/24ways",
    "theme_color": "#f04"
  },
  "theme": {
    "year": [
      348,
      344,
      340,
      336,
      332,
      328,
      324,
      320,
      316,
      312,
      308,
      304,
      300,
      296,
      292,
      288
    ],
    "day": [
      360,
      353,
      346,
      339,
      332,
      325,
      318,
      311,
      304,
      297,
      290,
      283,
      276,
      269,
      262,
      255,
      248,
      241,
      234,
      227,
      220,
      213,
      206,
      199
    ]
  }
}
  • Content:
    .c-banner {
      padding: map(spaces, medium) map(spaces, large);
      background-color: $color-year--dark;
      background-color: var(--color-year--dark, $color-year--dark);
    
      .has-js & {
        transition-duration: $banner-duration;
        transition-timing-function: ease-out;
      }
    
      [data-menu-expanded=false] & {
        transition-delay: $navigation-duration;
      }
    
      @media (--upto-medium-screen) {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: calc(map(layers, modal) + 1);
    
        .has-js & {
          transition-property: background-color;
        }
    
        [data-menu-expanded=true] & {
          background-color: white;
        }
      }
    
      @media (--from-medium-screen) {
        margin-right: $navigation-width--large;
        padding: map(spaces, large);
      }
    
      @media (--from-large-screen) {
        padding-left: calc(25% - 1rem);
      }
    }
    
    .c-banner__title {
      font-size: 1.25em;
      line-height: calc(16 / 20);
    
      @media (--from-medium-screen) {
        font-size: 1.5em;
        line-height: calc(24 / 24);
      }
    }
    
    .c-banner__home {
      text-transform: uppercase;
      color: white;
    
      &:hover {
        color: white;
      }
    
      @media (--upto-medium-screen) {
        .has-js & {
          transition: color $banner-duration ease-out;
        }
    
        [data-menu-expanded=true] & {
          color: $navigation-color--text;
        }
    
        [data-menu-expanded=false] & {
          transition-delay: $navigation-duration;
        }
      }
    
      span {
        font-size: 0.6667em;
        text-transform: lowercase;
        white-space: nowrap;
        color: map(colors, primary, light);
      }
    }
    
  • URL: /components/raw/banner/banner.css
  • Filesystem Path: src/components/global/banner/banner.css
  • Size: 1.5 KB

There are no notes for this item.