update light mode header for clear selection division

calimania · Jan 21, 2025 · 7c1d301 · 7c1d301
1 parent 1bda4a3
commit 7c1d301
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 43 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -12,7 +12,7 @@ export interface Props {
 const { activeNav, noMarginTop = false } = Astro.props;
 ---
 
-<footer class={`${noMarginTop ? "" : "mt-auto"}`}>
+<footer class={`${noMarginTop ? "" : "mt-auto"} bg-skin-card dark:bg-skin-fill`}>
   <Hr noPadding />
   <div class="footer-wrapper mb-10">
     <br />

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -3,7 +3,7 @@ import { SITE } from "@config";
 import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 import type Store from "../interfaces/Store";
-import { HiOutlineMenuAlt2, HiOutlineMenuAlt3 } from "react-icons/hi";
+import { HiOutlineMenuAlt2 } from "react-icons/hi";
 
 
 export type nav = "tags" | "about" | "search" | "pages" | "blog" | "products";
@@ -19,7 +19,7 @@ export interface Props {
 const { activeNav, store, products } = Astro.props;
 ---
 
-<header>
+<header class="bg-skin-card dark:bg-skin-fill">
   <a id="skip-to-content" href="#main-content">Skip to content</a>
   <div class="nav-container">
     <div class="top-nav-wrap">

diff --git a/src/pages/stores/[slug].astro b/src/pages/stores/[slug].astro
@@ -55,47 +55,49 @@ const store: { data: Store } = stores.find(
   <Header activeNav="pages" store={store} />
   <Main pageTitle={store?.data?.title} pageDesc={`Store `}>
     <main id="main-content">
-      <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+      <section id="about" class="mb-10 prose-img:border-0 flex flex-col lg:flex-row">
+          <div class="lg:w-1/2 w-full">
+            {
+              store?.data?.SEO?.socialImage && (
+                <HeroImage
+                  image={store?.data?.SEO?.socialImage?.formats?.medium}
+                  title={store?.data?.title}
+                />
+              )
+            }
+          </div>
+          <section class="mt-4 lg:mt-0 lg:w-1/2 w-full">
+            {
+              store?.data.Description?.split("\n").map(desc => (
+                <p class="mb-5">{desc}</p>
+              ))
+            }
+          </section>
+      </section>
+      <Hr />
+      <h2 class="brand-yellow mt-2 text-2xl tracking-wider sm:text-3xl">
+        Urls
+      </h2>
+      <div class="all-posts-btn-wrapper">
         {
-          store?.data?.SEO?.socialImage && (
-            <HeroImage
-              image={store?.data?.SEO?.socialImage?.formats?.medium}
-              title={store?.data?.title}
-            />
-          )
+          store?.data?.URLS.map(url => {
+            if (url.URL && url.Label)
+              return (
+                <p class="mb-5 mt-2">
+                  <LinkButton target="_blank" href={url.URL}>
+                    {url.Label}
+                    <svg xmlns="http://www.w3.org/2000/svg">
+                      <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
+                    </svg>
+                  </LinkButton>
+                </p>
+              );
+          })
         }
-        <section>
-          {
-            store?.data.Description?.split("\n").map(desc => (
-              <p class="mb-5">{desc}</p>
-            ))
-          }
-        </section>
-        <Hr />
-        <h2 class="brand-yellow mt-2 text-2xl tracking-wider sm:text-3xl">
-          Urls
-        </h2>
-        <div class="all-posts-btn-wrapper">
-          {
-            store?.data?.URLS.map(url => {
-              if (url.URL && url.Label)
-                return (
-                  <p class="mb-5 mt-2">
-                    <LinkButton target="_blank" href={url.URL}>
-                      {url.Label}
-                      <svg xmlns="http://www.w3.org/2000/svg">
-                        <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
-                      </svg>
-                    </LinkButton>
-                  </p>
-                );
-            })
-          }
-        </div>
-        <!-- <Hr /> -->
-        <!-- {store.slides} -->
-      </section>
-    </main>
+      </div>
+      <!-- <Hr /> -->
+      <!-- {store.slides} -->
+  </main>
 
     <!-- <Pagination
       {currentPage}

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -10,7 +10,7 @@
     --color-accent: 0, 108, 172;
     --color-card: 230, 230, 230;
     --color-card-muted: 205, 205, 205;
-    --color-border: 236, 233, 233;
+    --color-border: 195, 201, 201;
   }
   html[data-theme="dark"] {
     --color-fill: 33, 39, 55;