fix.

ichipiro · Dec 26, 2024 · d04519c · d04519c
1 parent 9ac2642
commit d04519c
Show file tree

Hide file tree

Showing 44 changed files with 1,399 additions and 0 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,104 @@
+/* app/styles/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --white: #ffffff;
+  --gray-10: #eeeeee;
+  --gray-25: #aaaaaa;
+  --gray-50: #707070;
+  --gray-75: #444444;
+  --black: #222222;
+  --accent: #0d87e0;
+
+  --body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16-18px */
+  --display: clamp(4.5rem, 1.83rem + 11.34vw, 10rem); /* 72-160 */
+  --heading1: clamp(2rem, 1.3rem + 3vw, 4rem); /* 32-64px */
+  --heading2: calc(var(--body) * 1.5); /* 24-27px */
+  --heading3: calc(var(--body) * 1.2); /* 19.2-21.6px */
+  --small-heading2: clamp(0.875rem, 4vw - 1rem, 1.6875rem); /* 14-27px */
+  --small-heading3: calc(var(--small-heading2) * 0.86); /* 12-23px */
+
+  --space-xs: clamp(1.25rem, 1rem + 0.98vw, 1.875rem); /* 20-30px */
+  --space-sm: calc(var(--space-xs) * 1.5); /* 30-45px */
+  --space-md: calc(var(--space-xs) * 2); /* 40-60px */
+  --space-lg: calc(var(--space-xs) * 3); /* 60-90px */
+  --space-xl: calc(var(--space-xs) * 4); /* 80-120px */
+  --space-jump: clamp(1.25rem, 0.35rem + 3.8vw, 3.75rem); /* 20-60px */
+}
+
+body {
+  color: var(--black);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif;
+  font-size: var(--body);
+}
+
+h1 {
+  font-size: var(--heading1);
+}
+
+h2 {
+  font-size: var(--heading2);
+}
+
+h3 {
+  font-size: var(--heading3);
+}
+
+/* next/image */
+span > img {
+  transition: 0.2s;
+}
+
+/* リセット */
+body,
+h1,
+h2,
+h3,
+p,
+figure,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.content {
+  width: 334px;
+  height: 216px;
+  background: #f0f0f0;
+  border-radius: 3px;
+  padding: 0;
+}
+
+.wrapper {
+  padding: 10px;
+  width: 668px;
+  height: 432px;
+  transform: scale(0.5);
+  transform-origin: top left;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Footer from "@/components/footer/footer";
+import Header from "@/components/header/header";
+import { createTheme, ThemeProvider } from "@mui/material";
+import { Viewport } from "next";
+import { Zen_Kaku_Gothic_New } from "next/font/google";
+import { ReactNode } from "react";
+import "./globals.css";
+
+const ZenKakuGothicNewFont = Zen_Kaku_Gothic_New({
+  weight: "500",
+  subsets: ["latin"],
+  variable: "--font-ZenKakuGothicNew",
+});
+
+export const viewport: Viewport = {
+  width: "device-width",
+};
+
+const theme = createTheme({
+  typography: {
+    fontFamily: ["__Zen_Kaku_Gothic_New_246353", "Roboto", "sans-serif"].join(
+      ","
+    ),
+  },
+});
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="ja">
+      <head>
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"
+        />
+      </head>
+      <ThemeProvider theme={theme}>
+        <body className={ZenKakuGothicNewFont.className}>
+          <Header />
+          {children}
+          <Footer />
+        </body>
+      </ThemeProvider>
+    </html>
+  );
+}
diff --git a/app/page.module.css b/app/page.module.css
@@ -0,0 +1,63 @@
+.flexContainer {
+  composes: sideBySide from "@/utilsCSS/utils.module.css";
+}
+
+.centerText {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.box {
+  margin-bottom: var(--space-lg);
+}
+
+.title {
+  font-size: calc(var(--display) * 0.4);
+  font-weight: 900;
+}
+
+.subtitle {
+  font-size: calc(var(--small-heading2) * 1.1);
+  font-weight: 900;
+}
+
+.msg {
+  font-size: calc(var(--body) * 1.1);
+  padding-bottom: var(--space-xs);
+}
+
+.heading {
+  font-size: var(--heading1);
+  font-weight: 700;
+  display: flex;
+  items-align: center;
+}
+
+.heading::before {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 110px;
+  background-color: #ccc;
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
+.highlightBox {
+  background-color: #f5f5f5;
+  padding: 20px;
+  border-radius: 5px;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.highlightBox .point {
+  background-color: #007bff;
+  color: #fff;
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+.highlightBox p {
+  margin: 0;
+}