fix: grid layout and refactor css (#1978)

fix grid layout and refactor css

Author: ShubhamOulkar

_layouts/home.html

@@ -14,7 +14,7 @@
     <div id="overlay"></div>
 
     {% if page.lang != 'en' %}
-         <div id="i18n-notice-box" class="doc-box doc-notice">
+         <div id="i18n-notice-box" class="doc-notice">
             {% include i18n-notice.html %}
         </div>
     {% endif %}

_layouts/page.html

@@ -15,7 +15,7 @@
   <div id="overlay"></div>
 
   {% if page.lang != 'en' %}
-       <div id="i18n-notice-box" class="doc-box doc-notice">
+       <div id="i18n-notice-box" class="doc-notice">
           {% include i18n-notice.html %}
       </div>
   {% endif %}

css/style.css

@@ -12,6 +12,7 @@ body {
   display: grid;
   grid-template-areas:
   'header'
+  'i18n'
   'content'
   'footer'
 }
@@ -86,20 +87,13 @@ main.home {
   max-width: 75rem;
   margin: 40px auto 2%;
   padding-inline: 5%;
+  grid-area: content;
 }
 
 #home-content {
   display: flex;
 }
 
-.non-en-doc:has(#i18n-notice-box.hidden) #home-content {
-  margin-top: 150px;
-}
-
-.non-en-doc:has(#i18n-notice-box:not(.hidden)) .content {
-  margin-top: 50px;
-}
-
 #homepage-leftpane {
   min-width: 500px;
   margin-right: 30px;
@@ -619,6 +613,10 @@ table ul {
 }
 
 .doc-notice {
+  padding-block: 1rem;
+  padding-inline: 2.5rem;
+  color: var(--box-fg);
+  border-radius: 0 6px 6px 0;
   background: var(--notice-bg);
   border-left: 3px solid var(--notice-accent);
 }
@@ -649,14 +647,16 @@ table ul {
 }
 
 #i18n-notice-box {
-  margin: 100px 3% 20px 3%;
+  margin-inline: auto;
+  margin-block-start: 2rem;
   position: relative;
+  grid-area: i18n;
 }
 
 #close-i18n-notice-box {
   position: absolute;
   top: 3px;
-  right: 4px;
+  right: 9px;
   color: var(--notice-accent);
   cursor: pointer;
 }
@@ -1100,6 +1100,7 @@ h2 a {
   display: flex;
   justify-content: center;
   flex-direction: column;
+  grid-area: content;
 }
 
 .content-404 p {