From b06105180a55f91b4e780eb5cf53f103fbc9585d Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Thu, 2 Jun 2022 00:05:07 +0530
Subject: [PATCH] layout for header completed

---
 src/frontend/styles/components/aside.pcss  |  4 ++++
 src/frontend/styles/components/header.pcss |  5 ++--
 src/frontend/styles/layout.pcss            | 28 ++++++++++++----------
 src/frontend/styles/vars.pcss              |  2 +-
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/frontend/styles/components/aside.pcss b/src/frontend/styles/components/aside.pcss
index 7f99599..50f93f0 100644
--- a/src/frontend/styles/components/aside.pcss
+++ b/src/frontend/styles/components/aside.pcss
@@ -40,6 +40,10 @@
       margin-bottom: 10px;
       font-size: 1.18em;
       font-weight: 600;
+      max-width: var(--layout-width-aside);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       @media (--mobile) {
         margin-bottom: 10px;
diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss
index 125eef5..473c429 100644
--- a/src/frontend/styles/components/header.pcss
+++ b/src/frontend/styles/components/header.pcss
@@ -1,12 +1,13 @@
 .docs-header {
   display: flex;
   flex-shrink: 0;
-  padding: 0 var(--layout-padding-horizontal);
+  padding: 12px var(--layout-padding-horizontal);
   border-bottom: 1px solid var(--color-line-gray);
-  font-size: 15.8px;
+  font-size: 18px;
   line-height: 50px;
   flex-wrap: wrap;
   position: relative;
+  line-height: 24px;
 
   @media (--mobile) {
     line-height: 40px;
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index 8912295..f2a9763 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -1,23 +1,10 @@
 .docs {
   display: flex;
-  padding: 0px var(--layout-padding-horizontal);
 
   @media (--mobile) {
     flex-wrap: wrap;
   }
 
-  &__aside {
-    width: var(--layout-width-aside);
-
-    @media (--mobile) {
-      width: 100%;
-      flex-basis: 100%;
-      padding: 20px var(--layout-padding-horizontal) !important;
-      margin: 0 calc(-1 * var(--layout-padding-horizontal));
-      border-bottom: 1px solid var(--color-line-gray);
-    }
-  }
-
   &__content {
     flex-grow: 2;
     word-wrap: break-word;
@@ -41,4 +28,19 @@
       padding: 20px 0;
     }
   }
+
+  &__aside {
+    width: var(--layout-width-aside);
+    padding: var(--layout-padding-vertical) 22px;
+    border-right: solid 1px red;
+    height: 100%;
+
+    @media (--mobile) {
+      width: 100%;
+      flex-basis: 100%;
+      padding: 20px var(--layout-padding-horizontal) !important;
+      margin: 0 calc(-1 * var(--layout-padding-horizontal));
+      border-bottom: 1px solid var(--color-line-gray);
+    }
+  }
 }
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index b0ae589..ecd8b01 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -10,7 +10,7 @@
   /**
    * Site layout sizes
    */
-  --layout-padding-horizontal: 30px;
+  --layout-padding-horizontal: 16px;
   --layout-padding-vertical: 30px;
   --layout-width-aside: 300px;
   --layout-width-main-col: 650px;