Merge pull request #17 from AxonIQ/Structure-update

Restructure page content
AxonIQ · Jan 16, 2025 · 9b4d4b9 · 9b4d4b9
2 parents 0c989b8 + 8e63d67
commit 9b4d4b9
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 61 deletions.
diff --git a/src/css/base.css b/src/css/base.css
@@ -6,28 +6,25 @@
 
 html {
   box-sizing: border-box;
-  font-size: var(--body-font-size);
-  height: 100%;
+  height: 100vh;
+  overflow-y: clip;
   scroll-behavior: smooth;
 }
 
-@media screen and (min-width: 1024px) {
-  html {
-    font-size: var(--body-font-size--desktop);
-  }
-}
-
 body {
   background: var(--body-background);
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
+  padding: 0;
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
+  width: 100%;
   flex-direction: column;
+  font-size: 18px;
 }
 
 a {
@@ -112,7 +109,7 @@ object[type="image/svg+xml"]:not([width]) {
 }
 
 @media (pointer: fine) {
-  @supports (scrollbar-width: thin) {
+  /* @supports (scrollbar-width: thin) {
     html {
       scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
     }
@@ -121,9 +118,9 @@ object[type="image/svg+xml"]:not([width]) {
       scrollbar-width: thin;
       scrollbar-color: var(--scrollbar-thumb-color) transparent;
     }
-  }
+  } */
 
-  html::-webkit-scrollbar {
+  /* html::-webkit-scrollbar {
     background-color: var(--scrollbar-track-color);
     height: 12px;
     width: 12px;
@@ -148,5 +145,5 @@ object[type="image/svg+xml"]:not([width]) {
 
   ::-webkit-scrollbar-thumb:hover {
     background-color: var(--scrollbar_hover-thumb-color);
-  }
+  } */
 }
diff --git a/src/css/body.css b/src/css/body.css
@@ -1,11 +1,11 @@
-@media screen and (min-width: 1024px) {
-  .body {
-    display: flex;
-    margin: 0 auto 48px;
-    max-width: 1296px;
-    width: 100%;
-    flex-direction: row;
-    flex-grow: 2;
-    gap: 24px;
-  }
+.body {
+  display: flex;
+  align-items: flex-start;
+  margin: 0 auto 48px;
+  max-width: 1296px;
+  width: 100%;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: 24px;
+  padding: 0;
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -3,6 +3,15 @@ main.article {
   align-items: stretch;
 }
 
+.content_container {
+  overflow-y: auto;
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  scrollbar-gutter: stable both-edges;
+}
+
 .nav-panel-menu .versions {
   display: flex;
   flex-wrap: wrap;
@@ -12,7 +21,8 @@ main.article {
   list-style: none;
 }
 
-.card {
+.card,
+.imageblock.cover img {
   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;
 }
@@ -193,7 +203,6 @@ aside.nav {
   background-color: var(--color-ox);
   font-size: 14px;
   text-align: center;
-  position: sticky;
   padding: 8px 0;
   top: 0;
 }
@@ -208,15 +217,10 @@ aside.nav {
   border-radius: 5px;
   background-color: var(--color-peacock);
   font-weight: bold;
-  padding: 4px 12px;
+  padding: 2px 8px 4px;
   margin-left: 8px;
 }
 
-header {
-  position: sticky;
-  top: 0;
-}
-
 @media (max-width: 820px) {
   .primary-footer {
     display: flex;

diff --git a/src/css/doc.css b/src/css/doc.css
@@ -3,10 +3,8 @@
   font-size: var(--doc-font-size);
   hyphens: auto;
   line-height: var(--doc-line-height);
-  /* margin: var(--doc-margin); */
   max-width: 746px;
   width: 100%;
-  /* padding: 0 0 4rem; */
   padding: 0 8px;
   margin: 0;
 }

diff --git a/src/css/footer.css b/src/css/footer.css
@@ -4,6 +4,7 @@ footer.footer {
   font-size: calc(15 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: 1.5rem;
+  margin: 0 -16px;
 }
 
 .footer p {

diff --git a/src/css/header.css b/src/css/header.css
@@ -1,3 +1,7 @@
+header {
+  z-index: 10;
+}
+
 html.is-clipped--navbar {
   overflow-y: hidden;
 }
@@ -162,10 +166,16 @@ input#search-input:disabled {
   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;
+  display: inline-block;
   line-height: 100%;
   padding: 0.5rem 1rem;
   font-weight: 900;
+  text-decoration: none;
+}
+
+.navbar-item.navbar-button:hover {
+  color: var(--color-ox);
+  text-decoration: none;
 }
 
 .navbar-link {

diff --git a/src/css/main.css b/src/css/main.css
@@ -1,7 +1,3 @@
-.body {
-  flex-grow: 2;
-}
-
 @media screen and (max-width: 1023.5px) {
   aside.toc.sidebar {
     display: none;

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -1,11 +1,9 @@
 .nav-container {
-  position: fixed;
-  top: var(--navbar-height);
-  left: 0;
-  width: 100%;
   font-size: calc(17 / var(--rem-base) * 1rem);
   z-index: var(--z-index-nav);
   visibility: hidden;
+  position: sticky;
+  top: 2.5rem;
 }
 
 @media screen and (min-width: 769px) {
@@ -18,8 +16,6 @@
   .nav-container {
     font-size: calc(15.5 / var(--rem-base) * 1rem);
     flex: none;
-    position: static;
-    top: 0;
     visibility: visible;
   }
 }

diff --git a/src/css/toc.css b/src/css/toc.css
@@ -5,7 +5,7 @@
 .toc.sidebar .toc-menu {
   margin-right: 0.75rem;
   position: sticky;
-  top: calc(var(--navbar-height) + 88px);
+  top: 2.5rem;
 }
 
 .toc .toc-menu h3 {

diff --git a/src/css/toolbar.css b/src/css/toolbar.css
@@ -8,11 +8,9 @@
   max-width: 1296px;
   width: calc(100% - 16px);
   justify-content: flex-start;
-  position: sticky;
-  top: 100px;
-  margin: 0 auto;
+  margin: 8px auto 0;
   padding: 0 0 0 8px;
-  /* z-index: var(--z-index-toolbar); */
+  z-index: 8;
 }
 
 .toolbar a {

diff --git a/src/layouts/component-list.hbs b/src/layouts/component-list.hbs
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-{{> head defaultPageTitle='Untitled'}}
+    {{> head defaultPageTitle='Untitled'}}
   </head>
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
-{{> header}}
-{{> "component-list|body"}}
-{{> footer}}
+    {{> banner}}
+    {{> header}}
+    {{> toolbar}}
+    <div class="content_container">
+      {{> "component-list|body"}}
+      {{> footer}}
+    </div>
   </body>
 </html>
diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-{{> head defaultPageTitle='Untitled'}}
+    {{> head defaultPageTitle='Untitled'}}
   </head>
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
-{{> header}}
-{{> body}}
-{{> footer}}
+    {{> banner}}
+    {{> header}}
+    {{> toolbar}}
+    <div class="content_container">
+      {{> body}}
+      {{> footer}}
+    </div>
   </body>
 </html>
diff --git a/src/partials/body.hbs b/src/partials/body.hbs
@@ -1,4 +1,3 @@
-{{> toolbar}}
 <div class="body">
 {{> nav}}
 {{> main}}

diff --git a/src/partials/component-list|body.hbs b/src/partials/component-list|body.hbs
@@ -1,5 +1,5 @@
 <div class="body">
 {{!--> nav --}}
-<div class="nav-container" style="width:0em"></div>
+<div class="nav-container"></div>
 {{> "component-list|main"}}
 </div>
diff --git a/src/partials/component-list|main.hbs b/src/partials/component-list|main.hbs
@@ -1,5 +1,4 @@
 <main class="article">
-  {{> toolbar}}
   <div class="content">
 {{#if (eq page.layout '404')}}
 {{> article-404}}

diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
@@ -1,5 +1,4 @@
 <header class="header">
-  {{> banner}}
   <nav class="navbar">
     <div class="navbar-brand">
       <a class="navbar-item" href="{{{or site.url siteRootPath}}}"><img src="{{uiRootPath}}/img/logo-dark4x.png" class="header_logo" /></a>