From 342a59a47360f67ef8c18263486dcd9c2bc78a21 Mon Sep 17 00:00:00 2001 From: Djordje Atlialp Date: Thu, 2 Jul 2020 12:40:06 +0200 Subject: [PATCH] Add default sharing buttons in theme style --- assets/scss/_sharing-buttons.scss | 34 ++++++++++ assets/scss/_single.scss | 23 +++---- assets/scss/main.scss | 6 +- exampleSite/config.toml | 6 ++ layouts/partials/sharing-buttons.html | 89 +++++++++++++++++++++++++++ layouts/partials/sharingbuttons.html | 3 - layouts/posts/single.html | 6 +- 7 files changed, 146 insertions(+), 21 deletions(-) create mode 100644 assets/scss/_sharing-buttons.scss create mode 100644 layouts/partials/sharing-buttons.html delete mode 100644 layouts/partials/sharingbuttons.html diff --git a/assets/scss/_sharing-buttons.scss b/assets/scss/_sharing-buttons.scss new file mode 100644 index 0000000..c6bee53 --- /dev/null +++ b/assets/scss/_sharing-buttons.scss @@ -0,0 +1,34 @@ +.sharing-buttons { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .resp-sharing-button__icon, + .resp-sharing-button__link { + display: inline-block; + } + + .resp-sharing-button__link { + text-decoration: none; + margin: 0.5em; + } + + .resp-sharing-button { + border-radius: 5px; + transition: 25ms ease-out; + padding: 0.5em 0.75em; + font-family: Helvetica Neue,Helvetica,Arial,sans-serif; + } + + .resp-sharing-button__icon svg { + width: 1em; + height: 1em; + margin-right: 0.4em; + vertical-align: top; + } + + .resp-sharing-button--small svg { + margin: 0; + vertical-align: middle; + } +} \ No newline at end of file diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss index 87d86df..f593086 100644 --- a/assets/scss/_single.scss +++ b/assets/scss/_single.scss @@ -4,7 +4,6 @@ text-align: left; padding: 20px; margin: 20px auto; - @media #{$media-size-tablet} { max-width: 600px; } @@ -18,7 +17,6 @@ &-title { font-size: 2.625rem; margin: 0 0 20px; - @media #{$media-size-phone} { font-size: 2rem; } @@ -32,7 +30,7 @@ display: block; margin-bottom: 20px; font-size: 1rem; - opacity: .5; + opacity: 0.5; a { text-decoration: none; @@ -48,7 +46,6 @@ margin: 40px -50px; width: 860px; max-width: 860px; - @media #{$media-size-tablet} { margin: 20px 0; width: 100%; @@ -57,12 +54,12 @@ &-info { margin-top: 30px; - font-size: .8rem; + font-size: 0.8rem; line-height: normal; @include dimmed; p { - margin: .8em 0; + margin: 0.8em 0; } a:hover { @@ -70,14 +67,14 @@ } svg { - margin-right: .8em; + margin-right: 0.8em; } .tag { - margin-right: .5em; + margin-right: 0.5em; &::before { - content: "#" + content: "#"; } } @@ -102,7 +99,7 @@ display: flex; text-align: center; position: relative; - margin: 30px 0 20px; + margin: 20px 0; &-h { text-align: center; @@ -110,10 +107,10 @@ padding: 5px 10px; background: $light-background; color: $light-color-secondary; - font-size: .8rem; + font-size: 0.8rem; text-transform: uppercase; text-decoration: none; - letter-spacing: .1em; + letter-spacing: 0.1em; z-index: 1; .dark-theme & { @@ -188,4 +185,4 @@ &.previous .button__icon { margin-right: 8px; } -} +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 207d5ee..dc90f24 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,11 +1,12 @@ +/* Must be loaded before everything else */ @import "normalize"; @import "prism"; - +/* Main stuff */ @import "variables"; @import "mixins"; @import "fonts"; @import "buttons"; - +/* Modules */ @import "header"; @import "logo"; @import "menu"; @@ -13,3 +14,4 @@ @import "list"; @import "single"; @import "footer"; +@import "sharing-buttons"; \ No newline at end of file diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 149a7ef..2a4db2d 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -66,6 +66,12 @@ disableHugoGeneratorInject = false # Set disableReadOtherPosts to true in order to hide the links to other posts. disableReadOtherPosts = false + # Sharing buttons + # There are a lot of buttons preconfigured. If you want to change them, + # generate the buttons here: https://sharingbuttons.io + # and add them into your own `layouts/partials/sharing-buttons.html` + enableSharingButtons = false + # Integrate Javascript files or stylesheets by adding the url to the external assets or by # linking local files with their path relative to the static folder, e.g. "css/styles.css" customCSS = [] diff --git a/layouts/partials/sharing-buttons.html b/layouts/partials/sharing-buttons.html new file mode 100644 index 0000000..86dc1c6 --- /dev/null +++ b/layouts/partials/sharing-buttons.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + +
+ +
+ + + + + + + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ diff --git a/layouts/partials/sharingbuttons.html b/layouts/partials/sharingbuttons.html deleted file mode 100644 index 0eb11f3..0000000 --- a/layouts/partials/sharingbuttons.html +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 4ab3cdd..f9741bb 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -58,10 +58,10 @@ {{- end }} - {{- if .Site.Params.ShareButtons }} + {{- if .Site.Params.EnableSharingButtons }}
-
- {{ partial "sharingbuttons.html" . }} + {{- end }}