style.css

/* Up Next (March 2018) */

@font-face {
  font-family: 'Circular Std';
  src: url('https://ellen.li/fonts/CircularStd-Bold.eot');
  src: url('https://ellen.li/fonts/CircularStd-Bold.woff2') format('woff2'),
       url('https://ellen.li/fonts/CircularStd-Bold.woff') format('woff'),
       url('https://ellen.li/fonts/CircularStd-Bold.ttf') format('truetype'),
       url('https://ellen.li/fonts/CircularStd-Bold.svg#CircularStd-Bold') format('svg'),
       url('https://ellen.li/fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: 900;
  font-style: normal;
}

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

html,body {
  font-family: 'Inconsolata', monospace;
  letter-spacing: 0px;
  font-size: 1em;
  line-height: 1.5em;
  color: #000;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  transition: all .25s;
  height: 100%;
  /* overflow-y: hidden; */
  margin: 0px;
}

::selection { /* WebKit/Blink Browsers */
  background: #2A87F8;
  color: #fff;
  opacity: 1;
}
::-moz-selection { /* Gecko Browsers */
  background: #2A87F8;
  color: #fff;
  opacity: 1;
}
h1,h2,h3,h4 {
  display: block;
  font-family: 'Circular Std', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  color: #000;
  line-height: 1.5em;
  text-align: left;
  z-index: 10;
}
h1 {
  font-size: 2em;
}
a,a:active,a:focus {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
  color: #000;
  outline: none;
}
a:hover {
  text-decoration: none;
  outline: none;
}

/* Page */

main {
  margin: 0 auto;
  max-width: 940px;
  display: grid;
  justify-items: center;
  height: 100%;
}
#container {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 15% 80%;
  grid-template-rows: auto;
  width: 460px;
  height: 100%;
  margin: 11em auto;
  grid-column-gap: 7%;
  grid-template-areas:
  "aside main"
  "aside main"
  ". main"
  ". main";
}
#container .aside {
  display: block;
  margin-top: 7px;
  background-image: url(./assets/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  width: 100%;
  height: 100%;
}
#app-store {
  display: inline-block;
  margin-top: 50px;
  background-image: url(./assets/appstore.svg);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  width: 200px;
  height: 67px;
}
.footer {
  margin-top: 0.9em;
}
/* MacOS */
#mac {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 31px;
  background-image: url(./assets/background@2x.png);
  background-size: contain;
}
#apple {
  position: absolute;
  top: 2px;
  left: 21px;
  width: 88px;
  height: 17px;
  background-image: url(./assets/apple@2x.png);
  background-size: contain;
}
#event-inactive {
  position: absolute;
  top: 5px;
  right: 347px;
  width: 186px;
  height: 14px;
  background-image: url(./assets/event@2x.png);
  background-size: contain;
}
#event-active, #event-inactive:hover {
  position: absolute;
  top: 0px;
  right: 336px;
  width: 209px;
  height: 22px;
  background-image: url(./assets/event-active@2x.png);
  background-size: contain;
}
#utilities {
  position: absolute;
  top: 3px;
  right: 23px;
  width: 306px;
  height: 16px;
  background-image: url(./assets/utilities@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#dropdown {
  position: absolute;
  top: 18px;
  right: 203px;
  width: 352px;
  height: 257px;
  background-image: url(./assets/event-dropdown@2x.png);
  background-size: contain;
  z-index: 10;
  display: block;
}

@media screen and (max-width: 580px) /* mobile */ {
  #mac, #apple, #utilities, #event-inactive, #event-active, #dropdown {
    display: none;
  }
  main {
    max-width: 100%;
    margin: 3em 1em 1em 1em;
  }
  #container {
    width: 100%;
    height: 100%;
    margin: auto;
    grid-template-columns: auto;
    grid-template-rows: 60px auto;
    grid-row-gap: 1.5em;
    grid-template-areas:
    "aside"
    "aside"
    "main"
    "main";
  }
  #container .aside {
    margin-top: 0px;
    background-image: url(./assets/logo.png);
    width: 100%;
    height: 100%;
  }
}