Use icons with masks instead of inline svg
This commit is contained in:
parent
3dcd63e9b5
commit
dfa346aa40
|
|
@ -14,9 +14,7 @@
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
{% if subpage.data.socials.github %}
|
{% if subpage.data.socials.github %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{subpage.data.socials.github}}">
|
<a href="{{subpage.data.socials.github}}" class="icon-github" title="Github"></a>
|
||||||
{% include "partials/icons/github.html" %}
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<svg
|
|
||||||
height="1em"
|
|
||||||
width="1em"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 10 10"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,16 +0,0 @@
|
||||||
<svg
|
|
||||||
height="1em"
|
|
||||||
width="1em"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 10 10"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M2.09 9C2.69199 9 3.18 8.51199 3.18 7.91C3.18 7.30801 2.69199 6.82 2.09 6.82C1.48801 6.82 1 7.30801 1 7.91C1 8.51199 1.48801 9 2.09 9Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M1 1.22V2.635C4.515 2.635 7.365 5.485 7.365 9H8.78C8.78 4.705 5.295 1.22 1 1.22ZM1 4.05V5.465C2.95 5.465 4.535 7.05 4.535 9H5.95C5.95 6.265 3.735 4.05 1 4.05Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 502 B |
|
|
@ -1,14 +0,0 @@
|
||||||
<svg
|
|
||||||
height="1em"
|
|
||||||
width="1em"
|
|
||||||
aria-hidden="true"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 10 10"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -6,10 +6,10 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
{% if project.data.website.link %}
|
{% if project.data.website.link %}
|
||||||
<a href="{{ project.data.website.link }}" target="_blank" title="{{ project.data.website.title }}"><i>{% include "partials/icons/website.html" %}</i></a>
|
<a href="{{ project.data.website.link }}" target="_blank" title="{{ project.data.website.title }}" class="icon-internet"></a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if project.data.github.link %}
|
{% if project.data.github.link %}
|
||||||
<a href="{{ project.data.github.link }}" target="_blank" title="{{ project.data.github.title }}"><i>{% include "partials/icons/github.html" %}</i></a>
|
<a href="{{ project.data.github.link }}" target="_blank" title="{{ project.data.github.title }}" class="icon-github"></a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,5 +8,5 @@ classes: 'wrapper-full download-section'
|
||||||
<div class="flex-container column">
|
<div class="flex-container column">
|
||||||
<p>You want to print this document ?</p>
|
<p>You want to print this document ?</p>
|
||||||
<i></i>
|
<i></i>
|
||||||
<a href="#" download="" class="btn btn-icon--download">Download as PDF</a>
|
<a href="#" download="" class="btn icon--right icon-download">Download as PDF</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,23 +24,6 @@
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[class*="btn-icon"]:before {
|
|
||||||
--icon-size: 1.4rem;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
background-color: currentColor;
|
|
||||||
mask-size: 100% 100%;
|
|
||||||
height: var(--icon-size);
|
|
||||||
width: var(--icon-size);
|
|
||||||
margin-left: -.125rem;
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-icon--download:before {
|
|
||||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
background-color: var(--hover);
|
background-color: var(--hover);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
58
src/scss/components/_icons.scss
Normal file
58
src/scss/components/_icons.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
[class*=" icon-"]:before,
|
||||||
|
[class*=" icon-"]:after,
|
||||||
|
[class^="icon-"]:before,
|
||||||
|
[class^="icon-"]:after {
|
||||||
|
--icon-size: 1.5rem;
|
||||||
|
background-color: currentColor;
|
||||||
|
display: inline-block;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
height: 1.5rem;
|
||||||
|
height: var(--icon-size);
|
||||||
|
width: 1.5rem;
|
||||||
|
width: var(--icon-size);
|
||||||
|
-webkit-mask-size: 100% 100%;
|
||||||
|
mask-size: 100% 100%;
|
||||||
|
vertical-align: calc(.375em - .75rem);
|
||||||
|
vertical-align: calc((.75em - var(--icon-size))*.5);
|
||||||
|
}
|
||||||
|
[class*=" icon-"]:before,
|
||||||
|
[class^="icon-"]:before {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--right[class*=" icon-"]:before,
|
||||||
|
.icon--right[class^="icon-"]:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
.icon--left:before {
|
||||||
|
margin-left: -.125rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
.icon--right:after {
|
||||||
|
content: "";
|
||||||
|
margin-left: .5rem;
|
||||||
|
margin-right: -.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--sm:before,
|
||||||
|
.icon--sm:after {
|
||||||
|
--icon-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--lg:before,
|
||||||
|
.icon--lg:after {
|
||||||
|
--icon-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-github:before, .icon-github:after {
|
||||||
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.125C3.80903 0.119704 2.65529 0.5397 1.74644 1.30939C0.837586 2.07908 0.233325 3.14791 0.0424187 4.32348C-0.148487 5.49906 0.0865013 6.70418 0.705087 7.72191C1.32367 8.73965 2.28523 9.50315 3.41667 9.875C3.66667 9.91667 3.75 9.75 3.75 9.625V8.79167C2.375 9.08333 2.08333 8.125 2.08333 8.125C1.83333 7.54167 1.5 7.375 1.5 7.375C1.08333 7.08333 1.54167 7.08333 1.54167 7.08333C2.04167 7.08333 2.33333 7.58333 2.33333 7.58333C2.75 8.33333 3.5 8.125 3.79167 8C3.79167 7.66667 3.95833 7.45833 4.08333 7.33333C2.95833 7.20833 1.79167 6.79167 1.79167 4.83333C1.79167 4.33333 2 3.875 2.33333 3.54167C2.25 3.375 2.08333 2.875 2.33333 2.20833C2.33333 2.20833 2.75 2.08333 3.75 2.70833C4.56865 2.48711 5.43135 2.48711 6.25 2.70833C7.20833 2.08333 7.625 2.20833 7.625 2.20833C7.875 2.875 7.70833 3.375 7.625 3.54167C8 3.875 8.16667 4.33333 8.16667 4.875C8.16667 6.79167 7 7.20833 5.875 7.33333C6.08333 7.5 6.25 7.75 6.25 8.25V9.625C6.25 9.75 6.29167 9.91667 6.58333 9.875C7.71478 9.50315 8.67633 8.73965 9.29491 7.72191C9.9135 6.70418 10.1485 5.49906 9.95758 4.32348C9.76668 3.14791 9.16241 2.07908 8.25356 1.30939C7.34471 0.5397 6.19097 0.119704 5 0.125Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
.icon-download:before, .icon-download:after {
|
||||||
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
.icon-internet:before, .icon-internet:after {
|
||||||
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg height='1em' width='1em' aria-hidden='true' focusable='false' viewBox='0 0 10 10' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.18 6C7.22 5.67 7.25 5.34 7.25 5C7.25 4.66 7.22 4.33 7.18 4H8.87C8.95 4.32 9 4.655 9 5C9 5.345 8.95 5.68 8.87 6M6.295 8.78C6.595 8.225 6.825 7.625 6.985 7H8.46C7.98 7.825 7.215 8.465 6.295 8.78ZM6.17 6H3.83C3.78 5.67 3.75 5.34 3.75 5C3.75 4.66 3.78 4.325 3.83 4H6.17C6.215 4.325 6.25 4.66 6.25 5C6.25 5.34 6.215 5.67 6.17 6ZM5 8.98C4.585 8.38 4.25 7.715 4.045 7H5.955C5.75 7.715 5.415 8.38 5 8.98ZM3 3H1.54C2.015 2.17 2.785 1.53 3.7 1.22C3.4 1.775 3.175 2.375 3 3ZM1.54 7H3C3.175 7.625 3.4 8.225 3.7 8.78C2.785 8.465 2.015 7.825 1.54 7ZM1.13 6C1.05 5.68 1 5.345 1 5C1 4.655 1.05 4.32 1.13 4H2.82C2.78 4.33 2.75 4.66 2.75 5C2.75 5.34 2.78 5.67 2.82 6M5 1.015C5.415 1.615 5.75 2.285 5.955 3H4.045C4.25 2.285 4.585 1.615 5 1.015ZM8.46 3H6.985C6.825 2.375 6.595 1.775 6.295 1.22C7.215 1.535 7.98 2.17 8.46 3ZM5 0C2.235 0 0 2.25 0 5C0 6.32608 0.526784 7.59785 1.46447 8.53553C1.92876 8.99983 2.47995 9.36812 3.08658 9.6194C3.69321 9.87067 4.34339 10 5 10C6.32608 10 7.59785 9.47322 8.53553 8.53553C9.47322 7.59785 10 6.32608 10 5C10 4.34339 9.87067 3.69321 9.6194 3.08658C9.36812 2.47995 8.99983 1.92876 8.53553 1.46447C8.07124 1.00017 7.52005 0.631876 6.91342 0.380602C6.30679 0.129329 5.65661 0 5 0Z'%3E%3C/path%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
@use './components/focus';
|
@use './components/focus';
|
||||||
@use './components/button';
|
@use './components/button';
|
||||||
@use './components/skip-link';
|
@use './components/skip-link';
|
||||||
|
@use './components/icons';
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-padding-top: 2rem;
|
scroll-padding-top: 2rem;
|
||||||
|
|
@ -149,16 +150,14 @@ i {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
&:hover {
|
&:hover {
|
||||||
i {
|
color: #3a3a3a;
|
||||||
fill: #3a3a3a;
|
transition: color .2s ease-in-out;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
&:before,
|
||||||
--fill-color: var(--text);
|
&:after {
|
||||||
transition: fill .2s ease-in-out;
|
--icon-size: 1.2rem;
|
||||||
text-align: center;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue