chore: add back previous mobile style, general aesthetic updates

* keeping mobile the way it was before so that it is unaffected by
all the recent changes in this branch.
* add box shadow & border to the header
* move padding to be only for desktop display
* remove box-shadow on header in dark mode

src/templates/QuickstartDetails.js

@@ -109,15 +109,14 @@ const QuickstartDetails = ({ data, location }) => {
             css={css`
               border-bottom: none;
               display: grid;
-              grid-template-areas:
-                'logo title cta'
-                'logo summ cta';
               grid-column-gap: 1rem;
               grid-row-gap: 1rem;
+              grid-template-areas:
+                'title logo'
+                'summ logo'
+                'cta logo';
               justify-content: normal;
               justify-self: center;
-              padding-bottom: 8px;
-              padding-top: 8px;
               row-gap: 1rem;
               width: 101%;
 
@@ -129,10 +128,21 @@ const QuickstartDetails = ({ data, location }) => {
 
               @media (min-width: 760px) {
                 background: var(--primary-background-color);
+                border: 1px solid var(--border-color);
+                border-radius: 0.25rem;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                grid-template-areas:
+                  'logo title cta'
+                  'logo summ cta';
+                padding: 8px 0;
                 position: sticky;
                 top: var(--global-header-height);
                 z-index: 80;
               }
+
+              .dark-mode & {
+                box-shadow: none;
+              }
             `}
           >
             {quickstart.logoUrl && (