Update to AxonIQ web style.

AxonIQ · Sep 13, 2024 · 0aa5ec2 · 0aa5ec2
1 parent 85bb899
commit 0aa5ec2
Show file tree

Hide file tree

Showing 26 changed files with 2,228 additions and 15,501 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/base.css b/src/css/base.css
@@ -25,6 +25,9 @@ body {
   margin: 0;
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 a {

diff --git a/src/css/body.css b/src/css/body.css
@@ -1,5 +1,10 @@
 @media screen and (min-width: 1024px) {
   .body {
     display: flex;
+    margin: 0 auto;
+    max-width: 1296px;
+    width: 100%;
+    flex-direction: row;
+    flex-grow: 2;
   }
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1,3 +1,8 @@
+main.article {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .nav-panel-menu .versions {
   display: flex;
   flex-wrap: wrap;
@@ -7,6 +12,11 @@
   list-style: none;
 }
 
+.card {
+  box-shadow: 6px 7px 14px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 1.25rem;
+}
+
 .nav-panel-menu .version {
   margin: 0.375rem 0.375rem 0 0;
 }
@@ -46,15 +56,9 @@
   .navbar-end .navbar-item.has-dropdown:hover .navbar-link,
   .navbar-end .navbar-link:hover,
   .navbar-end > a.navbar-item:hover {
-    border: 1px solid var(--navbar-menu-border-color);
-    border-bottom: 1px solid var(--color-white);
-    top: 1px;
     position: relative;
     z-index: 2;
-  }
-
-  .navbar-dropdown {
-    border-top: 1px solid var(--navbar-menu-border-color);
+    cursor: pointer;
   }
 }
 
@@ -87,19 +91,6 @@
   opacity: 0.6;
 }
 
-.page-versions .version-menu {
-  border: 1px solid var(--color-gecko);
-}
-
-.page-versions .version {
-  display: block;
-  border-top: 1px solid var(--color-elephant);
-  width: 100%;
-  text-align: right;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-}
-
 .doc .admonitionblock .icon i::after {
   font-family: var(--body-font-family);
 }
@@ -156,11 +147,11 @@
 }
 
 .needs-improvement {
-  background-color: lightyellow;
-  color: goldenrod;
+  background-color: var(--color-pale-duckling);
+  color: var(--color-ox);
   padding: 0;
   padding-bottom: 1rem;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 2rem 2rem 0 2rem;
   display: flex;
   align-items: center;
 }
@@ -188,3 +179,17 @@
 .needs-improvement .improve-request {
   font-size: small;
 }
+
+aside.nav {
+  overflow-y: auto;
+}
+
+@media (max-width: 820px) {
+  .primary-footer {
+    display: flex;
+    flex-direction: column;
+    padding: 0 30px;
+    gap: 19px;
+    justify-content: center;
+  }
+}
diff --git a/src/css/custom_vars.css b/src/css/custom_vars.css
@@ -21,6 +21,7 @@
   --color-pale-duckling: #f7efba;
 
   /* Axon greys colors */
+  --color-dove: #fff;
   --color-seal: #f5f6f6;
   --color-mouse: #ecedee;
   --color-elephant: #a1a4aa;
@@ -33,19 +34,21 @@
   --body-font-weight-bold: 700;
   --panel-background: var(--color-seal);
   --panel-border-color: var(--color-gecko);
-  --navbar-background: var(--color-white);
+  --navbar-background: var(--color-dove);
   --navbar-font-color: var(--color-ox);
-  --navbar_hover-background: var(--color-seal);
-  --navbar-menu_hover-background: var(--color-seal);
+  --navbar_hover-background: var(--color-dove);
+  --navbar_button-background: var(--color-gecko);
+  --navbar_button-foreground: var(--color-dove);
+  --navbar-menu_hover-background: var(--color-dove);
   --page-version-menu-background: var(--color-seal);
   --quote-border-color: var(--color-gecko);
   --footer-background: var(--color-rhino);
   --footer-font-color: var(--color-seal);
-  --footer-link-font-color: var(--color-white);
+  --footer-link-font-color: var(--color-dove);
   --link-font-color: var(--color-peacock);
   --link_hover-font-color: var(--color-peacock);
   --toc-border-color: var(--color-mouse);
-  --heading-font-color: var(--color-black);
+  --heading-font-color: var(--color-ox);
   --heading-font-weight: 300;
   --alt-heading-font-weight: 300;
 }
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -3,16 +3,17 @@
   font-size: var(--doc-font-size);
   hyphens: auto;
   line-height: var(--doc-line-height);
-  margin: var(--doc-margin);
+  /* margin: var(--doc-margin); */
   max-width: var(--doc-max-width);
   padding: 0 1rem 4rem;
