Teknologforeningen · johan-lindell · Sep 17, 2023 · Sep 14, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/components/Banner.tsx b/components/Banner.tsx
@@ -5,36 +5,65 @@ import { StrapiImage } from '@models/image'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
 import defaultBannerPic from '../public/images/banner/banner.jpg'
+import Row from './Row'
+import TaffaABLogo from './header/navbar/TaffaABLogo'
+import DagsenLogo from './header/navbar/DagsenLogo'
+import Link from 'next/link'
+import links from '@utils/links'
+import classNames from 'classnames'
 
 export type BannerImage = StrapiImage['data']
 
 const MainBanner = ({ bannerImages }: { bannerImages: BannerImage[] }) => {
+  const [infoVisible, setInfoVisible] = useState(true)
+  useEffect(() => {
+    setTimeout(() => setInfoVisible(false), 15000)
+  })
+
   const urls = bannerImages.map((img) => img.attributes.url)
   return (
-    <div className="relative h-[500px] w-full overflow-x-hidden bg-black">
-      {urls.length !== 0 ? <Carousel urls={urls} /> : <SingleBannerImage />}
-      <div className="absolute left-0 right-0 top-[180px] flex flex-col xl:left-40 xl:right-auto xl:flex-row">
-        <svg
-          className="xl:block"
-          width="100%"
-          height={70}
-          viewBox="0 0 26 26"
-          fill={'white'}
-          xmlns="http://www.w3.org/2000/svg"
+    <>
+      <div className="relative h-[500px] w-full overflow-x-hidden bg-black">
+        {urls.length !== 0 ? <Carousel urls={urls} /> : <SingleBannerImage />}
+        <div className="absolute left-0 right-0 top-[180px] flex flex-col xl:left-40 xl:right-auto xl:flex-row">
+          <svg
+            className="xl:block"
+            width="100%"
+            height={70}
+            viewBox="0 0 26 26"
+            fill={'white'}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M25.1889 14.3492C25.2556 13.7939 25.3 13.2386 25.3 12.6833C25.3 12.1502 25.2556 11.5949 25.1889 11.0396V11.0174L23.0343 11.2839C22.9233 10.351 22.6789 9.48472 22.3235 8.64065L24.3226 7.81878C23.9006 6.79701 23.3453 5.84188 22.6789 4.95338L20.9686 6.26391C20.4132 5.5309 19.7691 4.88674 19.0361 4.33143L20.3466 2.62107C19.4803 1.9547 18.503 1.39938 17.5034 0.977348L16.6816 2.97647C15.8375 2.62107 14.9712 2.39895 14.0383 2.26567L14.327 0.111062C13.7939 0.0444249 13.2386 0 12.6833 0C12.1502 0 11.5949 0.0444249 11.0396 0.111062H11.0174L11.2839 2.26567C10.351 2.37673 9.48472 2.62107 8.64065 2.97647L7.81878 0.977348C6.79701 1.39938 5.84188 1.9547 4.95338 2.62107L6.26391 4.33143C5.5309 4.88674 4.88674 5.5309 4.33143 6.26391L2.62107 4.95338C1.9547 5.81966 1.39938 6.7748 0.977348 7.79657L2.97647 8.64065C2.62107 9.48472 2.39895 10.351 2.26567 11.2839L0.111062 10.9952C0.0444249 11.5283 0 12.0836 0 12.6389C0 13.172 0.0444249 13.7273 0.111062 14.2826L2.26567 14.0161C2.37673 14.949 2.62107 15.8153 2.97647 16.6593L0.977348 17.4812C1.39938 18.503 1.9547 19.4581 2.62107 20.3466L4.33143 19.0361C4.88674 19.7691 5.5309 20.4132 6.26391 20.9686L4.95338 22.6789C5.81966 23.3453 6.7748 23.9006 7.79657 24.3226L8.64065 22.3235C9.48472 22.6789 10.351 22.901 11.2839 23.0343L10.9952 25.1889C11.5505 25.2556 12.1058 25.3 12.6389 25.3C13.172 25.3 13.7273 25.2556 14.2826 25.1889L13.9938 23.0343C14.9268 22.9233 15.7931 22.6789 16.6371 22.3235L17.459 24.3226C18.4808 23.9006 19.4359 23.3453 20.3244 22.6789L19.0139 20.9686C19.7469 20.4132 20.391 19.7691 20.9463 19.0361L22.6567 20.3688C23.3231 19.5025 23.8784 18.5474 24.3004 17.5256L22.3013 16.6816C22.6567 15.8375 22.901 14.9712 23.0121 14.0383L25.1889 14.3492ZM13.7273 20.8575C9.21817 21.435 5.06444 18.2586 4.48692 13.7273C3.90939 9.21817 7.08577 5.06444 11.6171 4.48692C16.1262 3.90939 20.28 7.08577 20.8575 11.6171C21.435 16.1262 18.2586 20.2578 13.7273 20.8575Z" />
+            <path d="M12.3057 7.95203H7.4856V10.1511H11.5727V19.3026H13.7717V15.1489H16.0596V12.9498H14.327H14.1938H13.7717V10.1511H17.8588V7.95203H12.7055H12.3057Z" />
+          </svg>
+          <Column className="flex justify-center text-center md:text-left">
+            <p className="font-display text-2xl font-bold uppercase text-white md:text-4xl">
+              Teknologföreningen
+            </p>
+            <p className="text-m text-white md:text-xl">
+              Den svenskspråkiga nationen vid Aalto universitetet
+            </p>
+          </Column>
+        </div>
+        <div
+          className={classNames(
+            'duration-400 absolute bottom-0 right-0 hidden rounded-md bg-darkgray p-2 text-white transition ease-in-out xxs:block',
+            infoVisible ? 'translate-x-0' : 'translate-x-full'
+          )}
         >
-          <path d="M25.1889 14.3492C25.2556 13.7939 25.3 13.2386 25.3 12.6833C25.3 12.1502 25.2556 11.5949 25.1889 11.0396V11.0174L23.0343 11.2839C22.9233 10.351 22.6789 9.48472 22.3235 8.64065L24.3226 7.81878C23.9006 6.79701 23.3453 5.84188 22.6789 4.95338L20.9686 6.26391C20.4132 5.5309 19.7691 4.88674 19.0361 4.33143L20.3466 2.62107C19.4803 1.9547 18.503 1.39938 17.5034 0.977348L16.6816 2.97647C15.8375 2.62107 14.9712 2.39895 14.0383 2.26567L14.327 0.111062C13.7939 0.0444249 13.2386 0 12.6833 0C12.1502 0 11.5949 0.0444249 11.0396 0.111062H11.0174L11.2839 2.26567C10.351 2.37673 9.48472 2.62107 8.64065 2.97647L7.81878 0.977348C6.79701 1.39938 5.84188 1.9547 4.95338 2.62107L6.26391 4.33143C5.5309 4.88674 4.88674 5.5309 4.33143 6.26391L2.62107 4.95338C1.9547 5.81966 1.39938 6.7748 0.977348 7.79657L2.97647 8.64065C2.62107 9.48472 2.39895 10.351 2.26567 11.2839L0.111062 10.9952C0.0444249 11.5283 0 12.0836 0 12.6389C0 13.172 0.0444249 13.7273 0.111062 14.2826L2.26567 14.0161C2.37673 14.949 2.62107 15.8153 2.97647 16.6593L0.977348 17.4812C1.39938 18.503 1.9547 19.4581 2.62107 20.3466L4.33143 19.0361C4.88674 19.7691 5.5309 20.4132 6.26391 20.9686L4.95338 22.6789C5.81966 23.3453 6.7748 23.9006 7.79657 24.3226L8.64065 22.3235C9.48472 22.6789 10.351 22.901 11.2839 23.0343L10.9952 25.1889C11.5505 25.2556 12.1058 25.3 12.6389 25.3C13.172 25.3 13.7273 25.2556 14.2826 25.1889L13.9938 23.0343C14.9268 22.9233 15.7931 22.6789 16.6371 22.3235L17.459 24.3226C18.4808 23.9006 19.4359 23.3453 20.3244 22.6789L19.0139 20.9686C19.7469 20.4132 20.391 19.7691 20.9463 19.0361L22.6567 20.3688C23.3231 19.5025 23.8784 18.5474 24.3004 17.5256L22.3013 16.6816C22.6567 15.8375 22.901 14.9712 23.0121 14.0383L25.1889 14.3492ZM13.7273 20.8575C9.21817 21.435 5.06444 18.2586 4.48692 13.7273C3.90939 9.21817 7.08577 5.06444 11.6171 4.48692C16.1262 3.90939 20.28 7.08577 20.8575 11.6171C21.435 16.1262 18.2586 20.2578 13.7273 20.8575Z" />
-          <path d="M12.3057 7.95203H7.4856V10.1511H11.5727V19.3026H13.7717V15.1489H16.0596V12.9498H14.327H14.1938H13.7717V10.1511H17.8588V7.95203H12.7055H12.3057Z" />
-        </svg>
-        <Column className="flex justify-center text-center md:text-left">
-          <p className="font-display text-2xl font-bold uppercase text-white md:text-4xl">
-            Teknologföreningen
-          </p>
-          <p className="text-m text-white md:text-xl">
-            Den svenskspråkiga nationen vid Aalto universitetet
-          </p>
-        </Column>
+          <InfoBlock />
+        </div>
+      </div>
+      <div
+        className={classNames(
+          infoVisible ? 'block' : 'hidden',
+          'w-full xxs:hidden'
+        )}
+      >
+        <InfoBlock />
       </div>
-    </div>
+    </>
   )
 }
 
