[camel-website] 08/08: CAMEL-14958: simplify the use of css for search design

[zr...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit 016a511d08c69161bcd0a1d9eaac61ab108d3c38
Author: Aemie <ae...@hotmail.co.uk>
AuthorDate: Wed Jul 1 17:05:43 2020 +0530

    CAMEL-14958: simplify the use of css for search design
    
    fix minor issue
---
 antora-ui-camel/src/css/base.css      |  6 +++++
 antora-ui-camel/src/css/blog.css      |  4 ----
 antora-ui-camel/src/css/doc.css       | 12 ----------
 antora-ui-camel/src/css/frontpage.css |  4 ----
 antora-ui-camel/src/css/header.css    | 43 ++++++++++++-----------------------
 antora-ui-camel/src/css/static.css    | 13 +----------
 antora-ui-camel/src/css/toc.css       |  7 ------
 antora-ui-camel/src/css/vars.css      |  2 ++
 8 files changed, 23 insertions(+), 68 deletions(-)

diff --git a/antora-ui-camel/src/css/base.css b/antora-ui-camel/src/css/base.css
index 0179e91..2945bdd 100644
--- a/antora-ui-camel/src/css/base.css
+++ b/antora-ui-camel/src/css/base.css
@@ -4,6 +4,12 @@ body {
   scroll-padding-top: var(--body-top);
 }
 
+@media screen and (max-width: 1023px) {
+  body {
+    scroll-padding-top: var(--body-mobile-top);
+  }
+}
+
 *,
 *::before,
 *::after {
diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index b5eb413..93c0992 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -225,10 +225,6 @@ article.blog p {
 }
 
 @media screen and (max-width: 1023px) {
-  article.blog:first-child {
-    margin-top: 5rem;
-  }
-
   .blog.list aside {
     margin-top: 4.5rem;
   }
diff --git a/antora-ui-camel/src/css/doc.css b/antora-ui-camel/src/css/doc.css
index 04ec620..fb13466 100644
--- a/antora-ui-camel/src/css/doc.css
+++ b/antora-ui-camel/src/css/doc.css
@@ -37,18 +37,6 @@
   margin: 1.5rem 0;
 }
 
-@media screen and (min-width: 1024px) {
-  .doc > h1.page:first-child {
-    margin-top: 2.5rem;
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  .doc > h1.page:first-child {
-    margin-top: 5rem;
-  }
-}
-
 #preamble + .sect1,
 .doc .sect1 + .sect1 {
   margin-top: 2rem;
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index 0ee383d..a7de8d7 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -252,10 +252,6 @@ section.frontpage h2 {
 }
 
 @media screen and (max-width: 1023px) {
-  header.frontpage {
-    margin-top: var(--navbar-height);
-  }
-
   header.frontpage h1 {
     font-size: 9vw;
   }
diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index 269c59d..fe20dde 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -6,6 +6,12 @@ body {
   padding-top: var(--navbar-height);
 }
 
+@media screen and (max-width: 1023px) {
+  body {
+    padding-top: var(--navbar-mobile-height);
+  }
+}
+
 .navbar {
   background: var(--navbar-background);
   color: var(--navbar-font-color);
@@ -65,7 +71,7 @@ body {
   border: none;
   outline: none;
   line-height: 1;
-  height: 3rem;
+  height: var(--navbar-burger-height);
   position: relative;
   /* width: var(--navbar-height); */
   width: 2rem;
@@ -317,13 +323,7 @@ body {
   }
 
   .navbar-item {
-    padding: 1rem 2rem 1rem 0;
-  }
-
-  @media screen and (max-width: 1080px) {
-    .navbar-item {
-      padding-right: 1.5rem;
-    }
+    padding: 1rem 1.5rem 1rem 0;
   }
 
   .navbar-item.has-dropdown {
@@ -356,13 +356,7 @@ body {
 
   .navbar-end {
     justify-content: flex-end;
-    margin-left: 2rem;
-  }
-
-  @media screen and (min-width: 1024px) and (max-width: 1080px) {
-    .navbar-end {
-      margin-left: 1rem;
-    }
+    margin-left: 1rem;
   }
 
   .navbar-dropdown .navbar-item {
@@ -518,19 +512,6 @@ body {
   fill: var(--navbar-font-color);
 }
 
-@media screen and (max-width: 1023px) {
-  .navbar-tools {
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    padding: 0.3 0.5rem;
-  }
-
-  .navbar-tools .brand-icon {
-    margin: 0.25 rem;
-  }
-}
-
 /* Styling for mobile use */
 @media (max-width: 1023px) {
   .navbar {
@@ -547,13 +528,17 @@ body {
   }
 
   .navbar-tools {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 0.3 0.5rem;
     order: 5;
   }
 
   .navbar-tools .brand-icon {
     height: 2rem;
     width: 1.75rem;
-    margin: 1rem 0.35rem -0.5rem;
+    margin: 0.75rem 0.35rem -0.5rem;
   }
 
   .navbar-search {
diff --git a/antora-ui-camel/src/css/static.css b/antora-ui-camel/src/css/static.css
index 76fc1b8..991d294 100644
--- a/antora-ui-camel/src/css/static.css
+++ b/antora-ui-camel/src/css/static.css
@@ -1,17 +1,6 @@
 .static {
   margin: var(--static-margin);
-}
-
-@media screen and (min-width: 1024px) {
-  .static {
-    max-width: var(--static-max-width--desktop);
-  }
-}
-
-@media screen and (max-width: 1023px) {
-  .static {
-    margin-top: 5rem;
-  }
+  max-width: var(--static-max-width--desktop);
 }
 
 /* Antora markup is wrapped in <div>, we need to emulate the same */
diff --git a/antora-ui-camel/src/css/toc.css b/antora-ui-camel/src/css/toc.css
index 6b370a8..b4ff541 100644
--- a/antora-ui-camel/src/css/toc.css
+++ b/antora-ui-camel/src/css/toc.css
@@ -8,13 +8,6 @@
   top: var(--toc-top);
 }
 
-@media screen and (min-width: 1024px) and (max-width: 1174px) {
-  .toc.sidebar .toc-menu {
-    margin-top: 4rem;
-    top: var(--toc-mobile-top);
-  }
-}
-
 .toc .toc-menu h3 {
   color: var(--toc-heading-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index 6507dde..d8a0edf 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -135,10 +135,12 @@
   --footer-height: 23rem; /* empirically corresponding current design of the foooter */
   /* dimensions */
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
+  --navbar-burger-height: calc(54 / var(--rem-base) * 1rem);
   --navbar-mobile-height: calc(4rem + var(--navbar-height));
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: calc(var(--navbar-height) + 1rem);
+  --body-mobile-top: calc(var(--navbar-mobile-height) + 1rem);
   --body-min-height: calc(100vh - var(--navbar-height));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);