From dfa346aa400e8a34648b998271d287d9320784f8 Mon Sep 17 00:00:00 2001 From: TheThomaas Date: Wed, 24 Jan 2024 22:39:48 +0100 Subject: [PATCH] Use icons with masks instead of inline svg --- src/_includes/about.liquid | 4 +- src/_includes/partials/icons/github.html | 14 ------ src/_includes/partials/icons/rss.html | 16 ------- src/_includes/partials/icons/website.html | 14 ------ src/_includes/partials/project.liquid | 4 +- src/pages/subpages/download.liquid | 2 +- src/scss/components/_button.scss | 17 ------- src/scss/components/_icons.scss | 58 +++++++++++++++++++++++ src/scss/critical.scss | 15 +++--- 9 files changed, 69 insertions(+), 75 deletions(-) delete mode 100644 src/_includes/partials/icons/github.html delete mode 100644 src/_includes/partials/icons/rss.html delete mode 100644 src/_includes/partials/icons/website.html create mode 100644 src/scss/components/_icons.scss diff --git a/src/_includes/about.liquid b/src/_includes/about.liquid index 4207ecc..7e950d1 100644 --- a/src/_includes/about.liquid +++ b/src/_includes/about.liquid @@ -14,9 +14,7 @@ diff --git a/src/_includes/partials/icons/github.html b/src/_includes/partials/icons/github.html deleted file mode 100644 index e51a8c2..0000000 --- a/src/_includes/partials/icons/github.html +++ /dev/null @@ -1,14 +0,0 @@ - - \ No newline at end of file diff --git a/src/_includes/partials/icons/rss.html b/src/_includes/partials/icons/rss.html deleted file mode 100644 index 8e51346..0000000 --- a/src/_includes/partials/icons/rss.html +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/src/_includes/partials/icons/website.html b/src/_includes/partials/icons/website.html deleted file mode 100644 index 80a857f..0000000 --- a/src/_includes/partials/icons/website.html +++ /dev/null @@ -1,14 +0,0 @@ - - \ No newline at end of file diff --git a/src/_includes/partials/project.liquid b/src/_includes/partials/project.liquid index 8c0a48b..88b6b0e 100644 --- a/src/_includes/partials/project.liquid +++ b/src/_includes/partials/project.liquid @@ -6,10 +6,10 @@
{% if project.data.website.link %} - {% include "partials/icons/website.html" %} + {% endif %} {% if project.data.github.link %} - {% include "partials/icons/github.html" %} + {% endif %}
diff --git a/src/pages/subpages/download.liquid b/src/pages/subpages/download.liquid index 0471a3c..224d850 100644 --- a/src/pages/subpages/download.liquid +++ b/src/pages/subpages/download.liquid @@ -8,5 +8,5 @@ classes: 'wrapper-full download-section'

You want to print this document ?

- Download as PDF + Download as PDF
\ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 853643e..7327040 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -24,23 +24,6 @@ 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 { background-color: var(--hover); } diff --git a/src/scss/components/_icons.scss b/src/scss/components/_icons.scss new file mode 100644 index 0000000..2b4b41d --- /dev/null +++ b/src/scss/components/_icons.scss @@ -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"); +} diff --git a/src/scss/critical.scss b/src/scss/critical.scss index b023ad1..10152b6 100644 --- a/src/scss/critical.scss +++ b/src/scss/critical.scss @@ -5,6 +5,7 @@ @use './components/focus'; @use './components/button'; @use './components/skip-link'; +@use './components/icons'; html { scroll-padding-top: 2rem; @@ -149,16 +150,14 @@ i { a { &:hover { - i { - fill: #3a3a3a; - } + color: #3a3a3a; + transition: color .2s ease-in-out; } - } - i { - --fill-color: var(--text); - transition: fill .2s ease-in-out; - text-align: center; + &:before, + &:after { + --icon-size: 1.2rem; + } } .top {