Skip to content

Commit 1887a56

Browse files
JoelCDLJoelCDL
authored
Merge pull request #23 from cdlib/native-ext-links
Render link icons via URL attribute in CSS vs WP external link plugin
2 parents 7e6c3b8 + 3601d6b commit 1887a56

File tree

11 files changed

+104
-93
lines changed

11 files changed

+104
-93
lines changed

‎elements/3-components/contact--2.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<a class="c-contact" href="" data-wpel-link="external">{{ contact.link.text }}</a>
1+
<a class="c-contact" href="">{{ contact.link.text }}</a>

‎elements/3-components/orcid.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<a class="o-orcid" href="{{ orcid.url }}" data-wpel-link="external">{{ orcid.text }}</a>
1+
<a class="o-orcid" href="{{ orcid.url }}">{{ orcid.text }}</a>

‎elements/3-components/rssfeed.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
</div>
99
</li>
1010
</ul>
11-
<a href="http://listserv.ucop.edu/cgi-bin/wa.exe?A0=CDLALERT-L" data-wpel-link="external">CDLALERT-L Archive</a>
11+
<a href="http://listserv.ucop.edu/cgi-bin/wa.exe?A0=CDLALERT-L">CDLALERT-L Archive</a>
1212
</section>

‎elements/3-components/social.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<a class="c-social" href="{{ social.url }}" data-wpel-link="external">{{ social.text }}</a>
1+
<a class="c-social" href="{{ social.url }}">{{ social.text }}</a>

