Made by Dude -badge
Sivujen tekijästä ilmoittaa Made by Dude -badge, joka lisätään asiakkaan suostumuksesta sivuston Footer-osioon.
Ulkonäkö
Badge räätälöidään sopimaan sivuston ilmeeseen niin, että se ei ole häiritsevästi etualalla. Alla joitakin voimassa olevia Made by Dude -badgeja.
Lisäysohje
Tämä sivu sisältää badgen käyttöönottoon vaadittavat universaalit snippetit, joita ei ole sisällytetty starter-teemaamme mukaan.
Tämä sivu ja koodiesimerkit pyritään pitämään aina mahdollisimman ajan tasalla. Muista koodisnipeteistä poiketen tämä osa on suomeksi ja julkinen, koska pyrimme näin pitämään tiedon helposti saatavilla samassa paikassa ilman tarpeetonta hyppimistä.
Huom! Muista lisätä
'www.dude.fi', tiedoston scripts-styles.php `wp_localize_script` sisään, jotta tooltip toimii oikein.Lisää ennen footer.php-tiedoston containerin lopetustagia:
1
<p class="dude-badge"><a class="no-external-link-indicator" href="https://www.dude.fi" data-tooltip="Sivut toteuttanut" aria-label="Sivut toteuttanut Digitoimisto Dude Oy, siirry ulkoiselle sivustolle dude.fi"><svg aria-hidden="true" class="tip" xmlns="http://www.w3.org/2000/svg" width="36" height="12" viewBox="0 0 36 12"><path class="tip-color" transform="rotate(0)" d="M2.658, .000 C-13.615, .000 50.938, .000 34.662, .000 C28.662, .000 23.035, 12.002 18.660, 12.002 C14.285, 12.002 8.594, .000 2.658, .000 Z"></path></svg><svg width="85" height="17" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 85 17"><g fill="transparent" class="heart" fill-rule="evenodd"><path d="M7.5 13.963L2.192 8.412a3.152 3.152 0 01-.59-3.634h0a3.166 3.166 0 012.312-1.7 3.133 3.133 0 012.72.882l.866.803.867-.803a3.133 3.133 0 012.718-.882 3.167 3.167 0 012.312 1.7h0a3.153 3.153 0 01-.589 3.634L7.5 13.962z" class="stroke" stroke="#03061b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path class="fill" fill="#03061b" d="M50.696 8.166c0 .943-.338 2.782-2.601 2.782-2.278 0-2.618-1.84-2.618-2.782V3h-4.34v5.455c0 3.472 2.6 5.545 6.958 5.545 4.346 0 6.942-2.073 6.942-5.545V3h-4.34v5.166zM85 6.052V3H71.717v11H85v-3.052h-9.073v-1.22h7.543V7.271h-7.543V6.052zM33.14 10.948h-2.894V6.057h2.895c1.498 0 2.543 1.146 2.543 2.443 0 1.314-1.045 2.448-2.543 2.448zM34.179 3H26v11h8.178c2.832 0 5.723-2.196 5.723-5.5 0-3.324-2.891-5.5-5.723-5.5zM63.722 10.948h-2.895V6.057h2.895c1.499 0 2.543 1.146 2.543 2.443 0 1.314-1.044 2.448-2.543 2.448zM64.76 3h-8.178v11h8.178c2.832 0 5.723-2.196 5.723-5.5 0-3.324-2.891-5.5-5.723-5.5z"/></g></svg></a></p>
Copied!
Uusi tiedosto: sass/layout/_dude-badge.scss:
1
// stylelint-disable declaration-no-important, a11y/font-size-is-readable
2
// Badge variables
3
:root {
4
--color-badge-logo-dark: #03061b;
5
--color-badge-logo-light: var(--color-white);
6
--color-badge-tooltip-text-dark: var(--color-white);
7
--color-badge-tooltip-text-light: #03061b;
8
--color-badge-tooltip-background-light: rgb(255 255 255 / .8);
9
--color-badge-tooltip-background-dark: rgb(17 17 17 / .9);
10
11
// Light or dark?
12
--color-badge-logo: var(--color-badge-logo-dark);
13
--color-badge-tooltip-text: var(--color-badge-tooltip-text-dark);
14
--color-badge-tooltip-background: var(--color-badge-tooltip-background-dark);
15
}
16
17
.site-footer .container {
18
position: relative;
19
}
20
21
.site-footer .dude-badge {
22
margin-bottom: 0;
23
margin-left: auto;
24
margin-right: auto;
25
margin-top: 45px;
26
27
// Adjust based on the site
28
text-align: center;
29
30
a:hover .heart,
31
a:focus .heart {
32
fill: var(--color-badge-logo);
33
}
34
35
.fill {
36
fill: var(--color-badge-logo);
37
}
38
39
.stroke {
40
stroke: var(--color-badge-logo);
41
}
42
}
43
44
.site-footer {
45
[data-tooltip] {
46
cursor: pointer;
47
position: relative;
48
transform: translate(-48%, 18px);
49
transform-origin: top;
50
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
51
}
52
53
[data-tooltip]::after {
54
background-color: var(--color-badge-tooltip-background);
55
border-radius: 4px;
56
bottom: 100%;
57
color: var(--color-badge-tooltip-text);
58
content: attr(data-tooltip);
59
font-family: sans-serif !important;
60
font-size: 12px !important;
61
font-style: normal !important;
62
font-weight: 400 !important;
63
left: 50%;
64
margin-bottom: 11px;
65
opacity: 0;
66
padding: 5px;
67
pointer-events: none;
68
position: absolute;
69
text-align: center;
70
text-shadow: none !important;
71
transform: translate(-48%, 10px);
72
transform-origin: top;
73
transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
74
width: 100px;
75
z-index: 10;
76
}
77
78
[data-tooltip] .tip {
79
bottom: 100%;
80
content: "";
81
height: 6px;
82
left: 50%;
83
margin-bottom: 10px;
84
opacity: 0;
85
pointer-events: none;
86
position: absolute;
87
transform: translate(-37%, 15px);
88
transform-origin: top;
89
transition: transform 155ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
90
width: 18px;
91
z-index: 10;
92
93
.tip-color {
94
fill: var(--color-badge-tooltip-background);
95
}
96
}
97
98
[data-tooltip]:hover .tip,
99
[data-tooltip]:hover::after,
100
[data-tooltip]:focus .tip,
101
[data-tooltip]:focus::after,
102
[data-tooltip][data-tooltip-visible] .tip,
103
[data-tooltip][data-tooltip-visible]::after {
104
opacity: 1;
105
pointer-events: auto;
106
}
107
108
[data-tooltip]:hover::after,
109
[data-tooltip][data-tooltip-visible]::after {
110
transform: translate(-48%, -5px);
111
}
112
113
[data-tooltip]:hover .tip,
114
[data-tooltip][data-tooltip-visible] .tip {
115
transform: translate(-37%, 0);
116
}
117
}
Copied!
global.scss:
1
@import 'layout/dude-badge';
Copied!
Last modified 1mo ago
Export as PDF
Copy link
Edit on GitHub