baseunit
Version:
131 lines (116 loc) • 5.42 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>mediaSize Test</title>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #000;
color: #fff;
text-transform: uppercase;
line-height: 1.5;
padding: 10rem;
margin: 0 auto;
font-family: 'Arial Narrow', sans-serif;
font-size: 2rem;
max-width: 90rem;
word-break: break-all;
text-align: justify;
}
header {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
font-family: arial, sans-serif;
font-weight: bold;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 5rem;
font-size: 1rem;
letter-spacing: 0.2rem;
}
header > div {
}
h2 {
font-size: 4rem;
line-height: 1;
font-family: 'Arial Black', sans-serif;
}
p a {
display: inline-block;
font-family: 'Arial Black';
color: #fff;
text-decoration: none;
padding: 0 4rem;
position: relative;
z-index: 2;
-moz-transform: scaleY(1.5);
-webkit-transform: scaleY(1.5);
}
p a:after {
content: '';
position: absolute;
left: 0;
bottom: 0.4rem;
right: 0;
height: 0.1rem;
background: #fff;
}
p a:hover:after {
bottom: auto;
top: 50%;
}
.git-link {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
</style>
</head>
<body>
<header>
<div>b</div>
<div>a</div>
<div>s</div>
<div>e</div>
<div>u</div>
<div>n</div>
<div>i</div>
<div>t</div>
</header>
<h2>Edward Vesala born Martti Vesala, was a Finnish avant-garde jazz composer, bandleader and drummer.</h2>
<p>Born in <a href="http://en.wikipedia.org/wiki/M%C3%A4ntyharju" title="Mäntyharju">Mäntyharju</a>, he began as a drummer playing jazz and rock in the 1960s, among all in such bands as the early line-up of <a href="http://en.wikipedia.org/wiki/Blues_Section" title="Blues Section">Blues Section</a> and <a href="http://en.wikipedia.org/wiki/Apollo_(band)" title="Apollo (band)">Apollo</a>. In the 1970s, he led his own jazz groups, led a quartet with Polish trumpet player <a href="http://en.wikipedia.org/wiki/Tomasz_Sta%C5%84ko" title="Tomasz Stańko">Tomasz Stańko</a>, played with <a href="/w/index.php?title=Toto_Blanke&action=edit&redlink=1" class="new" title="Toto Blanke (page does not exist)">Toto Blanke</a>'s <a href="/w/index.php?title=Toto_Blanke&action=edit&redlink=1" class="new" title="Toto Blanke (page does not exist)">Electric Circus</a>, and recorded with Norwegian saxophonist <a href="http://en.wikipedia.org/wiki/Jan_Garbarek" title="Jan Garbarek">Jan Garbarek</a>. In the 1980s and 1990s, Vesala recorded several albums of his own compositions exhibiting a unique style that combines <a href="http://en.wikipedia.org/wiki/Jazz" title="Jazz">jazz</a>, <a href="http://en.wikipedia.org/wiki/European_classical_music" title="European classical music" class="mw-redirect">classical music</a>, <a href="http://en.wikipedia.org/wiki/Tango_music" title="Tango music">tango</a>, and <a href="http://en.wikipedia.org/wiki/Folk_music" title="Folk music">folk music</a> with his own group Sound & Fury, which was an ensemble of about ten players made up mostly of Vesala's students. Prominent players in Sound and Fury included saxophonists <a href="/w/index.php?title=Jorma_Tapio&action=edit&redlink=1" class="new" title="Jorma Tapio (page does not exist)">Jorma Tapio</a> and <a href="/w/index.php?title=Pepa_P%C3%A4ivinen&action=edit&redlink=1" class="new" title="Pepa Päivinen (page does not exist)">Pepa Päivinen</a>, guitarists <a href="http://en.wikipedia.org/wiki/Raoul_Bj%C3%B6rkenheim" title="Raoul Björkenheim">Raoul Björkenheim</a> and <a href="/w/index.php?title=Jimi_Sum%C3%A9n&action=edit&redlink=1" class="new" title="Jimi Sumén (page does not exist)">Jimi Sumén</a>, and harpist and keyboardist <a href="http://en.wikipedia.org/w/index.php?title=Iro_Haarla&action=edit&redlink=1" class="new" title="Iro Haarla (page does not exist)">Iro Haarla</a> who was Vesala's wife.</p>
<p>Vesala died from <a href="http://en.wikipedia.org/wiki/Congestive_heart_failure" title="Congestive heart failure" class="mw-redirect">congestive heart failure</a> in <a href="http://en.wikipedia.org/wiki/Yl%C3%A4ne" title="Yläne">Yläne</a>, <a href="http://en.wikipedia.org/wiki/Finland" title="Finland">Finland</a> at the age of 54.</p>
<a href="https://github.com/jondashkyle/baseUnit" class="git-link"></a>
<script src="bundle.js"></script>
</body>
</html>