diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index e0db071c..246114d3 100644 --- a/assets/scss/_custom.scss +++ b/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; -} +} \ No newline at end of file diff --git a/content/de/blog/briar-android-illustration-system.md b/content/de/blog/briar-android-illustration-system.md index bdd51f0b..1227e11d 100644 --- a/content/de/blog/briar-android-illustration-system.md +++ b/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 diff --git a/content/de/work/adapt.md b/content/de/work/adapt.md index c881761d..afe21d6f 100644 --- a/content/de/work/adapt.md +++ b/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] diff --git a/content/de/work/asciidoc.md b/content/de/work/asciidoc.md index cb052af4..5585a754 100644 --- a/content/de/work/asciidoc.md +++ b/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 diff --git a/content/de/work/calyxos.md b/content/de/work/calyxos.md index 8ba0e93e..ebb4002d 100644 --- a/content/de/work/calyxos.md +++ b/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 diff --git a/content/de/work/censoredplanet.md b/content/de/work/censoredplanet.md index 1f1213c7..c2a774e1 100644 --- a/content/de/work/censoredplanet.md +++ b/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] diff --git a/content/de/work/i2p.md b/content/de/work/i2p.md index ba6787ff..8000749a 100644 --- a/content/de/work/i2p.md +++ b/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 diff --git a/content/de/work/optima.md b/content/de/work/optima.md index b4348fae..22dee4cf 100644 --- a/content/de/work/optima.md +++ b/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 diff --git a/content/de/work/oxizide.md b/content/de/work/oxizide.md index de43433c..3f1b3f95 100644 --- a/content/de/work/oxizide.md +++ b/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: -{{< 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. diff --git a/content/de/work/stackspin.md b/content/de/work/stackspin.md index 94ea817f..6601349d 100644 --- a/content/de/work/stackspin.md +++ b/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 diff --git a/content/de/work/thunderbird.md b/content/de/work/thunderbird.md index edd85523..611ee5d2 100644 --- a/content/de/work/thunderbird.md +++ b/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] diff --git a/content/de/work/totem.md b/content/de/work/totem.md index 574dc03c..db1af221 100644 --- a/content/de/work/totem.md +++ b/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" >}} diff --git a/content/en/blog/briar-android-illustration-system.md b/content/en/blog/briar-android-illustration-system.md index b5c1c6db..1227e11d 100644 --- a/content/en/blog/briar-android-illustration-system.md +++ b/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). diff --git a/content/en/work/adapt.md b/content/en/work/adapt.md index c881761d..afe21d6f 100644 --- a/content/en/work/adapt.md +++ b/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] diff --git a/content/en/work/asciidoc.md b/content/en/work/asciidoc.md index cb052af4..5585a754 100644 --- a/content/en/work/asciidoc.md +++ b/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 diff --git a/content/en/work/calyxos.md b/content/en/work/calyxos.md index 8ba0e93e..ebb4002d 100644 --- a/content/en/work/calyxos.md +++ b/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 diff --git a/content/en/work/censoredplanet.md b/content/en/work/censoredplanet.md index 1f1213c7..c2a774e1 100644 --- a/content/en/work/censoredplanet.md +++ b/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] diff --git a/content/en/work/i2p.md b/content/en/work/i2p.md index ba6787ff..8000749a 100644 --- a/content/en/work/i2p.md +++ b/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 diff --git a/content/en/work/optima.md b/content/en/work/optima.md index b4348fae..22dee4cf 100644 --- a/content/en/work/optima.md +++ b/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 diff --git a/content/en/work/oxizide.md b/content/en/work/oxizide.md index de43433c..3f1b3f95 100644 --- a/content/en/work/oxizide.md +++ b/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: -{{< 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. diff --git a/content/en/work/stackspin.md b/content/en/work/stackspin.md index 94ea817f..6601349d 100644 --- a/content/en/work/stackspin.md +++ b/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 diff --git a/content/en/work/thunderbird.md b/content/en/work/thunderbird.md index edd85523..611ee5d2 100644 --- a/content/en/work/thunderbird.md +++ b/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] diff --git a/content/en/work/totem.md b/content/en/work/totem.md index 574dc03c..db1af221 100644 --- a/content/en/work/totem.md +++ b/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" >}} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index c19e4ae5..fdd227fb 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -13,7 +13,10 @@
{{ range .Pages }}
- {{ .Title }} + + {{ .Title }} + {{ .Title }} + {{ .Title }}
{{ end }} diff --git a/layouts/_default/probono.html b/layouts/_default/probono.html index c21d5380..a662b7a2 100644 --- a/layouts/_default/probono.html +++ b/layouts/_default/probono.html @@ -54,7 +54,10 @@
{{ range first 3 (where (where .Site.RegularPages "Type" "work") "Params.lab" "=" true) }}
- + + + + {{ .Title }}

{{ range $i, $e := .Params.categories -}} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 31d280a3..0c4ca318 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -54,9 +54,6 @@ {{ if .NextInSection }}

{{ range where (where .Site.RegularPages "Type" "clients") "Params.home" true }}
- {{ .Page.Params.name }} + + {{ .Page.Params.name }} + {{ .Page.Params.name }} +
{{ end }}
@@ -18,7 +21,11 @@
{{ range first 2 (where (where .Site.RegularPages "Type" "work") "Params.featured" "=" true) }}
- + + + + + {{ $path := printf "/%s/%s" "img/work" .Params.image }} {{ .Title }}

{{ range $i, $e := .Params.categories -}} diff --git a/layouts/partials/noscript.html b/layouts/partials/noscript.html index cb6f605c..971f9c9b 100644 --- a/layouts/partials/noscript.html +++ b/layouts/partials/noscript.html @@ -1,123 +1,131 @@ \ No newline at end of file + + diff --git a/layouts/work/list.html b/layouts/work/list.html index 4c2df5e7..c737d3d6 100644 --- a/layouts/work/list.html +++ b/layouts/work/list.html @@ -34,7 +34,8 @@ {{ range first 2 ($work) }}

- + + {{ .Title }}

@@ -52,7 +53,9 @@ {{ range after 2 ($work) }}

- + + + {{ .Title }}

{{ range $i, $e := .Params.categories -}} @@ -70,7 +73,9 @@ {{ range ($work) }}

- + + + {{ .Title }}

