Pushed new redesign to branch

6 years ago · 6c78a57609
895 changed files with 21208 additions and 98879 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,4 @@
-_site
+/_site
+.*
+!/.gitignore
+.sass-cache
--- a/.htaccess
+++ b/.htaccess
@ -1,61 +0,0 @@
-RewriteEngine On
-RewriteCond %{REQUEST_FILENAME} !-f
-RewriteRule ^([^\.]+)$ $1.html [NC,L]
-RewriteRule ^([^\.]+)$ $1.php [NC,L]
-
-<IfModule mod_deflate.c>
-  # Compress HTML, CSS, JavaScript, Text, XML and fonts
-  AddOutputFilterByType DEFLATE application/javascript
-  AddOutputFilterByType DEFLATE application/rss+xml
-  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
-  AddOutputFilterByType DEFLATE application/x-font
-  AddOutputFilterByType DEFLATE application/x-font-opentype
-  AddOutputFilterByType DEFLATE application/x-font-otf
-  AddOutputFilterByType DEFLATE application/x-font-truetype
-  AddOutputFilterByType DEFLATE application/x-font-ttf
-  AddOutputFilterByType DEFLATE application/x-javascript
-  AddOutputFilterByType DEFLATE application/xhtml+xml
-  AddOutputFilterByType DEFLATE application/xml
-  AddOutputFilterByType DEFLATE font/opentype
-  AddOutputFilterByType DEFLATE font/otf
-  AddOutputFilterByType DEFLATE font/ttf
-  AddOutputFilterByType DEFLATE image/svg+xml
-  AddOutputFilterByType DEFLATE image/x-icon
-  AddOutputFilterByType DEFLATE text/css
-  AddOutputFilterByType DEFLATE text/html
-  AddOutputFilterByType DEFLATE text/javascript
-  AddOutputFilterByType DEFLATE text/plain
-  AddOutputFilterByType DEFLATE text/xml
-
-  # Remove browser bugs (only needed for really old browsers)
-  BrowserMatch ^Mozilla/4 gzip-only-text/html
-  BrowserMatch ^Mozilla/4\.0[678] no-gzip
-  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
-  Header append Vary User-Agent
-</IfModule>
-
-ErrorDocument 404 ../404.html
-
-## EXPIRES CACHING ##
-<IfModule mod_expires.c>
-ExpiresActive On
-ExpiresByType image/jpeg "access plus 1 year"
-ExpiresByType image/gif "access plus 1 year"
-ExpiresByType text/css "access plus 1 month"
-ExpiresByType application/pdf "access plus 1 month"
-ExpiresByType application/x-shockwave-flash "access plus 1 month"
-ExpiresByType image/x-icon "access plus 1 year"
-ExpiresByType text/javascript "access plus 1 month"
-ExpiresByType text/x-javascript "access plus 1 month"
-ExpiresByType application/javascript "access plus 1 month"  
-ExpiresByType application/x-javascript "access plus 1 month"
-ExpiresDefault "access plus 1 days"
-</IfModule>
-## EXPIRES CACHING ##
-
-Header unset ETag
-FileETag None
-
-<IfModule mod_headers.c>
-Header set Strict-Transport-Security "max-age=31536000; preload" env=HTTPS
-</IfModule>
--- a/404.html
+++ b/404.html
@ -1,22 +0,0 @@
---
-layout: default
-permalink: /404.html
---
-
-<div class="full" style="background-color: #3399D4;">
-  <div class="four spacing"></div>
-  <div class="section-title">
-    <div class="row">
-      <div class="medium-10 medium-centered columns">
-        <img src="/images/main/404.svg" width="55%" height="55%"><br />
-        <br /><h1>Page not found</h1><br />
-      </div>
-        <div class="small-6 columns">
-          <a href="#" onclick="history.go(-1)" class="button boxed white" style="float: right;">Go a page back</a>
-        </div>
-        <div class="small-6 columns">
-          <a href="https://ura.design" class="button boxed white" style="float: left;">Go to homepage</a>
-        </div>
-      </div>
-    </div>
-  </div>
--- a/7
+++ b/7
@ -1,5 +1,10 @@
 source "https://rubygems.org"

-gem 'jekyll'
+gem "jekyll"
+gem "jekyll-watch"
+gem "redcarpet"
+gem "kramdown"
+gem "rouge"
 gem 'jekyll-paginate'
 gem 'jekyll-compose'
+gem 'wdm', '>= 0.1.0' if Gem.win_platform?
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,20 +1,22 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    addressable (2.5.2)
+    addressable (2.6.0)
      public_suffix (>= 2.0.2, < 4.0)
    colorator (1.1.0)
-    concurrent-ruby (1.0.5)
+    concurrent-ruby (1.1.5)
    em-websocket (0.5.1)
      eventmachine (>= 0.12.9)
      http_parser.rb (~> 0.6.0)
    eventmachine (1.2.7)
-    ffi (1.9.25)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.10.0)
+    ffi (1.10.0-x64-mingw32)
    forwardable-extended (2.6.0)
    http_parser.rb (0.6.0)
    i18n (0.9.5)
      concurrent-ruby (~> 1.0)
-    jekyll (3.8.4)
+    jekyll (3.8.5)
      addressable (~> 2.4)
      colorator (~> 1.0)
      em-websocket (~> 0.5)
@ -27,42 +29,50 @@ GEM
      pathutil (~> 0.9)
      rouge (>= 1.7, < 4)
      safe_yaml (~> 1.0)
-    jekyll-compose (0.8.0)
-      jekyll (~> 3.0)
+    jekyll-compose (0.11.0)
+      jekyll (>= 3.7, < 5.0)
    jekyll-paginate (1.1.0)
    jekyll-sass-converter (1.5.2)
      sass (~> 3.4)
-    jekyll-watch (2.0.0)
+    jekyll-watch (2.2.1)
      listen (~> 3.0)
    kramdown (1.17.0)
-    liquid (4.0.0)
+    liquid (4.0.3)
    listen (3.1.5)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
      ruby_dep (~> 1.2)
    mercenary (0.3.6)
-    pathutil (0.16.1)
+    pathutil (0.16.2)
      forwardable-extended (~> 2.6)
    public_suffix (3.0.3)
    rb-fsevent (0.10.3)
-    rb-inotify (0.9.10)
-      ffi (>= 0.5.0, < 2)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    redcarpet (3.4.0)
    rouge (3.3.0)
    ruby_dep (1.5.0)
-    safe_yaml (1.0.4)
-    sass (3.6.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
+    wdm (0.1.1)

 PLATFORMS
  ruby
+  x64-mingw32

 DEPENDENCIES
  jekyll
  jekyll-compose
  jekyll-paginate
+  jekyll-watch
+  kramdown
+  redcarpet
+  rouge
+  wdm (>= 0.1.0)

 BUNDLED WITH
-   1.16.6
+   2.0.1
--- a/bower_components/countto/LICENSE.txt
+++ b/bower_components/countto/LICENSE.txt
@ -1,8 +1,6 @@
-Copyright (c) 2012-2014 Matt Huggins
+MIT License

-----------------------------------------------------------------------
-
-The MIT License
+Copyright (c) 2019 Anxhelo Lushka

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@ -11,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,11 +1,11 @@
-This repo contains the files needed to build the Ura Design website, using Jekyll as the base and several plugins on top. The website will be localizable soon, so everyone can contribute to have the website in as many languages as possible.
+## Ura Design
+This repo contains the files needed to build the Ura Design website, using Jekyll as the base and several plugins on top.

 ## Config file
-The _config.yml file contains the basic settings for building Jekyll, which is done using a server that fetches the files from this repo upon changes and builds it (this ensures we get to keep our custom domain and apply SSL from Let's Encrypt on top of it).
+_config.yml file contains the basic settings for building Jekyll, which is done using a server that fetches the files from this repo upon changes and builds it (this ensures we get to keep our custom domain and apply SSL from Let's Encrypt on top of it).

 ## New Posts
 New posts can be added by creating a new Markdown file (.md) inside the _posts directory. The file name should start with YYYY-MM-DD-post-name and have the .md extension in order to be recognized and for it to be live in the final website.

-## Caching
-There is caching applied on most of the static elements such as the logo, css and js files to increase the page access speed and lower overhead on the server (this also helps lower the total number of requests to the server by using locally cached files, read more [here](https://gtmetrix.com/leverage-browser-caching.html)).
-
+### Website
+The website was designed to be as lightweight as possible. The underlying technology used is Jekyll. The CSS is built from SCSS files and everything is contained to remove the need for 3rd party assets and unnecessary connections.
--- a/_config.yml
+++ b/_config.yml
@ -1,26 +1,20 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely need to edit after that.
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
+# Site Settings
 title: Ura Design
 email: hello@ura.design
 description: > # this means to ignore newlines until "baseurl:"
  Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects.
 baseurl: "" # the subpath of your site, e.g. /blog
-# url: "http://yourdomain.com" # the base hostname & protocol for your site
+url: "" # the base hostname & protocol for your site
 twitter_username: uracreative
 github_username:  uracreative

-# Build settings
+# Build Settings
 markdown: kramdown
+markdown_ext:  markdown,mkdown,mkdn,mkd,md

 plugins:
  - jekyll-paginate
  - jekyll-compose

 paginate: 6
-paginate_path: "blog/older:num"
+paginate_path: "blog/page-:num"
--- a/_data/authors.yml
+++ b/_data/authors.yml
@ -0,0 +1,35 @@
+anja_xhakani:
+    name: Anja Xhakani
+    email: anja@ura.design
+    image: "../../../assets/img/about/AnjaHeadshot.png"
+    web: https://twitter.com/axhakani
+    site: #
+    bio: #
+anxhelo_lushka:
+    name: Anxhelo Lushka
+    email: anxhelo@ura.design
+    image: "../../../assets/img/about/AnxheloHeadshot.png"
+    web: https://twitter.com/anxhelolushka
+    site: https://lushka.al
+    bio: "Anxhelo is the swiss knife of Ura. A jack of all trades and a master of most. He is currently struggling to finish his bachelor degree but eventually he will succeed. Follow him on Twitter because he recently reopened his account."
+elio_qoshi:
+    name: Elio Qoshi
+    email: elio@ura.design
+    image: "../../../assets/img/about/ElioHeadshot.png"
+    web: https://twitter.com/elioqoshi
+    site: https://elioqoshi.me
+    bio: #
+ergi_shkelzeni:
+    name: Ergi Shkelzeni
+    email: ergi@ura.design
+    image: "../../../assets/img/about/ErgiHeadshot.png"
+    web: https://github.com/ergish
+    site: #
+    bio: #
+renata_gegaj:
+    name: Renata Gegaj
+    email: renata@ura.design
+    image: "../../../assets/img/about/RenataHeadshot.png"
+    web: https://twitter.com/RenataGegaj
+    site: #
+    bio: #
--- a/_data/nav.yml
+++ b/_data/nav.yml
@ -1,28 +1,10 @@
+- name: Who we are
+  path: about/
+- name: Plans & Services
+  path: plans
+- name: Work
+  path: projects/
 - name: Blog
  path: blog/
-  section_id: blog
-  children:
-    - name: Events
-      path: events
- name: Services
-  path: services
-  section_id: pages
-  children:
-   - name: Request
-     path: request
- name: Projects
-  path: projects
-  children:
-   - name: Logobridge
-     path: logobridge
-     section_id: works
- name: Support Us
-  path: support-us
- name: About
-  path: about
-  section_id: pages
-  children:
-    - name: Contact
-      path: contact
-    - name: Jobs
-      path: jobs
+- name: Contact
+  path: contact
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -1,38 +1,53 @@
-<div class="full no-padding footer blue centered-text">
-  <div class="two spacing"></div>
-  <div class="row">
-    <div class="small-12 columns">
-          <p>Made with <i class="fa fa-heart" style="color: red;" aria-hidden="true"></i> in <a href="https://en.wikipedia.org/wiki/Tirana" target="_blank">Tirana, Albania</a><p>
-      <div class="one spacing"></div>
-      <ul class="socials">
-        <li><a href="https://twitter.com/uracreative" target="_blank"><i class='fab fa-twitter'></i></a></li>
-        <li><a href="https://github.com/uracreative/ura.design/" target="_blank"><i class='fab fa-github'></i></a></li>
-      </ul>
-      <p>Committed to Free Software, Internet Freedom, and <a href="http://opensourcedesign.net/">Open Source Design</a></p>
-      <p> Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed <a href="http://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0 International</a> by Ura Design</p>
-      <p><a href="https://tinyletter.com/uracreative/archive" target="_blank">Newsletter Archive</a></p>
-      <p><a href="{{ site.baseurl }}/privacy-policy" target="_blank">Privacy Policy</a></p>
-      <div class="two spacing"></div>
-      <p class="back-to-top"><a href="#"><i class="fas fa-chevron-up"></i>Back to top</a></p>
-    </div>
-  </div>
-  <div class="spacing"></div>
-</div>
+<div class="footer">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4 col-sm-12 pb-4">
+        <svg width="146" height="48" viewBox="0 0 146 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12.0957 48L20.8749 23.6125C13.4613 24.5803 6.63306 27.6771 0.975342 32.3224C2.341 38.7095 6.43797 44.3225 12.0957 48Z" fill="white" />
+          <path d="M40.3844 48C46.0421 44.5161 50.1391 38.9031 51.6999 32.3224C46.0421 27.4836 39.2139 24.3868 31.8003 23.6125L40.3844 48Z" fill="white" />
+          <path d="M52.4802 27.2906V26.1293C52.4802 11.613 40.7746 0 26.3376 0C11.9007 0 0 11.613 0 26.1293V27.2906C7.60865 21.6777 16.7781 18.5809 26.3376 18.5809C35.7021 18.5809 44.8715 21.6777 52.4802 27.2906Z" fill="white" />
+          <path d="M85.256 38.7099C83.305 41.226 80.1835 42.5809 76.8669 42.3873C70.819 42.3873 65.5515 38.9035 65.5515 29.226V9.87109H72.9651V28.0647C72.9651 33.2905 75.3062 35.4196 79.013 35.4196C82.7197 35.4196 85.4511 33.4841 85.4511 28.0647V10.2582H92.8646V42.0002H85.4511L85.256 38.7099Z"
+            fill="white" />
+          <path d="M98.9126 10.2587H106.326V13.5491C107.497 11.0329 110.033 9.29096 112.959 9.48451C115.105 9.48451 117.251 10.2587 119.007 11.6136L118.032 18.1943C116.471 17.033 114.52 16.4523 112.569 16.6459C109.838 16.6459 106.521 18.1943 106.521 24.1943V42.0009H99.1077V10.2587H98.9126Z"
+            fill="white" />
+          <path d="M138.712 39.2908C136.566 41.4198 133.444 42.7747 130.127 42.5811C123.494 42.5811 118.422 38.9037 118.422 31.9359C118.422 24.5809 124.665 21.2906 130.908 21.2906C133.639 21.097 136.175 21.6777 138.517 22.839V21.2906C138.517 17.226 136.566 15.4841 132.274 15.4841C128.762 15.4841 125.445 16.4518 122.714 18.5809L120.373 12.5808C124.08 10.2582 128.567 8.90335 132.859 9.0969C138.517 9.0969 145.54 10.4518 145.54 21.097V41.6134H138.517L138.712 39.2908ZM138.712 33.2907V29.0326C136.761 28.2584 134.615 27.6778 132.469 27.8713C128.762 27.8713 125.835 29.0326 125.835 32.1294C125.835 34.6456 127.786 36.194 131.688 36.194C134.224 36.194 136.761 35.2262 138.712 33.2907Z"
+            fill="white" />
+        </svg>
+        <p class="body-10 white pt-3">Committed to Free Software, Internet Freedom, and Open Source Design</p>
+      </div>
+
+
+      <div class="col-md-7 col-sm-12 offset-md-1">
+        <div class="row">
+          <div class="col">
+            <p class="body-20 white pb-3">Questions? <a class="ul-hl" href="mailto:hello@ura.design">hello@ura.design</a></p>
+            <div class="footer-flex">
+            <a class="title-10 white ul-hl" href="https://twitter.com/uracreative" target="_blank" rel="noopener">TWITTER</a>
+            <div class="separator"></div>
+            <a class="title-10 white ul-hl" href="https://github.com/uracreative" target="_blank" rel="noopener">GITHUB</a>
+            <div class="separator"></div>
+            <a class="title-10 white ul-hl" href="https://logobridge.co" target="_blank" rel="noopener">LOGOBRIDGE</a>
+            </div>

-<script src="{{ "/bower_components/jquery/dist/jquery.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/bower_components/foundation/js/foundation.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/jquery.superslides.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/slick.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/wow.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/jquery.validate.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/bower_components/appear/jquery.appear.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/bower_components/modernizr/modernizr.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/app.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/svg.js" | prepend: site.baseurl }}"></script>
-<script async src="{{ "/js/lazyload.min.js" | prepend: site.baseurl }}"></script>
+            <div class="row pt-5">
+              <div class="col">
+                <p class="size-14">© Ura Design 2019. Some rights reserved. Unless otherwise noted, content on this page is under a Creative Commons license.</p>
+              </div>
+            </div>
+
+            <div class="row pt-1">
+              <div class="col">
+                <a class="ul-hl size-14" href="https://github.com/uracreative/ura.design" target="_blank" rel="noopener">Source Code</a>
+                <div class="hr-space-2"></div>
+                <a class="ul-hl size-14" href="/privacy-policy">Privacy Policy</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>

 <script>
-window.lazyLoadOptions = {
-    elements_selector: ".lazy"
-};
-</script>
+  feather.replace()
+</script>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -3,52 +3,33 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

-  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-  
-  <!-- Metadata -->
-  
+
+<!-- Social: Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  <meta name="twitter:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta property="twitter:image:src" content="{{ site.url }}/assets/img/logobridge.png">
+
+<!-- Social: Facebook / Open Graph -->
+  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  <meta property="og:image" content="{{ site.baseurl }}/assets/img/logobridge.png">
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <meta property="og:site_name" content="{{ site.title }}">
-  {% if page.title %}
-  <meta property="og:title" content="{{ page.title }}">
-  <meta property="og:type" content="article">
-  <meta property="og:description" content="{{ page.excerpt | strip_html }}"/>
-  {% else %}
-  <meta property="og:title" content="{{ site.title }}">
-  <meta property="og:type" content="website">
-  <meta property="og:description" content="{{ site.description }}">
-  {% endif %}
-  {% if page.date %}
-  <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}">
-  {% endif %}
-  <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-  {% if page.tags %}
-  <meta itemprop="keywords" content="{{ page.tags | join: ',' }}" />
-  {% for tag in page.tags %}
-  <meta property="article:tag" content="{{ tag }}">
-  {% endfor %}
-  {% endif %}
-  {% if page.images %}
-  <meta content="https://ura.design/{{ page.images }}" property="og:image">
-  {% else %}
-  <meta content="https://ura.design/images/main/icon.png" property="og:image">
-  {% endif %}
-  <meta name="twitter:card" content="summary" />
-  <meta name="twitter:site" content="@uracreative" />
-  <meta name="twitter:image:src" content="https://ura.design/{{ page.images }}" />
-  
-  <link rel="stylesheet" href="{{ "/css/app.css" | prepend: site.baseurl }}">
-  <link rel="stylesheet" href="{{ "/fonts/overpass/overpass.css" | prepend: site.baseurl }}">
-  <link rel="stylesheet" href="{{ "/css/superslides.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/slick-theme.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/slick.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/animate.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/linea-styles.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/linea-arrows-styles.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/fontawesome-all.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}"/>
-  <link rel="stylesheet" href="{{ "/css/responsive.css" | prepend: site.baseurl }}"/>
-    
+
+<!-- Favicon -->
+  <link rel="shortcut icon" href="{{site.url}}/favicon.ico" type="image/x-icon" />
+
+  <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="stylesheet" href="{{ "/css/fa.css" | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="stylesheet" href="{{ "/css/overpass.css" | prepend: site.baseurl | prepend: site.url }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+
+  <script src="{{ "/assets/js/main.js" | prepend: site.baseurl | prepend: site.url }}"></script>
+  <script src="{{ "/assets/js/top.min.js" | prepend: site.baseurl | prepend: site.url }}"></script>
+  <script src="{{ "/assets/js/feather.min.js" | prepend: site.baseurl | prepend: site.url }}"></script>
+
 </head>
--- a/_includes/header-404.html
+++ b/_includes/header-404.html
@ -1,47 +0,0 @@
-<div class='contain-to-grid sticky transparent'>
-  <nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
-    <ul class='title-area'>
-      <li class="">
-        <h1>
-          <a href='{{site.baseurl}}/'><img src="{{site.basurl}}/images/main/logo.svg" width="180.7px" height="56.5px" alt="Ura Logo">
-          </a>
-        </h1>
-      </li>
-    </ul>
-    <div id="menu-toggler" class="right">
-      <a href='#'>
-        <i class="icon-arrows-hamburger-2"></i>
-      </a>
-    </div>
-    <section class='top-bar-section closed'>
-      <ul class='right'>
-
-        {% for item in site.data.nav %}
-          {% if item.section_id == page.section_id %}
-            {% assign active_class = "active" %}
-          {% else %}
-            {% assign active_class = "" %}
-          {% endif %}
-
-          {% if item.children %}
-            <li class="has-dropdown {{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-              <ul class='dropdown'>
-                {% for child in item.children %}
-                  <li>
-                    <a href="{{site.baseurl}}/{{ child.path }}">{{ child.name }}</a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </li>
-          {% else %}
-            <li class="{{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-            </li>
-          {% endif %}
-        {% endfor %}
-
-      </ul>
-    </section>
-  </nav>
-</div>
--- a/_includes/header-post.html
+++ b/_includes/header-post.html
@ -1,47 +0,0 @@
-<div class='contain-to-grid sticky transparent'>
-  <nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
-    <ul class='title-area'>
-      <li class="">
-        <h1>
-          <a href='{{site.baseurl}}/'><img src="/images/main/logo.svg" width="180.7px" height="56.5px alt="Ura Logo">
-          </a>
-        </h1>
-      </li>
-    </ul>
-    <div id="menu-toggler" class="right">
-      <a href='#'>
-        <i class="icon-arrows-hamburger-2"></i>
-      </a>
-    </div>
-    <section class='top-bar-section closed'>
-      <ul class='right'>
-
-        {% for item in site.data.nav %}
-          {% if item.section_id == page.section_id %}
-            {% assign active_class = "active" %}
-          {% else %}
-            {% assign active_class = "" %}
-          {% endif %}
-
-          {% if item.children %}
-            <li class="has-dropdown {{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-              <ul class='dropdown'>
-                {% for child in item.children %}
-                  <li>
-                    <a href="{{site.baseurl}}/{{ child.path }}">{{ child.name }}</a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </li>
-          {% else %}
-            <li class="{{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-            </li>
-          {% endif %}
-        {% endfor %}
-
-      </ul>
-    </section>
-  </nav>
-</div>
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,47 +1,30 @@
-<div class='contain-to-grid sticky transparent'>
-  <nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
-    <ul class='title-area'>
-      <li class="">
-        <h1>
-          <a href='{{site.baseurl}}/'><img src="../images/main/logo.svg" width="180.7px" height="56.5px" alt="Ura Logo">
-          </a>
-        </h1>
-      </li>
-    </ul>
-    <div id="menu-toggler" class="right">
-      <a href='#'>
-        <i class="icon-arrows-hamburger-2"></i>
-      </a>
-    </div>
-    <section class='top-bar-section closed'>
-      <ul class='right'>
+<div class="container">

-        {% for item in site.data.nav %}
-          {% if item.section_id == page.section_id %}
-            {% assign active_class = "active" %}
-          {% else %}
-            {% assign active_class = "" %}
-          {% endif %}
+<div id="navigation" class="navbar">
+<a class="nav-brand" href="/" title="Home"><img src="{{site.url}}/assets/img/logo.svg" alt="Ura Design Logo" class="logo"></a>

-          {% if item.children %}
-            <li class="has-dropdown {{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-              <ul class='dropdown'>
-                {% for child in item.children %}
-                  <li>
-                    <a href="{{site.baseurl}}/{{ child.path }}">{{ child.name }}</a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </li>
-          {% else %}
-            <li class="{{active_class}}">
-              <a href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
-            </li>
-          {% endif %}
-        {% endfor %}
+<a id="menu" href="javascript:void(0);" onclick="menu()">
+    <i class="fas fa-bars align-right"></i>
+</a>

-      </ul>
-    </section>
-  </nav>
+<nav id="topnav" class="nav-menu">
+    {% for item in site.data.nav %}
+          <a class="nav-link" href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
+    {% endfor %}
+</nav>
 </div>
+
+</div>
+
+<script>
+function menu() {
+  var x = document.getElementById("topnav");
+  if (x.className === "nav-menu") {
+    x.className += " responsive";
+    document.getElementById("navigation").style.height = "300px";
+  } else {
+    x.className = "nav-menu";
+    document.getElementById("navigation").style.height = "100px";
+  }
+}
+</script>
--- a/_includes/header_color.html
+++ b/_includes/header_color.html
@ -0,0 +1,57 @@
+<header class="site-header-cl">
+
+  <div class="container">
+
+    <div class="navbar">
+    <a class="nav-brand" href="/" title="Home"><img src="../assets/img/logo-white.svg" alt="Ura Design Logo" class="logo"></a>
+
+    <a id="menuwhite" href="javascript:void(0);" onclick="menuwhite()">
+        <i class="fas fa-bars align-right"></i>
+    </a>
+
+    <nav id="topnav-white" class="nav-menu-white">
+        {% for item in site.data.nav %}
+              <a class="nav-link-white" href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
+        {% endfor %}
+    </nav>
+    </div>
+
+    </div>
+
+</header>
+
+<script>
+  document.getElementById("defaultOpen").click();
+
+  function plan(evt, period) {
+    // Declare all variables
+    var i, tabcontent, tablinks;
+
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+      tabcontent[i].style.display = "none";
+    }
+
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    // Show the current tab, and add an "active" class to the button that opened the tab
+    document.getElementById(period).style.display = "block";
+    evt.currentTarget.className += " active";
+  }
+
+  function menuwhite() {
+    var x = document.getElementById("topnav-white");
+    if (x.className === "nav-menu-white") {
+      x.className += " responsive";
+      document.getElementById("navigation").style.height = "300px";
+    } else {
+      x.className = "nav-menu-white";
+      document.getElementById("navigation").style.height = "100px";
+    }
+  }
+</script>
--- a/_includes/header_home.html
+++ b/_includes/header_home.html
--- a/_includes/header_plans.html
+++ b/_includes/header_plans.html
@ -0,0 +1,207 @@
+<header class="site-header-color">
+
+  <div class="container">
+
+    <div class="navbar">
+      <a class="nav-brand" href="/" title="Home"><img src="../assets/img/logo-white.svg" alt="Ura Design Logo" class="logo"></a>
+
+      <a id="menuwhite" href="javascript:void(0);" onclick="menuwhite()">
+        <i class="fas fa-bars align-right"></i>
+      </a>
+
+      <nav id="topnav-white" class="nav-menu-white">
+        {% for item in site.data.nav %}
+        <a class="nav-link-white" href="{{site.baseurl}}/{{ item.path }}">{{ item.name }}</a>
+        {% endfor %}
+      </nav>
+    </div>
+
+  </div>
+
+  <div class="site-header center container white">
+
+    <h1 class="display-20 white mb-1">Plans</h1>
+    <p class="white">We offer rolling plans for our DAS (Design as a Service) packages to cater your ongoing design<br>needs. No contracts, cancel anytime. Need something custom or one-off? Contact us!</p>
+
+
+    <div class="tab pt-4 pb-4">
+      <button class="tablinks" onclick="plan(event, 'weekly')">Weekly</button>
+      <button class="tablinks" onclick="plan(event, 'monthly')" id="defaultOpen">Monthly</button>
+    </div>
+
+    <div id="weekly" class="tabcontent">
+      <div class="row justify-content-md-center">
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-basic">Basics</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price indigo">$120<span class="per-period">/week</span></p>
+              <p class="description">Your own in-house designer to get your product polished. Great for small projects which want to improve their user experience and design without going all-in.</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Brand Identity projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> UI design (mockups &wireframes)</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Web accessibility audit</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> 5 Business days turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> 1 ongoing project</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Open source workflow</p>
+              <a class="button-cta-basic" href="mailto:hello@ura.design?subject=Ura%20Basics%20Plan">Get started with Basics</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-pro">Pro</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price blue-800">$260<span class="per-period">/week</span></p>
+              <p class="description">Your In-house design department to assist you with all your Branding, UX and Usability needs. Perfect if you want to take your product design further.</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Brand Identity projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> UX / UI design & web development</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Design Systems / Style Guides</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Usability research & testing</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Web accessibility audit</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> 4 Business days turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> 1 ongoing project</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Open source workflow</p>
+              <a class="button-cta-pro" href="mailto:hello@ura.design?subject=Ura%20Pro%20Plan">Get started with Pro</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-custom">Custom</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price">Custom</p>
+              <p class="description">Need something else on an ongoing basis? We can help no matter if it’s about having your back or being part of your team to launch a project. Contact us and let’s talk!</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Flexible ongoing projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Custom turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Copywriting</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Privacy-enhancing tech support</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Website performance and security</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Usability testing (in-person)</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Workshops & trainings</p>
+              <a class="button-cta-custom" href="mailto:hello@ura.design?subject=Ura%20Custom%20Plan">Contact Us</a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <div id="monthly" class="tabcontent">
+      <div class="row justify-content-md-center">
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-basic">Basics</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price indigo">$400<span class="per-period">/month</span></p>
+              <p class="description">Your own in-house designer to get your product polished. Great for small projects which want to improve their user experience and design without going all-in.</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Brand Identity projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> UI design (mockups &wireframes)</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Web accessibility audit</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> 5 Business days turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-basic size-10 mr-1"></i> 1 ongoing project</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-basic size-10 mr-1"></i> Open source workflow</p>
+              <a class="button-cta-basic" href="mailto:hello@ura.design?subject=Ura%20Basics%20Plan">Get started with Basics</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-pro">Pro</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price blue-800">$1000<span class="per-period">/month</span></p>
+              <p class="description">Your In-house design department to assist you with all your Branding, UX and Usability needs. Perfect if you want to take your product design further.</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Brand Identity projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> UX / UI design & web development</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Design Systems / Style Guides</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Usability research & testing</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Web accessibility audit</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> 4 Business days turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-pro size-10 mr-1"></i> 1 ongoing project</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-pro size-10 mr-1"></i> Open source workflow</p>
+              <a class="button-cta-pro" href="mailto:hello@ura.design?subject=Ura%20Pro%20Plan">Get started with Pro</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="col col-md-4 pb-4">
+          <div class="pricing-box">
+            <div class="row pb-3 no-margins">
+              <div class="pill-custom">Custom</div>
+            </div>
+            <div class="no-margins black align-left">
+              <p class="price">Custom</p>
+              <p class="description">Need something else on an ongoing basis? We can help no matter if it’s about having your back or being part of your team to launch a project. Contact us and let’s talk!</p>
+              <hr>
+              <p class="pt-3 size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Flexible ongoing projects</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Custom turnaround time</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Copywriting</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Privacy-enhancing tech support</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Website performance and security</p>
+              <p class="size-16"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Usability testing (in-person)</p>
+              <p class="size-16 pb-3"><i class="fas fa-check white bg-custom size-10 mr-1"></i> Workshops & trainings</p>
+              <a class="button-cta-custom" href="mailto:hello@ura.design?subject=Ura%20Custom%20Plan">Contact Us</a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+</header>
+
+<script>
+  document.getElementById("defaultOpen").click();
+
+  function plan(evt, period) {
+    // Declare all variables
+    var i, tabcontent, tablinks;
+
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+      tabcontent[i].style.display = "none";
+    }
+
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    // Show the current tab, and add an "active" class to the button that opened the tab
+    document.getElementById(period).style.display = "block";
+    evt.currentTarget.className += " active";
+  }
+
+  function menuwhite() {
+    var x = document.getElementById("topnav-white");
+    if (x.className === "nav-menu-white") {
+      x.className += " responsive";
+    } else {
+      x.className = "nav-menu-white";
+    }
+  }
+</script>
--- a/_includes/services.html
+++ b/_includes/services.html
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@ -2,47 +2,42 @@
 layout: default
 ---

-<div style="background-color: #3399d4;" class="full new">
-  <div class="section-title new">
+<div class="container pb-3">
+  <div class="site-header">
    <div class="row">
-      <div class="medium-10 medium-centered columns">
-        <h1 style="color: #fff; font-size: 2rem;" class="wow slideInDown">Blog</h1>
-      </div>
+    <div class="col-md-9 col-sm-12">
+    <h1 class="align-left mb-2">Blog</h1>
    </div>
    </div>
  </div>
 </div>
  
-<div class="three spacing"></div>
-      {{content}}
+<div class="bg-mute">
+  <div class="container">
+      {{ content }}
+  </div>
+</div>
+
+<div class="container pt-5 pb-3">
      {% if paginator %}
-<div class="full light-grey blog">
-  <nav class='wrapper'>
-    <div class="row">
-      <div class="small-6 columns">
+    <div class="row justify-content-center align-middle pt-2 pb-4">
          {% if paginator.previous_page %}
            {% if paginator.previous_page == 1 %}
-              <a href="/blog" class="next button boxed black" style="float: right;"><i class="fa fa-angle-double-left"></i> Newer Entries</a>
+              <a href="/blog"><i class="rounded-button background-blue-500 white" data-feather="arrow-left"></i></a>
            {% else %}
-              <a href="/blog/older{{ paginator.previous_page }}" class="next button boxed black" style="float: right;"><i class="fa fa-angle-double-left"></i>Newer Entries</a>
+              <a href="/blog/page-{{ paginator.previous_page }}"><i class="rounded-button background-blue-500 white" data-feather="arrow-left"></i></a>
            {% endif %}
          {% else %}
-            <!-- <span class="newer">Newer Entries</span> -->
          {% endif %}
-        </div>
-      <div class="small-6 columns">      
+          <p class="caption-20 pl-4 pr-4 mb-1">Page <strong class="black">{{ paginator.page }} of {{ paginator.total_pages }}</strong></p>
        {% if paginator.next_page %}
            {% if paginator.next_page == 1 %}
-              <a href="/blog" class="previous button boxed black" style="float: left;">Older Entries <i class="fa fa-angle-double-right"></i></a>
+              <a href="/blog"><i class="rounded-button background-blue-500 white" data-feather="arrow-right"></i></i></a>
            {% else %}
-              <a href="/blog/older{{ paginator.next_page }}" class="previous button boxed black" style="float: left;">Older Entries <i class="fa fa-angle-double-right"></i></a>
+              <a href="/blog/page-{{ paginator.next_page }}"><i class="rounded-button background-blue-500 white" data-feather="arrow-right"></i></a>
            {% endif %}
          {% else %}
-            <!-- <span class="older">Older Entries</span> -->
          {% endif %}
-      </div>
    </div>
-  </nav>
-</div>
 {% endif %}
-
+</div>
--- a/_layouts/color.html
+++ b/_layouts/color.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  {% include head.html %}
+  <body>
+    <script>addBackToTop({
+      diameter: 56,
+      backgroundColor: '#fff',
+      textColor: '#000'
+    })</script>
+    {% include header_color.html %}
+    <div>
+        {{ content }}
+    </div>
+    {% include footer.html %}
+  </body>
+</html>
--- a/_layouts/default-post.html
+++ b/_layouts/default-post.html
@ -1,18 +0,0 @@
-<!DOCTYPE html>
- <html lang="en-US"> 
-
-  {% include head.html %}
-
-  <body>
-
-    {% include header-post.html %}
-
-
-    {{ content }}
-
-
-    {% include footer.html %}
-
-  </body>
-
-</html>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -1,18 +1,16 @@
 <!DOCTYPE html>
- <html lang="en-US"> 
-
+<html lang="en-US">
  {% include head.html %}
-
  <body>
-
-    {% include header-404.html %}
-
-
-    {{ content }}
-    
-
+    <script>addBackToTop({
+      diameter: 56,
+      backgroundColor: '#fff',
+      textColor: '#000'
+    })</script>
+    {% include header.html %}
+      <div>
+        {{ content }}
+    </div>
    {% include footer.html %}
-
  </body>
-
-</html>
+</html>
--- a/_layouts/home.html
+++ b/_layouts/home.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  {% include head.html %}
+  <body>
+    <script>addBackToTop({
+      diameter: 56,
+      backgroundColor: '#fff',
+      textColor: '#000'
+    })</script>
+    {% include header_home.html %}
+      <div>
+        {{ content }}
+    </div>
+    {% include footer.html %}
+  </body>
+</html>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -0,0 +1,14 @@
+---
+layout: default
+---
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+  </header>
+
+  <article class="post-content">
+    {{ content }}
+  </article>
+
+</div>
--- a/_layouts/plans.html
+++ b/_layouts/plans.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  {% include head.html %}
+  <body>
+    <script>addBackToTop({
+      diameter: 56,
+      backgroundColor: '#fff',
+      textColor: '#000'
+    })</script>
+    {% include header_plans.html %}
+    <div>
+        {{ content }}
+    </div>
+    {% include services.html %}
+    {% include footer.html %}
+  </body>
+</html>
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,52 +1,95 @@
 ---
-layout: default-post
-section_id: blog
+layout: default
 ---

-<div class="full blog">
-  <div class="post single">
-    <div class="row">
-      <div class="large-8 large-centered columns">
-        <div class="post-content">
-          <h2 id="page-title">{{page.title}}</h2>
-          <p class='info'>
-            {% if page.categories != empty %}
-              <span>
-                {% for cat in page.categories %}
-                  <a href="#">{{cat | capitalize }}</a>
-                  {% unless forloop.last %}
-                      ,
-                  {% endunless %}
-                {% endfor %}
-              </span>
-              /
+{% assign author = site.data.authors[page.author] %}
+
+  <div class="container pt-4">
+    <div class="row justify-content-center">
+<div class="col-md-6 col-sm-12">
+  <div class="site-header pt-0">
+            <div class="bg-mobile">
+                <p class="caption-10-bold indigo">{{ page.type }}</p>
+                <p class="display-20 pt-0 mt-0 mb-1">{{ page.title }}</p>
+            {% assign words = page.content | number_of_words %}
+            {% if words < 360 %}
+            <p class="body-10-bold gray-700">1 min read</p>
+            {% else %}
+            <p class="body-10-bold gray-700">{{ words | divided_by:150 }} min read</p>
            {% endif %}
-            <span>{{page.date | date: "%B %d, %Y" }}</span> by <a href="{{page.link}}" target="_blank">{{page.author}}</a>
-          </p>
-          {{content}}
-        </div>
-      </div>
+            </div>
+            <img class="rounded mt-4 mb-3 author-mobile" src="{% if author %}{{ author.image }}{% endif %}" width="64px" height="64px" />
+            <p class="body-10 gray-700">{% if author %}{{ author.name }}{% endif %} • {{ page.date | date: "%b %-d, %Y" }}</p>
+  </div>
    </div>
  </div>
+  </div>
+
+
+<div class="container">
+  <div class="row">
+<div class="col-md-6 col-sm-12 offset-md-3 pt-5">
+  <article class="post-content">
+    {{ content }}
+  </article>
+</div>
+</div>
+</div>
+
+<div class="container pt-5">
+  <div class="row">
+        <div class="col-md-6 col-sm-12 offset-md-3">
+            <hr class="mb-5">
+            <div class="row">
+              <div class="col-md-2 col-sm-12">
+                <img class="rounded mb-4" src="{% if author %}{{ author.image }}{% endif %}" width="64px" height="64px" />
+              </div>
+              <div class="col-md-9">
+                <p class="caption-10 black mb-2">{% if author %}By {{ author.name }}{% endif %}</p>
+                <p class="body-10 gray-700">{% if author %}{{ author.bio }}{% endif %}</p>
+              </div>
+            </div>
+        </div>
+  </div>
 </div>
-<div class="full light-grey blog">
-  <nav class='wrapper'>
-    <div class="row">
-      <div class="small-6 columns">
-        {% if page.previous.url %}
-          <a class="previous button boxed black" href='{{page.previous.url | replace:'.html','' }}'>
-            <i class='fa fa-angle-left'></i> Previous post
-          </a>
-        {% endif %}

-      </div>
-      <div class="small-6 columns">
-        {% if page.next.url %}
-          <a class="next button boxed black" href='{{page.next.url | replace:'.html','' }}'>
-            Next post <i class='fa fa-angle-right'></i>
-          </a>
-        {% endif %}
-      </div>
-    </div>
-  </nav>
+
+<div class="container pt-5 pb-5">
+  <div class="row pb-5">
+        <div class="col-md-6 col-sm-12 offset-md-3">
+            <hr class="mb-5">
+              {% if page.previous.url %}
+              <div class="row">
+                <div class="col-md-6 offset-md-2">
+                  <p class="caption-20 gray-700">Previous post</p>
+                </div>
+              </div>
+              <div class="row">
+              <div class="col-md-2 col-sm-12">
+                    <a href='{{ page.previous.url | replace:'.html','' }}'><img class="mb-4" src="../../../assets/img/{{ page.previous.image[0] }}" width="75px" height="auto" /></a>
+              </div>
+               <div class="col-md-9">
+                <p class="caption-10-bold indigo mb-0">{{ page.previous.type }}</p>
+                <a class="ul-hl display-30" href='{{ page.previous.url | replace:'.html','' }}'>{{ page.previous.title }}</a>
+              </div>
+            </div>
+              {% endif %}
+              {% if page.next.url %}
+              <div class="row pt-5">
+                <div class="col-md-6 offset-md-2">
+                  <p class="caption-20 gray-700">Next post</p>
+                </div>
+              </div>
+              <div class="row">
+              <div class="col-md-2 col-sm-12">
+                    <a href='{{ page.next.url | replace:'.html','' }}'><img class="mb-4" src="../../../assets/img/{{ page.next.image[0] }}" width="75px" height="auto" /></a>
+              </div>
+              <div class="col-md-9">
+                <p class="caption-10-bold indigo mb-0">{{ page.next.type }}</p>
+                <a class="ul-hl display-30" href='{{ page.next.url | replace:'.html','' }}'>{{ page.next.title }}</a>
+              </div>
+            </div>
+              {% endif %}
+        </div>
+  </div>
 </div>
--- a/_layouts/redirect.html
+++ b/_layouts/redirect.html
@ -1,6 +0,0 @@
-<!DOCTYPE html>
- <html lang="en-US"> 
-<head>
-    <meta http-equiv="Refresh" content="0; url=https://logobridge.co" />
-  </head>
-</html>
--- a/_posts/2017-01-03-Hello-open-source-design-world.md
+++ b/_posts/2017-01-03-Hello-open-source-design-world.md
@ -5,14 +5,14 @@ author: Redon Skikuli
 link: https://twitter.com/rskikuli
 date: 2017-01-03 11:00:00 +0200
 categories:
-images:
- images/blog/hello_world.png
+image:
+- /blog/hello_world.png
 tags:
 - Hello
 - Blog
 - Open Source Design
 excerpt:
-  Hello design-onauts & free open source hacktivists and welcome to our blog! This will be our own space in the big ocean of chaotic, decentralized, beautiful and amazing flow of interactive information that is known in da hood as ‘the internet‘. We will share the latest works that make us proud, events we participate and […]
+  Hello design-onauts & free open source hacktivists and welcome to our blog! This will be our own space in the big ocean of chaotic, decentralized, beautiful and amazing flow
 ---

 Hello design-onauts & free open source hacktivists and welcome to our blog!
--- a/_posts/2017-01-24-wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.md
+++ b/_posts/2017-01-24-wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.md
@ -5,8 +5,8 @@ author: Redon Skikuli
 link: https://twitter.com/rskikuli
 date: 2017-01-24 12:00:00 +0200
 categories:
-images:
- images/blog/ura-wikispeech.png
+image:
+- /blog/ura-wikispeech.png
 header:
 - images/blog/ura-wikispeech.png
 tags:
@ -15,7 +15,7 @@ tags:
 - Logo
 - UX Design
 excerpt:
-  At Ura we <3 Wikipedia and other projects empowered by the Wikimedia Foundation such as Wikidata, Commons and Wikivoyage to mention a few. Actually, the organization has initiated and manages amazing projects in the filed of open knowledge and open source software, which labels it to our conscience as one of the most important pillars […]
+  At Ura we <3 Wikipedia and other projects empowered by the Wikimedia Foundation such as Wikidata, Commons and Wikivoyage to mention a few. Actually, the organization
 ---

 At Ura we <3 Wikipedia and other projects empowered by the <a href="https://www.wikimedia.org/" target="blank">Wikimedia Foundation</a> such as <a href="https://www.wikidata.org/wiki/Wikidata:Main_Page" target="blank">Wikidata</a>, <a href="https://commons.wikimedia.org/wiki/Main_Page" target="blank">Commons</a> and <a href="https://www.wikivoyage.org/" target="blank">Wikivoyage</a> to mention a few. Actually, the organization has initiated and manages amazing projects in the filed of open knowledge and open source software, which labels it to our conscience as one of the most important pillars of floss and open data culture. The latest addition to the list of the projects we really like, Wikimedia recently announced <a href="https://www.mediawiki.org/wiki/Wikispeech" target="blank">Wikispeech</a>, a text-to-speech tool with a focus on accessibility.
--- a/_posts/2017-02-11-open-source-design-workshop-open-labs-hackerspace-tirana.md
+++ b/_posts/2017-02-11-open-source-design-workshop-open-labs-hackerspace-tirana.md
@ -5,8 +5,8 @@ author: Redon Skikuli
 link: https://twitter.com/rskikuli
 date: 2017-02-11 12:00:00 +0200
 categories:
-images:
- images/blog/osd_event.png
+image:
+- /blog/osd_event.png
 header:
 - images/blog/workshop-1.jpg
 tags:
@ -14,7 +14,7 @@ tags:
 - Workshop
 - UX Design
 excerpt:
- 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 […]
+ 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
 ---

 <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>
--- a/_posts/2017-08-25-ura-sha-2017.md
+++ b/_posts/2017-08-25-ura-sha-2017.md
@ -5,15 +5,13 @@ author: Redon Skikuli
 link: https://twitter.com/rskikuli
 date: 2017-08-25 12:00:00 +0200
 categories:
-images:
- images/blog/sha1-thumb.jpg
-header:
- images/blog/sha1.jpg
+image:
+- /blog/sha1-thumb.jpg
 tags:
 - Still Hacking Anyway
 - SHA2017
 excerpt:
-  Two weeks ago we had Silva Arapi to join our team as our new communications manager. Silva has been a member of Open Labs Hackerspace in Tirana for the last two years and she has been contributing for different open source projects, so we were pleased to welcome on board someone who knows and believes […]
+  Two weeks ago we had Silva Arapi to join our team as our new communications manager. Silva has been a member of Open Labs Hackerspace in Tirana for the last two years
 ---

 <p>Two weeks ago we had <a href="https://silva.arapi.tech/" target="blank">Silva Arapi</a> to join our team as our new communications manager. Silva has been a member of <a href="https://openlabs.cc/en" target="blank">Open Labs Hackerspace</a> in Tirana for the last two years and she has been contributing for different open source projects, so we were pleased to welcome on board someone who knows and believes in the open source ethics.</p>
--- a/_posts/2018-01-09-ura-work-week-november-2017.md
+++ b/_posts/2018-01-09-ura-work-week-november-2017.md
@ -5,13 +5,13 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-01-09 12:00:00 +0200
 categories:
-images:
- images/blog/work_week_2017.png
+image:
+- image/blog/work_week_2017.png
 tags:
 - Ura Work Week
 - Identihub
 excerpt:
-  Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming… is also good to have from time to time. At Ura we all work from home, so we have our "Ura work week" every 6 months as a way to bring the team […]
+  Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming…
 ---

 <p>Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming… is also good to have from time to time.<br />
--- a/_posts/2018-01-15-chaos-communication-congress-2017.md
+++ b/_posts/2018-01-15-chaos-communication-congress-2017.md
@ -5,16 +5,14 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-01-15 12:00:00 +0200
 categories:
-images:
- images/blog/34c3_thumb.png
-header:
- images/blog/elio-ccc.png
+image:
+- /blog/34c3_thumb.png
 tags:
 - Chaos Communication Congress
 - CCC
 - Identihub
 excerpt:
-  Chaos Communication Congress or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club, try to bring up to the spotlight privacy issues and the importance of the human rights on the digital world we “breathe” every day. Through workshops and presentations the […]
+  Chaos Communication Congress or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club
 ---

 <p><a href="https://events.ccc.de/congress/2017/wiki/index.php/Main_Page" target="blank">Chaos Communication Congress</a> or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club, try to bring up to the spotlight privacy issues and the importance of the human rights on the digital world we “breathe” every day. Through workshops and presentations the attendees have the chance to get updated on how the unethical use of the digital resources that we have on our disposal can harm or transform our society.</p>
--- a/_posts/2018-02-09-ura-fosdem-2018.md
+++ b/_posts/2018-02-09-ura-fosdem-2018.md
@ -5,17 +5,15 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-02-09 12:00:00 +0200
 categories:
-images:
- images/blog/Elio-FOSDEM2018-thumb.jpg
-header:
- images/blog/Elio-FOSDEM2018.jpg
+image:
+- /blog/Elio-FOSDEM2018-thumb.jpg
 tags:
 - FOSDEM
 - FOSDEM2018
 - Identihub
 - Open Source Design
 excerpt:
-  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 […]
+  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
 ---

 <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>
--- a/_posts/2018-02-23-inkscape-workshop-tirana.md
+++ b/_posts/2018-02-23-inkscape-workshop-tirana.md
@ -5,16 +5,14 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-02-23 12:00:00 +0200
 categories:
-images:
- images/blog/Inkscape-Workshop-1-thumb.jpg
-header:
- images/blog/Inkscape-Workshop-1.jpg
+image:
+- /blog/Inkscape-Workshop-1-thumb.jpg
 tags:
 - Inkscape
 - Open Source Design
 - Workshop
 excerpt:
-  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, […]
+  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
 ---

 <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>
--- a/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md
+++ b/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md
@ -5,17 +5,15 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-03-12 12:00:00 +0200
 categories:
-images:
- images/blog/home-banner.jpg
-header:
- images/blog/home-banner.jpg
+image:
+- /blog/home-banner.jpg
 tags:
 - Open Tech Fund
 - Usability
 - UX Design
 - Internet Freedom
 excerpt:
-  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 […]
+  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
 ---

 <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>
--- a/_posts/2018-03-19-new-ura-website.md
+++ b/_posts/2018-03-19-new-ura-website.md
@ -5,8 +5,8 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-03-19 12:00:00 +0200
 categories:
-images:
- images/blog/website_thumb.jpg
+image:
+- /blog/website_thumb.jpg
 header:
 - images/blog/new-website.jpg
 tags:
@ -14,7 +14,7 @@ tags:
 - GitHub Pages
 - Jekyll
 excerpt:
- Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too. It was time for us to move away from WordPress to a more contribution friendly platform, such as Jekyll.[…]
+ Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too
 ---

 Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too. It was time for us to move away from WordPress to a more contribution friendly platform, such as [Jekyll](https://jekyllrb.com).
--- a/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md
+++ b/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md
@ -5,8 +5,8 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-03-31 12:00:00 +0200
 categories:
-images:
- images/blog/CryptoCurrencyThumb.jpg
+image:
+- /blog/CryptoCurrencyThumb.jpg
 header:
 - images/blog/CryptoCurrencyBanner.jpg
 tags:
@ -15,7 +15,7 @@ tags:
 - UX design

 excerpt:
- Every day we try to understand the needs of our partners by taking their feedback seriously. During this process we have noticed that some of our partners prefer to use Paypal and others bank transactions, which has been for many years the standard process of payments for services similar to what we offer.[…]
+ Every day we try to understand the needs of our partners by taking their feedback seriously. During this process we have noticed that some of our partners prefer to use Paypal
 ---

 We aim to iterate our processes continously based on the feedback and experiences we have with projects we are lucky to work with. With this in mind, we noticed that some of our partners prefer to use Paypal and others bank transactions, which has been for many years the standard process of payments for services similar to what we offer. As a design studio which highly values decentralized platforms, we have been positively surprised to see growing demand for payment integration of different **cryptocurrencies**. This is the reason that starting from today, we accept payments with some of the most established cryptocurrencies at the moment such as **Bitcoin**, **Ethereum** and **Litecoin**. If none of the above works for you, [let us know](mailto:hello@ura.design) and our team will be happy to find an alternative.
--- a/_posts/2018-05-31-oscal-18-we-were-there.md
+++ b/_posts/2018-05-31-oscal-18-we-were-there.md
@ -5,14 +5,14 @@ author: Mariana Balla
 link: https://twitter.com/marianaballa1
 date: 2018-05-31 12:00:00 +0200
 categories:
-images:
- images/blog/OSCAL_thumbnail.png
+image:
+- /blog/OSCAL_thumbnail.png
 tags:
 - OSCAL
 - Identihub
 - Open Source Design
 excerpt:
- Open Source Conference Albania (OSCAL) is a two-days  annual open source event held in Tirana, Albania since 2014. The conference gathers open source enthusiasts from all around the world with a considerable number of attendees being young students from the region of the Balkans. Most members of the Ura team participated on the event, while some of us were part of the organizing team of the event.[…]
+ Open Source Conference Albania (OSCAL) is a two-days  annual open source event held in Tirana, Albania since 2014
 ---

 [Open Source Conference Albania](https://oscal.openlabs.cc/) (OSCAL) is a two-days  annual open source event held in Tirana, Albania since 2014.  The conference gathers open source enthusiasts from all around the world with a considerable number of attendees being young students from the region of the Balkans. With a variety of different talks, workshops, info booths and community meetups, OSCAL brings together free libre open source technology users, developers, academics, governmental agencies and people who share the idea that software should be free and open for the local community and governments to develop and customize to its needs. This year the venue was the iconic Pyramid located in the center of the city, giving also an industrial architectural vibe to the conference for the first time.
--- a/_posts/2018-06-13-reproducible-builds-styleguide.md
+++ b/_posts/2018-06-13-reproducible-builds-styleguide.md
@ -1,19 +1,19 @@
 ---
 layout: post
 title: Reproducible Builds Style Guide
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al
 date: 2018-06-13 12:00:00 +0200
 categories:
-images:
- images/blog/ReproducibleBuilds_thumbnail.png
+image:
+- /blog/ReproducibleBuilds_thumbnail.png
 tags:
 - Reproducible Builds
 - Open Tech Fund
 - Usability Lab
 - Style Guide
 excerpt:
- 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 also decided to work on a fully fledged live style guide.[…]
+ 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
 ---

 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)
--- a/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md
+++ b/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md
@ -1,18 +1,18 @@
 ---
 layout: post
 title: Welcoming Renata, Ura's Usability Researcher
-author: Elio Qoshi
+author: elio_qoshi
 link: https://elioqoshi.me/
 date: 2018-06-17 12:00:00 +0200
 categories:
-images:
- images/blog/Renata_Redon_thumbnail.png
+image:
+- /blog/Renata_Redon_thumbnail.png
 tags:
 - Usability Research
 - Open Source Design
 - Renata Gegaj
 excerpt:
- Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects. We were usually aiming to look under the hood beyond visual design services, something we didn't often get the chance to.[…]
+ Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects
 ---

 Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects. We were usually aiming to look under the hood beyond visual design services, something we didn't often get the chance to. However it's understandable that a logo was a low-hanging fruit for most open source projects and hence that's also what they asked for.
--- a/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md
+++ b/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md
@ -1,18 +1,18 @@
 ---
 layout: post
 title: Style Guides go Beyond Aesthetics
-author: Elio Qoshi
+author: elio_qoshi
 link: https://elioqoshi.me/
 date: 2018-07-02 12:00:00 +0200
 categories:
-images:
- images/blog/osd_event.png
+image:
+- /blog/osd_event.png
 tags:
 - Style Guides
 - Brand Guidelines
 - Open Source Design
 excerpt:
- Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences familiar to the user.[…]
+ Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences familiar to the user
 ---


--- a/_posts/2018-07-04-thunderbird-style-guide.md
+++ b/_posts/2018-07-04-thunderbird-style-guide.md
@ -1,19 +1,19 @@
 ---
 layout: post
 title: Thunderbird Style Guide and Usability Study
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al
 date: 2018-07-05 08:00:00 +0200
 categories:
-images: 
- images/blog/thumb_thunderbird.png
+image: 
+- /blog/thumb_thunderbird.png
 tags:
 - Style Guides
 - Usability Study
 - Open Source Design
 - Thunderbird
 excerpt:
- 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.[…]
+ 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
 ---

 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](https://github.com/protz/thunderbird-conversations/issues/967) and even now our email infrastructure is powered by [ProtonMail and ProtonMail Bridge](https://protonmail.com/bridge/) via Thunderbird.
--- a/_posts/2018-10-20-libocon-2018-visual-identity.md
+++ b/_posts/2018-10-20-libocon-2018-visual-identity.md
@ -5,15 +5,16 @@ author: Kristi Çunga
 link: http://kristicunga.com/
 date: 2018-10-20 08:00:00 +0200
 categories:
-images: 
- images/blog/thumb_libocon.png
+type: Visual Identity
+image: 
+- /blog/thumb_libocon.png
 tags:
 - Visual Identity
 - Conference
 - Open Source Design
 - LibreOffice
 excerpt:
- 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.[…]
+ 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).
 ---

 As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the [LibreOffice Conference](https://libocon.org) (short LibOCon). The conference is organized by the local [Open Labs Hackerspace](https://openlabs.cc) community, with which we share a lot of values and goals together. 
--- a/_posts/2018-11-08-otf-summit-2018.md
+++ b/_posts/2018-11-08-otf-summit-2018.md
@ -5,15 +5,16 @@ author: Mariana Balla
 link: https://marianaballa.com
 date: 2018-11-08 08:00:00 +0200
 categories:
-images: 
- images/blog/otfsummit_thumb.png
+type: Events
+image: 
+- /blog/otfsummit_thumb.png
 tags:
 - Summit
 - Conference
 - OpenTechFund
 - Privacy
 excerpt:
- Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world. While some of us who are based in countries where basic freedom of speech is taken for granted, that's often not the norm for many countries. In the age of internet censorship and surveillance […]
+ Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world.
 ---

 Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world. While some of us who are based in countries where basic freedom of speech is taken for granted, that's often not the norm for many countries. In the age of internet censorship and surveillance we are happy to have received support from [Open Tech Fund (OTF)](https://opentech.fund) to help security and privacy-preserving projects with the mission to improve the internet freedom landscape. 
--- a/_posts/2018-11-16-osd-summit-2018.md
+++ b/_posts/2018-11-16-osd-summit-2018.md
@ -1,19 +1,20 @@
 ---
 layout: post
 title: Open Source Design Summit 2018
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al/
 date: 2018-11-16 08:00:00 +0200
 categories:
-images: 
- images/blog/thumb_osd.png
+type: Events
+image: 
+- /blog/thumb_osd.png
 tags:
 - Meeting
 - Unconference
 - Open Source Design
 - Software
 excerpt:
- During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in Tirana, Albania. Open Source Design is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. […]
+ During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in Tirana, Albania.
 ---

 During the first weekend of November we had the pleasure to facilitate the annual [Open Source Design Summit](https://opensourcedesign.net/summit) in the city we are based in, Tirana.
--- a/_posts/2018-12-03-i2p-usability-study-and-styleguide.md
+++ b/_posts/2018-12-03-i2p-usability-study-and-styleguide.md
@ -1,19 +1,20 @@
 ---
 layout: post
 title: I2P Style Guide and Usability Study
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al/
 date: 2018-12-03 12:00:00 +0200
 categories:
-images: 
- images/projects/i2p_overview.png
+type: Usability Study
+image: 
+- /projects/i2p_overview.png
 tags:
 - Style Guides
 - Usability Study
 - Open Source Design
 - I2P
 excerpt:
- Back when Ura was started 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 people would support us kept us fueled. […]
+ Back when Ura was started in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects.
 ---

 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.
--- a/_posts/2018-12-25-securedrop-styleguide.md
+++ b/_posts/2018-12-25-securedrop-styleguide.md
@ -1,24 +1,25 @@
 ---
 layout: post
 title: SecureDrop Style Guide
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al/
 date: 2018-12-25 12:00:00 +0200
 categories:
-images: 
- images/projects/securedrop_overview.png
+type: Style Guide
+image: 
+- /blog/securedrop_overview.png
 tags:
 - Style Guides
 - Usability Study
 - Open Source Design
 - I2P
 excerpt:
-  Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system […]
+  Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system
 ---

 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](../../../assets/img/projects/securedrop_logo.png)

 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.

@ -34,7 +35,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](../../../assets/img/projects/securedrop_image_alerts.png)

 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://uracreative.github.io/securedrop-styleguide/) and the portfolio [project](../../../projects/securedrop) on our website.
--- a/_posts/2019-02-11-underexposed-2019.md
+++ b/_posts/2019-02-11-underexposed-2019.md
@ -1,38 +1,39 @@
 ---
 layout: post
 title: Underexposed 2019
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al/
 date: 2019-02-11 12:00:00 +0200
 categories:
-images:
- images/blog/underexposed-post.jpg
+type: Events
+image: 
+- /blog/underexposed-post.jpg
 tags:
 - Security
 - Style Guides
 - Open Source Design
 - Event
 excerpt:
-  During early January members of the Ura team participated as mentors in the Underexposed event organized by [Simply Secure] […]
+  During early January members of the Ura team participated as mentors in the Underexposed event organized by Simply Secure
 ---

-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
+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.

-![Underexposed Logo](/images/blog/underexposed.png)
+![Underexposed Logo](../../../assets/img/blog/underexposed.png)

 [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.

 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


-### Monday (7 January)
+## Monday (7 January)

 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](../../../assets/img/blog/underexposed-schedule.jpg)

-### Tuesday (8 January)
+## Tuesday (8 January)

 Our first session covered the basics of [Prototyping](https://en.wikipedia.org/wiki/Prototype). 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.

@ -42,19 +43,19 @@ Unfortunately, this process is often bypassed by users as it's (according to the

 We helped the projects there by creating prototypes on paper, discussing UX problems and possible solutions for them, then digitally creating mockups using [Figma](https://www.figma.com), a proprietary design collaboration tool.

-### Wednesday (9 January)
+## Wednesday (9 January)

 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.

 [Cade](https://shiba.computer/), a designer from Germany, gave a very interesting talk on [Weaponized Design](https://shiba.computer/essay/on-weaponised-design/), 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.

-### Friday (11 January)
+## Friday (11 January)

 Elio's presentation was on Friday, about [Style Guides](https://en.wikipedia.org/wiki/Style_guide) and the process of working in the open. He explained our latest projects, how we worked with [SecureDrop](https://ura.design/projects/securedrop), [I2P](https://ura.design/projects/i2p), [Reproducible Builds](https://ura.design/projects/reproducible-builds), [Thunderbird](https://ura.design/projects/thunderbird) etc.

 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](../../../assets/img/blog/underexposed-presentations.jpg)

 After the presentations, we got to discuss with each other and then head over for drinks somewhere close the venue.

--- a/_posts/2019-05-07-introducing-logobridge.md
+++ b/_posts/2019-05-07-introducing-logobridge.md
@ -1,28 +1,33 @@
 ---
 layout: post
 title: Introducing Logobridge
-author: Anxhelo Lushka
+author: anxhelo_lushka
 link: https://lushka.al/
 date: 2019-05-07 18:00:00 +0200
-categories:
-images:
- images/blog/logobridge-post.png
+categories: 
+type: Branding
+image: 
+- /blog/logobridge-post.png
 tags:
 - Logo
 - Public Domain
 - Open Source Design
 - Service
 excerpt:
-  At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working […]
+  At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working
 ---

-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)
+We at Ura we have been constantly working with open source projects to get their branding up to speed. 

-![Logobridge](/images/blog/logobridge.jpg)
+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](../../../assets/img/blog/logobridge.jpg)

 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](../../../assets/img/blog/logobridge-scrot.png)
+
+## The future

 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.

--- a/_sass/_animate.scss
+++ b/_sass/_animate.scss
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@ -0,0 +1,195 @@
+/* Reset Basic Elements
+ * ============================================== */
+    body, h1, h2, h3, h4, h5, h6,
+    p, blockquote, pre, hr,
+    dl, dd, ol, ul, figure {
+        margin: 0;
+        padding: 0;
+    }
+
+    html {
+     scroll-behavior: smooth;
+    }
+
+/* Basic Styling
+ * ============================================== */
+    body {
+        font-family: $base-font-family;
+        font-size: $base-font-size;
+        line-height: $base-line-height;
+        font-weight: 400;
+        color: $text-color;
+        background-color: $background-color;
+        -webkit-text-size-adjust: 100%;
+        letter-spacing: 0.25px !important;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+/* Set Margin Bottom for Vertical Rhythm
+ * ============================================== */
+    h1, h2, h3, h4, h5, h6,
+    p, blockquote, pre,
+    ul, ol, dl, figure,
+    %vertical-rhythm {
+        margin-bottom: $spacing-unit / 2;
+        letter-spacing: 0px !important;
+    }
+
+/* Images and Figures
+ * ============================================== */
+    img {
+        max-width: 100%;
+        vertical-align: middle;
+    }
+
+    figure > img {
+        display: block;
+    }
+
+    figcaption {
+        font-size: $small-font-size;
+    }
+
+/* Lists
+ * ============================================== */
+    ul, ol {
+        margin-left: $spacing-unit;
+    }
+
+    li {
+        > ul,
+        > ol {
+             margin-bottom: 0;
+        }
+    }
+
+/* Headers
+ * ============================================== */
+    h1, h2, h3, h4, h5, h6 {
+        font-weight: bold;
+        margin: 0px;
+    }
+
+    h1 {font-size: 1.9em !important;}
+    h2, {font-size: 1.5em !important;}
+    h3 {font-size: 1.3em;}
+    h4 {font-size: 1em;}
+    h5 {font-size: .9em;}
+    h6 {font-size: .8em;}
+
+
+/* Links
+ * ============================================== */
+    a {
+        color: $brand-color;
+        text-decoration: underline;
+
+        &:hover {
+            color: darken($brand-color, 10%);
+            text-decoration: none;
+        }
+    }
+
+/* Block Quotes
+ * ============================================== */
+    blockquote {
+        color: #BBB;
+        border-left: 4px solid $brand-color;
+        padding-left: $spacing-unit / 2;
+        font-size: 17px;
+        letter-spacing: -1px;
+        font-style: italic;
+
+        > :last-child {
+            margin-bottom: 0;
+        }
+    }
+
+/* Code Blocks
+ * ============================================== */
+    pre,
+    code {
+        font-size: 13px;
+        border: 1px solid $grey-color-light;
+        font-family: Menlo, Monaco, "Andale Mono", serif;
+    }
+
+    code {
+        padding: 1px 3px;
+        background-color: #FFF;
+        border-radius: 5px;
+    }
+
+    pre {
+        border-radius: 3px;
+        padding: 8px 12px;
+        overflow-x: scroll;
+        background-color: #F5F5F5;
+
+        > code {
+            background-color: #F5F5F5;
+            border: 0;
+            padding-right: 0;
+            padding-left: 0;
+        }
+    }
+
+/* Wrapper
+ * ============================================== */
+    .wrapper {
+        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+        max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+        margin-right: auto;
+        margin-left: auto;
+        padding-right: $spacing-unit;
+        padding-left: $spacing-unit;
+        @extend %clearfix;
+
+        @include media-query($on-laptop) {
+            max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+            max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+            padding-right: $spacing-unit / 2;
+            padding-left: $spacing-unit / 2;
+        }
+    }
+
+/* Clear Fix
+ * ============================================== */
+    %clearfix {
+
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+
+/* TABLES
+ * =============================================== */
+    table {
+        border-collapse: collapse;
+        border-spacing: 0
+    }
+
+    :not(.highlight)>table {
+    margin: 0 auto 1.5em auto
+    }
+
+    :not(.highlight)>table tr {
+        background-color: #fff;
+        border-top: 1px solid #ccc
+    }
+
+    :not(.highlight)>table tr th, :not(.highlight)>table tr td {
+        padding: 6px 13px;
+        border: 1px solid #ddd
+    }
+
+    :not(.highlight)>table tr th {
+        font-weight: bold
+    }
+
+    :not(.highlight)>table tr:nth-child(2n) {
+        background-color: #f8f8f8
+    }
--- a/_sass/_colors.scss
+++ b/_sass/_colors.scss
@ -0,0 +1,181 @@
+$primary: #1F78D1;
+$secondary: #C1392B;
+
+// Colors
+
+// ━━━━ General ━━━━
+
+$white:         #ffffff;
+$black:         #000000;
+
+// Gradients
+
+$blue-indigo: linear-gradient(46.3deg, #17599C 23.2%, #4B4BA3 76.8%);
+
+// Indigo
+
+$indigo-list: (
+      "50": #F7F7FF,
+      "100": #EBEBFA,
+      "200": #D1D1F0,
+      "300": #A6A6DE,
+      "400": #7C7CCC,
+      "500": #6666C4,
+      "600": #5B5BBD,
+      "700": #4B4BA3,
+      "800": #393982,
+      "900": #292961,
+      "950": #1A1A40
+);
+
+$indigo-50: map-get($indigo-list, "50");
+$indigo-100: map-get($indigo-list, "100");
+$indigo-200: map-get($indigo-list, "200");
+$indigo-300: map-get($indigo-list, "300");
+$indigo-400: map-get($indigo-list, "400");
+$indigo-500: map-get($indigo-list, "500");
+$indigo-600: map-get($indigo-list, "600");
+$indigo-700: map-get($indigo-list, "700");
+$indigo-800: map-get($indigo-list, "800");
+$indigo-900: map-get($indigo-list, "900");
+$indigo-950: map-get($indigo-list, "950");
+
+// Blue
+
+$blue-list: (
+      "50": #F6FAFE,
+      "100": #E4F0FB,
+      "200": #B8D6F4,
+      "300": #73AFEA,
+      "400": #418CD8,
+      "500": #1F78D1,
+      "600": #1B69B6,
+      "700": #17599C,
+      "800": #134A81,
+      "900": #0F3B66,
+      "950": #0A2744
+);
+
+$blue-50: map-get($blue-list, "50");
+$blue-100: map-get($blue-list, "100");
+$blue-200: map-get($blue-list, "200");
+$blue-300: map-get($blue-list, "300");
+$blue-400: map-get($blue-list, "400");
+$blue-500: map-get($blue-list, "500");
+$blue-600: map-get($blue-list, "600");
+$blue-700: map-get($blue-list, "700");
+$blue-800: map-get($blue-list, "800");
+$blue-900: map-get($blue-list, "900");
+$blue-950: map-get($blue-list, "950");
+
+// Green
+
+$green-list: (
+      "50": #F1FDF6,
+      "100": #DCF5E7,
+      "200": #B3E6C8,
+      "300": #75D09B,
+      "400": #37B96D,
+      "500": #1AAA55,
+      "600": #168F48,
+      "700": #12753A,
+      "800": #0E5A2D,
+      "900": #0A4020,
+      "950": #072B15
+);
+
+$green-50: map-get($green-list, "50");
+$green-100: map-get($green-list, "100");
+$green-200: map-get($green-list, "200");
+$green-300: map-get($green-list, "300");
+$green-400: map-get($green-list, "400");
+$green-500: map-get($green-list, "500");
+$green-600: map-get($green-list, "600");
+$green-700: map-get($green-list, "700");
+$green-800: map-get($green-list, "800");
+$green-900: map-get($green-list, "900");
+$green-950: map-get($green-list, "950");
+
+//  Gray
+
+$gray-list: (
+        "50": #FAFAFA,
+        "100": #F2F2F2,
+        "200": #DFDFDF,
+        "300": #CCCCCC,
+        "400": #BABABA,
+        "500": #A7A7A7,
+        "600": #919191,
+        "700": #707070,
+        "800": #4F4F4F,
+        "900": #2E2E2E,
+        "950": #1F1F1F
+);
+
+$gray-50: map-get($gray-list, "50");
+$gray-100: map-get($gray-list, "100");
+$gray-200: map-get($gray-list, "200");
+$gray-300: map-get($gray-list, "300");
+$gray-400: map-get($gray-list, "400");
+$gray-500: map-get($gray-list, "500");
+$gray-600: map-get($gray-list, "600");
+$gray-700: map-get($gray-list, "700");
+$gray-800: map-get($gray-list, "800");
+$gray-900: map-get($gray-list, "900");
+$gray-950: map-get($gray-list, "950");
+
+//  Orange
+
+$orange-list: (
+        "50": #FFFAF4,
+        "100": #FFF1DE,
+        "200": #FED69F,
+        "300": #FDBC60,
+        "400": #FCA429,
+        "500": #FC9403,
+        "600": #DE7E00,
+        "700": #C26700,
+        "800": #A35200,
+        "900": #853C00,
+        "950": #592800
+);
+
+$orange-50: map-get($orange-list, "50");
+$orange-100: map-get($orange-list, "100");
+$orange-200: map-get($orange-list, "200");
+$orange-300: map-get($orange-list, "300");
+$orange-400: map-get($orange-list, "400");
+$orange-500: map-get($orange-list, "500");
+$orange-600: map-get($orange-list, "600");
+$orange-700: map-get($orange-list, "700");
+$orange-800: map-get($orange-list, "800");
+$orange-900: map-get($orange-list, "900");
+$orange-950: map-get($orange-list, "950");
+
+//  Red
+
+$red-list: (
+        "50": #FEF6F5,
+        "100": #FBE5E1,
+        "200": #F2B4A9,
+        "300": #EA8271,
+        "400": #E05842,
+        "500": #DB3B21,
+        "600": #C0341D,
+        "700": #A62D19,
+        "800": #8B2615,
+        "900": #711E11,
+        "950": #4B140B
+);
+
+$red-50: map-get($red-list, "50");
+$red-100: map-get($red-list, "100");
+$red-200: map-get($red-list, "200");
+$red-300: map-get($red-list, "300");
+$red-400: map-get($red-list, "400");
+$red-500: map-get($red-list, "500");
+$red-600: map-get($red-list, "600");
+$red-700: map-get($red-list, "700");
+$red-800: map-get($red-list, "800");
+$red-900: map-get($red-list, "900");
+$red-950: map-get($red-list, "950");
--- a/_sass/_components.scss
+++ b/_sass/_components.scss
--- a/_sass/_grid.scss
+++ b/_sass/_grid.scss
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@ -0,0 +1,481 @@
+/* Site Header
+ * ============================================== */
+.navbar {
+  background-color: transparent;
+  padding-top: 2em;
+  height: 100px;
+}
+
+.nav-brand {
+  float: left;
+  text-decoration: none;
+}
+
+.site-header {
+  padding-top: 1em;
+  margin: 0 auto;
+}
+
+.site-header-color {
+  background-image: url("../assets/img/back.svg");
+  color: $white;
+  min-height: 1225px;
+  background-attachment: scroll;
+  background-repeat: repeat-x;
+}
+
+.site-header-cl {
+  background: $blue-indigo;
+  color: $white;
+  min-height: 450px;
+}
+
+.site-header-home {
+  background: $blue-indigo;
+  color: $white;
+  min-height: 600px;
+}
+
+.site-header a {
+  color: $white;
+  text-decoration: underline;
+}
+
+.site-header p {
+  font-size: 18px;
+  color: $gray-950;
+}
+
+.site-header h1 {
+  display: block;
+  color: $brand-color;
+  font-weight: 600;
+  font-size: 48px !important;
+  line-height: 1.5;
+  letter-spacing: 0;
+  text-align: center;
+  padding-top: 20px;
+  clear: both;
+  font-family: 'Overpass';
+}
+
+.nav-menu {
+  float: right;
+  color: $brand-color;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.5;
+
+  .nav-link {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    position: relative;
+    overflow: hidden;
+    line-height: $base-line-height;
+    font-weight: regular;
+    text-decoration: none !important;
+    margin-left: 48px;
+  }
+
+  .nav-link:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    right: 100%;
+    bottom: 0;
+    background: $brand-color;
+    height: 4px;
+    -webkit-transition-property: right;
+    transition-property: right;
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+  }
+
+  .nav-link:active:before,
+  .nav-link:focus:before,
+  .nav-link:hover:before {
+    right: 0;
+  }
+}
+
+.nav-menu-white {
+  float: right;
+  color: $white !important;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.5;
+
+  .nav-link-white {
+    color: $white;
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    position: relative;
+    overflow: hidden;
+    line-height: $base-line-height;
+    font-weight: regular;
+    text-decoration: none !important;
+    margin-left: 48px;
+  }
+
+  .nav-link-white:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    right: 100%;
+    bottom: 0;
+    background: $white;
+    height: 4px;
+    -webkit-transition-property: right;
+    transition-property: right;
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+  }
+
+  .nav-link-white:active:before,
+  .nav-link-white:focus:before,
+  .nav-link-white:hover:before {
+    right: 0;
+  }
+}
+
+#menu {
+  display: none;
+  font-size: 30px;
+  color: $brand-color;
+  float: right;
+}
+
+#menuwhite {
+  display: none;
+  font-size: 30px;
+  color: $white;
+  float: right;
+}
+
+.responsive {
+  display: flex !important;
+}
+
+@media only screen and (max-width: 768px) {
+  .site-header {
+    padding-top: 0;
+  }
+  #menu, #menuwhite {
+    display: block;
+  }
+  .nav-menu {
+    flex-direction: column;
+    float: left;
+    margin-top: 55px;
+    margin-left: -165px;
+    display: none;
+    font-size: 20px;
+  }
+  .nav-menu-white {
+    flex-direction: column;
+    float: left;
+    margin-top: 55px;
+    margin-left: -165px;
+    display: none;
+    font-size: 20px;
+  }
+  .nav-menu-white .nav-link-white {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  .nav-menu .nav-link {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}
+
+/* Site Footer
+ * ============================================== */
+.footer {
+  padding-top: 4em;
+  min-height: 200px;
+  background-color: $blue-800;
+  padding-bottom: 4em;
+  margin: auto;
+  font-size: 16px;
+  font-family: "Overpass";
+  color: $white;
+
+  & a {
+    color: $white;
+  }
+}
+
+.hr-space-2 {
+  display: inline-block;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.separator {
+  display: inline-block;
+  margin-left: 8px;
+  margin-right: 8px;
+
+  &:after {
+    content: " ";
+    display: inline-block;
+    border-left: 2px solid white;
+    margin-bottom: -6px;
+    height: 16px;
+    top: 0;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .footer-flex a {
+    display: table;
+    margin-bottom: 10px;
+  }
+  .separator {
+    display: none !important;
+  }
+  .sm-mobile {
+    padding-left: 15% !important;
+    padding-right: 15% !important;
+  }
+}
+/* Tabs
+ * ============================================== */
+.tab {
+  overflow: hidden;
+}
+
+.tablinks {
+  background-color: $white;
+  opacity: 0.5;
+  color: $blue-800;
+  display: inline-block;
+  text-decoration: none !important;
+  font-size: 18px !important;
+  font-weight: 800;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: 50px;
+  padding: 6px 20px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+
+  &:hover {
+    opacity: 1;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}
+
+.tablinkservice {
+  background-color: transparent;
+  opacity: 0.5;
+  color: $white;
+  display: block;
+  text-decoration: none !important;
+  font-size: 18px !important;
+  font-weight: 700;
+  box-sizing: border-box;
+  border: 0;
+  cursor: pointer;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 25px;
+  border-left: 3px solid white;
+
+  &:hover {
+    opacity: 1;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}
+
+.tabcontentservice {
+  display: none;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.tabcontent {
+  display: none;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+/* Individual Posts
+ * ============================================== */
+.page-content {
+  padding: $spacing-unit 0;
+  text-align: justify;
+}
+
+.page-heading {
+  font-size: 20px;
+  padding-top: 2px;
+}
+/* Archive
+ * ============================================== */
+.post-list {
+  margin-left: 0;
+  list-style: none;
+
+  > li {
+    display: block;
+    padding: 0.1em 1.5em;
+  }
+}
+
+.post-link {
+  font-family: 'Overpass';
+  font-weight: 300;
+  font-size: 1.5em;
+  letter-spacing: -1px;
+  color: #454545;
+  display: block;
+  width: 100%;
+  @include media-query($on-palm) {
+    font-size: 1.33em;
+  }
+}
+
+.post-meta {
+  font-size: $small-font-size;
+  color: $grey-color-light;
+  text-transform: uppercase;
+  display: inline-block;
+}
+
+/* Post Format
+ * ============================================== */
+.post-header {
+  margin-bottom: $spacing-unit;
+}
+
+.post-title {
+  font-size: 42px;
+  letter-spacing: -1px;
+  line-height: 1.5;
+  @include media-query($on-laptop) {
+    font-size: 36px;
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+        a {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        -webkit-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
+        -o-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
+        transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
+        border-bottom: 1px solid $blue-200;
+        -webkit-box-shadow: inset 0 -4px 0 $blue-200;
+        box-shadow: inset 0 -4px 0 $blue-200;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        word-wrap: break-word;
+
+        &:hover {
+          color: $black;
+          -webkit-transition: all 0.2s ease-in-out;
+          -moz-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
+          background-color: $blue-200;
+        }
+        }
+
+        p {
+        font-size: 18px !important;
+        font-weight: normal !important;
+        line-height: 150% !important;
+        color: $gray-900;
+        margin-bottom: 32px;
+
+        &:first-of-type:first-letter {
+        font-size: 64px !important;
+        color: $gray-950;
+        float: left;
+        line-height: 120%;
+        padding-top: 4px;
+        padding-right: 2px;
+        }
+        }
+
+
+        h2 {
+            font-size: 36px !important;
+            font-weight: 800 !important;
+            color: $gray-900;
+            margin-bottom: 32px;
+
+            @include media-query($on-laptop) {
+                font-size: 28px;
+            }
+        }
+
+        h3 {
+            font-size: 26px;
+
+            @include media-query($on-laptop) {
+                font-size: 22px;
+            }
+        }
+
+        h4 {
+            font-size: 20px;
+
+            @include media-query($on-laptop) {
+                font-size: 18px;
+            }
+        } 
+
+          &::first-letter {
+          font-size: 64px !important;
+          color: $gray-950;
+         }
+}
+
+/* Spacings and Generic
+ * ============================================== */
+hr {
+  width: 100%;
+  background-color: $gray-200;
+  height: 1px !important;
+  border: none;
+}
+
+.no-margins {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.grayscale {
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+}
--- a/_sass/_normalize.scss
+++ b/_sass/_normalize.scss
@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  scroll-behavior: smooth;
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/_sass/_syntax-highlighting.scss
+++ b/_sass/_syntax-highlighting.scss
@ -0,0 +1,74 @@
+/* Syntax Highlighting
+ * ============================================== */
+    .highlight {
+         .hll { background-color: #ffffcc }
+        .c { color: #8f5902; font-style: italic } /* Comment */
+        .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
+        .g { color: #000000 } /* Generic */
+        .k { color: #204a87; font-weight: bold } /* Keyword */
+        .l { color: #000000 } /* Literal */
+        .n { color: #000000 } /* Name */
+        .o { color: #ce5c00; font-weight: bold } /* Operator */
+        .x { color: #000000 } /* Other */
+        .p { color: #000000; font-weight: bold } /* Punctuation */
+        .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
+        .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
+        .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
+        .cs { color: #8f5902; font-style: italic } /* Comment.Special */
+        .gd { color: #a40000 } /* Generic.Deleted */
+        .ge { color: #000000; font-style: italic } /* Generic.Emph */
+        .gr { color: #ef2929 } /* Generic.Error */
+        .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+        .gi { color: #00A000 } /* Generic.Inserted */
+        .go { color: #000000; font-style: italic } /* Generic.Output */
+        .gp { color: #8f5902 } /* Generic.Prompt */
+        .gs { color: #000000; font-weight: bold } /* Generic.Strong */
+        .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+        .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
+        .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
+        .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
+        .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
+        .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
+        .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
+        .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
+        .ld { color: #000000 } /* Literal.Date */
+        .m { color: #0000cf; font-weight: bold } /* Literal.Number */
+        .s { color: #4e9a06 } /* Literal.String */
+        .na { color: #c4a000 } /* Name.Attribute */
+        .nb { color: #204a87 } /* Name.Builtin */
+        .nc { color: #000000 } /* Name.Class */
+        .no { color: #000000 } /* Name.Constant */
+        .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
+        .ni { color: #ce5c00 } /* Name.Entity */
+        .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
+        .nf { color: #000000 } /* Name.Function */
+        .nl { color: #f57900 } /* Name.Label */
+        .nn { color: #000000 } /* Name.Namespace */
+        .nx { color: #000000 } /* Name.Other */
+        .py { color: #000000 } /* Name.Property */
+        .nt { color: #204a87; font-weight: bold } /* Name.Tag */
+        .nv { color: #000000 } /* Name.Variable */
+        .ow { color: #204a87; font-weight: bold } /* Operator.Word */
+        .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
+        .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
+        .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
+        .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
+        .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
+        .sb { color: #4e9a06 } /* Literal.String.Backtick */
+        .sc { color: #4e9a06 } /* Literal.String.Char */
+        .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
+        .s2 { color: #4e9a06 } /* Literal.String.Double */
+        .se { color: #4e9a06 } /* Literal.String.Escape */
+        .sh { color: #4e9a06 } /* Literal.String.Heredoc */
+        .si { color: #4e9a06 } /* Literal.String.Interpol */
+        .sx { color: #4e9a06 } /* Literal.String.Other */
+        .sr { color: #4e9a06 } /* Literal.String.Regex */
+        .s1 { color: #4e9a06 } /* Literal.String.Single */
+        .ss { color: #4e9a06 } /* Literal.String.Symbol */
+        .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
+        .vc { color: #000000 } /* Name.Variable.Class */
+        .vg { color: #000000 } /* Name.Variable.Global */
+        .vi { color: #000000 } /* Name.Variable.Instance */
+        .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
+
+    }
--- a/about.html
+++ b/about.html
--- a/assets/img/about/AnjaHeadshot.png
+++ b/assets/img/about/AnjaHeadshot.png
--- a/assets/img/about/AnxheloHeadshot.png
+++ b/assets/img/about/AnxheloHeadshot.png
--- a/assets/img/about/ElioHeadshot.png
+++ b/assets/img/about/ElioHeadshot.png
--- a/assets/img/about/ErgiHeadshot.png
+++ b/assets/img/about/ErgiHeadshot.png
--- a/assets/img/about/RenataHeadshot.png
+++ b/assets/img/about/RenataHeadshot.png
--- a/assets/img/back.svg
+++ b/assets/img/back.svg
@ -0,0 +1,14 @@
+<svg width="1920" height="1049" viewBox="0 0 1920 1049" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1049">
+<rect width="1920" height="1049" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M-0.0394592 0H1919.47C1919.47 0 2755.41 842.834 1919.47 969.169C1083.53 1095.5 528.622 894.734 -0.0394592 969.169C-528.7 1043.6 -0.0394592 0 -0.0394592 0Z" fill="url(#paint0_linear)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="-235" y1="0" x2="888.643" y2="-847.434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17599C"/>
+<stop offset="1" stop-color="#4B4BA3"/>
+</linearGradient>
+</defs>
+</svg>
--- a/assets/img/blog/34c3_thumb.png
+++ b/assets/img/blog/34c3_thumb.png
--- a/assets/img/blog/CryptoCurrencyBanner.jpg
+++ b/assets/img/blog/CryptoCurrencyBanner.jpg
--- a/assets/img/blog/CryptoCurrencyThumb.jpg
+++ b/assets/img/blog/CryptoCurrencyThumb.jpg
--- a/assets/img/blog/Elio-FOSDEM2018-thumb.jpg
+++ b/assets/img/blog/Elio-FOSDEM2018-thumb.jpg
--- a/assets/img/blog/Elio-FOSDEM2018.jpg
+++ b/assets/img/blog/Elio-FOSDEM2018.jpg
--- a/assets/img/blog/Elio-Identihub.jpg
+++ b/assets/img/blog/Elio-Identihub.jpg
--- a/assets/img/blog/IconGridBlurry.jpg
+++ b/assets/img/blog/IconGridBlurry.jpg
--- a/assets/img/blog/Inkscape-Workshop-1-thumb.jpg
+++ b/assets/img/blog/Inkscape-Workshop-1-thumb.jpg
--- a/assets/img/blog/Inkscape-Workshop-1.jpg
+++ b/assets/img/blog/Inkscape-Workshop-1.jpg
--- a/assets/img/blog/Inkscape-Workshop-2.jpg
+++ b/assets/img/blog/Inkscape-Workshop-2.jpg
--- a/assets/img/blog/Inkscape-Workshop-3.jpg
+++ b/assets/img/blog/Inkscape-Workshop-3.jpg
--- a/assets/img/blog/Inkscape-Workshop-4.jpg
+++ b/assets/img/blog/Inkscape-Workshop-4.jpg
--- a/assets/img/blog/Inkscape-Workshop-5.jpg
+++ b/assets/img/blog/Inkscape-Workshop-5.jpg
--- a/assets/img/blog/Inkscape-Workshop-6.jpg
+++ b/assets/img/blog/Inkscape-Workshop-6.jpg
--- a/assets/img/blog/OSCALMariana.jpg
+++ b/assets/img/blog/OSCALMariana.jpg
--- a/assets/img/blog/OSCALPiramida.jpg
+++ b/assets/img/blog/OSCALPiramida.jpg
--- a/assets/img/blog/OSCALRedon_Renata.jpg
+++ b/assets/img/blog/OSCALRedon_Renata.jpg
--- a/assets/img/blog/OSCALRenata.jpg
+++ b/assets/img/blog/OSCALRenata.jpg
--- a/assets/img/blog/OSCAL_group_photo.jpg
+++ b/assets/img/blog/OSCAL_group_photo.jpg
--- a/assets/img/blog/OSCAL_thumbnail.png
+++ b/assets/img/blog/OSCAL_thumbnail.png
--- a/assets/img/blog/OSD.jpg
+++ b/assets/img/blog/OSD.jpg
--- a/assets/img/blog/OTF.jpg
+++ b/assets/img/blog/OTF.jpg
--- a/assets/img/blog/RB_image_1.jpg
+++ b/assets/img/blog/RB_image_1.jpg
--- a/assets/img/blog/Renata_Redon_thumbnail.png
+++ b/assets/img/blog/Renata_Redon_thumbnail.png
--- a/assets/img/blog/ReproducibleBuilds_thumbnail.png
+++ b/assets/img/blog/ReproducibleBuilds_thumbnail.png
--- a/assets/img/blog/cryptos.jpg
+++ b/assets/img/blog/cryptos.jpg
--- a/assets/img/blog/elio-ccc.png
+++ b/assets/img/blog/elio-ccc.png
--- a/assets/img/blog/hello_world.png
+++ b/assets/img/blog/hello_world.png
--- a/assets/img/blog/home-banner.jpg
+++ b/assets/img/blog/home-banner.jpg
--- a/assets/img/blog/libocon_poster_totebag.jpg
+++ b/assets/img/blog/libocon_poster_totebag.jpg
--- a/assets/img/blog/logobridge-post.png
+++ b/assets/img/blog/logobridge-post.png
--- a/assets/img/blog/logobridge-scrot.png
+++ b/assets/img/blog/logobridge-scrot.png
--- a/assets/img/blog/logobridge.jpg
+++ b/assets/img/blog/logobridge.jpg
--- a/assets/img/blog/new-website.jpg
+++ b/assets/img/blog/new-website.jpg