+  margin: 0 auto;
 }
 
 @media screen and (min-width: 1024px) {
   .doc {
     flex: auto;
     font-size: var(--doc-font-size--desktop);
-    margin: var(--doc-margin--desktop);
+    /* margin: var(--doc-margin--desktop); */
     max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
@@ -55,21 +56,24 @@
   margin-top: 2rem;
 }
 
-.doc h1.sect0 {
-  background: var(--abstract-background);
-  font-size: 1.8em;
-  margin: 1.5rem -1rem 0;
-  padding: 0.5rem 1rem;
+.doc h1 {
+  font-size: 2em;
+  font-weight: 900;
+  margin: 1.5rem 0 0;
 }
 
 .doc h2:not(.discrete) {
-  border-bottom: 1px solid var(--section-divider-color);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
+  padding: 1rem 0 0.1rem;
+  font-size: 1.8rem;
+  color: var(--color-gecko);
+}
+
+.doc h3:not(.discrete) {
+  padding: 1rem 0 0.1rem;
+  font-size: 1.2rem;
+  font-weight: 900;
 }
 
-.doc h3:not(.discrete),
 .doc h4:not(.discrete) {
   font-weight: var(--alt-heading-font-weight);
 }

diff --git a/src/css/header.css b/src/css/header.css
@@ -19,6 +19,7 @@ body {
 
 .navbar a {
   text-decoration: none;
+  font-weight: 900;
 }
 
 .navbar-brand {
@@ -27,6 +28,11 @@ body {
   padding-left: 1rem;
 }
 
+.navbar-brand .header_logo {
+  height: 40px;
+  width: auto;
+}
+
 .navbar-brand .navbar-item {
   color: var(--navbar-font-color);
 }
@@ -54,12 +60,12 @@ body {
 }
 
 #search-input {
-  color: #333;
+  color: var(--color-ox);
   font-family: inherit;
-  font-size: 0.95rem;
+  font-size: 0.8rem;
   width: 150px;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.1em;
+  border: 1px solid var(--color-mouse);
+  border-radius: 4px;
   line-height: 1.5;
   padding: 0 0.25em;
 }
@@ -72,7 +78,7 @@ body {
 }
 
 #search-input:disabled::placeholder {
-  color: #4c4c4c;
+  color: var(--color-rhino);
 }
 
 #search-input:focus {
@@ -130,7 +136,7 @@ body {
   color: var(--navbar-menu-font-color);
   display: block;
   line-height: var(--doc-line-height);
-  padding: 0.5rem 1rem;
+  padding: 8px;
 }
 
 .navbar-item.has-dropdown {
@@ -150,6 +156,18 @@ body {
   height: inherit;
 }
 
+.navbar-item.navbar-button {
+  color: var(--navbar_button-foreground);
+  background-color: var(--navbar_button-background);
+  border: 0 hidden;
+  border-radius: 20px;
+  box-shadow: 6px 7px 14px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  display: block;
+  line-height: 100%;
+  padding: 0.5rem 1rem;
+  font-weight: 900;
+}
+
 .navbar-link {
   padding-right: 2.5em;
 }
@@ -188,6 +206,12 @@ body {
   white-space: nowrap;
 }
 
+.navbar-menu {
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
 @media screen and (max-width: 768.5px) {
   .navbar-brand .navbar-item.search {
     padding-left: 0;
@@ -206,6 +230,10 @@ body {
     height: inherit;
   }
 
+  .navbar-item.navbar-button {
+    margin: 16px;
+  }
+
   .navbar-brand .navbar-item {
     align-items: center;
     display: flex;
@@ -228,6 +256,16 @@ body {
   .navbar-menu .navbar-link:hover {
     background: var(--navbar-menu_hover-background);
   }
+
+  .navbar-item.has-dropdown .navbar-dropdown {
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  #search-input {
+    width: 100%;
+    margin: 0 8px;
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -241,6 +279,12 @@ body {
     display: flex;
   }
 
+  .navbar-end {
+    gap: 24px;
+    align-items: center;
+    padding: 0 16px;
+  }
+
   .navbar-item,
   .navbar-link {
     display: flex;
@@ -258,18 +302,10 @@ body {
   }
 
   .navbar-link::after {
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    content: "";
-    display: block;
-    height: 0.5em;
-    pointer-events: none;
+    font-family: var(--font-awesome);
+    content: "\f0d7";
     position: absolute;
-    transform: rotate(-45deg);
-    width: 0.5em;
-    margin-top: -0.375em;
-    right: 1.125em;
-    top: 50%;
+    right: 1rem;
   }
 
   .navbar-end > .navbar-item,
@@ -280,7 +316,7 @@ body {
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover,
   .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
+    /* background: var(--navbar_hover-background); */
     color: var(--navbar-font-color);
   }
 
@@ -290,11 +326,11 @@ body {
 
   .navbar-dropdown {
     background: var(--navbar-menu-background);
-    border: 1px solid var(--navbar-menu-border-color);
-    border-top: none;
-    border-radius: 0 0 0.25rem 0.25rem;
+    border: none;
+    border-radius: 18px;
     display: none;
     top: 100%;
+    padding: 16px;
     left: 0;
     min-width: 100%;
     position: absolute;
@@ -322,4 +358,8 @@ body {
   .navbar-dropdown a.navbar-item:hover {
     background: var(--navbar-menu_hover-background);
   }
+
+  .navbar-item.navbar-button {
+    color: var(--navbar_button-foreground);
+  }
 }
diff --git a/src/css/main.css b/src/css/main.css
@@ -12,6 +12,7 @@
   main {
     flex: auto;
     min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
+    display: flex;
   }
 
   main > .content {