@@ -60,7 +89,7 @@ const Carousel = ({ urls }: { urls: string[] }) => {
           <Image
             src={`${STRAPI_URL}${url}`}
             alt=""
-            className="object-cover opacity-80"
+            className="bg-black object-cover opacity-50"
             loading={i > 2 ? 'lazy' : 'eager'}
             fill
             quality={100}
@@ -76,12 +105,40 @@ const SingleBannerImage = () => {
     <Image
       src={defaultBannerPic}
       alt="banner"
-      style={{ objectFit: 'cover', opacity: 0.8 }}
+      style={{ objectFit: 'cover', opacity: 0.5, backgroundColor: 'black' }}
       fill
       loading="eager"
       quality={100}
     />
   )
 }
 
+const InfoBlock = () => (
+  <div className="bg-darkgray p-2 text-white md:w-full">
+    <p className="mb-2 inline-flex items-center border-b-4 border-teknologröd">
+      Tänkte du besöka?
+    </p>
+    <Row>
+      <div className="mr-2 border-r-[1px] border-r-white pr-2">
+        <Link
+          href={links.täffäab}
+          className="link link-text inline-flex items-center"
+        >
+          <TaffaABLogo textHidden={false} />
+        </Link>
+        <div className="mt-2 text-sm">Catering och barverksamhet</div>
+      </div>
+      <div>
+        <Link
+          href={links.lunch}
+          className="link link-text inline-flex flex-row items-center"
+        >
+          <DagsenLogo textHidden={false} />
+        </Link>
+        <div className="mr-2 mt-2 text-sm">Nationens lunchrestaurang</div>
+      </div>
+    </Row>
+  </div>
+)
+
 export default MainBanner
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -47,8 +47,8 @@ const CalendarComponent = () => {
 
   return (
     <div className="mx-5 flex flex-col py-10 md:py-0">
-      <Subtitle>Händelsekalendern</Subtitle>
-      <div className="mt-4 flex max-w-[400px] items-center self-center rounded-md bg-white p-5 pb-5 shadow-md">
+      <Subtitle underline={false}>Händelsekalendern</Subtitle>
+      <div className="mt-4 flex max-w-[400px] items-center self-center rounded-md border-[1px] border-teknologröd bg-white p-5 pb-5 shadow-md">
         <Calendar
           tileClassName={({ date }) => setClass(date)}
           minDetail="month"
@@ -83,21 +83,21 @@ const CalendarEventsList = ({
   events: CalendarEvent[]
   isLoading: boolean
 }) => (
-  <Column className="mt-2 flex w-full">
+  <Column className="mt-2 flex min-h-[380px] w-full">
     {isLoading && events.length < 1 ? (
-      <ActivityIndicator width={25} height={25} stroke="white" />
+      <ActivityIndicator width={25} height={25} stroke="black" />
     ) : (
       events.map((x) => {
         const start = x.start && getDateShort(x.start)
         const end = x.end && getDateShort(x.end)
         return (
           <Link
             key={x.id}
-            className="highlight border-1 my-1.5 w-full max-w-[390px] rounded-md border-teknologröd bg-white p-2 shadow-md hover:bg-lightGray"
+            className="highlight border-1 duration-50 my-1.5 w-full max-w-[390px] rounded-md bg-white p-2 shadow transition-colors ease-in-out hover:bg-lightGray"
             href={x.htmlLink}
           >
             <p className="text-bold text-teknologröd">{x.title}</p>
-            <p>{start + (start !== end ? ' - ' + end : '')}</p>
+            <p>{start + (start !== end ? ' - ' + end : ' ')}</p>
           </Link>
         )
       })

diff --git a/components/Subtitle.tsx b/components/Subtitle.tsx
@@ -1,9 +1,14 @@
 import React from 'react'
 
-const Subtitle = ({ children }: React.PropsWithChildren) => (
+const Subtitle = ({
+  children,
+  underline = true,
+}: React.PropsWithChildren<{ underline?: boolean }>) => (
   <>
-    <p className="text-3xl text-white">{children}</p>
-    <div className="my-1 h-[3px] w-full rounded-sm bg-white" />{' '}
+    <p className="text-3xl text-black">{children}</p>
+    {underline && (
+      <div className="my-1 h-[3px] w-full rounded-sm bg-teknologröd" />
+    )}
   </>
 )
 

diff --git a/components/header/navbar/DagsenLogo.tsx b/components/header/navbar/DagsenLogo.tsx
@@ -1,6 +1,7 @@
 import Row from '@components/Row'
+import classNames from 'classnames'
 
-const DagsenLogo = () => (
+const DagsenLogo = ({ textHidden = true }: { textHidden?: boolean }) => (
   <Row className="items-center">
     <svg
       width={32}
@@ -19,7 +20,7 @@ const DagsenLogo = () => (
         d="M16,2.39C8.48,2.39,2.39,8.48,2.39,16c0,7.52,6.09,13.61,13.61,13.61c7.52,0,13.61-6.09,13.61-13.61 C29.61,8.48,23.52,2.39,16,2.39z M14.92,12.7h-0.87v0.87h-0.87v10.49h-1.75V13.58h-0.87V12.7H9.67V8.33h0.87v2.62h1.31V8.33h0.87 v2.62h1.31V8.33h0.87V12.7z M21.16,24.07h-1.75v-7h-0.87V16.2h-0.87v-6.12h0.87V9.2h0.87V8.33h1.75V24.07z"
       />
     </svg>
-    <div className="hidden lg:block">Täffä Lunch</div>
+    <div className={classNames(textHidden && 'hidden')}>Täffä Lunch</div>
   </Row>
 )
 

diff --git a/components/header/navbar/TaffaABLogo.tsx b/components/header/navbar/TaffaABLogo.tsx
@@ -1,6 +1,7 @@
 import Row from '@components/Row'
+import classNames from 'classnames'
 
-const TaffaABLogo = () => (
+const TaffaABLogo = ({ textHidden = true }: { textHidden?: boolean }) => (
   <Row className="items-center">
     <svg
       width={32}
@@ -19,7 +20,7 @@ const TaffaABLogo = () => (
         d="M16,2.39C8.48,2.39,2.39,8.48,2.39,16c0,7.52,6.09,13.61,13.61,13.61c7.52,0,13.61-6.09,13.61-13.61 C29.61,8.48,23.52,2.39,16,2.39z M21.7,24.63c-1.64-0.03-3.49-0.79-3.49-0.79l-1.03-5.06l3.2-2.73l-2.57-6.99l-2.53,0.52l-1.35,0.27 l-2.53,0.51l0.37,7.44l4.02,1.26l1.03,5.07c0,0-1.32,1.35-2.78,2.04c-4.78-0.92-8.4-5.13-8.4-10.17c0-5.71,4.65-10.35,10.35-10.35 S26.35,10.29,26.35,16C26.35,19.6,24.5,22.78,21.7,24.63z"
       />
     </svg>
-    <div className="hidden lg:block">Täffä AB</div>
+    <div className={classNames(textHidden && 'hidden')}>Täffä AB</div>
   </Row>
 )
 

diff --git a/components/posts/Post.tsx b/components/posts/Post.tsx
@@ -5,8 +5,9 @@ import { getDateLong } from '@utils/helpers'
 
 const Post = ({ post }: { post: PostType }) => {
   return (
-    <div
-      className="mt-4 w-full rounded-md border-[1px] border-white bg-white p-2 shadow-md"
+    <Link
+      href={`/nyheter/${post.slug}`}
+      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>
@@ -16,13 +17,10 @@ const Post = ({ post }: { post: PostType }) => {
       <p className="max-h-[100px] overflow-hidden text-ellipsis text-sm">
         {post.description}
       </p>
-      <Link
-        href={`/nyheter/${post.slug}`}
-        className="text-sm font-extrabold leading-[18px] tracking-wide text-teknologröd hover:text-[15px] hover:font-semibold"
-      >
+      <p className="text-sm font-extrabold leading-[18px] tracking-wide text-teknologröd">
         läs mera
-      </Link>
-    </div>
+      </p>
+    </Link>
   )
 }
 

diff --git a/components/posts/index.tsx b/components/posts/index.tsx
@@ -13,7 +13,7 @@ const Posts = ({ posts }: { posts: PostType[] }) => {
       ))}
       <Link
         href={`/nyheter`}
-        className="mt-4 rounded-md border-[1px] border-white p-2 text-center text-sm leading-[18px] tracking-wide text-white hover:text-[15px] hover:font-semibold"
+        className="duration-50 mt-4 rounded-md p-2 text-center text-sm text-teknologröd transition-colors ease-in-out hover:bg-lightGray"
       >
         Mera nyheter
       </Link>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -45,7 +45,7 @@ const Home: NextPage<HomeProps> = ({
       <Column>
         <MainBanner bannerImages={bannerImages} />
         <Item
-          backgroundColor="darkgray"
+          backgroundColor="white"
           className="max-w-[1500px] flex-col md:flex-row"
         >
           <Posts posts={posts.slice(0, 5)} />

diff --git a/pages/nyheter/index.tsx b/pages/nyheter/index.tsx
@@ -36,7 +36,7 @@ const Posts = ({ logos, navbarLinks }: PostsProps) => {
       <Header navbarLinks={navbarLinks} />
       <main className="z-10 mx-auto my-6 min-h-[92vh] max-w-7xl p-[15px]">
         <Column>
-          <p className="pb-5 text-3xl text-white">Nyheter</p>
+          <p className="pb-5 text-3xl">Nyheter</p>
 
           {posts.map((post) => (
             <Post post={post} key={post.slug} />

diff --git a/styles/globals.css b/styles/globals.css
@@ -11,13 +11,13 @@
   --blogpink: #d79ad1;
   --darkGray: #222222;
   --gray: #38404b;
-  --lightGray: #a9a9a9;
+  --lightGray: #f5f5f5;
 }
 
 @layer base {
   html,
   body {
-    background-color: var(--lightGray);
+    background-color: white;
     height: 100vh;
     display: flex;
     flex-direction: column;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,6 +21,9 @@ module.exports = {
         body: ['var(--font-raleway)'],
         display: ['var(--font-montserrat)'],
       },
+      screens: {
+        'xxs': '450px',
+      },
       typography: {
         DEFAULT: {
           css: {