Typography changes (#85)

Use fonts according to TF visual guidelines. Increase readability in multiple places.

Author: marnym

app/layout.tsx

@@ -31,7 +31,16 @@ const raleway = localFont({
 })
 
 const montserrat = localFont({
-  src: '../public/fonts/montserrat/Montserrat-Bold.woff2',
+  src: [
+    {
+      style: 'normal',
+      path: '../public/fonts/montserrat/Montserrat-VariableFont_wght.ttf',
+    },
+    {
+      style: 'italic',
+      path: '../public/fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf',
+    },
+  ],
   variable: '--font-montserrat',
 })
 

app/nyheter/[slug]/page.tsx

@@ -7,7 +7,7 @@ const renderer: RendererObject = {
     return `<img class='event-page-image' src=${href} alt='bild' />`
   },
   link(href, _, text) {
-    return `<a class="text-blue-600 underline visited:text-purple-600 hover:text-blue-800" href=${href}>${text}</a>`
+    return `<a class="text-blue-600 underline visited:text-purple-600 hover:text-blue-800 break-all" href=${href}>${text}</a>`
   },
 }
 
@@ -25,7 +25,7 @@ const Page = async (props: { params: Promise<{ slug: string }> }) => {
 
   return (
     <>
-      <h1>
+      <h1 className="break-words">
         {post?.title}
         {post?.date && <p className="text-lg">{getDateLong(post?.date)}</p>}
       </h1>

app/nyheter/page.tsx

@@ -12,7 +12,7 @@ const Page = async () => {
 
   return (
     <Column className="z-10 mx-auto my-6 min-h-[92vh] max-w-7xl p-4">
-      <p className="pb-5 text-3xl">Nyheter</p>
+      <h1 className="pb-5 text-4xl font-bold">Nyheter</h1>
       <Posts initialPosts={posts} totalPages={totalPages} />
     </Column>
   )

components/Page.tsx

@@ -22,7 +22,7 @@ type PageProps = {
 const Page = async ({ page, isPrivate = false }: PageProps) => {
   return (
     <>
-      <h1>{page?.title}</h1>
+      <h1 className="break-words">{page?.title}</h1>
       {page?.content && (
         <div
           dangerouslySetInnerHTML={{
@@ -33,9 +33,9 @@ const Page = async ({ page, isPrivate = false }: PageProps) => {
       {page?.showTableOfContents && (
         <TableOfContents sections={page.sections} />
       )}
-      {page?.sections?.map((section, i) => (
+      {page?.sections?.map((section) => (
         <PageSection
-          key={i}
+          key={section.documentId}
           title={section.title}
           content={section.content}
           fileFolders={section.file_folders}

components/PageLayout.tsx

@@ -3,9 +3,9 @@ import React from 'react'
 const PageLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="min-h-screen">
     <div className="flex flex-grow justify-center">
-      <div className="prose prose-sm mx-4 mb-12 mt-6 flex flex-col sm:mx-8 md:mx-16 md:mt-12">
+      <article className="prose prose-sm xxs:prose-base w-[95vw] 2xl:prose-xl mx-4 mb-12 mt-6 flex flex-col sm:mx-8 md:mx-16 md:mt-12">
         {children}
-      </div>
+      </article>
     </div>
   </div>
 )

components/Subtitle.tsx

@@ -5,7 +5,7 @@ const Subtitle = ({
   underline = true,
 }: React.PropsWithChildren<{ underline?: boolean }>) => (
   <>
-    <p className="text-2xl text-black xxs:text-3xl">{children}</p>
+    <h2 className="text-2xl xxs:text-3xl">{children}</h2>
     {underline && (
       <div className="my-1 h-[3px] w-full rounded-sm bg-teknologröd" />
     )}

components/TFInfo.tsx

@@ -3,9 +3,9 @@ import Column from './Column'
 
 const TFInfo = () => {
   return (
-    <Column className="text-black">
-      <h1 className="text-3xl font-bold">Vad är TF?</h1>
-      <p className="max-w-[1200px] py-3">
+    <Column className="prose 2xl:prose-xl">
+      <h2>Vad är TF?</h2>
+      <p className="">
         Vad är TF? Teknologföreningen, TF, är den svenskspråkiga nationen vid
         Aalto-universitetet. Nationen grundades 1872. TF:s ändamål är att
         sammanföra svenskspråkiga studerande vid Aalto-universitetet. I och med

components/header/navbar/index.tsx

@@ -135,14 +135,14 @@ const NavbarDropdown = ({
   const pathWithoutAnchor = path?.split('#')[0]
 
   return (
-    <div className="relative mx-3">
+    <div className="relative mx-3 text-xl font-semibold">
       <div
         className={classNames(
           isTop ? 'peer' : '!m-0',
           pathWithoutAnchor?.startsWith(`/${link.basePath}`) &&
             link.links.find((l) => l.link === pathWithoutAnchor) &&
             '!text-teknologröd',
-          'link-text text-link'
+          'link-text'
         )}
         onClick={onClick}
       >

components/posts/Post.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Link from 'next/link'
 import { PostType } from '@models/post'
 import { getDateLong } from '@utils/helpers'
+import Column from '@components/Column'
 
 const Post = ({ post }: { post: PostType }) => {
   return (
@@ -10,16 +11,20 @@ const Post = ({ post }: { post: PostType }) => {
       className="mt-4 w-full rounded-md bg-lightGray p-2 shadow-md transition-shadow duration-200 ease-in-out hover:shadow-lg"
       key={post.slug}
     >
-      <p className="select-none text-xl font-medium">{post.title}</p>
-      {post.date && (
-        <p className="select-none font-medium ">{getDateLong(post.date)}</p>
-      )}
-      <p className="max-h-[100px] overflow-hidden text-ellipsis text-sm">
-        {post.description}
-      </p>
-      <p className="text-sm font-extrabold leading-[18px] tracking-wide text-teknologröd">
-        läs mera
-      </p>
+      <Column className="items-baseline gap-1">
+        <h3 className="select-none text-xl xxs:text-2xl font-medium">
+          {post.title}
+        </h3>
+        {post.date && (
+          <p className="select-none xxs:text-xl">{getDateLong(post.date)}</p>
+        )}
+        <p className="max-h-[100px] overflow-hidden text-ellipsis text-sm">
+          {post.description}
+        </p>
+        <p className="font-semibold leading-[18px] tracking-wide text-teknologröd">
+          läs mera
+        </p>
+      </Column>
     </Link>
   )
 }

components/posts/index.tsx

@@ -13,7 +13,7 @@ const Posts = ({ posts }: { posts: PostType[] }) => {
       ))}
       <Link
         href="/nyheter"
-        className="duration-50 mt-4 rounded-md p-2 text-center text-sm text-teknologröd transition-colors ease-in-out hover:bg-lightGray"
+        className="duration-50 mt-4 rounded-md p-2 text-center font-medium text-teknologröd transition-colors ease-in-out hover:bg-lightGray"
       >
         Mera nyheter
       </Link>

public/fonts/montserrat/Montserrat-Black.woff2

@@ -1,93 +1,93 @@
-Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
+Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.