logo

docs/docs/branding.md

@@ -0,0 +1,53 @@
+# Branding
+
+This document holds colors, fonts, and logos.
+
+## Colors
+
+<img src="https://placehold.co/200x100/FF6E42/FFFFFF/svg?text=%23FF6E42">
+<img src="https://placehold.co/200x100/000000/FFFFFF/svg?text=%23000000">
+
+- Accent Color
+  - Hex: #FF6E42
+  - RGB: 255 110 66
+
+- Primary Color
+  - Hex: #000000
+  - RGB: 0 0 0
+
+
+## Fonts
+
+- Accent Font: Abril Fatface
+- Primary Font: Inter
+- Code Font: ui-monospace
+
+## Logos
+
+<figure markdown>
+  ![Vintner Logo Orange SVG](/assets/images/vintner/logo/vintner-logo-orange.svg){width="350"}
+  <figcaption>Vintner Logo Orange SVG</figcaption>
+</figure>
+
+<figure markdown>
+  ![Vintner Logo Orange PNG](/assets/images/vintner/logo/vintner-logo-orange.png){width="350"}
+  <figcaption>Vintner Logo Orange PNG</figcaption>
+</figure>
+
+<figure markdown>
+  ![Vintner Logo Black SVG](/assets/images/vintner/logo/vintner-logo-black.svg){width="350"}
+  <figcaption>Vintner Logo Black SVG</figcaption>
+</figure>
+
+<figure markdown>
+  ![Vintner Logo Black PNG](/assets/images/vintner/logo/vintner-logo-black.png){width="350"}
+  <figcaption>Vintner Logo Black PNG</figcaption>
+</figure>
+
+
+## Icons
+
+<figure markdown>
+  ![Vintner Icon SVG](/assets/images/vintner/icon/vintner-icon-bold.svg){width="100"}
+  <figcaption>Vintner Icon SVG</figcaption>
+</figure>

docs/mkdocs.yaml

@@ -10,8 +10,8 @@ theme:
     custom_dir: overrides
     icon:
         repo: octicons/mark-github-16
-        logo: assets/images/vintner-logo-bold
-    favicon: assets/images/vintner-logo-bold.svg
+        logo: assets/images/vintner-icon-bold
+    favicon: assets/images/vintner-icon-bold.svg
     font:
         text: Inter
         code: ui-monospace
@@ -140,6 +140,7 @@ nav:
 
     - More Information:
           - OpenTOSCA: https://www.opentosca.org
+          - branding.md
           - resources.md
           - publications.md
           - about-us

docs/overrides/overrides/home.html

@@ -91,32 +91,17 @@
     }
 
     .logo-container {
-        width: fit-content;
+        width: 173px;
         margin: auto;
     }
-
-    .logo-vintner {
-        font-family: 'Abril Fatface', serif;
-        color: var(--md-accent-fg-color);
-        font-size: 48px;
-        margin: 0;
-    }
-
-    .logo-opentosca {
-        text-align: right;
-        font-size: 12px;
-        margin-bottom: -33px;
-        font-weight: 700;
-    }
 </style>
 <section class='mdx-container'>
     <div class='md-grid md-typeset'>
         <div class='hero' style='padding-top: 5rem'>
 
             <div class='hero-content-slim'>
                 <div class="logo-container">
-                    <p class="logo-opentosca">OpenTOSCA</p>
-                    <p class="logo-vintner">Vintner</p>
+                    <img src="/assets/images/vintner/logo/vintner-logo-orange.svg">
                 </div>
                 <p>
                     OpenTOSCA Vintner is a TOSCA preprocessing and management layer which is able to deploy applications