eggheadio-projects/SassyEgghead: null

node_modules/
css/
.idea
.DS_Store
npm-debug.log

# Intro to SCSS

This repository supports the [egghead](https://egghead.io/) course on SCSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SassyEgghead</title>
    <link rel="stylesheet" href="scss/main.css">
</head>
<body>
    <div class="wolverine">
        <img src="images/wolverine.gif">
        <p class="wolverine-text">Wolverine</p>
    </div>
</body>
</html>

{
  "name": "Sassy-Egghead",
  "version": "0.0.1",
  "description": "Learn the Best and Most Useful SCSS Egghead Course Repo",
  "devDependencies": {
    "node-sass": "^3.11.2"
  },
  "scripts": {
    "start": "node-sass -o css scss --output-style expanded"
  },
  "author": "Ari Picker",
  "license": "UNLICENSED"
}

$base-color: #a83b24;
$light-color: lighten($base-color, 20%);
$dark-color: darken($base-color, 35%);

.old-light-dark {
  background-image: linear-gradient($light-color, $base-color, $dark-color);
}

$light-color: scale_color($base-color, $alpha: -50%);
$dark-color: scale_color($base-color, $saturation: -35%);

$cbc: complement($base-color);
$clc: complement($light-color);
$cdc: complement($dark-color);

.wolverine {
  text-align: center;
  background-image: linear-gradient($light-color, $base-color, $dark-color);

  &:hover {
    background-image: linear-gradient($clc, $cbc, $cdc);
    .wolverine-text {
      color: transparentize(mix($base-color, yellow, 25%), .2);
    }
  }

  &-text {
    font-size: 1.5rem;
    padding-bottom: 1rem;
    color: mix($base-color, yellow, 75%);
  }

  img {
    margin-top: 3rem;
    border-radius: 50%;
  }
}

@import "built-in-functions/_built-in-functions.scss";

.spiderman {
  padding: 1rem 2rem;
  transition: transform .8s ease-in-out;

  &-container:hover & { transform: rotate(180deg); }
  &-container { background-color: #dbbebe; }

  &::before {
    display: block;
    content: url('../images/spiderman-icon.png');
  }

  img {
    transition: transform .8s ease-in-out;
    &:hover { transform: rotate(360deg); }
  }

  .description {
    color: darkred;
    text-align: center;
    margin-top: 1rem;

    .header { font-size: 2rem; }
  }

  .description-link {
    text-decoration: none;

    &::after {
      content: url('../images/spiderman-ok.jpg');
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.blue { color: $yellow; }

.blue { color: lighten(blue, 35%); }
$yellow: yellow;

.cool { color: rebeccapurple; }

$color-text-default:      #424954;
$color-text-light:        #EBEBEB;
$color-text-muted:        #989898;

$color-primary:           #8465D9;
$color-danger:            #E83043;
$color-success:           #3DC123;
$color-info:              #CFFF32;
$color-warning:           #FFB62F;

$font-family-primary:     Roboto, 'Open Sans', Helvetica Neue, sans-serif;
$font-family-secondary:   Georgia, Times New Roman, serif;
$font-family-monospace:   Menlo, Monaco, Consolas, monospace;
$font-family:             $font-family-primary;

$font-size-base:          14px;
$font-size-large:         18px;
$font-size-small:         12px;

$font-size-h1:            36px;
$font-size-h2:            30px;
$font-size-h3:            24px;
$font-size-h4:            $font-size-large;
$font-size-h5:            $font-size-base;
$font-size-h6:            $font-size-small;

$captain-marvel: green;
$wom: women-of-the-marvel-universe;

.#{$wom} { content: "#{$wom}"; }

.#{$wom}-text { color: $color-text-muted; }
.#{$wom}-cape { background-color: $color-primary; }
img { border: 1px dotted $captain-marvel; }

.elektra {
  $elektra: purple;
  $captain-marvel: blue;

  color: $captain-marvel;
  border: 1px solid $elektra;
  font-size: $font-size-h1;
}

.fancy { color: $captain-marvel; }