‎elements/4-objects/link--10.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#if link.linebreak}}<p>{{/if}}
2-
<a href="{{ link.url }}" data-wpel-link="external">{{ link.text }}</a>
2+
<a href="{{ link.url }}">{{ link.text }}</a>
33
{{#if link.linebreak}}</p>{{/if}}

‎elements/4-objects/link--3.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#if link.linebreak}}<p>{{/if}}
2-
<a href="{{ link.url }}" {{#if link.external}}data-wpel-link="external"{{/if}}>{{ link.text }}</a>
2+
<a href="{{ link.url }}">{{ link.text }}</a>
33
{{#if link.linebreak}}</p>{{/if}}

‎elements/4-objects/link--4.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#if link.linebreak}}<p>{{/if}}
2-
<a class="o-link2" href="{{ link.url }}" {{#if link.external}}data-wpel-link="external"{{/if}}>{{ link.text }}</a>
2+
<a class="o-link2" href="{{ link.url }}">{{ link.text }}</a>
33
{{#if link.linebreak}}</p>{{/if}}

‎elements/4-objects/link--8.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#if link.linebreak}}<p>{{/if}}
2-
<a href="{{ link.url }}" data-wpel-link="external">{{ link.text }}</a>
2+
<a href="{{ link.url }}">{{ link.text }}</a>
33
{{#if link.linebreak}}</p>{{/if}}

‎elements/4-objects/link.config.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = {
55
context: {
66
link: {
77
text: 'Blue, underlined by default',
8-
external: false,
8+
url: 'https://cdlib.org',
99
linebreak: true
1010
}
1111
},
@@ -14,7 +14,8 @@ module.exports = {
1414
name: '2', // link--2.hbs
1515
context: {
1616
link: {
17-
text: 'Blue, underlined on focus/hover'
17+
text: 'Blue, underlined on focus/hover',
18+
url: 'https://cdlib.org'
1819
}
1920
}
2021
},
@@ -23,8 +24,7 @@ module.exports = {
2324
context: {
2425
link: {
2526
text: 'Blue, underlined by default, external link',
26-
url: 'wordpress/external/link',
27-
external: true
27+
url: 'wordpress/external/link'
2828
}
2929
}
3030
},
@@ -33,24 +33,25 @@ module.exports = {
3333
context: {
3434
link: {
3535
text: 'Blue, underlined on focus/hover, external link',
36-
url: 'wordpress/external/link',
37-
external: true
36+
url: 'wordpress/external/link'
3837
}
3938
}
4039
},
4140
{
4241
name: '5', // link--5.hbs
4342
context: {
4443
link: {
45-
text: 'Light black, underlined on focus/hover'
44+
text: 'Light black, underlined on focus/hover',
45+
url: 'https://cdlib.org'
4646
}
4747
}
4848
},
4949
{
5050
name: '6', // link--6.hbs
5151
context: {
5252
link: {
53-
text: 'Light black, blue on focus/hover'
53+
text: 'Light black, blue on focus/hover',
54+
url: 'https://cdlib.org'
5455
}
5556
}
5657
},

‎elements/4-objects/link.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{#if link.linebreak}}<p>{{/if}}
2-
<a href="{{ link.url }}" {{#if link.external}}data-wpel-link="external"{{/if}}>{{{ link.text }}}</a>
2+
<a href="{{ link.url }}">{{{ link.text }}}</a>
33
{{#if link.linebreak}}</p>{{/if}}

‎scss/_link.scss

Lines changed: 86 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// ***** Links ***** //
22

3+
@layer external-icons, file-icons;
4+
35
// Default styling:
46

57
a {
@@ -14,97 +16,105 @@ a {
1416

1517
// File type icons:
1618

17-
a[href$='.pdf']::after,
18-
a[href$='.doc']::after,
19-
a[href$='.docx']::after,
20-
a[href$='.xls']::after,
21-
a[href$='.xlsx']::after,
22-
a[href$='.txt']::after,
23-
a[href$='.zip']::after,
24-
a[href$='.rtf']::after,
25-
a[href$='.ppt']::after,
26-
a[href$='.pptx']::after {
27-
display: inline-block;
28-
margin-inline-start: 0.4rem;
29-
padding: 0.1rem 0.2rem 0.05rem 0.3rem;
30-
transform: translateY(-0.15rem);
31-
border: 1px solid oklch(36% 0 0);
32-
color: oklch(36% 0 0);
33-
font-family: Consolas, Monaco, monospace;
34-
font-size: 0.6rem;
35-
letter-spacing: 0.1rem;
36-
text-transform: uppercase;
37-
white-space: nowrap;
38-
}
19+
@layer file-icons {
20+
a[href$='.pdf']::after,
21+
a[href$='.doc']::after,
22+
a[href$='.docx']::after,
23+
a[href$='.xls']::after,
24+
a[href$='.xlsx']::after,
25+
a[href$='.txt']::after,
26+
a[href$='.zip']::after,
27+
a[href$='.rtf']::after,
28+
a[href$='.ppt']::after,
29+
a[href$='.pptx']::after {
30+
display: inline-block;
31+
block-size: auto;
32+
inline-size: auto;
33+
margin-inline-start: 0.4rem;
34+
padding: 0.1rem 0.2rem 0.05rem 0.3rem;
35+
transform: translateY(-0.15rem);
36+
border: 1px solid oklch(36% 0 0);
37+
background-color: transparent;
38+
color: oklch(36% 0 0);
39+
font-family: Consolas, Monaco, monospace;
40+
font-size: 0.6rem;
41+
letter-spacing: 0.1rem;
42+
text-transform: uppercase;
43+
white-space: nowrap;
44+
mask: none;
45+
}
3946

40-
a[href$='.pdf']::after {
41-
content: 'pdf';
42-
}
47+
a[href$='.pdf']::after {
48+
content: 'pdf';
49+
}
4350

44-
a[href$='.doc']::after {
45-
content: 'doc';
46-
}
51+
a[href$='.doc']::after {
52+
content: 'doc';
53+
}
4754

48-
a[href$='.docx']::after {
49-
content: 'docx';
50-
}
55+
a[href$='.docx']::after {
56+
content: 'docx';
57+
}
5158

52-
a[href$='.xls']::after {
53-
content: 'xls';
54-
}
59+
a[href$='.xls']::after {
60+
content: 'xls';
61+
}
5562

56-
a[href$='.xlsx']::after {
57-
content: 'xlsx';
58-
}
63+
a[href$='.xlsx']::after {
64+
content: 'xlsx';
65+
}
5966

60-
a[href$='.txt']::after {
61-
content: 'txt';
62-
}
67+
a[href$='.txt']::after {
68+
content: 'txt';
69+
}
6370

64-
a[href$='.zip']::after {
65-
content: 'zip';
66-
}
71+
a[href$='.zip']::after {
72+
content: 'zip';
73+
}
6774

68-
a[href$='.rtf']::after {
69-
content: 'rtf';
70-
}
75+
a[href$='.rtf']::after {
76+
content: 'rtf';
77+
}
7178

72-
a[href$='.ppt']::after {
73-
content: 'ppt';
74-
}
79+
a[href$='.ppt']::after {
80+
content: 'ppt';
81+
}
7582

76-
a[href$='.pptx']::after {
77-
content: 'pptx';
83+
a[href$='.pptx']::after {
84+
content: 'pptx';
85+
}
7886
}
7987

8088
// External, mailto and secured icons:
8189

82-
a[data-wpel-link='external']::after,
83-
a[href^='mailto:']::after,
84-
a[href^='https://ucofficeofthepresident.sharepoint.com']::after {
85-
content: '';
86-
display: inline-block;
87-
block-size: 0.9rem;
88-
inline-size: 0.9rem;
89-
margin-inline-start: 0.4rem;
90-
transform: translateY(0.05rem);
91-
mask-size: 0.8rem;
92-
mask-position: center;
93-
mask-repeat: no-repeat;
94-
}
90+
@layer external-icons {
91+
a:not([href^='https://cdlib'])::after,
92+
a[href^='mailto:']::after,
93+
a[href^='https://ucofficeofthepresident.sharepoint.com']::after {
94+
content: '';
95+
display: inline-block;
96+
block-size: 0.9rem;
97+
inline-size: 0.9rem;
98+
margin-inline-start: 0.4rem;
99+
transform: translateY(0.05rem);
100+
mask-size: 0.8rem;
101+
mask-position: center;
102+
mask-repeat: no-repeat;
103+
}
95104

96-
a[data-wpel-link='external']::after {
97-
background-color: var(--color-gold);
98-
mask-image: url('data-url:/fa-solid/arrow-up-right-from-square.svg');
99-
}
105+
a:not([href^='https://cdlib'])::after {
106+
background-color: var(--color-gold);
107+
mask-image: url('data-url:/fa-solid/arrow-up-right-from-square.svg');
108+
}
100109

101-
a[href^='mailto:']::after {
102-
background-color: var(--color-gold);
103-
mask-image: url('data-url:/fa-solid/envelope.svg');
104-
}
110+
a[href^='mailto:']::after {
111+
background-color: var(--color-gold);
112+
mask-image: url('data-url:/fa-solid/envelope.svg');
113+
}
105114

106-
a[href^='https://ucofficeofthepresident.sharepoint.com']::after {
107-
background-color: var(--color-dark-red);
108-
mask-size: 0.8rem;
109-
mask-image: url('data-url:/fa-solid/lock.svg');
115+
a[href^='https://ucofficeofthepresident.sharepoint.com']::after {
116+
background-color: var(--color-dark-red);
117+
mask-size: 0.8rem;
118+
mask-image: url('data-url:/fa-solid/lock.svg');
119+
}
110120
}

0 commit comments

Comments
 (0)