jlengstorf/responsive-lazyload.js

/*
 * # Example-only CSS
 * These styles are only related to the example layout. They probably shouldn’t
 * be included in your project.
 */
body {
  background: #fafffe;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.example {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20vh;
  padding-left: 5vw;
  padding-right: 5vw;
  color: #333a40;
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2 {
  color: #111a20;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
}

h2 {
  margin-top: 15vh;
  font-size: 22px;
  line-height: 1.25;
}

@media (min-width: 550px) {
  h1 {
    font-size: 175%;
  }

  h2 {
    font-size: 150%;
  }
}

figcaption {
  color: #777;
  margin-top: 0.25em;
  font-size: 87.5%;
}

pre,
code {
  padding: 2px;
  font-size: 87.5%;
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 2px;
}

pre {
  max-width: 100%;
  padding: 1em;
  overflow-x: scroll;
}

.tabs {
  text-align: center;
}

@media (min-width: 750px) {
  .tabs {
    text-align: left;
  }
}

.tabs__tab {
  display: inline-block;
  padding: 0.5em;
  background-color: transparent;
  color: #333a40;
  font-size: 87.5%;
  letter-spacing: 0.125em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 200ms linear;
}

.tabs__tab[aria-selected="true"] {
  background-color: #333a40;
  color: #fafffe;
  font-weight: 900;
}

.gallery {
  margin-top: 1em;
}

.gallery__panel[aria-hidden="true"] {
  display: none;
}

footer {
  margin: 50px 0;
  color: #666a70;
  font-size: 75%;
  text-align: center;
}

footer a {
  color: inherit;
}