Replies: 3 comments 1 reply
-
|
Sorry, I don't quite get what you mean. Do you mean something like this https://satnaing.dev/blog
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Yes |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Hello @hexWars However, you can achieve that by doing the below steps.
---
import { SOCIALS } from "@config";
import LinkButton from "./LinkButton.astro";
import socialIcons from "@assets/socialIcons";
---
<div
class="socials:fixed bottom-0 right-12 flex h-auto w-6 flex-col items-center justify-between gap-3"
>
{
SOCIALS.filter(social => social.active).map(social => (
<LinkButton
href={social.href}
className="p-2 hover:rotate-6 sm:p-1"
title={social.linkTitle}
>
<Fragment set:html={socialIcons[social.name]} />
</LinkButton>
))
}
<div class="h-20 w-1 bg-skin-inverted"></div>
</div>
// other codes
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
// Remove the following screen breakpoint or add other breakpoints
// if one breakpoint is not enough for you
screens: {
sm: "640px",
socials: "880px" // 👈🏻 add a custom breakpoint for that component
},
// other codes
}
}
<html>
<!-- other codes -->
<body>
<slot />
<FixedSocials /> <!-- 👈🏻 add here -->
</body>
</html>Optional
---
import { SOCIALS } from "@config";
import LinkButton from "./LinkButton.astro";
import socialIcons from "@assets/socialIcons";
---
<div
class="socials:fixed bottom-0 right-12 flex h-auto w-6 flex-col items-center justify-between gap-3"
>
{
SOCIALS.filter(social => social.active).map(social => (
<LinkButton
href={social.href}
className="p-2 hover:rotate-6 sm:p-1"
title={social.linkTitle}
>
<Fragment set:html={socialIcons[social.name]} />
</LinkButton>
))
}
<div class="h-20 w-1 bg-skin-inverted"></div>
</div>
<!-- Additional Code -->
<div
class="socials:fixed bottom-0 left-12 flex h-auto w-6 flex-col items-center justify-between gap-3"
>
<div class="mb-20 -rotate-90 text-lg tracking-widest">
<a
href={`mailto:[email protected]`}
class="link-outline text-sm hover:text-skin-accent"
>
[email protected]
</a>
</div>
<div class="h-20 w-[0.1875rem] bg-skin-inverted"></div>
</div> |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
OK thanks |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Similar to your blog.
I like that design very much.
Beta Was this translation helpful? Give feedback.
All reactions