switch to single-page layout

index.html

@@ -1,68 +1,50 @@
 ---
-title: Worum geht es?
+title: Scherbengericht jetzt
 layout: default
 ---
-<h1>Scherbengericht <i>jetzt</i></h1>
+{% assign intro-page = site.pages | where: "name", "intro.html" | first %}
+{% assign about-page = site.pages | where: "name", "about.md" | first %}
+{% include navigation.html %}
 
-<p class="larger">
-  Braucht die real existierende <b>Demokratie</b> eine <b>Machtbegrenzung</b>?
-</p>
+<div id="main">
 
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/scherbe_perikles.svg" style="width: 200px;"/>
+  <div id="intro" class="section p-intro">
+    {{ intro-page.content }}
   </div>
-  <div class="wrap2">
-    <p>
-      Im antiken griechischen Vorbild – der Demokratie von <b>Athen</b>
-      in der Zeit des <b>Perikles</b> – gab es dafür u.a. die Institution des
-      <b>Scherbengerichts</b> (οστρακισμος), bei der die Bürger jährlich
-      einen Politiker, wenn er der Errichtung der <b>Tyrannei</b> verdächtig
-      war, in die <b>Verbannung</b> wählen konnten. Verbannten wurde für
-      <b>10 Jahre</b> das Eigentum konfisziert, jegliche geschäftliche oder
-      politische Betätigung verboten und unter Androhung von Strafe
-      der Aufenthalt im Land untersagt. Zur Stimmabgabe nutzte man
-      die <b>Scherben</b> zerbrochener Tongefäße.
-    </p>
+  <hr/>
+
+  {% for post in site.posts %}
+  {% capture id %}{{ post.id | remove:'/' | downcase }}{% endcapture %}
+  <div id="{{id}}" class="section p-{{id}}">
+    {% if post.icon %}
+    <div class="subtlecircle sectiondivider imaged">
+      <img src="{{post.icon}}" alt="section icon" />
+      <h5 class="icon-title">{{ post.title }}</h5>
+    </div>
+    {% elsif post.fa-icon %}
+    <div class="subtlecircle sectiondivider faicon">
+      <span class="fa-stack">
+        <i class="fa fa-circle fa-stack-2x"></i>
+        <i class="fa fa-{{ post.fa-icon }} fa-stack-1x"></i>
+      </span>
+      <h5 class="icon-title">{{ post.title }}</h5>
+    </div>
+    {% else %}
+    <div class="subtlecircle sectiondivider">
+      <h1 class="icon-title">{{ post.title }}</h1>
+    </div>
+    {% endif %}
+    <div class="container {{ post.style }}">
+      {{ post.content }}
+    </div>
+    <!-- ⁂ -->
+    <div style="text-align: center;">⸪</div>
+    <hr/>
   </div>
+  {% endfor %}
+
+  <div id="about" class="section p-about">
+  {{ about-page.content }}
+  </div>
+  
 </div>
-
-
-<p class="larger">
-  Lassen Sie es uns <b>wiederbeleben</b>, machen Sie mit!
-</p>
-
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/scales-of-justice.jpg" style="width: 200px;"/>
-  </div>
-  <div class="wrap2">
-    Von welchem <b>Politiker</b> oder <b>Oligarchen</b>
-    geht derzeit die größte <b>Gefahr</b> für unser Land aus?
-    (etwa durch anhaltenden Machtmißbrauch
-    oder zu erwartende Machtergreifung –
-    oder wegen Kriegstreiberei)
-    Wen würden Sie deshalb (geheim)
-    in die <b>Verbannung</b> wählen?
-  </div>
-</div>
-
-<p class="larger">
-  <b>Schreiben</b> Sie den <b>Namen</b> ihrer Wahl
-  auf einen <b>Stimmzettel</b> (als moderne Scherbe)
-  und werfen ihn in die Urne!
-</p>
-
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/wahlurne.jpg" style="width: 200px;"/>
-  </div>
-  <div class="wrap2">
-    Jeder Bürger hat nur <b>eine Stimme</b>!
-    Die Auszählung erfolgt abends vor Ort öffentlich.
-    
-    Die Ergebnisse werden dann <b><a href="/vote.html">hier</a></b>
-    bekanntgegeben.
-  </div>
-</div>
-