Added initial webp fallbacks for Tor high security mode

Signed-off-by: Anxhelo Lushka <anxhelo1995@gmail.com>

assets/scss/_custom.scss

@@ -402,6 +402,10 @@ nav .nav-link {
   opacity: 0.5;
 }
 
+.no-js {
+  display: none !important;
+}
+
 // Footer
 
 footer {
@@ -1557,4 +1561,4 @@ svg path {
   padding: 1rem;
   text-decoration: none;
   z-index: 25;
-}
+}

content/de/blog/briar-android-illustration-system.md

@@ -18,13 +18,15 @@ As part of the Open Tech Fund Secure Usability and Accessibility Lab, we support
 
 We started by exploring several visual style directions for Briar’s Illustration System, basing the creative process on Briar’s brand identity and communicating with the project leads to better understand the needs and determine the best direction. After refreshing the UI color system, we proposed two main directions for the style of the illustrations, all scalable, having the possibility to create a consistent illustration system out of them.
 
-{{% figure class="wide" src="/img/blog/briar-illustration-phone.svg" alt="Briar phone illustration" %}}
+{{% figure class="wide with-js" src="/img/blog/briar-illustration-phone.svg" alt="Briar phone illustration" %}}
+{{% figure class="wide no-js" src="/img/blog/briar-illustration-phone.webp" alt="Briar phone illustration" %}}
 
 ----
 
 After presenting the visual styles and receiving feedback from the Briar team, we decided to keep elements from both and work on a new direction to replace the current Briar’s App illustrations. We recreated five of the current images for the third visual style using the updated color system and visual style.
 
-{{% figure class="wide" src="/img/blog/briar-illustrations.svg" alt="Briar device illustrations" %}}
+{{% figure class="wide with-js" src="/img/blog/briar-illustrations.svg" alt="Briar device illustrations" %}}
+{{% figure class="wide no-js" src="/img/blog/briar-illustrations.webp" alt="Briar device illustrations" %}}
 
 ## Illustration System
 
@@ -32,7 +34,8 @@ After deciding on the visual direction, we built an Open source variant-based il
 
 We are working to release these illustrations licensed under a Creative Commons license on Figma community as well.
 
-{{% figure src="/img/blog/briar-illustration-components.svg" alt="Briar device illustrations" %}}
+{{% figure class="with-js" src="/img/blog/briar-illustration-components.svg" alt="Briar device illustrations" %}}
+{{% figure class="no-js" src="/img/blog/briar-illustration-components.webp" alt="Briar device illustrations" %}}
 
 ## An illustrious future
 

content/de/work/adapt.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ ADAPT"
 summary = "We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere. "
 date = "2022-01-24 12:00:00 +0200"
-image = "adapt.svg"
+image = "adapt"
 tags = []
 categories = ["Branding", "Web Development", "Illustrations"]
 [links]

content/de/work/asciidoc.md

@@ -8,7 +8,7 @@ text = "#194954"
 title = "AsciiDoc"
 summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
 date = "2022-08-15 12:00:00 +0200"
-image = "asciidoc.svg"
+image = "asciidoc"
 tags = []
 categories = ["Branding", "Interaction Design", "Layout Design"]
 [links]
@@ -24,7 +24,8 @@ We were approached by the AsciiDoc Working Group, part of the Eclipse Foundation
 
 More often than not we work on grassroot open source projects and help them establish their own identity. Here however we were working with an Eclipse Foundation project, a major organization in the open source world, owning various Trademarks, including AsciiDoc. We had to ensure we delivered everything necessary for the brand to work as part of the Working Group, website, trademark and file type icon.
 
-{{< figure src="/img/work/asciidoc-brand.svg" alt="AsciiDoc branding moodboard" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-brand.svg" alt="AsciiDoc branding moodboard" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-brand.webp" alt="AsciiDoc branding moodboard" >}}
 
 ## Crafting the new brand
 
@@ -107,15 +108,20 @@ What is it that makes us radically different?
 
 Soon we were able to pinpoint the tone of voice of AsciiDoc and how to present it to to the world. Beyond the tone of voice however, we also asked the workshop participants to tell us how the AsciiDoc brand should feel like, using a set of sliders representing different values determining the personality and look and feel of the brand.
 
-{{< figure src="/img/work/asciidoc-personality.svg" alt="AsciiDoc personality" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-personality.svg" alt="AsciiDoc personality" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-personality.webp" alt="AsciiDoc personality" >}}
+
 
 Using that information led to interesting discussions among the participants, sparking thoughtful conversations and leading us through the visual exploration of the brand, most importantly its logo.
 
-{{< figure src="/img/work/asciidoc-safespace.svg" alt="AsciiDoc logo safe spacing" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-safespace.svg" alt="AsciiDoc logo safe spacing" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-safespace.webp" alt="AsciiDoc logo safe spacing" >}}
+
 
 Through various stages of feedback processes, determining visual directions preferred by the working group, we concluded finally with the current AsciiDoc logo. The logomark resembles a D and A crossed out on its negative space; a simple yet effective interpretation of the AsciiDoc brand. Using freely licensed fonts Urbanist and Inter rounded up the visual identity as well, bringing a unique personality to AsciiDoc, paired with splendid readability, which was quite crucial for a markup language such as AsciiDoc.
 
-{{< figure src="/img/work/asciidoc-font.svg" alt="AsciiDoc font" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-font.svg" alt="AsciiDoc font" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-font.webp" alt="AsciiDoc font" >}}
 
 ## Website
 

content/de/work/calyxos.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "CalyxOS"
 summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
 date = "2022-03-24 12:00:00 +0200"
-image = "calyxos.svg"
+image = "calyxos"
 tags = []
 categories = ["Illustrations", "UX Research", "Accessibility"]
 [links]
@@ -23,13 +23,15 @@ CalyxOS is an Android mobile operating system that puts privacy and security int
 
 CalyxOS needs to be the obvious alternative to the big mobile duopoly Google and Apple are controlling, so we prioritized making CalyxOS more approachable by improving various visual identity shortcoming. We aimed to bring an easy-going and fun note to the privacy values CalyxOS embodies. At the end of the day, this should be a phone available to the every-day person.
 
-{{< figure src="/img/work/calyxos-flower.svg" alt="CalyxOS illustration preview" >}}
+{{< figure class="with-js" src="/img/work/calyxos-flower.svg" alt="CalyxOS illustration preview" >}}
+{{< figure class="no-js" src="/img/work/calyxos-flower.webp" alt="CalyxOS illustration preview" >}}
 
 ## Illustrations
 
 We helped CalyxOS by offering a new set of Illustrations to replace the current ones, giving a unique and modern look, also setting a flexible and scalable graphic style. These graphics are bright, fun, abstract, vivid, with elements of privacy and security integrated into them. We wanted to move away from the overexposed approach of shady metaphors when it comes to privacy and instead settled for a visual approach which normalized privacy features.
 
