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
-
|
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
-
Similar to your blog.
I like that design very much.
Beta Was this translation helpful? Give feedback.
All reactions