CSS/SVG Lines App Concept

In this example below you will see how to do a CSS/SVG Lines App Concept with some HTML / CSS and Javascript

A CSS and SVG-only rework of an original Dribbble shot by Jakub Antalík. Works in Chrome and Firefox.

Thumbnail
This awesome code was written by davidkpiano, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright davidkpiano ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS/SVG Lines App Concept</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="route" id="welcome"></div>
<div id="app">
  <div class="app-view">  
    <header class="app-header">
      <h1>Lines</h1>
      Welcome back,<br/>
      <span class="app-subheading">
        sign in to continue<br/>
        to Lines.
      </span>
    </header>
    <input type="email" required pattern=".*\.\w{2,}" placeholder="Email Address" />
    <input type="password" required placeholder="Password" />
    <a href="#welcome" class="app-button">Login</a>
    <div class="app-register">
      Don't have an account? <a>Sign Up</a>
    </div>
    <svg id="svg-lines" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 284.2 152.7" xml:space="preserve">
      <path class="st0" d="M37.7,107.3h222.6c12,0,21.8,9.7,21.8,21.7s-9.7,21.8-21.8,21.8c0,0-203.6,0-222.6,0S2.2,138.6,2.2,103.3   c0-52,113.5-101.5,141-101.5c13.5,0,21.8,9.7,21.8,21.8s-9.7,21.7-21.8,21.7s-21.8-9.7-21.8-21.7s9.7-21.8,21.8-21.8"/>
      <path class="st1" d="M260.2,76.3L250,87.8l-9-9c-6.2-6.2,2-24.7,17.2-24.7c15.2,0,23.9,17.7,23.9,29.7s-11.7,23.5-23.9,23.5h-10.2"></path>
      <g class="svg-loader" xmlns="http://www.w3.org/2000/svg">
        <path class="svg-loader-segment -cal" d="M164.7,23.5c0-12-9.7-21.8-21.8-21.8"/>
        <path class="svg-loader-segment -heart" d="M143,45.2c12,0,21.8-9.7,21.8-21.7"/>
        <path class="svg-loader-segment -steps" d="M121.2,23.5c0,12,9.7,21.7,21.8,21.7"/>
        <path class="svg-loader-segment -temp" d="M143,1.7c-12,0-21.8,9.7-21.8,21.8"/>
      </g>
    </svg>
  </div>
  <div class="app-view">
    <header class="app-header">
      <div class="app-bar">      
        <div class="app-menu-icon"></div>
        <img class="app-avatar" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/Screen_Shot_2016-03-18_at_12.52.15_AM.png"/>
      </div>
      <h2>
        Welcome back Jana,<br/>
        Things look <em>alright</em>.
      </h2>
    </header>
    <section class="app-content">
      <div class="app-item">
        <div class="app-data">36.75&deg;</div>
        <div class="app-label">Temperature</div>
        <div class="app-graphic">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 102.7 21.4"  xml:space="preserve">
            <path class="svg-data -temp" d="M2,15.2c0,0,8.3-11.3,18.7-11.3s12.7,13.7,22,13.7S52,8.2,57,8.2s8.3,5,11.3,5s9.3-2.5,13-2.5   c3.7,0,5.3,4.2,9.7,4.2c4.3,0,9.7-9.7,9.7-9.7"/>
          </svg>
        </div>
      </div>
      <div class="app-item">
        <div class="app-data">537<span class="app-unit">cal</span></div>
        <div class="app-label">Calories Burned</div>
        <div class="app-graphic">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 102.7 21.4"  xml:space="preserve">
            <path class="svg-data -cal" d="M2,6.7c0,0,9.7,6.7,18.3,6.7s12.3-6.7,23.3-6.7c4.9,0,4-3.7,8.7-3.7c7,0,12,15.3,18.7,15.3   c6.7,0,8.7-6.8,13.3-6.8c4.7,0,5,4.5,8.7,4.5c3.7,0,7.7-4.5,7.7-4.5"/>
          </svg>
        </div>
      </div>
      <div class="app-item">
        <div class="app-data">7342</div>
        <div class="app-label">Steps</div>
        <div class="app-graphic">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 102.7 21.4"  xml:space="preserve">
            <line class="svg-data -steps-bg" x1="2" y1="10.7" x2="100.7" y2="10.7"/>
            <line class="svg-data -steps" x1="2" y1="10.7" x2="75" y2="10.7"/>
          </svg>
        </div>
      </div>
      <div class="app-item">
        <div class="app-data">87<span class="app-unit">bpm</span></div>
        <div class="app-label">Heart Rate</div>
        <div class="app-graphic">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 102.7 21.4"  xml:space="preserve">
            <path class="svg-data -heart" d="M101.3,18.1c-9.3,0-5-17.8-14-16.3c-6.3,1,5,18-11,18c-9.3,0-5-19.4-14-18c-6.3,1,5,18-11,18   c-9.3,0-5-19.4-14-18c-6.3,1,5,18-11,18c-9.3,0-5-19.4-14-18c-6.3,1,5,18-11,18"/>
          </svg>
        </div>
      </div>
    </section>
    <section class="app-activity">
      <header class="app-header">
        <h2>Moving activity</h2>
        <span class="app-tag -active">Today</span>
        <span class="app-tag">Avg</span>        
      </header>
      <div class="app-graph">
        <svg id="svg-graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 382.3 141.8" xml:space="preserve">
          <path class="svg-activity-fill" d="M263.4,56.5c-17,7.7-22.7,48.7-45.3,48.7s-23-104.7-52-104.7c-20.7,0-32.3,33.3-39.3,41.7    c-7,8.3-10.3,7.7-25.7,13.7s-26.3,33-43.3,33S5.8,14.5,0.3,14.5v127.3h263.2V56.5z"/>
          <path class="svg-activity-line" d="M0.3,14.5c5.5,0,40.5,74.3,57.5,74.3s28-27,43.3-33s18.7-5.3,25.7-13.7c7-8.3,18.7-41.7,39.3-41.7    c29,0,29.3,104.7,52,104.7s28.3-41,45.3-48.7"/>
          <path class="svg-activity-avg" d="M0.3,98.5c0,0,32.5,21.5,46.5,21.5s28.7-19.5,54.3-19.5s40,25,60.7,25s25.3-48,47.7-48s32,14,45.7,20.7    c13.7,6.7,17.3,2.3,27,5.7c9.7,3.3,25.3,14.7,34.7,14.7c9.3,0,24-2.3,30.3-2.3c6.3,0,29.3,2.3,35.2,2.3"/>
          <line class="svg-activity-indicator" x1="263.4" y1="141.8" x2="263.4" y2="0.5"/>
        </svg>
      </div>
    </section>
  </div>
