feat: styles

README.md

@@ -7,7 +7,6 @@ Site Next.js pour les services de `leonmorival.xyz`.
 La page Minecraft contient un formulaire de candidature. Une demande valide envoie uniquement une notification dans le webhook configure avec :
 
 - le pseudo Minecraft ;
-- l'identifiant Discord renseigne ;
 - le message du joueur.
 
 Le site ne modifie pas directement la whitelist Minecraft.

app/components/MinecraftWhitelistForm.tsx

@@ -20,7 +20,6 @@ export default function MinecraftWhitelistForm() {
     const formData = new FormData(form);
     const payload = {
       username: String(formData.get("username") ?? ""),
-      discord: String(formData.get("discord") ?? ""),
       reason: String(formData.get("reason") ?? ""),
     };
 
@@ -59,7 +58,7 @@ export default function MinecraftWhitelistForm() {
 
   return (
     <form className="whitelist-form block-panel" onSubmit={submitRequest}>
-      <div className="form-field">
+      <div className="form-field form-field--full">
         <label htmlFor="minecraft-username">Pseudo Minecraft</label>
         <input
           id="minecraft-username"
@@ -74,19 +73,6 @@ export default function MinecraftWhitelistForm() {
         />
       </div>
 
-      <div className="form-field">
-        <label htmlFor="minecraft-discord">Discord</label>
-        <input
-          id="minecraft-discord"
-          name="discord"
-          type="text"
-          autoComplete="off"
-          maxLength={64}
-          placeholder="leon"
-          required
-        />
-      </div>
-
       <div className="form-field form-field--full">
         <label htmlFor="minecraft-reason">Message</label>
         <textarea

app/globals.css

@@ -608,6 +608,7 @@ svg {
   z-index: 2;
   display: flex;
   width: min(860px, 100%);
+  min-width: 0;
   flex-direction: column;
   align-items: center;
   text-align: center;
@@ -645,6 +646,7 @@ svg {
 .server-address {
   display: inline-flex;
   max-width: 100%;
+  min-width: 0;
   padding: 18px 24px;
   align-items: center;
   justify-content: center;
@@ -667,6 +669,7 @@ svg {
 
 .minecraft-actions {
   display: flex;
+  max-width: 100%;
   margin-top: 22px;
   flex-wrap: wrap;
   justify-content: center;
@@ -680,6 +683,8 @@ svg {
 .back-home-link {
   display: inline-flex;
   min-height: 58px;
+  max-width: 100%;
+  min-width: 0;
   align-items: center;
   justify-content: center;
   gap: 12px;
@@ -691,10 +696,23 @@ svg {
   font-family: var(--font-pixel), var(--font-geist-mono), monospace;
   font-size: 0.82rem;
   line-height: 1.25;
+  text-align: center;
   text-decoration: none;
   transition: transform 160ms ease, box-shadow 160ms ease;
 }
 
+.copy-address-button span,
+.map-button span,
+.large-map-link span,
+.back-home-link span,
+.minecraft-brand span,
+.minecraft-nav-links a,
+.service-copy,
+.service-action-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .copy-address-button:hover,
 .map-button:hover,
 .large-map-link:hover,
@@ -845,6 +863,7 @@ h2.pixel-heading {
 
 .form-field {
   display: grid;
+  min-width: 0;
   gap: 10px;
 }
 
@@ -923,6 +942,7 @@ h2.pixel-heading {
 .whitelist-message {
   display: flex;
   min-height: 58px;
+  min-width: 0;
   margin: 0;
   padding: 12px 16px;
   align-items: center;
@@ -932,6 +952,7 @@ h2.pixel-heading {
   font-family: var(--font-geist-mono), monospace;
   font-size: 1rem;
   line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .whitelist-message--success {
@@ -1130,6 +1151,11 @@ h2.pixel-heading {
 }
 
 @media (max-width: 700px) {
+  .minecraft-page,
+  .astroneer-page {
+    --shadow-hard: 4px 4px 0 rgb(0 0 0 / 55%);
+  }
+
   .home-shell {
     width: min(100% - 24px, 520px);
     padding-top: 24px;
@@ -1172,11 +1198,21 @@ h2.pixel-heading {
   }
 
   .minecraft-page {
-    font-size: 1.2rem;
+    font-size: 1.05rem;
   }
 
   .astroneer-page {
-    font-size: 1.2rem;
+    font-size: 1.05rem;
+  }
+
+  .minecraft-nav {
+    width: min(100% - 20px, 520px);
+    gap: 0;
+  }
+
+  .minecraft-brand {
+    padding: 12px 14px;
+    font-size: 0.68rem;
   }
 
   .minecraft-nav-links {
@@ -1184,40 +1220,57 @@ h2.pixel-heading {
   }
 
   .minecraft-nav-links a {
-    font-size: 0.58rem;
+    min-height: 44px;
+    padding: 0 10px;
+    font-size: 0.52rem;
+    line-height: 1.25;
+    text-align: center;
   }
 
   .minecraft-hero {
     min-height: 720px;
-    padding-right: 16px;
+    padding-right: 14px;
-    padding-left: 16px;
+    padding-left: 14px;
   }
 
   .astroneer-hero {
     min-height: 720px;
-    padding-right: 16px;
+    padding-right: 14px;
-    padding-left: 16px;
+    padding-left: 14px;
   }
 
   .minecraft-hero-content h1 {
-    font-size: 2.45rem;
+    max-width: 100%;
+    font-size: 1.95rem;
+    line-height: 1.22;
+    overflow-wrap: anywhere;
   }
 
   .minecraft-hero-content p {
-    font-size: 1.42rem;
+    font-size: 1.12rem;
+    line-height: 1.45;
   }
 
   .server-address {
-    padding: 16px;
+    width: 100%;
-    font-size: 0.88rem;
+    padding: 14px 12px;
+    gap: 10px;
+    font-size: 0.68rem;
+    line-height: 1.35;
+  }
+
+  .server-address svg {
+    width: 26px;
+    min-width: 26px;
+    height: 26px;
   }
 
   .astroneer-orbit {
-    width: 540px;
+    width: min(420px, 118vw);
   }
 
   .astroneer-planet {
-    width: 230px;
+    width: 190px;
   }
 
   .minecraft-actions,
@@ -1237,6 +1290,32 @@ h2.pixel-heading {
     width: 100%;
   }
 
+  .copy-address-button,
+  .map-button,
+  .large-map-link,
+  .back-home-link,
+  .whitelist-submit {
+    min-height: 52px;
+    padding-right: 14px;
+    padding-left: 14px;
+    font-size: 0.64rem;
+  }
+
+  .whitelist-form,
+  .status-panel,
+  .map-copy {
+    padding: 18px;
+  }
+
+  .form-field input {
+    min-height: 52px;
+    padding: 0 12px;
+  }
+
+  .form-field textarea {
+    padding: 12px;
+  }
+
   .status-item,
   .status-item:nth-child(2),
   .status-item:nth-child(-n + 2) {
@@ -1250,16 +1329,48 @@ h2.pixel-heading {
 
   .pixel-heading h2,
   h2.pixel-heading {
-    font-size: 1.05rem;
+    font-size: 0.9rem;
+    line-height: 1.35;
   }
 
   .section-heading p,
   .map-copy p {
-    font-size: 1.24rem;
+    font-size: 1.02rem;
+    line-height: 1.45;
   }
 
   .large-map-link {
-    font-size: 0.72rem;
+    gap: 10px;
+    font-size: 0.62rem;
+  }
+}
+
+@media (max-width: 380px) {
+  .home-hero h1 {
+    font-size: 2.35rem;
+  }
+
+  .minecraft-hero-content h1 {
+    font-size: 1.62rem;
+  }
+
+  .minecraft-hero-content p,
+  .section-heading p,
+  .map-copy p {
+    font-size: 0.95rem;
+  }
+
+  .minecraft-nav-links a {
+    font-size: 0.48rem;
+  }
+
+  .server-address,
+  .copy-address-button,
+  .map-button,
+  .large-map-link,
+  .back-home-link,
+  .whitelist-submit {
+    font-size: 0.56rem;
   }
 }
 

app/lib/minecraft-whitelist.ts

@@ -1,11 +1,9 @@
 export type WhitelistRequest = {
   username: string;
-  discord: string;
   reason: string;
 };
 
 const usernamePattern = /^[A-Za-z0-9_]{3,16}$/;
-const maxDiscordLength = 64;
 const maxReasonLength = 800;
 
 export function parseWhitelistRequest(payload: unknown): WhitelistRequest {
@@ -15,22 +13,17 @@ export function parseWhitelistRequest(payload: unknown): WhitelistRequest {
 
   const input = payload as Partial<Record<keyof WhitelistRequest, unknown>>;
   const username = String(input.username ?? "").trim();
-  const discord = String(input.discord ?? "").trim();
   const reason = String(input.reason ?? "").trim();
 
   if (!usernamePattern.test(username)) {
     throw new Error("Pseudo Minecraft invalide.");
   }
 
-  if (discord.length < 2 || discord.length > maxDiscordLength) {
-    throw new Error("Identifiant Discord invalide.");
-  }
-
   if (reason.length < 10 || reason.length > maxReasonLength) {
     throw new Error("Message trop court ou trop long.");
   }
 
-  return { username, discord, reason };
+  return { username, reason };
 }
 
 async function readDiscordError(response: Response) {
@@ -59,7 +52,6 @@ export async function sendWhitelistRequestToDiscord(request: WhitelistRequest) {
           color: 0x33e879,
           fields: [
             { name: "Pseudo Minecraft", value: request.username, inline: true },
-            { name: "Discord", value: request.discord, inline: true },
             { name: "Message", value: request.reason.slice(0, maxReasonLength) },
           ],
           timestamp: new Date().toISOString(),