From 51f5e854c0298f2b95957c2e9d462d69debc2c40 Mon Sep 17 00:00:00 2001 From: ieeah Date: Thu, 5 Dec 2024 21:05:17 +0100 Subject: [PATCH 1/6] refactor: refactored global styles and updated home and layout usage --- src/app/home.module.css | 231 ------------------------------ src/app/layout.tsx | 1 + src/app/page.tsx | 5 +- src/app/style/globals/globals.css | 127 +++++----------- src/app/style/globals/reset.css | 115 +++++++++++++++ 5 files changed, 156 insertions(+), 323 deletions(-) create mode 100644 src/app/style/globals/reset.css diff --git a/src/app/home.module.css b/src/app/home.module.css index e1ca8bf..1f0e62f 100644 --- a/src/app/home.module.css +++ b/src/app/home.module.css @@ -1,16 +1,3 @@ -/* .main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - overflow: hidden; -} */ - -.heading { - font-size: 120px; -} - .pageWrapper { display: flex; flex-direction: column; @@ -27,225 +14,7 @@ height: 100vh; } -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - .code { font-weight: 700; font-family: var(--font-mono); } - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; - text-wrap: balance; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - /* background: var(--primary-glow); */ - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} - -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ca89b63..93006ab 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import { Roboto } from "../../fonts/fonts"; import Footer from "./components/Footer/Footer"; import styles from "./home.module.css"; import "./style/globals/globals.css"; +import "./style/globals/reset.css"; import "./style/globals/utilities.css"; export const metadata: Metadata = { diff --git a/src/app/page.tsx b/src/app/page.tsx index 61c9c30..d8c8eac 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,7 @@ -import Image from "next/image"; -import styles from "./home.module.css"; - export default function Home() { return (
-

Timetables

+

Timetables

); } diff --git a/src/app/style/globals/globals.css b/src/app/style/globals/globals.css index a811f36..c7aa027 100644 --- a/src/app/style/globals/globals.css +++ b/src/app/style/globals/globals.css @@ -84,7 +84,6 @@ } */ * { - box-sizing: border-box; padding: 0; margin: 0; } @@ -109,69 +108,10 @@ a { } } */ -/* This reset is based on Andy Bell article - -https: //andy-bell.co.uk/a-more-modern-css-reset/ - -and Kevin Powell video - -https: //www.youtube.com/watch?v=345V2MU3E_w - -*/ - -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; - text-wrap: pretty; -} - -/* Prevent font size inflation */ -html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; -} - -/* Remove default margin in favour of better control in authored CSS */ -body, -h1, -h2, -h3, -h4, -p, -figure, -blockquote, -dl, -dd { - margin-block-end: 0; -} - -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role="list"], -ol[role="list"] { - list-style: none; -} - html:focus-within { scroll-behavior: smooth; } -/* Set shorter line heights on headings and interactive elements */ -h1, -h2, -h3, -h4, -button, -input, -label { - line-height: 1.1; -} - /* Balance text wrapping on headings */ h1, h2, @@ -180,21 +120,6 @@ h4 { text-wrap: balance; } -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; - color: currentColor; -} - -/* Make images easier to work with */ -img, -picture { - display: block; - max-width: 100%; - height: auto; - font-style: italic; -} - /* Inherit fonts for inputs and buttons */ input, button, @@ -210,20 +135,46 @@ textarea:not([rows]) { /* Anything that has been anchored to should have extra scroll margin */ :target { - scroll-margin-block: 0.5rem; + scroll-margin-block: .5rem; } -@media (prefers-reduced-motion: reduce) { - html:focus-within { - scroll-behavior: auto; - } +/* Accessibility */ +.visually-hidden, +.visually-hidden-focusable:not(:focus):not(:focus-within):not(:focus-visible), +.skip-link:not(:focus):not(:focus-within):not(:focus-visible) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + clip-path: polygon(0% 0%); + white-space: nowrap; + border: 0; +} + +.heading { + font-size: var(--h1, 120px); + font-weight: bold; + text-decoration: underline; + text-decoration-color: rgb(66, 152, 228); + text-decoration-thickness: 3px; + text-wrap: balance; + text-underline-offset: -3px; +} - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; +/* For browsers that support clamp */ +@supports (font-size: clamp(1rem, 1vi, 1rem)) { + :root { + --fs-sm: clamp(0.8rem, 0.1vi + 0.78rem, 0.89rem); + --fs-base: clamp(1rem, 0.2vi + 0.95rem, 1.19rem); + --fs-md: clamp(1.25rem, 0.35vi + 1.16rem, 1.58rem); + --fs-lg: clamp(1.56rem, 0.58vi + 1.42rem, 2.11rem); + --fs-xl: clamp(1.95rem, 0.9vi + 1.73rem, 2.81rem); + --fs-xxl: clamp(2.44rem, 1.38vi + 2.1rem, 3.75rem); + --fs-xxxl: clamp(3.05rem, 2.05vi + 2.54rem, 5rem); + --fs-xxxxl: clamp(3.25rem, 2.25vi + 3.54rem, 7.5rem); + --h1: clamp(3.5rem, 2.38vi + 3.1rem, 7.5rem); } -} +} \ No newline at end of file diff --git a/src/app/style/globals/reset.css b/src/app/style/globals/reset.css new file mode 100644 index 0000000..e8abeba --- /dev/null +++ b/src/app/style/globals/reset.css @@ -0,0 +1,115 @@ +/* This reset is based on Andy Bell article + +https://andy-bell.co.uk/a-more-modern-css-reset/ + +and Kevin Powell video + +https://www.youtube.com/watch?v=345V2MU3E_w + +*/ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + -ms-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + display: block; + max-width: 100%; + height: auto; + font-style: italic; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: .5rem; +} + +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} \ No newline at end of file From 375b4a3c252e5e167bb090a8e8c03d1c4aa0c9d8 Mon Sep 17 00:00:00 2001 From: ieeah Date: Thu, 5 Dec 2024 22:45:42 +0100 Subject: [PATCH 2/6] improved footer styling --- fonts/fonts.ts | 6 ++++-- src/app/components/Footer/Footer.tsx | 10 ++++++---- src/app/components/Footer/footer.scss | 7 ++++++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/fonts/fonts.ts b/fonts/fonts.ts index 86fc498..1b6b331 100644 --- a/fonts/fonts.ts +++ b/fonts/fonts.ts @@ -1,6 +1,8 @@ -import { Inter as inter, Roboto_Mono as roboto } from "next/font/google"; +import { Inter as inter, Lora as lora, Roboto_Mono as roboto } from "next/font/google"; const Inter = inter({ subsets: ["latin"] }); const Roboto = roboto({ weight: ["400", "700"], subsets: ["latin"] }); +const Lora = lora({ weight: ["400", ], subsets: ["latin"] }); + +export { Inter, Lora, Roboto }; -export { Inter, Roboto }; diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx index 2888fa6..6fd3394 100644 --- a/src/app/components/Footer/Footer.tsx +++ b/src/app/components/Footer/Footer.tsx @@ -1,13 +1,15 @@ -import React from "react"; +"use server"; +import React from "react"; +import { Lora, Roboto } from "../../../../fonts/fonts"; import "./footer.scss"; -export default function Footer() { +export default async function Footer() { return (
- developed by Ieeah @ U1P1 ® + Developed by Ieeah @U1P1 ®
) }; \ No newline at end of file diff --git a/src/app/components/Footer/footer.scss b/src/app/components/Footer/footer.scss index f4a87c6..172a1dd 100644 --- a/src/app/components/Footer/footer.scss +++ b/src/app/components/Footer/footer.scss @@ -4,5 +4,10 @@ footer.footer { width: 100%; text-align: center; padding-block: 1rem; - border-top: 1px solid #eaeaea; + background: var(--primary-btn-bg); + + a { + text-decoration: underline; + } + } \ No newline at end of file From c4582d80dd2de7a7351b6ee821a7e60bbc49df1a Mon Sep 17 00:00:00 2001 From: ieeah Date: Thu, 5 Dec 2024 22:47:04 +0100 Subject: [PATCH 3/6] feat: add homepage --- src/app/components/PageTitle/PageTitle.tsx | 18 ++++++++++++++++ src/app/home.module.css | 2 +- src/app/layout.tsx | 19 +++++++++-------- src/app/page.tsx | 16 +++++++++++++-- src/app/style/globals/globals.css | 10 ++++++++- src/app/style/home.css | 24 ++++++++++++++++++++++ 6 files changed, 77 insertions(+), 12 deletions(-) create mode 100644 src/app/components/PageTitle/PageTitle.tsx create mode 100644 src/app/style/home.css diff --git a/src/app/components/PageTitle/PageTitle.tsx b/src/app/components/PageTitle/PageTitle.tsx new file mode 100644 index 0000000..35def0f --- /dev/null +++ b/src/app/components/PageTitle/PageTitle.tsx @@ -0,0 +1,18 @@ +"use server"; +import cn from "classnames"; +export default async function PageTitle({ + subtitle, + className +}: Readonly<{ subtitle?: string, className?: string }>) { + + const headClassName = cn("page-title heading", { + [`${className}`]: className, + }); + + return ( + <> +

Timetables

+ {!!subtitle &&

{subtitle}

} + + ); +} diff --git a/src/app/home.module.css b/src/app/home.module.css index 1f0e62f..d4f9df0 100644 --- a/src/app/home.module.css +++ b/src/app/home.module.css @@ -3,9 +3,9 @@ flex-direction: column; justify-content: space-between; align-items: center; - padding: 6rem; flex-grow: 1; overflow: hidden; + width: 100vw; } .layout { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 93006ab..4e5894b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,5 @@ -import type { Metadata } from "next"; +"use server"; + import { Roboto } from "../../fonts/fonts"; import Footer from "./components/Footer/Footer"; import styles from "./home.module.css"; @@ -6,20 +7,22 @@ import "./style/globals/globals.css"; import "./style/globals/reset.css"; import "./style/globals/utilities.css"; -export const metadata: Metadata = { - title: "Timetables", - description: "Il tool per capire a che ora puoi uscire venerdì dall' ufficio", -}; - -export default function RootLayout({ +export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( + + Timetables + + -
{children}
+ {children}