Added about page to site

src/lib/components/NavigationHeader.svelte

@@ -1,42 +1,42 @@
 <script>
-    export let items_class;
-    export let link_class;
-    export let button_class;
-    export let button_text_class;
-    export let display_title = true;
-
     import "$lib/styles/NavigationHeader.scss";
     import Button from "$lib/components/Button.svelte";
     import Link from "$lib/components/Link.svelte";
 
+    export let items_class = "";
+    export let link_class = "";
+    export let button_class = "";
+    export let button_text_class = "";
+    export let display_title = true;
+
     import { navigation } from "$lib/navigation";
 </script>
 
 <div class={$$props.class}>
     <div class="navigation-header-items-outer">
-        <div class="flexrow-right {items_class}">
+        <div class="flexrow-right navigation-header-items {items_class}">
             <Link
-                class={link_class}
+                class="navigation-header-link {link_class}"
                 text="Data Repository"
                 hotkey="d"
                 redirectFunc={navigation.to404}
             />
             <Link
-                class={link_class}
+                class="navigation-header-link {link_class}"
                 text="How to Contribute"
                 hotkey="h"
                 redirectFunc={navigation.toAbout}
             />
             <Button
-                class={button_class}
+                class="navigation-header-button {button_class}"
                 text="Contact Us"
