Fix/layout (#92)

* 🐛 不要な文字を削除してコードをクリーンアップ * 🐛 ボタンコンポーネントのクラス名を修正し、参加フォームへのボタンのレイアウトを改善
UniPro-tech · Dec 18, 2024 · 21c649c · 21c649c
1 parent 6edacd6
commit 21c649c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -67,21 +67,21 @@ const Home = () => {
   return (
     <main className="flex min-h-screen w-full flex-col items-center bg-white text-black space-y-0">
       <ReactMarkdown remarkPlugins={[remarkGfm]} className='markdown'>{markdownString}</ReactMarkdown>
-      <section id="join" className="flex space-y-3 items-center min-w-full p-20 flex-col bg-gray-100">
+      <section id="join" className="flex space-y-3 items-center min-w-full lg:p-20 p-10 flex-col bg-gray-100">
         <h3 className="text-2xl">
           <a href="#join">参加しよう！</a>
         </h3>
         <div className="text-center flex flex-col space-y-3">
           <p>UniProjectに参加するには、以下のリンクから参加フォームにアクセスしてください。<br />また、Discordは登録しなくても普段の活動の様子を見たり、メンバーと話したりできます。</p>
-          <div className='flex lg:flex-row flex-col justify-center items-center space-x-5'>
+          <div className='flex lg:flex-row flex-col justify-center items-center lg:space-x-5 lg:space-y-0 space-y-3'>
             <Button<'Link'> href="https://forms.gle/VsRQQ4LwnxvDUyH58" className="lg:w-2/5 w-full" disabled={false}>
               参加フォーム
             </Button>
             <Button<'Link'> href="/discord" className="lg:w-2/5 w-full" disabled={false}>
               Discord
             </Button>
           </div>
-        </div>Ï
+        </div>
       </section>
     </main>
   );

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -33,7 +33,7 @@ body {
 }
 
 .markdown {
-  @apply text-gray-900 leading-normal break-words w-2/5;
+  @apply text-gray-900 leading-normal break-words lg:w-2/5 w-4/5;
 }
 
 .markdown > * + * {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -51,11 +51,11 @@ export default function Home() {
   return (
     <main className="flex min-h-screen w-full flex-col items-center bg-white text-black space-y-0">
       <Slideshow images={images} />
-      <section id="first" className="flex space-y-3 w-full items-center p-20 flex-col bg-gray-100">
+      <section id="first" className="flex space-y-3 w-full items-center lg:p-20 p-10 flex-col bg-gray-100">
         <div className='flex flex-col items-center space-y-1'>
           <div className="mb-4">
             <a href="#first">
-              <h3 className="text-2xl text-center">全国ネットのデジタル創作サークル</h3>
+              <h3 className="text-xl lg:text-2xl text-center">全国ネットのデジタル創作サークル</h3>
               <h2 className="text-6xl text-center">UniProject</h2>
             </a>
           </div>
@@ -64,7 +64,7 @@ export default function Home() {
             <br />
             活動内容
             <br />
-            Web開発/UTAU/デザイン/競技プログラミング/AI研究/映像制作/インフラ開発(サーバー構築など)/etc...
+            Web開発/UTAU/デザイン/競技プログラミング/AI/映像制作/インフラ開発(サーバー関連等)/etc...
             <br />
           </p>
           <Button<'button'> href="/about" disabled={false}>
@@ -89,13 +89,13 @@ export default function Home() {
           </div>
         </div>
       </section>
-      <section id="join" className="flex space-y-3 items-center min-w-full p-20 flex-col bg-gray-100">
+      <section id="join" className="flex space-y-3 items-center min-w-full lg:p-20 p-10 flex-col bg-gray-100">
         <h3 className="text-2xl">
           <a href="#join">参加しよう！</a>
         </h3>
         <div className="text-center flex flex-col space-y-3">
           <p>UniProjectに参加するには、以下のリンクから参加フォームにアクセスしてください。<br />また、Discordは登録しなくても普段の活動の様子を見たり、メンバーと話したりできます。</p>
-          <div className='flex lg:flex-row flex-col justify-center items-center space-x-5'>
+          <div className='flex lg:flex-row flex-col justify-center items-center lg:space-x-5 lg:space-y-0 space-y-3'>
             <Button<'Link'> href="https://forms.gle/VsRQQ4LwnxvDUyH58" className="lg:w-2/5 w-full" disabled={false}>
               参加フォーム
             </Button>

diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -1,7 +1,7 @@
 'use client';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation'
-import { ComponentPropsWithoutRef, Ref, forwardRef } from 'react';
+import { ComponentPropsWithoutRef, JSX, Ref, forwardRef } from 'react';
 const styles = {
   commonDesign: "border-b text-black px-4 py-2 leading-none m-2",
   linkDisabled: "opacity-50 cursor-not-allowed leading-none",
@@ -48,7 +48,7 @@ export const Button = forwardRef<HTMLButtonElement, Props<AS>>((props, ref) => {
   const { disabled, ...linkAttributes } = props as unknown as CustomLinkProps;
   return (
     <>
-      <button onClick={(e) => handleClick(e, buttonAttributes.href)} className={`${disabled && styles.linkDisabled} group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200`}><span>{buttonAttributes.children}</span><div className="ml-1 transition group-hover:translate-x-1"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg></div></button>
+      <button onClick={(e) => handleClick(e, buttonAttributes.href)} className={`${disabled && styles.linkDisabled} ${props.className} group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-neutral-950 px-6 font-medium text-neutral-200`}><span>{buttonAttributes.children}</span><div className="ml-1 transition group-hover:translate-x-1"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg></div></button>
     </>
   );
 }) as <T extends 'button' | 'Link' = 'button'>(p: Props<T>) => JSX.Element;