From 5ff2a3ee769266e57d7d641ad0142ea326297130 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Thu, 25 May 2017 21:55:34 +0200
Subject: [PATCH 1/6] replace left-side share buttons with more dynamic form

---
 layouts/partials/head.html        |   1 +
 layouts/partials/sharecolumn.html |  37 ++++++-
 static/cgi/share.php              |  70 ++++++++++++
 static/css/buttons-side.css       | 170 ++++++++++++++++++++++++++++++
 static/css/custom.css             |  66 ------------
 5 files changed, 276 insertions(+), 68 deletions(-)
 create mode 100644 static/cgi/share.php
 create mode 100644 static/css/buttons-side.css

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3b84a74..c721392 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -22,6 +22,7 @@
 {{ "<!-- Custom CSS -->" | safeHTML }}
 <link rel="stylesheet" href="{{ "css/creative.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}" type="text/css">
+<link rel="stylesheet" href="{{ "css/buttons-side.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/modals.css" | absURL }}" type="text/css">
 
 {{ "<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->" | safeHTML }}
diff --git a/layouts/partials/sharecolumn.html b/layouts/partials/sharecolumn.html
index 022e287..f681768 100644
--- a/layouts/partials/sharecolumn.html
+++ b/layouts/partials/sharecolumn.html
@@ -1,7 +1,40 @@
 {{ "<!-- SHARE COLUMN -->" | safeHTML }}
 {{ $data := index .Site.Data .Site.Language.Lang }}
-<aside class="sharecolumn">
+<div class="sharecolumn">
+<!--
   {{ range $data.share }}
     <a id="{{ .id }}-left" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" target="_blank">&nbsp;</a>
   {{ end }}
-</aside>
+-->
+
+<form action="/cgi/share.php" method="GET" class="share-buttons-side" target="_blank">
+  <input name="popup" id="no-share-popup" type="radio" />
+  <input name="ref" value="bottom" type="hidden" />
+  <input name="url" value="https://pmpc.mehl.mx" type="hidden" />  <!-- replace with your URL -->
+  <input name="title" value="Public Money, Public Code!" type="hidden" />       <!-- replace with site/share title -->
+  <input class="n" name="website" placeholder="Please do not put anything here" />  <!-- stupid bot detection -->
+  
+  <label class="button share-diaspora" title="Share this page on Diaspora" for="diaspora-share">&nbsp;</label>
+  <input name="popup" id="diaspora-share" type="radio" />
+  <span class="popup diaspora">
+    <label for="no-share-popup"></label>
+    <input name="diasporapod" value="" placeholder="Diaspora URL (diasp.tld)" type="text" />
+    <button type="submit" name="service" value="diaspora">OK</button>
+  </span>
+  
+  <label class="button share-gnusocial" title="Share this page on GNU Social" for="gnusocial-share">&nbsp;</label>
+  <input name="popup" id="gnusocial-share" type="radio" />
+  <span class="popup gnusocial">
+    <label for="no-share-popup"></label>
+    <input name="gnusocialpod" value="" placeholder="GNU Social URL (gnusocial.tld)" type="text" />
+    <button type="submit" name="service" value="gnusocial">OK</button>
+  </span>
+  
+  <button type="submit" name="service" value="reddit" class="button share-reddit" title="Share this page on Reddit">&nbsp;</button>
+  <button type="submit" name="service" value="twitter" class="button share-twitter" title="Share this page on Twitter">&nbsp;</button>
+  <button type="submit" name="service" value="facebook" class="button share-facebook" title="Share this page on Facebook">&nbsp;</button>
+  <button type="submit" name="service" value="gplus" class="button share-gplus" title="Share this page on Google+">&nbsp;</button>
+  <button type="submit" name="service" value="support" class="button share-support" title="Support the FSFE">&nbsp;</button>
+</form>
+
+</div>
diff --git a/static/cgi/share.php b/static/cgi/share.php
new file mode 100644
index 0000000..2f1f724
--- /dev/null
+++ b/static/cgi/share.php
@@ -0,0 +1,70 @@
+<?php
+
+// Change these variables
+$gnusocialuser = "fsfe@quitter.no";
+$twitteruser = "@fsfe";
+$flattruser = "fsfe";
+$supporturl = "https://fsfe.org/donate?pmpc";
+
+// Don't change below here
+$service = isset($_GET['service']) ? $_GET['service'] : false;
+$url = isset($_GET['url']) ? $_GET['url'] : false;
+$title = isset($_GET['title']) ? $_GET['title'] : false;
+$diasporapod = isset($_GET['diasporapod']) ? $_GET['diasporapod'] : false;
+$gnusocialpod = isset($_GET['gnusocialpod']) ? $_GET['gnusocialpod'] : false;
+
+if(empty($service) || empty($url)) {
+  echo 'At least one required variable is empty. You have to define at least service and url';
+}
+else {
+  $service = htmlspecialchars($service);
+  $diasporapod = htmlspecialchars($diasporapod);
+  $gnusocialpod = htmlspecialchars($gnusocialpod);
+  $url = urlencode(htmlspecialchars($url));
+  $title = urlencode(htmlspecialchars($title));
+  
+  if ($service === "diaspora") {
+    $diasporapod = validateurl($diasporapod);
+    echo $diasporapod;
+    header("Location: " . $diasporapod . "/bookmarklet?url=" . $url . "&title=" . $title);
+    die();
+  } elseif($service === "gnusocial") {
+    $gnusocialpod = validateurl($gnusocialpod);
+    header("Location: " . $gnusocialpod . "/notice/new?status_textarea=" . $title . " " . $url . " via " . $gnusocialuser);
+    die();
+  } elseif($service === "reddit") {
+    header("Location: https://reddit.com/submit?url=" . $url . "&title=" . $title);
+    die();
+  } elseif($service === "flattr") {
+    header("Location: https://flattr.com/submit/auto?user_id=" . $flattruser . "&url=" . $url . "&title=" . $title);
+    die();
+  } elseif($service === "hnews") {
+    header("Location: https://news.ycombinator.com/submitlink?u=" . $url . "&t=" . $title);
+    die();
+  } elseif($service === "twitter") {
+    header("Location: https://twitter.com/share?url=" . $url . "&text=" . $title . "&via=" . $twitteruser);
+    die();
+  } elseif($service === "facebook") {
+    header("Location: https://www.facebook.com/sharer/sharer.php?u=" . $url);
+    die();
+  } elseif($service === "gplus") {
+    header("Location: https://plus.google.com/share?url=" . $url);
+    die();
+  } elseif($service === "support") {
+    header("Location: " . $supporturl);
+    die();
+  } else {
+    echo 'Social network unknown.';
+  }
+}
+
+// If diaspora/GS pod has been typed without http(s):// prefix, add it
+function validateurl($url) {
+  if (preg_match('#^https?://#i', $url) === 0) {
+    return 'https://' . $url;
+  } else {
+    return $url;
+  }
+}
+
+?>
diff --git a/static/css/buttons-side.css b/static/css/buttons-side.css
new file mode 100644
index 0000000..7288959
--- /dev/null
+++ b/static/css/buttons-side.css
@@ -0,0 +1,170 @@
+div.sharecolumn {
+  display: none;
+  left: 0;
+  padding: 0.1vh 0.5vh;
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  flex-direction: column;
+}
+@media(min-width:768px) {
+  div.sharecolumn {
+    display: flex;
+  }
+}
+
+/* General button look */
+.share-buttons-side {
+  left: 0;
+  padding: 0.1vh 0.5vh;
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  flex-direction: column;
+}
+
+.share-buttons-side button.button,
+.share-buttons-side label.button {
+/*
+  display: inline-block;
+  margin: 2.5px 5px 2.5px 0;
+  color: #fff;
+  font-weight: normal;
+  font-size: 1em;
+  font-family: sans-serif;
+  line-height: normal;
+  text-align: center;
+  text-decoration: none;
+  padding: 7px 7px 7px 20px;
+  width: 19%;
+  min-width: 90px;
+  max-width: 110px;
+  box-sizing: border-box;
+  display: inline-block;
+  border-radius: 3px;
+  background-position: left 5px center;
+  background-repeat: no-repeat;
+  background-size: 20px auto;
+  opacity: 0.9;
+  vertical-align: top;
+  line-height: 1.2em;
+*/
+
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 2.7vh auto;
+  background-color: #474747;
+  border-radius: 3px;
+  border: none;
+  color: #000;
+  display: inline-block;
+  margin: 2.5px 5px 2.5px 0;
+  opacity: 0.9;
+  text-decoration: none;
+  height: 4vh;
+  width: 4vh;
+  cursor: pointer;
+}
+
+/* Single services with their colours and logos */
+.share-buttons-side button:hover, .share-buttons-side label:hover {
+  background-color: #F05F40;
+}
+.share-buttons-side .share-diaspora {
+  background-image: url("/img/share/diaspora_white.png");
+}
+.share-buttons-side .share-gnusocial {
+  background-image: url("/img/share/gnusocial_white.png");
+}
+.share-buttons-side .share-reddit {
+  background-image: url("/img/share/reddit_white.png");
+}
+.share-buttons-side .share-flattr {
+  background-image: url("/img/share/flattr_white.png");
+  display: none !important;
+}
+.share-buttons-side .share-hnews {
+  background-image: url("/img/share/hackernews_white.png");
+  display: none !important;
+}
+.share-buttons-side .share-twitter {
+  background-image: url("/img/share/twitter_white.png");
+}
+.share-buttons-side .share-facebook {
+  background-image: url("/img/share/facebook_white.png");
+}
+.share-buttons-side .share-gplus {
+  background-image: url("/img/share/gplus_white.png");
+  display: none !important;
+}
+.share-buttons-side .share-support {
+  background-image: url("/img/share/support_red.png");
+}
+
+/* Share pop-up behaviour hacks */
+.share-buttons-side input[type="radio"],
+.share-buttons-side input[type="radio"] + span,
+.share-buttons-side input[type="checkbox"],
+.share-buttons-side input[type="checkbox"] + span {
+  display: none;
+}
+.share-buttons-side input[type="radio"]:checked + span,
+.share-buttons-side input[type="checkbox"]:checked + span {
+  position: absolute;
+  margin-top: 3.5em; margin-left: -10em;
+  padding: .5em;
+  z-index: 3;
+  background-color: #333;
+  border-radius: .5em;
+  display: inline-block;
+}
+.share-buttons-side input[type="radio"]:checked + span:before,
+.share-buttons-side input[type="checkbox"]:checked + span:before {
+  content: '';
+  position: absolute;
+  top: -1em;
+  height: 0em; width: 0em;
+  border-bottom: 1em solid #333;
+  border-left: 1em solid transparent;
+  border-right: 1em solid transparent;
+  z-index: 3;
+}
+.share-buttons-side input[type="radio"] + span > *{
+  vertical-align: middle;
+}
+.share-buttons-side input[type="radio"] + span > button {
+  margin: 2.5px 0 2.5px 5px;
+  min-width: 4em;
+  padding: .25em;
+  font-weight: normal;
+  font-size: 1em;
+  line-height: normal;
+}
+.share-buttons-side input[type="radio"] + span > label {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+/* Separate share buttons form from possibly floating content */
+form.share-buttons-side {
+  clear: both;
+}
+
+/* Hide something */
+.n {
+  display: none;
+}
+
+/* Media Query to resize social links for portrait tablet view */
+@media screen and (max-height: 770px) {
+  .share-buttons-side button.button,
+  .share-buttons-side label.button {
+    background-size: 3.7vh auto;
+    height: 6vh;
+    width: 6vh;
+  }
+}
diff --git a/static/css/custom.css b/static/css/custom.css
index 72d7e46..29e46c5 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -192,69 +192,3 @@ table.signatures th, table.signatures td {
 .share-buttons a#hnews:hover {
   background-color: #dd3500 !important;
 }
-
-/* SHARE BUTTONS ON LEFT SIDE */
-aside.sharecolumn {
-  display: none;
-  left: 0;
-  padding: 0.1vh 0.5vh;
-  position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  flex-direction: column;
-}
-@media(min-width:768px) {
-  aside.sharecolumn {
-    display: flex;
-  }
-}
-aside.sharecolumn a {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 2.7vh auto;
-  background-color: #474747;
-  border-radius: 3px;
-  color: #000;
-  display: inline-block;
-  margin: 2.5px 5px 2.5px 0;
-  opacity: 0.9;
-  text-decoration: none;
-  height: 4vh;
-  width: 4vh;
-}
-aside.sharecolumn a:hover {
-  background-color: #F05F40;
-}
-aside.sharecolumn a#diaspora-left {
-  background-image: url("/img/share/diaspora_white.png");
-}
-aside.sharecolumn a#gnusocial-left {
-  background-image: url("/img/share/gnusocial_white.png");
-}
-aside.sharecolumn a#reddit-left {
-  background-image: url("/img/share/reddit_white.png");
-}
-aside.sharecolumn a#twitter-left {
-  background-image: url("/img/share/twitter_white.png");
-}
-aside.sharecolumn a#gplus-left {
-  background-image: url("/img/share/gplus_white.png");
-  display: none;
-}
-aside.sharecolumn a#facebook-left {
-  background-image: url("/img/share/facebook_white.png");
-}
-aside.sharecolumn a#support-left {
-  background-image: url("/img/share/support_red.png");
-}
-
-/* Media Query to resize social links for portrait tablet view */
-
-@media screen and (max-height: 770px) {
-  aside.sharecolumn a {
-    background-size: 3.7vh auto;
-    height: 6vh;
-    width: 6vh;
-  }
-}