-{{< figure src="/img/work/calyxos-illustrations.svg" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
+{{< figure class="with-js" src="/img/work/calyxos-illustrations.svg" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
+{{< figure class="no-js" src="/img/work/calyxos-illustrations.webp" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
 
 ## Wallpapers
 

content/de/work/censoredplanet.md

@@ -8,7 +8,7 @@ accent = "#000000"
 title = "Censored Planet"
 summary = "We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways."
 date = "2022-03-25 12:00:00 +0200"
-image = "censoredplanet.svg"
+image = "censoredplanet"
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/de/work/i2p.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "I2P - The Invisible Internet Project"
 summary = "We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox."
 date = "2017-01-24 12:00:00 +0200"
-image = "i2p.svg"
+image = "i2p"
 tags = []
 categories = ["Branding", "UX Research"]
 [links]
@@ -85,7 +85,6 @@ Considering the current console implementation and all the features I2P offers t
 
 ![i2p browser](/img/work/i2p-browser.webp)
 
-
 ## How we helped I2P
 
 - We helped I2P define the values and the mission of their brand, starting with 

content/de/work/optima.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ OPTIMA"
 summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
 date = "2021-01-24 12:00:00 +0200"
-image = "optima.svg"
+image = "optima"
 tags = []
 categories = ["Branding", "Illustrations"]
 [links]
@@ -21,13 +21,16 @@ Internews’ OPTIMA program is designed to build resources and advocacy capacity
 
 The visual design for Internews’ OPTIMA aims to create a modern, approachable, and friendly identity for the program and its mission. As part of this scope we created a set of design deliverables, as well as accompanying brand guidelines to ensure coherent application of the OPTIMA brand across different channels.
 
-{{< figure src="/img/work/optima-brand.svg" alt="Optima brand preview" >}}
+{{< figure class="with-js" src="/img/work/optima-brand.svg" alt="Optima brand preview" >}}
+{{< figure class="no-js" src="/img/work/optima-brand.webp" alt="Optima brand preview" >}}
+
 
 ## About the Logo
 
 As part of the logo, the rectangles represent censorship, while the divided OPTIMA stands for the obstacles in communication. The logo of Internews' OPTIMA aims to represent the idea of being able to communicate and understand through distance, division, and censorship. 
 
-{{< figure src="/img/work/optima-text.svg" alt="Optima logo composition" >}}
+{{< figure class="with-js" src="/img/work/optima-text.svg" alt="Optima logo composition" >}}
+{{< figure class="no-js" src="/img/work/optima-text.webp" alt="Optima logo composition" >}}
 
 ## Visual Style
 
@@ -37,7 +40,8 @@ We designed the visual components in a modular way in order to compliment the en
 
 The illustrations set is flexible and open for changes. Any icon can be added, as long as it is designed in this specific style.
 
-{{< figure src="/img/work/optima-icons.svg" alt="Optima brand elements preview" >}}
+{{< figure class="with-js" src="/img/work/optima-icons.svg" alt="Optima brand elements preview" >}}
+{{< figure class="no-js" src="/img/work/optima-icons.webp" alt="Optima brand elements preview" >}}
 
 ## Independent Slogan
 
@@ -47,7 +51,8 @@ It stands in the middle of the two graphic styles, creating a bridge between the
 
 There is no constraint regarding the logo and slogan relationship. The slogan is independent. It may be shown with the logo or just part of the illustrated artworks.
 
-{{< figure src="/img/work/optima-slogan.svg" alt="Optima brand elements 'Defending the Internet with Data'">}}
+{{< figure class="with-js" src="/img/work/optima-slogan.svg" alt="Optima brand elements 'Defending the Internet with Data'">}}
+{{< figure class="no-js" src="/img/work/optima-slogan.webp" alt="Optima brand elements 'Defending the Internet with Data'">}}
 
 ## Brand Book
 
@@ -55,7 +60,8 @@ The brand book is an important addition and documentation of the visual identity
 
 Link: [Internews’ OPTIMA - Brand Book](https://www.figma.com/proto/sf5rhrK9a6tS7yEomiNwmr/Optima?page-id=248%3A1754&node-id=248%3A1755&viewport=241%2C48%2C0.13&scaling=contain)
 
-{{< figure src="/img/work/optima-typography.svg" alt="Optima Typeface and color palette preview" >}}
+{{< figure class="with-js" src="/img/work/optima-typography.svg" alt="Optima Typeface and color palette preview" >}}
+{{< figure class="no-js" src="/img/work/optima-typography.webp" alt="Optima Typeface and color palette preview" >}}
 
 ## Needs Assessment Report
 

content/de/work/oxizide.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Oxidize - The Conference of embedded Rust"
 summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
 date = "2020-03-24 12:00:00 +0200"
-image = "oxidize.svg"
+image = "oxidize"
 tags = []
 categories = ["Branding", "Web Development"]
 [links]
@@ -25,7 +25,8 @@ They needed a visual brand to be in alignment with what they communicate and to
 
 Combining the concept of circuits and chemistry helped me design this logo. It is simple, monochrome, and symbolically based on the atomic structure of Oxygen and the role of embedded systems in technology. The open spaces between the rounded shapes represent the open-source.
 
-{{< figure src="/img/work/oxidize-brand.svg" alt="Oxidize logo composition" >}}
+{{< figure class="with-js" src="/img/work/oxidize-brand.svg" alt="Oxidize logo composition" >}}
+{{< figure class="no-js" src="/img/work/oxidize-brand.webp" alt="Oxidize logo composition" >}}
 
 ## Words to graphics
 
@@ -49,13 +50,15 @@ The identity of Oxidize Conference comes with characteristics as:
 
 </div>
 
-{{< figure src="/img/work/oxidize-pattern.svg" alt="Oxidize branding overview" >}}
+{{< figure class="with-js" src="/img/work/oxidize-pattern.svg" alt="Oxidize branding overview" >}}
+{{< figure class="no-js" src="/img/work/oxidize-pattern.webp" alt="Oxidize branding overview" >}}
 
 ## Wordmark in binary
 
 The Oxidize logo wordmark is inspired from the binary system which is made from  “0” and “1”. Using a simple minimal design for the “i” and the “o”, applying the same style on the other letters, we designed a unique wordmark for Oxidize, which is modern and stable.
 
-{{< figure src="/img/work/oxidize-watermark.svg" alt="Oxidize logo wordmark preview" >}}
+{{< figure class="with-js" src="/img/work/oxidize-watermark.svg" alt="Oxidize logo wordmark preview" >}}
+{{< figure class="no-js" src="/img/work/oxidize-watermark.webp" alt="Oxidize logo wordmark preview" >}}
 
 ## Consistency
 
@@ -63,7 +66,6 @@ After setting the visual identity, everything else was done step-by-step. With v
 
 {{< figure src="/img/work/oxidize-swag.webp" alt="Oxidize print mockups (Tshirt, badge, poster)" >}}
 
-
 ## How we helped
 
 - We helped Oxidize create their brand and vizual identity.

content/de/work/stackspin.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Stackspin"
 summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
 date = "2022-03-25 12:00:00 +0200"
-image = "stackspin.svg"
+image = "stackspin"
 tags = []
 categories = ["Branding", "UX Research", "Illustrations", "Interaction Design"]
 [links]
@@ -23,19 +23,24 @@ Working with Stackpin consisted in creating a modern and relevant brand identity
 
 We created the entire brand design and implemented the new identity in the X pages. To ensure the visual consistency, we provided a guideline manual so Stackspin’s visual identity will presented correctly in their future activity.
 
-{{< figure src="/img/work/stackspin-cover.svg" alt="Stackspin Logo cover image" >}}
+{{< figure class="with-js" src="/img/work/stackspin-cover.svg" alt="Stackspin Logo cover image" >}}
+{{< figure class="no-js" src="/img/work/stackspin-cover.webp" alt="Stackspin Logo cover image" >}}
 
 ## S as Stack / S as Spin,
 
 The icon of the new logo symbolizes the stacked blocks while forming the letter S. (something about the colorr and the Greenhost connection).
 
-{{< figure src="/img/work/stackspin-icon.svg" alt="Stackspin logo composition" >}}
+{{< figure class="with-js" src="/img/work/stackspin-icon.svg" alt="Stackspin logo composition" >}}
+{{< figure class="no-js" src="/img/work/stackspin-icon.webp" alt="Stackspin logo composition" >}}
+
 
 ## Typography and Colors
 
-{{< figure src="/img/work/stackspin-typography.svg" alt="Typeface preview (Space Grotesk & Inter)" >}}
+{{< figure class="with-js" src="/img/work/stackspin-typography.svg" alt="Typeface preview (Space Grotesk & Inter)" >}}
+{{< figure class="no-js" src="/img/work/stackspin-typography.webp" alt="Typeface preview (Space Grotesk & Inter)" >}}
 
-{{< figure src="/img/work/stackspin-colors.svg" alt="Color palette preview (teal)" >}}
+{{< figure class="with-js" src="/img/work/stackspin-colors.svg" alt="Color palette preview (teal)" >}}
+{{< figure class="no-js" src="/img/work/stackspin-colors.webp" alt="Color palette preview (teal)" >}}
 
 ## Brand Book
 

content/de/work/thunderbird.md

@@ -9,7 +9,7 @@ text = "#FFFFFF"
 title = "Thunderbird"
 summary = "We created the new Thunderbird brand and helped the project with extensive usability research."
 date = "2019-01-24 12:00:00 +0200"
-image = "thunderbird.svg"
+image = "thunderbird"
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/de/work/totem.md

@@ -8,7 +8,7 @@ text = "#064E3B"
 title = "Totem Project"
 summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
 date = "2022-08-08 12:00:00 +0200"
-image = "totem.svg"
+image = "totem"
 tags = []
 categories = ["Branding", "Illustrations", "Layout Design"]
 [links]
@@ -25,13 +25,15 @@ Although it can be very effective and extremely useful, face-to-face, offline tr
 
 Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.
 
-{{< figure src="/img/work/totem-brand.svg" alt="Totem branding moodboard" >}}
+{{< figure class="with-js" src="/img/work/totem-brand.svg" alt="Totem branding moodboard" >}}
+{{< figure class="no-js" src="/img/work/totem-brand.webp" alt="Totem branding moodboard" >}}
 
 ## Same old turtle, new shell
 
 But before taking on the illustration system, we updated the Totem logo, together with its turtle mascot, offering a friendly refreshed logo with a new typeface (Maven Pro) moving away from the old typeface (Ubuntu). While Ubuntu is a beautiful and versatile typeface, it’s characteristic to Canonical’s Linux distribution. We wanted for Totem to establish its own character with time.
 
-{{< figure src="/img/work/totem-safespace.svg" alt="Totem logo safe spacing" >}}
+{{< figure class="with-js" src="/img/work/totem-safespace.svg" alt="Totem logo safe spacing" >}}
+{{< figure class="no-js" src="/img/work/totem-safespace.webp" alt="Totem logo safe spacing" >}}
 
 ## Illustrations
 
@@ -41,7 +43,8 @@ Our objective was to create a modular illustration system that is expandable, op
 
 With Totem being a platform where independent educators can create and submit courses, they should be empowered to create their own illustrations. The illustration system should make it easier for them to create covers which is close to the Totem identity, even if they are not professional designers.
 
-{{< figure src="/img/work/totem-illustrations.svg" alt="Totem illustrations" >}}
+{{< figure class="with-js" src="/img/work/totem-illustrations.svg" alt="Totem illustrations" >}}
+{{< figure class="no-js" src="/img/work/totem-illustrations.webp" alt="Totem illustrations" >}}
 
 ## Figma Community
 
@@ -61,4 +64,5 @@ We were very excited to open-source the illustration system under Creative Commo
 
 While talking to the Totem team, they were looking forward to build up this story arch further with the aquatic theme in Totem. The world of the turtle mascot is versatile and offers a wide range of metaphors we can explore visually. Protagonists (like the turtle) and antagonists (trolls, bugs) are included and offer a way to explain complex topics in a more simplistic visual explanation, especially tailored for beginners.
 
-{{< figure src="/img/work/totem-turtle.svg" alt="Totem turtle" >}}
+{{< figure class="with-js" src="/img/work/totem-turtle.svg" alt="Totem turtle" >}}
+{{< figure class="no-js" src="/img/work/totem-turtle.webp" alt="Totem turtle" >}}

content/en/blog/briar-android-illustration-system.md

@@ -18,13 +18,15 @@ As part of the Open Tech Fund Secure Usability and Accessibility Lab, we support
 
 We started by exploring several visual style directions for Briar’s Illustration System, basing the creative process on Briar’s brand identity and communicating with the project leads to better understand the needs and determine the best direction. After refreshing the UI color system, we proposed two main directions for the style of the illustrations, all scalable, having the possibility to create a consistent illustration system out of them.
 
-{{% figure class="wide" src="/img/blog/briar-illustration-phone.svg" alt="Briar phone illustration" %}}
+{{% figure class="wide with-js" src="/img/blog/briar-illustration-phone.svg" alt="Briar phone illustration" %}}
+{{% figure class="wide no-js" src="/img/blog/briar-illustration-phone.webp" alt="Briar phone illustration" %}}
 
 ----
 
 After presenting the visual styles and receiving feedback from the Briar team, we decided to keep elements from both and work on a new direction to replace the current Briar’s App illustrations. We recreated five of the current images for the third visual style using the updated color system and visual style.
 
-{{% figure class="wide" src="/img/blog/briar-illustrations.svg" alt="Briar device illustrations" %}}
+{{% figure class="wide with-js" src="/img/blog/briar-illustrations.svg" alt="Briar device illustrations" %}}
+{{% figure class="wide no-js" src="/img/blog/briar-illustrations.webp" alt="Briar device illustrations" %}}
 
 ## Illustration System
 
@@ -32,12 +34,12 @@ After deciding on the visual direction, we built an Open source variant-based il
 
 We are working to release these illustrations licensed under a Creative Commons license on Figma community as well.
 
-{{% figure src="/img/blog/briar-illustration-components.svg" alt="Briar device illustrations" %}}
+{{% figure class="with-js" src="/img/blog/briar-illustration-components.svg" alt="Briar device illustrations" %}}
+{{% figure class="no-js" src="/img/blog/briar-illustration-components.webp" alt="Briar device illustrations" %}}
 
 ## An illustrious future
 
 We have been working with Briar for over 4 years now. During this time we constantly added new features and designed new experiences. Over time a bit of design debt has been collected, mostly noticeable in the different style and incoherent usage of illustrations, iconography and UI elements. With this we are doing the first step of creating a system for illustrations coherent across the app as well as having the needed ingredients for new illustrations when new features are added in the future
-
 We hope that this will be the first step in refreshing Briar’s GUI and with more tweaks coming along in the future.
 
 You can find the source files of the new Briar illustration system on our GitHub repos and [Figma Community](https://www.figma.com/community/file/1169212217112991383).

content/en/work/adapt.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ ADAPT"
 summary = "We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere. "
 date = "2022-01-24 12:00:00 +0200"
-image = "adapt.svg"
+image = "adapt"
 tags = []
 categories = ["Branding", "Web Development", "Illustrations"]
 [links]

content/en/work/asciidoc.md

@@ -8,7 +8,7 @@ text = "#194954"
 title = "AsciiDoc"
 summary = "AsciiDoc is a plain text markup language for writing technical content. We were approached by the AsciiDoc working group to create a coherent brand identity and website to serve as the home for the AsciiDoc language."
 date = "2022-08-15 12:00:00 +0200"
-image = "asciidoc.svg"
+image = "asciidoc"
 tags = []
 categories = ["Branding", "Interaction Design", "Layout Design"]
 [links]
@@ -24,7 +24,8 @@ We were approached by the AsciiDoc Working Group, part of the Eclipse Foundation
 
 More often than not we work on grassroot open source projects and help them establish their own identity. Here however we were working with an Eclipse Foundation project, a major organization in the open source world, owning various Trademarks, including AsciiDoc. We had to ensure we delivered everything necessary for the brand to work as part of the Working Group, website, trademark and file type icon.
 
-{{< figure src="/img/work/asciidoc-brand.svg" alt="AsciiDoc branding moodboard" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-brand.svg" alt="AsciiDoc branding moodboard" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-brand.webp" alt="AsciiDoc branding moodboard" >}}
 
 ## Crafting the new brand
 
@@ -107,15 +108,20 @@ What is it that makes us radically different?
 
 Soon we were able to pinpoint the tone of voice of AsciiDoc and how to present it to to the world. Beyond the tone of voice however, we also asked the workshop participants to tell us how the AsciiDoc brand should feel like, using a set of sliders representing different values determining the personality and look and feel of the brand.
 
-{{< figure src="/img/work/asciidoc-personality.svg" alt="AsciiDoc personality" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-personality.svg" alt="AsciiDoc personality" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-personality.webp" alt="AsciiDoc personality" >}}
+
 
 Using that information led to interesting discussions among the participants, sparking thoughtful conversations and leading us through the visual exploration of the brand, most importantly its logo.
 
-{{< figure src="/img/work/asciidoc-safespace.svg" alt="AsciiDoc logo safe spacing" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-safespace.svg" alt="AsciiDoc logo safe spacing" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-safespace.webp" alt="AsciiDoc logo safe spacing" >}}
+
 
 Through various stages of feedback processes, determining visual directions preferred by the working group, we concluded finally with the current AsciiDoc logo. The logomark resembles a D and A crossed out on its negative space; a simple yet effective interpretation of the AsciiDoc brand. Using freely licensed fonts Urbanist and Inter rounded up the visual identity as well, bringing a unique personality to AsciiDoc, paired with splendid readability, which was quite crucial for a markup language such as AsciiDoc.
 
-{{< figure src="/img/work/asciidoc-font.svg" alt="AsciiDoc font" >}}
+{{< figure class="with-js" src="/img/work/asciidoc-font.svg" alt="AsciiDoc font" >}}
+{{< figure class="no-js" src="/img/work/asciidoc-font.webp" alt="AsciiDoc font" >}}
 
 ## Website
 

content/en/work/calyxos.md

@@ -8,7 +8,7 @@ text = "#FFFFFF"
 title = "CalyxOS"
 summary = "We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System."
 date = "2022-03-24 12:00:00 +0200"
-image = "calyxos.svg"
+image = "calyxos"
 tags = []
 categories = ["Illustrations", "UX Research", "Accessibility"]
 [links]
@@ -23,13 +23,15 @@ CalyxOS is an Android mobile operating system that puts privacy and security int
 
 CalyxOS needs to be the obvious alternative to the big mobile duopoly Google and Apple are controlling, so we prioritized making CalyxOS more approachable by improving various visual identity shortcoming. We aimed to bring an easy-going and fun note to the privacy values CalyxOS embodies. At the end of the day, this should be a phone available to the every-day person.
 
-{{< figure src="/img/work/calyxos-flower.svg" alt="CalyxOS illustration preview" >}}
+{{< figure class="with-js" src="/img/work/calyxos-flower.svg" alt="CalyxOS illustration preview" >}}
+{{< figure class="no-js" src="/img/work/calyxos-flower.webp" alt="CalyxOS illustration preview" >}}
 
 ## Illustrations
 
 We helped CalyxOS by offering a new set of Illustrations to replace the current ones, giving a unique and modern look, also setting a flexible and scalable graphic style. These graphics are bright, fun, abstract, vivid, with elements of privacy and security integrated into them. We wanted to move away from the overexposed approach of shady metaphors when it comes to privacy and instead settled for a visual approach which normalized privacy features.
 
-{{< figure src="/img/work/calyxos-illustrations.svg" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
+{{< figure class="with-js" src="/img/work/calyxos-illustrations.svg" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
+{{< figure class="no-js" src="/img/work/calyxos-illustrations.webp" alt="CalyxOS overview of 5 illustrations on dark mode" >}}
 
 ## Wallpapers
 

content/en/work/censoredplanet.md

@@ -8,7 +8,7 @@ accent = "#000000"
 title = "Censored Planet"
 summary = "We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways."
 date = "2022-03-25 12:00:00 +0200"
-image = "censoredplanet.svg"
+image = "censoredplanet"
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/en/work/i2p.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "I2P - The Invisible Internet Project"
 summary = "We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox."
 date = "2017-01-24 12:00:00 +0200"
-image = "i2p.svg"
+image = "i2p"
 tags = []
 categories = ["Branding", "UX Research"]
 [links]
@@ -85,7 +85,6 @@ Considering the current console implementation and all the features I2P offers t
 
 ![i2p browser](/img/work/i2p-browser.webp)
 
-
 ## How we helped I2P
 
 - We helped I2P define the values and the mission of their brand, starting with 

content/en/work/optima.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Internews’ OPTIMA"
 summary = "We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style. "
 date = "2021-01-24 12:00:00 +0200"
-image = "optima.svg"
+image = "optima"
 tags = []
 categories = ["Branding", "Illustrations"]
 [links]
@@ -21,13 +21,16 @@ Internews’ OPTIMA program is designed to build resources and advocacy capacity
 
 The visual design for Internews’ OPTIMA aims to create a modern, approachable, and friendly identity for the program and its mission. As part of this scope we created a set of design deliverables, as well as accompanying brand guidelines to ensure coherent application of the OPTIMA brand across different channels.
 
-{{< figure src="/img/work/optima-brand.svg" alt="Optima brand preview" >}}
+{{< figure class="with-js" src="/img/work/optima-brand.svg" alt="Optima brand preview" >}}
+{{< figure class="no-js" src="/img/work/optima-brand.webp" alt="Optima brand preview" >}}
+
 
 ## About the Logo
 
 As part of the logo, the rectangles represent censorship, while the divided OPTIMA stands for the obstacles in communication. The logo of Internews' OPTIMA aims to represent the idea of being able to communicate and understand through distance, division, and censorship. 
 
-{{< figure src="/img/work/optima-text.svg" alt="Optima logo composition" >}}
+{{< figure class="with-js" src="/img/work/optima-text.svg" alt="Optima logo composition" >}}
+{{< figure class="no-js" src="/img/work/optima-text.webp" alt="Optima logo composition" >}}
 
 ## Visual Style
 
@@ -37,7 +40,8 @@ We designed the visual components in a modular way in order to compliment the en
 
 The illustrations set is flexible and open for changes. Any icon can be added, as long as it is designed in this specific style.
 
-{{< figure src="/img/work/optima-icons.svg" alt="Optima brand elements preview" >}}
+{{< figure class="with-js" src="/img/work/optima-icons.svg" alt="Optima brand elements preview" >}}
+{{< figure class="no-js" src="/img/work/optima-icons.webp" alt="Optima brand elements preview" >}}
 
 ## Independent Slogan
 
@@ -47,7 +51,8 @@ It stands in the middle of the two graphic styles, creating a bridge between the
 
 There is no constraint regarding the logo and slogan relationship. The slogan is independent. It may be shown with the logo or just part of the illustrated artworks.
 
-{{< figure src="/img/work/optima-slogan.svg" alt="Optima brand elements 'Defending the Internet with Data'">}}
+{{< figure class="with-js" src="/img/work/optima-slogan.svg" alt="Optima brand elements 'Defending the Internet with Data'">}}
+{{< figure class="no-js" src="/img/work/optima-slogan.webp" alt="Optima brand elements 'Defending the Internet with Data'">}}
 
 ## Brand Book
 
@@ -55,7 +60,8 @@ The brand book is an important addition and documentation of the visual identity
 
 Link: [Internews’ OPTIMA - Brand Book](https://www.figma.com/proto/sf5rhrK9a6tS7yEomiNwmr/Optima?page-id=248%3A1754&node-id=248%3A1755&viewport=241%2C48%2C0.13&scaling=contain)
 
-{{< figure src="/img/work/optima-typography.svg" alt="Optima Typeface and color palette preview" >}}
+{{< figure class="with-js" src="/img/work/optima-typography.svg" alt="Optima Typeface and color palette preview" >}}
+{{< figure class="no-js" src="/img/work/optima-typography.webp" alt="Optima Typeface and color palette preview" >}}
 
 ## Needs Assessment Report
 

content/en/work/oxizide.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Oxidize - The Conference of embedded Rust"
 summary = "We created the brand and visual identity for Oxidize, designing every digital and print asset for the conference and providing a long-term design solution."
 date = "2020-03-24 12:00:00 +0200"
-image = "oxidize.svg"
+image = "oxidize"
 tags = []
 categories = ["Branding", "Web Development"]
 [links]
@@ -25,7 +25,8 @@ They needed a visual brand to be in alignment with what they communicate and to
 
 Combining the concept of circuits and chemistry helped me design this logo. It is simple, monochrome, and symbolically based on the atomic structure of Oxygen and the role of embedded systems in technology. The open spaces between the rounded shapes represent the open-source.
 
-{{< figure src="/img/work/oxidize-brand.svg" alt="Oxidize logo composition" >}}
+{{< figure class="with-js" src="/img/work/oxidize-brand.svg" alt="Oxidize logo composition" >}}
+{{< figure class="no-js" src="/img/work/oxidize-brand.webp" alt="Oxidize logo composition" >}}
 
 ## Words to graphics
 
@@ -49,13 +50,15 @@ The identity of Oxidize Conference comes with characteristics as:
 
 </div>
 
-{{< figure src="/img/work/oxidize-pattern.svg" alt="Oxidize branding overview" >}}
+{{< figure class="with-js" src="/img/work/oxidize-pattern.svg" alt="Oxidize branding overview" >}}
+{{< figure class="no-js" src="/img/work/oxidize-pattern.webp" alt="Oxidize branding overview" >}}
 
 ## Wordmark in binary
 
 The Oxidize logo wordmark is inspired from the binary system which is made from  “0” and “1”. Using a simple minimal design for the “i” and the “o”, applying the same style on the other letters, we designed a unique wordmark for Oxidize, which is modern and stable.
 
-{{< figure src="/img/work/oxidize-watermark.svg" alt="Oxidize logo wordmark preview" >}}
+{{< figure class="with-js" src="/img/work/oxidize-watermark.svg" alt="Oxidize logo wordmark preview" >}}
+{{< figure class="no-js" src="/img/work/oxidize-watermark.webp" alt="Oxidize logo wordmark preview" >}}
 
 ## Consistency
 
@@ -63,7 +66,6 @@ After setting the visual identity, everything else was done step-by-step. With v
 
 {{< figure src="/img/work/oxidize-swag.webp" alt="Oxidize print mockups (Tshirt, badge, poster)" >}}
 
-
 ## How we helped
 
 - We helped Oxidize create their brand and vizual identity.

content/en/work/stackspin.md

@@ -7,7 +7,7 @@ text = "#FFFFFF"
 title = "Stackspin"
 summary = "We helped Stackspin, previously known as OpenAppStack, build their new brand personality and visual identity conducting user experience research to provide relevant experience to their users."
 date = "2022-03-25 12:00:00 +0200"
-image = "stackspin.svg"
+image = "stackspin"
 tags = []
 categories = ["Branding", "UX Research", "Illustrations", "Interaction Design"]
 [links]
@@ -23,19 +23,24 @@ Working with Stackpin consisted in creating a modern and relevant brand identity
 
 We created the entire brand design and implemented the new identity in the X pages. To ensure the visual consistency, we provided a guideline manual so Stackspin’s visual identity will presented correctly in their future activity.
 
-{{< figure src="/img/work/stackspin-cover.svg" alt="Stackspin Logo cover image" >}}
+{{< figure class="with-js" src="/img/work/stackspin-cover.svg" alt="Stackspin Logo cover image" >}}
+{{< figure class="no-js" src="/img/work/stackspin-cover.webp" alt="Stackspin Logo cover image" >}}
 
 ## S as Stack / S as Spin,
 
 The icon of the new logo symbolizes the stacked blocks while forming the letter S. (something about the colorr and the Greenhost connection).
 
-{{< figure src="/img/work/stackspin-icon.svg" alt="Stackspin logo composition" >}}
+{{< figure class="with-js" src="/img/work/stackspin-icon.svg" alt="Stackspin logo composition" >}}
+{{< figure class="no-js" src="/img/work/stackspin-icon.webp" alt="Stackspin logo composition" >}}
+
 
 ## Typography and Colors
 
-{{< figure src="/img/work/stackspin-typography.svg" alt="Typeface preview (Space Grotesk & Inter)" >}}
+{{< figure class="with-js" src="/img/work/stackspin-typography.svg" alt="Typeface preview (Space Grotesk & Inter)" >}}
+{{< figure class="no-js" src="/img/work/stackspin-typography.webp" alt="Typeface preview (Space Grotesk & Inter)" >}}
 
-{{< figure src="/img/work/stackspin-colors.svg" alt="Color palette preview (teal)" >}}
+{{< figure class="with-js" src="/img/work/stackspin-colors.svg" alt="Color palette preview (teal)" >}}
+{{< figure class="no-js" src="/img/work/stackspin-colors.webp" alt="Color palette preview (teal)" >}}
 
 ## Brand Book
 

content/en/work/thunderbird.md

@@ -9,7 +9,7 @@ text = "#FFFFFF"
 title = "Thunderbird"
 summary = "We created the new Thunderbird brand and helped the project with extensive usability research."
 date = "2019-01-24 12:00:00 +0200"
-image = "thunderbird.svg"
+image = "thunderbird"
 tags = []
 categories = ["Branding", "UX Research", "Web Development"]
 [links]

content/en/work/totem.md

@@ -8,7 +8,7 @@ text = "#064E3B"
 title = "Totem Project"
 summary = "Totem is an online learning platform that offers educational courses about digital security and privacy in a safe, online classroom environment. We helped them refresh their visual identity and explain technical concepts in a more visual way."
 date = "2022-08-08 12:00:00 +0200"
-image = "totem.svg"
+image = "totem"
 tags = []
 categories = ["Branding", "Illustrations", "Layout Design"]
 [links]
@@ -25,13 +25,15 @@ Although it can be very effective and extremely useful, face-to-face, offline tr
 
 Totem currently offers over 57 courses including various languages. Each course is represented by a visual image, which often has been duplicated over various courses. Due to this, various courses have duplicated imagery, offering little visual coordination across the site. Additionally, the current illustrations used are generic freely licensed illustrations which don’t represent the look and feel of Totem and could confuse viewers.
 
-{{< figure src="/img/work/totem-brand.svg" alt="Totem branding moodboard" >}}
+{{< figure class="with-js" src="/img/work/totem-brand.svg" alt="Totem branding moodboard" >}}
+{{< figure class="no-js" src="/img/work/totem-brand.webp" alt="Totem branding moodboard" >}}
 
 ## Same old turtle, new shell
 
 But before taking on the illustration system, we updated the Totem logo, together with its turtle mascot, offering a friendly refreshed logo with a new typeface (Maven Pro) moving away from the old typeface (Ubuntu). While Ubuntu is a beautiful and versatile typeface, it’s characteristic to Canonical’s Linux distribution. We wanted for Totem to establish its own character with time.
 
-{{< figure src="/img/work/totem-safespace.svg" alt="Totem logo safe spacing" >}}
+{{< figure class="with-js" src="/img/work/totem-safespace.svg" alt="Totem logo safe spacing" >}}
+{{< figure class="no-js" src="/img/work/totem-safespace.webp" alt="Totem logo safe spacing" >}}
 
 ## Illustrations
 
@@ -41,7 +43,8 @@ Our objective was to create a modular illustration system that is expandable, op
 
 With Totem being a platform where independent educators can create and submit courses, they should be empowered to create their own illustrations. The illustration system should make it easier for them to create covers which is close to the Totem identity, even if they are not professional designers.
 
-{{< figure src="/img/work/totem-illustrations.svg" alt="Totem illustrations" >}}
+{{< figure class="with-js" src="/img/work/totem-illustrations.svg" alt="Totem illustrations" >}}
+{{< figure class="no-js" src="/img/work/totem-illustrations.webp" alt="Totem illustrations" >}}
 
 ## Figma Community
 
@@ -61,4 +64,5 @@ We were very excited to open-source the illustration system under Creative Commo
 
 While talking to the Totem team, they were looking forward to build up this story arch further with the aquatic theme in Totem. The world of the turtle mascot is versatile and offers a wide range of metaphors we can explore visually. Protagonists (like the turtle) and antagonists (trolls, bugs) are included and offer a way to explain complex topics in a more simplistic visual explanation, especially tailored for beginners.
 
-{{< figure src="/img/work/totem-turtle.svg" alt="Totem turtle" >}}
+{{< figure class="with-js" src="/img/work/totem-turtle.svg" alt="Totem turtle" >}}
+{{< figure class="no-js" src="/img/work/totem-turtle.webp" alt="Totem turtle" >}}

layouts/_default/list.html

@@ -13,7 +13,10 @@
           <div class="row py-4">
               {{ range .Pages }}
               <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
-                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study"><img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" alt="{{ .Title }}"></a>
+                  <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" alt="{{ .Title }}">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="{{ .Title }}">
+                  </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
               </div>
               {{ end }}

layouts/_default/probono.html

@@ -54,7 +54,10 @@
             <div class="row pt-3 pb-5">
                 {{ range first 3 (where (where .Site.RegularPages "Type" "work") "Params.lab" "=" true) }}
                 <div class="col-xl-4 col-lg-12 col-12 pb-xl-0 pb-4 d-flex flex-column work">
-                    <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study"><img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" alt=""></a>
+                    <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
+                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" alt="">
+                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
+                    </a>
                     <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
                     <p class="mb-0">
                         {{ range $i, $e := .Params.categories -}}

layouts/blog/single.html

@@ -54,9 +54,6 @@
             {{ if .NextInSection }}
                 <a class="col-lg-6 col-12 newerposts text-start d-flex align-items-center justify-content-start py-4" href="{{ .NextInSection.Permalink }}">
                     <span aria-hidden="true">
-                        <!-- <svg xmlns="http://www.w3.org/2000/svg" width="55" height="33" fill="none">
-                            <path fill-rule="evenodd" d="M54.997 19H32.058L42.18 29.258l-3.399 3.353-15.783-16 15.783-16 3.4 3.353-10.122 10.26h22.939z" fill="#1b69b6"/>
-                        </svg> -->
                         <svg width="54" height="33" viewBox="0 0 54 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" d="M54 18.9822L31.0617 18.9822L41.1828 29.2419L37.7839 32.5949L22 16.595L37.7839 0.595214L41.1828 3.94825L31.0617 14.2078L54 14.2078L54 18.9822Z" fill="#1B69B6"/>
                         </svg>                            

layouts/index.html

@@ -6,7 +6,10 @@
             <div class="row justify-content-between align-items-center">
                 {{ range where (where .Site.RegularPages "Type" "clients") "Params.home" true }}
                 <div class="col-xl-2 col-lg-4 col-6 text-center">
-                    <a href="{{ .Page.Params.link }}" target="_blank" rel="noopener noreferrer"><img class="img-fluid" src="/img/clients/{{ .Page.Params.image }}.svg" alt="{{ .Page.Params.name }}"></a>
+                    <a href="{{ .Page.Params.link }}" target="_blank" rel="noopener noreferrer">
+                        <img class="img-fluid with-js" src="/img/clients/{{ .Page.Params.image }}.svg" alt="{{ .Page.Params.name }}">
+                        <img class="img-fluid no-js" src="/img/clients/{{ .Params.image }}.webp" alt="{{ .Page.Params.name }}">
+                    </a>
                 </div>
                 {{ end }}
             </div>
@@ -18,7 +21,11 @@
             <div class="row pt-3 pb-3">
                 {{ range first 2 (where (where .Site.RegularPages "Type" "work") "Params.featured" "=" true) }}
                 <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-4 d-flex flex-column work">
-                    <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study"><img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" width="636px" height="357px" alt=""></a>
+                    <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">                            
+                        <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="636px" height="357px" alt="">
+                        <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
+                    </a>
+                    {{ $path := printf "/%s/%s" "img/work" .Params.image }}
                     <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
                     <p class="mb-0">
                         {{ range $i, $e := .Params.categories -}}

layouts/partials/noscript.html

@@ -1,123 +1,131 @@
 <noscript>
-    <style>
-        @media (prefers-color-scheme: dark) {
-            :root #fader {
-                background: #121212;
-            }
-
-            :root * {
-                background: #121212 !important;
-                color: rgba(255, 255, 255, 0.87) !important;
-            }
-
-            :root a:not(.nav-link, .see-more) {
-                text-decoration: underline;
-            }
-
-            :root .screen-reader-text:focus {
-                background-color: #ecc781;
-            }
-
-            :root .logo {
-                fill: #ecc781 !important;
-            }
-
-            :root a {
-                color: #ecc781 !important;
-                border-color: #ecc781;
-            }
-
-            :root .inline-svg svg path {
-                color: #ecc781 !important;
-            }
-
-            :root .acctoggle:hover,
-            :root .acctoggle:focus-visible,
-            :root .acctoggle:focus {
-                border: 2px solid #ecc781;
-            }
-
-            :root .tablinkservice:hover {
-                color: #ecc781 !important;
-                border-left-color: #ecc781;
-            }
-
-            :root .tablinkservice:focus-visible {
-                border-left: 0.2rem solid #ecc781 !important;
-            }
-
-            :root .active {
-                color: #ecc781 !important;
-                border-left-color: #ecc781;
-            }
-
-            :root .carousel-dark .carousel-indicators [data-bs-target] {
-                border-color: #ecc781;
-            }
-
-            :root .carousel-dark .carousel-indicators [data-bs-target]:hover {
-                background-color: #ecc781 !important;
-            }
-
-            :root .carousel-dark .carousel-indicators [data-bs-target].active {
-                background-color: #ecc781 !important;
-            }
-
-            :root .button-filter {
-                color: #ecc781 !important;
-            }
-
-            :root .button-filter:after {
-                background: #ecc781 !important;
-            }
-
-            :root .carousel-control-next path {
-                fill: #ecc781 !important;
-            }
-
-            :root .home a {
-                text-decoration: none !important;
-            }
-        }
-
-        #expertise {
-            display: block !important;
-        }
-
-        .services {
-            background: none !important;
-        }
-
-        .allposts {
-            display: block !important;
-        }
-
-        #posts-filter {
-            display: none !important;
-        }
-
-        #services {
-            display: none !important;
-        }
-
-        #theme-toggle {
-            display: none !important;
-        }
-
-        .work {
-            display: block !important;
-        }
-
-        #work-filter {
-            display: none !important;
-        }
-
-        #testimonials {
-            display: none !important;
-        }
-
-        #testimonials-nojs {
-            display: block !important;
-        }
-    </style>
-</noscript>
+  <style>
+    @media (prefers-color-scheme: dark) {
+      :root #fader {
+        background: #121212;
+      }
+
+      :root * {
+        background: #121212 !important;
+        color: rgba(255, 255, 255, 0.87) !important;
+      }
+
+      :root a:not(.nav-link, .see-more) {
+        text-decoration: underline;
+      }
+
+      :root .screen-reader-text:focus {
+        background-color: #ecc781;
+      }
+
+      :root .logo {
+        fill: #ecc781 !important;
+      }
+
+      :root a {
+        color: #ecc781 !important;
+        border-color: #ecc781;
+      }
+
+      :root .inline-svg svg path {
+        color: #ecc781 !important;
+      }
+
+      :root .acctoggle:hover,
+      :root .acctoggle:focus-visible,
+      :root .acctoggle:focus {
+        border: 2px solid #ecc781;
+      }
+
+      :root .tablinkservice:hover {
+        color: #ecc781 !important;
+        border-left-color: #ecc781;
+      }
+
+      :root .tablinkservice:focus-visible {
+        border-left: 0.2rem solid #ecc781 !important;
+      }
+
+      :root .active {
+        color: #ecc781 !important;
+        border-left-color: #ecc781;
+      }
+
+      :root .carousel-dark .carousel-indicators [data-bs-target] {
+        border-color: #ecc781;
+      }
+
+      :root .carousel-dark .carousel-indicators [data-bs-target]:hover {
+        background-color: #ecc781 !important;
+      }
+
+      :root .carousel-dark .carousel-indicators [data-bs-target].active {
+        background-color: #ecc781 !important;
+      }
+
+      :root .button-filter {
+        color: #ecc781 !important;
+      }
+
+      :root .button-filter:after {
+        background: #ecc781 !important;
+      }
+
+      :root .carousel-control-next path {
+        fill: #ecc781 !important;
+      }
+
+      :root .home a {
+        text-decoration: none !important;
+      }
+    }
+
+    .no-js {
+      display: block !important;
+    }
+
+    .with-js {
+      display: none;
+    }
+
+    #expertise {
+      display: block !important;
+    }
+
+    .services {
+      background: none !important;
+    }
+
+    .allposts {
+      display: block !important;
+    }
+
+    #posts-filter {
+      display: none !important;
+    }
+
+    #services {
+      display: none !important;
+    }
+
+    #theme-toggle {
+      display: none !important;
+    }
+
+    .work {
+      display: block !important;
+    }
+
+    #work-filter {
+      display: none !important;
+    }
+
+    #testimonials {
+      display: none !important;
+    }
+
+    #testimonials-nojs {
+      display: block !important;
+    }
+  </style>
+</noscript>

