jekyll-social-share 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +18 -42
- data/_social-share.scss +120 -0
- data/lib/jekyll-social-share/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 74e923af9496207d5b52b0e67fa693ff0e364ddccc589f698e96682521f3712c
|
|
4
|
+
data.tar.gz: 18193aaedb5a5354ae6102326368cebfd633565c424048d1d143e387072097c9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c42a2135316000836cd015ef700a3b14ef2ae74e2d0f029207800a067461f571b7a8c87d42ff435b75e4befb0c2333d2a760eb2ce1b5357dc6ec88981f50c2f0
|
|
7
|
+
data.tar.gz: 0152aa43df657a8cd45ee8f218ffe43c50ef641d10f1b233dac28e2008e93f26e46e9aca627d7378511837771b9e9fefa5c9734aeb7d971ca20dc64ebf01d65f
|
data/README.md
CHANGED
|
@@ -134,60 +134,36 @@ The plugin outputs unstyled semantic HTML. Use the BEM classes to style it:
|
|
|
134
134
|
.social-share__copy--copied — added briefly after successful copy
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
-
###
|
|
137
|
+
### Stylesheet
|
|
138
138
|
|
|
139
|
-
The `
|
|
139
|
+
The gem ships `_social-share.scss` — copy it to your CSS directory and import it:
|
|
140
140
|
|
|
141
141
|
```scss
|
|
142
|
-
//
|
|
143
|
-
.social-share__item--linkedin .social-share__link { color: #0a66c2; }
|
|
144
|
-
.social-share__item--facebook .social-share__link { color: #1877f2; }
|
|
145
|
-
.social-share__item--x .social-share__link { color: #000; }
|
|
146
|
-
.social-share__item--bluesky .social-share__link { color: #0085ff; }
|
|
147
|
-
.social-share__item--mastodon .social-share__link { color: #6364ff; }
|
|
148
|
-
.social-share__item--whatsapp .social-share__link { color: #25d366; }
|
|
149
|
-
.social-share__item--telegram .social-share__link { color: #0088cc; }
|
|
150
|
-
.social-share__item--email .social-share__link { color: #555; }
|
|
151
|
-
.social-share__item--copy .social-share__link { color: #888; }
|
|
152
|
-
.social-share__item--hackernews .social-share__link { color: #ff6600; }
|
|
153
|
-
.social-share__item--pinterest .social-share__link { color: #e60023; }
|
|
154
|
-
.social-share__item--pocket .social-share__link { color: #ef4056; }
|
|
155
|
-
.social-share__item--tumblr .social-share__link { color: #36465d; }
|
|
156
|
-
.social-share__item--flipboard .social-share__link { color: #e12828; }
|
|
157
|
-
.social-share__item--line .social-share__link { color: #00b900; }
|
|
158
|
-
.social-share__item--print .social-share__link { color: #666; }
|
|
159
|
-
.social-share__item--reddit .social-share__link { color: #ff4500; }
|
|
160
|
-
.social-share__item--threads .social-share__link { color: #000; }
|
|
161
|
-
|
|
162
|
-
// Filled state (hover/focus)
|
|
163
|
-
.social-share__item--linkedin .social-share__link:hover,
|
|
164
|
-
.social-share__item--linkedin .social-share__link:focus-visible {
|
|
165
|
-
background: #0a66c2;
|
|
166
|
-
color: #fff;
|
|
167
|
-
}
|
|
168
|
-
// ... (repeat for all 18 services)
|
|
142
|
+
@import "social-share"; // or @use, or @include_relative depending on your setup
|
|
169
143
|
```
|
|
170
144
|
|
|
171
|
-
|
|
145
|
+
It includes:
|
|
146
|
+
- Full brand colors for all 18 services (light mode)
|
|
147
|
+
- `prefers-color-scheme: dark` block — X, Threads, and other near-black services automatically lighten in dark mode
|
|
148
|
+
- CSS custom properties for every color so you can override without touching the file
|
|
149
|
+
|
|
150
|
+
### Customizing Colors
|
|
172
151
|
|
|
173
|
-
|
|
152
|
+
Every color is a CSS custom property with the brand color as its default. Override any of them on `:root` or a scoped selector:
|
|
174
153
|
|
|
175
154
|
```scss
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
color: #fff;
|
|
155
|
+
:root {
|
|
156
|
+
--ss-x: #444; // lighten X in light mode
|
|
157
|
+
--ss-x-dark: #f0f0f0; // change X dark mode color
|
|
158
|
+
--ss-linkedin: #005582; // use a different LinkedIn blue
|
|
181
159
|
}
|
|
160
|
+
```
|
|
182
161
|
|
|
183
|
-
|
|
184
|
-
.social-share__item--linkedin .social-share__link:hover { background: transparent; }
|
|
162
|
+
All custom properties follow the pattern `--ss-{service}` (light) and `--ss-{service}-dark` (dark mode override).
|
|
185
163
|
|
|
186
|
-
|
|
187
|
-
.social-share__item--linkedin .social-share__link { border: 2px solid currentColor; }
|
|
188
|
-
```
|
|
164
|
+
### Minimal Custom Stylesheet
|
|
189
165
|
|
|
190
|
-
|
|
166
|
+
If you prefer to write your own from scratch:
|
|
191
167
|
|
|
192
168
|
```css
|
|
193
169
|
.social-share__list { display: flex; gap: 0.5rem; list-style: none; padding: 0; }
|
data/_social-share.scss
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
// jekyll-social-share — copy to your site's CSS/SCSS directory and @import or @use it.
|
|
2
|
+
|
|
3
|
+
.social-share {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: 0.75rem;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
margin: 2rem 0;
|
|
9
|
+
|
|
10
|
+
&__label {
|
|
11
|
+
font-size: 0.8rem;
|
|
12
|
+
font-weight: 600;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
letter-spacing: 0.05em;
|
|
15
|
+
color: var(--ss-label-color, #888);
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__list {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: repeat(9, 1fr);
|
|
22
|
+
gap: 0.5rem;
|
|
23
|
+
list-style: none;
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: 0;
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&__link {
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
gap: 0.35rem;
|
|
34
|
+
width: 100%;
|
|
35
|
+
min-height: 42px;
|
|
36
|
+
padding: 0.35rem 0.5rem;
|
|
37
|
+
border-radius: 4px;
|
|
38
|
+
font-size: 0.8rem;
|
|
39
|
+
font-weight: 500;
|
|
40
|
+
text-decoration: none;
|
|
41
|
+
border: 1px solid currentColor;
|
|
42
|
+
background: transparent;
|
|
43
|
+
color: inherit;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
font-family: inherit;
|
|
46
|
+
line-height: 1.2;
|
|
47
|
+
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
|
|
48
|
+
|
|
49
|
+
&:hover,
|
|
50
|
+
&:focus-visible {
|
|
51
|
+
color: #fff !important;
|
|
52
|
+
opacity: 1;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&__icon svg {
|
|
57
|
+
width: 1.725em;
|
|
58
|
+
height: 1.725em;
|
|
59
|
+
fill: currentColor;
|
|
60
|
+
display: block;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Per-service brand colors — override via CSS custom properties
|
|
64
|
+
&__item--bluesky .social-share__link { color: var(--ss-bluesky, #0085ff); &:hover, &:focus-visible { background: var(--ss-bluesky, #0085ff); } }
|
|
65
|
+
&__item--mastodon .social-share__link { color: var(--ss-mastodon, #6364ff); &:hover, &:focus-visible { background: var(--ss-mastodon, #6364ff); } }
|
|
66
|
+
&__item--facebook .social-share__link { color: var(--ss-facebook, #1877f2); &:hover, &:focus-visible { background: var(--ss-facebook, #1877f2); } }
|
|
67
|
+
&__item--reddit .social-share__link { color: var(--ss-reddit, #ff4500); &:hover, &:focus-visible { background: var(--ss-reddit, #ff4500); } }
|
|
68
|
+
&__item--linkedin .social-share__link { color: var(--ss-linkedin, #0a66c2); &:hover, &:focus-visible { background: var(--ss-linkedin, #0a66c2); } }
|
|
69
|
+
&__item--x .social-share__link { color: var(--ss-x, #111); &:hover, &:focus-visible { background: var(--ss-x, #111); } }
|
|
70
|
+
&__item--threads .social-share__link { color: var(--ss-threads, #111); &:hover, &:focus-visible { background: var(--ss-threads, #111); } }
|
|
71
|
+
&__item--email .social-share__link { color: var(--ss-email, #666); &:hover, &:focus-visible { background: var(--ss-email, #666); } }
|
|
72
|
+
&__item--copy .social-share__link { color: var(--ss-copy, #888); &:hover, &:focus-visible { background: var(--ss-copy, #888); } }
|
|
73
|
+
&__item--whatsapp .social-share__link { color: var(--ss-whatsapp, #25d366); &:hover, &:focus-visible { background: var(--ss-whatsapp, #25d366); } }
|
|
74
|
+
&__item--telegram .social-share__link { color: var(--ss-telegram, #0088cc); &:hover, &:focus-visible { background: var(--ss-telegram, #0088cc); } }
|
|
75
|
+
&__item--hackernews .social-share__link { color: var(--ss-hackernews, #ff6600); &:hover, &:focus-visible { background: var(--ss-hackernews, #ff6600); } }
|
|
76
|
+
&__item--pinterest .social-share__link { color: var(--ss-pinterest, #e60023); &:hover, &:focus-visible { background: var(--ss-pinterest, #e60023); } }
|
|
77
|
+
&__item--pocket .social-share__link { color: var(--ss-pocket, #ef4056); &:hover, &:focus-visible { background: var(--ss-pocket, #ef4056); } }
|
|
78
|
+
&__item--tumblr .social-share__link { color: var(--ss-tumblr, #36465d); &:hover, &:focus-visible { background: var(--ss-tumblr, #36465d); } }
|
|
79
|
+
&__item--flipboard .social-share__link { color: var(--ss-flipboard, #e12828); &:hover, &:focus-visible { background: var(--ss-flipboard, #e12828); } }
|
|
80
|
+
&__item--line .social-share__link { color: var(--ss-line, #00b900); &:hover, &:focus-visible { background: var(--ss-line, #00b900); } }
|
|
81
|
+
&__item--print .social-share__link { color: var(--ss-print, #666); &:hover, &:focus-visible { background: var(--ss-print, #666); } }
|
|
82
|
+
|
|
83
|
+
&__copy.social-share__copy--copied {
|
|
84
|
+
color: var(--ss-copied, #2d7a2d);
|
|
85
|
+
border-color: var(--ss-copied, #2d7a2d);
|
|
86
|
+
background: var(--ss-copied, #2d7a2d);
|
|
87
|
+
color: #fff;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.sr-only {
|
|
91
|
+
position: absolute;
|
|
92
|
+
width: 1px;
|
|
93
|
+
height: 1px;
|
|
94
|
+
padding: 0;
|
|
95
|
+
margin: -1px;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
clip: rect(0, 0, 0, 0);
|
|
98
|
+
white-space: nowrap;
|
|
99
|
+
border: 0;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// Dark mode — lighten near-black brand colors that disappear on dark backgrounds
|
|
104
|
+
@media (prefers-color-scheme: dark) {
|
|
105
|
+
.social-share {
|
|
106
|
+
&__item--x .social-share__link { color: var(--ss-x-dark, #e1e8ed); &:hover, &:focus-visible { background: var(--ss-x-dark, #e1e8ed); color: #111 !important; } }
|
|
107
|
+
&__item--threads .social-share__link { color: var(--ss-threads-dark, #d0d0d0); &:hover, &:focus-visible { background: var(--ss-threads-dark, #d0d0d0); color: #111 !important; } }
|
|
108
|
+
&__item--email .social-share__link { color: var(--ss-email-dark, #ccc); &:hover, &:focus-visible { background: var(--ss-email-dark, #ccc); color: #111 !important; } }
|
|
109
|
+
&__item--copy .social-share__link { color: var(--ss-copy-dark, #999); &:hover, &:focus-visible { background: var(--ss-copy-dark, #999); color: #111 !important; } }
|
|
110
|
+
&__item--tumblr .social-share__link { color: var(--ss-tumblr-dark, #8899aa); &:hover, &:focus-visible { background: var(--ss-tumblr-dark, #8899aa); color: #fff !important; } }
|
|
111
|
+
&__item--print .social-share__link { color: var(--ss-print-dark, #999); &:hover, &:focus-visible { background: var(--ss-print-dark, #999); color: #111 !important; } }
|
|
112
|
+
|
|
113
|
+
&__copy.social-share__copy--copied {
|
|
114
|
+
color: var(--ss-copied-dark, #5fa15f);
|
|
115
|
+
border-color: var(--ss-copied-dark, #5fa15f);
|
|
116
|
+
background: var(--ss-copied-dark, #5fa15f);
|
|
117
|
+
color: #fff;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-social-share
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jason Chance
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2026-08-
|
|
10
|
+
date: 2026-08-22 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: jekyll
|
|
@@ -33,6 +33,7 @@ extensions: []
|
|
|
33
33
|
extra_rdoc_files: []
|
|
34
34
|
files:
|
|
35
35
|
- README.md
|
|
36
|
+
- _social-share.scss
|
|
36
37
|
- lib/jekyll-social-share.rb
|
|
37
38
|
- lib/jekyll-social-share/icons.rb
|
|
38
39
|
- lib/jekyll-social-share/version.rb
|