Add icon to external links

This commit is contained in:
erciccione 2020-08-18 14:18:21 +02:00
parent a66e14d55d
commit b6c3f82652
No known key found for this signature in database
GPG key ID: 762AF8C608E56CDF
6 changed files with 87 additions and 32 deletions

View file

@ -10,19 +10,19 @@ permalink: /community/hangouts/index.html
<section class="hangouts-social container">
<ul class="row center-xs">
<li>
<a href="https://twitter.com/monero" target="_blank" rel="noreferrer noopener"><div class="social-icon twitter"></div></a>
<a class="ext-noicon" href="https://twitter.com/monero" target="_blank" rel="noreferrer noopener"><div class="social-icon twitter"></div></a>
</li>
<li>
<a href="https://reddit.com/r/Monero" target="_blank" rel="noreferrer noopener"><div class="social-icon reddit"></div></a>
<a class="ext-noicon" href="https://reddit.com/r/Monero" target="_blank" rel="noreferrer noopener"><div class="social-icon reddit"></div></a>
</li>
<li>
<a href="https://www.facebook.com/monerocurrency/" target="_blank" rel="noreferrer noopener"><div class="social-icon facebook"></div></a>
<a class="ext-noicon" href="https://www.facebook.com/monerocurrency/" target="_blank" rel="noreferrer noopener"><div class="social-icon facebook"></div></a>
</li>
<li>
<a href="https://github.com/monero-project" target="_blank" rel="noreferrer noopener"><div class="social-icon github"></div></a>
<a class="ext-noicon" href="https://github.com/monero-project" target="_blank" rel="noreferrer noopener"><div class="social-icon github"></div></a>
</li>
<li>
<a href="https://repo.getmonero.org/users/monero-project/projects" target="_blank" rel="noreferrer noopener"><div class="social-icon gitlab"></div></a>
<a class="ext-noicon" href="https://repo.getmonero.org/users/monero-project/projects" target="_blank" rel="noreferrer noopener"><div class="social-icon gitlab"></div></a>
</li>
</ul>
</section>

View file

@ -27,17 +27,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -73,17 +73,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -110,17 +110,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -157,17 +157,17 @@ permalink: /community/team/index.html
{% endif %}
<div class="row center-xs icons">
{% if member.github %}
<a href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -194,17 +194,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<div class="col social-icon reddit"></div>
</a>
{%endif%}

View file

@ -975,6 +975,29 @@ a {
text-decoration: none;
}
/* External link icon */
a[href^="https:"]:not([href*="getmonero.org"]):not([class*="btn-link"]):not([class="chats-img"]):not([class*="ext-noicon"]):not([class*="white"]) {
background: url(/img/external.svg) no-repeat right;
padding-right: 0.7em;
background-size: 0.6em;
}
a[href^="https:"]:not([href*="getmonero.org"]).white {
background: url(/img/external-white.svg) no-repeat right;
padding-right: 0.7em;
background-size: 0.6em;
}
a[href^="https:"]:not([href*="getmonero.org"]).orange {
background: url(/img/external.svg) no-repeat right;
padding-right: 0.7em;
padding-top: 0.5em;
background-size: 0.6em;
}
/* END External link icon */
a:hover, a:focus, a:active {
outline: 0;
}
@ -3175,7 +3198,7 @@ span.icon-browser {
background-position: 0 -355px;
}
.downloads a#ext-noicon {
.downloads a.ext-noicon {
border-bottom: none;
}

View file

