Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-07 23:13:55 +05:00
Code Issues Projects Releases Packages Wiki Activity

fix: socials header bg color

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-25 03:05:23 +05:00
parent 46f7530e71
commit fec0e79c50
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/Section/Socials.tsx
View file

@ -50,7 +50,7 @@ const links = [
export const Socials = () => { export const Socials = () => {
return ( return (
<Section> <Section>
<h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#ffb1cd]/5">Socials</h2> <h2 className="text-4xl md:text-5xl border-1 px-3 py-2 rounded-xl border-white/5 bg-[#161213]/25">Socials</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
{links.map((item) => ( {links.map((item) => (
<Link href={item.url} key={`socials.link.${item.text}`}> <Link href={item.url} key={`socials.link.${item.text}`}>

13
app/components/IconWithText.tsx
View file

@ -11,14 +11,17 @@ export const IconWithText = ({
text, text,
desc, desc,
backgroundColor, backgroundColor,
backgroundOpacity backgroundOpacity,
}: IconWithTextProps) => { }: IconWithTextProps) => {
return ( return (
<div <div
className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] ${ className={`flex items-start gap-2 border-1 px-3 py-1.5 rounded-xl border-white/5 bg-[var(--bg-color)]/[var(--bg-opacity)] transition-[scale] hover:scale-105 duration-100 ease-in-out`}
backgroundColor ? `` : "bg-[#161213]/25" style={
} transition-[scale] hover:scale-105 duration-100 ease-in-out`} {
style={{ "--bg-color": backgroundColor, "--bg-opacity": backgroundOpacity || "25%" } as React.CSSProperties} "--bg-color": backgroundColor || "#161213",
"--bg-opacity": backgroundOpacity || "25%",
} as React.CSSProperties
}
> >
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img src={icon} alt={""} /> <img src={icon} alt={""} />