feat: add better open sauced asset branding (open-sauced#46)

* feat: more branding

* fix: remove extra space and a typo

Fixes open-sauced#32

docs/introduction.md

@@ -1,8 +1,10 @@
 ---
 slug: /
+title: Introduction to Open Sauced
+sidebar_label: Introduction to Open Sauced 🍕
 ---
 
-# Introduction to Open Sauced
+# Introduction to Open Sauced ![img](../static/favicon.ico)
 
 ![Example banner](../static/img/what-is-opensauced.png)
 

docusaurus.config.js

@@ -34,6 +34,11 @@ module.exports = {
           label: 'Docs',
           position: 'left',
         },
+        {
+          alt: 'Open Sauced Logo',
+          src: 'img/logo.svg',
+          href: 'https://opensauced.pizza/'
+        },
         {
           href: 'https://dev.to/opensauced',
           label: 'Blog',
@@ -62,6 +67,11 @@ module.exports = {
       respectPrefersColorScheme: false,
     },
     footer: {
+      logo: {
+        alt: 'Open Sauced Logo',
+        src: 'img/logo.svg',
+        href: 'https://opensauced.pizza/'
+      },
       style: 'dark',
       links: [
         {

src/css/custom.css

@@ -27,3 +27,34 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.footer__title {
+  position: relative;
+}
+
+.footer__col > .footer__title::after {
+  content: '';
+  display: inline-block;
+  width: 28px;
+  height: 23px;
+  background-position: center;
+  background-size: contain;
+  position: absolute;
+  background-repeat: no-repeat;
+}
+
+.footer__col:nth-child(1) > .footer__title::after {
+  background-image: url('../../static/favicon-32x32.png');
+  left: 40px;
+}
+
+.footer__col:nth-child(2) > .footer__title::after {
+  background-image: url('../../static/img/openSauced-icon.png');
+}
+
+.footer__col:nth-child(3) > .footer__title::after {
+  background-image: url('../../static/img/mustard.png');
+  top: -2px;
+  left: 45px;
+}
+