diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index acf5816..6c7d6b8 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -274,6 +274,29 @@ } +/* Social media share buttons */ +.share-buttons { + background: var(--background-2); + margin: 25px 0; + padding: 8px 0; + border-radius: 8px; + display: flex; + gap: 8px; + justify-content: center; +} + +.share-buttons a { + background-color: var(--background-4); + padding: 4px; + border-radius: 8px; +} + +.share-buttons svg { + width: 32px; + height: 32px; +} + + /* Back to top */ #back-to-top { position: fixed; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 696ae66..25bd713 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -32,6 +32,8 @@ {{ .Content }} + {{ partial "series-box.html" . }} + {{ if or .NextInSection .PrevInSection }}
{{ with .NextInSection }} @@ -62,7 +64,9 @@
{{ end }} - {{ partial "series-box.html" . }} + {{ if .Site.Params.shareButtons }} + {{ partial "share.html" . }} + {{ end }} {{ $related := .Site.RegularPages.Related . | first 10 }} {{ with $related }} diff --git a/layouts/partials/share.html b/layouts/partials/share.html new file mode 100644 index 0000000..d9c8e96 --- /dev/null +++ b/layouts/partials/share.html @@ -0,0 +1,50 @@ +
+ {{ if .Site.Params.shareButtons.twitter }} + + {{- partial "icon.html" "twitter" -}} + + {{ end }} + + {{ if .Site.Params.shareButtons.facebook }} + + {{- partial "icon.html" "facebook" -}} + + {{ end }} + + {{ if .Site.Params.shareButtons.linkedin }} + + {{- partial "icon.html" "linkedin" -}} + + {{ end }} + + {{ if .Site.Params.shareButtons.reddit }} + + {{- partial "icon.html" "reddit" -}} + + {{ end }} + + {{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing. + https://stackoverflow.com/q/72073399/19003757 + https://github.com/michaelampr/jam/issues/39 + {{ if .Site.Params.shareButtons.telegram }} + + {{- partial "icon.html" "telegram" -}} + + {{ end }} + */}} +