Add Navbar, Footer and background styles

iotaledger · Jun 26, 2024 · ce72c72 · ce72c72
1 parent a23410a
commit ce72c72
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 144 deletions.
diff --git a/docs/site/docusaurus.config.js b/docs/site/docusaurus.config.js
@@ -174,7 +174,7 @@ const config = {
         },
       },
       navbar: {
-        title: "IOTA Documentation",
+        title: "",
         logo: {
           alt: "IOTA Docs Logo",
           src: "img/iota-logo.svg",
@@ -196,28 +196,22 @@ const config = {
             label: "References",
             to: "references",
           },
-
-          /*
-          {
-            type: "docsVersionDropdown",
-            position: "right",
-            dropdownActiveClassDisabled: true,
-          },
-          {
-            type: "localeDropdown",
-            position: "right",
-          },
-          */
         ],
       },
       footer: {
         logo: {
-          alt: "IOTA Logo",
-          src: "img/iota-logo-footer.svg",
-          href: "https://iota.io",
+          alt: "IOTA Wiki Logo",
+          src: "img/IOTA-logo.svg",
+          srcDark: "img/IOTA-logo.svg",
+          width: 138,
+          height: 48,
         },
-        style: "dark",
-        copyright: `© ${new Date().getFullYear()} IOTA Foundation | Documentation distributed under <a href="https://github.com/iota-foundation/iota-docs/blob/main/LICENSE">CC BY 4.0</a>`,
+        copyright: `<div style={{ dispay: "flex", flexDirection: "column" }}>
+        © ${new Date().getFullYear()} IOTA Foundation
+        <div>
+                 <a>Privacy Policy</a> • <a>Impressum</a> • <a>Contact Us</a>
+        </div>
+      </div>`,
       },
       prism: {
         theme: themes.github,

diff --git a/docs/site/src/components/Cards/styles.module.css b/docs/site/src/components/Cards/styles.module.css
@@ -1,46 +1,45 @@
 :root {
   --iota-cards-border-color: transparent;
-  --iota-cards-background: #F5F8FA;
-  --iota-cards-header: #4DA2FF;
-  --iota-cards-copy: #91A3B1;
-  --iota-cards-background-hover: #EBF1F5;
+  --iota-cards-background: #f5f8fa;
+  --iota-cards-header: #4da2ff;
+  --iota-cards-copy: #91a3b1;
+  --iota-cards-background-hover: #ebf1f5;
 }
 
-[data-theme='dark'] {
-    --iota-cards-border-color: rgba(247, 247, 248, 0.05);
-    --iota-cards-background: rgba(247, 247, 248, 0.05);
-    --iota-cards-background-hover: rgba(247, 247, 248, 0.15);
-    --iota-cards-header: #4DA2FF;
-    --iota-cards-copy: #ABBDCC;
+[data-theme="dark"] {
+  --iota-cards-border-color: rgba(247, 247, 248, 0.05);
+  --iota-cards-background: rgba(247, 247, 248, 0.05);
+  --iota-cards-background-hover: rgba(247, 247, 248, 0.15);
+  --iota-cards-header: #4da2ff;
+  --iota-cards-copy: #abbdcc;
 }
 
 .card {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    row-gap: .75rem;
-    border-radius: 20px;
-    padding: 1.25rem;
-    padding-bottom: 1.5rem;
-    background: var(--iota-cards-background);
-    cursor: pointer;
-    transition: background .25s ease-in-out;
-    border: solid 1px var(--iota-cards-border-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  row-gap: 0.75rem;
+  border-radius: 20px;
+  padding: 1.25rem;
+  padding-bottom: 1.5rem;
+  background: var(--iota-cards-background);
+  cursor: pointer;
+  transition: background 0.25s ease-in-out;
+  border: solid 1px var(--iota-cards-border-color);
 }
 .card:hover {
-    background: var(--iota-cards-background-hover);
+  background: var(--iota-cards-background-hover);
 }
 
 .card__header__copy {
-    margin: 0;
-    font-size: 1.125rem;
-    line-height: 1.25rem;
-    color: var(--iota-cards-header);
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+  color: var(--iota-cards-header);
 }
 
 .card__copy {
-    font-size: .8125rem;
-    line-height: 1.3125rem;
-    color: var(--iota-cards-copy);
+  font-size: 0.8125rem;
+  line-height: 1.3125rem;
+  color: var(--iota-cards-copy);
 }
-