</div>
<aside class="meta">
  <h1>CSS/SVG Lines App Concept</h1>
  <p>
    Dribbble Rework<br/>
    Original Shot by <a href="https://dribbble.com/shots/2580453-Health-App-Login">Jakub Antalík</a>
  </p>
  <p>
    Enter a valid email address and any password, then click <strong>Login</strong> to see the effect.
  </p>
  <p>
    Works in Chrome and Firefox.
  </p>
  
</aside>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/davidkpiano/csssvg-lines-app-concept-zqNJRY */
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
* {
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

#app {
  width: 50vh;
  height: 90vh;
  padding: 6vh;
  background: white;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

.app-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.app-header {
  padding: 6vh;
}
.app-header, .app-header > * {
  font-size: 4.8vh;
  margin: 0;
  font-weight: 300;
}
.app-header > h1 {
  font-size: 4.8vh;
  font-weight: 400;
  margin-bottom: 4.8vh;
}
.app-header > h2 {
  font-size: 3vh;
}

.app-subheading {
  color: rgba(0, 0, 0, 0.45);
}

.app-register {
  position: absolute;
  bottom: 0;
  height: 10vh;
  line-height: 10vh;
  padding: 0 6vh;
  color: rgba(0, 0, 0, 0.45);
}
.app-register > a {
  font-weight: 400;
}

input {
  font-size: 2.5vh;
  width: calc(100% - 13vh);
  height: 7.5vh;
  margin-bottom: 2vh;
  background: transparent;
  position: absolute;
  top: 0;
  left: 6.5vh;
  z-index: 2;
  border: none;
  box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
}
input:focus {
  outline: none;
  box-shadow: inset 0 -0.5vh transparent;
}
input[type="email"] {
  top: 58%;
}
input[type="password"] {
  top: calc(58% + 7.5vh);
}

input[type="email"]:valid ~ * .st1 {
  transition-timing-function: ease-in-out;
  stroke-dasharray: 50, 153;
  stroke-dashoffset: 25;
}

input[type="password"]:focus ~ * .st0,
input[type="password"]:valid ~ * .st0,
.app-button:focus ~ * .st0 {
  stroke-dasharray: 210, 900;
  stroke-dashoffset: -305;
}

input[type="email"]:focus ~ * .st0 {
  stroke-dasharray: 210, 900;
  stroke-dashoffset: 0;
}

input:not(:valid) ~ .app-button {
  pointer-events: none;
  opacity: 0.6;
}

.app-button {
  text-decoration: none;
  color: #0F9EDE;
  font-size: 4.8vh;
  padding: 0 6vh;
  position: absolute;
  bottom: 10vh;
  font-weight: 400;
}
.app-button:focus {
  outline: none;
}

@-webkit-keyframes button-press {
  from, 20% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  40%, to {
    opacity: 0;
  }
}

@keyframes button-press {
  from, 20% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  40%, to {
    opacity: 0;
  }
}
#welcome:target ~ * .app-button {
  -webkit-animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
          animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
#welcome:target ~ * .st0 {
  stroke-dashoffset: -760;
  stroke-dasharray: 140, 900;
  transition-duration: 1.2s;
  -webkit-animation: disappear 0s 1.3s both;
          animation: disappear 0s 1.3s both;
}
#welcome:target ~ * .st1 {
  transition-duration: 0.3s;
  opacity: 0;
}
#welcome:target ~ * .app-graphic {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
}
#welcome:target ~ * #svg-lines {
  -webkit-animation: pulse 0.5833333333s 1.2s ease-in-out both;
          animation: pulse 0.5833333333s 1.2s ease-in-out both;
  -webkit-animation-iteration-count: 3;
          animation-iteration-count: 3;
}
#welcome:target ~ * .svg-loader {
  -webkit-animation: appear 0s 1.2s both;
          animation: appear 0s 1.2s both;
}
#welcome:target ~ * .svg-loader-segment {
  transition-delay: 3.75s;
  opacity: 0;
}
#welcome:target ~ * .svg-loader-segment.-cal {
  -webkit-transform: translateX(4vh) translateY(-4vh);
          transform: translateX(4vh) translateY(-4vh);
  stroke: #08B5CF;
}
#welcome:target ~ * .svg-loader-segment.-heart {
  -webkit-transform: translateX(3.5vh) translateY(6.7vh);
          transform: translateX(3.5vh) translateY(6.7vh);
  stroke: #9965AA;
}
#welcome:target ~ * .svg-loader-segment.-steps {
  -webkit-transform: translateX(-6.9vh) translateY(5.2vh);
          transform: translateX(-6.9vh) translateY(5.2vh);
  stroke: #0F9EDE;
}
#welcome:target ~ * .svg-loader-segment.-temp {
  -webkit-transform: translateX(-14vh) translateY(-4vh);
          transform: translateX(-14vh) translateY(-4vh);
  stroke: #F4814B;
}
#welcome:target ~ * .svg-data {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  transition: opacity 0.6s 4.95s, stroke-dasharray 0.6s 4.95s, stroke-dashoffset 0.6s 4.95s, -webkit-transform 0.6s 4.95s;
  transition: transform 0.6s 4.95s, opacity 0.6s 4.95s, stroke-dasharray 0.6s 4.95s, stroke-dashoffset 0.6s 4.95s;
  transition: transform 0.6s 4.95s, opacity 0.6s 4.95s, stroke-dasharray 0.6s 4.95s, stroke-dashoffset 0.6s 4.95s, -webkit-transform 0.6s 4.95s;
}
#welcome:target ~ * .svg-data.-temp {
  stroke-dasharray: 118;
}
#welcome:target ~ * .svg-data.-cal {
  stroke-dasharray: 113;
}
#welcome:target ~ * .svg-data.-steps-bg, #welcome:target ~ * .svg-data.-steps {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
#welcome:target ~ * .svg-data.-heart {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}
#welcome:target ~ * .svg-activity-fill,
#welcome:target ~ * .svg-activity-line {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  transition-duration: 1.2s;
  transition-delay: 4.95s;
}
#welcome:target ~ * .app-view:nth-child(1) > :not(svg) {
  opacity: 0;
  pointer-events: none;
}
#welcome:target ~ * .app-view:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
}
#welcome:target ~ * .app-view:nth-child(2) > .app-header > *,
#welcome:target ~ * .app-view:nth-child(2) > .app-content,
#welcome:target ~ * .app-view:nth-child(2) > .app-activity,
#welcome:target ~ * .app-view:nth-child(2) .app-item,
#welcome:target ~ * .app-view:nth-child(2) .app-item > *:not(.app-graphic) {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 4.95s;
  opacity: 1;
}
#welcome:target ~ * .app-view:nth-child(2) > .app-activity {
  opacity: 1;
}
#welcome:target ~ * .app-view:nth-child(2) .app-item, #welcome:target ~ * .app-view:nth-child(2) > .app-content {
  border-color: #E3E3E3;
}

