Change to Mozilla Foundation brand style

Author: dkapitan

_brand.yml

@@ -0,0 +1,38 @@
+color:
+  palette:
+    mofo-black: "#161616"
+    mofo-red: "#D13109"
+    mofo-orange: "#F06C12"
+    mofo-yellow: "#EED800"
+    mofo-green: "#20C376"
+    mofo-blue: "#23A5E9"
+    mofo-cyan: "#7DEDF6"
+    srdp-paper: "#FBFAF6"
+    srdp-beige: "#F1ECE1"
+  foreground: mofo-black
+  background: srdp-paper
+  primary: mofo-blue # links, controls, progress bar, list markers
+typography:
+  fonts:
+    - family: Mozilla Headline
+      source: google
+    - family: Fira Sans
+      weight: [100, 200, 300, 400, 500, 600, 700, 800, 900]
+      style: [normal, italic]
+      source: google
+    - family: "Fira Code"
+      source: google
+  base:
+    family: Fira Sans
+  headings:
+    family: Mozilla Headline
+    weight: 600
+    color: mofo-black
+  monospace:
+    family: "Fira Code"
+    color: mofo-blue
+  link:
+    color: mofo-red
+    decoration: none
+logo:
+  medium: logo-dk.png

_quarto.yml

@@ -14,13 +14,13 @@ website:
     type: overlay
   navbar:
     title: false
-    logo: /images/@kapitan-logo-redbrick-zilla.png
+    logo: /images/logo-dk.png
     pinned: false
     collapse-below: md
   sidebar:
-    style: docked  
+    style: docked
     collapse-level: 1
-    background: light
+    # background: "#FBFAF6"
     tools:
       - icon: linkedin
         href: https://www.linkedin.com/in/dkapitan/
@@ -51,7 +51,7 @@ website:
     right: |
       <br>
       Copyright &copy; 2023 Daniel Kapitan<br>
