Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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](alshedivat/al-folio#1329 (comment)) 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](uncss/uncss#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 request/request#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 request/request#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>
- Loading branch information
1 parent
5876cbc
commit 512dbe9
Showing
52 changed files
with
7,876 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| <!-- Bootsrap & MDB scripts --> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@{{ site.bootstrap.version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/mdbootstrap@{{ site.mdb.version }}/js/mdb.min.js" integrity="{{ site.mdb.integrity.js }}" crossorigin="anonymous"></script> | ||
| <script src="{{ '/assets/js/bootstrap.bundle.min.js' | relative_url }}"></script> | ||
| <script src="{{ '/assets/js/mdb.min.js' | relative_url }}"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| // animating icons | ||
| // -------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-beat { | ||
| animation-name: #{$fa-css-prefix}-beat; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-bounce { | ||
| animation-name: #{$fa-css-prefix}-bounce; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1)); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-fade { | ||
| animation-name: #{$fa-css-prefix}-fade; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-beat-fade { | ||
| animation-name: #{$fa-css-prefix}-beat-fade; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-flip { | ||
| animation-name: #{$fa-css-prefix}-flip; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-shake { | ||
| animation-name: #{$fa-css-prefix}-shake; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-spin { | ||
| animation-name: #{$fa-css-prefix}-spin; | ||
| animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-spin-reverse { | ||
| --#{$fa-css-prefix}-animation-direction: reverse; | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pulse, | ||
| .#{$fa-css-prefix}-spin-pulse { | ||
| animation-name: #{$fa-css-prefix}-spin; | ||
| animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); | ||
| animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); | ||
| animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); | ||
| animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8)); | ||
| } | ||
|
|
||
| // if agent or operating system prefers reduced motion, disable animations | ||
| // see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ | ||
| // see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | ||
| @media (prefers-reduced-motion: reduce) { | ||
| .#{$fa-css-prefix}-beat, | ||
| .#{$fa-css-prefix}-bounce, | ||
| .#{$fa-css-prefix}-fade, | ||
| .#{$fa-css-prefix}-beat-fade, | ||
| .#{$fa-css-prefix}-flip, | ||
| .#{$fa-css-prefix}-pulse, | ||
| .#{$fa-css-prefix}-shake, | ||
| .#{$fa-css-prefix}-spin, | ||
| .#{$fa-css-prefix}-spin-pulse { | ||
| animation-delay: -1ms; | ||
| animation-duration: 1ms; | ||
| animation-iteration-count: 1; | ||
| transition-delay: 0s; | ||
| transition-duration: 0s; | ||
| } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-beat { | ||
| 0%, 90% { transform: scale(1); } | ||
| 45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-bounce { | ||
| 0% { transform: scale(1,1) translateY(0); } | ||
| 10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); } | ||
| 30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); } | ||
| 50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); } | ||
| 57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); } | ||
| 64% { transform: scale(1,1) translateY(0); } | ||
| 100% { transform: scale(1,1) translateY(0); } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-fade { | ||
| 50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-beat-fade { | ||
| 0%, 100% { | ||
| opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4); | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| opacity: 1; | ||
| transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125)); | ||
| } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-flip { | ||
| 50% { | ||
| transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg)); | ||
| } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-shake { | ||
| 0% { transform: rotate(-15deg); } | ||
| 4% { transform: rotate(15deg); } | ||
| 8%, 24% { transform: rotate(-18deg); } | ||
| 12%, 28% { transform: rotate(18deg); } | ||
| 16% { transform: rotate(-22deg); } | ||
| 20% { transform: rotate(22deg); } | ||
| 32% { transform: rotate(-12deg); } | ||
| 36% { transform: rotate(12deg); } | ||
| 40%, 100% { transform: rotate(0deg); } | ||
| } | ||
|
|
||
| @keyframes #{$fa-css-prefix}-spin { | ||
| 0% { transform: rotate(0deg); } | ||
| 100% { transform: rotate(360deg); } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // bordered + pulled icons | ||
| // ------------------------- | ||
|
|
||
| .#{$fa-css-prefix}-border { | ||
| border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color}); | ||
| border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius}); | ||
| border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style}); | ||
| border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width}); | ||
| padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding}); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pull-left { | ||
| float: left; | ||
| margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); | ||
| } | ||
|
|
||
| .#{$fa-css-prefix}-pull-right { | ||
| float: right; | ||
| margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); | ||
| } |
Oops, something went wrong.