_skinny.scss

// -----------------------------------------------------------------------------
// Basic Resetting
// -----------------------------------------------------------------------------
html {
  box-sizing: border-box;
  max-width: 100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
// -----------------------------------------------------------------------------
// Grid Container Settings
// -----------------------------------------------------------------------------
.s-grid {
  display: flex;
  max-width: 100vw;
}
.s-picture-Grid,
.s-photo-grid {
  display: flex;
  flex-flow: row wrap;
}
.s-nav-grid {
  display: inline-flex;
}
nav.nav-container {
  position: relative;
  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    li {
      position: relative;
    }
    ul {
      z-index: 100;
      position: absolute;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 0.5s,
      opacity 0.5s linear;
    }
  }
  a {
    text-align: center;
    line-height:50px;
    text-decoration: none;
    display: block;
    flex:1;
    transition: color .6s,background-color 1s;
  }
}
.nav-container li:hover > ul {
  visibility: visible;
  opacity:1;
  transition-delay: 0s;
}
.s-wrapper {
  background: #000;
  border:1px white solid;
  color: white;
  text-align: center;
  width: 100%;
  padding: .8em;
}
.direction-row {
  flex-direction: row;
}
.direction-column {
  flex-direction: column;
}
.wrap {
  flex-wrap: wrap;
}
// -----------------------------------------------------------------------------
// Grid Item Settings
// -----------------------------------------------------------------------------
.s-nav-item {
  flex: 0 1 auto;
  flex-basis: 200px;
}
.s-block {
  flex:1;
}
.s-picture-block {
  width:200px;
  flex:auto;
}
.s-photo-block {
  position: relative;
  overflow:hidden;
  flex:auto;
  background: #000;
  img {
    max-width: none;
    width:100%;
    height:100%;
    opacity:0.6;
    transform: scale(1.1);
  }
  figcaption {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    padding:3em;
    cursor: pointer;
    &:hover p{
      opacity: 1;
      transform: translateY(0px);
    }
    span,h2,p {
      color:white;
    }
    div {
      position: absolute;
      left:0;
      bottom: 0;
      padding: 2em 2em 5em 2em;
      width: 100%;
    }
    span {
      z-index: 1000;
      text-indent: 200%;
      white-space: nowrap;
      font-size: 0;
      opacity: 0;
    }
    p {
      opacity: 0;
      line-height: 2;
      transform: translateY(100px);
      transition: transform 1s ease-in-out,opacity 2s ease;
    }
  }
}
.s-grid > .s-full-height {
  display: flex;
}
.full-width {
  flex: 0 0 100%;
}
.half-width {
  flex: 0 0 50%;
}
.three-of-one {
  flex: 0 0 33.33333%;
}
.four-of-one {
  flex: 0 0 25%;
}
.six-of-one {
  flex: 0 0 16.666666667%;
}
.image {
  position: relative;
  width: 100%;
  height: auto;
  background-color:#000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
// -----------------------------------------------------------------------------
// Functional Settings
// -----------------------------------------------------------------------------
.align-top {
  align-self: flex-start;
}
.align-center {
  align-self: center;
}
.align-bottom {
  align-self: flex-end;
}
.justify-center {
  justify-content: center;
}
.align-end {
  justify-content: flex-end;
}
.align-center {
  align-items: center;
}
.grid-top {
  align-items: flex-start;
}
.grid-center {
  align-items: center;
}
.grid-bottom {
  align-items: flex-end;
}
.center {
  justify-content: center;
  align-items: center;
}
.sm-gutter > .s-block {
  padding:.8em ;
}
.md-gutter > .s-block {
  padding:1em ;
}
.lg-gutter > .s-block {
  padding:1.2em ;
}
// -----------------------------------------------------------------------------
// Font And Size Settings
// -----------------------------------------------------------------------------
figcaption.s-block {
  h2 {
    padding: 5px 0;

  }
}
.s-picture-block p {
  font-size: 15px;
  line-height: 1.4;
  padding-bottom: 15px;
  color: black;
}
.s-block h2 {
  font-size: 20px;
}
p {
  font-size: .8em;
}
// -----------------------------------------------------------------------------
// Media Query
// -----------------------------------------------------------------------------
@media (max-width: 900px) {
  .sm-gutter>.s-block {
    padding: 1em .5em;
  }
}
@media (max-width: 500px) {
  .navigation {
    display: none;
  }
}
@media (min-width:768px) {
  .s-photo-block {
    width: 500px;
  }
}