-                inner_class={button_text_class}
+                inner_class="navigation-header-button-text {button_text_class}"
                 hotkey="c"
                 redirectFunc={navigation.toContact}
             />
         </div>
         {#if display_title}
-            <div class="flexrow-left {items_class}">
+            <div class="flexrow-left navigation-header-items {items_class}">
                 <Link
                     class="navigation-header-site-name"
                     text="AM-D-Model.eu"

src/lib/styles/NavigationHeader.scss

@@ -1,3 +1,51 @@
+.navigation-header {
+  position: relative;
+  height: 128px;
+  width: 100%;
+  padding-bottom: 120px;
+}
+
+.navigation-header-items {
+  gap: 48px;
+  align-items: center;
+  position: relative;
+  padding-top: 28px;
+  padding-right: 96px;
+  padding-left: 32px;
+}
+
+.navigation-header-link {
+  color: #000000;
+  font-family: var(--navigation-header-font-family);
+  text-align: left;
+  font-size: var(--navigation-header-font-size);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.navigation-header-button {
+  background: #000000;
+  border-radius: 8px;
+  padding: 14px 24px 14px 24px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  box-shadow: var(--button-shadow-box-shadow,
+      0px 1px 2px 0px rgba(0, 0, 0, 0.05));
+}
+
+.navigation-header-button-text {
+  @extend .navigation-header-link;
+  color: var(--cpalettecomplimentary);
+  text-decoration: none;
+}
+
 .navigation-header-items-outer {
   display: flex;
   flex-direction: row-reverse;
@@ -17,6 +65,7 @@
 .flexrow-right {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: flex-end;
 }
 
@@ -24,3 +73,9 @@
   @extend .flexrow-right;
   justify-content: flex-start;
 }
+
+@media (max-width: 720px) {
+  .navigation-header-items-outer {
+    display: none;
+  }
+}

src/lib/styles/fonts.css

@@ -0,0 +1,2 @@
+@import url("https://fonts.cdnfonts.com/css/martel-2");
+@import url("https://fonts.cdnfonts.com/css/assistant");

src/lib/styles/styles.css

@@ -25,3 +25,66 @@ ul {
     margin: 0;
     padding: 0;
 }
+
+h1 {
+    font-family: "Martel";
+    font-size: 64pt;
+    padding-top: 48px;
+    padding-bottom: 18px;
+}
+
+h2 {
+    font-family: "Assistant";
+    color: #828282;
+    font-size: 32pt;
+    padding-bottom: 12px;
+    line-height: 1.5;
+}
+
+p {
+    font-family: "Assistant";
+    font-size: 24pt;
+    padding-bottom: 24px;
+}
+
+@media (max-width: 620px) {
+    h1 {
+        font-size: 54pt;
+    }
+
+    h2 {
+        font-size: 28pt;
+    }
+
+    p {
+        font-size: 18pt;
+    }
+}
+
+@media (max-width: 420px) {
+    h1 {
+        font-size: 42pt;
+    }
+
+    h2 {
+        font-size: 24pt;
+    }
+
+    p {
+        font-size: 16pt;
+    }
+}
+
+@media (max-width: 380px) {
+    h1 {
+        font-size: 36pt;
+    }
+
+    h2 {
+        font-size: 24pt;
+    }
+
+    p {
+        font-size: 16pt;
+    }
+}

src/lib/styles/vars.css

@@ -1,6 +1,3 @@
-@import url("https://fonts.cdnfonts.com/css/martel-2");
-@import url("https://fonts.cdnfonts.com/css/assistant");
-
 :root {
     /* Colors */
     --background: #090541;
@@ -43,6 +40,9 @@
     --bottom-call-font-size-large: 64px;
     --bottom-call-font-size-small: 48px;
     --navigation-footer-spacing: 24px;
+    /* And for the contact page */
+    --contact-img-size: 680px;
+    --contact-corner-round: 28px;
 
     /* Effects */
 

src/routes/+layout.svelte

@@ -1,7 +1,8 @@
 <script>
+    import "../app.css";
+    import "$lib/styles/fonts.css";
     import "$lib/styles/styles.css";
     import "$lib/styles/vars.css";
-    import "../app.css";
 
     let { children } = $props();
 </script>

src/routes/+page.svelte

@@ -34,11 +34,11 @@
         {/if}
         <div class="landing-zone">
             <NavigationHeader
-                class="navigation-header"
-                items_class="navigation-header-items"
-                link_class="navigation-header-link"
-                button_class="navigation-header-button"
-                button_text_class="navigation-header-button-text"
+                class="landing-navigation-header"
+                items_class="landing-navigation-header-items"
+                link_class="landing-navigation-header-link"
+                button_class="landing-navigation-header-button"
+                button_text_class="landing-navigation-header-button-text"
                 display_title={false}
             />
             <Splash />

src/routes/NavigationHeader.scss

@@ -1,11 +1,11 @@
-.navigation-header {
+.landing-navigation-header {
   position: relative;
   height: 128px;
   width: 100%;
   padding-bottom: 120px;
 }
 
-.navigation-header-items {
+.landing-navigation-header-items {
   gap: 48px;
   align-items: center;
   position: relative;
@@ -13,7 +13,7 @@
   padding-right: 96px;
 }
 
-.navigation-header-link {
+.landing-navigation-header-link {
   color: var(--cpalettelight);
   font-family: var(--navigation-header-font-family);
   text-align: left;
@@ -26,7 +26,7 @@
   justify-content: flex-start;
 }
 
-.navigation-header-button {
+.landing-navigation-header-button {
   background: var(--cpalettelight);
   border-radius: 8px;
   padding: 14px 24px 14px 24px;
@@ -41,14 +41,14 @@
       0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
-.navigation-header-button-text {
-  @extend .navigation-header-link;
+.landing-navigation-header-button-text {
+  @extend .landing-navigation-header-link;
   color: var(--background);
   text-decoration: none;
 }
 
 @media (max-width: 720px) {
-  .navigation-header {
+  .landing-navigation-header {
     display: none;
   }
 }

src/routes/about/+page.svelte

@@ -1 +1,62 @@
-About page placeholder
+<script>
+    import "./AboutPage.scss";
+    import NavigationHeader from "$lib/components/NavigationHeader.svelte";
+    import NavigationFooter from "$lib/components/NavigationFooter.svelte";
+</script>
+
+<div class="about-page">
+    <NavigationHeader />
+    <div class="copy">
+        <main>
+            <h1>How Can I Get Involved?</h1>
+
+            <section>
+                <h2>Contributing Data</h2>
+                <p>
+                    All data for the AM-D-Model project is managed via our
+                    Invenio instance. Researchers who wish to contribute can
+                    request access via our Invenio homepage, at the “Data
+                    Repository” link. External contributors will initially be
+                    given a 50GB data storage allocation, with the ability to
+                    request more from our repository administrators if required.
+                </p>
+            </section>
+
+            <section>
+                <h2>Accessing Data</h2>
+                <p>
+                    Data for the AM-D-Model project is planned to first be made
+                    publicly available on our Invenio instance once it is
+                    possible to do so. Data is also intended to be disseminated
+                    via other means such as material science data repositories
+                    and published datasets once the dissemination phase of the
+                    project begins. For those interested, the latest information
+                    on data accessibility will be made available here.
+                </p>
+            </section>
+
+            <section>
+                <h2>Collaboration with the AM-D-Model team</h2>
+                <p>
+                    Researchers interested in other collaborative opportunities
+                    with the AM-D-Model team can contact us via the “Contact Us”
+                    button, or via the various social media channels made
+                    available in the footer of this page.
+                </p>
+            </section>
+
+            <section>
+                <h2>Inquiries</h2>
+                <p>
+                    We aren’t only interested in hearing from researchers, we
+                    also want to hear from all those with an interest in our
+                    project. If you have any inquiries about the project and
+                    contributing to a community effort towards an open, data
+                    driven future for L-PBF please feel free to let us know via
+                    the “Contact Us” button.
+                </p>
+            </section>
+        </main>
+    </div>
+    <NavigationFooter />
+</div>

src/routes/about/AboutPage.scss

@@ -0,0 +1,17 @@
+.about-page,
+.about-page * {
+  box-sizing: border-box;
+}
+
+.about-page {
+  background: var(--cpalettecomplimentary);
+  width: 100vw;
+  min-width: 250px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+}
+
+.copy {
+  padding: 5% 5% 5% 5%;
+}