updating information page for donations

content/pages/unterstuetzen.xml

@@ -3,6 +3,7 @@
 
 
 <page title="Unterstützen">
+
   <p title="Spenden">
     Raumvergrößerung zieht eine Mieterhöhung mit sich. Wir können das
     nicht in der bisherigen Konstellation stemmen. Wenn dir
@@ -10,43 +11,60 @@
     Dauerauftrag über einen dir angemessen erscheinenden Betrag an
     folgendes Konto ein:
   </p>
-  <div class="float-left" style="float: left;">
-  <dl>
-    <dt>Inhaber</dt>
-    <dd>Netzbiotop Dresden e.V.</dd>
-    <dt>IBAN</dt>
-    <dd>DE34 85090000 4655221005</dd>
-    <dt>BIC</dt>
-    <dd>GENODEF1DRS</dd>
-    <dt>Kontonummer</dt>
-    <dd>4655221005</dd>
-    <dt>BLZ</dt>
-    <dd>85090000</dd>
-    <dt>Bank</dt>
-    <dd>Dresdner Volksbank</dd>
-  </dl>
-	<div id="bezahlcode" class="hidden">
-		<image class="qrcode" title="SEPA-Bezahlcode">images/sepa-bezahlcode.png</image>
-	</div>
-	<div id="sepaqrcode" class="hidden">
-		<image class="qrcode" title="SEPA QR-Code">images/sepa-qrcode.png</image>
-	</div>
-  </div>
+
   <p title="Spenden-Bescheinigung">
     Der Netzbiotop Dresden e.V. ist der gemeinnützige Verein hinter dem C3D2.
     Wir können auch steuerlich absetzbare Spendenquittungen ausstellen.
   </p>
-  <div>
-  <p title="Bitcoin">Wer gerne pseudonym spenden möchte, kann auch mit Cryptogeld helfen, sendet an <link href="bitcoin:1GCHQcmWcyCa3tJnoeZCy5ePpkQK7xnJ1R">1GCHQcmWcyCa3tJnoeZCy5ePpkQK7xnJ1R</link>.</p>
-<!--
-  <div id="bitcoinqrcode" class="hidden"></div>
--->
+
+  <div title="Überweisung">
+	<dl class="inline-block">
+		<dt>Inhaber</dt><dd>Netzbiotop Dresden e.V.</dd>
+		<dt>IBAN</dt><dd>DE34 85090000 4655221005</dd>
+		<dt>BIC</dt><dd>GENODEF1DRS</dd>
+		<dt>Kontonummer</dt><dd>4655221005</dd>
+		<dt>BLZ</dt><dd>85090000</dd>
+		<dt>Bank</dt><dd>Dresdner Volksbank</dd>
+	</dl>
+	<div id="bezahlcode" class="inline-block">
+		<image class="qrcode" title="SEPA-Bezahlcode" alt="SEPA Daten als Bezahlcode">images/sepa-bezahlcode.png</image>
+		<div class="figcaption">Bezahlcode</div>
+	</div>
+	<div id="sepaqrcode" class="inline-block">
+		<image class="qrcode" title="SEPA QR-Code" alt="SEPA Daten als QR-Code">images/qr-sepa-spendenadresse.png</image>
+		<div class="figcaption">SEPA QR-Code</div>
+	</div>
+  </div>
+  <div title="Bitcoin">
+	<div class="inline-block">
+	  Wer gerne pseudonym spenden möchte, kann auch mit Cryptogeld helfen,
+	  sendet an
+	  <link href="bitcoin:1GCHQcmWcyCa3tJnoeZCy5ePpkQK7xnJ1R?label=Spende%20f%c3%bcr%20GCHQ">1GCHQcmWcyCa3tJnoeZCy5ePpkQK7xnJ1R</link>.
+	</div>
+	<div id="bitcoinqrcode" class="inline-block">
+		<image class="qrcode" title="Bitcoin QR-Code" alt="bitcoin:1GCHQcmWcyCa3tJnoeZCy5ePpkQK7xnJ1R?label=Spende%20f%c3%bcr%20GCHQ">images/qr-bitcoin-spendenadresse.png</image>
+		<div class="figcaption">Bitcoin QR-Code</div>
+	</div>
   </div>
 
-  <p title="Sachspenden">
+  <div title="Bargeld">
+	<div>Es ist möglich, Bargeld in Bankfilialen direkt auf unser Konto einzuzahlen, das kostete aber teilweise Gebühren.</div>
+	<div>Wenn eine Überweisung nicht erwünscht oder möglich ist, kann auch gerne Bargeld an den <link href="space.html">Space</link> gesendet werden.</div>
+  </div>
+
+  <div title="PayPal">
+	  <div>Ein sehr verbreiteter Zahlungsanbieter, der leider auch Gebühren nimmt, weshalb hier weniger von der Spende übrig bleibt.
+	  Paypal lohnt sich daher vor allem für Überweisungen aus dem Ausland. Alle anderen nutzen eventuell besser eine der anderen Möglichkeiten.</div>
+	  <div id="paypal-button">
+		<paypalbutton/>
+	  </div>
+  </div>
+
+  <div title="Sachspenden">
     Über nützliche und interessante Dinge sowie Beteiligung an gemeinsamen Beschaffungen freuen wir uns. Besonders
     benötigte Dinge notieren wir im Wiki:
-  </p>
+  </div>
+
   <ul>
     <li>
       <link href="https://wiki.c3d2.de/HQ/Wunschliste">HQ-Wunschliste</link>
@@ -63,8 +81,4 @@
     nicht gebrauchen.
   </p>
 
-  <!--
-  Hier könnte Paypal hin
-  <paypalbutton/>
-  -->
 </page>

content/static/style/default.css

@@ -907,6 +907,27 @@ p.center {
 .lightbox button.red {
     background-color: #c22;
 }
-.hidden {
+.hidden[aria-hidden] {
 	display: none;
 }
+.qrcode {
+	display: inline-block;
+	width: 245px;
+	height: 245px;
+}
+.inline-block {
+	display: inline-block;
+}
+h3 + div {
+	margin-top: 1ex;
+}
+.figcaption {
+	width: 80%;
+	margin: 0 10%;
+	text-align: center;
+	border: 1px solid grey;
+	border-radius: 1.5ex;
+}
+#paypal-button {
+	margin: 1ex;
+}