Merge branch 'master' of git.fsfe.org:pmpc/website into feature/restyle

# Conflicts:
#	static/css/custom.css

.drone.yml

@@ -0,0 +1,16 @@
+pipeline:
+  build:
+    image: williamyeh/ansible:debian8
+    commands:
+        - ansible-playbook -vvv playbook.yml -i hosts --syntax-check
+
+  deploy:
+    image: williamyeh/ansible:debian8
+    secrets: [ ssh_key ]
+    commands:
+      - mkdir /root/.ssh && echo "$SSH_KEY" > /root/.ssh/id_rsa && chmod 0600 /root/.ssh/id_rsa
+      - ssh-keyscan -H lund.fsfeurope.org >> ~/.ssh/known_hosts
+      - ansible-playbook playbook.yml -i hosts
+    when:
+       branch: master
+

000-default.conf

@@ -0,0 +1,15 @@
+<VirtualHost *:80>
+  ServerAdmin webmaster@localhost
+  DocumentRoot /usr/share/blog/public/
+
+  ErrorLog ${APACHE_LOG_DIR}/error.log
+  CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+<Directory /usr/share/blog/public/>
+  Options FollowSymLinks Includes
+  AllowOverride All
+  Order allow,deny
+  Allow from all
+</Directory>
+
+</VirtualHost>

Dockerfile

@@ -0,0 +1,24 @@
+FROM php:7.0-apache
+
+ENV HUGO_VERSION 0.20.7
+ENV HUGO_BINARY hugo_${HUGO_VERSION}_Linux-64bit.deb
+
+RUN apt-get update && apt-get upgrade -y && \
+    apt-get install -y git curl unzip python3
+
+RUN curl -sS https://getcomposer.org/installer \
+    | php -- --install-dir=/usr/local/bin --filename=composer
+
+RUN composer require phpmailer/phpmailer
+
+RUN a2enmod rewrite
+
+ADD https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/${HUGO_BINARY} /tmp/hugo.deb
+RUN dpkg -i /tmp/hugo.deb \
+	&& rm /tmp/hugo.deb
+
+COPY site/ /usr/share/blog
+
+COPY 000-default.conf /etc/apache2/sites-enabled/
+
+CMD /usr/share/blog/build/build.sh /usr/share/blog/data/signatures/signatures.json && apache2-foreground

README.md