layouts/work/list.html

@@ -34,7 +34,8 @@
               {{ range first 2 ($work) }}
               <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-5 work">
                   <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                    <img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" width="636px" height="357px" alt="">
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="636px" height="357px" alt="">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
                   </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                   <p class="mb-0">
@@ -52,7 +53,9 @@
               {{ range after 2 ($work) }}
               <div class="col-xl-4 col-lg-12 col-12 pb-5 work">
                   <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                    <img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" width="416px" height="234px" alt=""></a>
+                    <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="416px" height="234px" alt="">
+                    <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
+                  </a>
                   <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                   <p class="mb-0">
                       {{ range $i, $e := .Params.categories -}}
@@ -70,7 +73,9 @@
           {{ range ($work) }}
             <div class="col-xl-4 col-lg-12 col-12 mb-4 mt-0 work tabcontentservice {{ range $i, $e := .Params.categories }}{{ if $i }} {{ end }}{{ replaceRE " " "-" $e | lower }}{{- end -}}">
                 <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study">
-                  <img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" width="416px" height="234px" alt=""></a>
+                  <img class="img-fluid w-100 with-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.svg" width="416px" height="234px" alt="">
+                  <img class="img-fluid w-100 no-js" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}.webp" alt="">
+                </a>
                 <a class="title mt-3 mb-0" href="{{ .Permalink }}" aria-label="Project name: {{ .Title }}">{{ .Title }}</a>
                 <p class="mb-0">
                     {{ range $i, $e := .Params.categories -}}

