mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve design using custom variables

Browse Source
This commit is contained in:
prototypa
2023-01-22 00:40:14 -05:00
parent a3d0855f92
commit a01fd3880f
25 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/widgets/Footer.astro
View File

@ -34,11 +34,11 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
</div>
<div class="text-sm text-gray-600">
<div class="text-sm text-muted">
{
secondaryLinks.map(({ text, href }) => (
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
href={href}
set:html={text}
/>
@ -49,13 +49,13 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{
links.map(({ title, links }) => (
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
<div class="dark:text-gray-300 font-medium mb-2">{title}</div>
{links && Array.isArray(links) && links.length > 0 && (
<ul class="text-sm">
{links.map(({ text, href, ariaLabel }) => (
<li class="mb-2">
<a
class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
href={href}
aria-label={ariaLabel}
>
@ -76,7 +76,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{socialLinks.map(({ ariaLabel, href, text, icon }) => (
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label={ariaLabel}
href={href}
>
@ -91,7 +91,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
)
}
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<div class="text-sm mr-4 dark:text-slate-400">
<Fragment set:html={footNote} />
</div>
</div>