Revert "Release: new layout for website (#764)"

This reverts commit 5232c4a.

src/components/brief.astro

@@ -2,15 +2,21 @@
 
 interface Props {
   title: string,
+  content: string[]
 }
 
-const { title } = Astro.props;
+const { title, content } = Astro.props;
 
 ---
 <section class="brief">
-  <h1>{title}</h1>
-  <div class="heading">
-    <slot/>
+  <h1>{title}<span>.</span>
+  </h1>
+  <div class="content">
+    {
+      content.map(text => 
+        <p>{text}</p>
+      )
+    }  
   </div>
 </section>
 
@@ -21,27 +27,7 @@ const { title } = Astro.props;
     display: flex;
     gap: 3rem;
   }
-  h1::after {
-    content: '.';
-    font-family: 'Source Code Pro';
-    color: hsl(var(--blue-base) 50%);
-    font-weight: 800;
-  }
-  @media (max-width: 640px) {
-    .brief {
-      flex-direction: column;
-    }
-  }
-</style>
-
-<style is:global>
-  .brief {
-    margin-top: 4rem;
-    margin-bottom: 2rem;
-    display: flex;
-    gap: 3rem;
-  }
-  .brief h1 {
+  h1 {
     display: block;
     align-self: top;
     margin: 0;
@@ -50,22 +36,32 @@ const { title } = Astro.props;
     font-weight: 400;
     font-stretch: extra-condensed;
   }
-  .heading {
+  span {
+    font-family: 'Source Code Pro';
+    color: hsl(var(--blue-base) 50%);
+    font-weight: 800;
+  }
+  p {
     padding-left: 5%;
     padding-right: 5%;
     font-size: 1.2rem;
     max-width: 64ch;
   }
-  .heading *:first-child {
+  .content p:first-child {
     margin-top: 0;
   }
-  .heading *:last-child {
+  .content p:last-child {
     margin-bottom: 0;
   }
   @media (max-width: 640px) {
-    .heading *:not(a) {
+    .brief {
+      flex-direction: column;
+    }
+    p {
       padding-left: 0;
       padding-right: 0;
+      font-size: 1.2rem;
+      max-width: 64ch;
     }
   }
 </style>

src/components/footer.astro

@@ -1,39 +1,25 @@
 ---
-import Logo from './logo.astro';
 import DiscordIcon from '~icons/ph/discord-logo-fill';
 import GitHubIcon from '~icons/ph/github-logo-fill';
 import LinkedInIcon from '~icons/ph/linkedin-logo-fill';
 ---
 
 <footer>
   <div class="container">
-    <section class="logo">
-      <Logo />
-      <div>
-        © Bjerk 2023
-      </div>
-      <div>
-        Org. nr.: 930 334 693
-      </div>
-    </section>
-    <section class="contact">
-      <p>
-        Arbins gate 11 
-        <br>
-        0253 Oslo
-      </p>
+    <section class="content">
       <p>
-        <a href="mailto:[email protected]">
+        Send oss noen ord på <a href="mailto:[email protected]">
           [email protected]
-        </a>
-        <br>
-        <a href="tel:+4722120512">+47 22 12 05 12</a>
+        </a> eller ring oss på <a href="tel:+4722120512">+47 22 12 05 12</a>.
       </p>
-    </section>
+
       <ul class="links">
         <li><a href="/vilkar">Vilkår</a></li>
         <li><a href="/personvern">Personvernerklæring</a></li>
       </ul>
+
+      <p>Bjerk 2023 | Org. nr.: 930 334 693</p>
+    </section>
     <section class="socials">
       <a
         aria-label="Discord-server for Bjerk"
@@ -59,6 +45,7 @@ import LinkedInIcon from '~icons/ph/linkedin-logo-fill';
 
 <style>
   footer {
+    margin-top: 4rem;
     background-color: hsl(var(--blue-base) 20%);
   }
 
@@ -80,25 +67,21 @@ import LinkedInIcon from '~icons/ph/linkedin-logo-fill';
 
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: baseline;
     flex-wrap: wrap;
   }
-  .contact p:first-child {
-    margin-top: 1.2rem;
+
+  .content p:first-child {
+    font-size: 1.2rem;
     max-width: 30ch;
   }
-  .content {
-    height: 100%;
-  }
 
-  .logo div {
+  .content p:last-child {
+    font-size: 0.8rem;
     color: hsl(var(--blue-base) 70%);
   }
-  .logo {
-    margin-top: 1.2rem;
-  }
+
   .socials {
-    margin-top: 1.2rem;
     font-size: 1.7rem;
     display: flex;
     gap: 1rem;
@@ -110,32 +93,10 @@ import LinkedInIcon from '~icons/ph/linkedin-logo-fill';
 
   .links {
     display: flex;
-    height: 100px;
-    flex-direction: column;
     flex-wrap: wrap;
-    justify-content: space-around;
+    gap: 1rem;
+    margin-block: 1rem;
     list-style: none;
-  }
-  ul {
     padding: 0;
-    list-style-type: none;
-  }
-  @media(max-width: 767px) {
-    .container {
-      padding-block: 1rem;
-    }
-    .logo {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-    }
-    .container {
-      justify-content: space-around;
-    }
-    .socials {
-      width: 100%;
-      justify-content: space-around;
-    }
   }
 </style>

src/components/person.astro

@@ -19,8 +19,8 @@ const imageAlt = person.data.imageAlt ?? `Bilde av ${name}`;
 <div class="employee">
   <Image
     src={image}
-    width={600}
-    height={800}
+    width={300}
+    height={400}
     alt={imageAlt}
     class="profile-image"
   />