vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-17 17:39:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Automatically style external and settings links

Browse source
This commit is contained in:
davegson 2021-04-21 17:51:07 +02:00
parent e5b19ae026
commit 851c72a008
3 changed files with 51 additions and 1 deletions
_sass
_global.scss
assets/img/icons
cog.svgexternal.svg

40
_sass/_global.scss
View file

@ -450,7 +450,7 @@ input:checked {
}
@keyframes notification {
100% {
100% {
opacity: 1;
}
}
@ -474,3 +474,41 @@ input:checked {
grid-template-columns: repeat(7, minmax(max-content, 1fr))
}
}
/*
Grabs External Links only:
1. make sure it is NOT an internal link like: href="/guides/" by filtering it starts with http
2. exclude all links that contain "safing.io" which is super unlikely to hit external links
3. also exclude "localhost", which basically is 2. for local development
4. exclude social icons on top of content, which is currently grabbed with :not opacity-55, kinda dirty
*/
#page-container content a[href^="http"]:not([href*="safing.io"]):not([href*="localhost"]):not([class*="opacity-55"]):after {
background-image : url("/assets/img/icons/external.svg");
display : inline-block;
height : 10px;
width : 17px;
content : "";
background-repeat : no-repeat;
background-position-y: 0px;
background-position-x: 4px;
background-size : 10px;
}
/*
Grab Internal Setting links to add a cog
1., 2. from other docs pages, the href will include some form of /settings-reference(/)#
*/
#page-container content a[href*="portmaster/settings#"]:before,
#page-container content a[href*="portmaster/settings/#"]:before {
background-image : url("/assets/img/icons/cog.svg");
display : inline-block;
height : 20px;
width : 20px;
content : "";
background-repeat : no-repeat;
background-position-y: 5px;
background-position-x: 1px;
background-size : 17px;
}

6
assets/img/icons/cog.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none" >
<path stroke="#667eea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.7678 10.2322c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0"/>
<path stroke="#667eea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.849 4.12l.583.194c.534.178.895.678.895 1.241v.837c0 .712.568 1.293 1.28 1.308l.838.018c.485.01.925.289 1.142.723l.275.55c.252.504.153 1.112-.245 1.51l-.592.592c-.503.503-.512 1.316-.02 1.83l.58.606c.336.351.45.858.296 1.319l-.194.583c-.178.534-.678.895-1.241.895h-.837c-.712 0-1.293.568-1.308 1.28l-.018.838c-.01.485-.289.925-.723 1.142l-.55.275c-.504.252-1.112.153-1.51-.245l-.592-.592c-.503-.503-1.316-.512-1.83-.02l-.606.58c-.351.336-.858.45-1.319.296l-.583-.194c-.534-.178-.895-.678-.895-1.241v-.837c0-.712-.568-1.293-1.28-1.308l-.838-.018c-.485-.01-.925-.289-1.142-.723l-.275-.55c-.252-.504-.153-1.112.245-1.51l.592-.592c.503-.503.512-1.316.02-1.83l-.58-.606c-.337-.352-.451-.86-.297-1.32l.194-.583c.178-.534.678-.895 1.241-.895h.837c.712 0 1.293-.568 1.308-1.28l.018-.838c.012-.485.29-.925.724-1.142l.55-.275c.504-.252 1.112-.153 1.51.245l.592.592c.503.503 1.316.512 1.83.02l.606-.58c.351-.335.859-.449 1.319-.295z"/>
</g>
</svg>
Side by side

After

(image error) Size: 1.4 KiB

6
assets/img/icons/external.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" id="afa95051-7da0-49c8-913a-2d3dc8cd0db7" data-name="Layer 1" viewBox="0 0 20 20">
<g fill="none" >
<path stroke="#667eea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" transform="translate(-2 -2)" d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
<path stroke="#667eea" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 1h6v6M8 12L19 1"/>
</g>
</svg>
Side by side

After

(image error) Size: 467 B