-      This website was created with 
+      This website was created with
       [![](/images/quarto.png){fig-alt="Quarto" width=65px}](https://quarto.org)<br>
 
 format:
@@ -67,5 +67,5 @@ format:
     include-in-header:
       - text: |
           <script data-goatcounter="https://dkapitan.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-execute: 
+execute:
   freeze: auto

images/logo-dk-large.png

@@ -4,7 +4,7 @@ toc: false
 format:
   html:
     page-layout: article
-  
+
 ---
 ```{=html}
 <!-- Bug in hero - only displays properly with empty div at the top -->
@@ -20,17 +20,18 @@ format:
   Background-size: cover;
 }
 .lead {
-    font-family: "Zilla Slab";
+    font-family: "Mozilla Headline";
     text-align: center;
 }
 .hero-quote {
-  font-family: "Zilla Slab";
+  font-family: "Mozilla Headline";
+  font-style: bold !important;
   font-color: white;
   color: white;
 }
 
 .fw-bold {
-  /* font-family: "Zilla Slab Highlight"; */
+  /* font-family: "Mozilla Headline"; */
   font-style: bold !important;
   color: white !important;
 }
@@ -61,7 +62,7 @@ Many people continue to have high expectations of what data and AI can bring. Ye
 
 #### Gaining strategic autonomy
 
-The key towards creating sustainable change with digital technologies lies in increasing your own data literacy and understanding of AI, and that of your organisation. AI is not sci-fi, we need to demystify digital technologies. That way, professionals and domain experts can obtain strategic autonomy to reason, think, imagine and create applications with AI themselves. Technology can only be of value when it is put within the appropriate business, societal or human context. 
+The key towards creating sustainable change with digital technologies lies in increasing your own data literacy and understanding of AI, and that of your organisation. AI is not sci-fi, we need to demystify digital technologies. That way, professionals and domain experts can obtain strategic autonomy to reason, think, imagine and create applications with AI themselves. Technology can only be of value when it is put within the appropriate business, societal or human context.
 
 We offer the following services to help you master data and AI yourself.
 :::
@@ -72,7 +73,7 @@ We offer the following services to help you master data and AI yourself.
 
 <br><br>
 
-:::: {#light-grey-background}
+:::: {#green-background}
 ::: {.grid}
 ::: {.g-col-8}
 
@@ -101,22 +102,22 @@ Data sit at the core of digital business transformation. As machine learning alg
 ### Applied AI
 The possibilities of AI are virtually endless and can fundamentally change the way you run your business or lead your organisation. It changes business strategies, policies as well as the behaviour of your teams. If your company embarks on integrating AI, it needs to do what is relevant and what you want it for. We developed impactful AI applications that are accurate, taking into account the factors that drive the predictions and relating it to domain expertise. We help you integrate AI innovations in your services or products.
 
-<small class="text-muted-darker">Explainable AI | Generative AI & Large Language Models | Physics-Informed Machine Learning</small> 
+<small class="text-muted-darker">Explainable AI | Generative AI & Large Language Models | Physics-Informed Machine Learning</small>
 :::
 :::
 ::::
 
 <br>
 
-:::: {#light-grey-background}
+:::: {#red-background}
 ::: {.grid}
 ::: {.g-col-8}
 
 ### Coaching & mentoring
 
 Data and AI will change your business and your way of working. Not everyone is immediately ready for this. We teach, coach and mentor professionals who require a better understanding of data and artificial intelligence, making them comfortable and topic-specialists. We offer in-company on-the-job coaching, working side-by-side with your team to explore how AI can impact your line of business.
 
-<small class="text-muted">One-the-job coaching for individuals and teams | Challenge-based learning | Technical deep-dives for experts</small> 
+<small class="text-muted">One-the-job coaching for individuals and teams | Challenge-based learning | Technical deep-dives for experts</small>
 :::
 
 ::: {.g-col-4}
@@ -152,18 +153,26 @@ We provide masterclasses on topics related to data & AI, ranging from introducto
 
 ```{=html}
 <style>
-#light-grey-background {
+#green-background {
   padding-top: 35px;
   padding-bottom: 20px;
   padding-left: 35px;
-  background-color: #000000;
+  background-color: #20c376;
+  color: #ffffff;
+  border-radius: .3rem !important;
+}
+#red-background {
+  padding-top: 35px;
+  padding-bottom: 20px;
+  padding-left: 35px;
+  background-color: #D13109;
   color: #ffffff;
   border-radius: .3rem !important;
 }
 #logo-board {
   padding-top: 20px;
   border-radius: .3rem !important;
-  background-color: #ffffff;
+  background-color: #FBFAF6;
 }
 </style>
 ```
@@ -215,4 +224,4 @@ __LinkedIn:__ [follow me](https://www.linkedin.com/comm/mynetwork/discovery-see-
 #
 ```{=html}
 <a href="/appointment" class="btn btn-primary btn-lg" type="button">Book an appointment</a>
-```
+```

images/logo-dk.png

@@ -1,22 +1,21 @@
 // Quarto theme based on https://mozilla.design/mozilla/
 
 // Google Fonts