From 22e5be06500ac3535560e4d4056803cc8651955a Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Thu, 25 May 2017 22:35:52 +0200
Subject: [PATCH 2/6] dynamic generation of left-side buttons based on files in
 /data

---
 data/de/share/1-diaspora.yaml     |  2 +-
 data/de/share/2-gnusocial.yaml    |  2 +-
 data/de/share/3-reddit.yaml       |  1 -
 data/de/share/4-twitter.yaml      |  1 -
 data/de/share/5-gplus.yaml        |  1 -
 data/de/share/6-facebook.yaml     |  1 -
 data/de/share/7-support.yaml      |  1 -
 data/en/share/1-diaspora.yaml     |  2 +-
 data/en/share/2-gnusocial.yaml    |  2 +-
 data/en/share/3-reddit.yaml       |  1 -
 data/en/share/4-twitter.yaml      |  1 -
 data/en/share/5-gplus.yaml        |  1 -
 data/en/share/6-facebook.yaml     |  1 -
 data/en/share/7-support.yaml      |  1 -
 layouts/partials/sharecolumn.html | 45 ++++++++++++------------------
 static/css/buttons-side.css       | 46 ++++---------------------------
 16 files changed, 27 insertions(+), 82 deletions(-)

diff --git a/data/de/share/1-diaspora.yaml b/data/de/share/1-diaspora.yaml
index 08d6368..edc3cdf 100644
--- a/data/de/share/1-diaspora.yaml
+++ b/data/de/share/1-diaspora.yaml
@@ -2,4 +2,4 @@ id: diaspora
 name: Diaspora
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=diaspora&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
+userinput: true
diff --git a/data/de/share/2-gnusocial.yaml b/data/de/share/2-gnusocial.yaml
index a56737e..dff83cc 100644
--- a/data/de/share/2-gnusocial.yaml
+++ b/data/de/share/2-gnusocial.yaml
@@ -2,4 +2,4 @@ id: gnusocial
 name: GNU Social
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=gnusocial&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
+userinput: true
diff --git a/data/de/share/3-reddit.yaml b/data/de/share/3-reddit.yaml
index c61455b..74532d6 100644
--- a/data/de/share/3-reddit.yaml
+++ b/data/de/share/3-reddit.yaml
@@ -2,4 +2,3 @@ id: reddit
 name: Reddit
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=reddit&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/de/share/4-twitter.yaml b/data/de/share/4-twitter.yaml
index 8ad84e5..bfe841f 100644
--- a/data/de/share/4-twitter.yaml
+++ b/data/de/share/4-twitter.yaml
@@ -2,4 +2,3 @@ id: twitter
 name: Twitter
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=twitter&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/de/share/5-gplus.yaml b/data/de/share/5-gplus.yaml
index 4081a5a..7be6463 100644
--- a/data/de/share/5-gplus.yaml
+++ b/data/de/share/5-gplus.yaml
@@ -2,4 +2,3 @@ id: gplus
 name: Google+
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=gplus&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/de/share/6-facebook.yaml b/data/de/share/6-facebook.yaml
index 674d9c9..e312c3d 100644
--- a/data/de/share/6-facebook.yaml
+++ b/data/de/share/6-facebook.yaml
@@ -2,4 +2,3 @@ id: facebook
 name: Facebook
 titleBefore: Auf
 titleAfter: teilen
-link: https://test.fsfe.org/cgi-bin/share.php?service=facebook&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/de/share/7-support.yaml b/data/de/share/7-support.yaml
index 87a7970..fca02d5 100644
--- a/data/de/share/7-support.yaml
+++ b/data/de/share/7-support.yaml
@@ -2,4 +2,3 @@ id: support
 name: Kampagne unterstützen!
 titleBefore:
 titleAfter:
-link: https://fsfe.org/donate?pmpc
diff --git a/data/en/share/1-diaspora.yaml b/data/en/share/1-diaspora.yaml
index a141f60..15f0af3 100644
--- a/data/en/share/1-diaspora.yaml
+++ b/data/en/share/1-diaspora.yaml
@@ -2,4 +2,4 @@ id: diaspora
 name: Diaspora
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=diaspora&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
+userinput: true
diff --git a/data/en/share/2-gnusocial.yaml b/data/en/share/2-gnusocial.yaml
index 39c092a..8549b04 100644
--- a/data/en/share/2-gnusocial.yaml
+++ b/data/en/share/2-gnusocial.yaml
@@ -2,4 +2,4 @@ id: gnusocial
 name: GNU Social
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=gnusocial&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
+userinput: true
diff --git a/data/en/share/3-reddit.yaml b/data/en/share/3-reddit.yaml
index 7c3c28b..fd02c60 100644
--- a/data/en/share/3-reddit.yaml
+++ b/data/en/share/3-reddit.yaml
@@ -2,4 +2,3 @@ id: reddit
 name: Reddit
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=reddit&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/en/share/4-twitter.yaml b/data/en/share/4-twitter.yaml
index 2df6043..3857759 100644
--- a/data/en/share/4-twitter.yaml
+++ b/data/en/share/4-twitter.yaml
@@ -2,4 +2,3 @@ id: twitter
 name: Twitter
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=twitter&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/en/share/5-gplus.yaml b/data/en/share/5-gplus.yaml
index efca808..214cf40 100644
--- a/data/en/share/5-gplus.yaml
+++ b/data/en/share/5-gplus.yaml
@@ -2,4 +2,3 @@ id: gplus
 name: Google+
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=gplus&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/en/share/6-facebook.yaml b/data/en/share/6-facebook.yaml
index 61dedc6..caa4ef8 100644
--- a/data/en/share/6-facebook.yaml
+++ b/data/en/share/6-facebook.yaml
@@ -2,4 +2,3 @@ id: facebook
 name: Facebook
 titleBefore: Share on
 titleAfter: 
-link: https://test.fsfe.org/cgi-bin/share.php?service=facebook&ref=pmpc&url=https://publicmoneypubliccode.org&title=Public%20Money%3F%20Public%20Code!%20%23pmpc
diff --git a/data/en/share/7-support.yaml b/data/en/share/7-support.yaml
index 25cb395..aa85023 100644
--- a/data/en/share/7-support.yaml
+++ b/data/en/share/7-support.yaml
@@ -2,4 +2,3 @@ id: support
 name: Support the Campaign!
 titleBefore:
 titleAfter:
-link: https://fsfe.org/donate?pmpc
diff --git a/layouts/partials/sharecolumn.html b/layouts/partials/sharecolumn.html
index f681768..fdc9280 100644
--- a/layouts/partials/sharecolumn.html
+++ b/layouts/partials/sharecolumn.html
@@ -1,40 +1,31 @@
 {{ "<!-- SHARE COLUMN -->" | safeHTML }}
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <div class="sharecolumn">
-<!--
-  {{ range $data.share }}
-    <a id="{{ .id }}-left" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" target="_blank">&nbsp;</a>
-  {{ end }}
--->
-
+  
 <form action="/cgi/share.php" method="GET" class="share-buttons-side" target="_blank">
   <input name="popup" id="no-share-popup" type="radio" />
   <input name="ref" value="bottom" type="hidden" />
-  <input name="url" value="https://pmpc.mehl.mx" type="hidden" />  <!-- replace with your URL -->
+  <input name="url" value="{{ .Site.Params.url }}" type="hidden" />  <!-- replace with your URL -->
   <input name="title" value="Public Money, Public Code!" type="hidden" />       <!-- replace with site/share title -->
   <input class="n" name="website" placeholder="Please do not put anything here" />  <!-- stupid bot detection -->
   
-  <label class="button share-diaspora" title="Share this page on Diaspora" for="diaspora-share">&nbsp;</label>
-  <input name="popup" id="diaspora-share" type="radio" />
-  <span class="popup diaspora">
-    <label for="no-share-popup"></label>
-    <input name="diasporapod" value="" placeholder="Diaspora URL (diasp.tld)" type="text" />
-    <button type="submit" name="service" value="diaspora">OK</button>
-  </span>
+  {{ range $data.share }}
+    {{ if eq .userinput true }}
+      <label class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" for="{{ .id }}-share">&nbsp;</label>
+        <input name="popup" id="{{ .id }}-share" type="radio" />
+        <span class="popup {{ .id }}">
+          <label for="no-share-popup"></label>
+          <input name="{{ .id }}pod" value="" placeholder="{{ .name }} URL ({{ .id }}.tld)" type="text" />
+          <button type="submit" name="service" value="{{ .id }}">OK</button>
+        </span>
+    {{ end }}
+  {{ end }}
   
-  <label class="button share-gnusocial" title="Share this page on GNU Social" for="gnusocial-share">&nbsp;</label>
-  <input name="popup" id="gnusocial-share" type="radio" />
-  <span class="popup gnusocial">
-    <label for="no-share-popup"></label>
-    <input name="gnusocialpod" value="" placeholder="GNU Social URL (gnusocial.tld)" type="text" />
-    <button type="submit" name="service" value="gnusocial">OK</button>
-  </span>
-  
-  <button type="submit" name="service" value="reddit" class="button share-reddit" title="Share this page on Reddit">&nbsp;</button>
-  <button type="submit" name="service" value="twitter" class="button share-twitter" title="Share this page on Twitter">&nbsp;</button>
-  <button type="submit" name="service" value="facebook" class="button share-facebook" title="Share this page on Facebook">&nbsp;</button>
-  <button type="submit" name="service" value="gplus" class="button share-gplus" title="Share this page on Google+">&nbsp;</button>
-  <button type="submit" name="service" value="support" class="button share-support" title="Support the FSFE">&nbsp;</button>
+  {{ range $data.share }}
+    {{ if ne .userinput true }}
+      <button type="submit" name="service" value="{{ .id }}" class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}">&nbsp;</button>
+    {{ end }}
+  {{ end }}
 </form>
 
 </div>