#welcome:not(:target) ~ * .app-graphic {
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

@-webkit-keyframes pulse {
  from, to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes pulse {
  from, to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes disappear {
  to {
    opacity: 0;
  }
}
@keyframes disappear {
  to {
    opacity: 0;
  }
}
@-webkit-keyframes appear {
  to {
    opacity: 1;
  }
}
@keyframes appear {
  to {
    opacity: 1;
  }
}
.app-view:nth-child(2) {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.app-view:nth-child(2) > .app-header {
  font-size: 1rem;
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4vh;
  padding-bottom: 1rem;
}
.app-view:nth-child(2) > .app-header > h2 {
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}
.app-view:nth-child(2) > .app-header > h2 > em {
  color: #0F9EDE;
  font-style: normal;
}
.app-view:nth-child(2) > .app-header > h2,
.app-view:nth-child(2) .app-item > *:not(.app-graphic) {
  transition-duration: 0.9s;
  opacity: 0;
}
.app-view:nth-child(2) > .app-content {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-wrap: wrap;
  flex-basis: 40%;
  border: 1px solid transparent;
  border-left: none;
  border-right: none;
}
.app-view:nth-child(2) > .app-activity {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  opacity: 0;
}
.app-view:nth-child(2) > .app-activity > .app-header {
  padding: 4vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.app-view:nth-child(2) > .app-activity > .app-header > h2 {
  flex-grow: 1;
}
.app-view:nth-child(2) > .app-activity > .app-graph {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.app-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  opacity: 0;
}

.app-item {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  border: 1px solid transparent;
  padding: 2vh 4vh;
  padding-bottom: 0;
}
.app-item > *:not(.app-graphic) {
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}
.app-item:nth-child(1) .app-graphic {
  -webkit-transform: translateX(17vh) translateY(5vh);
          transform: translateX(17vh) translateY(5vh);
}
.app-item:nth-child(2) .app-graphic {
  -webkit-transform: translateX(-4vh) translateY(4vh);
          transform: translateX(-4vh) translateY(4vh);
}
.app-item:nth-child(3) .app-graphic {
  -webkit-transform: translateX(6vh) translateY(-7vh);
          transform: translateX(6vh) translateY(-7vh);
}
.app-item:nth-child(4) .app-graphic {
  -webkit-transform: translateY(-8vh) translateX(-4vh);
          transform: translateY(-8vh) translateX(-4vh);
}

.app-graphic {
  transition: opacity 0.6s 4.35s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s 4.35s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s 4.35s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1);
  margin-top: 1rem;
  opacity: 0;
}

.app-data {
  font-size: 2rem;
}

.app-unit {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.45);
}

.app-label {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
}

.app-menu-icon {
  width: 1.5rem;
  height: 2px;
  background: #D0DFF0;
  margin-top: 0.5rem;
}
.app-menu-icon:before, .app-menu-icon:after {
  content: '';
  display: block;
  position: absolute;
  width: 1rem;
  height: 100%;
  background: #D0DFF0;
}
.app-menu-icon:before {
  top: -0.5rem;
  right: 0.1rem;
}
.app-menu-icon:after {
  top: 0.5rem;
  left: 0.1rem;
}

.app-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
}

.app-tag {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.45);
}
.app-tag + .app-tag {
  margin-left: 1rem;
}
.app-tag:before {
  content: '';
  display: inline-block;
  margin-right: 0.5rem;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  background: #D0DFF0;
}
.app-tag.-active:before {
  background: #0F9EDE;
}

body {
  font-family: Lato, sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: #8A9AAE;
}

.st0, .st1, .svg-loader-segment {
  fill: none;
  stroke: #0F9EDE;
  stroke-width: 0.5vh;
  stroke-alignment: inside;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.svg-loader {
  opacity: 0;
}

.st0 {
  stroke-dasharray: 0, 900;
  stroke-dashoffset: 0;
}

.st1 {
  transition-delay: 0.3s;
  stroke-dasharray: 50, 153;
  stroke-dashoffset: -153;
}

.svg-loader-segment {
  transition: opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

#svg-lines {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  z-index: 0;
  overflow: visible;
  -webkit-transform-origin: center 4vh;
          transform-origin: center 4vh;
}

.svg-data {
  fill: none;
  stroke-width: 0.5vh;
}
.svg-data.-temp {
  stroke: #F4814B;
  stroke-dasharray: 20, 118;
}
.svg-data.-cal {
  stroke: #08B5CF;
  stroke-dasharray: 20, 113;
}
.svg-data.-steps-bg {
  stroke: #E0E1E0;
  stroke-dasharray: 40, 100;
  stroke-dashoffset: -60;
}
.svg-data.-steps {
  stroke: #0F9EDE;
  stroke-dasharray: 20, 73;
  stroke-dashoffset: -53;
}
.svg-data.-heart {
  stroke: #9965AA;
  stroke-dasharray: 50, 200;
  stroke-dashoffset: -150;
}

.svg-activity-fill {
  fill: #C4E4F8;
}

.svg-activity-line {
  fill: none;
  stroke: #65BCEA;
  stroke-miterlimit: 10;
  stroke-width: 0.25vh;
}

.svg-activity-avg, .svg-activity-indicator {
  fill: none;
  stroke: #D0DFF0;
  stroke-width: 0.25vh;
  mix-blend-mode: multiply;
}

.svg-activity-fill, .svg-activity-line {
  -webkit-transform: translateY(10vh);
          transform: translateY(10vh);
  opacity: 0;
}

html, body {
  font-size: 2.5vh;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.meta {
  flex-basis: calc(80% - 50vh);
}
.meta > * {
  transition: none !important;
}
.meta > h1 {
  font-weight: 300;
  font-size: 32px;
  color: white;
}
.meta > p {
  line-height: 1.3;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
.meta a {
  color: rgba(255, 255, 255, 0.6);
}
.meta a:hover {
  color: white;
}
@media (max-width: 750px) {
  .meta {
    display: none;
  }
}

.route {
  display: none;
}

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

Comments