Merge branch 'feature/share-links' of pmpc/website into master
commit
0d253ed744
|
@ -2,4 +2,4 @@ id: diaspora
|
||||||
name: Diaspora
|
name: Diaspora
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
||||||
|
|
|
@ -2,4 +2,4 @@ id: gnusocial
|
||||||
name: GNU Social
|
name: GNU Social
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: reddit
|
||||||
name: Reddit
|
name: Reddit
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: twitter
|
||||||
name: Twitter
|
name: Twitter
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: gplus
|
||||||
name: Google+
|
name: Google+
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: facebook
|
||||||
name: Facebook
|
name: Facebook
|
||||||
titleBefore: Auf
|
titleBefore: Auf
|
||||||
titleAfter: teilen
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: support
|
||||||
name: Kampagne unterstützen!
|
name: Kampagne unterstützen!
|
||||||
titleBefore:
|
titleBefore:
|
||||||
titleAfter:
|
titleAfter:
|
||||||
link: https://fsfe.org/donate?pmpc
|
|
||||||
|
|
|
@ -2,4 +2,4 @@ id: diaspora
|
||||||
name: Diaspora
|
name: Diaspora
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
||||||
|
|
|
@ -2,4 +2,4 @@ id: gnusocial
|
||||||
name: GNU Social
|
name: GNU Social
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: reddit
|
||||||
name: Reddit
|
name: Reddit
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: twitter
|
||||||
name: Twitter
|
name: Twitter
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: gplus
|
||||||
name: Google+
|
name: Google+
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: facebook
|
||||||
name: Facebook
|
name: Facebook
|
||||||
titleBefore: Share on
|
titleBefore: Share on
|
||||||
titleAfter:
|
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
|
|
||||||
|
|
|
@ -2,4 +2,3 @@ id: support
|
||||||
name: Support the Campaign!
|
name: Support the Campaign!
|
||||||
titleBefore:
|
titleBefore:
|
||||||
titleAfter:
|
titleAfter:
|
||||||
link: https://fsfe.org/donate?pmpc
|
|
||||||
|
|
|
@ -22,6 +22,8 @@
|
||||||
{{ "<!-- Custom CSS -->" | safeHTML }}
|
{{ "<!-- Custom CSS -->" | safeHTML }}
|
||||||
<link rel="stylesheet" href="{{ "css/creative.css" | absURL }}" type="text/css">
|
<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/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">
|
<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 }}
|
{{ "<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->" | safeHTML }}
|
||||||
|
|
|
@ -1,7 +1,31 @@
|
||||||
{{ "<!-- SHARE COLUMN -->" | safeHTML }}
|
{{ "<!-- SHARE COLUMN -->" | safeHTML }}
|
||||||
{{ $data := index .Site.Data .Site.Language.Lang }}
|
{{ $data := index .Site.Data .Site.Language.Lang }}
|
||||||
<aside class="sharecolumn">
|
<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 }}#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 -->
|
||||||
|
|
||||||
{{ range $data.share }}
|
{{ range $data.share }}
|
||||||
<a id="{{ .id }}-left" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}" target="_blank"> </a>
|
{{ if eq .userinput true }}
|
||||||
|
<label class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}" for="{{ .id }}-share-side"> </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 }}
|
{{ end }}
|
||||||
</aside>
|
|
||||||
|
{{ range $data.share }}
|
||||||
|
{{ if ne .userinput true }}
|
||||||
|
<button type="submit" name="service" value="{{ .id }}" class="button share-{{ .id }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}"> </button>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
|
@ -18,9 +18,36 @@
|
||||||
|
|
||||||
<div class="share-buttons">
|
<div class="share-buttons">
|
||||||
{{ .Site.Params.spread.shareTitle }}
|
{{ .Site.Params.spread.shareTitle }}
|
||||||
|
<!--
|
||||||
{{ range $data.share }}
|
{{ range $data.share }}
|
||||||
<a id="{{ .id }}" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}" target="_blank">{{ .name }}</a>
|
<a id="{{ .id }}" href="{{ .link }}" title="{{ .titleBefore}} {{ .name }} {{ .titleAfter }}" target="_blank">{{ .name }}</a>
|
||||||
{{ end }}
|
{{ 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
|
@ -100,161 +100,3 @@ table.signatures th, table.signatures td {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 2px;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue