empire2018.scss

$grid-color: #e7e7e7;
$light-gray: #eee;
$gray: #333;
$light-yellow: #f8f5d7;
$yellow: #f8e71c;
$pink: #f832af;
$blue: #2d91c7;
$black: #000;
$white: #fff;

@font-face {
  font-family: "Bitmap Sketch 3D";
  src: url("BitmapSketch3D.ttf");
}

@font-face {
  font-family: "Bitmap Sketch Hatch Fill";
  src: url("BitmapSketchHatchFill.ttf");
}

body {
  font-family: "Andale Mono", monospace;
  color: $black;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

body:not(.user-is-tabbing) a:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) button:focus {
  outline: none;
}

h1 {
  font-family: "Bitmap Sketch 3D";
  font-size: 8em;
  font-weight: lighter;
  margin-bottom: 36px;
  margin-left: 16px;
  margin-right: 16px;

  span {
    display: inline-block;
  }
}

h2 {
  font-family: "Bitmap Sketch Hatch Fill";
  color: $gray;
  text-transform: uppercase;
  font-size: 2em;
  text-align: center;
  position: relative;

  span {
    position: relative;
  }
}

h3 {
  font-family: "Bitmap Sketch Hatch Fill";
  color: $black;
  font-family: "Bitmap Sketch Hatch Fill";
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 400;
}

p {
  line-height: 1.5em;
}

form {
  text-align: center;
}

.map {
  height: 400px;
  width: 100%;
}

.text-section {
  margin: 64px 16px;
}

.ticket-button-section,
.vote-button-section {
  text-align: center;
}

.vote-button-section h2 {
  margin-bottom: 80px;
}

.legal-pad-background {
  background-color: $light-yellow;
  background-image: linear-gradient($grid-color 1px, transparent 1px),
    linear-gradient(90deg, $grid-color 1px, transparent 1px),
    linear-gradient($grid-color, 1px, transparent 1px),
    linear-gradient(90deg, $grid-color 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-inline-block {
  display: inline-block;
}

.wrapper {
  padding: 20px 0;
}

.content {
  max-width: 968px;
  margin: 0 auto;
}

header {
  text-align: center;
  position: relative;
}

nav {
  height: 30px;
  position: relative;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}

nav li {
  padding: 0 15px;
  display: inline-block;
}

a {
  color: $black;
  text-decoration: none;
  background-image: linear-gradient(-100deg, $white, $white, $white);
  &:hover {
    background-image: linear-gradient(-100deg, $yellow, $yellow, $yellow);
  }
}

li:nth-child(4n + 1) a,
a:nth-child(4n + 1):not(.button) {
  border-radius: 20px 5px 30px 10px;
}
li:nth-child(4n + 2) a,
a:nth-child(4n + 2):not(.button) {
  border-radius: 50px 3px 20px 8px;
}
li:nth-child(4n + 3) a {
  border-radius: 10px 35px 10px 20px;
}
li:nth-child(4n + 4) a {
  border-radius: 35px 10px 50px 20px;
}

.date {
  font-size: 1.5em;
}

.scribble {
  position: absolute;
}

.scribble--form {
  position: absolute;
  transform: translateX(-8px);
}

.scribble--coc {
  position: absolute;
  transform: translateX(-16px);
}

.scribble--speakers {
  position: absolute;
  transform: translateX(-12px) translateY(-24px);
}

.scribble--hotel {
  position: absolute;
}

.scribble--scholarship {
  position: absolute;
  transform: translateY(10px);
}

.scribble--sponsors {
  position: absolute;
  transform: translateX(-40px) translateY(-50px);
}

.button {
  border: solid 3px $black;
  background: transparent;
  padding: 5px;
  font-size: 1.5rem;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-family: inherit;
  margin-top: 8px;

  &:hover {
    cursor: pointer;
  }
}

.speakers-list,
.sponsors-list {
  padding-left: 0;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.speaker-box,
.sponsor-box {
  flex: 1;
  width: 33%;
  list-style: none;
}

.speaker-photo,
.sponsor-logo {
  width: 275px;
  box-sizing: border-box;
}

.speaker-name {
  margin-top: 0;
}

.button--big {
  font-size: 2em;
  background: $yellow;
  box-shadow: 1em 10px $blue, -10px -1em $pink;
}

input:not(.button) {
  border: none;
  border-bottom: solid 3px $black;
  background: transparent;
  padding: 5px;
  width: 50%;
  font-family: inherit;
  font-size: 1em;

  &::placeholder {
    text-transform: uppercase;
  }
}

ul {
  line-height: 1.5em;
}

.sponsors-list a {
  background-image: none;
  &:hover {
    background-image: none;
  }
}

.sponsor-logo {
  background: $white;
  margin-top: 10px;
}

.add-padding {
  padding: 15px;
}

.schedule {
  margin-bottom: 1rem;
  display: none;
}

.schedule-day-list .schedule-day-item {
  padding: 0.5rem 2.5rem;
}
.schedule-day-item {
  background-color: $gray;
  color: $white;
  text-decoration: none;
  & > .schedule-day-list__title {
    color: $white;
  }
}

.schedule-announcement {
  text-align: center;
}

.schedule-day-item--active {
  background-color: $yellow;
  color: $gray;
  position: relative;
  & > .schedule-day-list__title {
    color: $gray;
  }
  &::before {
    border: none;
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    border-top: 0.8rem solid $yellow;
    position: absolute;
    bottom: -0.8rem;
    left: 40%;
  }
}

.schedule-day-list__title {
  margin-bottom: 1rem;
}

.schedule-day-list__date {
  font-weight: normal;
}

.schedule-time {
  background: $pink;
  color: $white;
  text-align: center;
  padding: 0.25rem;
  margin: 0.5rem 0;
}

.schedule-session {
  position: relative;
  min-height: 160px;
  display: flex;
}

.schedule-session .schedule-speaker__name {
  margin-bottom: 1rem;
  text-transform: none;
  color: $blue;
  padding-top: 0;
  margin-top: 0;
}

.schedule-session > .h-schedule-session {
  margin-bottom: 0.5rem;
}

.schedule-session .schedule-speaker__photo {
  margin-right: 40px;
  margin-top: 25px;
  margin-left: 25px;
  width: 8rem;
  height: 8rem;
  border-radius: 4rem;
  box-shadow: 1em 10px $yellow, -10px -1em $blue;
}

.glossary li {
  list-style: none;
}

.glossary-talk {
  margin-bottom: 4em;

  h3 {
    margin-bottom: 5px;
  }

  h4 {
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 6em;
  }

  nav ul {
    margin-bottom: 32px;
  }

  nav li {
    text-align: right;
    display: block;
    margin-bottom: 8px;
  }
  input {
    width: 270px;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 5em;
  }

  .button--big {
    font-size: 1.5em;
  }

  input[type="email"] {
    width: 90%;
  }

  .speakers-list,
  .sponsors-list {
    display: block;
  }

  .speaker-box,
  .sponsor-box {
    width: 100%;
  }

  .schedule-session {
    display: block;
    text-align: center;

    div {
      text-align: left;
    }
  }
}