package-lock.json

@@ -5,17 +5,17 @@
   "packages": {
     "": {
       "dependencies": {
-        "@fullhuman/postcss-purgecss": "^4.1.3",
-        "postcss": "^8.4.14",
-        "postcss-cli": "^10.0.0"
+        "@fullhuman/postcss-purgecss": "^5.0.0",
+        "postcss": "^8.4.21",
+        "postcss-cli": "^10.1.0"
       }
     },
     "node_modules/@fullhuman/postcss-purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.1.3.tgz",
-      "integrity": "sha512-jqcsyfvq09VOsMXxJMPLRF6Fhg/NNltzWKnC9qtzva+QKTxerCO4esG6je7hbnmkpZtaDyPTwMBj9bzfWorsrw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",
+      "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==",
       "dependencies": {
-        "purgecss": "^4.1.3"
+        "purgecss": "^5.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -101,12 +101,11 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
       }
     },
     "node_modules/braces": {
@@ -173,18 +172,13 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
       "engines": {
-        "node": ">= 12"
+        "node": "^12.20.0 || >=14"
       }
     },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -263,16 +257,16 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
+      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
         "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14.14"
       }
     },
     "node_modules/fs.realpath": {
@@ -313,19 +307,18 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
       },
       "engines": {
-        "node": "*"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -473,14 +466,14 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "*"
+        "node": ">=10"
       }
     },
     "node_modules/nanoid": {
@@ -510,14 +503,6 @@
         "wrappy": "1"
       }
     },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -551,9 +536,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "funding": [
         {
           "type": "opencollective",
@@ -574,13 +559,13 @@
       }
     },
     "node_modules/postcss-cli": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.0.0.tgz",