@@ -2,13 +2,13 @@
 
 This website is the core of the "Public Money, Public Code" campaign. It is based on [Hugo](https://gohugo.io/), a modern static website generator.
 
-Since the page is still in an early draft version, the page hasn't been released officially yet. However, you can see the current status of the `public` folder on [pmpc.mehl.mx](http://pmpc.mehl.mx). Please do not spread this URL.
+The page is visible at [publiccode.eu](https://publiccode.eu). Please do not spread this URL. The website requires authentication to be visited. Username is `pmpc`, password is `publicmoneypubliccode`. Please do not spread this information to outside people not involved in the website development.
 
 ## Contributing to the website
 
 ### Prerequisites
 
-In order to modify the website, you need `hugo` and `git` installed on your computer. If Hugo isn't available in your package manager, obtain it from its [official website](https://gohugo.io). The latest Hugo version is 0.19, older versions haven't been tested. Please make sure that you use an as recent version as possible to avoid errors.
+In order to modify the website, you need `hugo` and `git` installed on your computer. If Hugo isn't available in your package manager, obtain it from its [official website](https://gohugo.io). We tested the website build with Hugo from version 0.19 upwards. Please make sure that you use an as recent version as possible to avoid errors.
 
 ### Configuring Git
 
@@ -16,24 +16,11 @@ First of all, you'll need an account on git.fsfe.org. With an FSFE account (FSFE
 
 As part of the campaign team you can get full write access to this repository. Please contact one of [pmpc](https://git.fsfe.org/pmpc)'s admins to give your account the necessary privileges.
 
-The most comfortable way for you to use Git is to use SSH keys for authentication. They won't require you to type in your username and password each time. Please read a [manual from Github](https://help.github.com/articles/connecting-to-github-with-ssh/) on the usage of SSH keys with their service. Although Github looks a bit different, it may help you understanding the logic. Please replace `github.com` with `git.fsfe.org`. However, a short step-by-step list:
-
-1. Check whether you already have an SSH key (`ls -al ~/.ssh`)
-2. If not generate a new SSH key (`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"`). Omit typing in a password if you are sure that you can protect your SSH private key. If you set a password, consider using `ssh-agent` to avoid having to type in the SSH key's password each time you use it.
-3. Add the public SSH key to your account at git.fsfe.org. Copy the content of `.~/ssh/id_rsa.pub` in `Your Settings > SSH Keys > Add Key`.
-4. Try to log in (`ssh git@git.fsfe.org`). If you read "Hi there, You've successfully authenticated, but Gitea does not provide shell access.", it's working!
-
-Then you have to set your git identity and a required default setting for git pushes:
-
-```sh
-git config --global user.name "John Doe"
-git config --global user.email johndoe@example.com
-git config --global push.default simple
-```
+In the FSFE's wiki, you'll find [information about our Git server](https://wiki.fsfe.org/TechDocs/Git) installation, and some guides for basic procedures.
 
 ### Cloning the website
 
-Now navigate to a directory on your computer where you want the PMPC website to be stored. In this example, it's `FSFE/PMPC/website` in your user's directory.
+Although the mentioned Git guides will enable you to understand how to download the website's repository, here's a short howto: Navigate to a directory on your computer where you want the PMPC website to be stored. In this example, it's `FSFE/PMPC/website` in your user's directory.
 
 ```sh
 mkdir -p ~/FSFE/PMPC/                           # Create the directory if it doesn't exist yet
@@ -41,35 +28,45 @@ cd ~/FSFE/PMPC/                                 # go to the newly created PMPC d
 git clone git@git.fsfe.org:pmpc/website.git     # clone the website to the folder website
 ```
 
-In the newly created folder `pmpc-website` you'll find all source files the website consists of now.
+In the newly created folder `pmpc-website` you'll find all source files the website consists of now. The hugo files are located under site/, whereas in the root directory you'll only find files informational files and those relevant for our build process (Drone, Ansible, Docker, Apache).
 
 ### Your first modification
 
-Now we will modify the website a bit, review the changes and push them to the repository to make them available to other users and the live website.
+For more experienced Git users we recommend the Fork & Pull Request workflow, which you'll also find in the [wiki's Git Guides section](https://wiki.fsfe.org/TechDocs/Git#Guides_on_specific_actions) (not available yet). However, beginners can also directly commit to the repository which saves them some steps.
+
+As an example, we will modify the website a bit, review the changes and push them to the repository to make them available to other users and the live website.
 
 1. Navigate to the website's root directory (in the last example `~/FSFE/PMPC/website/`) and open a terminal window there. Type in `git pull`. This will get the latest changes from the server
 2. After you received the latest version, you can edit the website. For testing purposes, open the file `CONTRIBUTORS.md`, scroll to the very end, and add your name there. No worries, this won't have any visible effect on the website.
-3. Now check whether the website looks fine. Execute `hugo server` on your terminal. You will see a link containing `localhost:1313`. Open it and you see a preview of what the website looks like. This will help you to understand whether your changes actually have the effect you wanted.
-4. If you're happy with it, you can execute `hugo`. This will build the website in its final form to the subfolder `public`. Make sure that the output of that command doesn't contain any errors or warnings. Note that your local built won't be sent to the server because it builds the website itself.
-5. Check with `git status` what files have been changed on your side. In this example, you should see the file `CONTRIBUTORS.md` marked red. This means that the file has been changed but you didn't mark it as to be pushed to the server yet. If there're more files listed, make sure that you actually intended to modify these files!
-6. Add the changed file to the commit queue with `git add CONTRIBUTORS.md`. In case you have changed more files, you can also type `git add .` to add all files at once. With `git status` you should see all files marked green now, which means that they're ready to be committed.
-7. Commit the files with `git commit -m "added myself to the contributors list"`. In the comment after `-m` you should always write something meaningful that helps people to understand what you actually did.
-8. Unlike with SVN, you're not finished yet. You will have to execute `git push` to actually upload the modifications to the server.
+3. In the terminal, execute `cd site/` to navigate in the right directory for hugo's website build.
+4. Now check whether the website looks fine. Execute `hugo server` on your terminal. You will see a link containing `localhost:1313`. Open it and you see a preview of what the website looks like. This will help you to understand whether your changes actually have the effect you wanted.
+5. If you're happy with it, you can execute `hugo`. This will build the website in its final form to the subfolder `public`. Make sure that the output of that command doesn't contain any errors or warnings. Note that your local built won't be sent to the server because it builds the website itself.
+6. Check with `git status` what files have been changed on your side. In this example, you should see the file `../CONTRIBUTORS.md` marked red. This means that the file has been changed but you didn't mark it as to be pushed to the server yet. If there're more files listed, make sure that you actually intended to modify these files!
+7. Add the changed file to the commit queue with `git add ../CONTRIBUTORS.md`. In case you have changed more files, you can also type `git add .` in the repositories root level to add all files at once. With `git status` you should see all files marked green now, which means that they're ready to be committed.
+8. Commit the files with `git commit -m "added myself to the contributors list"`. In the comment after `-m` you should always write something meaningful that helps people to understand what you actually did.
+9. Unlike with SVN, you're not finished yet. You will have to execute `git push` to actually upload the modifications to the server.
 
 
 ## Important file paths
 
 The website structure is very easy. The most important files and directories are:
 
-- `config.toml`: Headlines, site title, many texts.
-- `data/resources/`: Content of the 3-column "resource" boxes which you can hover over and click to see the text.
-- `data/share/`: Services where people can share to. Is being used in the "Spread" section and the left-side sharing icons
-- `static/`: CSS, images, and Javascript files for the design.
-- `static/img/share/`: Image files for share buttons.
-- `static/css/custom.css`: File where all custom CSS code should be written to.
-- `layouts/`: HTML structure (scaffold) for the website. Useful if you want to add another section or modify anchor links or CSS classes.
-- `public/`: Built files which are used to display the website. Generated by running `hugo`.
+- `site/config.toml`: Headlines, site title, many texts.
+- `site/data/resources/`: Content of the 3-column "resource" boxes which you can hover over and click to see the text.
+- `site/data/share/`: Services where people can share to. Is being used in the "Spread" section and the left-side sharing icons
+- `site/static/`: CSS, images, and Javascript files for the design.
+- `site/static/img/share/`: Image files for share buttons.
+- `site/static/css/custom.css`: File where all custom CSS code should be written to.
+- `site/layouts/`: HTML structure (scaffold) for the website. Useful if you want to add another section or modify anchor links or CSS classes.
+- `site/public/`: Built files which are used to display the website. Generated by running `hugo`.
 
-## Technical background information
+## Technical information about building
+
+The FSFE uses Drone to automatically deploy the PMPC website. The website is
+automatically deployed when there's a push to the master branch of the
+repository, as well as once an hour (to update signatures).
+
+This is the latest build status:
+
+[![Build Status](https://drone.fsfe.org/api/badges/pmpc/website/status.svg)](https://drone.fsfe.org/pmpc/website)
 
-The repository will be downloaded and built every 5 minutes to the live website on pmpc.mehl.mx. So please wait a bit until your modifications are visible. It shouldn't look different from what `hugo server` shows you.

data/de/share/1-diaspora.yaml

@@ -1,5 +0,0 @@
-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

data/de/share/2-gnusocial.yaml

@@ -1,5 +0,0 @@
-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

data/de/share/3-reddit.yaml

@@ -1,5 +0,0 @@
-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

data/de/share/4-twitter.yaml

@@ -1,5 +0,0 @@
-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

data/de/share/5-gplus.yaml

@@ -1,5 +0,0 @@
-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

data/de/share/6-facebook.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/1-diaspora.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/2-gnusocial.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/3-reddit.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/4-twitter.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/5-gplus.yaml

@@ -1,5 +0,0 @@
-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

data/en/share/6-facebook.yaml

@@ -1,5 +0,0 @@
-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

hosts

@@ -0,0 +1 @@
+lund.fsfeurope.org

layouts/partials/sharecolumn.html

@@ -1,7 +0,0 @@
-{{ "<!-- SHARE COLUMN -->" | safeHTML }}
-{{ $data := index .Site.Data .Site.Language.Lang }}
-<aside class="sharecolumn">
-  {{ range $data.share }}
-    <a id="{{ .id }}-left" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter  }}" target="_blank">&nbsp;</a>
-  {{ end }}
-</aside>

layouts/partials/spread.html

@@ -1,28 +0,0 @@
-{{ "<!-- SPREAD -->" | safeHTML }}
-{{ $data := index .Site.Data .Site.Language.Lang }}
-<section id="spread" class="bg-dark">
-    <div class="container">
-        <div class="row">
-          <div class="col-lg-8 col-lg-offset-2 text-center">
-              {{ with .Site.Params.spread.headline }}
-                  <h2 class="section-heading">{{ . }}</h2>
-              {{ end }}
-              {{ with .Site.Params.spread.promoText }}
-                  <p class="text-faded">{{ . | markdownify }}</p>
-              {{ end }}
-                  <a href="{{ .Site.Params.spread.promoButtonLink }}" class="btn btn-default btn-xl page-scroll wow tada">{{ .Site.Params.spread.promoButtonText }}</a>
-              <hr class="light">
-              {{ with .Site.Params.spread.shareText }}
-                  <p class="text-faded">{{ . | markdownify }}</p>
-              {{ end }}
-              
-              <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 }}
-              </div>
-            </div>
-        </div>
-    </div>
-</section>

playbook.yml

@@ -0,0 +1,21 @@
+---
+- hosts: lund.fsfeurope.org
+  remote_user: root
+
+  tasks:
+    - name: build the pmpc container
+      command: docker build --no-cache=true -t pmpc https://git.fsfe.org/pmpc/website.git
+
+    - name: run pmpc
+      docker_container:
+        name: pmpc
+        image: pmpc
+        state: started
+        restart: yes
+        env:
+          HUGO_BASE_URL: https://publiccode.eu/
+          VIRTUAL_HOST: publiccode.eu
+          LETSENCRYPT_HOST: publiccode.eu
+          LETSENCRYPT_EMAIL: jonas@fsfe.org
+        volumes:
+          - "/srv/pmpc-signatures:/usr/share/blog/data/signatures:rw"

site/build/build.sh

@@ -4,7 +4,7 @@ basedir="${0%/*}/.."
 sigdb="$1"
 
 # Clean signatures database
-"$basedir/build/clean_database.py" "$sigdb" "$basedir/data/signatures/signatures_clean.json"
+"$basedir/build/clean_database.py" "$sigdb" "$basedir/data/signatures/data/signatures_clean.json"
 
 # Execute hugo buildrun
 cd "$basedir"

site/config.toml

@@ -9,7 +9,12 @@ DefaultContentLanguage = "en"
   languageCode = "en-us"
   languageName = "English"
   favicon = "favicon.ico"
+  url = "https://publiccode.eu"
 
+[params.sharemeta]
+  previewImage = "img/header.jpg"
+  fbPageID = "336939393138306"
+  twitterUser = "@fsfe"
 
 # Navigation
 [params.navigation]

site/data/de/share/1-diaspora.yaml

@@ -0,0 +1,5 @@
+id: diaspora
+name: Diaspora
+titleBefore: Auf
+titleAfter: teilen
+userinput: true

site/data/de/share/2-gnusocial.yaml

@@ -0,0 +1,5 @@
+id: gnusocial
+name: GNU Social
+titleBefore: Auf
+titleAfter: teilen
+userinput: true

site/data/de/share/3-reddit.yaml

@@ -0,0 +1,4 @@
+id: reddit
+name: Reddit
+titleBefore: Auf
+titleAfter: teilen

site/data/de/share/4-twitter.yaml

@@ -0,0 +1,4 @@
+id: twitter
+name: Twitter
+titleBefore: Auf
+titleAfter: teilen

site/data/de/share/5-gplus.yaml

@@ -0,0 +1,4 @@
+id: gplus
+name: Google+
+titleBefore: Auf
+titleAfter: teilen

site/data/de/share/6-facebook.yaml

@@ -0,0 +1,4 @@
+id: facebook
+name: Facebook
+titleBefore: Auf
+titleAfter: teilen

site/data/de/share/7-support.yaml

@@ -0,0 +1,4 @@
+id: support
+name: Kampagne unterstützen!
+titleBefore:
+titleAfter:

site/data/en/share/1-diaspora.yaml

@@ -0,0 +1,5 @@
+id: diaspora
+name: Diaspora
+titleBefore: Share on
+titleAfter: 
+userinput: true

site/data/en/share/2-gnusocial.yaml

@@ -0,0 +1,5 @@
+id: gnusocial
+name: GNU Social
+titleBefore: Share on
+titleAfter: 
+userinput: true

site/data/en/share/3-reddit.yaml

@@ -0,0 +1,4 @@
+id: reddit
+name: Reddit
+titleBefore: Share on
+titleAfter: 

site/data/en/share/4-twitter.yaml

@@ -0,0 +1,4 @@
+id: twitter
+name: Twitter
+titleBefore: Share on
+titleAfter: 

site/data/en/share/5-gplus.yaml

@@ -0,0 +1,4 @@
+id: gplus
+name: Google+
+titleBefore: Share on
+titleAfter: 

site/data/en/share/6-facebook.yaml

@@ -0,0 +1,4 @@
+id: facebook
+name: Facebook
+titleBefore: Share on
+titleAfter: 

site/data/en/share/7-support.yaml

@@ -0,0 +1,4 @@
+id: support
+name: Support the Campaign!
+titleBefore:
+titleAfter:

site/layouts/partials/head.html

@@ -10,6 +10,25 @@
 {{ range .Translations }}
   <link type="text/html" rel="alternate" hreflang="{{ .Lang }}" lang="{{ .Lang }}" href="{{ .RelPermalink }}" title="{{ .Site.Params.languageName }}">
 {{end}}
+
+{{ "<!-- Facebook meta-data -->" | safeHTML }}
+<meta property="og:title" content="{{ .Site.Title }}"/>
+<meta property="og:url" content="{{ .Site.Params.url }}{{ .RelPermalink }}"/>
+<meta property="og:image" content="{{ .Site.Params.url }}/{{ .Site.Params.Sharemeta.previewImage }}"/>
+<meta property="og:description" content="{{ .Site.Params.description }}"/>
+<meta property="og:type" content="website"/>
+<meta property="og:locale" content="{{ .Lang }}"/>
+<meta property="fb:page_id" content="{{ .Site.Params.Sharemeta.fbPageID }}"/>
+
+{{ "<!-- Twitter meta-data -->" | safeHTML }}
+<meta name="twitter:title" content="{{ .Site.Title }}">
+<meta name="twitter:url" content="{{ .Site.Params.url }}{{ .RelPermalink }}">
+<meta name="twitter:image" content="{{ .Site.Params.url }}/{{ .Site.Params.Sharemeta.previewImage }}">
+<meta name="twitter:description" content="{{ .Site.Params.description }}">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="{{ .Site.Params.Sharemeta.twitterUser }}">
+<meta name="twitter:creator" content="{{ .Site.Params.Sharemeta.twitterUser }}">
+
 {{ "<!-- Favicon -->" | safeHTML }}
 <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}">
 {{ "<!-- Bootstrap Core CSS -->" | safeHTML }}
@@ -22,6 +41,8 @@
 {{ "<!-- 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">
 
 {{ "<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->" | safeHTML }}

site/layouts/partials/page-signatures.html

@@ -12,7 +12,7 @@
                   <th>{{ .Site.Params.Subpage.Signatures.country }}</th>
                   <th>{{ .Site.Params.Subpage.Signatures.zip }}</th>
                 </tr>
-                {{ range .Site.Data.signatures }}
+                {{ range .Site.Data.signatures.data }}
                   {{ range sort . "id" "desc" }}
                     {{ if (eq .confirmed "yes") | and (eq .permPub "yes")  }}
                      <tr>

site/layouts/partials/sharecolumn.html

@@ -0,0 +1,31 @@
+{{ "<!-- SHARE COLUMN -->" | safeHTML }}
+{{ $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-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="{{ .Site.Title }}" 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-side">&nbsp;</label>
+        <input name="popup" id="{{ .id }}-share-side" type="radio" />
+        <span class="popup {{ .id }}">
+          <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>
+    {{ end }}
+  {{ end }}
+  
+  {{ 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>

site/layouts/partials/spread.html

@@ -0,0 +1,55 @@
+{{ "<!-- SPREAD -->" | safeHTML }}
+{{ $data := index .Site.Data .Site.Language.Lang }}
+<section id="spread" class="bg-dark">
+    <div class="container">
+        <div class="row">
+          <div class="col-lg-8 col-lg-offset-2 text-center">
+              {{ with .Site.Params.spread.headline }}
+                  <h2 class="section-heading">{{ . }}</h2>
+              {{ end }}
+              {{ with .Site.Params.spread.promoText }}
+                  <p class="text-faded">{{ . | markdownify }}</p>
+              {{ end }}
+                  <a href="{{ .Site.Params.spread.promoButtonLink }}" class="btn btn-default btn-xl page-scroll wow tada">{{ .Site.Params.spread.promoButtonText }}</a>
+              <hr class="light">
+              {{ with .Site.Params.spread.shareText }}
+                  <p class="text-faded">{{ . | markdownify }}</p>
+              {{ end }}
+              
+              <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 }}#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" />
+                  
+                  {{ 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>
+    </div>
+</section>

site/static/.htaccess

@@ -0,0 +1,14 @@
+RewriteEngine On
+RewriteBase /
+
+# Redirect 404 errors to nice page
+ErrorDocument 404 /404.html
+
+# Nicer URL for share buttons
+RewriteRule ^share/?$ /cgi/share.php [NC,L]
+
+# Password-protect the site until it's released
+AuthType Basic
+AuthName "This website will be released soon. Please follow our news on fsfe.org to stay updated."
+AuthUserFile /usr/share/blog/public/.htpasswd
+Require valid-user

site/static/.htpasswd

@@ -0,0 +1 @@
+pmpc:$apr1$e.WcM84k$NYeWE2apCKXWz4Og1QOwC/

site/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;
+  }
+}
+
+?>

site/static/cgi/sign.php

@@ -1,12 +1,14 @@
 <?php
+require '/var/www/html/vendor/phpmailer/phpmailer/PHPMailerAutoload.php';
+
 $timer_start = microtime(true);  // Start counter for PHP execution time tracking
 
 $codemod = 2138367;   // modificator with which the confirmation ID will be obfuscated
 $output = "";
-$selfurl = "http://pmpc.mehl.mx/cgi/sign.php";  // absolute URL of this PHP script
-$db = "../../signatures.json";  // Signature database path
-$ipdb = "../../ips.json";  // IP database path
-$spamdb = "../../spammer_" . date('Y-m-d') . ".json";  // This day's potential spammer database
+$selfurl = "https://publiccode.eu/cgi/sign.php";  // absolute URL of this PHP script
+$db = "/usr/share/blog/data/signatures/signatures.json";  // Signature database path
+$ipdb = "/usr/share/blog/data/signatures/ips.json";  // IP database path
+$spamdb = "/usr/share/blog/data/signatures/spammer_" . date('Y-m-d') . ".json";  // This day's potential spammer database
 
 ///////////////////
 /// SPAM CHECKS ///
@@ -150,19 +152,22 @@ if ($action === "sign") {
   file_put_contents($db, $allsig, LOCK_EX);
   unset($allsig);
  
+  $mail = new PHPMailer;
+
+  $mail->isSMTP();
+  $mail->Host  = "mail.fsfe.org";
+  $mail->setFrom('noreply@fsfe.org', 'Public Money, Public Code');
+ 
   // Send email asking for confirmation
-  $to       = $email;
-  $subject  = "One step left to sign the \"Public Money - Public Code\" letter";
-  $message  = "Dear $name, \r\n\r\n" .
+  $mail->addAddress($email);
+  $mail->Subject  = "One step left to sign the \"Public Money - Public Code\" letter";
+  $mail->Body  = "Dear $name, \r\n\r\n" .
               "Thank you for signing the open \"Public Money - Public Code\" letter! \r\n\r\n" .
               "In order to confirm your signature, please visit following link:\r\n" . 
               "$selfurl?action=confirm&id=$codeid&code=$code \r\n\r\n" .
               "If your confirmation succeeds, your signature will appear on the website within the next few hours.";
-  $headers  = "From: noreply@fsfe.org \r\n" .
-              "Message-ID: <confirmation-$code@fsfe.org> \r\n" .
-              "X-Mailer: PHP";
 
-  mail($to, $subject, $message, $headers);
+  $mail->Send();
   
   $output .= "Thank you for signing our open letter! <br /><br />";
   $output .= "We just sent an email to your address ($email) for you to confirm your signature.";

site/static/css/buttons-side.css

@@ -0,0 +1,134 @@
+div.sharecolumn .share-buttons.side {
+  display: flex;
+  left: 0;
+  padding: 0.1vh 0.5vh;
+  position: fixed;
+  top: 35%;
+  z-index: 10;
+  flex-direction: column;
+}
+@media(max-width:767px) {
+  .share-buttons.side {
+    display: none !important;
+  }
+}
+
+.share-buttons.side button.button,
+.share-buttons.side label.button {
+  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: 0;
+  width: 300px;
+  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;
+  }
+}

site/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;
+}

site/static/css/custom.css

@@ -0,0 +1,252 @@
+/* LANGUAGE SECTION */
+#language {
+    color: #fff;
+    background-color: #333;
+    padding: 20px;
+}
+#language p {
+  margin-bottom: 5px;
+}
+#language ul {
+  padding: 0px;
+}
+#language li {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+/* LEGAL SECTION */
+#legal {
+  color: #fff;
+  background-color: #000;
+  padding: 10px;
+  margin: 0px;
+}
+#legal p {
+  padding: 0px;
+  margin: 0px;
+  font-size: 0.8em;
+}
+#legal a {
+    color: #83bdd6;
+}
+#legal a:hover {
+    color: #2093C4;
+}
+
+#contact .fa { margin: 10px 0 }
+
+/* SIGN FORM */
+#sign form {
+  color: #333;
+  font-size: 18px;
+}
+#sign form label {
+  font-weight: 400;
+}
+.sign-input {
+  position: relative;
+}
+.sign-input:before {
+  font-family: "FontAwesome";
+  font-size: 20px;
+  position: absolute;
+  left: 4px;
+  top: 2px;
+}
+.sign-input input {
+  background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
+  border-radius: 7px;
+  padding: 0 0 0 30px;
+  width: 270px;
+  height: 31px;
+}
+.sign-input select {
+  background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
+  border-radius: 7px;
+  padding: 0 0 0 30px;
+  width: 270px;
+  height: 31px;
+}
+.form-na:before {
+  content: "\f2c3";
+}
+.form-em:before {
+  content: "\f003";
+}
+.form-cn:before {
+  content: "\f041";
+  padding-left: 4px;
+}
+.form-zp:before {
+  content: "\f08d";
+  padding-left: 3px;
+}
+p.form-pe {
+  text-align: left;
+  max-width: 530px; /* to not let the checkboxed go far more left than the input boxes above */
+  margin: 0 auto;
+}
+p.form-pe a {
+  color: inherit;
+  text-decoration: underline;
+}
+#honey {
+  display: none;
+}
+
+/* SIGNATURE TABLE */
+table.signatures {
+  margin: 0 auto;
+}
+table.signatures th, table.signatures td {
+  border: 1px solid darkgrey;
+  border-collapse: collapse;
+  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: #202d79;
+  background-image: url("/img/share/fsfe_white.png");
+  color: #fff;
+}
+.share-buttons a#support:hover {
+  background-color: #0a1763 !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;
+}
+
+/* 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");
+}