{{ range $i, $e := .Params.categories -}} diff --git a/package-lock.json b/package-lock.json index 94f0879e..4b301172 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 707df5f8..321eeb62 100644 --- a/package.json +++ b/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" } } diff --git a/static/img/blog/briar-illustration-components.webp b/static/img/blog/briar-illustration-components.webp new file mode 100644 index 00000000..af817a7a Binary files /dev/null and b/static/img/blog/briar-illustration-components.webp differ diff --git a/static/img/blog/briar-illustration-phone.webp b/static/img/blog/briar-illustration-phone.webp new file mode 100644 index 00000000..fafd3a2e Binary files /dev/null and b/static/img/blog/briar-illustration-phone.webp differ diff --git a/static/img/blog/briar-illustrations.webp b/static/img/blog/briar-illustrations.webp new file mode 100644 index 00000000..73f8ef4e Binary files /dev/null and b/static/img/blog/briar-illustrations.webp differ diff --git a/static/img/clients/eclipse.webp b/static/img/clients/eclipse.webp new file mode 100644 index 00000000..481e8310 Binary files /dev/null and b/static/img/clients/eclipse.webp differ diff --git a/static/img/clients/mozilla.webp b/static/img/clients/mozilla.webp new file mode 100644 index 00000000..0ad5ebf9 Binary files /dev/null and b/static/img/clients/mozilla.webp differ diff --git a/static/img/clients/otf.webp b/static/img/clients/otf.webp new file mode 100644 index 00000000..59ef643b Binary files /dev/null and b/static/img/clients/otf.webp differ diff --git a/static/img/clients/rust.webp b/static/img/clients/rust.webp new file mode 100644 index 00000000..a7ff3ee3 Binary files /dev/null and b/static/img/clients/rust.webp differ diff --git a/static/img/clients/tor.webp b/static/img/clients/tor.webp new file mode 100644 index 00000000..c6611e8c Binary files /dev/null and b/static/img/clients/tor.webp differ diff --git a/static/img/clients/tud.webp b/static/img/clients/tud.webp new file mode 100644 index 00000000..a92c8999 Binary files /dev/null and b/static/img/clients/tud.webp differ diff --git a/static/img/work/adapt.webp b/static/img/work/adapt.webp new file mode 100644 index 00000000..3642f325 Binary files /dev/null and b/static/img/work/adapt.webp differ diff --git a/static/img/work/asciidoc-brand.webp b/static/img/work/asciidoc-brand.webp new file mode 100644 index 00000000..c53d237a Binary files /dev/null and b/static/img/work/asciidoc-brand.webp differ diff --git a/static/img/work/asciidoc-font.webp b/static/img/work/asciidoc-font.webp new file mode 100644 index 00000000..e636c000 Binary files /dev/null and b/static/img/work/asciidoc-font.webp differ diff --git a/static/img/work/asciidoc-notes.webp b/static/img/work/asciidoc-notes.webp new file mode 100644 index 00000000..505e0288 Binary files /dev/null and b/static/img/work/asciidoc-notes.webp differ diff --git a/static/img/work/asciidoc-personality.webp b/static/img/work/asciidoc-personality.webp new file mode 100644 index 00000000..9cd8afe7 Binary files /dev/null and b/static/img/work/asciidoc-personality.webp differ diff --git a/static/img/work/asciidoc-safespace.webp b/static/img/work/asciidoc-safespace.webp new file mode 100644 index 00000000..2f7b6f08 Binary files /dev/null and b/static/img/work/asciidoc-safespace.webp differ diff --git a/static/img/work/asciidoc.webp b/static/img/work/asciidoc.webp new file mode 100644 index 00000000..3699c4cb Binary files /dev/null and b/static/img/work/asciidoc.webp differ diff --git a/static/img/work/calyxos-flower.webp b/static/img/work/calyxos-flower.webp new file mode 100644 index 00000000..2b0d5ae7 Binary files /dev/null and b/static/img/work/calyxos-flower.webp differ diff --git a/static/img/work/calyxos-illustrations.webp b/static/img/work/calyxos-illustrations.webp new file mode 100644 index 00000000..5af49f45 Binary files /dev/null and b/static/img/work/calyxos-illustrations.webp differ diff --git a/static/img/work/calyxos.webp b/static/img/work/calyxos.webp new file mode 100644 index 00000000..cb9534c9 Binary files /dev/null and b/static/img/work/calyxos.webp differ diff --git a/static/img/work/censoredplanet.webp b/static/img/work/censoredplanet.webp new file mode 100644 index 00000000..9ad2e210 Binary files /dev/null and b/static/img/work/censoredplanet.webp differ diff --git a/static/img/work/i2p.webp b/static/img/work/i2p.webp new file mode 100644 index 00000000..316a5bf6 Binary files /dev/null and b/static/img/work/i2p.webp differ diff --git a/static/img/work/optima-brand.webp b/static/img/work/optima-brand.webp new file mode 100644 index 00000000..f350d32e Binary files /dev/null and b/static/img/work/optima-brand.webp differ diff --git a/static/img/work/optima-icons.webp b/static/img/work/optima-icons.webp new file mode 100644 index 00000000..0a08afe8 Binary files /dev/null and b/static/img/work/optima-icons.webp differ diff --git a/static/img/work/optima-slogan.webp b/static/img/work/optima-slogan.webp new file mode 100644 index 00000000..d629d373 Binary files /dev/null and b/static/img/work/optima-slogan.webp differ diff --git a/static/img/work/optima-text.webp b/static/img/work/optima-text.webp new file mode 100644 index 00000000..5847f870 Binary files /dev/null and b/static/img/work/optima-text.webp differ diff --git a/static/img/work/optima-typography.webp b/static/img/work/optima-typography.webp new file mode 100644 index 00000000..bb116207 Binary files /dev/null and b/static/img/work/optima-typography.webp differ diff --git a/static/img/work/optima.webp b/static/img/work/optima.webp new file mode 100644 index 00000000..95d3b496 Binary files /dev/null and b/static/img/work/optima.webp differ diff --git a/static/img/work/oxidize-brand.webp b/static/img/work/oxidize-brand.webp new file mode 100644 index 00000000..6bd4125a Binary files /dev/null and b/static/img/work/oxidize-brand.webp differ diff --git a/static/img/work/oxidize-pattern.webp b/static/img/work/oxidize-pattern.webp new file mode 100644 index 00000000..49618fc5 Binary files /dev/null and b/static/img/work/oxidize-pattern.webp differ diff --git a/static/img/work/oxidize-watermark.webp b/static/img/work/oxidize-watermark.webp new file mode 100644 index 00000000..7d774a29 Binary files /dev/null and b/static/img/work/oxidize-watermark.webp differ diff --git a/static/img/work/oxidize.webp b/static/img/work/oxidize.webp new file mode 100644 index 00000000..eeaf1710 Binary files /dev/null and b/static/img/work/oxidize.webp differ diff --git a/static/img/work/prototypefund.webp b/static/img/work/prototypefund.webp new file mode 100644 index 00000000..94ade6ac Binary files /dev/null and b/static/img/work/prototypefund.webp differ diff --git a/static/img/work/rescala.webp b/static/img/work/rescala.webp new file mode 100644 index 00000000..666da286 Binary files /dev/null and b/static/img/work/rescala.webp differ diff --git a/static/img/work/stackspin-colors.webp b/static/img/work/stackspin-colors.webp new file mode 100644 index 00000000..e279f79c Binary files /dev/null and b/static/img/work/stackspin-colors.webp differ diff --git a/static/img/work/stackspin-cover.webp b/static/img/work/stackspin-cover.webp new file mode 100644 index 00000000..792ca707 Binary files /dev/null and b/static/img/work/stackspin-cover.webp differ diff --git a/static/img/work/stackspin-icon.webp b/static/img/work/stackspin-icon.webp new file mode 100644 index 00000000..0bcf3b5e Binary files /dev/null and b/static/img/work/stackspin-icon.webp differ diff --git a/static/img/work/stackspin-typography.webp b/static/img/work/stackspin-typography.webp new file mode 100644 index 00000000..0c82fc6e Binary files /dev/null and b/static/img/work/stackspin-typography.webp differ diff --git a/static/img/work/stackspin.webp b/static/img/work/stackspin.webp new file mode 100644 index 00000000..a11273bf Binary files /dev/null and b/static/img/work/stackspin.webp differ diff --git a/static/img/work/thunderbird.webp b/static/img/work/thunderbird.webp new file mode 100644 index 00000000..d0b3dd81 Binary files /dev/null and b/static/img/work/thunderbird.webp differ diff --git a/static/img/work/totem-brand.webp b/static/img/work/totem-brand.webp new file mode 100644 index 00000000..f9703f41 Binary files /dev/null and b/static/img/work/totem-brand.webp differ diff --git a/static/img/work/totem-illustrations.webp b/static/img/work/totem-illustrations.webp new file mode 100644 index 00000000..45346605 Binary files /dev/null and b/static/img/work/totem-illustrations.webp differ diff --git a/static/img/work/totem-safespace.webp b/static/img/work/totem-safespace.webp new file mode 100644 index 00000000..a3dbfde2 Binary files /dev/null and b/static/img/work/totem-safespace.webp differ diff --git a/static/img/work/totem-turtle.webp b/static/img/work/totem-turtle.webp new file mode 100644 index 00000000..8050b91a Binary files /dev/null and b/static/img/work/totem-turtle.webp differ diff --git a/static/img/work/totem.webp b/static/img/work/totem.webp new file mode 100644 index 00000000..bbe99416 Binary files /dev/null and b/static/img/work/totem.webp differ