Add new design

[rbdr/r.bdr.sh] / jekyll / css / application.css

/*********************
 * Gontcharova Theme *
 *********************/

body {
  margin: 0;
  background-color: #D1C5B0;
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  flex-flow: row nowrap;
  transition: all 0.5s ease-in-out;
}

header {
  margin-top: -20px;
}

.content-wrapper {
  margin: 100px 0 0 10px;
  width: 45vw;
}

header a, header a:visited {
  font-family: 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, Freesans, sans-serif;
  font-weight: 100;
  font-size: 96px;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

h1 {
  font-family: 'Bodoni 72', 'Century Schoolbook L', 'Rockwell Nova', serif;
  font-weight: 300;
  font-size: 48px;
}

ul, p {
  font-size: 16px;
  font-weight: 300;
}

ul {
  list-style: square;
}

ul a,
p a {
  text-transform: lowercase;
  font-weight: 600;
  color: #C7434B;
}

ul a:visited,
p a:visited {
  color: #551C22;
}

ul a:hover,
p a:hover {
  color: #933B3C;
}

ul a:active,
p a:active {
  color: #A9938F;
}

ul span,
p span {
  font-style: oblique;
  color: #9E7764;
}

@media only screen and (max-width: 1024px) {
  header a {
    font-size: 72px;
  }
}

@media only screen and (max-width: 700px) {
  body {
    flex-flow: column wrap;
  }

  header {
    width: 45vw;
  }

  .content-wrapper {
    margin: 20px;
    width: auto;
  }
}

/************
 * Tapestry *
 ************/

.orangered { background-color: #C84A0A; }
.red { background-color: #C7434B; }
.brown { background-color: #551C22; }
.redbrown { background-color: #933B3C; }
.lightbrown { background-color: #9E7764; }
.grey { background-color: #A9938F; }
.sand { background-color: #D2BE9A; }

.tapestry {
  order: -1;
}

.tapestry,
.tapestry div {
  transition: all 0.5s ease-in-out;
}

/* Large Tapestry */

.tapestry {
  max-width: 42vw;
  max-height: 42vw;
  display: flex;
  flex-flow: row wrap;
  margin: 100px 0 0 100px;
}


.red {
  width: 14vw;
  height: 14vw;
}

.red:hover {
  margin: 3.5vw;
  width: 7vw;
  height: 7vw;
}

.brown,
.orangered,
.grey {
  width: 14vw;
  height: 28vw;
}

.grey:hover {
  width:7vw;
}

.sand {
  width: 42vw;
  height: 14vw;
}

.sand:hover {
  height: 2vw;
}

.redbrown {
  width: 7vw;
  height: 14vw;
}

.redbrown:hover {
  margin-bottom: 7vw;
}

.lightbrown {
  width: 7vw;
  height: 7vw;
}

.lightbrown:hover {
  height: 28vw;
}

.brown {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-end;
  align-items: flex-end;
}

@media only screen and (max-width: 1024px) {
  .tapestry {
    max-width: 32vw;
  }

  .red {
    width: 32vw;
    height: 4vw;
  }

  .red:hover {
    margin: 0;
    width: 64vw;
    height: 16vw;
  }

  .orangered {
    width: 16vw;
    height: 20vw;
  }

  .brown {
    width: 32vw;
    height: 16vw;
  }

  .redbrown {
    width: 16vw;
    height: 16vw;
    position: relative;
    top: -16vw;
    left: 16vw;
  }

  .lightbrown {
    width: 8vw;
    height: 8vw;
  }

  .grey {
    height: 16vw;
    width: 24vw;
  }

  .sand {
    width: 8vw;
    height: 32vw;
  }
}

@media only screen and (max-width: 700px) {
  .tapestry {
    max-width: 80vw;
    max-height: 8vw;
    margin: 0px;
    flex-flow: column wrap;
  }

  .red {
    width: 4vw;
    height: 4vw;
  }

  .red:hover {
    width: 24vw;
    height: 24vw;
  }

  .orangered {
    width: 16vw;
    height: 8vw;
  }

  .brown {
    width: 32vw;
    height: 8vw;
  }

  .redbrown {
    width: 24vw;
    height: 4vw;
    position: relative;
    top: 0;
    left: 0;
  }

  .lightbrown {
    width: 8vw;
    height: 32vw;
  }

  .lightbrown:hover {
    height: 1vw;
  }

  .grey {
    height: 4vw;
    width: 38vw;
  }

  .sand {
    width: 8vw;
    height: 32vw;
  }

  .sand:hover {
    width: 10vw;
    height: 6vw;
  }
}