Skip to content

Commit 598551c

Browse files
akopdevakopdev
committed
Add support for social media links in footer
1 parent 9952ce0 commit 598551c

25 files changed

Lines changed: 363 additions & 299 deletions

‎README.md‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,22 @@ menu:
6767
params:
6868
author: "Your Name"
6969
social:
70-
- name: "github"
71-
url: "https://github.com/gohugoio"
72-
- name: "linkedin"
73-
url: "https://www.example.com"
74-
- name: "email"
75-
url: "mailto:email@example.com"
70+
twitter: https://x.com/example
71+
behance: "https://behance.net/yourprofile"
72+
facebook: "https://facebook.com/yourprofile"
7673
```
74+
75+
*Supported social media links*:
76+
77+
- Behance
78+
- Dribbble
79+
- Facebook
80+
- Feed
81+
- Gplus
82+
- Instagram
83+
- Linkedin
84+
- Pinterest
85+
- Soundcloud
86+
- Vimeo
87+
- Twitter
88+
- Youtube

‎assets/scss/components/_footer.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,18 @@ footer {
55
padding: 1rem 0;
66
text-align: center;
77
margin-top: 2rem;
8-
}
98

10-
footer p{
11-
color: var(#{$css-var-prefix}muted-color);
12-
font-family: var(#{$css-var-prefix}font-family-header);
13-
font-size: 0.9rem;
9+
.social {
10+
justify-content: center;
11+
12+
img {
13+
max-width: 2rem;
14+
}
15+
}
16+
17+
p {
18+
color: var(#{$css-var-prefix}muted-color);
19+
font-family: var(#{$css-var-prefix}font-family-header);
20+
font-size: 0.9rem;
21+
}
1422
}

‎assets/scss/components/_header.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "../../node_modules/@picocss/pico/scss/settings" as *;
22

3-
body > header {
3+
body>header {
44
display: flex;
55
align-items: center;
66

@@ -13,6 +13,7 @@ body > header {
1313

1414
h1 {
1515
margin-top: 0.3rem;
16+
1617
a {
1718
font-size: 1.8rem;
1819
position: relative;
@@ -24,6 +25,7 @@ body > header {
2425
nav {
2526
li {
2627
padding: 0 0.65rem;
28+
2729
a {
2830
font-family: var(#{$css-var-prefix}font-family-header);
2931
text-decoration: none;

‎assets/scss/components/_list.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "../../node_modules/@picocss/pico/scss/settings" as *;
22

3-
section > header {
3+
section>header {
44
margin-bottom: 2rem;
55
}
66

@@ -26,6 +26,7 @@ section > header {
2626
.tags {
2727
grid-template-columns: 2rem 1fr;
2828
color: var(#{$css-var-prefix}muted-color);
29+
2930
span {
3031
text-align: center;
3132
}

‎assets/scss/components/_single.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
article {
44
nav {
55
padding: 1rem 0 2rem 0;
6+
67
a {
78
font-size: 0.9rem;
89
letter-spacing: 0.05em;
@@ -30,7 +31,7 @@ article {
3031
}
3132

3233
li {
33-
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical)/2) var(#{$css-var-prefix}nav-element-spacing-horizontal);
34+
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical)/2) var(#{$css-var-prefix}nav-element-spacing-horizontal);
3435

3536
a {
3637
border: 0.1rem solid;

‎assets/scss/theme/_dark.scss‎

Lines changed: 118 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -112,142 +112,144 @@
112112
#{$css-var-prefix}form-element-color: #{$zinc-100};
113113
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
114114
#{$css-var-prefix}form-element-active-background-color: #{color.mix(
115-
$slate-900,
116-
$slate-850,
117-
75%
118-
)};
119-
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
120-
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
121-
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
122-
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
123-
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
124-
$red-500,
125-
$slate-600,
126-
75%
127-
)};
128-
#{$css-var-prefix}form-element-invalid-focus-color: var(
129-
#{$css-var-prefix}form-element-invalid-active-border-color
130-
);
131-
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
132-
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
133-
$jade-450,
134-
$slate-600,
135-
75%
136-
)};
137-
#{$css-var-prefix}form-element-valid-focus-color: var(
138-
#{$css-var-prefix}form-element-valid-active-border-color
139-
);
140-
}
115+
$slate-900,
116+
$slate-850,
117+
75%)
118+
}
119+
120+
;
121+
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
122+
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
123+
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
124+
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
125+
#{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
126+
$red-500,
127+
$slate-600,
128+
75%)
129+
}
141130

142-
// Switch (input[type="checkbox"][role="switch"])
143-
@if map.get($modules, "forms/checkbox-radio-switch") {
144-
#{$css-var-prefix}switch-background-color: #{$slate-750};
145-
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
146-
#{$css-var-prefix}switch-color: #{$white};
147-
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
148-
}
131+
;
132+
#{$css-var-prefix}form-element-invalid-focus-color: var(#{$css-var-prefix}form-element-invalid-active-border-color);
133+
#{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
134+
#{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
135+
$jade-450,
136+
$slate-600,
137+
75%)
138+
}
149139

150-
// Range (input[type="range"])
151-
@if map.get($modules, "forms/input-range") {
152-
#{$css-var-prefix}range-border-color: #{$slate-850};
153-
#{$css-var-prefix}range-active-border-color: #{$slate-800};
154-
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
155-
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
156-
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
157-
}
140+
;
141+
#{$css-var-prefix}form-element-valid-focus-color: var(#{$css-var-prefix}form-element-valid-active-border-color);
142+
}
158143

159-
// Accordion (<details>)
160-
@if map.get($modules, "components/accordion") {
161-
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
162-
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
163-
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
164-
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
165-
}
144+
// Switch (input[type="checkbox"][role="switch"])
145+
@if map.get($modules, "forms/checkbox-radio-switch") {
146+
#{$css-var-prefix}switch-background-color: #{$slate-750};
147+
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
148+
#{$css-var-prefix}switch-color: #{$white};
149+
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
150+
}
166151

167-
// Dropdown (details.dropdown)
168-
@if map.get($modules, "components/dropdown") and $enable-classes {
169-
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
170-
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
171-
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
172-
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
173-
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
174-
}
152+
// Range (input[type="range"])
153+
@if map.get($modules, "forms/input-range") {
154+
#{$css-var-prefix}range-border-color: #{$slate-850};
155+
#{$css-var-prefix}range-active-border-color: #{$slate-800};
156+
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
157+
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
158+
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
159+
}
175160

176-
// Loading ([aria-busy=true])
177-
@if map.get($modules, "components/loading") {
178-
#{$css-var-prefix}loading-spinner-opacity: 0.5;
179-
}
161+
// Accordion (<details>)
162+
@if map.get($modules, "components/accordion") {
163+
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
164+
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
165+
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
166+
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
167+
}
180168

181-
// Modal (<dialog>)
182-
@if map.get($modules, "components/modal") {
183-
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
184-
}
169+
// Dropdown (details.dropdown)
170+
@if map.get($modules, "components/dropdown") and $enable-classes {
171+
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
172+
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
173+
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
174+
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
175+
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
176+
}
185177

186-
// Progress
187-
@if map.get($modules, "components/progress") {
188-
#{$css-var-prefix}progress-background-color: #{$slate-850};
189-
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
190-
}
178+
// Loading ([aria-busy=true])
179+
@if map.get($modules, "components/loading") {
180+
#{$css-var-prefix}loading-spinner-opacity: 0.5;
181+
}
191182

192-
// Tooltip ([data-tooltip])
193-
@if map.get($modules, "components/tooltip") {
194-
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
195-
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
196-
}
183+
// Modal (<dialog>)
184+
@if map.get($modules, "components/modal") {
185+
#{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
186+
}
197187

198-
// Form validation icons
199-
@if map.get($modules, "forms/basics") {
200-
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
201-
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
202-
}
188+
// Progress
189+
@if map.get($modules, "components/progress") {
190+
#{$css-var-prefix}progress-background-color: #{$slate-850};
191+
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
192+
}
203193

204-
// Focus for buttons, radio and select
205-
@if map.get($modules, "forms/basics") {
206-
input:is(
207-
[type="submit"],
208-
[type="button"],
209-
[type="reset"],
210-
[type="checkbox"],
211-
[type="radio"],
212-
[type="file"]
213-
) {
214-
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
215-
}
194+
// Tooltip ([data-tooltip])
195+
@if map.get($modules, "components/tooltip") {
196+
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
197+
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
198+
}
199+
200+
// Form validation icons
201+
@if map.get($modules, "forms/basics") {
202+
#{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
203+
#{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
204+
}
205+
206+
// Focus for buttons, radio and select
207+
@if map.get($modules, "forms/basics") {
208+
209+
input:is([type="submit"],
210+
[type="button"],
211+
[type="reset"],
212+
[type="checkbox"],
213+
[type="radio"],
214+
[type="file"]) {
215+
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
216216
}
217+
}
218+
219+
// Chevron icons
220+
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
217221

218-
// Chevron icons
219-
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
220-
// Change the icon color to black for accordion and dropdown .contrast buttons
221-
@if $enable-classes {
222-
#{$parent-selector} details {
223-
summary {
224-
&[role="button"].contrast:not(.outline) {
225-
&::after {
226-
filter: brightness(0);
227-
}
222+
// Change the icon color to black for accordion and dropdown .contrast buttons
223+
@if $enable-classes {
224+
#{$parent-selector} details {
225+
summary {
226+
&[role="button"].contrast:not(.outline) {
227+
&::after {
228+
filter: brightness(0);
228229
}
229230
}
230231
}
231232
}
232233
}
234+
}
233235

234-
// Loading icon (animated)
235-
@if map.get($modules, "components/loading") {
236-
// Change the icon color to black for .contrast buttons
237-
@if $enable-classes {
238-
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
239-
&.contrast:is(
240-
button,
241-
[type="submit"],
242-
[type="button"],
243-
[type="reset"],
244-
[role="button"]
245-
):not(.outline) {
246-
&::before {
247-
filter: brightness(0);
248-
}
236+
// Loading icon (animated)
237+
@if map.get($modules, "components/loading") {
238+
239+
// Change the icon color to black for .contrast buttons
240+
@if $enable-classes {
241+
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
242+
243+
&.contrast:is(button,
244+
[type="submit"],
245+
[type="button"],
246+
[type="reset"],
247+
[role="button"]):not(.outline) {
248+
&::before {
249+
filter: brightness(0);
249250
}
250251
}
251252
}
252253
}
253254
}
255+
}

0 commit comments

Comments
 (0)