diff --git a/app/src/components/AssociationDescription.tsx b/app/src/components/AssociationDescription.tsx index 4fa024d..0370688 100644 --- a/app/src/components/AssociationDescription.tsx +++ b/app/src/components/AssociationDescription.tsx @@ -1,7 +1,7 @@ import DirectusImage from "./DirectusImage"; import SocialsList from "./SocialsList"; import { getTranslation, locale } from "@/locales"; -import styles from "@/styles/AssociationDescription.module.scss"; +import styles from "@/styles/Page.module.scss"; import { Association, PublicFiles, SocialLink } from "@/types/aliases"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -20,8 +20,8 @@ export default function AssociationDescription({ const translation = getTranslation(association, locale(router)); return ( -
-
+
+
{translation.description}
{publicFiles.map((f) => ( diff --git a/app/src/pages/association.tsx b/app/src/pages/association.tsx index b6160a8..f2df4a4 100644 --- a/app/src/pages/association.tsx +++ b/app/src/pages/association.tsx @@ -3,6 +3,7 @@ import DirectusImage from "@/components/DirectusImage"; import MembersList from "@/components/MembersList"; import { directus, populateLayoutProps } from "@/directus"; import { getTranslation, locale, queryTranslations } from "@/locales"; +import styles from "@/styles/Page.module.scss"; import { Association, AssociationMembership, @@ -20,7 +21,7 @@ export default function AssociationPage( const router = useRouter(); const translation = getTranslation(props.association, locale(router)); return ( -
+
-
+
+

{props.commission.name}

{translation.small_description}

- {translation.description} + {translation.description}
diff --git a/app/src/pages/news/[slug].tsx b/app/src/pages/news/[slug].tsx index 6102d48..8879ab8 100644 --- a/app/src/pages/news/[slug].tsx +++ b/app/src/pages/news/[slug].tsx @@ -1,4 +1,4 @@ -import Card from "@/components/Card"; +import CommissionCard from "@/components/CommissionCard"; import DirectusImage from "@/components/DirectusImage"; import { directus, populateLayoutProps } from "@/directus"; import { @@ -8,6 +8,7 @@ import { queryTranslations, translate, } from "@/locales"; +import styles from "@/styles/Page.module.scss"; import { Commission, News } from "@/types/aliases"; import { readItems } from "@directus/sdk"; import { GetServerSideProps, InferGetServerSidePropsType } from "next"; @@ -19,15 +20,15 @@ export default function Page( ) { const commissions: Commission[] = props.news.commissions; const router = useRouter(); - const translation = getTranslation(props.news, router.locale); + const translation = getTranslation(props.news, locale(router)); return ( -
-
-

{translation.title}

+
+
+

{translation.title}

{translation.description}

{props.news.date_created ? ( -

+

{`${formatDate(props.news.date_created, router.locale, { capitalize: true, })}`} @@ -35,8 +36,12 @@ export default function Page( ) : ( <> )} - - {translation.content} + + {translation.content} {commissions.length > 0 ? ( <>

@@ -45,7 +50,7 @@ export default function Page( })}

{commissions.map((c) => ( - + ))} ) : ( diff --git a/app/src/styles/AssociationDescription.module.scss b/app/src/styles/AssociationDescription.module.scss deleted file mode 100644 index ff1ebfc..0000000 --- a/app/src/styles/AssociationDescription.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use "utilities/variables"; - -.publicFiles { - display: flex; - flex-direction: column; - align-items: center; - - .icon { - width: 1.5rem; - height: 1.5rem; - - // Generated with https://angel-rs.github.io/css-color-filter-generator/ - filter: brightness(0) saturate(100%) invert(56%) sepia(49%) saturate(4097%) - hue-rotate(214deg) brightness(103%) contrast(101%); - } - - > * { - border: 2px variables.$glass-color solid; - border-radius: 1rem; - padding: 1rem; - - display: flex; - align-items: center; - gap: 0.5rem; - - &:hover { - border: 2px variables.$glass-color-hover solid; - color: variables.$glass-color-hover; - } - } -} diff --git a/app/src/styles/ListPage.module.scss b/app/src/styles/ListPage.module.scss index 2b21a89..d5af322 100644 --- a/app/src/styles/ListPage.module.scss +++ b/app/src/styles/ListPage.module.scss @@ -7,7 +7,7 @@ display: flex; flex-direction: column; - row-gap: 1em; + row-gap: 2rem; align-items: center; width: 80%; @@ -19,10 +19,11 @@ h1 { @extend .glass; color: variables.$title-color; - border-radius: 3rem; + border-radius: 1rem; width: fit-content; padding-left: 2rem; padding-right: 2rem; + box-shadow: none; } @media (max-width: 800px) { diff --git a/app/src/styles/Page.module.scss b/app/src/styles/Page.module.scss new file mode 100644 index 0000000..a0f4058 --- /dev/null +++ b/app/src/styles/Page.module.scss @@ -0,0 +1,115 @@ +@use "utilities/variables"; + +.publicFiles { + display: flex; + flex-direction: column; + align-items: center; + + .icon { + width: 1.5rem; + height: 1.5rem; + + // Generated with https://angel-rs.github.io/css-color-filter-generator/ + filter: brightness(0) saturate(100%) invert(56%) sepia(49%) saturate(4097%) + hue-rotate(214deg) brightness(103%) contrast(101%); + } + + > * { + border: 2px variables.$glass-color solid; + border-radius: 1rem; + padding: 1rem; + + display: flex; + align-items: center; + gap: 0.5rem; + + &:hover { + border: 2px variables.$glass-color-hover solid; + color: variables.$glass-color-hover; + } + } +} + +.main { + @extend .text; + h4 { + text-align: left; + } + + h2 { + margin-top: 3rem; + text-transform: uppercase; + } + + background-color: variables.$white-background-color; + min-width: 100vw; + + padding-top: 3rem; + padding-bottom: 4rem; + + display: flex; + flex-direction: column; + align-items: center; + + row-gap: 2rem; + + .banner { + position: absolute; + width: 100%; + height: 20rem; + + border-radius: 3rem; + overflow: hidden; + + margin: 0; + } + + .logo { + height: 15rem; + width: 25rem; + } + + .center { + align-items: center; + + display: flex; + flex-direction: column; + gap: 2rem; + + width: min(70ch, 80%); + + img { + width: 100%; + } + + .author { + margin: 0; + font-weight: 200; + } + } +} + +.text { + h1 { + text-align: center; + + // h4 (subtitle) must be centered and slightly enlarged + + h4 { + text-align: center; + font-size: large; + } + } + + h4 { + font-weight: lighter; + margin-top: 0.2rem; + } + + a { + color: variables.$text-link-color; + } + + p { + text-align: justify; + } +} diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss index 38cb72e..2b95a74 100644 --- a/app/src/styles/globals.scss +++ b/app/src/styles/globals.scss @@ -33,90 +33,6 @@ a { } } -.text { - h1 { - text-align: center; - - // h4 (subtitle) must be centered and slightly enlarged - + h4 { - text-align: center; - font-size: large; - } - } - - h4 { - font-weight: lighter; - margin-top: 0.2rem; - } - - a { - color: variables.$text-link-color; - } - - p { - text-align: justify; - } -} - -.page { - @extend .text; - h4 { - text-align: left; - } - - h2 { - margin-top: 3rem; - text-transform: uppercase; - } - - background-color: variables.$white-background-color; - min-width: 100vw; - - padding-top: 3rem; - padding-bottom: 4rem; - - display: flex; - flex-direction: column; - align-items: center; - - row-gap: 2rem; - - .banner { - position: absolute; - width: 100%; - height: 20rem; - - border-radius: 3rem; - overflow: hidden; - - margin: 0; - } - - .logo { - height: 15rem; - width: 25rem; - } - - .center { - align-items: center; - - display: flex; - flex-direction: column; - gap: 2rem; - - width: min(70ch, 80%); - - img { - width: 100%; - } - - .author { - margin: 0; - font-weight: 200; - } - } -} - h1 { letter-spacing: 0.1em;