-      "integrity": "sha512-Wjy/00wBBEgQqnSToznxLWDnATznokFGXsHtF/3G8glRZpz5KYlfHcBW/VMJmWAeF2x49zjgy4izjM3/Wx1dKA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz",
+      "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==",
       "dependencies": {
         "chokidar": "^3.3.0",
         "dependency-graph": "^0.11.0",
-        "fs-extra": "^10.0.0",
+        "fs-extra": "^11.0.0",
         "get-stdin": "^9.0.0",
         "globby": "^13.0.0",
         "picocolors": "^1.0.0",
@@ -588,7 +573,7 @@
         "postcss-reporter": "^7.0.0",
         "pretty-hrtime": "^1.0.3",
         "read-cache": "^1.0.0",
-        "slash": "^4.0.0",
+        "slash": "^5.0.0",
         "yargs": "^17.0.0"
       },
       "bin": {
@@ -601,6 +586,17 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-cli/node_modules/slash": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz",
+      "integrity": "sha512-n6KkmvKS0623igEVj3FF0OZs1gYYJ0o0Hj939yc1fyxl2xt+xYpLnzJB6xBSqOfV9ZFLEWodBBN/heZJahuIJQ==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/postcss-load-config": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -649,9 +645,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -669,14 +665,14 @@
       }
     },
     "node_modules/purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz",
