Skip to content

Commit

Permalink
feat(presentation): refactor dark mode styles and improve footer comp…
Browse files Browse the repository at this point in the history 
…onent structure
  • Loading branch information
@ahmet-cetinkaya
ahmet-cetinkaya committed Dec 31, 2024
1 parent e41bde6 commit 861316b
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 82 deletions.
38 changes: 19 additions & 19 deletions src/presentation/src/pages/_components/posts/post-page.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,62 +209,62 @@ const structuredData = {
}

/* Dark mode styles */
:global(.dark) .ac-content {
html.dark .ac-content {
color: #e5e5e5;
}

:global(.dark) .ac-content h1,
:global(.dark) .ac-content h2,
:global(.dark) .ac-content h3,
:global(.dark) .ac-content h4,
:global(.dark) .ac-content h5,
:global(.dark) .ac-content h6 {
html.dark .ac-content h1,
html.dark .ac-content h2,
html.dark .ac-content h3,
html.dark .ac-content h4,
html.dark .ac-content h5,
html.dark .ac-content h6 {
color: #f3f4f6;
}

:global(.dark) .ac-content p,
:global(.dark) .ac-content ul,
:global(.dark) .ac-content ol {
html.dark .ac-content p,
html.dark .ac-content ul,
html.dark .ac-content ol {
color: #d1d5db;
}

:global(.dark) .ac-content a {
html.dark .ac-content a {
color: #60a5fa;
}

:global(.dark) .ac-content a:hover {
html.dark .ac-content a:hover {
color: #93c5fd;
}

:global(.dark) .ac-content blockquote {
html.dark .ac-content blockquote {
border-left-color: #4b5563;
background-color: #1f2937;
color: #e5e5e5;
}

:global(.dark) .ac-content table {
html.dark .ac-content table {
border-color: #374151;
}

:global(.dark) .ac-content th {
html.dark .ac-content th {
background-color: #374151;
color: #f3f4f6;
border-color: #4b5563;
}

:global(.dark) .ac-content td {
html.dark .ac-content td {
border-color: #4b5563;
}

:global(.dark) .ac-content tr:nth-child(even) {
html.dark .ac-content tr:nth-child(even) {
background-color: #1f2937;
}

:global(.dark) .ac-content tr:hover {
html.dark .ac-content tr:hover {
background-color: #374151;
}

:global(.dark) .ac-content img {
html.dark .ac-content img {
opacity: 0.9;
}
</style>
Expand Down
105 changes: 42 additions & 63 deletions src/presentation/src/shared/layouts/components/FooterSection.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,68 +47,47 @@ const footerSections = [
<footer class="relative w-full overflow-hidden shadow-lg">
<!-- Horizontal Pipe -->
<div class="absolute bottom-12 right-0 flex h-6 w-full items-center">
<div class="h-4 w-full bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600">
</div>
<div class="ac-pipe"></div>
</div>

<div class="relative mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-screen-2xl">
<!-- Radiator top border -->
<div
class="h-4 w-full rounded-t-lg bg-gradient-to-r from-gray-500 to-gray-400 shadow-inner dark:from-gray-700 dark:to-gray-800"
>
</div>
<div class="ac-radiator-border rounded-t-lg"></div>

<div
class="relative grid grid-cols-1 gap-x-12 gap-y-8 bg-gradient-to-b from-neutral-50/90 to-neutral-50/90 px-2 py-8 dark:from-neutral-900/90 dark:to-neutral-900/90 md:grid-cols-3 lg:px-8"
>
<!-- Top Left Valve -->
<div class="absolute -left-6 -top-3 z-20 h-full">
<div
class="relative size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-400 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600"
>
<div class="ac-valve">
<div class="absolute inset-0 flex items-center justify-center">
<div class="size-2 -rotate-45 transform rounded-full bg-neutral-600 dark:bg-neutral-500"></div>
<div class="ac-valve-center"></div>
</div>
</div>

<!-- Top Left Valve Heat Pipe -->
<div
class="-mt-2 ms-[0.4rem] h-full w-3 bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600"
>
</div>
<div class="ac-vertical-pipe"></div>

<!-- Horizontal Pipe -->
<div class="absolute -bottom-5 right-0 flex h-6 w-full items-center">
<div
class="h-4 w-full bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600"
>
</div>
<div class="ac-pipe"></div>
</div>
</div>

<!-- Bottom Right Valve -->
<div class="absolute -bottom-2 -right-6 z-20">
<div
class="size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-400 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600"
>
<div class="ac-valve">
<div class="absolute inset-0 flex items-center justify-center">
<div class="size-2 -rotate-45 transform rounded-full bg-neutral-600 dark:bg-neutral-500"></div>
<div class="ac-valve-center"></div>
</div>
</div>
</div>
<!-- Vertical radiator fins effect -->
<div class="pointer-events-none absolute inset-0 flex hidden justify-between md:flex">
{
[...Array(60)].map(() => (
<div class="h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-300/50 dark:from-gray-800/50 dark:to-gray-900/50" />
))
}
{[...Array(60)].map(() => <div class="ac-vertical-fin" />)}
</div>
<div class="pointer-events-none absolute inset-0 flex justify-between md:hidden">
{
[...Array(20)].map(() => (
<div class="h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-300/50 dark:from-gray-800/50 dark:to-gray-900/50" />
))
}
{[...Array(20)].map(() => <div class="ac-vertical-fin" />)}
</div>

<!-- Logo Column -->
Expand All @@ -131,10 +110,7 @@ const footerSections = [
<ul class="mt-3 grid space-y-3">
{section.links.map((link) => (
<li>
<a
href={link.url}
class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-900 focus-visible:ring dark:text-neutral-400 dark:hover:text-neutral-200"
>
<a href={link.url} class="ac-footer-link">
{link.name}
</a>
</li>
Expand Down Expand Up @@ -164,10 +140,7 @@ const footerSections = [
...Object.entries(CompanyData.socials),
].map(([name, url]) => (
<FooterSocialLink url={url}>
<Icon
name={name}
class="size-6 text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
/>
<Icon name={name} class="ac-social-icon" />
</FooterSocialLink>
))
}
Expand All @@ -176,10 +149,7 @@ const footerSections = [
</div>

<!-- Radiator bottom border -->
<div
class="h-4 w-full rounded-b-lg bg-gradient-to-r from-gray-500 to-gray-400 shadow-inner dark:from-gray-700 dark:to-gray-800"
>
</div>
<div class="ac-radiator-border rounded-b-lg"></div>
</div>

<div class="col-span-full lg:col-span-1">
Expand All @@ -192,26 +162,35 @@ const footerSections = [
</footer>

<style>
/* Pipe shine effect */
.absolute.right-0.bottom-8 .w-full::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.2);
.ac-radiator-border {
@apply h-4 w-full bg-gradient-to-r from-gray-300 to-gray-300/50 shadow-inner dark:from-gray-700 dark:to-gray-800;
}

.ac-valve {
@apply relative size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-200 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600;
}

.ac-valve-center {
@apply absolute left-1/2 top-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-neutral-600 dark:bg-neutral-500;
}

.ac-pipe {
@apply h-4 w-full bg-gradient-to-b from-gray-200 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600;
}

.ac-vertical-fin {
@apply h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-200/50 dark:from-gray-800/50 dark:to-gray-900/50;
}

.ac-footer-link {
@apply inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-900 focus-visible:ring dark:text-neutral-400 dark:hover:text-neutral-200;
}

.ac-social-icon {
@apply size-6 text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200;
}

/* Valve shine effect */
.w-10.h-10.rounded-full::before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
.ac-vertical-pipe {
@apply -mt-2 ms-[0.4rem] h-full w-3 bg-gradient-to-b from-gray-200 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600;
}
</style>

0 comments on commit 861316b

Please sign in to comment.