typography-vertical-rhythym-guide.scss

//source:https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600);

$container-width: 750px;
$container-height: 440px;

$base-font-size: 1rem;
$base-line-height: 1.25 * $base-font-size;

$type-settings: (
  -1: (
    font-size: 0.75rem,
    line-height: $base-line-height
  ),
  0: (
    font-size: 1rem,
    line-height: $base-line-height
  ),
  1: (
    font-size: 1.333rem,
    line-height: $base-line-height * 2
  ),
  2: (
    font-size: 1.778rem,
    line-height: $base-line-height * 2
  )
);

@function type-scale($level) {
  @return map-get(
    map-get($type-settings, $level), 'font-size');
}

@function line-height($level) {
  @return map-get(
    map-get($type-settings, $level), 'line-height');
}

@mixin type-setting($level) {
  font-size: type-scale($level);
  line-height: line-height($level);
}

$recipe-colors: (
  'primary': #5ad485,
  'background': #e1e1e1,
  'gray': #999,
  'border': #ccc
);

@function recipe-color($name) {
  @return map-get($recipe-colors, $name);
};

.baseline-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  
  &:hover {
    opacity: 1;
  }
}

.guide {
  margin-bottom: 5 * $base-line-height;
  
  &, &:before, &:after {    
    height: $base-line-height;
    width: 100%;
    outline: 1px solid turquoise;
  }
  
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    top: 200%;
  }
  
  &:after {
    top: 400%;
  }
}

.recipe-container {
  font-family: Raleway, sans-serif;
  font-weight: 400;
  width: $container-width;
  height: $container-height;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 0 5rem rgba(black, 0.1);
  
  &:hover {
    > .baseline-grid {
      opacity: 1;
    }
  }
}

.recipe-image {
  position: absolute;
  width: auto;
  height: 100%;
  left: 0;
  top: 0;
}

.recipe-content {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  padding: $base-line-height * 2 1rem;
}

.heading-2 {
  @include type-setting(-1);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 4px;
  color: recipe-color('gray');
}

.heading-1 {
  @include type-setting(2);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 1 * $base-line-height 0;
}

.paragraph {
  @include type-setting(0);
  margin: 0 0 $base-line-height 0;
}

.recipe-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  
  &.meta {
    > .recipe-item {
      display: inline-block;
      padding-right: 2rem;
    }
  }
}

.recipe-item {
  padding: 0 1rem;
  
  &:first-child {
    padding-left: 0;
  }
  
  > .recipe-value {
    @include type-setting(1);
    font-weight: bold;
  }
  
  > .recipe-text {
    @include type-setting(-1);
  }
  
  & + & {
    border-left: 1px solid recipe-color('border');
  }
}

.recipe-stars {
  line-height: $base-line-height * 2;
  margin: $base-line-height * 1 0;
  font-size: type-scale(0);
  line-height: line-height(0) * 2;
}

.recipe-star {
  height: auto;
  width: auto;
  display: inline-block;
  
  &:before {
    content: '\2605';
    color: gold;
  }
  
  &.inactive:before {
    color: gray;
  }
}

.recipe-ratings {
  color: gray;
  margin: 0 0.5rem;
}

.recipe-button {
  appearance: none;
  background-color: recipe-color('primary');
  color: white;
  border: none;
  height: $base-line-height * 2;
  padding: 0 1rem;
  border-radius: $base-line-height;
  font-size: type-scale(-1);
  
  &.transparent {
    background-color: transparent;
    color: gray;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: recipe-color('background');
}