64cf57fab3
Tackled #1329 with [PurgeCSS](https://purgecss.com/). Being talking with @varuniyer about using [jekyll-uncss](https://github.com/episource/jekyll-uncss) to reduce css file sizes by ditching unused classes. This approach have 3 main problems: 1 - have some limitations as pointed [here](https://github.com/alshedivat/al-folio/issues/1329#issuecomment-1546517327) 2 - last update to [jekyll-uncss](https://github.com/episource/jekyll-uncss) was about 3 years ago, so it might have a few issues 3 - [uncss](https://github.com/uncss/uncss) haven't seem a new release in a while, currently [lacking maintenance](https://github.com/uncss/uncss/issues/459), and using some deprecated libraries as seem here: ``` npm install -g uncss npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin. npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 ``` I thought about giving PurgeCSS a go, since it has been more [actively maintaned](https://github.com/FullHuman/purgecss), but [jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) haven't. For this, I needed to change to use some local libraries instead of getting them via CDN. The good news is that it is quite effective in reducing css file sizes. Comparing dir sizes with `du -hs _site/assets/css/`: | current | minify | PurgeCSS | PurgeCSS + minify | | ------- | ------ | -------- | ----------------- | | 1,1M | 988K | 456K | 420K | --------- Signed-off-by: George Araujo <george.gcac@gmail.com>
76 lines
1.9 KiB
SCSS
76 lines
1.9 KiB
SCSS
// mixins
|
|
// --------------------------
|
|
|
|
// base rendering for an icon
|
|
@mixin fa-icon {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
}
|
|
|
|
// sets relative font-sizing and alignment (in _sizing)
|
|
@mixin fa-size ($font-size) {
|
|
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
|
|
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
|
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
|
}
|
|
|
|
// only display content to screen readers
|
|
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
|
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
|
@mixin fa-sr-only() {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
// use in conjunction with .sr-only to only display content when it's focused
|
|
@mixin fa-sr-only-focusable() {
|
|
&:not(:focus) {
|
|
@include fa-sr-only();
|
|
}
|
|
}
|
|
|
|
// sets a specific icon family to use alongside style + icon mixins
|
|
|
|
// convenience mixins for declaring pseudo-elements by CSS variable,
|
|
// including all style-specific font properties, and both the ::before
|
|
// and ::after elements in the duotone case.
|
|
@mixin fa-icon-solid($fa-var) {
|
|
@extend %fa-icon;
|
|
@extend .fa-solid;
|
|
|
|
&::before {
|
|
content: unquote("\"#{ $fa-var }\"");
|
|
}
|
|
}
|
|
|
|
@mixin fa-icon-regular($fa-var) {
|
|
@extend %fa-icon;
|
|
@extend .fa-regular;
|
|
|
|
&::before {
|
|
content: unquote("\"#{ $fa-var }\"");
|
|
}
|
|
}
|
|
|
|
@mixin fa-icon-brands($fa-var) {
|
|
@extend %fa-icon;
|
|
@extend .fa-brands;
|
|
|
|
&::before {
|
|
content: unquote("\"#{ $fa-var }\"");
|
|
}
|
|
}
|
|
|