schmijos · June 13, 2018 20:24
diff --git a/bar-1299049.svg b/bar-1299049.svg
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Brauzeugen</title>

    <style>
      @font-face {
        font-family: PfefferMediaeval;
        src: url(PfefferMediaeval.svg);
      }

      body {
        font-family: PfefferMediaeval, 'Open Sans', sans-serif;
        text-align: justify;
      }

      h1, h2, h3 {
        letter-spacing: 0.1em;
        font-variant: small-caps;
        text-align: center;
      }

      p {
        line-height: 133%;
      }

      p:first-letter, p .followup-first-letter {
        color: #FF5722;
      }

      p:first-of-type:first-letter {
        font-size: 250%;
        float: left;
        margin-right: 0.15em;
        font-style: normal;
        margin-top: 0.2em;
      }

      article {
        clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
        background-color: #ffc1070f;
        box-shadow: 10px 10px grey;
        filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1));
        padding: 50px 20px 20px 20px;
        max-width: 480px;
        column-count: 2;
        column-gap: 40px;
        column-rule-style: solid;
        column-rule-width: 2px;
        column-rule-color: #FF572255;
        margin: 0 auto 50px auto;
      }

      .illustration {
        display: block;
        width: 150px;
        margin: 50px auto 100px auto;
        filter: opacity(80%);
      }

      .signature {
        font-family: Papyrus, sans-serif;
      }
    </style>
  </head>
  <body>
    <article>
      <section>
        <h1>Brauzeugen</h1>

        <p>Guten Tag, Wanderer! Du hast dir ein <strong>gutes Bier</strong> verdient – und genau solches brauen wir.
          Der richtige Einsatz feiner Nasen und brachialer Muskelkraft führt zu unserem zerbrechlichen und doch so männlichen
          Getränk.</p>

        <p>Du bist herzlich zum Verkosten eingeladen. Melde dich bei:<br>
          <a href="mailto:[email protected]">[email protected]</a>.
        </p>

        <p>Bis dann,<br>Brauschmid und EXperte</p>

        <img class="illustration" src="bar-1299049.svg">
      </section>

      <section>
        <h2>Wir sind</h2>
        <p>
          Wir sind zwei Geniesser, welche während der gemeinsamen Studienzeit in Rapperswil die Liebe zum guten Bier
          gefunden haben. Dank der VSHSR-Brauerei lernten wir, dass selbst Gebrautes einfach besser schmeckt.
          Vielen Dank hier an Tobias Lehner und Johannes Federer (die damaligen Braumeister), dass ihr unsere Mentoren
          wart!
        </p>
        <p>
          Das Bedürfnis, gutes Bier zu brauen und natürlich auch zu trinken überdauerte das Studium.
          Wir haben uns mit den nötigen Gerätschaften eingedeckt und unsere ersten Fehltritte und Fortschritte erlebt.
          Seit einiger Zeit finden wir unser Bier auch gut genug, dass wir es nicht nur an angeheiterte Kollegen
          ausschenken, sondern auch ganz bewusst an Freunde und Bekannte zum degustieren geben.
        </p>
        <p>Josua & Matthias</p>
      </section>

    </article>
  </body>

  <script>
    window.onload = function(){
      var elements = document.querySelectorAll('p');
      for (var i=0; i<elements.length; i++){
        elements[i].innerHTML = elements[i].innerHTML.replace(/([.?!]\s+)(\w)/g, "$1<span class='followup-first-letter'>$2</span>")
      }
    }
  </script>
 </html>
diff --git a/PfefferMediaeval.svg b/PfefferMediaeval.svg

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Brauzeugen</title>

	<style>
	@font-face {
	font-family: PfefferMediaeval;
	src: url(PfefferMediaeval.svg);
	}

	body {
	font-family: PfefferMediaeval, 'Open Sans', sans-serif;
	text-align: justify;
	}

	h1, h2, h3 {
	letter-spacing: 0.1em;
	font-variant: small-caps;
	text-align: center;
	}

	p {
	line-height: 133%;
	}

	p:first-letter, p .followup-first-letter {
	color: #FF5722;
	}

	p:first-of-type:first-letter {
	font-size: 250%;
	float: left;
	margin-right: 0.15em;
	font-style: normal;
	margin-top: 0.2em;
	}

	article {
	clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
	background-color: #ffc1070f;
	box-shadow: 10px 10px grey;
	filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1));
	padding: 50px 20px 20px 20px;
	max-width: 480px;
	column-count: 2;
	column-gap: 40px;
	column-rule-style: solid;
	column-rule-width: 2px;
	column-rule-color: #FF572255;
	margin: 0 auto 50px auto;
	}

	.illustration {
	display: block;
	width: 150px;
	margin: 50px auto 100px auto;
	filter: opacity(80%);
	}

	.signature {
	font-family: Papyrus, sans-serif;
	}
	</style>
	</head>
	<body>
	<article>
	<section>
	<h1>Brauzeugen</h1>

	<p>Guten Tag, Wanderer! Du hast dir ein <strong>gutes Bier</strong> verdient – und genau solches brauen wir.
	Der richtige Einsatz feiner Nasen und brachialer Muskelkraft führt zu unserem zerbrechlichen und doch so männlichen
	Getränk.</p>

	<p>Du bist herzlich zum Verkosten eingeladen. Melde dich bei:<br>
	<a href="mailto:[email protected]">[email protected]</a>.
	</p>

	<p>Bis dann,<br>Brauschmid und EXperte</p>

	<img class="illustration" src="bar-1299049.svg">
	</section>

	<section>
	<h2>Wir sind</h2>
	<p>
	Wir sind zwei Geniesser, welche während der gemeinsamen Studienzeit in Rapperswil die Liebe zum guten Bier
	gefunden haben. Dank der VSHSR-Brauerei lernten wir, dass selbst Gebrautes einfach besser schmeckt.
	Vielen Dank hier an Tobias Lehner und Johannes Federer (die damaligen Braumeister), dass ihr unsere Mentoren
	wart!
	</p>
	<p>
	Das Bedürfnis, gutes Bier zu brauen und natürlich auch zu trinken überdauerte das Studium.
	Wir haben uns mit den nötigen Gerätschaften eingedeckt und unsere ersten Fehltritte und Fortschritte erlebt.
	Seit einiger Zeit finden wir unser Bier auch gut genug, dass wir es nicht nur an angeheiterte Kollegen
	ausschenken, sondern auch ganz bewusst an Freunde und Bekannte zum degustieren geben.
	</p>
	<p>Josua & Matthias</p>
	</section>

	</article>
	</body>

	<script>
	window.onload = function(){
	var elements = document.querySelectorAll('p');
	for (var i=0; i<elements.length; i++){
	elements[i].innerHTML = elements[i].innerHTML.replace(/([.?!]\s+)(\w)/g, "$1<span class='followup-first-letter'>$2</span>")
	}
	}
	</script>
	</html>