Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile responsive footer #53

Merged
merged 2 commits into from
Mar 2, 2024
Merged

mobile responsive footer #53

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9415974
mobile responsive footer
renaldox Feb 28, 2024
0458666
column layout when small screen size
renaldox Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 100 additions & 28 deletions src/lib/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,109 @@
<script>
import { AppBar } from '@skeletonlabs/skeleton';
import { IconBrandDiscord, IconBrandFacebook, IconBrandGithub } from '@tabler/icons-svelte';
</script>

<AppBar>
<AppBar
gridColumns="grid grid-cols-1 sm:grid-cols-3"
slotLead="sm:place-self-start place-self-center"
shadow="shadow-2xl"
slotTrail="sm:place-self-end place-self-center !space-x-2 flex flex-wrap text-sm md:text-base lg:text-lg"
>
<svelte:fragment slot="lead">
<a
title="Dive into the code"
class="btn btn-sm variant-ghost-surface"
href="https://github.com/Samoa-Stack-Overflow"
target="_blank"
>
GitHub
</a>
&nbsp;&nbsp;
<a
title="Join us on Discord"
class="btn btn-sm variant-ghost-surface"
href="https://forms.gle/aoTeV9jF5h7wnqAG6"
target="_blank"
>
Discord
</a>
&nbsp;&nbsp;
<a
title="Get the latest on Facebook"
class="btn btn-sm variant-ghost-surface"
href="https://www.facebook.com/groups/948415479224570"
target="_blank"
>
Facebook
</a>
<div class="flex items-center space-x-4 border border-black border-solid">
<a
title="Dive into the code"
class="hidden btn btn-sm variant-ghost-surface sm:block"
href="https://github.com/Samoa-Stack-Overflow"
target="_blank"
>
GitHub
</a>

<a
target="_blank"
href="https://github.com/Samoa-Stack-Overflow"
class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
>
<IconBrandGithub />
</a>
&nbsp;&nbsp;
<a
title="Join us on Discord"
class="hidden btn btn-sm variant-ghost-surface sm:block"
href="https://forms.gle/aoTeV9jF5h7wnqAG6"
target="_blank"
>
Discord
</a>

<a
target="_blank"
href="https://forms.gle/aoTeV9jF5h7wnqAG6"
class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
>
<IconBrandDiscord />
</a>
&nbsp;&nbsp;
<a
title="Get the latest on Facebook"
class="hidden btn btn-sm variant-ghost-surface sm:block"
href="https://www.facebook.com/groups/948415479224570"
target="_blank"
>
Facebook
</a>

<a
target="_blank"
href="https://www.facebook.com/groups/948415479224570"
class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
>
<IconBrandFacebook />
</a>
</div>
</svelte:fragment>
<svelte:fragment slot="trail">
Copyright © {new Date().getFullYear()} Samoa Stack Overflow. All Rights Reserved.
<div class="border border-black border-solid">
Copyright © {new Date().getFullYear()} Samoa Stack Overflow. All Rights Reserved.
</div>
</svelte:fragment>
</AppBar>

<div class="flex items-center justify-center">
<div class="flex items-center flex-grow space-x-4 border border-black border-solid">
<a
title="Dive into the code"
class="btn btn-sm variant-ghost-surface"
href="https://github.com/Samoa-Stack-Overflow"
target="_blank"
>
GitHub
</a>

&nbsp;&nbsp;
<a
title="Join us on Discord"
class="btn btn-sm variant-ghost-surface"
href="https://forms.gle/aoTeV9jF5h7wnqAG6"
target="_blank"
>
Discord
</a>
&nbsp;&nbsp;
<a
title="Get the latest on Facebook"
class="btn btn-sm variant-ghost-surface"
href="https://www.facebook.com/groups/948415479224570"
target="_blank"
>
Facebook
</a>
</div>

<div class="border border-black border-solid">
Copyright © {new Date().getFullYear()} Samoa Stack Overflow. All Rights Reserved.
RIGHT SIDE
</div>
</div>
</AppBar> -->
Loading