Skip to content

絵文字の表示の不具合を修正 #210

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

Merged
merged 4 commits into from
Jun 9, 2024
Merged

絵文字の表示の不具合を修正 #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5dbff81
:bug: fix 絵文字がsafariで表示されないバグを修正#208
kazzyfrog Jun 8, 2024
4dd4cda
:bug: fix: 絵文字をホバーした時の挙動を修正
kazzyfrog Jun 8, 2024
0e245e4
🐛 fix: ヒーローセクションのz-indexを調整
pss-aileen Jun 8, 2024
e1bac90
:bug: fix: 絵文字が境界をはみ出す不具合を修正
kazzyfrog Jun 8, 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
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<html lang="ja" className="overflow-x-hidden">
<body
className={`${inter.variable} ${notojp.variable} overflow-x-hidden text-stone-800`}
>
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Home() {
<section className="relative h-screen overflow-hidden">
<EmojiShower />
<div className="absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-white to-transparent"></div>
<div className="relative z-10 mx-auto flex h-full items-center justify-start lg:max-w-screen-xl">
<div className="relative mx-auto flex h-full items-center justify-start lg:max-w-screen-xl">
<div className=" px-4 lg:px-0">
<h1 className="text-4xl font-bold leading-snug lg:text-6xl lg:leading-normal">
オープンソース
Expand Down
2 changes: 1 addition & 1 deletion src/components/animated-emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const AnimatedEmoji: React.FC<AnimatedEmojiProps> = ({
return (
<>
<div
className="group absolute -z-10 flex h-20 w-20 cursor-pointer items-center justify-center rounded-full bg-transparent [perspective:1000px]"
className="group absolute flex h-20 w-20 cursor-pointer items-center justify-center rounded-full bg-transparent [perspective:1000px]"
style={styles as React.CSSProperties}
>
<div className="relative h-full w-full rounded-full duration-1000 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
Expand Down
9 changes: 6 additions & 3 deletions src/components/hero-section-emoji-shower.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { emojiToUnicodeHex } from "@/utils/animated-emoji";
import { Noto_Emoji } from "next/font/google";

const emojiFont = Noto_Emoji({
Expand Down Expand Up @@ -112,15 +113,17 @@ const EmojiShower: React.FC = () => {
return (
<div className=" absolute -right-2 -top-8 z-0 flex h-[150vh] rotate-12 lg:-top-[15vh] lg:right-4 lg:rotate-[25deg]">
{randomEmojis.map((emoji, index) => {
const notoEmoji = emojiToUnicodeHex(emoji);
return (
<div
key={index}
className={`${emojiFont.className} ${textRainbowColors[index]} ${bgRainbowColors[index]}
px-1 text-3xl lg:px-2 lg:text-6xl`}
>
<div className={`${animationsSp[index]} ${animationsPc[index]}`}>
{emoji}
</div>
<div
className={`${animationsSp[index]} ${animationsPc[index]}`}
dangerouslySetInnerHTML={{ __html: notoEmoji }}
></div>
</div>
);
})}
Expand Down