-@import url(https://fonts.googleapis.com/css?family=Zilla+Slab|Zilla+Slab+Highlight|Nunito+Sans|Fira+Code|Lato:400italic,700italic,300,400,700);
+@import url(https://fonts.googleapis.com/css?family=Mozilla+Headline|Mozilla+Text|Fira+Code:400italic,700italic,300,400,700);
 
 /*-- scss:defaults --*/
 // bootstrap variables https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
 // https://quarto.org/docs/output-formats/html-themes.html#sass-variables
 
 // Fonts
-$zilla-slab: "Zilla Slab", serif;
-$zilla-slab-highlight: "Zilla Slab Highlight", serif;   
-$nunito: "Nunito Sans", sans-serif;
+$mozilla-headline: "Mozilla Headline", serif;
+$mozilla-text: "Mozilla Text", sans-serif;
 $fira-code: "Fira Code";
 
-$font-family-sans-serif: $nunito;
+$font-family-sans-serif: $mozilla-text;
 $font-family-monospace: $fira-code;
-$headings-font-family: $zilla-slab;
-$navbar-default-font: $zilla-slab;
+$headings-font-family: $mozilla-headline;
+$navbar-default-font: $mozilla-headline;
 
 // Set fonts and layout
 // Base layout https://getbootstrap.com/docs/5.1/components/navbar/#containers
@@ -25,25 +24,27 @@ $navbar-padding-y: $spacer * 1.5;
 $navbar-padding-x: null;
 
 .sidebar-navigation .sidebar-item {
-    font-size: 1.2rem
+    font-size: 1.2rem;
 }
 
-.nav-footer-left, .nav-footer-center, .nav-footer-right {
-    font-family: $zilla-slab;
+.nav-footer-left,
+.nav-footer-center,
+.nav-footer-right {
+    font-family: $mozilla-headline;
     font-size: 1rem !important;
     text-align: left !important;
 }
 
 div.quarto-post .body .listing-subtitle {
-    font-family: $zilla-slab;
+    font-family: $mozilla-headline;
     font-weight: 300;
-    font-size: .875em;
+    font-size: 0.875em;
     margin-bottom: 0.5em;
     margin-top: 0.2em;
 }
 
 div.quarto-post .listing-description {
-    font-size: .875em;
+    font-size: 0.875em;
 }
 
 // Define colours
@@ -59,51 +60,55 @@ $dark-blue: #00458b;
 $dark-grey: #959595;
 $light-grey: #e7e5e2;
 
+$mofo-red: #d13109;
+$srdp-paper: #fbfaf6;
+
 // Use colour
 // navbar https://quarto.org/docs/output-formats/html-themes.html#navigation
-$navbar-bg: $white;
+$navbar-bg: $srdp-paper;
 $navbar-fg: $black;
 $navbar-hl: $black;
-$sidebar-bg: $white;
+$sidebar-bg: $srdp-paper;
 $sidebar-fg: $black;
 $sidebar-hl: $warm-red;
 $footer-bg: $black;
 $footer-fg: $light-grey;
 
-$link-color: $warm-red;
-
+$link-color: $mofo-red;
 
 .btn-primary {
-    background-color: #ff4f5e !important;
-    border-color: #ff4f5e !important;
-    font-family: "Nunito Sans";
+    background-color: #d13109 !important;
+    border-color: #d13109 !important;
+    font-family: "Fira Sans";
 }
 
 div.sidebar-item-container {
     &:hover {
-        color: $warm-red !important;
+        color: $mofo-red !important;
     }
 }
 
 div.sidebar-item-container .active,
-div.sidebar-item-container .show>.nav-link,
-div.sidebar-item-container .sidebar-link>code {
-	background-color: $white;
-	color: $warm-red !important;
+div.sidebar-item-container .show > .nav-link,
+div.sidebar-item-container .sidebar-link > code {
+    background-color: $srdp-paper;
+    color: $mofo-red !important;
 }
 
 .quarto-listing-category .category.active {
     font-weight: 600;
-    color: $warm-red;
+    color: $mofo-red;
 }
 
 /*--- scss:defaults ---*/
-#quarto-content>* {
+#quarto-content > * {
     padding-top: 0px;
 }
 
-.navbar, .sidebar, .quarto-secondary-nav {
-    font-family: $zilla-slab;
+.navbar,
+.sidebar,
+.quarto-secondary-nav {
+    font-family: $mozilla-headline;
     padding-bottom: 0.5rem;
 }
 
@@ -114,9 +119,9 @@ div.sidebar-item-container .sidebar-link>code {
 /*-- scss:rules --*/
 // sidebar without right border
 .sidebar.sidebar-navigation:not(.rollup) {
-    border-right: 0px solid #ffffff !important
+    border-right: 0px solid #fbfaf6 !important;
 }
 
-.sidebar.sidebar-navigation>* {
+.sidebar.sidebar-navigation > * {
     padding-top: 0.5em;
-}
+}