diff --git a/static/css/buttons-side.css b/static/css/buttons-side.css
index 7288959..80e3f46 100644
--- a/static/css/buttons-side.css
+++ b/static/css/buttons-side.css
@@ -1,5 +1,5 @@
-div.sharecolumn {
-  display: none;
+div.sharecolumn .share-buttons-side {
+  display: flex;
   left: 0;
   padding: 0.1vh 0.5vh;
   position: fixed;
@@ -8,50 +8,14 @@ div.sharecolumn {
   z-index: 10;
   flex-direction: column;
 }
-@media(min-width:768px) {
-  div.sharecolumn {
-    display: flex;
+@media(max-width:767px) {
+  .share-buttons-side {
+    display: none !important;
   }
 }
 
-/* General button look */
-.share-buttons-side {
-  left: 0;
-  padding: 0.1vh 0.5vh;
-  position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  flex-direction: column;
-}
-
 .share-buttons-side button.button,
 .share-buttons-side label.button {
-/*
-  display: inline-block;
-  margin: 2.5px 5px 2.5px 0;
-  color: #fff;
-  font-weight: normal;
-  font-size: 1em;
-  font-family: sans-serif;
-  line-height: normal;
-  text-align: center;
-  text-decoration: none;
-  padding: 7px 7px 7px 20px;
-  width: 19%;
-  min-width: 90px;
-  max-width: 110px;
-  box-sizing: border-box;
-  display: inline-block;
-  border-radius: 3px;
-  background-position: left 5px center;
-  background-repeat: no-repeat;
-  background-size: 20px auto;
-  opacity: 0.9;
-  vertical-align: top;
-  line-height: 1.2em;
-*/
-
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 2.7vh auto;

From 4f1be97b8ba8298668969905a742daeec439ad90 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Thu, 25 May 2017 23:36:54 +0200
Subject: [PATCH 3/6] add dynamic generation of spread buttons based on files
 in /data, and distuingish them from the side buttons

---
 layouts/partials/head.html        |   1 +
 layouts/partials/sharecolumn.html |  12 +--
 layouts/partials/spread.html      |  27 +++++
 static/css/buttons-side.css       |  56 +++++------
 static/css/buttons-spread.css     | 160 ++++++++++++++++++++++++++++++
 static/css/custom.css             |  92 -----------------
 6 files changed, 222 insertions(+), 126 deletions(-)
 create mode 100644 static/css/buttons-spread.css

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c721392..27b45d5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -22,6 +22,7 @@
 {{ "<!-- Custom CSS -->" | safeHTML }}
 <link rel="stylesheet" href="{{ "css/creative.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/custom.css" | absURL }}" type="text/css">
+<link rel="stylesheet" href="{{ "css/buttons-spread.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/buttons-side.css" | absURL }}" type="text/css">
 <link rel="stylesheet" href="{{ "css/modals.css" | absURL }}" type="text/css">
 
diff --git a/layouts/partials/sharecolumn.html b/layouts/partials/sharecolumn.html
index fdc9280..15d1ce5 100644
--- a/layouts/partials/sharecolumn.html
+++ b/layouts/partials/sharecolumn.html
@@ -2,19 +2,19 @@
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <div class="sharecolumn">
   
-<form action="/cgi/share.php" method="GET" class="share-buttons-side" target="_blank">
-  <input name="popup" id="no-share-popup" type="radio" />
-  <input name="ref" value="bottom" type="hidden" />
+<form action="/cgi/share.php" method="GET" class="share-buttons side" target="_blank">
+  <input name="popup" id="no-share-popup-side" type="radio" />
+  <input name="ref" value="pmpc-side" type="hidden" />
   <input name="url" value="{{ .Site.Params.url }}" type="hidden" />  <!-- replace with your URL -->
   <input name="title" value="Public Money, Public Code!" type="hidden" />       <!-- replace with site/share title -->
   <input class="n" name="website" placeholder="Please do not put anything here" />  <!-- stupid bot detection -->
   
   {{ range $data.share }}
     {{ if eq .userinput true }}
-      <label class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" for="{{ .id }}-share">&nbsp;</label>
-        <input name="popup" id="{{ .id }}-share" type="radio" />
+      <label class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" for="{{ .id }}-share-side">&nbsp;</label>
+        <input name="popup" id="{{ .id }}-share-side" type="radio" />
         <span class="popup {{ .id }}">
-          <label for="no-share-popup"></label>
+          <label for="no-share-popup-side"></label>
           <input name="{{ .id }}pod" value="" placeholder="{{ .name }} URL ({{ .id }}.tld)" type="text" />
           <button type="submit" name="service" value="{{ .id }}">OK</button>
         </span>
diff --git a/layouts/partials/spread.html b/layouts/partials/spread.html
index 711de57..447b9f9 100644
--- a/layouts/partials/spread.html
+++ b/layouts/partials/spread.html
@@ -18,9 +18,36 @@
               
               <div class="share-buttons">
               {{ .Site.Params.spread.shareTitle }}
+<!--
               {{ range $data.share }}
                 <a id="{{ .id }}" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" target="_blank">{{ .name }}</a>
               {{ end }}
+-->
+                <form action="/cgi/share.php" method="GET" class="share-buttons spread" target="_blank">
+                  <input name="popup" id="no-share-popup-spread" type="radio" />
+                  <input name="ref" value="pmpc-spread" type="hidden" />
+                  <input name="url" value="{{ .Site.Params.url }}" type="hidden" />
+                  <input name="title" value="Public Money, Public Code!" type="hidden" />
+                  <input class="n" name="website" placeholder="Please do not put anything here" />
+                  
+                  {{ range $data.share }}
+                    {{ if eq .userinput true }}
+                      <label class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" for="{{ .id }}-share-spread">{{ .name }}</label>
+                        <input name="popup" id="{{ .id }}-share-spread" type="radio" />
+                        <span class="popup {{ .id }}">
+                          <label for="no-share-popup-spread"></label>
+                          <input name="{{ .id }}pod" value="" placeholder="{{ .name }} URL ({{ .id }}.tld)" type="text" />
+                          <button type="submit" name="service" value="{{ .id }}">OK</button>
+                        </span>
+                    {{ end }}
+                  {{ end }}
+                  
+                  {{ range $data.share }}
+                    {{ if ne .userinput true }}
+                      <button type="submit" name="service" value="{{ .id }}" class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}">{{ .name }}</button>
+                    {{ end }}
+                  {{ end }}
+                </form>
               </div>
             </div>
         </div>
diff --git a/static/css/buttons-side.css b/static/css/buttons-side.css
index 80e3f46..d7fad0c 100644
--- a/static/css/buttons-side.css
+++ b/static/css/buttons-side.css
@@ -1,4 +1,4 @@
-div.sharecolumn .share-buttons-side {
+div.sharecolumn .share-buttons.side {
   display: flex;
   left: 0;
   padding: 0.1vh 0.5vh;
@@ -9,13 +9,13 @@ div.sharecolumn .share-buttons-side {
   flex-direction: column;
 }
 @media(max-width:767px) {
-  .share-buttons-side {
+  .share-buttons.side {
     display: none !important;
   }
 }
 
-.share-buttons-side button.button,
-.share-buttons-side label.button {
+.share-buttons.side button.button,
+.share-buttons.side label.button {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 2.7vh auto;
@@ -33,49 +33,49 @@ div.sharecolumn .share-buttons-side {
 }
 
 /* Single services with their colours and logos */
-.share-buttons-side button:hover, .share-buttons-side label:hover {
+.share-buttons.side button:hover, .share-buttons.side label:hover {
   background-color: #F05F40;
 }
-.share-buttons-side .share-diaspora {
+.share-buttons.side .share-diaspora {
   background-image: url("/img/share/diaspora_white.png");
 }
-.share-buttons-side .share-gnusocial {
+.share-buttons.side .share-gnusocial {
   background-image: url("/img/share/gnusocial_white.png");
 }
-.share-buttons-side .share-reddit {
+.share-buttons.side .share-reddit {
   background-image: url("/img/share/reddit_white.png");
 }
-.share-buttons-side .share-flattr {
+.share-buttons.side .share-flattr {
   background-image: url("/img/share/flattr_white.png");
   display: none !important;
 }
-.share-buttons-side .share-hnews {
+.share-buttons.side .share-hnews {
   background-image: url("/img/share/hackernews_white.png");
   display: none !important;
 }
-.share-buttons-side .share-twitter {
+.share-buttons.side .share-twitter {
   background-image: url("/img/share/twitter_white.png");
 }
-.share-buttons-side .share-facebook {
+.share-buttons.side .share-facebook {
   background-image: url("/img/share/facebook_white.png");
 }
-.share-buttons-side .share-gplus {
+.share-buttons.side .share-gplus {
   background-image: url("/img/share/gplus_white.png");
   display: none !important;
 }
-.share-buttons-side .share-support {
+.share-buttons.side .share-support {
   background-image: url("/img/share/support_red.png");
 }
 
 /* Share pop-up behaviour hacks */
-.share-buttons-side input[type="radio"],
-.share-buttons-side input[type="radio"] + span,
-.share-buttons-side input[type="checkbox"],
-.share-buttons-side input[type="checkbox"] + span {
+.share-buttons.side input[type="radio"],
+.share-buttons.side input[type="radio"] + span,
+.share-buttons.side input[type="checkbox"],
+.share-buttons.side input[type="checkbox"] + span {
   display: none;
 }
-.share-buttons-side input[type="radio"]:checked + span,
-.share-buttons-side input[type="checkbox"]:checked + span {
+.share-buttons.side input[type="radio"]:checked + span,
+.share-buttons.side input[type="checkbox"]:checked + span {
   position: absolute;
   margin-top: 3.5em; margin-left: -10em;
   padding: .5em;
@@ -84,8 +84,8 @@ div.sharecolumn .share-buttons-side {
   border-radius: .5em;
   display: inline-block;
 }
-.share-buttons-side input[type="radio"]:checked + span:before,
-.share-buttons-side input[type="checkbox"]:checked + span:before {
+.share-buttons.side input[type="radio"]:checked + span:before,
+.share-buttons.side input[type="checkbox"]:checked + span:before {
   content: '';
   position: absolute;
   top: -1em;
@@ -95,10 +95,10 @@ div.sharecolumn .share-buttons-side {
   border-right: 1em solid transparent;
   z-index: 3;
 }
-.share-buttons-side input[type="radio"] + span > *{
+.share-buttons.side input[type="radio"] + span > *{
   vertical-align: middle;
 }
-.share-buttons-side input[type="radio"] + span > button {
+.share-buttons.side input[type="radio"] + span > button {
   margin: 2.5px 0 2.5px 5px;
   min-width: 4em;
   padding: .25em;
@@ -106,7 +106,7 @@ div.sharecolumn .share-buttons-side {
   font-size: 1em;
   line-height: normal;
 }
-.share-buttons-side input[type="radio"] + span > label {
+.share-buttons.side input[type="radio"] + span > label {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   z-index: -1;
@@ -114,7 +114,7 @@ div.sharecolumn .share-buttons-side {
 }
 
 /* Separate share buttons form from possibly floating content */
-form.share-buttons-side {
+form.share-buttons.side {
   clear: both;
 }
 
@@ -125,8 +125,8 @@ form.share-buttons-side {
 
 /* Media Query to resize social links for portrait tablet view */
 @media screen and (max-height: 770px) {
-  .share-buttons-side button.button,
-  .share-buttons-side label.button {
+  .share-buttons.side button.button,
+  .share-buttons.side label.button {
     background-size: 3.7vh auto;
     height: 6vh;
     width: 6vh;
diff --git a/static/css/buttons-spread.css b/static/css/buttons-spread.css
new file mode 100644
index 0000000..ee08734
--- /dev/null
+++ b/static/css/buttons-spread.css
@@ -0,0 +1,160 @@
+/* General button look */
+.share-buttons.spread {
+  color: initial;
+}
+.share-buttons.spread button.button,
+.share-buttons.spread label.button {
+  display: inline-block;
+  margin: 0px 5px 10px 0;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1em;
+  font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
+  line-height: normal;
+  text-align: center;
+  text-decoration: none;
+  padding: 7px 7px 7px 20px;
+  min-width: 120px;
+  box-sizing: border-box;
+  display: inline-block;
+  border: none;
+  border-radius: 3px;
+  background-position: left 5px center;
+  background-repeat: no-repeat;
+  background-size: 20px auto;
+  opacity: 0.9;
+  vertical-align: top;
+  line-height: 1.2em;
+}
+
+/* Single services with their colours and logos */
+.share-buttons.spread .share-diaspora {
+  background-color: #404040;
+  background-image: url("/img/share/diaspora_white.png");
+}
+.share-buttons.spread .share-diaspora:hover {
+  background-color: #101010 !important;
+}
+.share-buttons.spread .share-gnusocial {
+  background-color: #a22430;
+  background-image: url("/img/share/gnusocial_white.png");
+}
+.share-buttons.spread .share-gnusocial:hover {
+  background-color: #850713 !important;
+}
+.share-buttons.spread .share-reddit {
+  background-color: #ff5700;
+  background-image: url("/img/share/reddit_white.png");
+}
+.share-buttons.spread .share-reddit:hover {
+  background-color: #dd3500 !important;
+}
+.share-buttons.spread .share-flattr {
+  background-color: #7ea352;
+  background-image: url("/img/share/flattr_white.png");
+  display: none !important;
+}
+.share-buttons.spread .share-flattr:hover {
+  background-color: #5a7f2e !important;
+}
+.share-buttons.spread .share-hnews {
+  background-color: #ff6600;
+  background-image: url("/img/share/hackernews_white.png");
+  display: none !important;
+}
+.share-buttons.spread .share-hnews:hover {
+  background-color: #dd3500 !important;
+}
+.share-buttons.spread .share-twitter {
+  background-color: #55acee;
+  background-image: url("/img/share/twitter_white.png");
+}
+.share-buttons.spread .share-twitter:hover {
+  background-color: #338acc !important;
+}
+.share-buttons.spread .share-facebook {
+  background-color: #3b5998;
+  background-image: url("/img/share/facebook_white.png");
+}
+.share-buttons.spread .share-facebook:hover {
+  background-color: #143271 !important;
+}
+.share-buttons.spread .share-gplus {
+  background-color: #d34836;
+  background-image: url("/img/share/gplus_white.png");
+  display: none !important;
+}
+.share-buttons.spread .share-gplus:hover {
+  background-color: #b12614 !important;
+}
+.share-buttons.spread .share-support {
+  background-color: #47a447;
+  background-image: url("/img/share/support_red.png");
+}
+.share-buttons.spread .share-support:hover {
+  background-color: #2a872a !important;
+}
+.share-buttons.spread .share-support {
+  padding-left: 30px !important;
+}
+
+/* Share pop-up behaviour hacks */
+.share-buttons.spread input[type="radio"],
+.share-buttons.spread input[type="radio"] + span,
+.share-buttons.spread input[type="checkbox"],
+.share-buttons.spread input[type="checkbox"] + span {
+  display: none;
+}
+.share-buttons.spread input[type="radio"]:checked + span,
+.share-buttons.spread input[type="checkbox"]:checked + span {
+  position: absolute;
+  margin-top: 3.5em; margin-left: -10em;
+  padding: .5em;
+  z-index: 3;
+  background-color: #333;
+  border-radius: .5em;
+  display: inline-block;
+}
+.share-buttons.spread input[type="radio"]:checked + span:before,
+.share-buttons.spread input[type="checkbox"]:checked + span:before {
+  content: '';
+  position: absolute;
+  top: -1em;
+  height: 0em; width: 0em;
+  border-bottom: 1em solid #333;
+  border-left: 1em solid transparent;
+  border-right: 1em solid transparent;
+  z-index: 3;
+}
+.share-buttons.spread input[type="radio"] + span > * {
+  vertical-align: middle;
+}
+.share-buttons.spread input[type="radio"] + span > button {
+  margin: 2.5px 0 2.5px 5px;
+  min-width: 4em;
+  padding: .25em;
+  font-weight: normal;
+  font-size: 1em;
+  line-height: normal;
+}
+.share-buttons.spread input[type="radio"] + span > label {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+/* Separate share buttons form from possibly floating content */
+form.share-buttons.spread {
+  clear: both;
+}
+
+/* Hide something */
+.n {
+  display: none;
+}
+
+/* Reset colour */
+.share-buttons.spread span label, .share-buttons.spread > span > button {
+  color: normal;
+}
diff --git a/static/css/custom.css b/static/css/custom.css
index 29e46c5..f0882ab 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -100,95 +100,3 @@ table.signatures th, table.signatures td {
   text-align: left;
   padding: 2px;
 }
-
-/* SHARE BUTTONS IN "SPREAD THE WORD" SECTION */
-.share-buttons a {
-  background-position: left 5px center;
-  background-repeat: no-repeat;
-  background-size: 20px auto;
-  border-radius: 3px;
-  color: #000;
-  display: inline-block;
-  margin: 2.5px 5px 2.5px 0;
-  min-width: 120px;
-  opacity: 0.9;
-  padding: 7px 7px 7px 30px;
-  text-align: center;
-  text-decoration: none;
-  font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
-  font-weight: 700;
-}
-
-.share-buttons a#facebook {
-  background-color: #3b5998;
-  background-image: url("/img/share/facebook_white.png");
-  color: #fff;
-}
-.share-buttons a#facebook:hover {
-  background-color: #143271 !important;
-}
-.share-buttons a#twitter {
-  background-color: #55acee;
-  background-image: url("/img/share/twitter_white.png");
-  color: #fff;
-}
-.share-buttons a#twitter:hover {
-  background-color: #338acc !important;
-}
-.share-buttons a#gplus {
-  background-color: #d34836;
-  background-image: url("/img/share/gplus_white.png");
-  color: #fff;
-  display: none;
-}
-.share-buttons a#gplus:hover {
-  background-color: #b12614 !important;
-}
-.share-buttons a#diaspora {
-  background-color: #404040;
-  background-image: url("/img/share/diaspora_white.png");
-  color: #fff;
-}
-.share-buttons a#diaspora:hover {
-  background-color: #101010 !important;
-}
-.share-buttons a#flattr {
-  background-color: #7ea352;
-  background-image: url("/img/share/flattr_white.png");
-  color: #fff;
-}
-.share-buttons a#flattr:hover {
-  background-color: #5a7f2e !important;
-}
-.share-buttons a#support {
-  background-color: #47a447;
-  background-image: url("/img/share/support_red.png");
-  color: #fff;
-}
-.share-buttons a#support:hover {
-  background-color: #2a872a !important;
-}
-.share-buttons a#reddit {
-  background-color: #ff5700;
-  background-image: url("/img/share/reddit_white.png");
-  color: #fff;
-}
-.share-buttons a#reddit:hover {
-  background-color: #dd3500 !important;
-}
-.share-buttons a#gnusocial {
-  background-color: #a22430;
-  background-image: url("/img/share/gnusocial_white.png");
-  color: #fff;
-}
-.share-buttons a#gnusocial:hover {
-  background-color: #850713 !important;
-}
-.share-buttons a#hnews {
-  background-color: #ff6600;
-  background-image: url("/img/share/hackernews_white.png");
-  color: #fff;
-}
-.share-buttons a#hnews:hover {
-  background-color: #dd3500 !important;
-}

From 11fc489e59398cb3a3ca608d3fcb98ed434c0c50 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Thu, 25 May 2017 23:41:57 +0200
Subject: [PATCH 4/6] add a placeholder until the meta PR has been merged

---
 layouts/partials/sharecolumn.html | 2 +-
 layouts/partials/spread.html      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/partials/sharecolumn.html b/layouts/partials/sharecolumn.html
index 15d1ce5..89ed59c 100644
--- a/layouts/partials/sharecolumn.html
+++ b/layouts/partials/sharecolumn.html
@@ -5,7 +5,7 @@
 <form action="/cgi/share.php" method="GET" class="share-buttons side" target="_blank">
   <input name="popup" id="no-share-popup-side" type="radio" />
   <input name="ref" value="pmpc-side" type="hidden" />
-  <input name="url" value="{{ .Site.Params.url }}" type="hidden" />  <!-- replace with your URL -->
+  <input name="url" value="{{ .Site.Params.url }}#TEST" type="hidden" />  <!-- replace with your URL -->
   <input name="title" value="Public Money, Public Code!" type="hidden" />       <!-- replace with site/share title -->
   <input class="n" name="website" placeholder="Please do not put anything here" />  <!-- stupid bot detection -->
   
diff --git a/layouts/partials/spread.html b/layouts/partials/spread.html
index 447b9f9..95abe65 100644
--- a/layouts/partials/spread.html
+++ b/layouts/partials/spread.html
@@ -26,7 +26,7 @@
                 <form action="/cgi/share.php" method="GET" class="share-buttons spread" target="_blank">
                   <input name="popup" id="no-share-popup-spread" type="radio" />
                   <input name="ref" value="pmpc-spread" type="hidden" />
-                  <input name="url" value="{{ .Site.Params.url }}" type="hidden" />
+                  <input name="url" value="{{ .Site.Params.url }}#TEST" type="hidden" />
                   <input name="title" value="Public Money, Public Code!" type="hidden" />
                   <input class="n" name="website" placeholder="Please do not put anything here" />
                   

From b380b8c6a2ee6adccca5af491f79ccbe4c72b218 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Thu, 25 May 2017 23:43:37 +0200
Subject: [PATCH 5/6] remove @ from twitter user name beause it's set
 automatically

---
 static/cgi/share.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/cgi/share.php b/static/cgi/share.php
index 2f1f724..b52e691 100644
--- a/static/cgi/share.php
+++ b/static/cgi/share.php
@@ -2,7 +2,7 @@
 
 // Change these variables
 $gnusocialuser = "fsfe@quitter.no";
-$twitteruser = "@fsfe";
+$twitteruser = "fsfe";
 $flattruser = "fsfe";
 $supporturl = "https://fsfe.org/donate?pmpc";
 

From 1c1957fee680634a2f8a1268d4c5e135d99d6edb Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Fri, 26 May 2017 00:06:00 +0200
Subject: [PATCH 6/6] fix layer when button activated

---
 static/css/buttons-side.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/css/buttons-side.css b/static/css/buttons-side.css
index d7fad0c..b8e978c 100644
--- a/static/css/buttons-side.css
+++ b/static/css/buttons-side.css
@@ -3,8 +3,7 @@ div.sharecolumn .share-buttons.side {
   left: 0;
   padding: 0.1vh 0.5vh;
   position: fixed;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 35%;
   z-index: 10;
   flex-direction: column;
 }
@@ -77,7 +76,8 @@ div.sharecolumn .share-buttons.side {
 .share-buttons.side input[type="radio"]:checked + span,
 .share-buttons.side input[type="checkbox"]:checked + span {
   position: absolute;
-  margin-top: 3.5em; margin-left: -10em;
+  margin-top: 3.5em; margin-left: 0;
+  width: 300px;
   padding: .5em;
   z-index: 3;
   background-color: #333;