@ -249,33 +249,33 @@ permalink: /downloads/index.html
<td><img src="/img/cakewallet.png" alt="Cake Wallet Logo"><a href="https://cakewallet.com/">Cake Wallet</a></td>
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td>
<td><a id="ext-noicon" href="https://github.com/cake-tech/cake_wallet"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/cake-tech/cake_wallet"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/Monerujo-wallet.png" alt="Monerujo logo"><a href="https://monerujo.io/">Monerujo</a></td>
<td><span class="icon-android"></span></td>
<td>X</td>
<td><a id="ext-noicon" href="https://github.com/m2049r/xmrwallet"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/m2049r/xmrwallet"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/mymonero.png" alt="Mymonero logo" style="height: 15px;"><a href="https://mymonero.com/">MyMonero</a></td>
<td><span class="icon-apple"></span></td>
<td><span title="Browser" class="icon-browser"></span><span class="icon-linux"></span><span class="icon-windows"></span><span class="icon-apple"></span></td>
<td><a id="ext-noicon" href="https://github.com/mymonero"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/mymonero"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/edge-wallet.png" alt="Edge Logo"><a href="https://edge.app/">Edge</a></td>
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td>
<td><a id="ext-noicon" href="https://github.com/EdgeApp"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/EdgeApp"><span class="icon-github"></span></a></td>
</tr>
</table>
<div class="row between-xs mob-wallets mobile-only">
<ul>
<li><a id="ext-noicon" href="https://cakewallet.io"><img style="width: 50px" src="/img/cakewallet.png" alt="Cake Wallet Logo">Cake Wallet</a></li>
<li><a id="ext-noicon" href="https://monerujo.io"><img src="/img/Monerujo-wallet.png" alt="Monerujo Logo">Monerujo</a></li>
<li><a id="ext-noicon" href="https://mymonero.com"><img src="/img/mymonero.png" alt="MyMonero Logo">MyMonero</a></li>
<li><a id="ext-noicon" href="https://edge.app/"><img src="/img/edge-wallet.png" alt="Edge Logo">Edge</a></li>
<li><a class="ext-noicon" href="https://cakewallet.io"><img style="width: 50px" src="/img/cakewallet.png" alt="Cake Wallet Logo">Cake Wallet</a></li>
<li><a class="ext-noicon" href="https://monerujo.io"><img src="/img/Monerujo-wallet.png" alt="Monerujo Logo">Monerujo</a></li>
<li><a class="ext-noicon" href="https://mymonero.com"><img src="/img/mymonero.png" alt="MyMonero Logo">MyMonero</a></li>
<li><a class="ext-noicon" href="https://edge.app/"><img src="/img/edge-wallet.png" alt="Edge Logo">Edge</a></li>
</ul>
</div>
</div>
@ -307,11 +307,11 @@ permalink: /downloads/index.html
</div>
</div>
<div class="row mob-wallets center-xs">
<a href="https://www.ledger.com/monero-wallet/"><img src="/img/ledger.png"></a>
<a href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png"></a>
<a class="ext-noicon" href="https://www.ledger.com/monero-wallet/"><img src="/img/ledger.png"></a>
<a class="ext-noicon" href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png"></a>
</div>
<div class="row mob-wallets center-xs">
<a href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png"></a>
<a class="ext-noicon" href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png"></a>
</div>
</div>
<!-- End 'Hardware Wallets' -->

16
img/external-white.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 -256 1850 1850" id="svg3025" version="1.1" inkscape:version="0.48.3.1 r9886" width="100%" height="100%" sodipodi:docname="external_link_font_awesome.svg">
<metadata id="metadata3035">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs3033"/>
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview3031" showgrid="false" inkscape:zoom="0.13169643" inkscape:cx="896" inkscape:cy="896" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="0" inkscape:current-layer="svg3025"/>
<g transform="matrix(1,0,0,-1,30.372881,1426.9492)" id="g3027">
<path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" id="path3029" inkscape:connector-curvature="0" style="fill:white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

16
img/external.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 -256 1850 1850" id="svg3025" version="1.1" inkscape:version="0.48.3.1 r9886" width="100%" height="100%" sodipodi:docname="external_link_font_awesome.svg">
<metadata id="metadata3035">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs3033"/>
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview3031" showgrid="false" inkscape:zoom="0.13169643" inkscape:cx="896" inkscape:cy="896" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="0" inkscape:current-layer="svg3025"/>
<g transform="matrix(1,0,0,-1,30.372881,1426.9492)" id="g3027">
<path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" id="path3029" inkscape:connector-curvature="0" style="fill:currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB