latest version of story pages (23b15b44) · Commits · The Tor Project / Web / community

assets/scss/_community.scss

+20 −14

Original line number	Diff line number	Diff line
		@@ -173,23 +173,29 @@ a.anchor {
		}
		}

		#share-story {
		#share-story-title {
		font-weight: 700;
		}
		#share-story-links {
		a {
		font-size: 1.2rem;
		font-size: 1.1rem;
		white-space: nowrap;
		}
		.fab, .fas {
		font-size: 1.5rem;
		font-size: 1.3rem;
		padding-right: 0.5rem;
		}
		span {
		display: none;
		}
		}
		@include media-breakpoint-up(md) {

		@include media-breakpoint-up(lg) {
		#share-story-links {
		max-width: 700px;
		span {
		display: inline;
		}
		a {
		width: 100% !important;
		margin: 0 1rem;
		}
		}
		}

templates/outreach-story.html

+10 −34

Original line number	Diff line number	Diff line
		{% include 'breadcrumb.html' %}
		{% set share_url = this.path\|url(alt=this.alt,external=true) %}
		{% set share_title = _("{}'s Story").format(this.title) %}
		{% set share_text = _("Here's the story of {} showing the importance of encryption.").format(this.title) %}
		{% set share_message = _("Check out this story about the importance of encryption: {}").format(share_url) %}
		<meta property="og:url" content="{{ share_url }}" />
		@@ -12,31 +11,20 @@
		<div class="row py-5">
		<div class="col-lg-3 px-3">
		<img class="mb-4" src="{{ this.attachments.images.get('portrait.png')\|url }}" />
		<div class="row mb-2" id="share-story-links">
		<a class="col-auto pt-0 pb-2 copy-link" href="#"><i class="fas fa-link"></i><span>Copy link</span></a>
		<a class="col-auto pt-0 pb-2" target="blank" rel="noreferrer" href="http://www.facebook.com/share.php?u={{ share_url\|urlencode }}"><i class="fab fa-facebook"></i><span>Facebook</span></a>
		<a class="col-auto pt-0 pb-2" target="blank" rel="noreferrer" href="https://twitter.com/intent/tweet?url={{ share_url\|urlencode }}&text={{ share_text\|urlencode }}"><i class="fab fa-twitter"></i><span>Twitter</span></a>
		<a class="col-auto pt-0 pb-2 mastodon-share" target="blank" rel="noreferrer" href="https://mastodonshare.com/?url={{ share_url\|urlencode }}&text={{ share_text\|urlencode }}"><i class="fab fa-mastodon"></i><span>Mastodon</span></a>
		</div>
		</div>
		<div class="col-lg-9" id="story-full">
		{{ this.body }}
		<p class="font-italic">{{ _("{} is a pseudonym. This is an anonymous story submitted by a Tor user.").format(this.title) }}</p>
		{%- for cat in this.category %}
		<a class="btn btn-outline-primary small mt-3" href="../#{{ cat }}">{{ cat }}</a>
		{%- endfor %}
		</div>
		<div class="col-lg-9" id="story-full">
		{{ this.body }}
		<a class="btn btn-outline-primary" href="{{ this.parent\|url(alt=this.alt) }}#preamble">{{ _('Read more stories') }}</a>
		</div>
		</div>
		<div class="row p-4 bg-primary" id="share-story">
		<div class="col">
		<p class="text-white" id="share-story-title">{{ _("Share this story on social media") }}</p>
		<div class="row mb-2" id="share-story-links">
		<a class="col-auto pt-0 pb-2 mr-3 text-white copy-link" href="#"><i class="fas fa-link"></i>Copy link</a>
		<a class="text-white col-auto pt-0 pb-2 mr-3" target="blank" rel="noreferrer" href="https://twitter.com/intent/tweet?url={{ share_url\|urlencode }}&text={{ share_text\|urlencode }}"><i class="fab fa-twitter"></i>Twitter</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white mastodon-share" target="blank" rel="noreferrer" href="https://mastodonshare.com/?url={{ share_url\|urlencode }}&text={{ share_text\|urlencode }}"><i class="fab fa-mastodon"></i>Mastodon</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white" target="blank" rel="noreferrer" href="https://t.me/share/url?url={{ share_url\|urlencode }}&text={{ share_text\|urlencode }}"><i class="fab fa-telegram"></i>Telegram</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white" target="blank" rel="noreferrer" href="http://www.facebook.com/share.php?u={{ share_url\|urlencode }}"><i class="fab fa-facebook"></i>Facebook</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white reddit-share" target="blank" rel="noreferrer" href="https://www.reddit.com/r/privacy/submit?title={{ share_title\|urlencode }}&url={{ share_url\|urlencode }}"><i class="fab fa-reddit"></i>Reddit</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white" target="blank" rel="noreferrer" href="https://api.whatsapp.com/send?text={{ share_message\|urlencode }}"><i class="fab fa-whatsapp"></i>WhatsApp</a>
		<a class="col-auto pt-0 pb-2 mr-3 text-white" target="blank" rel="noreferrer" href="https://tumblr.com/widgets/share/tool?canonicalUrl={{ share_url\|urlencode }}"><i class="fab fa-tumblr"></i>Tumblr</a>
		</div>
		<p class="text-white small m-0">{{ _("These links are not an endorsement of social media. They are provided for your convenience.") }}</p>
		</div>
		</div>
		</div>
		<script type="text/javascript">
		@@ -60,16 +48,4 @@ mastodon_link.addEventListener('click', (e) => {
		mastodon_link.href = 'https://' + instance + '/share?url={{ share_url\|urlencode }}';
		}
		});
		// share to Reddit, prompt for subreddit
		const reddit_link = document.querySelector('.reddit-share');
		reddit_link.addEventListener('click', (e) => {
		let subreddit = window.prompt(
		'Please enter the name of the subreddit'
		);
		if (!subreddit) {
		e.preventDefault();
		} else {
		reddit_link.href = 'https://www.reddit.com/r/' + subreddit + '/submit?title={{ share_title\|urlencode }}&url={{ share_url }}';
		}
		});
		</script>