<div class="content">
  <span class="title emoji">👨🏼‍💻</span>
  <h1 class="title">Martin Wolf</h1>
  <h2 class="subtitle">Frontend Web Developer from Germany</h2>
  
  <p class="text">Recent projects I was part of are <a href="https://www.artek.fi">artek.fi</a>, <a href="https://jungfrau.ch">jungfrau.ch</a>, <a href="https://deutschewildtierstiftung.de">deutschewildtierstiftung.de</a> and <a href="http://hamburg-ahoi.com">hamburg-ahoi.com</a> amongst others.</p>

  <ul class="link-list">
    <li class="link-list__item">
      🚀
    </li>
    <li class="link-list__item">
      <a href="mailto:hello@martinwolf.org">E-Mail</a>
    </li>
    <li class="link-list__item">
      <a href="https://visuellegedanken.de">Blog</a>
    </li>
    <li class="link-list__item">
      <a href="https://twitter.com/_martinwolf">Twitter</a>
    </li>
    <li class="link-list__item">
      <a href="https://www.youtube.com/channel/UCAu47gX3vv3okDk-uiWAT-w">YouTube</a>
    </li>
  </ul>
</div>
$bp-small: 500px;
$bp-medium: 800px;

@function strip-unit($number) {
	@if type-of($number) == "number" and not unitless($number) {
		@return $number / ($number * 0 + 1);
	}

	@return $number;
}

@mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: 1680) {
	@each $property in $properties {
		#{$property}: $min-value;
	}

	@media (min-width: $min-vw) {
		@each $property in $properties {
			#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
		}
	}

	@media (min-width: $max-vw) {
		@each $property in $properties {
			#{$property}: $max-value;
		}
	}
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: darkblue;
  text-decoration: none;
  
  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

.content {
  width: 100%;
  max-width: 600px;
  animation: fadein 0.3s;
}

.emoji {
  display: block;
  @include fluid(margin-bottom, 16px, 26px);
}

.title {
  @include fluid(font-size, 30px, 50px);
}

.subtitle {
  @include fluid(font-size, 20px, 34px);
  font-weight: normal;
  margin-top: 4px;
}

.text,
.link-list {
  @include fluid(font-size, 16px, 20px);
  @include fluid(margin-top, 16px, 26px);
  line-height: 1.6;
}

.link-list {
  display: flex;
  list-style: none;
}

.link-list__item {
  @include fluid(margin-right, 10px, 20px);
}
View Compiled
Rerun