@import "_color-definitions";

$color-primary: $palette-teal-500;
$color-accent: $palette-pink-A200;

@import "material-design-lite";

body {
  background-image: url('images/paper_fibers.png');
}
// BEGIN-SNIPPET layout-transparent
.layout-transparent {
  background: url('images/transparent.jpg') center / cover;
}
// END-SNIPPET

@media (max-width: 600px) {
  .x-example {
    width: 100%;

  }
}

.x-example {
  &.tall200 .example-card .example {
    height: 200px;
  }
  &.no-padding .example-card .example {
    padding: 0;
  }
  .example-card {
    width: 100%;
    .example,
    .code {
      .hljs {
        margin: 0;
      }
      position: relative;
      margin: 20px;
      border: 1px solid #aaa;
      overflow: hidden;
    }

    .example {
      padding: 20px 5px;

    }
  }
}
.x-example.nav-bar-example .example {
  height: 200px;
}


.white-text {
  color: #fff;
}

@import "_color-definitions";

$color-primary: $palette-teal-500;
$color-accent: $palette-pink-A200;

@import "material-design-lite";

body {
  background-image: url('../images/paper_fibers.png');
}
// BEGIN-SNIPPET layout-transparent
.layout-transparent {
  background: url('../images/transparent.jpg') center / cover;
}
// END-SNIPPET

@media (max-width: 600px) {
  .x-example {
    width: 100%;

  }
}

.x-example {
  &.tall200 .example-card .example {
    height: 200px;
  }
  &.no-padding .example-card .example {
    padding: 0;
  }
  .example-card {
    width: 100%;
    .example,
    .code {
      .hljs {
        margin: 0;
      }
      position: relative;
      margin: 20px;
      border: 1px solid #aaa;
      overflow: hidden;
    }

    .example {
      padding: 20px 5px;

    }
  }
}
.x-example.nav-bar-example .example {
  height: 200px;
}


.white-text {
  color: #fff;
}

Fix image references in SCSS
Fix image references in SCSS
