minimal

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://fontapi.s3.amazonaws.com/Idlewild/Idlewild.css">
<div class="wrapper" data-theme="purp">

<div class="box">
  <h1>
    <span class="anaglyph">
       <a href="https://github.com/nberlette">berlette.com</a>
    </span>
  </h1>
</div>
</div>

CSS

:root, body[data-theme="light"] {
  --background-color: #f4f4f4;
  --font-color: #333;
}
[data-theme="purp"] {
  --background-color: #333146 !important;
  --font-color: #eaeaff !important;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: linear-gradient(#222, #111);
    --font-color: #f4f4f4;
  }
}

body,html,.wrapper{
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}
body {
  z-index: -300;
}
html {
  z-index: -400;
  background: var(--background-color, #333);
}
.wrapper {
  z-index: -200;
}
.wrapper[data-theme="purp"] {
  --background-color: #333146 !important;
  --font-color: #eaeaff !important;
  background-color: var(--background-color) !important;
}
.wrapper[data-theme="light"] {
  --background-color: #eaeaff !important;
  --font-color: #333146 !important;
  background-color: var(--background-color) !important;
}
body .wrapper {
  background: transparent !important;
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  caret-color: transparent !important;
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  justify-self: center;
}
.box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column;
}
h1 {
  font-family: 'Idlewild', 'Idlewild SSm', 'IdlewildSSm';
  font-weight: 400;
  letter-spacing: -0.15em;
  font-size: 8vw;
  text-transform: uppercase;
  margin: 0em 0;
  padding: 0 0;
  flex: 1;
  flex-wrap: wrap;
  z-index: 100;
  text-shadow: 0 5px 0 rgba(0,0,0,0.2);
}
h1 a.anaglyph {
  	text-shadow: -0.05em 0 rgba(255, 0, 0, 0.5), 
  	    0.05em 0 rgba(0, 255, 255, 0.5);
}
h1, h1 a { 
  color: var(--font-color, #f4f4f4); 
  text-decoration: none;
}
h1.shadow {
  color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 5px -72px 10px rgba(0,0,0,0.4);
  z-index: 0 !important;
}
.wrapper[data-theme="light"] h1.shadow {
  opacity: 0.7;
}