+      "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==",
       "dependencies": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
+        "commander": "^9.0.0",
+        "glob": "^8.0.3",
+        "postcss": "^8.4.4",
+        "postcss-selector-parser": "^6.0.7"
       },
       "bin": {
         "purgecss": "bin/purgecss.js"
@@ -896,11 +892,11 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.1.3.tgz",
-      "integrity": "sha512-jqcsyfvq09VOsMXxJMPLRF6Fhg/NNltzWKnC9qtzva+QKTxerCO4esG6je7hbnmkpZtaDyPTwMBj9bzfWorsrw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-5.0.0.tgz",
+      "integrity": "sha512-onDS/b/2pMRzqSoj4qOs2tYFmOpaspjTAgvACIHMPiicu1ptajiBruTrjBzTKdxWdX0ldaBb7wj8nEaTLyFkJw==",
       "requires": {
-        "purgecss": "^4.1.3"
+        "purgecss": "^5.0.0"
       }
     },
     "@nodelib/fs.scandir": {
@@ -959,12 +955,11 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
       }
     },
     "braces": {
@@ -1014,14 +1009,9 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
     },
     "cssesc": {
       "version": "3.0.0",
@@ -1080,9 +1070,9 @@
       }
     },
     "fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
+      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -1111,16 +1101,15 @@
       "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA=="
     },
     "glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
       }
     },
     "glob-parent": {
@@ -1227,11 +1216,11 @@
       }
     },
     "minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "requires": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       }
     },
     "nanoid": {
@@ -1252,11 +1241,6 @@
         "wrappy": "1"
       }
     },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -1278,9 +1262,9 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -1288,13 +1272,13 @@
       }
     },
     "postcss-cli": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.0.0.tgz",
