From 6b36c1ca0a3c73d41ecdc2613f0654f97e166446 Mon Sep 17 00:00:00 2001 From: vimux Date: Mon, 11 Jun 2018 21:41:16 +0300 Subject: [PATCH] Add sharing buttons --- README.md | 10 ++++++ i18n/en.yaml | 7 ++++ layouts/_default/single.html | 1 + layouts/partials/post_share.html | 44 ++++++++++++++++++++++++ layouts/partials/svg/pocket.svg | 1 + layouts/partials/svg/reddit.svg | 1 + static/css/main.css | 58 +++++++++++++++++++++++++++++++- 7 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 layouts/partials/post_share.html create mode 100644 layouts/partials/svg/pocket.svg create mode 100644 layouts/partials/svg/reddit.svg diff --git a/README.md b/README.md index 3a54576..ddea34d 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,16 @@ cardsPerRow = 2 # Possible values: 1, 2, 3 #mastodon = "username" #medium = "username" +[Params.Share] # Post Share block +#facebook = true +#twitter = true +#reddit = true +#telegram = true +#linkedin = true +#googleplus = true +#vk = true +#pocket = true + # Web App Manifest settings # https://www.w3.org/TR/appmanifest/ # https://developers.google.com/web/fundamentals/web-app-manifest/ diff --git a/i18n/en.yaml b/i18n/en.yaml index 83eed25..897a3f0 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -8,6 +8,13 @@ - id: meta_categories translation: Categories +# Share +- id: share-caption + translation: Share on + +- id: save-caption + translation: Save to + # Related - id: related_title translation: Related diff --git a/layouts/_default/single.html b/layouts/_default/single.html index db6fe87..c0935de 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -10,6 +10,7 @@ {{ if .Params.tags }} {{ end }} diff --git a/layouts/partials/post_share.html b/layouts/partials/post_share.html new file mode 100644 index 0000000..4bb7c0a --- /dev/null +++ b/layouts/partials/post_share.html @@ -0,0 +1,44 @@ +{{- if and .IsPage (.Param "share") }} +
+ {{- if .Param "share.facebook" }} + + {{- end }} + {{- if .Param "share.twitter" }} + + {{- end }} + {{- if .Param "share.reddit" }} + + {{- end }} + {{- if .Param "share.telegram" }} + + {{- end }} + {{- if .Param "share.linkedin" }} + + {{- end }} + {{- if .Param "share.googleplus" }} + + {{- end }} + {{- if .Param "share.vk" }} + + {{- end }} + {{- if .Param "share.pocket" }} + + {{- end }} +
+{{- end }} \ No newline at end of file diff --git a/layouts/partials/svg/pocket.svg b/layouts/partials/svg/pocket.svg new file mode 100644 index 0000000..f440edd --- /dev/null +++ b/layouts/partials/svg/pocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/partials/svg/reddit.svg b/layouts/partials/svg/reddit.svg new file mode 100644 index 0000000..47bdef5 --- /dev/null +++ b/layouts/partials/svg/reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 39aeefb..35934c4 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -674,7 +674,7 @@ mark { .post__tag { display: inline-block; padding: .25rem .5rem; - margin: 0 .3125rem .3125rem 0; + margin: .25rem; line-height: 1.5; background: #111; } @@ -707,6 +707,62 @@ mark { font-weight: 700; } +.post__footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 1.5rem; +} + +.post__tags { + display: flex; + flex-basis: 100%; + flex-wrap: wrap; + margin: 0 -.25rem auto; +} + +.post__share { + display: flex; + flex-basis: 100%; + flex-wrap: wrap; + margin: 0 -.25rem auto; +} + +@media screen and (min-width: 720px) { + .post__tags { + flex: 1 0 65%; + justify-content: flex-start; + } + + .post__share { + flex: 1 0 35%; + justify-content: flex-end; + } +} + +.share__link { + background-color: #111; + margin: .25rem; + font-size: 0; +} + +.share__link:hover { + margin: .25rem; + text-decoration: none; +} + +.share__icon { + fill: #f8ae00; + stroke: #f8ae00; + width: 32px; + height: 32px; +} + +.share__icon:hover { + fill: #fff; + stroke: #fff; +} + .alignleft { float: left; margin: 1rem 1rem 1rem 0;