New compressed webp images

content/blog/https-everywhere-redesign.md

@@ -3,7 +3,7 @@ title = "HTTPS Everywhere Redesign"
 draft = true
 authors = ["renata"]
 date = "2019-09-08 19:00:00 +0200"
-image = "/img/blog/httpse-post.png"
+image = "/img/blog/httpse-post.webp"
 categories = []
 tags = ["Usability Research", "UX Research", "Open Source Design"]
 +++
@@ -43,16 +43,16 @@ After completing the research phase, we started shaping the design. We decided t
 
 #### Original
 
-![HTTPSE Old Interface](/images/blog/httpse-old.png)
+![HTTPSE Old Interface](/images/blog/httpse-old.webp)
 
 #### Iteration
 
-![HTTPSE Iteration 1 Interface](/images/blog/httpse-iteration.png)
+![HTTPSE Iteration 1 Interface](/images/blog/httpse-iteration.webp)
 
 #### Iteration 2 & 3
 
-![HTTPSE New Interface](/images/blog/httpse-iteration2.png)
-![HTTPSE New Interface](/images/blog/httpse-iteration3.png)
+![HTTPSE New Interface](/images/blog/httpse-iteration2.webp)
+![HTTPSE New Interface](/images/blog/httpse-iteration3.webp)
 
 ### Conclusion
 

content/blog/i2p-usability-study-and-styleguide.md

@@ -3,14 +3,14 @@ title = "I2P Style Guide and Usability Study"
 draft = true
 authors = ["anxhelo"]
 date = "2018-12-03 12:00:00 +0200"
-image = "/img/projects/i2p_overview.png"
+image = "/img/projects/i2p_overview.webp"
 categories = []
 tags = ["Style Guide", "Usability Study", "Open Source Design", "I2P"]
 +++
 
 Back when Ura was founded in 2016 we only had a small landing page and a [Patreon](https://patreon.com/ura) to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo. Some months later we also helped with a logo for the I2P Summer Dev Initative.
 
-![I2P New Logo](/images/projects/i2p_logo.png)
+![I2P New Logo](/images/projects/i2p_logo.webp)
 
 During this process we were brought closer with the [I2P Project](https://geti2p.net), meeting with str4d, one of the I2P developers at various occasions, such as Chaos Communication Congress and the Tor Meeting. Since then, we have been helping out I2P with various design tasks. The work we conducted with I2P as part of the OTF Usability Lab has been one of our largest projects however.
 
@@ -26,7 +26,7 @@ As part of this project, we also created an interactive style guide for the I2P
 
 Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.
 
-![Style Guide website](/images/projects/i2p_image_1.png)
+![Style Guide website](/images/projects/i2p_image_1.webp)
 
 You can see a demo of the style guide website [here](https://uradotdesign.github.io/i2p-styleguide) and the portfolio [project](../../../projects/i2p) on our website.
 

content/blog/inkscape-workshop-tirana.md

@@ -4,7 +4,7 @@ draft = true
 author = "Mariana Balla"
 link = "https://twitter.com/marianaballa1"
 date = "2018-02-23 12:00:00 +0200"
-image = "/img/blog/Inkscape-Workshop-1-thumb.jpg"
+image = "/img/blog/Inkscape-Workshop-1-thumb.webp"
 categories = []
 tags = ["Inkscape", "Open Source Design", "Workshop"]
 +++
@@ -12,7 +12,7 @@ tags = ["Inkscape", "Open Source Design", "Workshop"]
 <p>Quite some time has passed since we first got in touch with the <a href="http://opensourcedesign.net/" target="_blank">Open Source Design community</a>. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania. We were happy to bring young designers in town more information about Open Source Design and the efforts the community is putting into improving Free Software/ Open Source projects.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-1.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-1.webp" alt="During the workshop"><br />
 <i>During the workshop</i>
 </div>
 <div class="two spacing"></div>
@@ -20,7 +20,7 @@ tags = ["Inkscape", "Open Source Design", "Workshop"]
 <p>Consequently, we organized another <a href="https://discourse.opensourcedesign.net/t/tirana-albania/573/1" target="_blank">Design workshop</a> at the local <a href="https://openlabs.cc/en/" target="_blank">Open Labs Hackerspace</a>, this time with a deep dive into Inkscape. While there have been a few designers who worked with Adobe tools, everyone was new to Inkscape, so we went all the way from explaining basic tools, to designing a poster and making it production ready. The attendees were free to pick a main topic for their poster and design it themselves. Towards the end things were becoming interesting as people debated on colors, typography and other design rules.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-2.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-2.webp" alt="During the workshop"><br />
 <i>During the workshop</i>
 </div>
 <div class="two spacing"></div>
@@ -30,21 +30,21 @@ tags = ["Inkscape", "Open Source Design", "Workshop"]
 <p>[Photos during the event] <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY SA 4.0</a> Andis Rado</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-3.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-3.webp" alt="During the workshop"><br />
 </div>
 <div class="two spacing"></div>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-4.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-4.webp" alt="During the workshop"><br />
 </div>
 <div class="two spacing"></div>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-5.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-5.webp" alt="During the workshop"><br />
 </div>
 <div class="two spacing"></div>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Inkscape-Workshop-6.jpg" alt="During the workshop"><br />
+<img src="/images/blog/Inkscape-Workshop-6.webp" alt="During the workshop"><br />
 </div>
 <div class="two spacing"></div>

content/blog/introducing-logobridge.md

@@ -3,18 +3,18 @@ title = "Introducing Logobridge"
 draft = true
 authors = ["anxhelo"]
 date = "2019-05-07 18:00:00 +0200"
-image = "/img/blog/logobridge-post.png"
+image = "/img/blog/logobridge-post.webp"
 categories = []
 tags = ["Logo", "Public Domain", "Open Source Design", "Service"]
 +++
 
 At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build [Logobridge](https://logobridge.co), an open source collection of public domain logos anyone can use for their projects for free: [https://logobridge.co](https://logobridge.co)
 
-![Logobridge](/images/blog/logobridge.jpg)
+![Logobridge](/images/blog/logobridge.webp)
 
 All logos are available in their glyph form and you can tweak or adapt them to your needs, as their [CC0 Public Domain](https://creativecommons.org/share-your-work/public-domain/cc0/) dedication allows basically any usage. Of course launching a product with a public domain logo might not be suitable for a product release so you can also specify a price you are willing to pay and we will design a logo for you, The great thing? From the proceeds we also will support the [Open Source Design collective](https://opencollective.com/opensourcedesign), going towards community outreach and fostering design initiatives in open source.
 
-![Logobridge Logos](/images/blog/logobridge-scrot.png)
+![Logobridge Logos](/images/blog/logobridge-scrot.webp)
 
 We hope to add new logos every month and grow the collection of public domain logos. With the amount of unappreciated logo drafts we have lying on our hard drives, we don't think that's going to be hard to pull through. We worked on Logobridge since 2016 but never got it off the ground properly like now. We hope that it will prove more useful to people now. Logobridge is also available in [German](https://logobridge.co/de) as of now.
 

content/blog/libocon-2018-visual-identity.md

@@ -4,7 +4,7 @@ draft = true
 author = "Kristi Çunga"
 link = "http://kristicunga.com/"
 date = "2018-10-20 08:00:00 +0200"
-image = "/img/blog/thumb_libocon.png"
+image = "/img/blog/thumb_libocon.webp"
 categories = []
 tags = ["Visual Identity", "Conference", "Open Source Design", "LibreOffice"]
 +++
@@ -19,13 +19,13 @@ To create a visual identity for LibOCon 2018, we had to consider two main elemen
 
 Let's start it with the logo. For this year conference, we sketched a monoline icon of the clock tower of the city, inside a hexagonal frame as the logo. The clock tower is one of the most popular and most recognizable symbols of Tirana. It is a part of old buildings ensemble of the city center, and it belongs to the city since the beginning of the 19th century.
 
-![LibOCon Main Logo](/images/blog/post_libocon_logo.png)
+![LibOCon Main Logo](/images/blog/post_libocon_logo.webp)
 
 For the logotype, we used [Zilla Slab](https://www.fontsquirrel.com/fonts/zilla-slab) [bold] al la [Aaron Draplin](https://en.wikipedia.org/wiki/Aaron_Draplin) style. We also picked the LibreOffice green and composed it with black and white, to keep the connection with the umbrella brand clear. The [template for the] logo is also easily adapted to next conferences: *we can change the city, the year below and replace Tirana clock tower with a certain symbol from the host city*.
 
 Stamps are always closely connected with a certain place and manifest a big event for that place. The idea of the stamp tower came after a brainstorm “how to make an event big”. We see the LibOCon with the importance of a big event not only for the LibreOffice community but even for the city of Tirana. We are working at the local level to make LibreOffice accessible and useful for everyone who works in the public sector. LibOCon 2018 is a big opportunity to show off the benefits of LibreOffice to the actors we are working with.
 
-![LibOCon Poster](/images/blog/libocon_poster_totebag.jpg)
+![LibOCon Poster](/images/blog/libocon_poster_totebag.webp)
 
 The dates and the venue of the conference are composed in a seal, as they stay for real in postcards. The stamp with the clock tower, the seal of the venue and posters vintage texture make the participants feel like they’re a postcard, as a souvenir from Tirana. The green color of the brand guidelines makes the poster easily identifiable for the community. 
 

content/blog/open-source-design-workshop-open-labs-hackerspace-tirana.md

@@ -4,7 +4,7 @@ draft = true
 author = "Redon Skikuli"
 link = "https://twitter.com/rskikuli"
 date = "2017-02-11 12:00:00 +0200"
-image = "/img/blog/osd_event.png"
+image = "/img/blog/osd_event.webp"
 categories = []
 tags = ["open source design", "workshop", "ux design"]
 +++
@@ -12,7 +12,7 @@ tags = ["open source design", "workshop", "ux design"]
 <p>When we started our <a href="https://www.patreon.com/ura" target="blank">Patreon campaign</a> we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field. We quickly understood that they have many questions about the usage of free open source tools in the process of designing for their needs.<br /> With this in mind it was clear that that we definitely need to educate the new generation of designers through workshops and talks about our philosophy. Without further delay we started organizing the first Open Source Design workshop at <a href="https://openlabs.cc/" target="blank">Open Labs hackerspace in Tirana</a>, home of the open source community in Albania.</p>
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-1.jpg" alt="workshop">
+<img src="/images/blog/workshop-1.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 
@@ -27,29 +27,29 @@ During the presentation the participants had the opportunity to:
 </p>
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-2.jpg" alt="workshop">
+<img src="/images/blog/workshop-2.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 
 <p>In conclusion: it was a great first step in educating the next generation of visual designers about the values designing in the open. We definitely need more of your <a href="https://www.patreon.com/ura" target="blank">support though Patreon</a> to host even more workshops not only in Albania, but also other countries.<br /> Interested in the next events? Visit <a href="/events" target="blank">this dedicated page</a> from time to time, or follow us on Twitter.
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-3.jpg" alt="workshop">
+<img src="/images/blog/workshop-3.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-4.jpg" alt="workshop">
+<img src="/images/blog/workshop-4.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-5.jpg" alt="workshop">
+<img src="/images/blog/workshop-5.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 
 <div class="large-12 large-centered centered-text columns">
-<img src="/images/blog/workshop-7.jpg" alt="workshop">
+<img src="/images/blog/workshop-7.webp" alt="workshop">
 </div>
 <div class="two spacing"></div>
 

content/blog/osd-summit-2018.md

@@ -3,7 +3,7 @@ title = "Open Source Design Summit 2018"
 draft = true
 authors = ["anxhelo"]
 date = "2018-11-16 08:00:00 +0200"
-image = "/img/blog/thumb_osd.png"
+image = "/img/blog/thumb_osd.webp"
 categories = []
 tags = ["Meeting", "Unconference", "Open Source Design", "Software"]
 +++
@@ -12,7 +12,7 @@ During the first weekend of November we had the pleasure to facilitate the annua
 
 [Open Source Design](https://opensourcedesign.net/) (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a [job board](https://opensourcedesign.net/jobs), puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.
 
-![Open Source Design logo](/images/blog/osd-logo.png)
+![Open Source Design logo](/images/blog/osd-logo.webp)
 
 Open Source Design Summit itself is an annual event where designers, developers and more join to discuss and work towards internal and external Open Source Design related topics. This includes how to improve our involvement in various projects, improve feedback processes, and work in the open
 
@@ -29,7 +29,7 @@ There were participants from countries as far as [New Zealand](https://en.wikipe
  
 During the rather informal gaterhing we spontaneously put up a circle of chairs in the area outside. Did we mention that the weather was fantastic? We even ended up doing many sessions out in the open.
 
-![Saturday agenda](/images/blog/osd-agenda-sat.jpg)
+![Saturday agenda](/images/blog/osd-agenda-sat.webp)
 
 After a round of introductions, we began brainstorming the schedule for the next 2 days, something which has worked well for us in the past edition as well. 
 
@@ -37,34 +37,34 @@ After a round of introductions, we began brainstorming the schedule for the next
 
 We officially started the Summit by welcoming everyone and giving an intro to Open Source Design for newcomers that decided to join us in the Summit. Unlike the past Summit, we had a good mix of core contributors and newcomers, so it only made sense to adapt, following up with a short talk by [David](https://twitter.com/halaszdavid) and [Tereza](https://twitter.com/terezanovotna_) from [Red Hat](https://redhat.com) about [Design Systems](https://en.wikipedia.org/wiki/Systems_design), and specifically about [PatternFly](https://www.patternfly.org/). 
 
-[![David and Tereza talk](/images/blog/osd-david-tereza.jpg)](https://upload.wikimedia.org/wikipedia/commons/0/0a/Open_Source_Design_Summit_2018_-_79.jpg)
+[![David and Tereza talk](/images/blog/osd-david-tereza.webp)](https://upload.wikimedia.org/wikipedia/commons/0/0a/Open_Source_Design_Summit_2018_-_79.webp)
 
 Next up we had a very interesting and involving workshop about Cut, Copy & Paste from [Sam](https://cameralibre.cc). The workshop was there to teach beginners about the concept of git as a version control system (as designers usually have to work with git too, which is a showstopper for many at first).
 
-![Sam's workshop](/images/blog/osd-sam-workshop.jpg)
+![Sam's workshop](/images/blog/osd-sam-workshop.webp)
 
 After the workshop, there was lunch at 1 PM and the sessions restarted at 2 PM. In the next sessions, we talked about finalizing our [Manifesto](https://en.wikipedia.org/wiki/Manifesto), a topic we had been discussing for a long time [at our Discourse forum](https://discourse.opensourcedesign.net/t/open-source-design-manifesto/630) and we think we finally have a ready-to-go version that will be published soon on the website.
 
 The following topic was about our upcoming events and where should Open Source Design focus on more, a nice discussion that happened outside, in the warm weather (really, Albania is warm even in November).
 
-![Discussing about events](/images/blog/osd-events.jpg)
+![Discussing about events](/images/blog/osd-events.webp)
 
 The next topic was a sharing round where we shared our knowledge and skills. [Renata](https://twitter.com/RenataGegaj) from our team shared her Research workflow and showcased Usability Studies we accomplished before, such as [Thunderbird](https://ura.design/projects/thunderbird) and [I2P](https://ura.design/projects/i2p). Later, Sam shared some info about the issue of Diffing SVG-s and how difficult it is to process it correctly and with consistent results, because each software tries to do it in their own way. 
 
 #### November 4th (Last Meeting Day)
 
 The last day started a bit later, which is expected of a Sunday morning
-![Last day agenda](/images/blog/osd-agenda-sun.jpg)
+![Last day agenda](/images/blog/osd-agenda-sun.webp)
 
 We firstly discussed about the Summit itself and how we could build upon community building intiatives (via local meetups for example). Afterwards we split into two groups, where one worked on the new draft of the Manifesto while the other one discussed about the State of Open Source Design tools. 
 
-![Whiteboard](/images/blog/osd-whiteboard-sun.jpg)
+![Whiteboard](/images/blog/osd-whiteboard-sun.webp)
 
 We continued talking about ways to build up a budget that Open Source Design can use to extend its activity, changes we would be doing in the Open Source Design website, such as a new theme, the structure of the organisation, the platforms we would use, the politics we would follow, [Adbusting](https://www.wordaz.com/adbusting.html), project outreach and how we could onboard new designers into the project.
 
 Of course we didn't forget to take a group photo from the Summit!
 
-[![OSD Summit group photo](/images/blog/osd-group-photo.jpg)](https://upload.wikimedia.org/wikipedia/commons/5/54/Open_Source_Design_Summit_2018_-_95.jpg)
+[![OSD Summit group photo](/images/blog/osd-group-photo.webp)](https://upload.wikimedia.org/wikipedia/commons/5/54/Open_Source_Design_Summit_2018_-_95.webp)
  
 Thanks to the support from [Stickermule](https://stickermule.com), [Mozilla](https://mozilla.org), [phpList](https://phplist.com), [Open Tech Fund](https://opentech.fund), [Red Hat](https://redhat.com) & [Nextcloud](https://nextcloud.com) we were able to bring the Summit to Tirana.
 

content/blog/reproducible-builds-styleguide.md

@@ -3,14 +3,14 @@ title = "Reproducible Builds Style Guide"
 draft = true
 authors = ["anxhelo"]
 date = "2018-06-13 12:00:00 +0200"
-image = "/img/blog/ReproducibleBuilds_thumbnail.png"
+image = "/img/blog/ReproducibleBuilds_thumbnail.webp"
 categories = []
 tags = ["Reproducible Builds", "Open Tech Fund", "Usability Lab", "Style Guide"]
 +++
 
 Earlier this year, we announced our involvement with [Open Tech Fund's Usability Lab](http://opentech.fund/lab/usability-lab), providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the [announcement on our blog.](https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab)
 
-![Reproducible Builds Logo](/images/blog/rb_header.png)
+![Reproducible Builds Logo](/images/blog/rb_header.webp)
 
 [Reproducible Builds](https://reproducible-builds.org) has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.
 
@@ -20,7 +20,7 @@ The following weeks consisted of various IRC meetings and iterations on logo pro
 
 With the logo being decided upon, we had a clear path going forward, implementing the visual identity in a live style guide, inspired from the [Tor style guide](https://styleguide.torproject.org) we helped set the foundations for in 2016.
 
-![Colors Section](/images/blog/RB_image_1.jpg)
+![Colors Section](/images/blog/RB_image_1.webp)
 
 The style guide itself features visuals, assets and components ready to be used in Reproducible Builds projects. Additionally, the style guide is free of any 3rd party trackers (including Google Fonts), external libraries and works also with JavaScript disabled / Tor High Security Mode. We even made sure that the style guide is responsive and should work fine on all resolutions.
 

content/blog/securedrop-styleguide.md

@@ -3,14 +3,14 @@ title = "SecureDrop Style Guide"
 draft = true
 authors = ["anxhelo"]
 date = "2018-12-25 12:00:00 +0200"
-image = "/img/projects/securedrop_overview.png"
+image = "/img/projects/securedrop_overview.webp"
 categories = []
 tags = ["Style Guide", "Usability Study", "Open Source Design"]
 +++
 
 Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
 
-![SecureDrop Logo](/images/projects/securedrop_logo.png)
+![SecureDrop Logo](/images/projects/securedrop_logo.webp)
 
 During this process we were brought closer with the [Project](https://securedrop.org), getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before.
 
@@ -26,7 +26,7 @@ The style guide contains all the necessary elements and assets that make up the
 
 Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.
 
-![Style Guide website](/images/projects/securedrop_image_alerts.png)
+![Style Guide website](/images/projects/securedrop_image_alerts.webp)
 
 The repo has been transferred to the Freedom of Press GitHub [organization](https://github.com/freedomofpress/securedrop/).
 However, we keep a static archive for the time being where you can preview the live site of the [style guide](https://uradotdesign.github.io/securedrop-styleguide/) and the portfolio [project](../../../projects/securedrop) on our website.

content/blog/style-guides-go-beyond-aesthetics.md

@@ -3,7 +3,7 @@ title = "Style Guides go Beyond Aesthetics"
 draft = true
 authors = ["elio"]
 date = "2018-07-02 12:00:00 +0200"
-image = "/img/blog/osd_event.png"
+image = "/img/blog/osd_event.webp"
 categories = []
 tags = ["Style Guides", "Brand Guidelines", "Open Source Design"]
 +++
@@ -38,7 +38,7 @@ Facilitating consistency can be done via a range of tools, including Brand Guide
 
 [Sketch](https://www.sketchapp.com/) revolutionized Prototyping and UX Design years ago. Nowadays [Figma](https://www.figma.com/) is gaining popularity, being praised by its focus on unified design systems accessible by all members of a project without reinventing components. Figma emphasized the need for consistency and streamlined the design process by integrating it within a powerful design system. It's one of the primary reasons designers are so excited about it.
 
-![Icon Grid Display](/images/blog/IconGridBlurry.jpg)
+![Icon Grid Display](/images/blog/IconGridBlurry.webp)
 
 At the end of the day, style guides serve as a playbook for software creators. They go beyond the debate whether design decisions are justified or not, as long as it's covered within it. They are a single source of truth to help create consistently well designed experiences familiar to the user. It might not be a silver-bullet solution in the short run, but it immensely helps everyone involved be on the same page.
 

content/blog/thunderbird-style-guide.md

@@ -3,7 +3,7 @@ title = "Thunderbird Style Guide and Usability Study"
 draft = true
 authors = ["anxhelo"]
 date = "2018-07-05 08:00:00 +0200"
-image = "/img/blog/thumb_thunderbird.png"
+image = "/img/blog/thumb_thunderbird.webp"
 categories = []
 tags = ["Style Guide", "Usability Study", "Open Source Design", "Thunderbird"]
 +++
@@ -20,7 +20,7 @@ This marked the start of a wonderful collaboration. In Open Source we often time
 
 To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird. We would like to thank [Open Technology Fund](https://opentech.fund) for supporting this work towards the Thunderbird project as part of its [Usability Lab](https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab).
 
-![Thunderbird Revamped Logo](/images/projects/thunderbird_logo.png)
+![Thunderbird Revamped Logo](/images/projects/thunderbird_logo.webp)
 
 ## New Logo
 After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a [ticket on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1404648) suggesting to follow Firefox' lead and redesign the Thunderbird logo according to the new Photon Design guidelines. Funnily, this coincided with our own experiments on how Thunderbird's logo could be like so we joined the conversation on Bugzilla. We want to thank the great support we got from Ryan Sipes, Thunderbird's Community Manager, who helped facilitate communication with the Thunderbird Community. The new logo will appear in Thunderbird 60.
@@ -28,14 +28,14 @@ After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a [
 ## Usability Study
 Thunderbird was the first project we conducted a Usability Study on. This was possible due to Renata joining our team recently and expanding upon the services Ura offers support. Renata conducted user interviews during [Open Source Conference Albania (OSCAL)](https://osc.al) 2018. The tests were done with 5 testers from different backgrounds, asked to accomplish 9 different tasks. [You can read the final Thunderbid Usability Study here](https://github.com/uradotdesign/works/raw/main/Thunderbird/Thunderbird%20Usability%20Study.pdf).
 
-![Thunderbird Usability Research](/images/projects/thunderbird_1.png)
+![Thunderbird Usability Research](/images/projects/thunderbird_1.webp)
 
 ## Style Guide
 We talk a lot about style guides as you might have noticed. In fact, recently we wrote an article about why they are so important. Thunderbird is no exception. We developed a full [style guide for Thunderbird](https://thunderbird.ura.design), based on the [Photon Design system](https://design.firefox.com) used by Firefox. As latter is quite extensive (Firefox use cases are way broader than Thunderbird's), we tweaked it to apply in Thunderbird's case. It's a living style guide and has lots of room for improvement in the future. However the next step is to implement all these design decisions. If the style guide describes patterns and guidelines well, but they aren't put into practice, the impact of a style guide is minimal. Hence, we look forward to see those changes be implemented and continue supporting Thunderbird with that task.
 
 We also create an [Identihub page](https://demo.identihub.co/project/thunderbird#/) where you can easily access the Thunderbird assets.
 
-![Thunderbird Style Guide](/images/projects/thunderbird_2.png)
+![Thunderbird Style Guide](/images/projects/thunderbird_2.webp)
 
 ## More to come
 Furthermore, we are helping with the [redesign of the Thunderbird website](https://github.com/thundernest/thunderbird-website/issues/31) putting the style guide finally into practice as well. If you'd like to get involved, reach out to us or just contribute to the GitHub issue!

content/blog/underexposed-2019.md

@@ -3,14 +3,14 @@ title = "Underexposed 2019"
 draft = true
 authors = ["anxhelo"]
 date = "2019-02-11 12:00:00 +0200"
-image = "/img/blog/underexposed-post.jpg"
+image = "/img/blog/underexposed-post.webp"
 categories = []
 tags = ["Security", "Style Guide", "Open Source Design", "Event"]
 +++
 
 During early January (7-11) Elio and Anxhelo from our team participated as mentors in the [Underexposed](https://simplysecure.org/underexposed/) event organized by [Simply Secure](https://simplysecure.org/) in Berlin, Germany. Simply Secure
 
-![Underexposed Logo](/images/blog/underexposed.png)
+![Underexposed Logo](/images/blog/underexposed.webp)
 
 [Underexposed Collective](https://simplysecure.org/underexposed/) is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.
 
@@ -22,7 +22,7 @@ This was the first time Underexposed took place in the form of a residency. Fell
 The first day started with an introduction by Simply Secure over at the [WikiBär](https://www.openstreetmap.org/node/4842883021). [Georgia Bullen](https://twitter.com/georgiamoon), the Simply Secure Executive Director, quickly introduced the gist of the week.
 We had a chance to get to know all fellows and their projects better, which helped us have a better grasp of their needs and motivations.
 
-![Sticky notes schedule photo](/images/blog/underexposed-schedule.jpg)
+![Sticky notes schedule photo](/images/blog/underexposed-schedule.webp)
 
 ### Tuesday (8 January)
 
@@ -46,7 +46,7 @@ Elio's presentation was on Friday, about [Style Guides](https://en.wikipedia.org
 
 This was the final day of the event and the fellows worked during the day to prepare their presentations, on what they learned during the week and what they worked on. The presentations were held at the [Mozilla Offices](https://www.openstreetmap.org/node/4996803917#map=19/52.49947/13.44914) in Berlin. Many people had registered for the event and the fellows presented one by one their projects and conclusions. We were happy that our mockups were present in their slides and hope that the process continues to turn them into reality soon.
 
-![Sarah Fox presenting at the Mozilla Offices in front of the audience](/images/blog/underexposed-presentations.jpg)
+![Sarah Fox presenting at the Mozilla Offices in front of the audience](/images/blog/underexposed-presentations.webp)
 
 After the presentations, we got to discuss with each other and then head over for drinks somewhere close the venue.
 

content/blog/ura-fosdem-2018.md

@@ -4,7 +4,7 @@ draft = true
 author = "Mariana Balla"
 link = "https://twitter.com/marianaballa1"
 date = "2018-02-09 12:00:00 +0200"
-image = "/img/blog/Elio-FOSDEM2018-thumb.jpg"
+image = "/img/blog/Elio-FOSDEM2018-thumb.webp"
 categories = []
 tags = ["FOSDEM", "FOSDEM2018", "Identihub", "Open Source Design"]
 +++
@@ -12,7 +12,7 @@ tags = ["FOSDEM", "FOSDEM2018", "Identihub", "Open Source Design"]
 <p>During last weekend the Ura team traveled to Brussels, Belgium to attend <a href="https://fosdem.org/2018/" target="_blank">FOSDEM</a>. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one).  Just like at <a href="https://dev.ura.design/blogposts/2018/01/15/chaos-communication-congress-2017.html" target="_blank">CCC</a>, we strive to be at events  which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/OSD.jpg" alt="OSD booth at FOSDEM"><br />
+<img src="/images/blog/OSD.webp" alt="OSD booth at FOSDEM"><br />
 <i>Open Source Design infobooth – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
 </div>
 <div class="two spacing"></div>
@@ -22,7 +22,7 @@ tags = ["FOSDEM", "FOSDEM2018", "Identihub", "Open Source Design"]
 <p>At the Open Source Design booth, apart talking about our Design philosophy, we also had the chance to tell people about the way we operate and why we are focused on Free and Open Source Software,  We were also happy to introduce “Logobridge” our side-project which helps us contribute back to the community as a whole.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Elio-FOSDEM2018.jpg" alt="Elio during his presentation at FOSDEM 2018"><br />
+<img src="/images/blog/Elio-FOSDEM2018.webp" alt="Elio during his presentation at FOSDEM 2018"><br />
 <i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
 </div>
 <div class="two spacing"></div>
@@ -32,7 +32,7 @@ tags = ["FOSDEM", "FOSDEM2018", "Identihub", "Open Source Design"]
 <p>Further the attendees were introduced to more technical details of the project. Identihub development and discussion happen on GitHub and contributions from everyone are welcomed. Having said that, everyone who is willing to contribute to the project can do so by either contributing with patches, reporting bugs, suggesting usability improvements or creating mockups. Last but not least you can support the Identihub development financially by signing up for a monthly contribution at our dedicated Patreon.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/Elio-Identihub.jpg" alt="Elio during his presentation about Identihub"><br />
+<img src="/images/blog/Elio-Identihub.webp" alt="Elio during his presentation about Identihub"><br />
 <i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
 </div>
 <div class="two spacing"></div>

content/blog/ura-now-part-open-tech-funds-usability-lab.md

@@ -4,7 +4,7 @@ draft = true
 author = "Mariana Balla"
 link = "https://twitter.com/marianaballa1"
 date = "2018-03-12 12:00:00 +0200"
-image = "/img/blog/home-banner.jpg"
+image = "/img/blog/home-banner.webp"
 categories = []
 tags = ["Open Tech Fund", "Usability", "UX Design", "Internet Freedom"]
 +++
@@ -12,7 +12,7 @@ tags = ["Open Tech Fund", "Usability", "UX Design", "Internet Freedom"]
 <p>Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">Open Tech Fund’s Usability Lab</a>.</p>
 
 <div class="large-10 large-centered centered-text columns">
-<img src="/images/blog/OTF.jpg" alt="OTF logo"><br />
+<img src="/images/blog/OTF.webp" alt="OTF logo"><br />
 </div>
 <div class="two spacing"></div>
 

content/work/adapt.md

@@ -21,7 +21,7 @@ The Advocating for Data Accountability, Protection, and Transparency (ADAPT) Pro
 
 The visual identity design for ADAPT consisted in creating a modern and vivid look for the program and it’s community. We created the entire brand design, implementing the style in each deliverable, providing a guideline manual to ensure that the identity of ADAPT is displayed correctly in their future activity.
 
-{{< figure src="/img/work/adapt-brand.png" alt="Adapt brand pattern" alt="Adapt branding moodboard" >}}
+{{< figure src="/img/work/adapt-brand.webp" alt="Adapt brand pattern" alt="Adapt branding moodboard" >}}
 
 ## “Adapting” the logo
 
@@ -31,7 +31,7 @@ The logo aims to be minimal, monochrome, and flexible.
 
 The glyph is made of rectangular shapes, which metaphorically are willing to adapt depending on the circumstances, filling the empty spaces.
 
-{{< figure src="/img/work/adapt-logo.png" alt="Adapt project logo" alt="Adapt logo composition" >}}
+{{< figure src="/img/work/adapt-logo.webp" alt="Adapt project logo" alt="Adapt logo composition" >}}
 
 ## Generative art
 
@@ -39,7 +39,7 @@ The abstract supportive graphics of ADAPT's visual identity are created using Ti
 
 With the right color palette, each graphic visualizes one tagline ADAPT wants to express. Graphics with organic curves add life and vibration and the more geometrical ones give the right amount of sharpness to the messages.
 
-{{< figure src="/img/work/adapt-art.png" alt="Adapt generative art" alt="Generative art mockup" >}}
+{{< figure src="/img/work/adapt-art.webp" alt="Adapt generative art" alt="Generative art mockup" >}}
 
 ## Too many colors?
 
@@ -47,7 +47,7 @@ While experimenting with the colors and providing different options, we decided
 
 Playing with the contrast and the tones, we provided two palettes for the dark mode and two for the light mode. The fifth one is a mixed palette to be used only on white background as the primary color palette for Internews’ ADAPT.
 
-{{< figure src="/img/work/adapt-typography.png" alt="Adapt brand typography" alt="Typography and color combination preview" >}}
+{{< figure src="/img/work/adapt-typography.webp" alt="Adapt brand typography" alt="Typography and color combination preview" >}}
 
 ## Brand Book
 
@@ -55,7 +55,7 @@ As an always-evolving project, we put great emphasis on the brand book for ADAPT
 
 Link: [Internews’ Adapt - Brand Book](https://www.figma.com/proto/m9gSaAYsqNVou9gmVdFwlj/Adapt?page-id=328%3A0&node-id=329%3A125&viewport=241%2C48%2C0.07&scaling=contain)
 
-{{< figure src="/img/work/adapt-podcast.png" alt="Adapt 'Privacy is Global' podcast on Spotify" >}}
+{{< figure src="/img/work/adapt-podcast.webp" alt="Adapt 'Privacy is Global' podcast on Spotify" >}}
 
 Oftentimes when working on branding projects, it is necessary to think ahead, so the brand can easily scale and adjust once the brand family expands.
 

content/work/calyxos.md

@@ -35,7 +35,7 @@ During our visual explorations for the default wallpapers which ship with CalyxO
 
 Due to the low contrast among the wallpaper colours, they offer splendid contrast levels with icons and text on the screen, while preserving the Calyx visual style.
 
-{{< figure src="/img/work/calyxos-wallpapers.png" alt="Mockups of phones with CalyxOS wallpapers" >}}
+{{< figure src="/img/work/calyxos-wallpapers.webp" alt="Mockups of phones with CalyxOS wallpapers" >}}
 
 ## Accessibility Audit
 
@@ -45,7 +45,7 @@ As part of our accessibility audit we reviewed various apps shipped by default i
 
 Common accessibility errors discovered were missing alt= tags as well as inconsistent focus orders. We summarized our findings in a FigJam whiteboard project which we relayed to the CalyxOS lead developer.
 
-{{< figure src="/img/work/calyxos-audit.png" alt="CalyxOS Datura Firewall and OpenKeychain screenshots" >}}
+{{< figure src="/img/work/calyxos-audit.webp" alt="CalyxOS Datura Firewall and OpenKeychain screenshots" >}}
 
 Many of the buttons were labeled as "unleveled button". For screenreader users this creates an enormous accessibility issue which can be easily mitigated by adding a concise description to the interactive element.
 

content/work/censoredplanet.md

@@ -31,7 +31,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. D
 
 Praesent ut posuere dolor, eget imperdiet orci. Curabitur imperdiet scelerisque sapien, ut mollis libero tempus ut. Nullam elementum pharetra erat, non egestas purus laoreet in. Aliquam erat volutpat.
 
-{{< figure src="/img/work/censoredplanet-brand.png" >}}
+{{< figure src="/img/work/censoredplanet-brand.webp" >}}
 
 ## Highlighting internet censorship
 
@@ -39,7 +39,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. D
 
 Praesent ut posuere dolor, eget imperdiet orci. Curabitur imperdiet scelerisque sapien, ut mollis libero tempus ut. Nullam elementum pharetra erat, non egestas purus laoreet in. Aliquam erat volutpat.
 
-{{< figure src="/img/work/censoredplanet-time.png" >}}
+{{< figure src="/img/work/censoredplanet-time.webp" >}}
 
 ## Empowering users to contribute results
 
@@ -47,7 +47,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. D
 
 Praesent ut posuere dolor, eget imperdiet orci. Curabitur imperdiet scelerisque sapien, ut mollis libero tempus ut. Nullam elementum pharetra erat, non egestas purus laoreet in. Aliquam erat volutpat.
 
-{{< figure src="/img/work/censoredplanet-app.png" >}}
+{{< figure src="/img/work/censoredplanet-app.webp" >}}
 
 ## How we helped
 

content/work/i2p.md

@@ -32,7 +32,7 @@ This project has the ambition to help I2P define their aspiration and the missio
 
 By understanding the purpose of I2P, starting with the “Why?”, after several discussions and research, we helped define the voice and personality of the I2P identity. Visually moving away from the dark hacker aestethetics, we made I2P’s look approachable look, potentially making it easier to reach a larger audience of people who have not been familiar with I2P before. By eliminating inconsistencies in its brand identity, the purpose of I2P becomes more clear and it reinforces the others, creating a virtuous circle of definition and confirmation of their identity.
 
-{{< figure src="/img/work/i2p-large.png" alt="I2P brand overview" >}}
+{{< figure src="/img/work/i2p-large.webp" alt="I2P brand overview" >}}
 
 ## Shaping the Identity
 
@@ -40,7 +40,7 @@ After our research, we concluded I2P’s identity in collaboration with the core
 
 I2P has a rational personality, with an open and simple voice, making it friendly and approachable for a diversity of people. I2P should be usable by everyone. Its ideological and futuristic characteristics are and will continue to be a very important part of I2P personality, avoiding exaggerated claims and over-promises but staying true to what it aspires.
 
-{{< figure src="/img/work/i2p-book.png" alt="I2P brand book mockup" >}}
+{{< figure src="/img/work/i2p-book.webp" alt="I2P brand book mockup" >}}
 
 ## New Identity, New Looks
 
@@ -50,7 +50,7 @@ The new logo has a modern and approachable glyph with elements that symbolize I2
 
 Link: [I2P - Brand & Visual Identity: Graphic Assets](https://www.figma.com/proto/P8JOnCnyoX4I4t2M0ltbDZ/I2P-Branding?page-id=504%3A2&node-id=504%3A4&viewport=241%2C48%2C0.33&scaling=contain)
 
-{{< figure src="/img/work/i2p-logo.png" alt="I2P logo composition" >}}
+{{< figure src="/img/work/i2p-logo.webp" alt="I2P logo composition" >}}
 
 ## Browser Extension Ideation
 
@@ -59,7 +59,7 @@ From previous research, we conducted for the I2P installation and setup process,
 
 We quickly realized that anything reducing the number of steps required to get started would go toward wider adoption of I2P. New users should only have to install a browser extension. That way, users would have all the network control settings, I2P apps and services in one place, easily accessible with a simplified setup process.
 
-![i2p explorations](/img/work/i2p-explorations.png)
+![i2p explorations](/img/work/i2p-explorations.webp)
 
 ## Browser Extension Experience
 
@@ -71,7 +71,7 @@ As always, knowing the whys and hows represent the core of our design process, s
 ### For who are we designing
 -- A power user, privacy advocate, journalist, censored user, activist...
 
-![i2p extension](/img/work/i2p-extension.png)
+![i2p extension](/img/work/i2p-extension.webp)
 
 ## Challenges and Decisions
 
@@ -82,7 +82,7 @@ The state of the current console and the relationship between the console and th
 Functionalities vs space
 Considering the current console implementation and all the features I2P offers through it, it was quite challenging to compress all the content into a limited space that the extension offers. Together with users and stakeholders we carefully curated the content to make sure the users can access all core features directly from the console without compromise.
 
-![i2p browser](/img/work/i2p-browser.png)
+![i2p browser](/img/work/i2p-browser.webp)
 
 
 ## How we helped I2P

content/work/oxizide.md

@@ -60,7 +60,7 @@ The Oxidize logo wordmark is inspired from the binary system which is made from
 
 After setting the visual identity, everything else was done step-by-step. With variations of the logo shapes and the primary colors of the brand, the print deliverables were designed, including T-shirts, Badges, Posters, Stickers, etc.
 
-{{< figure src="/img/work/oxidize-swag.png" alt="Oxidize print mockups (Tshirt, badge, poster)" >}}
+{{< figure src="/img/work/oxidize-swag.webp" alt="Oxidize print mockups (Tshirt, badge, poster)" >}}
 
 
 ## How we helped

content/work/stackspin.md

@@ -42,7 +42,7 @@ After setting the visual identity, we prepared and provided the brand guidelines
 
 Link: [Stackspin - Brand Book](https://www.figma.com/proto/upxHYnkoc9x4bKSXlCvsdv/Branding?page-id=77%3A62&node-id=81%3A100&viewport=241%2C48%2C0.19&scaling=contain)
 
-{{< figure src="/img/work/stackspin-mockup.png" alt="Stackspin brand book mockup" >}}
+{{< figure src="/img/work/stackspin-mockup.webp" alt="Stackspin brand book mockup" >}}
 
 ## How we helped
 

content/work/thunderbird.md

@@ -28,13 +28,13 @@ Unfortunately, Mozilla moving away from Thunderbird created technical and design
 
 In Open Source we often times encounter resistance and hesitation to change. It’s something we acknowledge and can understand, considering there are contributors who have been involved for years and suddenly someone out of the blue suggests doing a number of changes. We respect that. However the Thunderbird project has been welcoming to suggestions and help, allowing us to enjoy the process thoroughly beyond simply handing off the deliverables.
 
-{{< figure src="/img/work/thunderbird-icon.png" alt="Redesigned Thunderbird logo" >}}
+{{< figure src="/img/work/thunderbird-icon.webp" alt="Redesigned Thunderbird logo" >}}
 
 ## Improving user flows
 
 We have worked on improving the user experience for many features of Thunderbird, starting with the preferences view redesign and continuing with an overall assessment of the security features, the most critical of them being OpenPGP encryption. Throughout the way, we utilized various user research methods to make sure we bring the users' voice to inform our designs and shared our findings with the broader community. 
 
-{{< figure src="/img/work/thunderbird-mockup.png" alt="Privacy & Security tab view in Thunderbird Settings" >}}
+{{< figure src="/img/work/thunderbird-mockup.webp" alt="Privacy & Security tab view in Thunderbird Settings" >}}
 
 ## Rethinking encryption
 
@@ -46,7 +46,7 @@ Account Settings/End-To-End Encryption, covering the entire user journey:
 * Email
 * Security/encryption for email
 
-{{< figure src="/img/work/thunderbird-encryption.png" alt="Redesigned OpenPGP setup wizard in Thunderbird" >}}
+{{< figure src="/img/work/thunderbird-encryption.webp" alt="Redesigned OpenPGP setup wizard in Thunderbird" >}}
 
 ## How we helped
 
@@ -55,7 +55,7 @@ On our heuristic evaluation, we discovered 20+ usability violations in different
 We then offered insights and recommendations for quick improvements. 
 In addition, during this research phase, we discovered that encryption was challenging to understand for novice users. That led us to continue our research with this particular segment in mind, to find optimal solutions for simplifying the encryption process. To help with this, we designed an onboarding system that guides new users to enable and use encryption in their daily workflow.
 
-{{< figure src="/img/work/thunderbird-help.png" alt="Set Up Encryption wizard Thunderbird" >}}
+{{< figure src="/img/work/thunderbird-help.webp" alt="Set Up Encryption wizard Thunderbird" >}}
 
 ## Encryption Onboarding
 
@@ -66,4 +66,4 @@ We talked directly to novice Thunderbird users and non-users to validate our des
 
 These were semi-structured interviews in combination with formal usability testing to find out how the onboarding fits the overall Thunderbird experience and uncover usability flaws of our previously suggested prototypes.
 
-{{< figure src="/img/work/thunderbird-onboarding.png" alt="Import an Existing key view in Thunderbird" >}}
+{{< figure src="/img/work/thunderbird-onboarding.webp" alt="Import an Existing key view in Thunderbird" >}}

public/404.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/404.html" />
+
+
+<title>
+   404 Page not found :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="404 Page not found">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="404 Page not found"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<div>
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+        </svg>
+    </p>
+    <div>
+        <h1>404</h1>
+        <p>Oops, page not found…</p>
+        <p>
+            <a href="http://test.ura.design" title="Home">Home</a>&nbsp;&nbsp;
+            <a href="http://test.ura.design/%20posts" title="Posts">Posts</a>
+        </p>
+    </div>
+</div>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/about/index.html

@@ -0,0 +1,579 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/about/" />
+
+
+<title>
+   About :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="About">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="About"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/about/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header class="background-blue-500">
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines text-white"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link text-white active" aria-current="page"  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" active" aria-current="page"  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+
+<div class="container about background-blue-500 text-white py-5">
+    <div class="row">
+        <div class="col-xl-7 offset-xl-1 col-lg-8 col-12">
+            <h1 class="fw-light">Open Source and Usability belong together</h1>
+            <p class="mb-0 fw-normal">Ura is a design agency working on open source and privacy-preserving software. We've been supporting software projects since 2016 to be the best they can be. Our team is based in Tirana (Albania), Prishtina (Kosovo) and Berlin (Germany).</p>
+        </div>
+    </div>
+</div>
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid services">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-3 col-lg-4 col-12 pt-5 pe-0 background-gray-50 d-none d-lg-block">
+
+                    
+
+                    <h2>Our Expertise</h2>
+
+                    <div class="tab pb-4" aria-role="tablist">
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="branding" onclick="service(event, 'branding')" id="firstopen" aria-selected="true">Branding</button>
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="accessibility" onclick="service(event, 'accessibility')" aria-selected="false">Accessibility</button>
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="ux-research" onclick="service(event, 'ux-research')" aria-selected="false">UX Research</button>
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="interaction-design" onclick="service(event, 'interaction-design')" aria-selected="false">Interaction Design</button>
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="illustrations" onclick="service(event, 'illustrations')" aria-selected="false">Illustrations</button>
+                        
+                        <button type="button" role="tab" class="tablinkservice" aria-controls="web-development" onclick="service(event, 'web-development')" aria-selected="false">Web Development</button>
+                        
+                    </div>
+
+                    </div>
+
+                    <div class="offset-xl-1 col-xl-8 offset-lg-1 col-lg-7 col-12 pt-lg-5 pt-0 d-none d-lg-block">
+                        
+                            <div id="branding" class="tabcontentservice">
+                                <p class="mb-0"><p>Visual identity can often be an afterthought, especially in open source. We want to change this status quo and work with you to understand the character and story of your identity better. Our branding services range from logo design to layout design as well as print. No matter if you need a small refresh or a complete overhaul, we will work with you all the way to the finish line.</p>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/branding">See our Branding Work</a>
+                            </div>
+                        
+                            <div id="accessibility" class="tabcontentservice">
+                                <p class="mb-0"><p>We consider accessibility a requirement and not a bonus. Getting a 100% rating on an automated accessibility checker is not enough. We provide manual and automated accessibility testing, including best practices in design and development to ensure that your project is compliant with ADA, Section 508 using WCAG 2.1 AA or higher.</p>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/accessibility">See our Accessibility Work</a>
+                            </div>
+                        
+                            <div id="ux-research" class="tabcontentservice">
+                                <p class="mb-0"><p>From information architecture to usability testing, we provide the right tools and skills you need for a human-centered design approach. We apply our industry experience to your project using Nielsen Norman’s 10 user experience heuristics. We want to help you build the right thing from the start, instead of fixing things afterward. When it comes to user testing we do provide recruitment and testing services in-house, including user interviews and usability testing.</p>
+<hr>
+<div class="d-flex align-items-center">
+<img src="http://test.ura.design/img/certifications/ux-certificate.webp" alt="UX Certified by the Nielsen Norman Group">
+<p class="mb-0 ms-2">UX Certified by the Nielsen Norman Group<br /><a class="fw-bold color-gray-900" href="https://www.nngroup.com/ux-certification/verify/" target="_blank" rel="noopener noreferrer">#1049847</a></p>
+</div>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/ux-research">See our UX Research Work</a>
+                            </div>
+                        
+                            <div id="interaction-design" class="tabcontentservice">
+                                <p class="mb-0"><p>We design and build privacy-respecting user interfaces and design systems to bring your vision to life. From sketch to high-fidelity prototype, we cover the end-to-end design process of your website, web app, or mobile app including developer handoff, animations, and interactions.</p>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/interaction-design">See our Interaction Design Work</a>
+                            </div>
+                        
+                            <div id="illustrations" class="tabcontentservice">
+                                <p class="mb-0"><p>Complex solutions require simple explanations. Allow us to help you with custom illustrations fitting your brand and storytelling. We stray away from stock images in order to craft visuals tailored for you, not for others. From concept to implementation our hand-drawn illustrations will breathe life into your app.</p>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/illustrations">See our Illustrations Work</a>
+                            </div>
+                        
+                            <div id="web-development" class="tabcontentservice">
+                                <p class="mb-0"><p>We are not your usual WordPress website developers. While working with dozens of open source communities we understood that no one wants to maintain a backend for a simple website. We specialize in static site generators such as Hugo or Jekyll to craft websites.</p>
+<p>
+                                <a class="see-more mt-3" href="http://test.ura.design/categories/web-development">See our Web Development Work</a>
+                            </div>
+                                            
+                        <script>
+                            document.getElementById("firstopen").click();
+                        
+                            function service(evt, type) {
+                                
+                                var i, tabcontentservice, tablinkservice;
+                        
+                                
+                                tabcontentservice = document.getElementsByClassName("tabcontentservice");
+                                for (i = 0; i < tabcontentservice.length; i++) {
+                                    tabcontentservice[i].style.display = "none";
+                                }
+                        
+                                
+                                tablinkservice = document.getElementsByClassName("tablinkservice");
+                                for (i = 0; i < tablinkservice.length; i++) {
+                                    tablinkservice[i].className = tablinkservice[i].className.replace(" active", "");
+                                    tablinkservice[i].setAttribute("aria-selected", "false");
+                                }
+                        
+                                
+                                document.getElementById(type).style.display = "block";
+                                evt.currentTarget.className += " active";
+                                evt.currentTarget.setAttribute("aria-selected", "true");
+                            }
+                        </script>
+                    </div>
+
+                    <div class="col-12 pt-5 d-block d-lg-none">
+                        <h2 class="mb-5">Our Expertise</h2>
+                        
+                        <details>
+                            <summary>Branding</summary>
+                            <p class="mb-0"><p>Visual identity can often be an afterthought, especially in open source. We want to change this status quo and work with you to understand the character and story of your identity better. Our branding services range from logo design to layout design as well as print. No matter if you need a small refresh or a complete overhaul, we will work with you all the way to the finish line.</p>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/branding">See our Branding Work</a>
+                        </details>
+                        
+                        <details>
+                            <summary>Accessibility</summary>
+                            <p class="mb-0"><p>We consider accessibility a requirement and not a bonus. Getting a 100% rating on an automated accessibility checker is not enough. We provide manual and automated accessibility testing, including best practices in design and development to ensure that your project is compliant with ADA, Section 508 using WCAG 2.1 AA or higher.</p>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/accessibility">See our Accessibility Work</a>
+                        </details>
+                        
+                        <details>
+                            <summary>UX Research</summary>
+                            <p class="mb-0"><p>From information architecture to usability testing, we provide the right tools and skills you need for a human-centered design approach. We apply our industry experience to your project using Nielsen Norman’s 10 user experience heuristics. We want to help you build the right thing from the start, instead of fixing things afterward. When it comes to user testing we do provide recruitment and testing services in-house, including user interviews and usability testing.</p>
+<hr>
+<div class="d-flex align-items-center">
+<img src="http://test.ura.design/img/certifications/ux-certificate.webp" alt="UX Certified by the Nielsen Norman Group">
+<p class="mb-0 ms-2">UX Certified by the Nielsen Norman Group<br /><a class="fw-bold color-gray-900" href="https://www.nngroup.com/ux-certification/verify/" target="_blank" rel="noopener noreferrer">#1049847</a></p>
+</div>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/ux-research">See our UX Research Work</a>
+                        </details>
+                        
+                        <details>
+                            <summary>Interaction Design</summary>
+                            <p class="mb-0"><p>We design and build privacy-respecting user interfaces and design systems to bring your vision to life. From sketch to high-fidelity prototype, we cover the end-to-end design process of your website, web app, or mobile app including developer handoff, animations, and interactions.</p>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/interaction-design">See our Interaction Design Work</a>
+                        </details>
+                        
+                        <details>
+                            <summary>Illustrations</summary>
+                            <p class="mb-0"><p>Complex solutions require simple explanations. Allow us to help you with custom illustrations fitting your brand and storytelling. We stray away from stock images in order to craft visuals tailored for you, not for others. From concept to implementation our hand-drawn illustrations will breathe life into your app.</p>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/illustrations">See our Illustrations Work</a>
+                        </details>
+                        
+                        <details>
+                            <summary>Web Development</summary>
+                            <p class="mb-0"><p>We are not your usual WordPress website developers. While working with dozens of open source communities we understood that no one wants to maintain a backend for a simple website. We specialize in static site generators such as Hugo or Jekyll to craft websites.</p>
+<p>
+                            <a class="see-more w-100 justify-content-center my-3" href="http://test.ura.design/categories/web-development">See our Web Development Work</a>
+                        </details>
+                                                
+                    </div>
+                </div>
+        </div>
+    </div>
+
+    <div class="container-fluid py-5">
+        <div class="container">
+            <h2>Who are we?</h2>
+            <div class="row pt-lg-4 pt-0">
+            
+                <div class="col-xl-4 col-lg-6 col-12">
+                    <div class="row mb-3 mb-lg-5">
+                        <div class="col-xxl-5 col-xl-12 col-5">
+                            <img class="img-fluid pb-3" src="http://test.ura.design/img/authors/Elio.webp" alt="">
+                        </div>
+                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
+                            <h2>Elio Qoshi</h2>
+                            <p>Founder</p>
+                            
+                                <a href="https://elioqoshi.me/" target="_blank" rel="noopener noreferrer" aria-label="Elio Qoshi's Website"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://twitter.com/elioqoshi" target="_blank" rel="noopener noreferrer" aria-label="Elio Qoshi's Twitter"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
+                            
+                            
+                            
+                                <a href="mailto:elio@ura.design" aria-label="Elio Qoshi's email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="col-xl-4 col-lg-6 col-12">
+                    <div class="row mb-3 mb-lg-5">
+                        <div class="col-xxl-5 col-xl-12 col-5">
+                            <img class="img-fluid pb-3" src="http://test.ura.design/img/authors/Anxhelo.webp" alt="">
+                        </div>
+                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
+                            <h2>Anxhelo Lushka</h2>
+                            <p>Web Developer</p>
+                            
+                                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer" aria-label="Anxhelo Lushka's Website"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://twitter.com/anxhelolushka" target="_blank" rel="noopener noreferrer" aria-label="Anxhelo Lushka's Twitter"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://github.com/AnXh3L0" target="_blank" rel="noopener noreferrer" aria-label="Anxhelo Lushka's GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="mailto:anxhelo@ura.design" aria-label="Anxhelo Lushka's email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="col-xl-4 col-lg-6 col-12">
+                    <div class="row mb-3 mb-lg-5">
+                        <div class="col-xxl-5 col-xl-12 col-5">
+                            <img class="img-fluid pb-3" src="http://test.ura.design/img/authors/Renata.webp" alt="">
+                        </div>
+                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
+                            <h2>Renata Gegaj</h2>
+                            <p>UX Research Lead</p>
+                            
+                                <a href="https://renatagegaj.wordpress.com/" target="_blank" rel="noopener noreferrer" aria-label="Renata Gegaj's Website"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://twitter.com/RenataGegaj" target="_blank" rel="noopener noreferrer" aria-label="Renata Gegaj's Twitter"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
+                            
+                            
+                            
+                                <a href="mailto:renata@ura.design" aria-label="Renata Gegaj's email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="col-xl-4 col-lg-6 col-12">
+                    <div class="row mb-3 mb-lg-5">
+                        <div class="col-xxl-5 col-xl-12 col-5">
+                            <img class="img-fluid pb-3" src="http://test.ura.design/img/authors/Ergi.webp" alt="">
+                        </div>
+                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
+                            <h2>Ergi Shkëlzeni</h2>
+                            <p>Visual Designer</p>
+                            
+                            
+                            
+                                <a href="https://github.com/ergish" target="_blank" rel="noopener noreferrer" aria-label="Ergi Shkëlzeni's GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="mailto:ergi@ura.design" aria-label="Ergi Shkëlzeni's email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="col-xl-4 col-lg-6 col-12">
+                    <div class="row mb-3 mb-lg-5">
+                        <div class="col-xxl-5 col-xl-12 col-5">
+                            <img class="img-fluid pb-3" src="http://test.ura.design/img/authors/Anja.webp" alt="">
+                        </div>
+                        <div class="col-xxl-7 col-xl-12 col-7 circle-icons">
+                            <h2>Anja Xhakani</h2>
+                            <p>UX Researcher</p>
+                            
+                                <a href="https://axhakani.github.io/" target="_blank" rel="noopener noreferrer" aria-label="Anja Xhakani's Website"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://twitter.com/anjaxhakani" target="_blank" rel="noopener noreferrer" aria-label="Anja Xhakani's Twitter"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="https://github.com/axhakani" target="_blank" rel="noopener noreferrer" aria-label="Anja Xhakani's GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>
+                            
+                            
+                                <a href="mailto:anja@ura.design" aria-label="Anja Xhakani's email"><i class="fa-solid fa-envelope" aria-hidden="true"></i></a>
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid background-gray-50">
+        <div class="container">
+            <div class="row justify-content-center py-4">
+                <div class="col-xl-10 col-12">
+                <div id="testimonials" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="false">
+                    
+                    <button class="carousel-control-prev" type="button" aria-label="Previous slide" data-bs-target="#testimonials" data-bs-slide="prev">
+                        <span aria-hidden="true">
+                            <svg width="55" height="33" viewBox="0 0 55 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M32 18.9822L9.06166 18.9822L19.1828 29.2419L15.7839 32.5949L4.84003e-07 16.595L15.7839 0.595214L19.1828 3.94825L9.06169 14.2078L32 14.2078L32 18.9822Z" fill="#1B69B6"/>
+                            </svg>
+                        </span>
+                        <span class="visually-hidden">Previous</span>
+                    </button>
+                    <div class="carousel-indicators">
+                        
+                        <button type="button" data-bs-target="#testimonials" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Testimonial by Sara Sinclair Brody"></button>
+                        
+                        
+                        <button type="button" data-bs-target="#testimonials" data-bs-slide-to="1" aria-label="Testimonial by Jeff Beatty"></button>
+                        
+                        <button type="button" data-bs-target="#testimonials" data-bs-slide-to="2" aria-label="Testimonial by Florian Gilcher"></button>
+                        
+                        <button type="button" data-bs-target="#testimonials" data-bs-slide-to="3" aria-label="Testimonial by Mira Mezini"></button>
+                        
+                    </div>
+                    <div class="carousel-inner">
+                        
+                        <div class="carousel-item testimonial py-5 active">
+                            <blockquote><p>“Ura understood the needs of the open-source community when we worked on a styleguide for the Tor Project, delivering a polished result.”</p>
+</blockquote>
+                            <h2 class="testimonial-name">Sara Sinclair Brody</h2>
+                            <p class="testimonial-organization">Design Director</p>
+                        </div>
+                        
+                        
+                        <div class="carousel-item testimonial py-5">
+                            <blockquote>“The folks at Ura were very professional in learning our expectations, planning the project, and being flexible as things changed.”</blockquote>
+                            <h2 class="testimonial-name">Jeff Beatty</h2>
+                            <p class="testimonial-organization">Mozilla / Firefox Localization</p>
+                        </div>
+                        
+                        <div class="carousel-item testimonial py-5">
+                            <blockquote>“We loved working with Ura for Oxidize. From research over design to implementation, everything worked great.”</blockquote>
+                            <h2 class="testimonial-name">Florian Gilcher</h2>
+                            <p class="testimonial-organization">Ferrous Systems / Rust-Lang</p>
+                        </div>
+                        
+                        <div class="carousel-item testimonial py-5">
+                            <blockquote>“From conception to execution, Ura was highly effective to gather requirements and deliver upon them without surprises. Their open design process and their professionalism in all phases of the project is something our team always appreciated.”</blockquote>
+                            <h2 class="testimonial-name">Mira Mezini</h2>
+                            <p class="testimonial-organization">TU Darmstadt</p>
+                        </div>
+                        
+                    </div>
+                    <button class="carousel-control-next" type="button" aria-label="Next slide" data-bs-target="#testimonials" data-bs-slide="next">
+                      <span aria-hidden="true">
+                            
+                      </span>
+                      <span class="visually-hidden">Next</span>
+                    </button>
+                  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid px-sm-3 px-0 pt-5 background-gray-50">
+        <div class="container">
+            <div class="row justify-content-end">
+                <div class="col-xl-5 col-lg-7 col-12 px-sm-3 px-0">
+                    <div class="cta-card py-5">
+                        <h2>Can we help on your project?</h2>
+                        <a class="arrow-link" href="#">Contact us</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/about/index.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>About on Ura Design</title>
+    <link>http://test.ura.design/about/</link>
+    <description>Recent content in About on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/about/index.xml" rel="self" type="application/rss+xml" />
+  </channel>
+</rss>

public/authors/anja/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/anja/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="0"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content=""/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/anxhelo/index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/anxhelo/" />
+
+
+<title>
+   anxhelo :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="anxhelo">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="anxhelo"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/authors/anxhelo/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">anxhelo</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/introducing-logobridge/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/logobridge-post.webp" alt="Introducing Logobridge"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/introducing-logobridge/">Introducing Logobridge</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/underexposed-2019/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/underexposed-post.webp" alt="Underexposed 2019"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/underexposed-2019/">Underexposed 2019</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/securedrop-styleguide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/projects/securedrop_overview.webp" alt="SecureDrop Style Guide"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/securedrop-styleguide/">SecureDrop Style Guide</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/i2p-usability-study-and-styleguide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/projects/i2p_overview.webp" alt="I2P Style Guide and Usability Study"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/i2p-usability-study-and-styleguide/">I2P Style Guide and Usability Study</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/osd-summit-2018/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/thumb_osd.webp" alt="Open Source Design Summit 2018"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/osd-summit-2018/">Open Source Design Summit 2018</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/thunderbird-style-guide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/thumb_thunderbird.webp" alt="Thunderbird Style Guide and Usability Study"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/thunderbird-style-guide/">Thunderbird Style Guide and Usability Study</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/reproducible-builds-styleguide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/ReproducibleBuilds_thumbnail.webp" alt="Reproducible Builds Style Guide"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/reproducible-builds-styleguide/">Reproducible Builds Style Guide</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/anxhelo/index.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>anxhelo on Ura Design</title>
+    <link>http://test.ura.design/authors/anxhelo/</link>
+    <description>Recent content in anxhelo on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Tue, 07 May 2019 18:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/authors/anxhelo/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Introducing Logobridge</title>
+      <link>http://test.ura.design/blog/introducing-logobridge/</link>
+      <pubDate>Tue, 07 May 2019 18:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/introducing-logobridge/</guid>
+      <description>At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build Logobridge, an open source collection of public domain logos anyone can use for their projects for free: https://logobridge.</description>
+    </item>
+    
+    <item>
+      <title>Underexposed 2019</title>
+      <link>http://test.ura.design/blog/underexposed-2019/</link>
+      <pubDate>Mon, 11 Feb 2019 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/underexposed-2019/</guid>
+      <description>During early January (7-11) Elio and Anxhelo from our team participated as mentors in the Underexposed event organized by Simply Secure in Berlin, Germany. Simply Secure
+Underexposed Collective is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.
+This was the first time Underexposed took place in the form of a residency.</description>
+    </item>
+    
+    <item>
+      <title>SecureDrop Style Guide</title>
+      <link>http://test.ura.design/blog/securedrop-styleguide/</link>
+      <pubDate>Tue, 25 Dec 2018 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/securedrop-styleguide/</guid>
+      <description>Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
+During this process we were brought closer with the Project, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before.</description>
+    </item>
+    
+    <item>
+      <title>I2P Style Guide and Usability Study</title>
+      <link>http://test.ura.design/blog/i2p-usability-study-and-styleguide/</link>
+      <pubDate>Mon, 03 Dec 2018 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/i2p-usability-study-and-styleguide/</guid>
+      <description>Back when Ura was founded in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo.</description>
+    </item>
+    
+    <item>
+      <title>Open Source Design Summit 2018</title>
+      <link>http://test.ura.design/blog/osd-summit-2018/</link>
+      <pubDate>Fri, 16 Nov 2018 08:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/osd-summit-2018/</guid>
+      <description>During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in the city we are based in, Tirana.
+Open Source Design (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a job board, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.</description>
+    </item>
+    
+    <item>
+      <title>Thunderbird Style Guide and Usability Study</title>
+      <link>http://test.ura.design/blog/thunderbird-style-guide/</link>
+      <pubDate>Thu, 05 Jul 2018 08:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/thunderbird-style-guide/</guid>
+      <description>Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped redesign the Thunderbird Conversations add-on and even now our email infrastructure is powered by ProtonMail and ProtonMail Bridge via Thunderbird.
+Unfortunately, Mozilla moving away from Thunderbird created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird.</description>
+    </item>
+    
+    <item>
+      <title>Reproducible Builds Style Guide</title>
+      <link>http://test.ura.design/blog/reproducible-builds-styleguide/</link>
+      <pubDate>Wed, 13 Jun 2018 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/reproducible-builds-styleguide/</guid>
+      <description>Earlier this year, we announced our involvement with Open Tech Fund&amp;rsquo;s Usability Lab, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the announcement on our blog.
+Reproducible Builds has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</description>
+    </item>
+    
+  </channel>
+</rss>

public/authors/elio/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/elio/" />
+
+
+<title>
+   elio :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="elio">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="elio"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/authors/elio/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">elio</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/style-guides-go-beyond-aesthetics/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/osd_event.webp" alt="Style Guides go Beyond Aesthetics"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/style-guides-go-beyond-aesthetics/">Style Guides go Beyond Aesthetics</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/elio/index.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>elio on Ura Design</title>
+    <link>http://test.ura.design/authors/elio/</link>
+    <description>Recent content in elio on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Mon, 02 Jul 2018 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/authors/elio/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Style Guides go Beyond Aesthetics</title>
+      <link>http://test.ura.design/blog/style-guides-go-beyond-aesthetics/</link>
+      <pubDate>Mon, 02 Jul 2018 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/style-guides-go-beyond-aesthetics/</guid>
+      <description>Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym RTFM or &amp;ldquo;Read The Freaking Manual&amp;rdquo;. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?
+A similar stigma often appears in Free Software / Open Source projects as well. The alternative &amp;ldquo;Read the Documentation&amp;rdquo; certainly would ensure that people would give a little more effort before repeating questions.</description>
+    </item>
+    
+  </channel>
+</rss>

public/authors/ergi/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/ergi/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="0"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content=""/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/" />
+
+
+<title>
+   Authors :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Authors">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Authors"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/authors/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Authors</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/authors/renata/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="renata"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/authors/renata/">renata</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/authors/anxhelo/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="anxhelo"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/authors/anxhelo/">anxhelo</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/authors/elio/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="elio"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/authors/elio/">elio</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/index.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Authors on Ura Design</title>
+    <link>http://test.ura.design/authors/</link>
+    <description>Recent content in Authors on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Sun, 08 Sep 2019 19:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/authors/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>renata</title>
+      <link>http://test.ura.design/authors/renata/</link>
+      <pubDate>Sun, 08 Sep 2019 19:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/authors/renata/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>anxhelo</title>
+      <link>http://test.ura.design/authors/anxhelo/</link>
+      <pubDate>Tue, 07 May 2019 18:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/authors/anxhelo/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>elio</title>
+      <link>http://test.ura.design/authors/elio/</link>
+      <pubDate>Mon, 02 Jul 2018 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/authors/elio/</guid>
+      <description></description>
+    </item>
+    
+  </channel>
+</rss>

public/authors/renata/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/authors/renata/" />
+
+
+<title>
+   renata :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="renata">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="renata"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/authors/renata/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">renata</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/blog/https-everywhere-redesign/"><img class="img-fluid w-100" src="http://test.ura.design/img/work//img/blog/httpse-post.webp" alt="HTTPS Everywhere Redesign"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/blog/https-everywhere-redesign/">HTTPS Everywhere Redesign</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/authors/renata/index.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>renata on Ura Design</title>
+    <link>http://test.ura.design/authors/renata/</link>
+    <description>Recent content in renata on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Sun, 08 Sep 2019 19:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/authors/renata/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>HTTPS Everywhere Redesign</title>
+      <link>http://test.ura.design/blog/https-everywhere-redesign/</link>
+      <pubDate>Sun, 08 Sep 2019 19:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/blog/https-everywhere-redesign/</guid>
+      <description>HTTPS Everywhere is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).
+It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.
+In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere.</description>
+    </item>
+    
+  </channel>
+</rss>

public/blog/https-everywhere-redesign/index.html

@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="HTTPS Everywhere is a free and open-source browser extension for Google Chrome, Mozilla Firefox, …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Usability Research, UX Research, Open Source Design" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/https-everywhere-redesign/" />
+
+
+<title>
+   HTTPS Everywhere Redesign :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="HTTPS Everywhere Redesign">
+<meta itemprop="description" content="HTTPS Everywhere is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).
+It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.
+In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere."><meta itemprop="datePublished" content="2019-09-08T19:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="569"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Usability Research,UX Research,Open Source Design," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="HTTPS Everywhere Redesign"/>
+<meta name="twitter:description" content="HTTPS Everywhere is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).
+It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.
+In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere."/>
+  
+
+<meta property="article:published_time" content="2019-09-08 19:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/httpse-post.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">HTTPS Everywhere Redesign</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://renatagegaj.wordpress.com/" target="_blank" rel="noopener noreferrer">Renata Gegaj</a>
+                
+                
+                <span class="ms-5"><time datetime="Sep 8, 2019">Sep 8, 2019</time></span>
+                <span class="ms-5">3 minutes</span><span class="ms-5">569 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p><strong>HTTPS Everywhere</strong> is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).</p>
+<p>It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.</p>
+<p>In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere. From our initial user research, we identified issues related to information hierarchy,  interface copy, and usability.</p>
+<h3 id="challenges">Challenges<a class="anchor-tag" href="#challenges">#</a></h3>
+<p>Considering the fact that security-focused software often targets tech-savvy people, it tends to be intimidating for “average” users. Although HTTPS Everywhere is a security tool, its purpose is to ensure a secure connection and protect all; therefore, it targets a wide range of users.</p>
+<p>Our challenge here was balancing out a simple interface with complex features.
+We needed to find a way to keep the design understandable for “the average user,” yet intuitive for the “advanced user.” We decided to channel all our efforts into making the extension inclusive to all people despite their computer expertise, professional background or disabilities.</p>
+<h3 id="research">Research<a class="anchor-tag" href="#research">#</a></h3>
+<p>Throughout the redesign process, we used UX research as an instrument to get closer to users. We decided to start with qualitative research, to then continue on with a quantitative approach. We conducted a few iterations of usability tests and also ran accessibility audits to make sure the whole user experience ties in smoothly.</p>
+<p>The research phase helped us tremendously in getting to know the users and tracking down all the pain points they&rsquo;ve encountered while using HTTPS Everywhere. It also helped us get a feel for the overall experience users had when using the extension.
+Developing personas during this phase helped shape the design while keeping in mind our target users, which we had available to refer back to whenever we needed.</p>
+<h4 id="survey">Survey<a class="anchor-tag" href="#survey">#</a></h4>
+<p>The survey questions were mostly focused on web security. We wanted to know more about participants’ general understanding of security on the web and how the HTTPS Everywhere extension fits into it.
+The survey included 12 questions, a mix of open and closed questions. We shared it on a few different platforms to target a diverse range of users, 34 people in total filled out the survey.</p>
+<h4 id="usability-testing">Usability Testing<a class="anchor-tag" href="#usability-testing">#</a></h4>
+<p>We conducted 1:1 traditional Usability Testing sessions. Participants were equipped with laptops and papers with the tasks that they needed to perform during the test. On traditional usability testing, typically only one participant at a time can enter the room and take the test. The test administrator was sitting next to the participant observing and taking notes. The session captured each participant’s navigational choices, task completion rates, comments, overall satisfaction ratings, questions, and feedback. We conducted 5 testing sessions per iteration.</p>
+<h3 id="shaping-the-design">Shaping the design<a class="anchor-tag" href="#shaping-the-design">#</a></h3>
+<p>After completing the research phase, we started shaping the design. We decided to take an iterative approach. First, we did tentative design mockups and then tested them with participants’ matching profiles with users extracted from persona development.</p>
+<h4 id="original">Original<a class="anchor-tag" href="#original">#</a></h4>
+<p><img src="http://test.ura.design/images/blog/httpse-old.webp" alt="HTTPSE Old Interface"></p>
+<h4 id="iteration">Iteration<a class="anchor-tag" href="#iteration">#</a></h4>
+<p><img src="http://test.ura.design/images/blog/httpse-iteration.webp" alt="HTTPSE Iteration 1 Interface"></p>
+<h4 id="iteration-2--3">Iteration 2 &amp; 3<a class="anchor-tag" href="#iteration-2--3">#</a></h4>
+<p><img src="http://test.ura.design/images/blog/httpse-iteration2.webp" alt="HTTPSE New Interface">
+<img src="http://test.ura.design/images/blog/httpse-iteration3.webp" alt="HTTPSE New Interface"></p>
+<h3 id="conclusion">Conclusion<a class="anchor-tag" href="#conclusion">#</a></h3>
+<p>Designing for a browser extension is quite challenging considering the limited space they offer but we managed to use the space wisely while being mindful to not overcrowd it.
+You can view our HTTPS Everywhere case study and all source files on <a href=https://ura.design/projects/https-everywhere
+    
+    target="_blank" rel="noopener noreferrer"
+>our portfolio page</a>.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/usability-research">Usability Research</a></span><span class="tag"><a href="http://test.ura.design/tags/ux-research">UX Research</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2019-09-08 19:00">2019-09-08 19:00</time>
+                , last updated on
+                <time datetime="2019-09-08 19:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/introducing-logobridge/">
+                        <span class="button__text">Introducing Logobridge</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/i2p-usability-study-and-styleguide/index.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Back when Ura was founded in 2016 we only had a small landing page and a Patreon to help fund the …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Style Guide, Usability Study, Open Source Design, I2P" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/i2p-usability-study-and-styleguide/" />
+
+
+<title>
+   I2P Style Guide and Usability Study :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="I2P Style Guide and Usability Study">
+<meta itemprop="description" content="Back when Ura was founded in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo."><meta itemprop="datePublished" content="2018-12-03T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="434"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Style Guide,Usability Study,Open Source Design,I2P," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="I2P Style Guide and Usability Study"/>
+<meta name="twitter:description" content="Back when Ura was founded in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo."/>
+  
+
+<meta property="article:published_time" content="2018-12-03 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/projects/i2p_overview.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">I2P Style Guide and Usability Study</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Dec 3, 2018">Dec 3, 2018</time></span>
+                <span class="ms-5">3 minutes</span><span class="ms-5">434 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Back when Ura was founded in 2016 we only had a small landing page and a <a href=https://patreon.com/ura
+    
+    target="_blank" rel="noopener noreferrer"
+>Patreon</a> to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo. Some months later we also helped with a logo for the I2P Summer Dev Initative.</p>
+<p><img src="http://test.ura.design/images/projects/i2p_logo.webp" alt="I2P New Logo"></p>
+<p>During this process we were brought closer with the <a href=https://geti2p.net
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P Project</a>, meeting with str4d, one of the I2P developers at various occasions, such as Chaos Communication Congress and the Tor Meeting. Since then, we have been helping out I2P with various design tasks. The work we conducted with I2P as part of the OTF Usability Lab has been one of our largest projects however.</p>
+<h2 id="usability-study">Usability Study<a class="anchor-tag" href="#usability-study">#</a></h2>
+<p>After our first Usability Study for Thunderbird, we put these lessons into use and optimized the process in which we would conduct Usability Research for I2P. Renata, our Usability Researcher interviewed ten (10) I2P Users (that&rsquo;s twice as many as in our <a href=http://test.ura.design/2018/07/05/thunderbird-style-guide
+    
+    
+>Thunderbird Study</a>) throughout local events in Albania and Kosovo. The study focused on I2P for Windows and Linux operating systems, asking users to complete 5 major tasks in I2P and additionally also another optional task.</p>
+<p>You can read the final I2P Usability Study <a href=https://github.com/uracreative/works/raw/main/I2P/Usability%20Study/I2P%20Usability%20Study.pdf
+    
+    target="_blank" rel="noopener noreferrer"
+>here</a>.</p>
+<h2 id="style-guide">Style Guide<a class="anchor-tag" href="#style-guide">#</a></h2>
+<p>As part of this project, we also created an interactive style guide for the I2P project, similar to our past works as part of the Usability Lab. The style guide contains all the necessary elements and assets that make up the I2P brand, categorized in different sections, such as the logo, colors, typography, icons; furthermore components that can be used when designing systems related to I2P and a standalone section about the language used when writing documents/articles/reports on the I2P project.</p>
+<p>Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.</p>
+<p><img src="http://test.ura.design/images/projects/i2p_image_1.webp" alt="Style Guide website"></p>
+<p>You can see a demo of the style guide website <a href=https://uracreative.github.io/i2p-styleguide
+    
+    target="_blank" rel="noopener noreferrer"
+>here</a> and the portfolio <a href=../../../projects/i2p
+    
+    
+>project</a> on our website.</p>
+<p>We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>OpenTechFund</a> for their support on providing resources for privacy and security related open source projects to thrive and receive help where they need the most.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/style-guide">Style Guide</a></span><span class="tag"><a href="http://test.ura.design/tags/usability-study">Usability Study</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/i2p">I2P</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-12-03 11:00">2018-12-03 11:00</time>
+                , last updated on
+                <time datetime="2018-12-03 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/securedrop-styleguide/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">SecureDrop Style Guide</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/osd-summit-2018/">
+                        <span class="button__text">Open Source Design Summit 2018</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/" />
+
+
+<title>
+   Blog :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Blog">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Blog"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/blog/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/index.xml

@@ -0,0 +1,806 @@
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <title>Blog on Ura Design</title>
+        <link>http://test.ura.design/blog/</link>
+        <description>Recent content in Blog on Ura Design</description>
+        
+        <language>en-us</language>
+        <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+        <lastBuildDate>Sun, 08 Sep 2019 19:00:00 +0200</lastBuildDate>
+        <atom:link href="http://test.ura.design/blog/index.xml" rel="self" type="application/rss+xml" />
+        
+        <item>
+            <title>HTTPS Everywhere Redesign</title>
+            <link>http://test.ura.design/blog/https-everywhere-redesign/</link>
+            <pubDate>Sun, 08 Sep 2019 19:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/https-everywhere-redesign/</guid>
+            <description>HTTPS Everywhere is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).
+It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.
+In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere.</description>
+            <content type="html"><![CDATA[<p><strong>HTTPS Everywhere</strong> is a free and open-source browser extension for Google Chrome, Mozilla Firefox, Opera, Brave, and Firefox for Android, which is developed collaboratively by The Tor Project and the Electronic Frontier Foundation (EFF).</p>
+<p>It automatically makes websites use a more secure HTTPS connection instead of HTTP if they support it. HTTPS Everywhere makes it possible to block and unblock all non-HTTPS browser connections with one click.</p>
+<p>In an effort to improve the user experience, we worked with the EFF team to reimagine HTTPS Everywhere. From our initial user research, we identified issues related to information hierarchy,  interface copy, and usability.</p>
+<h3 id="challenges">Challenges</h3>
+<p>Considering the fact that security-focused software often targets tech-savvy people, it tends to be intimidating for “average” users. Although HTTPS Everywhere is a security tool, its purpose is to ensure a secure connection and protect all; therefore, it targets a wide range of users.</p>
+<p>Our challenge here was balancing out a simple interface with complex features.
+We needed to find a way to keep the design understandable for “the average user,” yet intuitive for the “advanced user.” We decided to channel all our efforts into making the extension inclusive to all people despite their computer expertise, professional background or disabilities.</p>
+<h3 id="research">Research</h3>
+<p>Throughout the redesign process, we used UX research as an instrument to get closer to users. We decided to start with qualitative research, to then continue on with a quantitative approach. We conducted a few iterations of usability tests and also ran accessibility audits to make sure the whole user experience ties in smoothly.</p>
+<p>The research phase helped us tremendously in getting to know the users and tracking down all the pain points they&rsquo;ve encountered while using HTTPS Everywhere. It also helped us get a feel for the overall experience users had when using the extension.
+Developing personas during this phase helped shape the design while keeping in mind our target users, which we had available to refer back to whenever we needed.</p>
+<h4 id="survey">Survey</h4>
+<p>The survey questions were mostly focused on web security. We wanted to know more about participants’ general understanding of security on the web and how the HTTPS Everywhere extension fits into it.
+The survey included 12 questions, a mix of open and closed questions. We shared it on a few different platforms to target a diverse range of users, 34 people in total filled out the survey.</p>
+<h4 id="usability-testing">Usability Testing</h4>
+<p>We conducted 1:1 traditional Usability Testing sessions. Participants were equipped with laptops and papers with the tasks that they needed to perform during the test. On traditional usability testing, typically only one participant at a time can enter the room and take the test. The test administrator was sitting next to the participant observing and taking notes. The session captured each participant’s navigational choices, task completion rates, comments, overall satisfaction ratings, questions, and feedback. We conducted 5 testing sessions per iteration.</p>
+<h3 id="shaping-the-design">Shaping the design</h3>
+<p>After completing the research phase, we started shaping the design. We decided to take an iterative approach. First, we did tentative design mockups and then tested them with participants’ matching profiles with users extracted from persona development.</p>
+<h4 id="original">Original</h4>
+<p><img src="/images/blog/httpse-old.webp" alt="HTTPSE Old Interface"></p>
+<h4 id="iteration">Iteration</h4>
+<p><img src="/images/blog/httpse-iteration.webp" alt="HTTPSE Iteration 1 Interface"></p>
+<h4 id="iteration-2--3">Iteration 2 &amp; 3</h4>
+<p><img src="/images/blog/httpse-iteration2.webp" alt="HTTPSE New Interface">
+<img src="/images/blog/httpse-iteration3.webp" alt="HTTPSE New Interface"></p>
+<h3 id="conclusion">Conclusion</h3>
+<p>Designing for a browser extension is quite challenging considering the limited space they offer but we managed to use the space wisely while being mindful to not overcrowd it.
+You can view our HTTPS Everywhere case study and all source files on <a href=https://ura.design/projects/https-everywhere
+    
+    target="_blank" rel="noopener noreferrer"
+>our portfolio page</a>.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Introducing Logobridge</title>
+            <link>http://test.ura.design/blog/introducing-logobridge/</link>
+            <pubDate>Tue, 07 May 2019 18:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/introducing-logobridge/</guid>
+            <description>At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build Logobridge, an open source collection of public domain logos anyone can use for their projects for free: https://logobridge.</description>
+            <content type="html"><![CDATA[<p>At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build <a href=https://logobridge.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Logobridge</a>, an open source collection of public domain logos anyone can use for their projects for free: <a href=https://logobridge.co
+    
+    target="_blank" rel="noopener noreferrer"
+>https://logobridge.co</a></p>
+<p><img src="/images/blog/logobridge.webp" alt="Logobridge"></p>
+<p>All logos are available in their glyph form and you can tweak or adapt them to your needs, as their <a href=https://creativecommons.org/share-your-work/public-domain/cc0/
+    
+    target="_blank" rel="noopener noreferrer"
+>CC0 Public Domain</a> dedication allows basically any usage. Of course launching a product with a public domain logo might not be suitable for a product release so you can also specify a price you are willing to pay and we will design a logo for you, The great thing? From the proceeds we also will support the <a href=https://opencollective.com/opensourcedesign
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design collective</a>, going towards community outreach and fostering design initiatives in open source.</p>
+<p><img src="/images/blog/logobridge-scrot.webp" alt="Logobridge Logos"></p>
+<p>We hope to add new logos every month and grow the collection of public domain logos. With the amount of unappreciated logo drafts we have lying on our hard drives, we don&rsquo;t think that&rsquo;s going to be hard to pull through. We worked on Logobridge since 2016 but never got it off the ground properly like now. We hope that it will prove more useful to people now. Logobridge is also available in <a href=https://logobridge.co/de
+    
+    target="_blank" rel="noopener noreferrer"
+>German</a> as of now.</p>
+<p>Of course Logobridge itself is open source and powered by <a href=https://jekyllrb.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Jekyll</a>. You can find the repo on <a href=https://github.com/uracreative/logobridge
+    
+    target="_blank" rel="noopener noreferrer"
+>GitHub</a>.</p>
+<p>Want to contribute with a logo one of your past clients didn&rsquo;t appreciate enough? File a Pull Request or an <a href=https://github.com/uracreative/logobridge/issues/new
+    
+    target="_blank" rel="noopener noreferrer"
+>Issue</a> on GitHub and we can include it in the upcoming month.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Underexposed 2019</title>
+            <link>http://test.ura.design/blog/underexposed-2019/</link>
+            <pubDate>Mon, 11 Feb 2019 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/underexposed-2019/</guid>
+            <description>During early January (7-11) Elio and Anxhelo from our team participated as mentors in the Underexposed event organized by Simply Secure in Berlin, Germany. Simply Secure
+Underexposed Collective is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.
+This was the first time Underexposed took place in the form of a residency.</description>
+            <content type="html"><![CDATA[<p>During early January (7-11) Elio and Anxhelo from our team participated as mentors in the <a href=https://simplysecure.org/underexposed/
+    
+    target="_blank" rel="noopener noreferrer"
+>Underexposed</a> event organized by <a href=https://simplysecure.org/
+    
+    target="_blank" rel="noopener noreferrer"
+>Simply Secure</a> in Berlin, Germany. Simply Secure</p>
+<p><img src="/images/blog/underexposed.webp" alt="Underexposed Logo"></p>
+<p><a href=https://simplysecure.org/underexposed/
+    
+    target="_blank" rel="noopener noreferrer"
+>Underexposed Collective</a> is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.</p>
+<p>This was the first time Underexposed took place in the form of a residency. Fellows from around the world spent one week with designers and developers focused to work on their projects, and help others with theirs. Together, the cohort used the residency as a place to ask questions, work on prototypes and circulate feedback quickly. Over the course of the week we had sessions about user research, design systems, prototyping, and wireframing Fellows also had  an opportunity to share their work with the public, specifically at the final presentations at the Mozilla Berlin offices</p>
+<h3 id="monday-7-january">Monday (7 January)</h3>
+<p>The first day started with an introduction by Simply Secure over at the <a href=https://www.openstreetmap.org/node/4842883021
+    
+    target="_blank" rel="noopener noreferrer"
+>WikiBär</a>. <a href=https://twitter.com/georgiamoon
+    
+    target="_blank" rel="noopener noreferrer"
+>Georgia Bullen</a>, the Simply Secure Executive Director, quickly introduced the gist of the week.
+We had a chance to get to know all fellows and their projects better, which helped us have a better grasp of their needs and motivations.</p>
+<p><img src="/images/blog/underexposed-schedule.webp" alt="Sticky notes schedule photo"></p>
+<h3 id="tuesday-8-january">Tuesday (8 January)</h3>
+<p>Our first session covered the basics of <a href=https://en.wikipedia.org/wiki/Prototype
+    
+    target="_blank" rel="noopener noreferrer"
+>Prototyping</a>. Participants began with pen and paper prototyping, something we are great fans of doing when having the privilege to be in the same room with people. Afterall, this approach has a lower entry level barrier than any design software, allowing everyone to move quickly and scrap ideas before investing a significant amount of time.</p>
+<p>The fellows had really interesting projects and for most of them, the main issue was related to the encryption key restore process. As these projects are security-and-privacy related, they are decentralized and offer users the option to create an encryption key in order to access their data if something bad happens in the future.</p>
+<p>Unfortunately, this process is often bypassed by users as it&rsquo;s (according to them) an extra step that slows down their workflow. As a result, they often lose access to their accounts and data, which could be avoided if they would have had created that key in the beginning.</p>
+<p>We helped the projects there by creating prototypes on paper, discussing UX problems and possible solutions for them, then digitally creating mockups using <a href=https://www.figma.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Figma</a>, a proprietary design collaboration tool.</p>
+<h3 id="wednesday-9-january">Wednesday (9 January)</h3>
+<p>Wednesday was one of the busiest days of the event. We got up early, ate breakfast and joined the others at the venue. We separated into two groups, one upstairs and one downstairs and worked on our personal projects or with others.</p>
+<p><a href=https://shiba.computer/
+    
+    target="_blank" rel="noopener noreferrer"
+>Cade</a>, a designer from Germany, gave a very interesting talk on <a href=https://shiba.computer/essay/on-weaponised-design/
+    
+    target="_blank" rel="noopener noreferrer"
+>Weaponized Design</a>, a process that allows for harm of users within the defined bounds of a designed system. You can read his essay in the link above.</p>
+<h3 id="friday-11-january">Friday (11 January)</h3>
+<p>Elio&rsquo;s presentation was on Friday, about <a href=https://en.wikipedia.org/wiki/Style_guide
+    
+    target="_blank" rel="noopener noreferrer"
+>Style Guides</a> and the process of working in the open. He explained our latest projects, how we worked with <a href=https://ura.design/projects/securedrop
+    
+    target="_blank" rel="noopener noreferrer"
+>SecureDrop</a>, <a href=https://ura.design/projects/i2p
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P</a>, <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a>, <a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Thunderbird</a> etc.</p>
+<p>This was the final day of the event and the fellows worked during the day to prepare their presentations, on what they learned during the week and what they worked on. The presentations were held at the <a href=https://www.openstreetmap.org/node/4996803917#map&#61;19/52.49947/13.44914
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla Offices</a> in Berlin. Many people had registered for the event and the fellows presented one by one their projects and conclusions. We were happy that our mockups were present in their slides and hope that the process continues to turn them into reality soon.</p>
+<p><img src="/images/blog/underexposed-presentations.webp" alt="Sarah Fox presenting at the Mozilla Offices in front of the audience"></p>
+<p>After the presentations, we got to discuss with each other and then head over for drinks somewhere close the venue.</p>
+<p>We would like to thank the entire Simply Secure team; Georgia, Ame, Eileen and Molly for being there and organizing a fantastic event. We had a really awesome time and hope to see you all again soon.</p>
+<p>All content is licensed under CC BY-NC-SA 4.0. (<a href=https://creativecommons.org/licenses/by-nc-sa/4.0/
+    
+    target="_blank" rel="noopener noreferrer"
+>Attribution-NonCommercial-ShareAlike 4.0 International</a>).</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>SecureDrop Style Guide</title>
+            <link>http://test.ura.design/blog/securedrop-styleguide/</link>
+            <pubDate>Tue, 25 Dec 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/securedrop-styleguide/</guid>
+            <description>Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
+During this process we were brought closer with the Project, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before.</description>
+            <content type="html"><![CDATA[<p>Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+<p><img src="/images/projects/securedrop_logo.webp" alt="SecureDrop Logo"></p>
+<p>During this process we were brought closer with the <a href=https://securedrop.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Project</a>, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before.</p>
+<h2 id="style-guide">Style Guide</h2>
+<p>We have attended video meetings on Jitsi with the members of SecureDrop, discussing on the specifics of the portfolio, features required and the best way to implement them. Some of these features are as following.</p>
+<ol>
+<li>Code Snippets for every component in the Components section are expandable via a toggle, separated from the Bootstrap framework and easily reusable and deployable when needed; these snippets gracefully fallback to automatically show every snippet on the page when JavaScript is turned off.</li>
+<li>An Icons section, made with PNG icons in order to be viewable on Tor High Security Settings mode.</li>
+<li>Extra fallbacks of the page when JavaScript is disabled with a few components hidden (that only work with JavaScript enabled).</li>
+</ol>
+<p>The style guide contains all the necessary elements and assets that make up the SecureDrop brand, categorized in different sections, such as the logo, colors, typography, icons; furthermore components that can be used when designing systems related to SecureDrop and a standalone section about the language used when writing documents/articles/reports on the SecureDrop project.</p>
+<p>Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.</p>
+<p><img src="/images/projects/securedrop_image_alerts.webp" alt="Style Guide website"></p>
+<p>The repo has been transferred to the Freedom of Press GitHub <a href=https://github.com/freedomofpress/securedrop/
+    
+    target="_blank" rel="noopener noreferrer"
+>organization</a>.
+However, we keep a static archive for the time being where you can preview the live site of the <a href=https://uracreative.github.io/securedrop-styleguide/
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide</a> and the portfolio <a href=../../../projects/securedrop
+    
+    
+>project</a> on our website.</p>
+<p>We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>OpenTechFund</a> for their support on providing resources for privacy and security related open source projects to thrive and receive help where they need the most.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>I2P Style Guide and Usability Study</title>
+            <link>http://test.ura.design/blog/i2p-usability-study-and-styleguide/</link>
+            <pubDate>Mon, 03 Dec 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/i2p-usability-study-and-styleguide/</guid>
+            <description>Back when Ura was founded in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo.</description>
+            <content type="html"><![CDATA[<p>Back when Ura was founded in 2016 we only had a small landing page and a <a href=https://patreon.com/ura
+    
+    target="_blank" rel="noopener noreferrer"
+>Patreon</a> to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo. Some months later we also helped with a logo for the I2P Summer Dev Initative.</p>
+<p><img src="/images/projects/i2p_logo.webp" alt="I2P New Logo"></p>
+<p>During this process we were brought closer with the <a href=https://geti2p.net
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P Project</a>, meeting with str4d, one of the I2P developers at various occasions, such as Chaos Communication Congress and the Tor Meeting. Since then, we have been helping out I2P with various design tasks. The work we conducted with I2P as part of the OTF Usability Lab has been one of our largest projects however.</p>
+<h2 id="usability-study">Usability Study</h2>
+<p>After our first Usability Study for Thunderbird, we put these lessons into use and optimized the process in which we would conduct Usability Research for I2P. Renata, our Usability Researcher interviewed ten (10) I2P Users (that&rsquo;s twice as many as in our <a href=http://test.ura.design/2018/07/05/thunderbird-style-guide
+    
+    
+>Thunderbird Study</a>) throughout local events in Albania and Kosovo. The study focused on I2P for Windows and Linux operating systems, asking users to complete 5 major tasks in I2P and additionally also another optional task.</p>
+<p>You can read the final I2P Usability Study <a href=https://github.com/uracreative/works/raw/main/I2P/Usability%20Study/I2P%20Usability%20Study.pdf
+    
+    target="_blank" rel="noopener noreferrer"
+>here</a>.</p>
+<h2 id="style-guide">Style Guide</h2>
+<p>As part of this project, we also created an interactive style guide for the I2P project, similar to our past works as part of the Usability Lab. The style guide contains all the necessary elements and assets that make up the I2P brand, categorized in different sections, such as the logo, colors, typography, icons; furthermore components that can be used when designing systems related to I2P and a standalone section about the language used when writing documents/articles/reports on the I2P project.</p>
+<p>Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.</p>
+<p><img src="/images/projects/i2p_image_1.webp" alt="Style Guide website"></p>
+<p>You can see a demo of the style guide website <a href=https://uracreative.github.io/i2p-styleguide
+    
+    target="_blank" rel="noopener noreferrer"
+>here</a> and the portfolio <a href=../../../projects/i2p
+    
+    
+>project</a> on our website.</p>
+<p>We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>OpenTechFund</a> for their support on providing resources for privacy and security related open source projects to thrive and receive help where they need the most.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Open Source Design Summit 2018</title>
+            <link>http://test.ura.design/blog/osd-summit-2018/</link>
+            <pubDate>Fri, 16 Nov 2018 08:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/osd-summit-2018/</guid>
+            <description>During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in the city we are based in, Tirana.
+Open Source Design (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a job board, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.</description>
+            <content type="html"><![CDATA[<p>During the first weekend of November we had the pleasure to facilitate the annual <a href=https://opensourcedesign.net/summit
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design Summit</a> in the city we are based in, Tirana.</p>
+<p><a href=https://opensourcedesign.net/
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design</a> (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a <a href=https://opensourcedesign.net/jobs
+    
+    target="_blank" rel="noopener noreferrer"
+>job board</a>, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.</p>
+<p><img src="/images/blog/osd-logo.webp" alt="Open Source Design logo"></p>
+<p>Open Source Design Summit itself is an annual event where designers, developers and more join to discuss and work towards internal and external Open Source Design related topics. This includes how to improve our involvement in various projects, improve feedback processes, and work in the open</p>
+<p>Together with the Open Source Design community, we at <a href=https://ura.design
+    
+    target="_blank" rel="noopener noreferrer"
+>Ura Design</a> <a href=https://github.com/opensourcedesign/organization/issues/103
+    
+    target="_blank" rel="noopener noreferrer"
+>initiated the discussion</a> on the <a href=https://github.com/opensourcedesign
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design organization repo on GitHub</a> regarding the location of the upcoming Summit and proposed Tirana. While the last edition was held in Berlin, we were convinced it would be a healthy step to have a moving Summit which would not necessarily happen in the usual suspect cities of Europe. Tirana was a good compromise to try this out (we might have been a bit biased though!)
+In the following months, we coordinated our efforts through monthly calls and <a href=https://discourse.opensourcedesign.net/
+    
+    target="_blank" rel="noopener noreferrer"
+>Discourse</a>.</p>
+<h3 id="overview">Overview</h3>
+<h4 id="november-2nd-reception">November 2nd (Reception)</h4>
+<p>We started on the Friday afternoon with a reception gathering at <a href=http://oficina.al
+    
+    target="_blank" rel="noopener noreferrer"
+>Ofiçina</a>, the venue fwe know and love for so many other past events we were involved in, including <a href=https://ura.design/2018/10/20/libocon-2018-visual-identity
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice Conference</a>. The OSD Summit is not close to any big <a href=https://en.wikipedia.org/wiki/Conference
+    
+    target="_blank" rel="noopener noreferrer"
+>conference</a> (yet at least)  but more of a small <a href=https://en.wikipedia.org/wiki/Unconference
+    
+    target="_blank" rel="noopener noreferrer"
+>unconference</a>.</p>
+<p>There were participants from countries as far as <a href=https://en.wikipedia.org/wiki/New_Zealand
+    
+    target="_blank" rel="noopener noreferrer"
+>New Zealand</a>, <a href=https://en.wikipedia.org/wiki/Czech_Republic
+    
+    target="_blank" rel="noopener noreferrer"
+>Czech Republic</a>, <a href=https://en.wikipedia.org/wiki/Germany
+    
+    target="_blank" rel="noopener noreferrer"
+>Germany</a>, <a href=https://en.wikipedia.org/wiki/Kosovo
+    
+    target="_blank" rel="noopener noreferrer"
+>Kosovo</a>.</p>
+<p>During the rather informal gaterhing we spontaneously put up a circle of chairs in the area outside. Did we mention that the weather was fantastic? We even ended up doing many sessions out in the open.</p>
+<p><img src="/images/blog/osd-agenda-sat.webp" alt="Saturday agenda"></p>
+<p>After a round of introductions, we began brainstorming the schedule for the next 2 days, something which has worked well for us in the past edition as well.</p>
+<h4 id="november-3rd-first-meeting-day">November 3rd (First Meeting Day)</h4>
+<p>We officially started the Summit by welcoming everyone and giving an intro to Open Source Design for newcomers that decided to join us in the Summit. Unlike the past Summit, we had a good mix of core contributors and newcomers, so it only made sense to adapt, following up with a short talk by <a href=https://twitter.com/halaszdavid
+    
+    target="_blank" rel="noopener noreferrer"
+>David</a> and <a href=https://twitter.com/terezanovotna_
+    
+    target="_blank" rel="noopener noreferrer"
+>Tereza</a> from <a href=https://redhat.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Red Hat</a> about <a href=https://en.wikipedia.org/wiki/Systems_design
+    
+    target="_blank" rel="noopener noreferrer"
+>Design Systems</a>, and specifically about <a href=https://www.patternfly.org/
+    
+    target="_blank" rel="noopener noreferrer"
+>PatternFly</a>.</p>
+<p><a href=https://upload.wikimedia.org/wikipedia/commons/0/0a/Open_Source_Design_Summit_2018_-_79.webp
+    
+    target="_blank" rel="noopener noreferrer"
+><img src="/images/blog/osd-david-tereza.webp" alt="David and Tereza talk"></a></p>
+<p>Next up we had a very interesting and involving workshop about Cut, Copy &amp; Paste from <a href=https://cameralibre.cc
+    
+    target="_blank" rel="noopener noreferrer"
+>Sam</a>. The workshop was there to teach beginners about the concept of git as a version control system (as designers usually have to work with git too, which is a showstopper for many at first).</p>
+<p><img src="/images/blog/osd-sam-workshop.webp" alt="Sam&amp;rsquo;s workshop"></p>
+<p>After the workshop, there was lunch at 1 PM and the sessions restarted at 2 PM. In the next sessions, we talked about finalizing our <a href=https://en.wikipedia.org/wiki/Manifesto
+    
+    target="_blank" rel="noopener noreferrer"
+>Manifesto</a>, a topic we had been discussing for a long time <a href=https://discourse.opensourcedesign.net/t/open-source-design-manifesto/630
+    
+    target="_blank" rel="noopener noreferrer"
+>at our Discourse forum</a> and we think we finally have a ready-to-go version that will be published soon on the website.</p>
+<p>The following topic was about our upcoming events and where should Open Source Design focus on more, a nice discussion that happened outside, in the warm weather (really, Albania is warm even in November).</p>
+<p><img src="/images/blog/osd-events.webp" alt="Discussing about events"></p>
+<p>The next topic was a sharing round where we shared our knowledge and skills. <a href=https://twitter.com/RenataGegaj
+    
+    target="_blank" rel="noopener noreferrer"
+>Renata</a> from our team shared her Research workflow and showcased Usability Studies we accomplished before, such as <a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Thunderbird</a> and <a href=https://ura.design/projects/i2p
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P</a>. Later, Sam shared some info about the issue of Diffing SVG-s and how difficult it is to process it correctly and with consistent results, because each software tries to do it in their own way.</p>
+<h4 id="november-4th-last-meeting-day">November 4th (Last Meeting Day)</h4>
+<p>The last day started a bit later, which is expected of a Sunday morning
+<img src="/images/blog/osd-agenda-sun.webp" alt="Last day agenda"></p>
+<p>We firstly discussed about the Summit itself and how we could build upon community building intiatives (via local meetups for example). Afterwards we split into two groups, where one worked on the new draft of the Manifesto while the other one discussed about the State of Open Source Design tools.</p>
+<p><img src="/images/blog/osd-whiteboard-sun.webp" alt="Whiteboard"></p>
+<p>We continued talking about ways to build up a budget that Open Source Design can use to extend its activity, changes we would be doing in the Open Source Design website, such as a new theme, the structure of the organisation, the platforms we would use, the politics we would follow, <a href=https://www.wordaz.com/adbusting.html
+    
+    target="_blank" rel="noopener noreferrer"
+>Adbusting</a>, project outreach and how we could onboard new designers into the project.</p>
+<p>Of course we didn&rsquo;t forget to take a group photo from the Summit!</p>
+<p><a href=https://upload.wikimedia.org/wikipedia/commons/5/54/Open_Source_Design_Summit_2018_-_95.webp
+    
+    target="_blank" rel="noopener noreferrer"
+><img src="/images/blog/osd-group-photo.webp" alt="OSD Summit group photo"></a></p>
+<p>Thanks to the support from <a href=https://stickermule.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Stickermule</a>, <a href=https://mozilla.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla</a>, <a href=https://phplist.com
+    
+    target="_blank" rel="noopener noreferrer"
+>phpList</a>, <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Tech Fund</a>, <a href=https://redhat.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Red Hat</a> &amp; <a href=https://nextcloud.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Nextcloud</a> we were able to bring the Summit to Tirana.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>LibreOffice Conference 2018</title>
+            <link>http://test.ura.design/blog/libocon-2018-visual-identity/</link>
+            <pubDate>Sat, 20 Oct 2018 08:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/libocon-2018-visual-identity/</guid>
+            <description>As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the LibreOffice Conference (short LibOCon). The conference is organized by the local Open Labs Hackerspace community, with which we share a lot of values and goals together.
+We were particularly excited to support this year&amp;rsquo;s edition as it would be the first time the local community would host a major Free Software project conference in Tirana, Albania.</description>
+            <content type="html"><![CDATA[<p>As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the <a href=https://libocon.org
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice Conference</a> (short LibOCon). The conference is organized by the local <a href=https://openlabs.cc
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Labs Hackerspace</a> community, with which we share a lot of values and goals together.</p>
+<p>We were particularly excited to support this year&rsquo;s edition as it would be the first time the local community would host a major Free Software project conference in Tirana, Albania. We hope to see more happening outside the usual western spots like Berlin, London and welcome more projects to contribute locally. With <a href=https://libreoffice.org
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice</a> being the most used alternative to proprietary Office software, we were eager to chime in and help out. With more than 130 contributors coming together for 4 days, Tirana became the focus point of everything LibreOffice and Document Freedom related, even the Mayor of Tirana attended. Further, LibOCon was also a great opportunity to invite friends at the <a href=https://opensourcedesign.net/summit
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design Summit</a> in November, held at the same Venue (<a href=http://www.oficina.al/
+    
+    target="_blank" rel="noopener noreferrer"
+>Ofiçina</a>).</p>
+<h2 id="creative-process">Creative Process</h2>
+<p>To create a visual identity for LibOCon 2018, we had to consider two main elements: the <a href=https://en.wikipedia.org/wiki/Clock_Tower%2C_Tirana
+    
+    target="_blank" rel="noopener noreferrer"
+>clock tower</a>, a local element from Tirana, and an element of LibreOffice brand. The most difficult and interesting part of the whole creative process was finding a balance between those two elements.</p>
+<p>Let&rsquo;s start it with the logo. For this year conference, we sketched a monoline icon of the clock tower of the city, inside a hexagonal frame as the logo. The clock tower is one of the most popular and most recognizable symbols of Tirana. It is a part of old buildings ensemble of the city center, and it belongs to the city since the beginning of the 19th century.</p>
+<p><img src="/images/blog/post_libocon_logo.webp" alt="LibOCon Main Logo"></p>
+<p>For the logotype, we used <a href=https://www.fontsquirrel.com/fonts/zilla-slab
+    
+    target="_blank" rel="noopener noreferrer"
+>Zilla Slab</a> [bold] al la <a href=https://en.wikipedia.org/wiki/Aaron_Draplin
+    
+    target="_blank" rel="noopener noreferrer"
+>Aaron Draplin</a> style. We also picked the LibreOffice green and composed it with black and white, to keep the connection with the umbrella brand clear. The [template for the] logo is also easily adapted to next conferences: <em>we can change the city, the year below and replace Tirana clock tower with a certain symbol from the host city</em>.</p>
+<p>Stamps are always closely connected with a certain place and manifest a big event for that place. The idea of the stamp tower came after a brainstorm “how to make an event big”. We see the LibOCon with the importance of a big event not only for the LibreOffice community but even for the city of Tirana. We are working at the local level to make LibreOffice accessible and useful for everyone who works in the public sector. LibOCon 2018 is a big opportunity to show off the benefits of LibreOffice to the actors we are working with.</p>
+<p><img src="/images/blog/libocon_poster_totebag.webp" alt="LibOCon Poster"></p>
+<p>The dates and the venue of the conference are composed in a seal, as they stay for real in postcards. The stamp with the clock tower, the seal of the venue and posters vintage texture make the participants feel like they’re a postcard, as a souvenir from Tirana. The green color of the brand guidelines makes the poster easily identifiable for the community.</p>
+<h2 id="onwards">Onwards</h2>
+<p>As always, you are free to explore and remix the designs of our work. In fact, due to us having a great amount of freedom on this particular project, all LibOCon 2018 designs are licensed under a CC0 license (Public Domain dedication). We hope this will foster more innovative design processes for Free Software and Open Source events.</p>
+<p>We look forward to the next year&rsquo;s LibreOffice Conference in Almería, Spain!</p>
+<p><a href=https://ura.design/projects/libocon
+    
+    target="_blank" rel="noopener noreferrer"
+>Explore this work on our portfolio</a></p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Thunderbird Style Guide and Usability Study</title>
+            <link>http://test.ura.design/blog/thunderbird-style-guide/</link>
+            <pubDate>Thu, 05 Jul 2018 08:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/thunderbird-style-guide/</guid>
+            <description>Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped redesign the Thunderbird Conversations add-on and even now our email infrastructure is powered by ProtonMail and ProtonMail Bridge via Thunderbird.
+Unfortunately, Mozilla moving away from Thunderbird created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird.</description>
+            <content type="html"><![CDATA[<p>Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped <a href=https://github.com/protz/thunderbird-conversations/issues/967
+    
+    target="_blank" rel="noopener noreferrer"
+>redesign the Thunderbird Conversations add-on</a> and even now our email infrastructure is powered by <a href=https://protonmail.com/bridge/
+    
+    target="_blank" rel="noopener noreferrer"
+>ProtonMail and ProtonMail Bridge</a> via Thunderbird.</p>
+<p>Unfortunately, <a href=https://blog.mozilla.org/thunderbird/2017/05/thunderbirds-future-home/
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla moving away from Thunderbird</a> created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird. As a comparison, Firefox latest logo makeovers happened in 2010, 2013 and 2017. Respectively, the last update to the Thunderbird logo and branding was 2010.</p>
+<p>The good news however is that efforts to revitalize Thunderbird have gained momentum again. Monterail have visualized their vision of a new Thunderbird UI, Thunderbird itself has now a <a href=https://twitter.com/ryanleesipes
+    
+    target="_blank" rel="noopener noreferrer"
+>Community Manager, Ryan Sipes</a>, and a new Project Council was recently appointed. <a href=https://twitter.com/elioqoshi/status/972067552846319616
+    
+    target="_blank" rel="noopener noreferrer"
+>We didn&rsquo;t hesitate to jump on board</a>.</p>
+<h2 id="setting-the-stage">Setting the Stage</h2>
+<p>This marked the start of a wonderful collaboration. In Open Source we often times encounter resistance and hesitation to change. It&rsquo;s something we acknowledge and can understand, considering there are contributors who have been involved for years and suddenly someone out of the blue suggests doing a number of changes. We respect that. However the Thunderbird project has been welcoming to suggestions and help, allowing us to enjoy the process thoroughly beyond simply handing off the deliverables.</p>
+<p>To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird. We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Technology Fund</a> for supporting this work towards the Thunderbird project as part of its <a href=https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>Usability Lab</a>.</p>
+<p><img src="/images/projects/thunderbird_logo.webp" alt="Thunderbird Revamped Logo"></p>
+<h2 id="new-logo">New Logo</h2>
+<p>After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a <a href=https://bugzilla.mozilla.org/show_bug.cgi?id&#61;1404648
+    
+    target="_blank" rel="noopener noreferrer"
+>ticket on Bugzilla</a> suggesting to follow Firefox&rsquo; lead and redesign the Thunderbird logo according to the new Photon Design guidelines. Funnily, this coincided with our own experiments on how Thunderbird&rsquo;s logo could be like so we joined the conversation on Bugzilla. We want to thank the great support we got from Ryan Sipes, Thunderbird&rsquo;s Community Manager, who helped facilitate communication with the Thunderbird Community. The new logo will appear in Thunderbird 60.</p>
+<h2 id="usability-study">Usability Study</h2>
+<p>Thunderbird was the first project we conducted a Usability Study on. This was possible due to Renata joining our team recently and expanding upon the services Ura offers support. Renata conducted user interviews during <a href=https://osc.al
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Conference Albania (OSCAL)</a> 2018. The tests were done with 5 testers from different backgrounds, asked to accomplish 9 different tasks. <a href=https://github.com/uracreative/works/raw/main/Thunderbird/Thunderbird%20Usability%20Study.pdf
+    
+    target="_blank" rel="noopener noreferrer"
+>You can read the final Thunderbid Usability Study here</a>.</p>
+<p><img src="/images/projects/thunderbird_1.webp" alt="Thunderbird Usability Research"></p>
+<h2 id="style-guide">Style Guide</h2>
+<p>We talk a lot about style guides as you might have noticed. In fact, recently we wrote an article about why they are so important. Thunderbird is no exception. We developed a full <a href=https://thunderbird.ura.design
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide for Thunderbird</a>, based on the <a href=https://design.firefox.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Photon Design system</a> used by Firefox. As latter is quite extensive (Firefox use cases are way broader than Thunderbird&rsquo;s), we tweaked it to apply in Thunderbird&rsquo;s case. It&rsquo;s a living style guide and has lots of room for improvement in the future. However the next step is to implement all these design decisions. If the style guide describes patterns and guidelines well, but they aren&rsquo;t put into practice, the impact of a style guide is minimal. Hence, we look forward to see those changes be implemented and continue supporting Thunderbird with that task.</p>
+<p>We also create an <a href=https://demo.identihub.co/project/thunderbird#/
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub page</a> where you can easily access the Thunderbird assets.</p>
+<p><img src="/images/projects/thunderbird_2.webp" alt="Thunderbird Style Guide"></p>
+<h2 id="more-to-come">More to come</h2>
+<p>Furthermore, we are helping with the <a href=https://github.com/thundernest/thunderbird-website/issues/31
+    
+    target="_blank" rel="noopener noreferrer"
+>redesign of the Thunderbird website</a> putting the style guide finally into practice as well. If you&rsquo;d like to get involved, reach out to us or just contribute to the GitHub issue!</p>
+<p><a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Explore this work on our portfolio</a></p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Style Guides go Beyond Aesthetics</title>
+            <link>http://test.ura.design/blog/style-guides-go-beyond-aesthetics/</link>
+            <pubDate>Mon, 02 Jul 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/style-guides-go-beyond-aesthetics/</guid>
+            <description>Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym RTFM or &amp;ldquo;Read The Freaking Manual&amp;rdquo;. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?
+A similar stigma often appears in Free Software / Open Source projects as well. The alternative &amp;ldquo;Read the Documentation&amp;rdquo; certainly would ensure that people would give a little more effort before repeating questions.</description>
+            <content type="html"><![CDATA[<p>Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym <strong>RTFM</strong> or &ldquo;<em>Read The Freaking Manual&rdquo;</em>. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?</p>
+<p>A similar stigma often appears in Free Software / Open Source projects as well. The alternative &ldquo;<em>Read the Documentation</em>&rdquo; certainly would ensure that people would give a little more effort before repeating questions. With limited resources it&rsquo;s also understandable that this might be the most sane way for a project maintainer to channel user interactions. However is that by design or due to lack of resources? One could argue that it would make more sense to integrate those &lsquo;user lessons&rsquo; right inside the application instead of a manual or documentation alone.</p>
+<h2 id="manuals-are-no-replacement-for-good-usability">Manuals are no replacement for good Usability</h2>
+<p>Make a great manual and a mediocre application and you might be able to keep a user from running into blockers, however you won&rsquo;t be able to improve their workflow. The user is basically learning an app by heart, not by intuition.</p>
+<p>This is where Usability and User Experience come into play:  An alternative to the traditional manual, created by a researcher or designer instead of an engineer, so to speak.</p>
+<p>Unlike a manual though, a delightful User Experience doesn&rsquo;t ask to be read, it is seamlessly integrated into the application in a human-centric nature. Not the other way around.</p>
+<p>There is a strong connection between Usability and a user&rsquo;s emotional feedback: When an application lacks usability, the amount of time it takes the user to accomplish that task is not only higher, it also brings along  negative forms of feedback such as frustration and impatience. If this happens in the case of privacy-enhancing software, those emotions can quickly turn into fear and breach of trust, putting the stakes higher. At that point, usability is not only a commodity anymore.</p>
+<h2 id="consistency-is-key">Consistency is Key</h2>
+<p>User Experience is shaped by the usage of patterns and aesthetics familiar to the user within the same software. Unsurprisingly, users don&rsquo;t like change. If change and inconsistencies confuse users, we can conclude that consistent design decisions create trust; it feels familiar and the user has witnessed it in the past.</p>
+<p>Facilitating consistency can be done via a range of tools, including Brand Guidelines and a Tone of Voice. As early as 3 years ago, our friends at <a href=https://simplysecure.org/blog/nostalgia-trust-and-brand
+    
+    target="_blank" rel="noopener noreferrer"
+>Simply Secure highlighted the importance of Brand Guidelines in relation to creating user trust</a>.</p>
+<blockquote>
+<p><em>Brand guidelines ensure consistency when many different people are working on a product. This is an important component for building trust with end-users. It&rsquo;s crucial for secure communication projects in particular because lay users can&rsquo;t assess the underlying cryptography. Instead, they assess how trustworthy something is by the user experience, and consistent brand expression is a key part of that. As a counterexample, consider how a sloppily-implemented logo in an email can alert people to a phishing scam by signaling untrustworthiness.</em></p>
+</blockquote>
+<p><strong>Style guides serve as a single source of truth for design decisions and guidelines. They also ensure that a project can be inclusive to diverse contributors, while helping them to communicate with users in one consistent voice throughout the whole range of mediums the project is present on</strong>. Depending on the context, style guides can include various ingredients, including (but not limited to) Brand Guidelines, UI Components and Tone of Voice. A style guide has no specific definition and can vary from use case to use case, so depending on a project&rsquo;s needs, specific parts can be prioritized.</p>
+<h2 id="playing-by-the-rules">Playing by the Rules</h2>
+<p><a href=https://www.sketchapp.com/
+    
+    target="_blank" rel="noopener noreferrer"
+>Sketch</a> revolutionized Prototyping and UX Design years ago. Nowadays <a href=https://www.figma.com/
+    
+    target="_blank" rel="noopener noreferrer"
+>Figma</a> is gaining popularity, being praised by its focus on unified design systems accessible by all members of a project without reinventing components. Figma emphasized the need for consistency and streamlined the design process by integrating it within a powerful design system. It&rsquo;s one of the primary reasons designers are so excited about it.</p>
+<p><img src="/images/blog/IconGridBlurry.webp" alt="Icon Grid Display"></p>
+<p>At the end of the day, style guides serve as a playbook for software creators. They go beyond the debate whether design decisions are justified or not, as long as it&rsquo;s covered within it. They are a single source of truth to help create consistently well designed experiences familiar to the user. It might not be a silver-bullet solution in the short run, but it immensely helps everyone involved be on the same page.</p>
+<h2 id="examples">Examples</h2>
+<p>In the past we have implemented style guides for various projects, including <a href=https://ura.design/projects/tor-style-guide
+    
+    target="_blank" rel="noopener noreferrer"
+>The Tor Project</a>, Thunderbird and <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a>. If you want to know more, we also suggest to read Simply Secure&rsquo;s blog entry on <a href=https://simplysecure.org/blog/style-guide
+    
+    target="_blank" rel="noopener noreferrer"
+>Why Open-Source projects need Style Guides</a>.</p>
+<p>Last but not least, the points touched upon in this article is the very reason we started building <a href=https://identihub.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub</a>. Have a look and try it out yourself!</p>
+<p>If you like to explore the possibility of a style guide for your project, feel free to reach us by <a href=mailto:hello@ura.design
+    target="_blank" 
+    
+>email</a> or <a href=https://twitter.com/uracreative
+    
+    target="_blank" rel="noopener noreferrer"
+>Twitter</a></p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Reproducible Builds Style Guide</title>
+            <link>http://test.ura.design/blog/reproducible-builds-styleguide/</link>
+            <pubDate>Wed, 13 Jun 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/reproducible-builds-styleguide/</guid>
+            <description>Earlier this year, we announced our involvement with Open Tech Fund&amp;rsquo;s Usability Lab, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the announcement on our blog.
+Reproducible Builds has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</description>
+            <content type="html"><![CDATA[<p>Earlier this year, we announced our involvement with <a href=http://opentech.fund/lab/usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Tech Fund&rsquo;s Usability Lab</a>, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the <a href=https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>announcement on our blog.</a></p>
+<p><img src="/images/blog/rb_header.webp" alt="Reproducible Builds Logo"></p>
+<p><a href=https://reproducible-builds.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a> has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
+<p>We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a step further, we met with Holger, a core contributor to the project at this year&rsquo;s FOSDEM. During our conversations we decided to provide a full fledged style guide via the support of OTF&rsquo;s Usability Lab.</p>
+<p>The following weeks consisted of various IRC meetings and iterations on logo proposals which were presented on <a href=https://identihub.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub</a>, our Free Software platform for hosting visual identites and assets. While the logo process has been quite extensive and we had a few delays, we were able to pin down a final logo throughout a selection voted by the community.</p>
+<p>With the logo being decided upon, we had a clear path going forward, implementing the visual identity in a live style guide, inspired from the <a href=https://styleguide.torproject.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Tor style guide</a> we helped set the foundations for in 2016.</p>
+<p><img src="/images/blog/RB_image_1.webp" alt="Colors Section"></p>
+<p>The style guide itself features visuals, assets and components ready to be used in Reproducible Builds projects. Additionally, the style guide is free of any 3rd party trackers (including Google Fonts), external libraries and works also with JavaScript disabled / Tor High Security Mode. We even made sure that the style guide is responsive and should work fine on all resolutions.</p>
+<p>The style guide is now migrated to <a href=https://salsa.debian.org/reproducible-builds/reproducible-styleguide
+    
+    target="_blank" rel="noopener noreferrer"
+>Debian infrastructure</a>, but you can view a <a href=https://uracreative.github.io/reproducible-builds-styleguide/
+    
+    target="_blank" rel="noopener noreferrer"
+>live version on GitHub pages</a>.</p>
+<p>In the coming weeks, the official version will live on <a href=https://reproducible-builds.org/style
+    
+    target="_blank" rel="noopener noreferrer"
+>https://reproducible-builds.org/style</a></p>
+<h3 id="identihub">Identihub</h3>
+<p>While a live style guide is an ideal solution to offer powerful guidelines in one place, creating an Identihub page is an accessible alternative which can be deployed right away without too much hassle.</p>
+<p>There you can also find the <a href=https://demo.identihub.co/project/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide assets</a> where Identihub should make it easier to link, share and convert them.</p>
+<p>Also head over to our <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>portfolio page</a> of Reproducible Builds!</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Ura is now part of Open Tech Fund’s Usability Lab</title>
+            <link>http://test.ura.design/blog/ura-now-part-open-tech-funds-usability-lab/</link>
+            <pubDate>Mon, 12 Mar 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/ura-now-part-open-tech-funds-usability-lab/</guid>
+            <description>Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab.
+The Usability Lab aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open ­source circumvention and digital security tools. There are many open ­source software projects that aim to help people around the world – activists, journalists, and everyday citizens – communicate in privacy and security.</description>
+            <content type="html"><![CDATA[<p>Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">Open Tech Fund’s Usability Lab</a>.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/OTF.webp" alt="OTF logo"><br />
+</div>
+<div class="two spacing"></div>
+<p>The <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">Usability Lab</a> aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open ­source circumvention and digital security tools. There are many open ­source software projects that aim to help people around the world – activists, journalists, and everyday citizens – communicate in privacy and security.<br />
+Unfortunately, few of these software­ development teams have the capacity or expertise in-house to make tools that are truly usable. These usability challenges hamper tool adoption, or may cause misunderstandings for users about tool functionalities, and subsequently may give users a false sense of security.</p>
+<p>To provide the above services, <a href="https://www.opentech.fund/" target="_blank">Open Tech Fund</a> (OTF) is working together with four different Usability Lab partners (among them also Simply Secure with whom we have collaborated in the past). As Ura we are proud to be involved in the Usability Lab and contribute to the improvement and accessibility of Internet Freedom projects.</p>
+<hr>
+<p><strong>About Open Tech Fund</strong></p>
+<p>The <a href="https://www.opentech.fund/" target="_blank">Open Technology Fund</a> utilizes available funds to support Internet freedom projects that empower world citizens to have access to modern communication channels that are free of restrictions, and allow them to communicate without fear of repressive censorship or surveillance.</p>
+<hr>
+<p><strong>About Usability Lab Services</strong></p>
+<p>In addition to Secure Usability Audits, which will analyze and identify any pitfalls that might make it difficult for users under threat to use a tool, the Lab will be offering these additional services:</p>
+<ul>
+<li><strong>Secure Usability and User Experience (UX) Consultations</strong>, to connect tools with Usability and UX experts to help address a specific gap in expertise, or to work on solving the hard and specific challenges facing digital security tools.</li>
+<li><strong>Secure Usability Testing</strong>, which is similar to a Usability Audit, but limited in scope to a particular area or aspect of the tool.</li>
+<li><strong>User Research and User Studies</strong>, to help tools better understand the needs of their users, and how to articulate those needs in the design of their tools.</li>
+<li>Assistance in secure <strong>UX Design</strong>, to help projects to design their tool in a manner that puts their user’s needs, usability, and security first.</li>
+<li>Assistance developing secure usable <strong>Style Guides</strong>, which outline user interface and graphical elements, rules and guidelines to ensure a cohesive and consistent user experience across different aspects of a tool.</li>
+</ul>
+<p>If you are interested to request help from the Usability Lab, you can <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">file a request via OTF</a>.<br />If you are specifically requesting Ura’s services and believe that your project or tool and meets the criteria, you can also contact us directly and we will help you frame a scope of work proposal.</p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Inkscape Workshop in Tirana</title>
+            <link>http://test.ura.design/blog/inkscape-workshop-tirana/</link>
+            <pubDate>Fri, 23 Feb 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/inkscape-workshop-tirana/</guid>
+            <description>Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania.</description>
+            <content type="html"><![CDATA[<p>Quite some time has passed since we first got in touch with the <a href="http://opensourcedesign.net/" target="_blank">Open Source Design community</a>. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania. We were happy to bring young designers in town more information about Open Source Design and the efforts the community is putting into improving Free Software/ Open Source projects.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-1.webp" alt="During the workshop"><br />
+<i>During the workshop</i>
+</div>
+<div class="two spacing"></div>
+<p>Consequently, we organized another <a href="https://discourse.opensourcedesign.net/t/tirana-albania/573/1" target="_blank">Design workshop</a> at the local <a href="https://openlabs.cc/en/" target="_blank">Open Labs Hackerspace</a>, this time with a deep dive into Inkscape. While there have been a few designers who worked with Adobe tools, everyone was new to Inkscape, so we went all the way from explaining basic tools, to designing a poster and making it production ready. The attendees were free to pick a main topic for their poster and design it themselves. Towards the end things were becoming interesting as people debated on colors, typography and other design rules.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-2.webp" alt="During the workshop"><br />
+<i>During the workshop</i>
+</div>
+<div class="two spacing"></div>
+<p>The workshop was great fun and we learnt new things as well! Who said that giving workshops does not teach you something too? We are looking forward to host another workshop soon.</p>
+<p>[Photos during the event] <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY SA 4.0</a> Andis Rado</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-3.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-4.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-5.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Inkscape-Workshop-6.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Ura at FOSDEM 2018</title>
+            <link>http://test.ura.design/blog/ura-fosdem-2018/</link>
+            <pubDate>Fri, 09 Feb 2018 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/ura-fosdem-2018/</guid>
+            <description>During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one). Just like at CCC, we strive to be at events which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time.</description>
+            <content type="html"><![CDATA[<p>During last weekend the Ura team traveled to Brussels, Belgium to attend <a href="https://fosdem.org/2018/" target="_blank">FOSDEM</a>. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one).  Just like at <a href="https://dev.ura.design/blogposts/2018/01/15/chaos-communication-congress-2017.html" target="_blank">CCC</a>, we strive to be at events  which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/OSD.webp" alt="OSD booth at FOSDEM"><br />
+<i>Open Source Design infobooth – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>As part of the <a href="http://opensourcedesign.net/" target="_blank">Open Source Design community</a>, you could find us at the respective infobooth on both days. Members of our team were at the both along with other fellow designers. Together, we emphasized the importance of usability and user centered design in Open Source Projects. At the “Design Clinic” session, attendees could come to us and showcase us their project. By doing so, designers could advise them on the improvements their design would benefit from.</p>
+<p>At the Open Source Design booth, apart talking about our Design philosophy, we also had the chance to tell people about the way we operate and why we are focused on Free and Open Source Software,  We were also happy to introduce “Logobridge” our side-project which helps us contribute back to the community as a whole.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Elio-FOSDEM2018.webp" alt="Elio during his presentation at FOSDEM 2018"><br />
+<i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>On the 2nd day, Elio, the founder of Ura presented <a href="https://identihub.co/" target="_blank">Identihub</a>. He presented a live <a href="https://demo.identihub.co/" target="_blank">demo</a> of the latest version we are launching. During his presentation all attendees had the chance to watch in real time how they could host their visual assets and how to use some of its features, like format conversion of a certain file. Elio emphasized the importance of SVG as the “middleman” between developers and designers and how exciting it can be if in the future we would be able to have a similar version control powered by Git which would be tailored for designers and developers alike.</p>
+<p>Further the attendees were introduced to more technical details of the project. Identihub development and discussion happen on GitHub and contributions from everyone are welcomed. Having said that, everyone who is willing to contribute to the project can do so by either contributing with patches, reporting bugs, suggesting usability improvements or creating mockups. Last but not least you can support the Identihub development financially by signing up for a monthly contribution at our dedicated Patreon.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="/images/blog/Elio-Identihub.webp" alt="Elio during his presentation about Identihub"><br />
+<i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>The feedback we received was great! Among others, we are happy to have gone the AGPL route as it ensures  full Free Software freedom throughout the journey of Identihub. Unfortunately there were a few technical problems with Elio’s talk recording so we will update you once we have updates.</p>
+<p>Another wonderful experience for Ura at the largest Open Source conference in Europe.<br />
+Looking forward at the next edition with more interesting projects and more <strong>Open Source Design!</strong></p>
+]]></content>
+        </item>
+        
+        <item>
+            <title>Hosting the first Open Source Design Workshop in Tirana</title>
+            <link>http://test.ura.design/blog/open-source-design-workshop-open-labs-hackerspace-tirana/</link>
+            <pubDate>Sat, 11 Feb 2017 12:00:00 +0200</pubDate>
+            
+            <guid>http://test.ura.design/blog/open-source-design-workshop-open-labs-hackerspace-tirana/</guid>
+            <description>When we started our Patreon campaign we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field.</description>
+            <content type="html"><![CDATA[<p>When we started our <a href="https://www.patreon.com/ura" target="blank">Patreon campaign</a> we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field. We quickly understood that they have many questions about the usage of free open source tools in the process of designing for their needs.<br /> With this in mind it was clear that that we definitely need to educate the new generation of designers through workshops and talks about our philosophy. Without further delay we started organizing the first Open Source Design workshop at <a href="https://openlabs.cc/" target="blank">Open Labs hackerspace in Tirana</a>, home of the open source community in Albania.</p>
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-1.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p>A room full of young designers was the best first positive feedback from the initiative. Youngsters are the best audience for us since we hope to find the next designer(s) in the room that will work based on the open source design ethics and not the way the proprietary market imposes.
+During the presentation the participants had the opportunity to:
+<ul>
+<li>learn the definition of open source design;</li>
+<li>understand the importance of working with open source tools;</li>
+<li>ways to use GIMP and Inkscape, two of the most used free open source design tools, in an effective and productive way;</li>
+<li>preparation of print-ready files using open source tools.</li>
+</ul>
+</p>
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-2.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p>In conclusion: it was a great first step in educating the next generation of visual designers about the values designing in the open. We definitely need more of your <a href="https://www.patreon.com/ura" target="blank">support though Patreon</a> to host even more workshops not only in Albania, but also other countries.<br /> Interested in the next events? Visit <a href="/events" target="blank">this dedicated page</a> from time to time, or follow us on Twitter.
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-3.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-4.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-5.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="/images/blog/workshop-7.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p><i>Photos: <a href="http://andisrado.com" target="blank">Andis Rado</a>, (Creative Commons – Attribution-ShareAlike 4.0 International)</i></p>
+]]></content>
+        </item>
+        
+    </channel>
+</rss>

public/blog/inkscape-workshop-tirana/index.html

@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="Mariana Balla" />
+<meta name="description"
+  content="Quite some time has passed since we first got in touch with the Open Source Design community. While …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Inkscape, Open Source Design, Workshop" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/inkscape-workshop-tirana/" />
+
+
+<title>
+   Inkscape Workshop in Tirana :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Inkscape Workshop in Tirana">
+<meta itemprop="description" content="Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania."><meta itemprop="datePublished" content="2018-02-23T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="252"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Inkscape,Open Source Design,Workshop," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Inkscape Workshop in Tirana"/>
+<meta name="twitter:description" content="Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania."/>
+  
+
+<meta property="article:published_time" content="2018-02-23 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/Inkscape-Workshop-1-thumb.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Inkscape Workshop in Tirana</h1>
+
+            <p>by 
+                
+                <span class="ms-5"><time datetime="Feb 23, 2018">Feb 23, 2018</time></span>
+                <span class="ms-5">2 minutes</span><span class="ms-5">252 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Quite some time has passed since we first got in touch with the <a href="http://opensourcedesign.net/" target="_blank">Open Source Design community</a>. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania. We were happy to bring young designers in town more information about Open Source Design and the efforts the community is putting into improving Free Software/ Open Source projects.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-1.webp" alt="During the workshop"><br />
+<i>During the workshop</i>
+</div>
+<div class="two spacing"></div>
+<p>Consequently, we organized another <a href="https://discourse.opensourcedesign.net/t/tirana-albania/573/1" target="_blank">Design workshop</a> at the local <a href="https://openlabs.cc/en/" target="_blank">Open Labs Hackerspace</a>, this time with a deep dive into Inkscape. While there have been a few designers who worked with Adobe tools, everyone was new to Inkscape, so we went all the way from explaining basic tools, to designing a poster and making it production ready. The attendees were free to pick a main topic for their poster and design it themselves. Towards the end things were becoming interesting as people debated on colors, typography and other design rules.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-2.webp" alt="During the workshop"><br />
+<i>During the workshop</i>
+</div>
+<div class="two spacing"></div>
+<p>The workshop was great fun and we learnt new things as well! Who said that giving workshops does not teach you something too? We are looking forward to host another workshop soon.</p>
+<p>[Photos during the event] <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY SA 4.0</a> Andis Rado</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-3.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-4.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-5.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Inkscape-Workshop-6.webp" alt="During the workshop"><br />
+</div>
+<div class="two spacing"></div>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/inkscape">Inkscape</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/workshop">Workshop</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-02-23 11:00">2018-02-23 11:00</time>
+                , last updated on
+                <time datetime="2018-02-23 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/ura-now-part-open-tech-funds-usability-lab/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Ura is now part of Open Tech Fund’s Usability Lab</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/ura-fosdem-2018/">
+                        <span class="button__text">Ura at FOSDEM 2018</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/introducing-logobridge/index.html

@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="At Ura we have been constantly working with open source projects to get their branding up to speed. …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Logo, Public Domain, Open Source Design, Service" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/introducing-logobridge/" />
+
+
+<title>
+   Introducing Logobridge :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Introducing Logobridge">
+<meta itemprop="description" content="At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build Logobridge, an open source collection of public domain logos anyone can use for their projects for free: https://logobridge."><meta itemprop="datePublished" content="2019-05-07T18:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="291"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Logo,Public Domain,Open Source Design,Service," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Introducing Logobridge"/>
+<meta name="twitter:description" content="At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build Logobridge, an open source collection of public domain logos anyone can use for their projects for free: https://logobridge."/>
+  
+
+<meta property="article:published_time" content="2019-05-07 18:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/logobridge-post.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Introducing Logobridge</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="May 7, 2019">May 7, 2019</time></span>
+                <span class="ms-5">2 minutes</span><span class="ms-5">291 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build <a href=https://logobridge.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Logobridge</a>, an open source collection of public domain logos anyone can use for their projects for free: <a href=https://logobridge.co
+    
+    target="_blank" rel="noopener noreferrer"
+>https://logobridge.co</a></p>
+<p><img src="http://test.ura.design/images/blog/logobridge.webp" alt="Logobridge"></p>
+<p>All logos are available in their glyph form and you can tweak or adapt them to your needs, as their <a href=https://creativecommons.org/share-your-work/public-domain/cc0/
+    
+    target="_blank" rel="noopener noreferrer"
+>CC0 Public Domain</a> dedication allows basically any usage. Of course launching a product with a public domain logo might not be suitable for a product release so you can also specify a price you are willing to pay and we will design a logo for you, The great thing? From the proceeds we also will support the <a href=https://opencollective.com/opensourcedesign
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design collective</a>, going towards community outreach and fostering design initiatives in open source.</p>
+<p><img src="http://test.ura.design/images/blog/logobridge-scrot.webp" alt="Logobridge Logos"></p>
+<p>We hope to add new logos every month and grow the collection of public domain logos. With the amount of unappreciated logo drafts we have lying on our hard drives, we don&rsquo;t think that&rsquo;s going to be hard to pull through. We worked on Logobridge since 2016 but never got it off the ground properly like now. We hope that it will prove more useful to people now. Logobridge is also available in <a href=https://logobridge.co/de
+    
+    target="_blank" rel="noopener noreferrer"
+>German</a> as of now.</p>
+<p>Of course Logobridge itself is open source and powered by <a href=https://jekyllrb.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Jekyll</a>. You can find the repo on <a href=https://github.com/uracreative/logobridge
+    
+    target="_blank" rel="noopener noreferrer"
+>GitHub</a>.</p>
+<p>Want to contribute with a logo one of your past clients didn&rsquo;t appreciate enough? File a Pull Request or an <a href=https://github.com/uracreative/logobridge/issues/new
+    
+    target="_blank" rel="noopener noreferrer"
+>Issue</a> on GitHub and we can include it in the upcoming month.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/logo">Logo</a></span><span class="tag"><a href="http://test.ura.design/tags/public-domain">Public Domain</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/service">Service</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2019-05-07 18:00">2019-05-07 18:00</time>
+                , last updated on
+                <time datetime="2019-05-07 18:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/https-everywhere-redesign/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">HTTPS Everywhere Redesign</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/underexposed-2019/">
+                        <span class="button__text">Underexposed 2019</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/libocon-2018-visual-identity/index.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="Kristi Çunga" />
+<meta name="description"
+  content="As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Visual Identity, Conference, Open Source Design, LibreOffice" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/libocon-2018-visual-identity/" />
+
+
+<title>
+   LibreOffice Conference 2018 :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="LibreOffice Conference 2018">
+<meta itemprop="description" content="As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the LibreOffice Conference (short LibOCon). The conference is organized by the local Open Labs Hackerspace community, with which we share a lot of values and goals together.
+We were particularly excited to support this year&rsquo;s edition as it would be the first time the local community would host a major Free Software project conference in Tirana, Albania."><meta itemprop="datePublished" content="2018-10-20T08:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="596"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Visual Identity,Conference,Open Source Design,LibreOffice," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="LibreOffice Conference 2018"/>
+<meta name="twitter:description" content="As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the LibreOffice Conference (short LibOCon). The conference is organized by the local Open Labs Hackerspace community, with which we share a lot of values and goals together.
+We were particularly excited to support this year&rsquo;s edition as it would be the first time the local community would host a major Free Software project conference in Tirana, Albania."/>
+  
+
+<meta property="article:published_time" content="2018-10-20 08:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/thumb_libocon.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">LibreOffice Conference 2018</h1>
+
+            <p>by 
+                
+                <span class="ms-5"><time datetime="Oct 20, 2018">Oct 20, 2018</time></span>
+                <span class="ms-5">3 minutes</span><span class="ms-5">596 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the <a href=https://libocon.org
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice Conference</a> (short LibOCon). The conference is organized by the local <a href=https://openlabs.cc
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Labs Hackerspace</a> community, with which we share a lot of values and goals together.</p>
+<p>We were particularly excited to support this year&rsquo;s edition as it would be the first time the local community would host a major Free Software project conference in Tirana, Albania. We hope to see more happening outside the usual western spots like Berlin, London and welcome more projects to contribute locally. With <a href=https://libreoffice.org
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice</a> being the most used alternative to proprietary Office software, we were eager to chime in and help out. With more than 130 contributors coming together for 4 days, Tirana became the focus point of everything LibreOffice and Document Freedom related, even the Mayor of Tirana attended. Further, LibOCon was also a great opportunity to invite friends at the <a href=https://opensourcedesign.net/summit
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design Summit</a> in November, held at the same Venue (<a href=http://www.oficina.al/
+    
+    target="_blank" rel="noopener noreferrer"
+>Ofiçina</a>).</p>
+<h2 id="creative-process">Creative Process<a class="anchor-tag" href="#creative-process">#</a></h2>
+<p>To create a visual identity for LibOCon 2018, we had to consider two main elements: the <a href=https://en.wikipedia.org/wiki/Clock_Tower%2C_Tirana
+    
+    target="_blank" rel="noopener noreferrer"
+>clock tower</a>, a local element from Tirana, and an element of LibreOffice brand. The most difficult and interesting part of the whole creative process was finding a balance between those two elements.</p>
+<p>Let&rsquo;s start it with the logo. For this year conference, we sketched a monoline icon of the clock tower of the city, inside a hexagonal frame as the logo. The clock tower is one of the most popular and most recognizable symbols of Tirana. It is a part of old buildings ensemble of the city center, and it belongs to the city since the beginning of the 19th century.</p>
+<p><img src="http://test.ura.design/images/blog/post_libocon_logo.webp" alt="LibOCon Main Logo"></p>
+<p>For the logotype, we used <a href=https://www.fontsquirrel.com/fonts/zilla-slab
+    
+    target="_blank" rel="noopener noreferrer"
+>Zilla Slab</a> [bold] al la <a href=https://en.wikipedia.org/wiki/Aaron_Draplin
+    
+    target="_blank" rel="noopener noreferrer"
+>Aaron Draplin</a> style. We also picked the LibreOffice green and composed it with black and white, to keep the connection with the umbrella brand clear. The [template for the] logo is also easily adapted to next conferences: <em>we can change the city, the year below and replace Tirana clock tower with a certain symbol from the host city</em>.</p>
+<p>Stamps are always closely connected with a certain place and manifest a big event for that place. The idea of the stamp tower came after a brainstorm “how to make an event big”. We see the LibOCon with the importance of a big event not only for the LibreOffice community but even for the city of Tirana. We are working at the local level to make LibreOffice accessible and useful for everyone who works in the public sector. LibOCon 2018 is a big opportunity to show off the benefits of LibreOffice to the actors we are working with.</p>
+<p><img src="http://test.ura.design/images/blog/libocon_poster_totebag.webp" alt="LibOCon Poster"></p>
+<p>The dates and the venue of the conference are composed in a seal, as they stay for real in postcards. The stamp with the clock tower, the seal of the venue and posters vintage texture make the participants feel like they’re a postcard, as a souvenir from Tirana. The green color of the brand guidelines makes the poster easily identifiable for the community.</p>
+<h2 id="onwards">Onwards<a class="anchor-tag" href="#onwards">#</a></h2>
+<p>As always, you are free to explore and remix the designs of our work. In fact, due to us having a great amount of freedom on this particular project, all LibOCon 2018 designs are licensed under a CC0 license (Public Domain dedication). We hope this will foster more innovative design processes for Free Software and Open Source events.</p>
+<p>We look forward to the next year&rsquo;s LibreOffice Conference in Almería, Spain!</p>
+<p><a href=https://ura.design/projects/libocon
+    
+    target="_blank" rel="noopener noreferrer"
+>Explore this work on our portfolio</a></p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/visual-identity">Visual Identity</a></span><span class="tag"><a href="http://test.ura.design/tags/conference">Conference</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/libreoffice">LibreOffice</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-10-20 08:00">2018-10-20 08:00</time>
+                , last updated on
+                <time datetime="2018-10-20 08:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/osd-summit-2018/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Open Source Design Summit 2018</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/thunderbird-style-guide/">
+                        <span class="button__text">Thunderbird Style Guide and Usability Study</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/open-source-design-workshop-open-labs-hackerspace-tirana/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="Redon Skikuli" />
+<meta name="description"
+  content="When we started our Patreon campaign we had a simple vision: to use the financial resources of our …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, open source design, workshop, ux design" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/open-source-design-workshop-open-labs-hackerspace-tirana/" />
+
+
+<title>
+   Hosting the first Open Source Design Workshop in Tirana :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Hosting the first Open Source Design Workshop in Tirana">
+<meta itemprop="description" content="When we started our Patreon campaign we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field."><meta itemprop="datePublished" content="2017-02-11T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="335"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="open source design,workshop,ux design," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Hosting the first Open Source Design Workshop in Tirana"/>
+<meta name="twitter:description" content="When we started our Patreon campaign we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field."/>
+  
+
+<meta property="article:published_time" content="2017-02-11 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/osd_event.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Hosting the first Open Source Design Workshop in Tirana</h1>
+
+            <p>by 
+                
+                <span class="ms-5"><time datetime="Feb 11, 2017">Feb 11, 2017</time></span>
+                <span class="ms-5">2 minutes</span><span class="ms-5">335 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>When we started our <a href="https://www.patreon.com/ura" target="blank">Patreon campaign</a> we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field. We quickly understood that they have many questions about the usage of free open source tools in the process of designing for their needs.<br /> With this in mind it was clear that that we definitely need to educate the new generation of designers through workshops and talks about our philosophy. Without further delay we started organizing the first Open Source Design workshop at <a href="https://openlabs.cc/" target="blank">Open Labs hackerspace in Tirana</a>, home of the open source community in Albania.</p>
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-1.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p>A room full of young designers was the best first positive feedback from the initiative. Youngsters are the best audience for us since we hope to find the next designer(s) in the room that will work based on the open source design ethics and not the way the proprietary market imposes.
+During the presentation the participants had the opportunity to:
+<ul>
+<li>learn the definition of open source design;</li>
+<li>understand the importance of working with open source tools;</li>
+<li>ways to use GIMP and Inkscape, two of the most used free open source design tools, in an effective and productive way;</li>
+<li>preparation of print-ready files using open source tools.</li>
+</ul>
+</p>
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-2.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p>In conclusion: it was a great first step in educating the next generation of visual designers about the values designing in the open. We definitely need more of your <a href="https://www.patreon.com/ura" target="blank">support though Patreon</a> to host even more workshops not only in Albania, but also other countries.<br /> Interested in the next events? Visit <a href="http://test.ura.design/events" target="blank">this dedicated page</a> from time to time, or follow us on Twitter.
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-3.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-4.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-5.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<div class="large-12 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/workshop-7.webp" alt="workshop">
+</div>
+<div class="two spacing"></div>
+<p><i>Photos: <a href="http://andisrado.com" target="blank">Andis Rado</a>, (Creative Commons – Attribution-ShareAlike 4.0 International)</i></p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/open-source-design">open source design</a></span><span class="tag"><a href="http://test.ura.design/tags/workshop">workshop</a></span><span class="tag"><a href="http://test.ura.design/tags/ux-design">ux design</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2017-02-11 11:00">2017-02-11 11:00</time>
+                , last updated on
+                <time datetime="2017-02-11 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/ura-fosdem-2018/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Ura at FOSDEM 2018</span>
+                    </a>
+                </span>
+                
+    
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/osd-summit-2018/index.html

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="During the first weekend of November we had the pleasure to facilitate the annual Open Source Design …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Meeting, Unconference, Open Source Design, Software" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/osd-summit-2018/" />
+
+
+<title>
+   Open Source Design Summit 2018 :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Open Source Design Summit 2018">
+<meta itemprop="description" content="During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in the city we are based in, Tirana.
+Open Source Design (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a job board, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source."><meta itemprop="datePublished" content="2018-11-16T08:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="812"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Meeting,Unconference,Open Source Design,Software," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Open Source Design Summit 2018"/>
+<meta name="twitter:description" content="During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in the city we are based in, Tirana.
+Open Source Design (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a job board, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source."/>
+  
+
+<meta property="article:published_time" content="2018-11-16 08:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/thumb_osd.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Open Source Design Summit 2018</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Nov 16, 2018">Nov 16, 2018</time></span>
+                <span class="ms-5">4 minutes</span><span class="ms-5">812 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>During the first weekend of November we had the pleasure to facilitate the annual <a href=https://opensourcedesign.net/summit
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design Summit</a> in the city we are based in, Tirana.</p>
+<p><a href=https://opensourcedesign.net/
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design</a> (short OSD) is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. The community writes articles, runs a <a href=https://opensourcedesign.net/jobs
+    
+    target="_blank" rel="noopener noreferrer"
+>job board</a>, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.</p>
+<p><img src="http://test.ura.design/images/blog/osd-logo.webp" alt="Open Source Design logo"></p>
+<p>Open Source Design Summit itself is an annual event where designers, developers and more join to discuss and work towards internal and external Open Source Design related topics. This includes how to improve our involvement in various projects, improve feedback processes, and work in the open</p>
+<p>Together with the Open Source Design community, we at <a href=https://ura.design
+    
+    target="_blank" rel="noopener noreferrer"
+>Ura Design</a> <a href=https://github.com/opensourcedesign/organization/issues/103
+    
+    target="_blank" rel="noopener noreferrer"
+>initiated the discussion</a> on the <a href=https://github.com/opensourcedesign
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Design organization repo on GitHub</a> regarding the location of the upcoming Summit and proposed Tirana. While the last edition was held in Berlin, we were convinced it would be a healthy step to have a moving Summit which would not necessarily happen in the usual suspect cities of Europe. Tirana was a good compromise to try this out (we might have been a bit biased though!)
+In the following months, we coordinated our efforts through monthly calls and <a href=https://discourse.opensourcedesign.net/
+    
+    target="_blank" rel="noopener noreferrer"
+>Discourse</a>.</p>
+<h3 id="overview">Overview<a class="anchor-tag" href="#overview">#</a></h3>
+<h4 id="november-2nd-reception">November 2nd (Reception)<a class="anchor-tag" href="#november-2nd-reception">#</a></h4>
+<p>We started on the Friday afternoon with a reception gathering at <a href=http://oficina.al
+    
+    target="_blank" rel="noopener noreferrer"
+>Ofiçina</a>, the venue fwe know and love for so many other past events we were involved in, including <a href=https://ura.design/2018/10/20/libocon-2018-visual-identity
+    
+    target="_blank" rel="noopener noreferrer"
+>LibreOffice Conference</a>. The OSD Summit is not close to any big <a href=https://en.wikipedia.org/wiki/Conference
+    
+    target="_blank" rel="noopener noreferrer"
+>conference</a> (yet at least)  but more of a small <a href=https://en.wikipedia.org/wiki/Unconference
+    
+    target="_blank" rel="noopener noreferrer"
+>unconference</a>.</p>
+<p>There were participants from countries as far as <a href=https://en.wikipedia.org/wiki/New_Zealand
+    
+    target="_blank" rel="noopener noreferrer"
+>New Zealand</a>, <a href=https://en.wikipedia.org/wiki/Czech_Republic
+    
+    target="_blank" rel="noopener noreferrer"
+>Czech Republic</a>, <a href=https://en.wikipedia.org/wiki/Germany
+    
+    target="_blank" rel="noopener noreferrer"
+>Germany</a>, <a href=https://en.wikipedia.org/wiki/Kosovo
+    
+    target="_blank" rel="noopener noreferrer"
+>Kosovo</a>.</p>
+<p>During the rather informal gaterhing we spontaneously put up a circle of chairs in the area outside. Did we mention that the weather was fantastic? We even ended up doing many sessions out in the open.</p>
+<p><img src="http://test.ura.design/images/blog/osd-agenda-sat.webp" alt="Saturday agenda"></p>
+<p>After a round of introductions, we began brainstorming the schedule for the next 2 days, something which has worked well for us in the past edition as well.</p>
+<h4 id="november-3rd-first-meeting-day">November 3rd (First Meeting Day)<a class="anchor-tag" href="#november-3rd-first-meeting-day">#</a></h4>
+<p>We officially started the Summit by welcoming everyone and giving an intro to Open Source Design for newcomers that decided to join us in the Summit. Unlike the past Summit, we had a good mix of core contributors and newcomers, so it only made sense to adapt, following up with a short talk by <a href=https://twitter.com/halaszdavid
+    
+    target="_blank" rel="noopener noreferrer"
+>David</a> and <a href=https://twitter.com/terezanovotna_
+    
+    target="_blank" rel="noopener noreferrer"
+>Tereza</a> from <a href=https://redhat.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Red Hat</a> about <a href=https://en.wikipedia.org/wiki/Systems_design
+    
+    target="_blank" rel="noopener noreferrer"
+>Design Systems</a>, and specifically about <a href=https://www.patternfly.org/
+    
+    target="_blank" rel="noopener noreferrer"
+>PatternFly</a>.</p>
+<p><a href=https://upload.wikimedia.org/wikipedia/commons/0/0a/Open_Source_Design_Summit_2018_-_79.webp
+    
+    target="_blank" rel="noopener noreferrer"
+><img src="http://test.ura.design/images/blog/osd-david-tereza.webp" alt="David and Tereza talk"></a></p>
+<p>Next up we had a very interesting and involving workshop about Cut, Copy &amp; Paste from <a href=https://cameralibre.cc
+    
+    target="_blank" rel="noopener noreferrer"
+>Sam</a>. The workshop was there to teach beginners about the concept of git as a version control system (as designers usually have to work with git too, which is a showstopper for many at first).</p>
+<p><img src="http://test.ura.design/images/blog/osd-sam-workshop.webp" alt="Sam&amp;rsquo;s workshop"></p>
+<p>After the workshop, there was lunch at 1 PM and the sessions restarted at 2 PM. In the next sessions, we talked about finalizing our <a href=https://en.wikipedia.org/wiki/Manifesto
+    
+    target="_blank" rel="noopener noreferrer"
+>Manifesto</a>, a topic we had been discussing for a long time <a href=https://discourse.opensourcedesign.net/t/open-source-design-manifesto/630
+    
+    target="_blank" rel="noopener noreferrer"
+>at our Discourse forum</a> and we think we finally have a ready-to-go version that will be published soon on the website.</p>
+<p>The following topic was about our upcoming events and where should Open Source Design focus on more, a nice discussion that happened outside, in the warm weather (really, Albania is warm even in November).</p>
+<p><img src="http://test.ura.design/images/blog/osd-events.webp" alt="Discussing about events"></p>
+<p>The next topic was a sharing round where we shared our knowledge and skills. <a href=https://twitter.com/RenataGegaj
+    
+    target="_blank" rel="noopener noreferrer"
+>Renata</a> from our team shared her Research workflow and showcased Usability Studies we accomplished before, such as <a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Thunderbird</a> and <a href=https://ura.design/projects/i2p
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P</a>. Later, Sam shared some info about the issue of Diffing SVG-s and how difficult it is to process it correctly and with consistent results, because each software tries to do it in their own way.</p>
+<h4 id="november-4th-last-meeting-day">November 4th (Last Meeting Day)<a class="anchor-tag" href="#november-4th-last-meeting-day">#</a></h4>
+<p>The last day started a bit later, which is expected of a Sunday morning
+<img src="http://test.ura.design/images/blog/osd-agenda-sun.webp" alt="Last day agenda"></p>
+<p>We firstly discussed about the Summit itself and how we could build upon community building intiatives (via local meetups for example). Afterwards we split into two groups, where one worked on the new draft of the Manifesto while the other one discussed about the State of Open Source Design tools.</p>
+<p><img src="http://test.ura.design/images/blog/osd-whiteboard-sun.webp" alt="Whiteboard"></p>
+<p>We continued talking about ways to build up a budget that Open Source Design can use to extend its activity, changes we would be doing in the Open Source Design website, such as a new theme, the structure of the organisation, the platforms we would use, the politics we would follow, <a href=https://www.wordaz.com/adbusting.html
+    
+    target="_blank" rel="noopener noreferrer"
+>Adbusting</a>, project outreach and how we could onboard new designers into the project.</p>
+<p>Of course we didn&rsquo;t forget to take a group photo from the Summit!</p>
+<p><a href=https://upload.wikimedia.org/wikipedia/commons/5/54/Open_Source_Design_Summit_2018_-_95.webp
+    
+    target="_blank" rel="noopener noreferrer"
+><img src="http://test.ura.design/images/blog/osd-group-photo.webp" alt="OSD Summit group photo"></a></p>
+<p>Thanks to the support from <a href=https://stickermule.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Stickermule</a>, <a href=https://mozilla.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla</a>, <a href=https://phplist.com
+    
+    target="_blank" rel="noopener noreferrer"
+>phpList</a>, <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Tech Fund</a>, <a href=https://redhat.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Red Hat</a> &amp; <a href=https://nextcloud.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Nextcloud</a> we were able to bring the Summit to Tirana.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/meeting">Meeting</a></span><span class="tag"><a href="http://test.ura.design/tags/unconference">Unconference</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/software">Software</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-11-16 07:00">2018-11-16 07:00</time>
+                , last updated on
+                <time datetime="2018-11-16 08:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/i2p-usability-study-and-styleguide/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">I2P Style Guide and Usability Study</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/libocon-2018-visual-identity/">
+                        <span class="button__text">LibreOffice Conference 2018</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/page/1/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>http://test.ura.design/blog/</title>
+    <link rel="canonical" href="http://test.ura.design/blog/">
+    <meta name="robots" content="noindex">
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0; url=http://test.ura.design/blog/">
+  </head>
+</html>

public/blog/page/2/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/" />
+
+
+<title>
+   Blog :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Blog">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Blog"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/blog/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/reproducible-builds-styleguide/index.html

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Earlier this year, we announced our involvement with Open Tech Fund&amp;rsquo;s Usability Lab, providing …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Reproducible Builds, Open Tech Fund, Usability Lab, Style Guide" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/reproducible-builds-styleguide/" />
+
+
+<title>
+   Reproducible Builds Style Guide :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Reproducible Builds Style Guide">
+<meta itemprop="description" content="Earlier this year, we announced our involvement with Open Tech Fund&rsquo;s Usability Lab, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the announcement on our blog.
+Reproducible Builds has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers."><meta itemprop="datePublished" content="2018-06-13T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="388"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Reproducible Builds,Open Tech Fund,Usability Lab,Style Guide," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Reproducible Builds Style Guide"/>
+<meta name="twitter:description" content="Earlier this year, we announced our involvement with Open Tech Fund&rsquo;s Usability Lab, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the announcement on our blog.
+Reproducible Builds has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers."/>
+  
+
+<meta property="article:published_time" content="2018-06-13 12:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/ReproducibleBuilds_thumbnail.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Reproducible Builds Style Guide</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Jun 13, 2018">Jun 13, 2018</time></span>
+                <span class="ms-5">2 minutes</span><span class="ms-5">388 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Earlier this year, we announced our involvement with <a href=http://opentech.fund/lab/usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Tech Fund&rsquo;s Usability Lab</a>, providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the <a href=https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>announcement on our blog.</a></p>
+<p><img src="http://test.ura.design/images/blog/rb_header.webp" alt="Reproducible Builds Logo"></p>
+<p><a href=https://reproducible-builds.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a> has been the first project we supported as part of the Usability Lab. Reproducible Builds represents a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
+<p>We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a step further, we met with Holger, a core contributor to the project at this year&rsquo;s FOSDEM. During our conversations we decided to provide a full fledged style guide via the support of OTF&rsquo;s Usability Lab.</p>
+<p>The following weeks consisted of various IRC meetings and iterations on logo proposals which were presented on <a href=https://identihub.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub</a>, our Free Software platform for hosting visual identites and assets. While the logo process has been quite extensive and we had a few delays, we were able to pin down a final logo throughout a selection voted by the community.</p>
+<p>With the logo being decided upon, we had a clear path going forward, implementing the visual identity in a live style guide, inspired from the <a href=https://styleguide.torproject.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Tor style guide</a> we helped set the foundations for in 2016.</p>
+<p><img src="http://test.ura.design/images/blog/RB_image_1.webp" alt="Colors Section"></p>
+<p>The style guide itself features visuals, assets and components ready to be used in Reproducible Builds projects. Additionally, the style guide is free of any 3rd party trackers (including Google Fonts), external libraries and works also with JavaScript disabled / Tor High Security Mode. We even made sure that the style guide is responsive and should work fine on all resolutions.</p>
+<p>The style guide is now migrated to <a href=https://salsa.debian.org/reproducible-builds/reproducible-styleguide
+    
+    target="_blank" rel="noopener noreferrer"
+>Debian infrastructure</a>, but you can view a <a href=https://uracreative.github.io/reproducible-builds-styleguide/
+    
+    target="_blank" rel="noopener noreferrer"
+>live version on GitHub pages</a>.</p>
+<p>In the coming weeks, the official version will live on <a href=https://reproducible-builds.org/style
+    
+    target="_blank" rel="noopener noreferrer"
+>https://reproducible-builds.org/style</a></p>
+<h3 id="identihub">Identihub<a class="anchor-tag" href="#identihub">#</a></h3>
+<p>While a live style guide is an ideal solution to offer powerful guidelines in one place, creating an Identihub page is an accessible alternative which can be deployed right away without too much hassle.</p>
+<p>There you can also find the <a href=https://demo.identihub.co/project/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide assets</a> where Identihub should make it easier to link, share and convert them.</p>
+<p>Also head over to our <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>portfolio page</a> of Reproducible Builds!</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/reproducible-builds">Reproducible Builds</a></span><span class="tag"><a href="http://test.ura.design/tags/open-tech-fund">Open Tech Fund</a></span><span class="tag"><a href="http://test.ura.design/tags/usability-lab">Usability Lab</a></span><span class="tag"><a href="http://test.ura.design/tags/style-guide">Style Guide</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-06-13 12:00">2018-06-13 12:00</time>
+                , last updated on
+                <time datetime="2018-06-13 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/style-guides-go-beyond-aesthetics/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Style Guides go Beyond Aesthetics</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/ura-now-part-open-tech-funds-usability-lab/">
+                        <span class="button__text">Ura is now part of Open Tech Fund’s Usability Lab</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/securedrop-styleguide/index.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Style Guide, Usability Study, Open Source Design" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/securedrop-styleguide/" />
+
+
+<title>
+   SecureDrop Style Guide :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="SecureDrop Style Guide">
+<meta itemprop="description" content="Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
+During this process we were brought closer with the Project, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before."><meta itemprop="datePublished" content="2018-12-25T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="373"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Style Guide,Usability Study,Open Source Design," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="SecureDrop Style Guide"/>
+<meta name="twitter:description" content="Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.
+During this process we were brought closer with the Project, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before."/>
+  
+
+<meta property="article:published_time" content="2018-12-25 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/projects/securedrop_overview.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">SecureDrop Style Guide</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Dec 25, 2018">Dec 25, 2018</time></span>
+                <span class="ms-5">2 minutes</span><span class="ms-5">373 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+<p><img src="http://test.ura.design/images/projects/securedrop_logo.webp" alt="SecureDrop Logo"></p>
+<p>During this process we were brought closer with the <a href=https://securedrop.org
+    
+    target="_blank" rel="noopener noreferrer"
+>Project</a>, getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before.</p>
+<h2 id="style-guide">Style Guide<a class="anchor-tag" href="#style-guide">#</a></h2>
+<p>We have attended video meetings on Jitsi with the members of SecureDrop, discussing on the specifics of the portfolio, features required and the best way to implement them. Some of these features are as following.</p>
+<ol>
+<li>Code Snippets for every component in the Components section are expandable via a toggle, separated from the Bootstrap framework and easily reusable and deployable when needed; these snippets gracefully fallback to automatically show every snippet on the page when JavaScript is turned off.</li>
+<li>An Icons section, made with PNG icons in order to be viewable on Tor High Security Settings mode.</li>
+<li>Extra fallbacks of the page when JavaScript is disabled with a few components hidden (that only work with JavaScript enabled).</li>
+</ol>
+<p>The style guide contains all the necessary elements and assets that make up the SecureDrop brand, categorized in different sections, such as the logo, colors, typography, icons; furthermore components that can be used when designing systems related to SecureDrop and a standalone section about the language used when writing documents/articles/reports on the SecureDrop project.</p>
+<p>Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings.</p>
+<p><img src="http://test.ura.design/images/projects/securedrop_image_alerts.webp" alt="Style Guide website"></p>
+<p>The repo has been transferred to the Freedom of Press GitHub <a href=https://github.com/freedomofpress/securedrop/
+    
+    target="_blank" rel="noopener noreferrer"
+>organization</a>.
+However, we keep a static archive for the time being where you can preview the live site of the <a href=https://uracreative.github.io/securedrop-styleguide/
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide</a> and the portfolio <a href=../../../projects/securedrop
+    
+    
+>project</a> on our website.</p>
+<p>We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>OpenTechFund</a> for their support on providing resources for privacy and security related open source projects to thrive and receive help where they need the most.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/style-guide">Style Guide</a></span><span class="tag"><a href="http://test.ura.design/tags/usability-study">Usability Study</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-12-25 11:00">2018-12-25 11:00</time>
+                , last updated on
+                <time datetime="2018-12-25 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/underexposed-2019/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Underexposed 2019</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/i2p-usability-study-and-styleguide/">
+                        <span class="button__text">I2P Style Guide and Usability Study</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/style-guides-go-beyond-aesthetics/index.html

@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Style Guides, Brand Guidelines, Open Source Design" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/style-guides-go-beyond-aesthetics/" />
+
+
+<title>
+   Style Guides go Beyond Aesthetics :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Style Guides go Beyond Aesthetics">
+<meta itemprop="description" content="Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym RTFM or &ldquo;Read The Freaking Manual&rdquo;. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?
+A similar stigma often appears in Free Software / Open Source projects as well. The alternative &ldquo;Read the Documentation&rdquo; certainly would ensure that people would give a little more effort before repeating questions."><meta itemprop="datePublished" content="2018-07-02T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="830"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Style Guides,Brand Guidelines,Open Source Design," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Style Guides go Beyond Aesthetics"/>
+<meta name="twitter:description" content="Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym RTFM or &ldquo;Read The Freaking Manual&rdquo;. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?
+A similar stigma often appears in Free Software / Open Source projects as well. The alternative &ldquo;Read the Documentation&rdquo; certainly would ensure that people would give a little more effort before repeating questions."/>
+  
+
+<meta property="article:published_time" content="2018-07-02 12:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/osd_event.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Style Guides go Beyond Aesthetics</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://elioqoshi.me/" target="_blank" rel="noopener noreferrer">Elio Qoshi</a>
+                
+                
+                <span class="ms-5"><time datetime="Jul 2, 2018">Jul 2, 2018</time></span>
+                <span class="ms-5">4 minutes</span><span class="ms-5">830 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Oftentimes we witness the results of elitist practices upon users, usually worded in the form of the acronym <strong>RTFM</strong> or &ldquo;<em>Read The Freaking Manual&rdquo;</em>. User manuals have their place, but up to which point can we expect users to learn by reading instead of doing?</p>
+<p>A similar stigma often appears in Free Software / Open Source projects as well. The alternative &ldquo;<em>Read the Documentation</em>&rdquo; certainly would ensure that people would give a little more effort before repeating questions. With limited resources it&rsquo;s also understandable that this might be the most sane way for a project maintainer to channel user interactions. However is that by design or due to lack of resources? One could argue that it would make more sense to integrate those &lsquo;user lessons&rsquo; right inside the application instead of a manual or documentation alone.</p>
+<h2 id="manuals-are-no-replacement-for-good-usability">Manuals are no replacement for good Usability<a class="anchor-tag" href="#manuals-are-no-replacement-for-good-usability">#</a></h2>
+<p>Make a great manual and a mediocre application and you might be able to keep a user from running into blockers, however you won&rsquo;t be able to improve their workflow. The user is basically learning an app by heart, not by intuition.</p>
+<p>This is where Usability and User Experience come into play:  An alternative to the traditional manual, created by a researcher or designer instead of an engineer, so to speak.</p>
+<p>Unlike a manual though, a delightful User Experience doesn&rsquo;t ask to be read, it is seamlessly integrated into the application in a human-centric nature. Not the other way around.</p>
+<p>There is a strong connection between Usability and a user&rsquo;s emotional feedback: When an application lacks usability, the amount of time it takes the user to accomplish that task is not only higher, it also brings along  negative forms of feedback such as frustration and impatience. If this happens in the case of privacy-enhancing software, those emotions can quickly turn into fear and breach of trust, putting the stakes higher. At that point, usability is not only a commodity anymore.</p>
+<h2 id="consistency-is-key">Consistency is Key<a class="anchor-tag" href="#consistency-is-key">#</a></h2>
+<p>User Experience is shaped by the usage of patterns and aesthetics familiar to the user within the same software. Unsurprisingly, users don&rsquo;t like change. If change and inconsistencies confuse users, we can conclude that consistent design decisions create trust; it feels familiar and the user has witnessed it in the past.</p>
+<p>Facilitating consistency can be done via a range of tools, including Brand Guidelines and a Tone of Voice. As early as 3 years ago, our friends at <a href=https://simplysecure.org/blog/nostalgia-trust-and-brand
+    
+    target="_blank" rel="noopener noreferrer"
+>Simply Secure highlighted the importance of Brand Guidelines in relation to creating user trust</a>.</p>
+<blockquote>
+<p><em>Brand guidelines ensure consistency when many different people are working on a product. This is an important component for building trust with end-users. It&rsquo;s crucial for secure communication projects in particular because lay users can&rsquo;t assess the underlying cryptography. Instead, they assess how trustworthy something is by the user experience, and consistent brand expression is a key part of that. As a counterexample, consider how a sloppily-implemented logo in an email can alert people to a phishing scam by signaling untrustworthiness.</em></p>
+</blockquote>
+<p><strong>Style guides serve as a single source of truth for design decisions and guidelines. They also ensure that a project can be inclusive to diverse contributors, while helping them to communicate with users in one consistent voice throughout the whole range of mediums the project is present on</strong>. Depending on the context, style guides can include various ingredients, including (but not limited to) Brand Guidelines, UI Components and Tone of Voice. A style guide has no specific definition and can vary from use case to use case, so depending on a project&rsquo;s needs, specific parts can be prioritized.</p>
+<h2 id="playing-by-the-rules">Playing by the Rules<a class="anchor-tag" href="#playing-by-the-rules">#</a></h2>
+<p><a href=https://www.sketchapp.com/
+    
+    target="_blank" rel="noopener noreferrer"
+>Sketch</a> revolutionized Prototyping and UX Design years ago. Nowadays <a href=https://www.figma.com/
+    
+    target="_blank" rel="noopener noreferrer"
+>Figma</a> is gaining popularity, being praised by its focus on unified design systems accessible by all members of a project without reinventing components. Figma emphasized the need for consistency and streamlined the design process by integrating it within a powerful design system. It&rsquo;s one of the primary reasons designers are so excited about it.</p>
+<p><img src="http://test.ura.design/images/blog/IconGridBlurry.webp" alt="Icon Grid Display"></p>
+<p>At the end of the day, style guides serve as a playbook for software creators. They go beyond the debate whether design decisions are justified or not, as long as it&rsquo;s covered within it. They are a single source of truth to help create consistently well designed experiences familiar to the user. It might not be a silver-bullet solution in the short run, but it immensely helps everyone involved be on the same page.</p>
+<h2 id="examples">Examples<a class="anchor-tag" href="#examples">#</a></h2>
+<p>In the past we have implemented style guides for various projects, including <a href=https://ura.design/projects/tor-style-guide
+    
+    target="_blank" rel="noopener noreferrer"
+>The Tor Project</a>, Thunderbird and <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a>. If you want to know more, we also suggest to read Simply Secure&rsquo;s blog entry on <a href=https://simplysecure.org/blog/style-guide
+    
+    target="_blank" rel="noopener noreferrer"
+>Why Open-Source projects need Style Guides</a>.</p>
+<p>Last but not least, the points touched upon in this article is the very reason we started building <a href=https://identihub.co
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub</a>. Have a look and try it out yourself!</p>
+<p>If you like to explore the possibility of a style guide for your project, feel free to reach us by <a href=mailto:hello@ura.design
+    target="_blank" 
+    
+>email</a> or <a href=https://twitter.com/uracreative
+    
+    target="_blank" rel="noopener noreferrer"
+>Twitter</a></p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/style-guides">Style Guides</a></span><span class="tag"><a href="http://test.ura.design/tags/brand-guidelines">Brand Guidelines</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-07-02 12:00">2018-07-02 12:00</time>
+                , last updated on
+                <time datetime="2018-07-02 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/thunderbird-style-guide/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Thunderbird Style Guide and Usability Study</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/reproducible-builds-styleguide/">
+                        <span class="button__text">Reproducible Builds Style Guide</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/thunderbird-style-guide/index.html

@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Since early on, we had a special connection with Thunderbird. While many users moved to web-based …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Style Guide, Usability Study, Open Source Design, Thunderbird" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/thunderbird-style-guide/" />
+
+
+<title>
+   Thunderbird Style Guide and Usability Study :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Thunderbird Style Guide and Usability Study">
+<meta itemprop="description" content="Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped redesign the Thunderbird Conversations add-on and even now our email infrastructure is powered by ProtonMail and ProtonMail Bridge via Thunderbird.
+Unfortunately, Mozilla moving away from Thunderbird created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird."><meta itemprop="datePublished" content="2018-07-05T08:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="663"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Style Guide,Usability Study,Open Source Design,Thunderbird," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Thunderbird Style Guide and Usability Study"/>
+<meta name="twitter:description" content="Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped redesign the Thunderbird Conversations add-on and even now our email infrastructure is powered by ProtonMail and ProtonMail Bridge via Thunderbird.
+Unfortunately, Mozilla moving away from Thunderbird created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird."/>
+  
+
+<meta property="article:published_time" content="2018-07-05 08:00:00 &#43;0200 CEST" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/thumb_thunderbird.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Thunderbird Style Guide and Usability Study</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Jul 5, 2018">Jul 5, 2018</time></span>
+                <span class="ms-5">4 minutes</span><span class="ms-5">663 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped <a href=https://github.com/protz/thunderbird-conversations/issues/967
+    
+    target="_blank" rel="noopener noreferrer"
+>redesign the Thunderbird Conversations add-on</a> and even now our email infrastructure is powered by <a href=https://protonmail.com/bridge/
+    
+    target="_blank" rel="noopener noreferrer"
+>ProtonMail and ProtonMail Bridge</a> via Thunderbird.</p>
+<p>Unfortunately, <a href=https://blog.mozilla.org/thunderbird/2017/05/thunderbirds-future-home/
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla moving away from Thunderbird</a> created technical and design debt throughout the past years, resulting in a wider gap between Firefox and Thunderbird. As a comparison, Firefox latest logo makeovers happened in 2010, 2013 and 2017. Respectively, the last update to the Thunderbird logo and branding was 2010.</p>
+<p>The good news however is that efforts to revitalize Thunderbird have gained momentum again. Monterail have visualized their vision of a new Thunderbird UI, Thunderbird itself has now a <a href=https://twitter.com/ryanleesipes
+    
+    target="_blank" rel="noopener noreferrer"
+>Community Manager, Ryan Sipes</a>, and a new Project Council was recently appointed. <a href=https://twitter.com/elioqoshi/status/972067552846319616
+    
+    target="_blank" rel="noopener noreferrer"
+>We didn&rsquo;t hesitate to jump on board</a>.</p>
+<h2 id="setting-the-stage">Setting the Stage<a class="anchor-tag" href="#setting-the-stage">#</a></h2>
+<p>This marked the start of a wonderful collaboration. In Open Source we often times encounter resistance and hesitation to change. It&rsquo;s something we acknowledge and can understand, considering there are contributors who have been involved for years and suddenly someone out of the blue suggests doing a number of changes. We respect that. However the Thunderbird project has been welcoming to suggestions and help, allowing us to enjoy the process thoroughly beyond simply handing off the deliverables.</p>
+<p>To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird. We would like to thank <a href=https://opentech.fund
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Technology Fund</a> for supporting this work towards the Thunderbird project as part of its <a href=https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab
+    
+    target="_blank" rel="noopener noreferrer"
+>Usability Lab</a>.</p>
+<p><img src="http://test.ura.design/images/projects/thunderbird_logo.webp" alt="Thunderbird Revamped Logo"></p>
+<h2 id="new-logo">New Logo<a class="anchor-tag" href="#new-logo">#</a></h2>
+<p>After the Firefox logo was revamped in 2017, a Thunderbird contributor filed a <a href=https://bugzilla.mozilla.org/show_bug.cgi?id&#61;1404648
+    
+    target="_blank" rel="noopener noreferrer"
+>ticket on Bugzilla</a> suggesting to follow Firefox&rsquo; lead and redesign the Thunderbird logo according to the new Photon Design guidelines. Funnily, this coincided with our own experiments on how Thunderbird&rsquo;s logo could be like so we joined the conversation on Bugzilla. We want to thank the great support we got from Ryan Sipes, Thunderbird&rsquo;s Community Manager, who helped facilitate communication with the Thunderbird Community. The new logo will appear in Thunderbird 60.</p>
+<h2 id="usability-study">Usability Study<a class="anchor-tag" href="#usability-study">#</a></h2>
+<p>Thunderbird was the first project we conducted a Usability Study on. This was possible due to Renata joining our team recently and expanding upon the services Ura offers support. Renata conducted user interviews during <a href=https://osc.al
+    
+    target="_blank" rel="noopener noreferrer"
+>Open Source Conference Albania (OSCAL)</a> 2018. The tests were done with 5 testers from different backgrounds, asked to accomplish 9 different tasks. <a href=https://github.com/uracreative/works/raw/main/Thunderbird/Thunderbird%20Usability%20Study.pdf
+    
+    target="_blank" rel="noopener noreferrer"
+>You can read the final Thunderbid Usability Study here</a>.</p>
+<p><img src="http://test.ura.design/images/projects/thunderbird_1.webp" alt="Thunderbird Usability Research"></p>
+<h2 id="style-guide">Style Guide<a class="anchor-tag" href="#style-guide">#</a></h2>
+<p>We talk a lot about style guides as you might have noticed. In fact, recently we wrote an article about why they are so important. Thunderbird is no exception. We developed a full <a href=https://thunderbird.ura.design
+    
+    target="_blank" rel="noopener noreferrer"
+>style guide for Thunderbird</a>, based on the <a href=https://design.firefox.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Photon Design system</a> used by Firefox. As latter is quite extensive (Firefox use cases are way broader than Thunderbird&rsquo;s), we tweaked it to apply in Thunderbird&rsquo;s case. It&rsquo;s a living style guide and has lots of room for improvement in the future. However the next step is to implement all these design decisions. If the style guide describes patterns and guidelines well, but they aren&rsquo;t put into practice, the impact of a style guide is minimal. Hence, we look forward to see those changes be implemented and continue supporting Thunderbird with that task.</p>
+<p>We also create an <a href=https://demo.identihub.co/project/thunderbird#/
+    
+    target="_blank" rel="noopener noreferrer"
+>Identihub page</a> where you can easily access the Thunderbird assets.</p>
+<p><img src="http://test.ura.design/images/projects/thunderbird_2.webp" alt="Thunderbird Style Guide"></p>
+<h2 id="more-to-come">More to come<a class="anchor-tag" href="#more-to-come">#</a></h2>
+<p>Furthermore, we are helping with the <a href=https://github.com/thundernest/thunderbird-website/issues/31
+    
+    target="_blank" rel="noopener noreferrer"
+>redesign of the Thunderbird website</a> putting the style guide finally into practice as well. If you&rsquo;d like to get involved, reach out to us or just contribute to the GitHub issue!</p>
+<p><a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Explore this work on our portfolio</a></p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/style-guide">Style Guide</a></span><span class="tag"><a href="http://test.ura.design/tags/usability-study">Usability Study</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/thunderbird">Thunderbird</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-07-05 08:00">2018-07-05 08:00</time>
+                , last updated on
+                <time datetime="2018-07-05 08:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/libocon-2018-visual-identity/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">LibreOffice Conference 2018</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/style-guides-go-beyond-aesthetics/">
+                        <span class="button__text">Style Guides go Beyond Aesthetics</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/underexposed-2019/index.html

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="During early January (7-11) Elio and Anxhelo from our team participated as mentors in the …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Security, Style Guide, Open Source Design, Event" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/underexposed-2019/" />
+
+
+<title>
+   Underexposed 2019 :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Underexposed 2019">
+<meta itemprop="description" content="During early January (7-11) Elio and Anxhelo from our team participated as mentors in the Underexposed event organized by Simply Secure in Berlin, Germany. Simply Secure
+Underexposed Collective is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.
+This was the first time Underexposed took place in the form of a residency."><meta itemprop="datePublished" content="2019-02-11T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="680"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Security,Style Guide,Open Source Design,Event," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Underexposed 2019"/>
+<meta name="twitter:description" content="During early January (7-11) Elio and Anxhelo from our team participated as mentors in the Underexposed event organized by Simply Secure in Berlin, Germany. Simply Secure
+Underexposed Collective is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.
+This was the first time Underexposed took place in the form of a residency."/>
+  
+
+<meta property="article:published_time" content="2019-02-11 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/underexposed-post.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Underexposed 2019</h1>
+
+            <p>by 
+                
+                
+                
+                
+                <a href="https://lushka.al/" target="_blank" rel="noopener noreferrer">Anxhelo Lushka</a>
+                
+                
+                <span class="ms-5"><time datetime="Feb 11, 2019">Feb 11, 2019</time></span>
+                <span class="ms-5">4 minutes</span><span class="ms-5">680 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>During early January (7-11) Elio and Anxhelo from our team participated as mentors in the <a href=https://simplysecure.org/underexposed/
+    
+    target="_blank" rel="noopener noreferrer"
+>Underexposed</a> event organized by <a href=https://simplysecure.org/
+    
+    target="_blank" rel="noopener noreferrer"
+>Simply Secure</a> in Berlin, Germany. Simply Secure</p>
+<p><img src="http://test.ura.design/images/blog/underexposed.webp" alt="Underexposed Logo"></p>
+<p><a href=https://simplysecure.org/underexposed/
+    
+    target="_blank" rel="noopener noreferrer"
+>Underexposed Collective</a> is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration.</p>
+<p>This was the first time Underexposed took place in the form of a residency. Fellows from around the world spent one week with designers and developers focused to work on their projects, and help others with theirs. Together, the cohort used the residency as a place to ask questions, work on prototypes and circulate feedback quickly. Over the course of the week we had sessions about user research, design systems, prototyping, and wireframing Fellows also had  an opportunity to share their work with the public, specifically at the final presentations at the Mozilla Berlin offices</p>
+<h3 id="monday-7-january">Monday (7 January)<a class="anchor-tag" href="#monday-7-january">#</a></h3>
+<p>The first day started with an introduction by Simply Secure over at the <a href=https://www.openstreetmap.org/node/4842883021
+    
+    target="_blank" rel="noopener noreferrer"
+>WikiBär</a>. <a href=https://twitter.com/georgiamoon
+    
+    target="_blank" rel="noopener noreferrer"
+>Georgia Bullen</a>, the Simply Secure Executive Director, quickly introduced the gist of the week.
+We had a chance to get to know all fellows and their projects better, which helped us have a better grasp of their needs and motivations.</p>
+<p><img src="http://test.ura.design/images/blog/underexposed-schedule.webp" alt="Sticky notes schedule photo"></p>
+<h3 id="tuesday-8-january">Tuesday (8 January)<a class="anchor-tag" href="#tuesday-8-january">#</a></h3>
+<p>Our first session covered the basics of <a href=https://en.wikipedia.org/wiki/Prototype
+    
+    target="_blank" rel="noopener noreferrer"
+>Prototyping</a>. Participants began with pen and paper prototyping, something we are great fans of doing when having the privilege to be in the same room with people. Afterall, this approach has a lower entry level barrier than any design software, allowing everyone to move quickly and scrap ideas before investing a significant amount of time.</p>
+<p>The fellows had really interesting projects and for most of them, the main issue was related to the encryption key restore process. As these projects are security-and-privacy related, they are decentralized and offer users the option to create an encryption key in order to access their data if something bad happens in the future.</p>
+<p>Unfortunately, this process is often bypassed by users as it&rsquo;s (according to them) an extra step that slows down their workflow. As a result, they often lose access to their accounts and data, which could be avoided if they would have had created that key in the beginning.</p>
+<p>We helped the projects there by creating prototypes on paper, discussing UX problems and possible solutions for them, then digitally creating mockups using <a href=https://www.figma.com
+    
+    target="_blank" rel="noopener noreferrer"
+>Figma</a>, a proprietary design collaboration tool.</p>
+<h3 id="wednesday-9-january">Wednesday (9 January)<a class="anchor-tag" href="#wednesday-9-january">#</a></h3>
+<p>Wednesday was one of the busiest days of the event. We got up early, ate breakfast and joined the others at the venue. We separated into two groups, one upstairs and one downstairs and worked on our personal projects or with others.</p>
+<p><a href=https://shiba.computer/
+    
+    target="_blank" rel="noopener noreferrer"
+>Cade</a>, a designer from Germany, gave a very interesting talk on <a href=https://shiba.computer/essay/on-weaponised-design/
+    
+    target="_blank" rel="noopener noreferrer"
+>Weaponized Design</a>, a process that allows for harm of users within the defined bounds of a designed system. You can read his essay in the link above.</p>
+<h3 id="friday-11-january">Friday (11 January)<a class="anchor-tag" href="#friday-11-january">#</a></h3>
+<p>Elio&rsquo;s presentation was on Friday, about <a href=https://en.wikipedia.org/wiki/Style_guide
+    
+    target="_blank" rel="noopener noreferrer"
+>Style Guides</a> and the process of working in the open. He explained our latest projects, how we worked with <a href=https://ura.design/projects/securedrop
+    
+    target="_blank" rel="noopener noreferrer"
+>SecureDrop</a>, <a href=https://ura.design/projects/i2p
+    
+    target="_blank" rel="noopener noreferrer"
+>I2P</a>, <a href=https://ura.design/projects/reproducible-builds
+    
+    target="_blank" rel="noopener noreferrer"
+>Reproducible Builds</a>, <a href=https://ura.design/projects/thunderbird
+    
+    target="_blank" rel="noopener noreferrer"
+>Thunderbird</a> etc.</p>
+<p>This was the final day of the event and the fellows worked during the day to prepare their presentations, on what they learned during the week and what they worked on. The presentations were held at the <a href=https://www.openstreetmap.org/node/4996803917#map&#61;19/52.49947/13.44914
+    
+    target="_blank" rel="noopener noreferrer"
+>Mozilla Offices</a> in Berlin. Many people had registered for the event and the fellows presented one by one their projects and conclusions. We were happy that our mockups were present in their slides and hope that the process continues to turn them into reality soon.</p>
+<p><img src="http://test.ura.design/images/blog/underexposed-presentations.webp" alt="Sarah Fox presenting at the Mozilla Offices in front of the audience"></p>
+<p>After the presentations, we got to discuss with each other and then head over for drinks somewhere close the venue.</p>
+<p>We would like to thank the entire Simply Secure team; Georgia, Ame, Eileen and Molly for being there and organizing a fantastic event. We had a really awesome time and hope to see you all again soon.</p>
+<p>All content is licensed under CC BY-NC-SA 4.0. (<a href=https://creativecommons.org/licenses/by-nc-sa/4.0/
+    
+    target="_blank" rel="noopener noreferrer"
+>Attribution-NonCommercial-ShareAlike 4.0 International</a>).</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/security">Security</a></span><span class="tag"><a href="http://test.ura.design/tags/style-guide">Style Guide</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span><span class="tag"><a href="http://test.ura.design/tags/event">Event</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2019-02-11 11:00">2019-02-11 11:00</time>
+                , last updated on
+                <time datetime="2019-02-11 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/introducing-logobridge/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Introducing Logobridge</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/securedrop-styleguide/">
+                        <span class="button__text">SecureDrop Style Guide</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/ura-fosdem-2018/index.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="Mariana Balla" />
+<meta name="description"
+  content="During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, FOSDEM, FOSDEM2018, Identihub, Open Source Design" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/ura-fosdem-2018/" />
+
+
+<title>
+   Ura at FOSDEM 2018 :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Ura at FOSDEM 2018">
+<meta itemprop="description" content="During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one). Just like at CCC, we strive to be at events which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time."><meta itemprop="datePublished" content="2018-02-09T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="511"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="FOSDEM,FOSDEM2018,Identihub,Open Source Design," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Ura at FOSDEM 2018"/>
+<meta name="twitter:description" content="During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one). Just like at CCC, we strive to be at events which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time."/>
+  
+
+<meta property="article:published_time" content="2018-02-09 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/Elio-FOSDEM2018-thumb.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Ura at FOSDEM 2018</h1>
+
+            <p>by 
+                
+                <span class="ms-5"><time datetime="Feb 9, 2018">Feb 9, 2018</time></span>
+                <span class="ms-5">3 minutes</span><span class="ms-5">511 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>During last weekend the Ura team traveled to Brussels, Belgium to attend <a href="https://fosdem.org/2018/" target="_blank">FOSDEM</a>. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one).  Just like at <a href="https://dev.ura.design/blogposts/2018/01/15/chaos-communication-congress-2017.html" target="_blank">CCC</a>, we strive to be at events  which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/OSD.webp" alt="OSD booth at FOSDEM"><br />
+<i>Open Source Design infobooth – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>As part of the <a href="http://opensourcedesign.net/" target="_blank">Open Source Design community</a>, you could find us at the respective infobooth on both days. Members of our team were at the both along with other fellow designers. Together, we emphasized the importance of usability and user centered design in Open Source Projects. At the “Design Clinic” session, attendees could come to us and showcase us their project. By doing so, designers could advise them on the improvements their design would benefit from.</p>
+<p>At the Open Source Design booth, apart talking about our Design philosophy, we also had the chance to tell people about the way we operate and why we are focused on Free and Open Source Software,  We were also happy to introduce “Logobridge” our side-project which helps us contribute back to the community as a whole.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Elio-FOSDEM2018.webp" alt="Elio during his presentation at FOSDEM 2018"><br />
+<i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>On the 2nd day, Elio, the founder of Ura presented <a href="https://identihub.co/" target="_blank">Identihub</a>. He presented a live <a href="https://demo.identihub.co/" target="_blank">demo</a> of the latest version we are launching. During his presentation all attendees had the chance to watch in real time how they could host their visual assets and how to use some of its features, like format conversion of a certain file. Elio emphasized the importance of SVG as the “middleman” between developers and designers and how exciting it can be if in the future we would be able to have a similar version control powered by Git which would be tailored for designers and developers alike.</p>
+<p>Further the attendees were introduced to more technical details of the project. Identihub development and discussion happen on GitHub and contributions from everyone are welcomed. Having said that, everyone who is willing to contribute to the project can do so by either contributing with patches, reporting bugs, suggesting usability improvements or creating mockups. Last but not least you can support the Identihub development financially by signing up for a monthly contribution at our dedicated Patreon.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/Elio-Identihub.webp" alt="Elio during his presentation about Identihub"><br />
+<i>During the presentation – By Mariana Balla (Creative Commons – Attribution-ShareAlike 4.0 International)</i>
+</div>
+<div class="two spacing"></div>
+<p>The feedback we received was great! Among others, we are happy to have gone the AGPL route as it ensures  full Free Software freedom throughout the journey of Identihub. Unfortunately there were a few technical problems with Elio’s talk recording so we will update you once we have updates.</p>
+<p>Another wonderful experience for Ura at the largest Open Source conference in Europe.<br />
+Looking forward at the next edition with more interesting projects and more <strong>Open Source Design!</strong></p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/fosdem">FOSDEM</a></span><span class="tag"><a href="http://test.ura.design/tags/fosdem2018">FOSDEM2018</a></span><span class="tag"><a href="http://test.ura.design/tags/identihub">Identihub</a></span><span class="tag"><a href="http://test.ura.design/tags/open-source-design">Open Source Design</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-02-09 11:00">2018-02-09 11:00</time>
+                , last updated on
+                <time datetime="2018-02-09 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/inkscape-workshop-tirana/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Inkscape Workshop in Tirana</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/open-source-design-workshop-open-labs-hackerspace-tirana/">
+                        <span class="button__text">Hosting the first Open Source Design Workshop in Tirana</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/blog/ura-now-part-open-tech-funds-usability-lab/index.html

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="Mariana Balla" />
+<meta name="description"
+  content="Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss, Open Tech Fund, Usability, UX Design, Internet Freedom" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/blog/ura-now-part-open-tech-funds-usability-lab/" />
+
+
+<title>
+   Ura is now part of Open Tech Fund’s Usability Lab :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Ura is now part of Open Tech Fund’s Usability Lab">
+<meta itemprop="description" content="Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab.
+The Usability Lab aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open ­source circumvention and digital security tools. There are many open ­source software projects that aim to help people around the world – activists, journalists, and everyday citizens – communicate in privacy and security."><meta itemprop="datePublished" content="2018-03-12T12:00:00+02:00" />
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="455"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="Open Tech Fund,Usability,UX Design,Internet Freedom," /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Ura is now part of Open Tech Fund’s Usability Lab"/>
+<meta name="twitter:description" content="Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab.
+The Usability Lab aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open ­source circumvention and digital security tools. There are many open ­source software projects that aim to help people around the world – activists, journalists, and everyday citizens – communicate in privacy and security."/>
+  
+
+<meta property="article:published_time" content="2018-03-12 12:00:00 &#43;0200 &#43;0200" />
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid header px-0">
+    
+    <img class="post-cover" src="http://test.ura.design/img/blog/home-banner.webp" />
+    
+    <div class="white-block"></div>
+    </div>
+
+    <div class="container-fluid move-up">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-xl-7 col-lg-7 col-md-12 col-12 pt-5 cutoff">
+
+        <article>
+            <p class="mb-0">[]</p>
+
+            
+
+            <h1 class="post-title">Ura is now part of Open Tech Fund’s Usability Lab</h1>
+
+            <p>by 
+                
+                <span class="ms-5"><time datetime="Mar 12, 2018">Mar 12, 2018</time></span>
+                <span class="ms-5">3 minutes</span><span class="ms-5">455 Words</span>
+            </p>
+    
+            <div class="post-content">
+                
+                
+                <p>Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">Open Tech Fund’s Usability Lab</a>.</p>
+<div class="large-10 large-centered centered-text columns">
+<img src="http://test.ura.design/images/blog/OTF.webp" alt="OTF logo"><br />
+</div>
+<div class="two spacing"></div>
+<p>The <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">Usability Lab</a> aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open ­source circumvention and digital security tools. There are many open ­source software projects that aim to help people around the world – activists, journalists, and everyday citizens – communicate in privacy and security.<br />
+Unfortunately, few of these software­ development teams have the capacity or expertise in-house to make tools that are truly usable. These usability challenges hamper tool adoption, or may cause misunderstandings for users about tool functionalities, and subsequently may give users a false sense of security.</p>
+<p>To provide the above services, <a href="https://www.opentech.fund/" target="_blank">Open Tech Fund</a> (OTF) is working together with four different Usability Lab partners (among them also Simply Secure with whom we have collaborated in the past). As Ura we are proud to be involved in the Usability Lab and contribute to the improvement and accessibility of Internet Freedom projects.</p>
+<hr>
+<p><strong>About Open Tech Fund</strong></p>
+<p>The <a href="https://www.opentech.fund/" target="_blank">Open Technology Fund</a> utilizes available funds to support Internet freedom projects that empower world citizens to have access to modern communication channels that are free of restrictions, and allow them to communicate without fear of repressive censorship or surveillance.</p>
+<hr>
+<p><strong>About Usability Lab Services</strong></p>
+<p>In addition to Secure Usability Audits, which will analyze and identify any pitfalls that might make it difficult for users under threat to use a tool, the Lab will be offering these additional services:</p>
+<ul>
+<li><strong>Secure Usability and User Experience (UX) Consultations</strong>, to connect tools with Usability and UX experts to help address a specific gap in expertise, or to work on solving the hard and specific challenges facing digital security tools.</li>
+<li><strong>Secure Usability Testing</strong>, which is similar to a Usability Audit, but limited in scope to a particular area or aspect of the tool.</li>
+<li><strong>User Research and User Studies</strong>, to help tools better understand the needs of their users, and how to articulate those needs in the design of their tools.</li>
+<li>Assistance in secure <strong>UX Design</strong>, to help projects to design their tool in a manner that puts their user’s needs, usability, and security first.</li>
+<li>Assistance developing secure usable <strong>Style Guides</strong>, which outline user interface and graphical elements, rules and guidelines to ensure a cohesive and consistent user experience across different aspects of a tool.</li>
+</ul>
+<p>If you are interested to request help from the Usability Lab, you can <a href="https://www.opentech.fund/lab/usability-lab" target="_blank">file a request via OTF</a>.<br />If you are specifically requesting Ura’s services and believe that your project or tool and meets the criteria, you can also contact us directly and we will help you frame a scope of work proposal.</p>
+
+            </div>
+        </article>
+
+        <div class="post-info">
+            <p><span class="tag"><a href="http://test.ura.design/tags/open-tech-fund">Open Tech Fund</a></span><span class="tag"><a href="http://test.ura.design/tags/usability">Usability</a></span><span class="tag"><a href="http://test.ura.design/tags/ux-design">UX Design</a></span><span class="tag"><a href="http://test.ura.design/tags/internet-freedom">Internet Freedom</a></span>
+            </p>
+    
+    
+            <p>Published on
+                <time datetime="2018-03-12 11:00">2018-03-12 11:00</time>
+                , last updated on
+                <time datetime="2018-03-12 12:00">2022-06-29 16:53</time>
+            </p>
+            <p><a href="336743e51a0457c7aba6ae8210515d9daccd57e9" target="_blank"
+                    rel="noopener" title="Commit message: First push">336743e</a> @
+                <time datetime="2022-06-29">2022-06-29</time>
+            </p>
+        </div>
+
+        
+        <div class="pagination">
+            <div class="pagination__title">
+                <span class="pagination__title-h">Read Other Posts</span>
+                <hr />
+            </div>
+    
+            <div class="pagination__buttons">
+                
+                <span class="button previous">
+                    <a href="http://test.ura.design/blog/reproducible-builds-styleguide/">
+                        <span class="button__icon">←</span>
+                        <span class="button__text">Reproducible Builds Style Guide</span>
+                    </a>
+                </span>
+                
+    
+                
+                <span class="button next">
+                    <a href="http://test.ura.design/blog/inkscape-workshop-tirana/">
+                        <span class="button__text">Inkscape Workshop in Tirana</span>
+                        <span class="button__icon">→</span>
+                    </a>
+                </span>
+                
+            </div>
+        </div>
+        
+    </div>
+    </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/branding/index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/categories/branding/" />
+
+
+<title>
+   Branding :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Branding">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Branding"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/categories/branding/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Branding</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/censoredplanet/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/censoredplanet.svg" alt="Censored Planet"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/censoredplanet/">Censored Planet</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/stackspin/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/stackspin.svg" alt="Stackspin"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/stackspin/">Stackspin</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/adapt/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/adapt.svg" alt="Internews’ ADAPT"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/adapt/">Internews’ ADAPT</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/optima/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/optima.svg" alt="Internews’ OPTIMA"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/optima/">Internews’ OPTIMA</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/oxizide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/oxidize.svg" alt="Oxidize - The Conference of embedded Rust"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/oxizide/">Oxidize - The Conference of embedded Rust</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/thunderbird/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/thunderbird.svg" alt="Thunderbird"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/thunderbird/">Thunderbird</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/i2p/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/i2p.svg" alt="I2P - The Invisible Internet Project"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/i2p/">I2P - The Invisible Internet Project</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/branding/index.xml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Branding on Ura Design</title>
+    <link>http://test.ura.design/categories/branding/</link>
+    <description>Recent content in Branding on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Fri, 25 Mar 2022 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/categories/branding/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Censored Planet</title>
+      <link>http://test.ura.design/work/censoredplanet/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/censoredplanet/</guid>
+      <description>We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways.</description>
+    </item>
+    
+    <item>
+      <title>Stackspin</title>
+      <link>http://test.ura.design/work/stackspin/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/stackspin/</guid>
+      <description>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.</description>
+    </item>
+    
+    <item>
+      <title>Internews’ ADAPT</title>
+      <link>http://test.ura.design/work/adapt/</link>
+      <pubDate>Mon, 24 Jan 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/adapt/</guid>
+      <description>We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere.</description>
+    </item>
+    
+    <item>
+      <title>Internews’ OPTIMA</title>
+      <link>http://test.ura.design/work/optima/</link>
+      <pubDate>Sun, 24 Jan 2021 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/optima/</guid>
+      <description>We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style.</description>
+    </item>
+    
+    <item>
+      <title>Oxidize - The Conference of embedded Rust</title>
+      <link>http://test.ura.design/work/oxizide/</link>
+      <pubDate>Tue, 24 Mar 2020 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/oxizide/</guid>
+      <description>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.</description>
+    </item>
+    
+    <item>
+      <title>Thunderbird</title>
+      <link>http://test.ura.design/work/thunderbird/</link>
+      <pubDate>Thu, 24 Jan 2019 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/thunderbird/</guid>
+      <description>We created the new Thunderbird brand and helped the project with extensive usability research.</description>
+    </item>
+    
+    <item>
+      <title>I2P - The Invisible Internet Project</title>
+      <link>http://test.ura.design/work/i2p/</link>
+      <pubDate>Tue, 24 Jan 2017 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/i2p/</guid>
+      <description>We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox.</description>
+    </item>
+    
+  </channel>
+</rss>

public/categories/illustrations/index.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/categories/illustrations/" />
+
+
+<title>
+   Illustrations :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Illustrations">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Illustrations"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/categories/illustrations/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Illustrations</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/stackspin/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/stackspin.svg" alt="Stackspin"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/stackspin/">Stackspin</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/calyxos/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/calyxos.svg" alt="CalyxOS"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/calyxos/">CalyxOS</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/adapt/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/adapt.svg" alt="Internews’ ADAPT"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/adapt/">Internews’ ADAPT</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/optima/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/optima.svg" alt="Internews’ OPTIMA"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/optima/">Internews’ OPTIMA</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/illustrations/index.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Illustrations on Ura Design</title>
+    <link>http://test.ura.design/categories/illustrations/</link>
+    <description>Recent content in Illustrations on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Fri, 25 Mar 2022 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/categories/illustrations/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Stackspin</title>
+      <link>http://test.ura.design/work/stackspin/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/stackspin/</guid>
+      <description>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.</description>
+    </item>
+    
+    <item>
+      <title>CalyxOS</title>
+      <link>http://test.ura.design/work/calyxos/</link>
+      <pubDate>Thu, 24 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/calyxos/</guid>
+      <description>We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System.</description>
+    </item>
+    
+    <item>
+      <title>Internews’ ADAPT</title>
+      <link>http://test.ura.design/work/adapt/</link>
+      <pubDate>Mon, 24 Jan 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/adapt/</guid>
+      <description>We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere.</description>
+    </item>
+    
+    <item>
+      <title>Internews’ OPTIMA</title>
+      <link>http://test.ura.design/work/optima/</link>
+      <pubDate>Sun, 24 Jan 2021 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/optima/</guid>
+      <description>We designed the brand and visual identity for OPTIMA, creating a visual language which emphasizes their motive, principles and style.</description>
+    </item>
+    
+  </channel>
+</rss>

public/categories/index.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/categories/" />
+
+
+<title>
+   Categories :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Categories">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Categories"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/categories/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Categories</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/categories/branding/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="Branding"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/categories/branding/">Branding</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/categories/illustrations/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="Illustrations"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/categories/illustrations/">Illustrations</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/categories/ux-research/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="UX Research"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/categories/ux-research/">UX Research</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/categories/web-development/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/" alt="Web Development"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/categories/web-development/">Web Development</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/index.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Categories on Ura Design</title>
+    <link>http://test.ura.design/categories/</link>
+    <description>Recent content in Categories on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Fri, 25 Mar 2022 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/categories/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Branding</title>
+      <link>http://test.ura.design/categories/branding/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/categories/branding/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>Illustrations</title>
+      <link>http://test.ura.design/categories/illustrations/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/categories/illustrations/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>UX Research</title>
+      <link>http://test.ura.design/categories/ux-research/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/categories/ux-research/</guid>
+      <description></description>
+    </item>
+    
+    <item>
+      <title>Web Development</title>
+      <link>http://test.ura.design/categories/web-development/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/categories/web-development/</guid>
+      <description></description>
+    </item>
+    
+  </channel>
+</rss>

public/categories/ux-research/index.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/categories/ux-research/" />
+
+
+<title>
+   UX Research :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="UX Research">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="UX Research"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/categories/ux-research/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">UX Research</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/censoredplanet/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/censoredplanet.svg" alt="Censored Planet"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/censoredplanet/">Censored Planet</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/stackspin/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/stackspin.svg" alt="Stackspin"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/stackspin/">Stackspin</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/calyxos/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/calyxos.svg" alt="CalyxOS"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/calyxos/">CalyxOS</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/thunderbird/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/thunderbird.svg" alt="Thunderbird"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/thunderbird/">Thunderbird</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/i2p/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/i2p.svg" alt="I2P - The Invisible Internet Project"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/i2p/">I2P - The Invisible Internet Project</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/ux-research/index.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>UX Research on Ura Design</title>
+    <link>http://test.ura.design/categories/ux-research/</link>
+    <description>Recent content in UX Research on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Fri, 25 Mar 2022 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/categories/ux-research/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Censored Planet</title>
+      <link>http://test.ura.design/work/censoredplanet/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/censoredplanet/</guid>
+      <description>We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways.</description>
+    </item>
+    
+    <item>
+      <title>Stackspin</title>
+      <link>http://test.ura.design/work/stackspin/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/stackspin/</guid>
+      <description>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.</description>
+    </item>
+    
+    <item>
+      <title>CalyxOS</title>
+      <link>http://test.ura.design/work/calyxos/</link>
+      <pubDate>Thu, 24 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/calyxos/</guid>
+      <description>We provided a new visual style for CalyxOS, concretized into graphics to illustrate their main concepts and new wallpaper images for the Operating System.</description>
+    </item>
+    
+    <item>
+      <title>Thunderbird</title>
+      <link>http://test.ura.design/work/thunderbird/</link>
+      <pubDate>Thu, 24 Jan 2019 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/thunderbird/</guid>
+      <description>We created the new Thunderbird brand and helped the project with extensive usability research.</description>
+    </item>
+    
+    <item>
+      <title>I2P - The Invisible Internet Project</title>
+      <link>http://test.ura.design/work/i2p/</link>
+      <pubDate>Tue, 24 Jan 2017 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/i2p/</guid>
+      <description>We helped I2P create their new brand strategy, visual identity and shape the user experience of their browser extension for Firefox.</description>
+    </item>
+    
+  </channel>
+</rss>

public/categories/web-development/index.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/categories/web-development/" />
+
+
+<title>
+   Web Development :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Web Development">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Web Development"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/categories/web-development/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Web Development</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/censoredplanet/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/censoredplanet.svg" alt="Censored Planet"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/censoredplanet/">Censored Planet</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/adapt/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/adapt.svg" alt="Internews’ ADAPT"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/adapt/">Internews’ ADAPT</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/oxizide/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/oxidize.svg" alt="Oxidize - The Conference of embedded Rust"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/oxizide/">Oxidize - The Conference of embedded Rust</a>
+              </div>
+              
+              <div class="col-xl-4 col-lg-12 col-12 pb-4 categories">
+                  <a class="zoom-wrapper" href="http://test.ura.design/work/thunderbird/"><img class="img-fluid w-100" src="http://test.ura.design/img/work/thunderbird.svg" alt="Thunderbird"></a>
+                  <a class="title mt-3 mb-0" href="http://test.ura.design/work/thunderbird/">Thunderbird</a>
+              </div>
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/categories/web-development/index.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Web Development on Ura Design</title>
+    <link>http://test.ura.design/categories/web-development/</link>
+    <description>Recent content in Web Development on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright>
+    <lastBuildDate>Fri, 25 Mar 2022 12:00:00 +0200</lastBuildDate><atom:link href="http://test.ura.design/categories/web-development/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Censored Planet</title>
+      <link>http://test.ura.design/work/censoredplanet/</link>
+      <pubDate>Fri, 25 Mar 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/censoredplanet/</guid>
+      <description>We helped Censored Planet establish their brand identity and provide insights on internet censorship in understandable ways.</description>
+    </item>
+    
+    <item>
+      <title>Internews’ ADAPT</title>
+      <link>http://test.ura.design/work/adapt/</link>
+      <pubDate>Mon, 24 Jan 2022 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/adapt/</guid>
+      <description>We designed the full visual identity for Internews’ ADAPT, creating a style to graphically represent ADAPT everywhere.</description>
+    </item>
+    
+    <item>
+      <title>Oxidize - The Conference of embedded Rust</title>
+      <link>http://test.ura.design/work/oxizide/</link>
+      <pubDate>Tue, 24 Mar 2020 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/oxizide/</guid>
+      <description>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.</description>
+    </item>
+    
+    <item>
+      <title>Thunderbird</title>
+      <link>http://test.ura.design/work/thunderbird/</link>
+      <pubDate>Thu, 24 Jan 2019 12:00:00 +0200</pubDate>
+      
+      <guid>http://test.ura.design/work/thunderbird/</guid>
+      <description>We created the new Thunderbird brand and helped the project with extensive usability research.</description>
+    </item>
+    
+  </channel>
+</rss>

public/clients/briar/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android …" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/briar/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android and Desktop.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="15"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android and Desktop."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android and Desktop.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/calyx/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Illustrations and Accessibility Testing for CalyxOS." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/calyx/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Illustrations and Accessibility Testing for CalyxOS.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="6"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Illustrations and Accessibility Testing for CalyxOS."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Illustrations and Accessibility Testing for CalyxOS.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/cotech/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Web Development for the COTECH, hwsecurity and heylogin website." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/cotech/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Web Development for the COTECH, hwsecurity and heylogin website.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="9"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Web Development for the COTECH, hwsecurity and heylogin website."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Web Development for the COTECH, hwsecurity and heylogin website.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/eclipse/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Branding and web design for the AsciiDoc language and working group." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/eclipse/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Branding and web design for the AsciiDoc language and working group.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="11"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Branding and web design for the AsciiDoc language and working group."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Branding and web design for the AsciiDoc language and working group.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/eff/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="UX Design and Research for HTTPS Everywhere’s Desktop browser extension." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/eff/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="UX Design and Research for HTTPS Everywhere’s Desktop browser extension.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="UX Design and Research for HTTPS Everywhere’s Desktop browser extension."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>UX Design and Research for HTTPS Everywhere’s Desktop browser extension.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/equalitie/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity and UX Research for various projects." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/equalitie/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity and UX Research for various projects.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="8"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity and UX Research for various projects."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity and UX Research for various projects.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/ferrous/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand identity, print and web design for Oxidize and Ferrocene." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/ferrous/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand identity, print and web design for Oxidize and Ferrocene.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand identity, print and web design for Oxidize and Ferrocene."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand identity, print and web design for Oxidize and Ferrocene.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/geocode-earth/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity and Web Design for Pelias and Geocode Earth." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/geocode-earth/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity and Web Design for Pelias and Geocode Earth.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity and Web Design for Pelias and Geocode Earth."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity and Web Design for Pelias and Geocode Earth.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/giz/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Branding updates and print design for openIMIS." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/giz/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Branding updates and print design for openIMIS.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="7"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Branding updates and print design for openIMIS."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Branding updates and print design for openIMIS.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/greatfire/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Layout Design and UX Research." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/greatfire/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Layout Design and UX Research.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="5"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Layout Design and UX Research."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Layout Design and UX Research.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/greenhost/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand identity, UX Design and Testing for Stackspin and Totem Project." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/greenhost/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand identity, UX Design and Testing for Stackspin and Totem Project.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="11"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand identity, UX Design and Testing for Stackspin and Totem Project."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand identity, UX Design and Testing for Stackspin and Totem Project.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/hermes-center/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand identity, Web Design, UX Design and Testing for GlobaLeaks." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/hermes-center/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand identity, Web Design, UX Design and Testing for GlobaLeaks.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand identity, Web Design, UX Design and Testing for GlobaLeaks."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand identity, Web Design, UX Design and Testing for GlobaLeaks.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/index.html

@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/" />
+
+
+<title>
+   Clients :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Clients">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Clients"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/clients/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post pt-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row">
+          <div class="offset-xl-1 col-xl-6 offset-lg-1 col-lg-8 col-md-12 col-12">
+            <h1 class="post-title mb-3">Clients</h1>
+            <p class="subtitle mb-3">The organizations and projects we work with operate on the intersection of privacy, security and open source.</p>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <div class="row py-5 justify-content-center">
+          <div class="col-lg-10 col-md-12 col-12 px-lg-0 px-3">
+            <div class="row">
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Mozilla Foundation</p>
+                    <p class="client-description"><p>Visual design and illustrations for contributors, UI and UX research and design for Thunderbird.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Eclipse Foundation</p>
+                    <p class="client-description"><p>Branding and web design for the AsciiDoc language and working group.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Tor Project</p>
+                    <p class="client-description"><p>Branding updates and UX design.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Technical University of Darmstadt</p>
+                    <p class="client-description"><p>Brand Identity, Print Design and Web Development for Hessian.AI and Queryella.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Rust Project</p>
+                    <p class="client-description"><p>Brand identity, web design and print for RustFest and other Rust projects.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Open Technology Foundation</p>
+                    <p class="client-description"><p>Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Briar</p>
+                    <p class="client-description"><p>Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android and Desktop.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Calyx Institute</p>
+                    <p class="client-description"><p>Illustrations and Accessibility Testing for CalyxOS.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">COTECH</p>
+                    <p class="client-description"><p>Web Development for the COTECH, hwsecurity and heylogin website.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Electronic Frontier Foundation</p>
+                    <p class="client-description"><p>UX Design and Research for HTTPS Everywhere’s Desktop browser extension.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">eQualitie</p>
+                    <p class="client-description"><p>Brand Identity and UX Research for various projects.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Ferrous Systems</p>
+                    <p class="client-description"><p>Brand identity, print and web design for Oxidize and Ferrocene.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Geocode Earth</p>
+                    <p class="client-description"><p>Brand Identity and Web Design for Pelias and Geocode Earth.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">GIZ</p>
+                    <p class="client-description"><p>Branding updates and print design for openIMIS.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">GreatFire</p>
+                    <p class="client-description"><p>Layout Design and UX Research.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Greenhost</p>
+                    <p class="client-description"><p>Brand identity, UX Design and Testing for Stackspin and Totem Project.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Hermes Center</p>
+                    <p class="client-description"><p>Brand identity, Web Design, UX Design and Testing for GlobaLeaks.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Internews</p>
+                    <p class="client-description"><p>Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Magma Collective</p>
+                    <p class="client-description"><p>UX Research and Testing for Briar Android.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Open Knowledge Foundation</p>
+                    <p class="client-description"><p>Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">OSSO</p>
+                    <p class="client-description"><p>Brand identity and print design for various open source libraries.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Tech Cultivation</p>
+                    <p class="client-description"><p>Branding, Information architecture and web design for Tech Cultivation’s website.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">University of Michigan</p>
+                    <p class="client-description"><p>Brand Identity and UX Design for Censored Planet.</p>
+</p>
+                </div>
+              
+                <div class="col-xl-4 col-md-6 col-12 pb-md-4 pb-3 px-lg-4 px-2">
+                    <p class="client-title">Whistleblower Aid</p>
+                    <p class="client-description"><p>Brand Identity updates for Whistleblower Aid’s trademark application.</p>
+</p>
+                </div>
+              
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+  <div class="container-fluid background-gray-50">
+    <div class="container">
+        <div class="row justify-content-center py-4">
+            <div class="col-xl-10 col-12">
+            <div id="testimonials" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="false">
+                
+                <button class="carousel-control-prev" type="button" aria-label="Previous slide" data-bs-target="#testimonials" data-bs-slide="prev">
+                    <span aria-hidden="true"><i class="fa-solid fa-arrow-left color-blue-500 fa-2x"></i></span>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <div class="carousel-indicators">
+                    
+                    <button type="button" data-bs-target="#testimonials" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Testimonial by Sara Sinclair Brody"></button>
+                    
+                    
+                    <button type="button" data-bs-target="#testimonials" data-bs-slide-to="1" aria-label="Testimonial by Jeff Beatty"></button>
+                    
+                    <button type="button" data-bs-target="#testimonials" data-bs-slide-to="2" aria-label="Testimonial by Florian Gilcher"></button>
+                    
+                    <button type="button" data-bs-target="#testimonials" data-bs-slide-to="3" aria-label="Testimonial by Mira Mezini"></button>
+                    
+                </div>
+                <div class="carousel-inner">
+                    
+                    <div class="carousel-item testimonial py-5 active">
+                        <blockquote><p>“Ura understood the needs of the open-source community when we worked on a styleguide for the Tor Project, delivering a polished result.”</p>
+</blockquote>
+                        <h2 class="testimonial-name">Sara Sinclair Brody</h2>
+                        <p class="testimonial-organization">Design Director</p>
+                    </div>
+                    
+                    
+                    <div class="carousel-item testimonial py-5">
+                        <blockquote>“The folks at Ura were very professional in learning our expectations, planning the project, and being flexible as things changed.”</blockquote>
+                        <h2 class="testimonial-name">Jeff Beatty</h2>
+                        <p class="testimonial-organization">Mozilla / Firefox Localization</p>
+                    </div>
+                    
+                    <div class="carousel-item testimonial py-5">
+                        <blockquote>“We loved working with Ura for Oxidize. From research over design to implementation, everything worked great.”</blockquote>
+                        <h2 class="testimonial-name">Florian Gilcher</h2>
+                        <p class="testimonial-organization">Ferrous Systems / Rust-Lang</p>
+                    </div>
+                    
+                    <div class="carousel-item testimonial py-5">
+                        <blockquote>“From conception to execution, Ura was highly effective to gather requirements and deliver upon them without surprises. Their open design process and their professionalism in all phases of the project is something our team always appreciated.”</blockquote>
+                        <h2 class="testimonial-name">Mira Mezini</h2>
+                        <p class="testimonial-organization">TU Darmstadt</p>
+                    </div>
+                    
+                </div>
+                <button class="carousel-control-next" type="button" aria-label="Next slide" data-bs-target="#testimonials" data-bs-slide="next">
+                  <span aria-hidden="true"><i class="fa-solid fa-arrow-right color-blue-500 fa-2x"></i></span>
+                  <span class="visually-hidden">Next</span>
+                </button>
+              </div>
+            </div>
+        </div>
+    </div>
+  </div>
+  <div class="container-fluid px-sm-3 px-0 pt-5 background-gray-50">
+    <div class="container">
+        <div class="row justify-content-end">
+            <div class="col-xl-5 col-lg-7 col-12 px-sm-3 px-0">
+                <div class="cta-card py-5">
+                    <h2>Can we help on your project?</h2>
+                    <a class="arrow-link" href="#">Contact us</a>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/index.xml

@@ -0,0 +1,227 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Clients on Ura Design</title>
+    <link>http://test.ura.design/clients/</link>
+    <description>Recent content in Clients on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/clients/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/mozilla/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/mozilla/</guid>
+      <description>Visual design and illustrations for contributors, UI and UX research and design for Thunderbird.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/eclipse/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/eclipse/</guid>
+      <description>Branding and web design for the AsciiDoc language and working group.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/tor/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/tor/</guid>
+      <description>Branding updates and UX design.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/tud/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/tud/</guid>
+      <description>Brand Identity, Print Design and Web Development for Hessian.AI and Queryella.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/rust/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/rust/</guid>
+      <description>Brand identity, web design and print for RustFest and other Rust projects.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/otf/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/otf/</guid>
+      <description>Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/briar/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/briar/</guid>
+      <description>Brand Identity, Illustrations, UX Design, UX Research and Accessibility Testing for Briar Android and Desktop.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/calyx/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/calyx/</guid>
+      <description>Illustrations and Accessibility Testing for CalyxOS.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/cotech/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/cotech/</guid>
+      <description>Web Development for the COTECH, hwsecurity and heylogin website.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/eff/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/eff/</guid>
+      <description>UX Design and Research for HTTPS Everywhere’s Desktop browser extension.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/equalitie/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/equalitie/</guid>
+      <description>Brand Identity and UX Research for various projects.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/ferrous/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/ferrous/</guid>
+      <description>Brand identity, print and web design for Oxidize and Ferrocene.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/geocode-earth/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/geocode-earth/</guid>
+      <description>Brand Identity and Web Design for Pelias and Geocode Earth.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/giz/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/giz/</guid>
+      <description>Branding updates and print design for openIMIS.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/greatfire/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/greatfire/</guid>
+      <description>Layout Design and UX Research.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/greenhost/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/greenhost/</guid>
+      <description>Brand identity, UX Design and Testing for Stackspin and Totem Project.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/hermes-center/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/hermes-center/</guid>
+      <description>Brand identity, Web Design, UX Design and Testing for GlobaLeaks.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/internews/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/internews/</guid>
+      <description>Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/magma-collective/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/magma-collective/</guid>
+      <description>UX Research and Testing for Briar Android.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/okf/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/okf/</guid>
+      <description>Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/osso/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/osso/</guid>
+      <description>Brand identity and print design for various open source libraries.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/tech-cultivation/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/tech-cultivation/</guid>
+      <description>Branding, Information architecture and web design for Tech Cultivation’s website.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/unimichigan/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/unimichigan/</guid>
+      <description>Brand Identity and UX Design for Censored Planet.</description>
+    </item>
+    
+    <item>
+      <title></title>
+      <link>http://test.ura.design/clients/whistleblower-aid/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/clients/whistleblower-aid/</guid>
+      <description>Brand Identity updates for Whistleblower Aid’s trademark application.</description>
+    </item>
+    
+  </channel>
+</rss>

public/clients/internews/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/internews/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="15"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity, Layout Design, Web Development and User Research for Optima, Adapt, BASICS and more.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/magma-collective/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="UX Research and Testing for Briar Android." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/magma-collective/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="UX Research and Testing for Briar Android.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="7"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="UX Research and Testing for Briar Android."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>UX Research and Testing for Briar Android.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/mozilla/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Visual design and illustrations for contributors, UI and UX research and design for Thunderbird." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/mozilla/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Visual design and illustrations for contributors, UI and UX research and design for Thunderbird.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="14"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Visual design and illustrations for contributors, UI and UX research and design for Thunderbird."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Visual design and illustrations for contributors, UI and UX research and design for Thunderbird.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/okf/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/okf/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="14"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity, Web Development and Web Design for Prototype Fund and Open Knowledge Foundation.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/osso/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand identity and print design for various open source libraries." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/osso/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand identity and print design for various open source libraries.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand identity and print design for various open source libraries."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand identity and print design for various open source libraries.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/otf/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/otf/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="16"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Usability and design service provider for sponsored projects as part of SUA Lab and Learning Lab.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/rust/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand identity, web design and print for RustFest and other Rust projects." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/rust/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand identity, web design and print for RustFest and other Rust projects.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="12"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand identity, web design and print for RustFest and other Rust projects."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand identity, web design and print for RustFest and other Rust projects.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/tech-cultivation/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Branding, Information architecture and web design for Tech Cultivation’s website." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/tech-cultivation/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Branding, Information architecture and web design for Tech Cultivation’s website.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="10"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Branding, Information architecture and web design for Tech Cultivation’s website."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Branding, Information architecture and web design for Tech Cultivation’s website.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/tor/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Branding updates and UX design." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/tor/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Branding updates and UX design.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="5"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Branding updates and UX design."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Branding updates and UX design.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/tud/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity, Print Design and Web Development for Hessian.AI and Queryella." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/tud/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity, Print Design and Web Development for Hessian.AI and Queryella.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="11"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity, Print Design and Web Development for Hessian.AI and Queryella."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity, Print Design and Web Development for Hessian.AI and Queryella.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/unimichigan/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity and UX Design for Censored Planet." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/unimichigan/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity and UX Design for Censored Planet.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="8"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity and UX Design for Censored Planet."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity and UX Design for Censored Planet.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/clients/whistleblower-aid/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="Brand Identity updates for Whistleblower Aid’s trademark application." />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/clients/whistleblower-aid/" />
+
+
+<title>
+    :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="">
+<meta itemprop="description" content="Brand Identity updates for Whistleblower Aid’s trademark application.">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="8"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content=""/>
+<meta name="twitter:description" content="Brand Identity updates for Whistleblower Aid’s trademark application."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3"></h1>
+                    <p class="mb-0 subtitle"></p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+    
+                                <div class="post-content">
+                                    <p>Brand Identity updates for Whistleblower Aid’s trademark application.</p>
+
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/contact/index.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="en" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/contact/" />
+
+
+<title>
+   Contact :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Contact">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Contact"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/contact/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  active" aria-current="page"  href="http://test.ura.design/contact/">Contact</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/clients/">Clients</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/about/">About</a>
+            <a class=" "  href="http://test.ura.design/work/">Work</a>
+            <a class=" active" aria-current="page"  href="http://test.ura.design/contact/">Contact</a>
+            <a class=" "  href="http://test.ura.design/clients/">Clients</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post">
+
+    <div class="container-fluid">
+        <div class="container">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-6 offset-lg-1 col-lg-6 col-md-8 col-12 pt-5">
+                    
+                    <h1 class="post-title">Get in touch</h1>
+                    <p class="contact">Have a challenge? Get in touch with our team to discuss how we can help.</p>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-xl-10 col-lg-10 col-md-12 col-12 pt-5">
+                    <div class="row social-links">
+                        <div class="col-xl-3 col-lg-3 col-12 mb-lg-0 mb-5">
+                            <p>Email</p>
+                            <a href="mailto:hello@ura.design">hello@ura.design</a>
+                        </div>
+                        <div class="col-xl-3 col-lg-3 col-12 mb-lg-0 mb-5">
+                            <p>GitHub</p>
+                            <a href="https://github.com/uracreative" target="_blank" rel="noopener noreferrer">UraCreative</a>
+                        </div>
+                        <div class="col-xl-3 col-lg-3 col-12 mb-lg-0 mb-5">
+                            <p>Twitter</p>
+                            <a href="https://twitter.com/uracreative" target="_blank" rel="noopener noreferrer">@UraCreative</a>
+                        </div>
+                        <div class="col-xl-3 col-lg-3 col-12 mb-lg-0 mb-5">
+                            <p>Mattermost Chat</p>
+                            <a href="https://chat.ura.design" target="_blank" rel="noopener noreferrer">chat.ura.design</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container px-sm-3 px-0">
+            <div class="row pt-lg-5 pt-0 justify-content-end">
+                <div class="col-xl-5 col-lg-7 col-12 px-lg-3 px-0">
+                    <div class="cta-card py-5">
+                        <h2>Prefer to talk over a call?</h2>
+                        <a class="arrow-link" href="#">Schedule a call</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page"  href="http://test.ura.design/contact/">Contact</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/clients/">Clients</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/contact/index.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Contact on Ura Design</title>
+    <link>http://test.ura.design/contact/</link>
+    <description>Recent content in Contact on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/contact/index.xml" rel="self" type="application/rss+xml" />
+  </channel>
+</rss>

public/de/404.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="de" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/de/404.html" />
+
+
+<title>
+   404 Page not found :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="404 Page not found">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="404 Page not found"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/contact/">Contact</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/de/about/">About</a>
+            <a class=" "  href="http://test.ura.design/de/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/de/contact/">Contact</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<div>
+    <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+        </svg>
+    </p>
+    <div>
+        <h1>404</h1>
+        <p>dammmm…</p>
+        <p>
+            <a href="http://test.ura.design" title="Home">Home</a>&nbsp;&nbsp;
+            <a href="http://test.ura.design/de/%20posts" title="Posts">Posts</a>
+        </p>
+    </div>
+</div>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/contact/">Contact</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/de/authors/index.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="de" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/de/authors/" />
+
+
+<title>
+   Authors :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Authors">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Authors"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/de/authors/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/contact/">Contact</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/de/about/">About</a>
+            <a class=" "  href="http://test.ura.design/de/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/de/contact/">Contact</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Authors</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/contact/">Contact</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/de/authors/index.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Authors on Ura Design</title>
+    <link>http://test.ura.design/de/authors/</link>
+    <description>Recent content in Authors on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/de/authors/index.xml" rel="self" type="application/rss+xml" />
+  </channel>
+</rss>

public/de/categories/index.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="de" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/de/categories/" />
+
+
+<title>
+   Categories :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Categories">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Categories"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/de/categories/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header>
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines color-blue-500"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link  "  href="http://test.ura.design/de/contact/">Contact</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/de/about/">About</a>
+            <a class=" "  href="http://test.ura.design/de/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/de/contact/">Contact</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main class="post py-5">
+  <div class="container-fluid">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-xl-10 col-lg-10 col-md-12 col-12">
+            <h1 class="post-title mb-3">Categories</h1>
+          </div>
+        </div>
+      </div>
+        <div class="container">
+          <div class="row py-4">
+              
+          </div>
+      </div>
+  </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/contact/">Contact</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/de/categories/index.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Categories on Ura Design</title>
+    <link>http://test.ura.design/de/categories/</link>
+    <description>Recent content in Categories on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/de/categories/index.xml" rel="self" type="application/rss+xml" />
+  </channel>
+</rss>

public/de/imprint/index.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="de" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/de/imprint/" />
+
+
+<title>
+   Impressum :: Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Impressum">
+<meta itemprop="description" content="">
+<meta itemprop="dateModified" content="2022-06-29T16:53:28+02:00" />
+<meta itemprop="wordCount" content="0"><meta itemprop="image" content="http://test.ura.design"/>
+<meta itemprop="keywords" content="" /><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Impressum"/>
+<meta name="twitter:description" content=""/>
+  
+
+
+
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    <header class="background-blue-500">
+        <div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines text-white"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/contact/">Contact</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark text-white"></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class="text-white "  href="http://test.ura.design/de/about/">About</a>
+            <a class="text-white "  href="http://test.ura.design/de/work/">Work</a>
+            <a class="text-white "  href="http://test.ura.design/de/contact/">Contact</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+        <div class="container text-white py-5">
+            <div class="row">
+                <div class="offset-xl-1 col-xl-7 col-lg-8 col-12">
+                    <h1 class="mb-3">Impressum</h1>
+                    <p class="mb-0 subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gravida ac nisl magna at accumsan, viverra lacus. Rhoncus cras sed in pellentesque amet, at mattis purus in.</p>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div id="content" class="content">
+        <main>
+            <div class="container-fluid">
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-xl-7 col-lg-7 col-md-12 col-12 py-5">
+        
+                            <article>
+                                
+                                Also available in
+                                
+                                <a href="http://test.ura.design/imprint/"><span>English</span></a>
+                                
+                                
+    
+                                <div class="post-content">
+                                    
+                                </div>
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/contact/">Contact</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/de/index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html data-theme="light" lang="de" itemscope itemtype="http://schema.org/WebPage">
+
+<head>
+    <meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+<meta name="author"
+  content="" />
+<meta name="description"
+  content="" />
+<meta name="keywords"
+  content="design, ux, ui, public, developer, privacy, security, foss, floss" />
+<meta name="robots" content="noodp" />
+<meta name="theme-color" content="#1F78D1" />
+<link rel="canonical" href="http://test.ura.design/de/" />
+
+
+<title>
+   Ura Design  
+</title>
+
+
+
+ 
+
+<link rel="stylesheet" href="http://test.ura.design/main.css" />
+
+
+
+
+<link rel="apple-touch-icon" href="http://test.ura.design/favicons/apple-touch-icon.webp">
+<link rel="mask-icon" href="http://test.ura.design/favicons/favicon.svg" color="#1F78D1">
+<link rel="icon" href="http://test.ura.design/favicons/favicon.svg">
+<meta itemprop="name" content="Ura Design">
+<meta itemprop="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."><meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="http://test.ura.design"/>
+
+<meta name="twitter:title" content="Ura Design"/>
+<meta name="twitter:description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects."/>
+  
+
+
+
+<link rel="alternate" type="application/rss+xml" href="http://test.ura.design/de/index.xml" title="Ura Design"/> 
+
+
+
+
+</head>
+
+<body class="d-flex flex-column min-vh-100">
+    <a class="screen-reader-text" href="#content">Skip to content</a>
+
+    <button id="theme-toggle" class="acctoggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
+
+    
+<header class="background-blue-500">
+
+<div class="container-fluid">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
+      <a class="navbar-brand" href="http://test.ura.design">
+        
+        
+        
+        <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+      </a>
+      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
+        <i class="fa-solid fa-grip-lines text-white"></i>
+      </button>
+      <div class="collapse navbar-collapse flex-grow-0">
+        <ul class="navbar-nav"><li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/about/">About</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/work/">Work</a>
+          </li>
+          <li class="nav-item ms-4">
+            <a class="nav-link text-white "  href="http://test.ura.design/de/contact/">Contact</a>
+          </li>
+          
+        </ul>
+      </div>
+    </nav>
+    <div id="navbar-mobile" class="overlay d-block d-lg-none" >
+      <div class="container-fluid">
+        <div class="container">
+          <div class="navbar align-items-center justify-content-between">
+            <a class="brand" href="http://test.ura.design">
+                <img src="http://test.ura.design/img/logo-white.svg" alt="Ura Design logo" width="100px">
+            </a>
+            <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()"><i class="fa-solid fa-xmark "></i></button>
+        </div>
+      </div>
+      <div class="overlay-content">
+          <div class="container pt-4"><a class=" "  href="http://test.ura.design/de/about/">About</a>
+            <a class=" "  href="http://test.ura.design/de/work/">Work</a>
+            <a class=" "  href="http://test.ura.design/de/contact/">Contact</a>
+            
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function openNav() {
+  document.getElementById("navbar-mobile").style.height = "100%";
+}
+function closeNav() {
+  document.getElementById("navbar-mobile").style.height = "0%";
+}
+</script>
+
+
+
+<div class="container py-5 my-4 text-white">
+    <div class="row home justify-content-lg-center justify-content-start py-lg-5 py-0">
+        <div class="col-xl-6 col-lg-11 col-10">
+            <h1>We help open source projects succeed.</h1>
+        </div>
+        <div class="col-xl-4 col-11 py-3">
+            <p>Ura is the design studio dedicated to make open source software more usable, accessible and competitive.</p>
+            <a href="http://test.ura.design/work">Our Work</a>
+        </div>
+    </div>
+</div>
+
+</header>
+
+
+
+    <div id="content" class="content">
+        
+<main>
+    <div class="container-fluid py-5">
+        <div class="container">
+            <h3 class="text-center text-uppercase">Clients</h3>
+            <div class="row justify-content-between align-items-center">
+                
+            </div>
+
+            <hr />
+
+            <h3 class="pt-3 text-xl-start text-center text-uppercase">Featured Case Studies</h4>
+
+            <div class="row pt-3 pb-3">
+                
+            </div>
+
+            <div class="row justify-content-xl-end justify-content-start">
+                <div class="col-xl-4 col-12 d-flex justify-content-xl-end justify-content-start">
+                    <a class="see-more" href="http://test.ura.design/work">More Case Studies</a>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</main>
+
+    </div>
+
+    
+    <footer class="py-4 mt-auto">
+  <div class="container-fluid">
+    <div class="container">
+      <div class="row d-none d-lg-flex">
+        <nav class="navbar navbar-expand-lg">
+          <div class="navbar-collapse" id="footerNav">
+            <ul class="navbar-nav"><li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/about/">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/work/">Work</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link "  href="http://test.ura.design/de/contact/">Contact</a>
+              </li>
+              
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="row py-5 pt-lg-5 cta">
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Let's talk:</p>
+          <a class="arrow-link" href="http://test.ura.design/contact">Contact</a>
+        </div>
+        <div class="col-xxl-5 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>Subscribe:</p>
+          <a class="arrow-link" href="https://tinyletter.com/uracreative" target="_blank"
+            rel="noopener noreferrer">Newsletter</a>
+        </div>
+        <div class="col-xxl-2 col-xl-4 col-lg-4 col-12 pb-xl-0 pb-4">
+          <p>We are on:</p>
+          <div class="pt-2">
+            <a href="https://github.com/uracreative" target="_blank" rel="noopener" title="Github" aria-label="Ura Design on Github"><i class="me-3 fa-brands fa-2x fa-github"></i></a><a href="https://twitter.com/uracreative" target="_blank" rel="noopener" title="Twitter" aria-label="Ura Design on Twitter"><i class="me-3 fa-brands fa-2x fa-twitter"></i></a><a href="https://instagram.com/uradotdesign" target="_blank" rel="noopener" title="Instagram" aria-label="Ura Design on Instagram"><i class="me-3 fa-brands fa-2x fa-instagram"></i></a><a href="https://www.linkedin.com/company/ura/" target="_blank" rel="noopener" title="Linkedin" aria-label="Ura Design on Linkedin"><i class="me-3 fa-brands fa-2x fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row justify-content-between align-items-center">
+        <div class="col-xxl-4 col-xl-12">
+          <nav class="navbar navbar-expand-lg" aria-label="Secondary">
+            <div class="navbar-collapse" id="footerLinks">
+              <ul class="navbar-nav flex-row"><li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/source">Source Code</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/privacy">Data Privacy</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link "  href="http://test.ura.design/de/imprint">Imprint</a>
+                </li>
+                
+              </ul>
+            </div>
+          </nav>
+        </div>
+        <div class="col-xxl-8 col-xl-12 d-flex justify-content-xxl-end justify-content-start">
+          <p class="copyright mb-0">© Ura Design 2022. Some rights reserved. Unless otherwise noted, content on this page is under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" title="License"> Creative Commons license</a>.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+
+<script defer src="http://test.ura.design/bundle.min.js"></script>
+
+
+    
+    
+</body>
+
+</html>

public/de/index.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Ura Design</title>
+    <link>http://test.ura.design/de/</link>
+    <description>Recent content on Ura Design</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>en-us</language>
+    <copyright>Some rights reserved. Unless otherwise noted, content on this page is under a &lt;a href=&#34;https://creativecommons.org/licenses/by-nc-sa/4.0/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; title=&#34;License&#34;&gt; Creative Commons license&lt;/a&gt;.</copyright><atom:link href="http://test.ura.design/de/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Impressum</title>
+      <link>http://test.ura.design/de/imprint/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>http://test.ura.design/de/imprint/</guid>
+      <description></description>
+    </item>
+    
+  </channel>
+</rss>

public/de/sitemap.xml

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  <url>
+    <loc>http://test.ura.design/de/authors/</loc>
+    <xhtml:link
+                rel="alternate"
+                hreflang="en"
+                href="http://test.ura.design/authors/"
+                />
+    <xhtml:link
+                rel="alternate"
+                hreflang="de"
+                href="http://test.ura.design/de/authors/"
+                />
+  </url><url>
+    <loc>http://test.ura.design/de/categories/</loc>
+    <xhtml:link
+                rel="alternate"
+                hreflang="en"
+                href="http://test.ura.design/categories/"
+                />
+    <xhtml:link
+                rel="alternate"
+                hreflang="de"
+                href="http://test.ura.design/de/categories/"
+                />
+  </url><url>
+    <loc>http://test.ura.design/de/imprint/</loc>
+    <lastmod>2022-06-29T16:53:28+02:00</lastmod>
+    <xhtml:link
+                rel="alternate"
+                hreflang="en"
+                href="http://test.ura.design/imprint/"
+                />
+    <xhtml:link
+                rel="alternate"
+                hreflang="de"
+                href="http://test.ura.design/de/imprint/"
+                />
+  </url><url>
+    <loc>http://test.ura.design/de/tags/</loc>
+    <xhtml:link
+                rel="alternate"
+                hreflang="en"
+                href="http://test.ura.design/tags/"
+                />
+    <xhtml:link
+                rel="alternate"
+                hreflang="de"
+                href="http://test.ura.design/de/tags/"
+                />
+  </url><url>
+    <loc>http://test.ura.design/de/</loc>
+    <xhtml:link
+                rel="alternate"
+                hreflang="en"
+                href="http://test.ura.design/"
+                />
+    <xhtml:link
+                rel="alternate"
+                hreflang="de"
+                href="http://test.ura.design/de/"
+                />
+  </url>
+</urlset>