-      "integrity": "sha512-Wjy/00wBBEgQqnSToznxLWDnATznokFGXsHtF/3G8glRZpz5KYlfHcBW/VMJmWAeF2x49zjgy4izjM3/Wx1dKA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-10.1.0.tgz",
+      "integrity": "sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==",
       "requires": {
         "chokidar": "^3.3.0",
         "dependency-graph": "^0.11.0",
-        "fs-extra": "^10.0.0",
+        "fs-extra": "^11.0.0",
         "get-stdin": "^9.0.0",
         "globby": "^13.0.0",
         "picocolors": "^1.0.0",
@@ -1302,8 +1286,15 @@
         "postcss-reporter": "^7.0.0",
         "pretty-hrtime": "^1.0.3",
         "read-cache": "^1.0.0",
-        "slash": "^4.0.0",
+        "slash": "^5.0.0",
         "yargs": "^17.0.0"
+      },
+      "dependencies": {
+        "slash": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz",
+          "integrity": "sha512-n6KkmvKS0623igEVj3FF0OZs1gYYJ0o0Hj939yc1fyxl2xt+xYpLnzJB6xBSqOfV9ZFLEWodBBN/heZJahuIJQ=="
+        }
       }
     },
     "postcss-load-config": {
@@ -1325,9 +1316,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -1339,14 +1330,14 @@
       "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A=="
     },
     "purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-5.0.0.tgz",
+      "integrity": "sha512-RAnuxrGuVyLLTr8uMbKaxDRGWMgK5CCYDfRyUNNcaz5P3kGgD2b7ymQGYEyo2ST7Tl/ScwFgf5l3slKMxHSbrw==",
       "requires": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
+        "commander": "^9.0.0",
+        "glob": "^8.0.3",
+        "postcss": "^8.4.4",
+        "postcss-selector-parser": "^6.0.7"
       }
     },
     "queue-microtask": {

package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^4.1.3",
-    "postcss": "^8.4.14",
-    "postcss-cli": "^10.0.0"
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0"
   }
 }