Major hand rewrite

Rewrite includes:
- Polish of look
- Responsive design
- Final, correct looking design

src/LandingPage/BottomCall.scss

@@ -1,47 +1,58 @@
 .btmcall {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-content: left;
   background: #f7f7f7;
   width: 100%;
-  height: 236px;
   position: relative;
-  overflow: hidden;
+  padding: 86px 0 86px 32px;
-}
-
-.btmcall-text {
-  color: var(--background, #090541);
-  text-align: left;
-  font-family: var(--title-font-family);
-  font-size: var(--title-font-size, 64px);
-  font-weight: var(--title-font-weight, 400);
-  position: absolute;
-  left: calc(50% - 675px);
-  top: 64px;
-  width: 874px;
 }
 
 .btmcall-buttons {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  height: 100%;
+  max-width: 50%;
   gap: 24px;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
-  position: absolute;
+  position: relative;
-  right: 80px;
+  padding: 0 32px 0 32px;
-  top: 80px;
+}
+
+@media (max-width: 640px) {
+  .btmcall {
+    flex-direction: column;
+  }
+
+  .btmcall-buttons {
+    max-width: 100%;
+    padding-top: 32px
+  }
+}
+
+.btmcall-text {
+  color: var(--background);
+  text-align: left;
+  font-family: var(--bottom-call-font-family);
+  font-size: var(--bottom-call-font-size-large);
+  line-height: 72px;
+  padding-right: 32px;
+  position: relative;
 }
 
 .btmcall-button1 {
-  background: var(--cpalettemedium);
+  background: var(--background);
   border-radius: 8px;
   padding: 20px 32px 20px 32px;
   display: flex;
   flex-direction: row;
-  gap: 8px;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
   position: relative;
-  box-shadow: var(--button-shadow-box-shadow,
-      0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
 .btmcall-button2 {
@@ -50,21 +61,17 @@
   padding: 20px 32px 20px 32px;
   display: flex;
   flex-direction: row;
-  gap: 8px;
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
   position: relative;
-  box-shadow: var(--button-shadow-box-shadow,
-      0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
 .btmcall-get-involved {
   color: var(--cpalettecomplimentary, #ffffff);
   text-align: left;
-  font-family: var(--body-font-family, "Assistant", sans-serif);
+  font-family: "Assistant", sans-serif;
-  font-size: var(--body-font-size, 24px);
+  font-size: 24px;
-  font-weight: var(--body-font-weight, 400);
   position: relative;
   display: flex;
   align-items: center;
@@ -72,13 +79,18 @@
 }
 
 .btmcall-contact-us {
-  color: var(--background, #090541);
+  color: var(--background);
   text-align: left;
-  font-family: var(--body-font-family, "Assistant", sans-serif);
+  font-family: "Assistant", sans-serif;
-  font-size: var(--body-font-size, 24px);
+  font-size: 24px;
-  font-weight: var(--body-font-weight, 400);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
+
+@media (max-width: 380px) {
+  .btmcall-text {
+    font-size: var(--bottom-call-font-size-small);
+  }
+}

src/LandingPage/BottomCall.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <div class="btmcall">
+    <div class="btmcall-text">Interested in the project?</div>
     <div class="btmcall-buttons">
         <div class="btmcall-button1">
             <div class="btmcall-get-involved">Get Involved!</div>
@@ -11,5 +12,4 @@
             <div class="btmcall-contact-us">Contact Us</div>
         </div>
     </div>
-    <div class="btmcall-text">Interested in the project?</div>
 </div>

src/LandingPage/InfoScroll.scss

@@ -27,7 +27,7 @@
   font-size: var(--infscr-subtitle-font-size);
   font-weight: var(--infscr-subtitle-font-weight);
   position: relative;
-  width: 515px;
+  padding-top: 8px;
 }
 
 .infscr-body {
@@ -42,22 +42,31 @@
   justify-content: flex-start;
 }
 
+.infscr-image-div {
+  display: flex;
+  min-width: 50%;
+  justify-content: center;
+}
+
 .infscr-image {
   border-radius: var(--infscr-corner-round);
-  width: var(--infscr-img-size);
+  width: 100%;
-  height: var(--infscr-img-size);
+  max-width: var(--infscr-img-size);
+  max-height: var(--infscr-img-size);
   position: relative;
 }
 
 .infscr-row,
 .infscr-row-reverse {
   display: flex;
+  flex-direction: column;
   width: 100%;
   justify-content: space-evenly;
+  align-items: center;
   gap: var(--infscr-cardgap-size);
 }
 
-@media (orientation: landscape) {
+@media (orientation: landscape) and (min-width: 1200px) {
   .infscr-row {
     flex-direction: row;
   }
@@ -67,19 +76,10 @@
   }
 }
 
-@media (orientation: portrait) {
-  .infscr-row {
-    flex-direction: column;
-  }
-
-  .infscr-row-reverse {
-    flex-direction: column;
-  }
-}
-
 .infscr-textcol {
   display: flex;
   flex-direction: column;
+  justify-content: space-evenly;
   gap: var(--infscr-titlegap-size);
 }
 

src/LandingPage/InfoScroll.svelte

@@ -4,7 +4,9 @@
 
 <div class="infscr">
     <div class="infscr-row">
-        <div><img class="infscr-image" src="buildplate0.png" /></div>
+        <div class="infscr-image-div">
+            <img class="infscr-image" src="buildplate0.png" />
+        </div>
         <div class="infscr-textcol">
             <div class="infscr-title">Experts in L-PBF</div>
             <div class="infscr-subcol">
@@ -34,7 +36,9 @@
         </div>
     </div>
     <div class="infscr-row-reverse">
-        <div><img class="infscr-image" src="data0.png" /></div>
+        <div class="infscr-image-div">
+            <img class="infscr-image" src="data0.png" />
+        </div>
         <div class="infscr-textcol">
             <div class="infscr-title">Data Driven Research</div>
             <div class="infscr-subcol">
@@ -67,7 +71,7 @@
         </div>
     </div>
     <div class="infscr-row">
-        <div>
+        <div class="infscr-image-div">
             <img class="infscr-image" src="open-science-palettematched0.png" />
         </div>
         <div class="infscr-textcol">

src/LandingPage/LandingPage.scss

@@ -4,14 +4,10 @@
   }
 
   .landing-page {
-    background: var(--background, #090541);
+    background: var(--background);
-    height: 3860px;
     width: 100vw;
+    min-width: 250px;
     position: absolute;
-    right: 0px;
-    left: 0px;
-    top: 0px;
-    overflow: hidden;
     display: flex;
     flex-direction: column;
   }
@@ -19,9 +15,22 @@
   .landing-zone {
     position: relative;
     background-image: url("background-f-000143-10.png");
-    background-size: 100% auto;
+    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
-    overflow: hidden;
+    z-index: 1;
+
+    // Blend out the background image into the plain bg color
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 120px;
+      background: linear-gradient(to bottom,
+          #00000000 0%,
+          var(--background) 100%);
+    }
   }

src/LandingPage/NavigationFooter.scss

@@ -1,110 +1,141 @@
 .navigation-footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   background: #ffffff;
-  height: 264px;
   width: 100%;
-  overflow: hidden;
+  height: 240px;
+}
+
+.navigation-footer-column {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  position: relative;
+  height: 100%;
+  width: 33%;
+  padding: 32px;
+  justify-content: center;
+}
+
+.navigation-footer-column-left {
+  @extend .navigation-footer-column;
+  justify-content: space-between;
+}
+
+.navigation-footer-column-mid {
+  @extend .navigation-footer-column;
+  align-items: center;
+}
+
+.navigation-footer-column-right {
+  @extend .navigation-footer-column;
+  align-items: center;
 }
 
 .navigation-footer-site-name {
   color: #000000;
   text-align: left;
-  font-family: var(--body-font-family, "Assistant-Regular", sans-serif);
+  font-family: "Assistant", sans-serif;
-  font-size: var(--body-font-size, 24px);
+  font-size: 24px;
-  font-weight: var(--body-font-weight, 400);
+  position: relative;
-  position: absolute;
+  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
-.navigation-footer-items {
+.navigation-footer-topic-column {
   display: flex;
   flex-direction: column;
-  gap: var(--navigation-footer-spacing);
+  flex-wrap: wrap;
-  align-items: flex-end;
+  position: relative;
-  justify-content: center;
-  width: 187px;
-  position: absolute;
 }
 
 .navigation-footer-topic {
   color: #000000;
-  text-align: left;
+  font-family: "Assistant", sans-serif;
-  font-family: "Assistant-Regular", sans-serif;
+  font-size: 28px;
-  font-size: 24px;
+  font-weight: 600;
-  font-weight: 400;
   position: relative;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
 .navigation-footer-link {
   color: #454545;
-  text-align: left;
+  font-family: "Assistant", sans-serif;
-  font-family: var(--body-font-family);
+  font-size: 24px;
-  font-size: var(--body-font-size, 24px);
+  text-decoration: underline;
-  font-weight: var(--body-font-weight, 400);
   position: relative;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
 .navigation-footer-social-icon {
   width: 24px;
   height: 24px;
-  position: absolute;
+  position: relative;
-  left: 8px;
-  top: 8px;
-  overflow: visible;
 }
 
-.navigation-footer-social-icons {
+.navigation-footer-social-media {
   display: flex;
   flex-direction: row;
   gap: var(--spacing-xs, 8px);
   align-items: flex-start;
   justify-content: flex-start;
-  position: absolute;
+  position: relative;
-  left: 80px;
-  top: 176px;
 }
 
 .navigation-footer-buttons-icon {
   border-radius: 4px;
   padding: 8px;
-  flex-shrink: 0;
+  width: 42px;
-  width: 40px;
+  height: 42px;
-  height: 40px;
   position: relative;
 }
 
 .navigation-footer-return {
-  color: rgba(69, 69, 69, 0.5);
+  color: rgba(70, 70, 70, 0.5);
-  text-align: left;
+  font-family: "Assistant", sans-serif;
-  font-family: var(--small-text-font-family, "Inter-Medium", sans-serif);
+  font-size: 16px;
-  font-size: var(--small-text-font-size, 16px);
-  line-height: var(--small-text-line-height, 150%);
-  font-weight: var(--small-text-font-weight, 500);
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
-.navigation-footer-divider {
+@media (max-width: 820px) {
-  margin-top: -1px;
+  .navigation-footer {
-  border-style: solid;
+    height: 100%;
-  border-color: #e6e6e6;
+    flex-direction: column-reverse;
-  border-width: 1px 0 0 0;
+  }
-  width: 1280px;
+
-  height: 0px;
+  .navigation-footer-column {
-  position: absolute;
+    width: 100%;
-  left: 80px;
+  }
-  top: 1px;
+
-  transform-origin: 0 0;
+  .navigation-footer-column-left {
-  transform: rotate(0deg) scale(1, 1);
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .navigation-footer-column-mid {
+    align-items: center;
+  }
+
+  .navigation-footer-column-right {
+    align-items: center;
+  }
+
+  .navigation-footer-topic-column {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 620px) {
+  .navigation-footer-column-left {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .navigation-footer-topic-column {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }

src/LandingPage/NavigationFooter.svelte

@@ -3,13 +3,7 @@
 </script>
 
 <div class="navigation-footer">
-    <div class="navigation-footer-items">
+    <div class="navigation-footer-column-left">
-        <div class="topic">Topic</div>
-        <div class="navigation-footer-link">Data Repository</div>
-        <div class="navigation-footer-link">How to Contribute</div>
-        <div class="navigation-footer-link">Contact Us</div>
-    </div>
-    <div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
         <div class="navigation-footer-site-name">AM-D-Model.eu</div>
         <div class="navigation-footer-social-media">
             <div class="navigation-footer-buttons-icon">
@@ -25,5 +19,16 @@
                 <img class="navigation-footer-social-icon" src="icon3.svg" />
             </div>
         </div>
-    <div class="navigation-footer-divider"></div>
+    </div>
+    <div class="navigation-footer-column-mid">
+        <div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
+    </div>
+    <div class="navigation-footer-column-right">
+        <div class="navigation-footer-topic-column">
+            <div class="navigation-footer-topic">Topic</div>
+            <div class="navigation-footer-link">Data Repository</div>
+            <div class="navigation-footer-link">How to Contribute</div>
+            <div class="navigation-footer-link">Contact Us</div>
+        </div>
+    </div>
 </div>

src/LandingPage/NavigationHeader.scss

@@ -2,7 +2,6 @@
   position: relative;
   height: 116.03px;
   width: 100%;
-  overflow: hidden;
 }
 
 .navigation-header-items {
@@ -46,6 +45,12 @@
 
 .navigation-header-contact-us {
   @extend .navigation-header-link;
-  color: var(--cpalettedark);
+  color: var(--background);
   text-decoration: none;
 }
+
+@media (max-width: 720px) {
+  .navigation-header {
+    display: none;
+  }
+}

src/LandingPage/Splash.scss

@@ -1,91 +1,75 @@
 .splash {
   position: relative;
-  width: 100%;
+  max-width: 95%;
   top: 0px;
-  height: 680px;
+  padding-bottom: 128px;
-}
+  padding-right: 32px
-
-.splash-page-title {
-  align-self: stretch;
-  flex-shrink: 0;
-  height: 492px;
-  position: relative;
 }
 
 .splash-copy {
   display: flex;
   flex-direction: column;
-  gap: 40px;
   align-items: flex-start;
-  justify-content: flex-start;
+  max-width: 920px;
-  width: 892.53px;
+  position: relative;
-  height: 647.85px;
+  left: 5%;
-  position: absolute;
-  left: 48.06px;
-  top: 227.77px;
 }
 
 .splash-title {
   color: var(--cpalettecomplimentary);
+  max-width: 100%;
   text-align: left;
   font-family: var(--splash-title-font-family);
-  font-size: var(--splash-title-font-size);
+  font-size: var(--splash-title-font-size-large);
-  font-size: 64px;
+  line-height: 125%;
-  letter-spacing: -0.02em;
   font-weight: var(--splash-title-font-weight);
-  font-weight: 700;
+  position: relative;
-  position: absolute;
+  padding-bottom: 16px;
-  left: 0px;
-  top: 0px;
-  width: 844px;
 }
 
 .splash-body {
   color: var(--cpalettecomplimentary);
+  max-width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
   text-align: left;
   font-family: var(--splash-body-font-family);
   font-size: var(--splash-body-font-size);
   font-weight: var(--splash-body-font-weight);
-  position: absolute;
+  padding-bottom: 32px;
-  left: 0px;
+  position: relative;
-  top: 258px;
-  width: 844px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
 .splash-button {
-  background: var(--background, #090541);
+  background: var(--background);
   border-radius: 8px;
-  padding: 20px 32px 20px 32px;
+  padding: 18px 32px 18px 32px;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
   position: relative;
-  box-shadow: var(--button-shadow-box-shadow,
-      0px 1px 2px 0px rgba(0, 0, 0, 0.05));
 }
 
 .splash-get-involved {
   color: var(--cpalettelight);
-  text-align: left;
+  font-family: "Assistant";
-  font-family: "Assistant-Bold", sans-serif;
+  font-size: 32px;
-  font-size: 24px;
   font-weight: 700;
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 
-.splash-bottom-blend {
+@media (max-width: 720px) {
-  background: var(--background, #090541);
+  .splash {
-  width: 100%;
+    padding-top: 120px;
-  height: 33.31px;
+  }
-  top: 905.69px;
+
-  box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  .splash-title {
+    font-size: var(--splash-title-font-size-small);
+  }
+}
+
+
+@media (max-width: 380px) {
+  .splash-title {
+    font-size: var(--splash-title-font-size-tiny);
+  }
 }

src/LandingPage/Splash.svelte

@@ -4,25 +4,22 @@
 
 <div class="splash">
     <div class="splash-copy">
-        <div class="splash-page-title">
         <div class="splash-title">
             Benchmarking the future of metal 3d printing
         </div>
         <div class="splash-body">
-                AM-D-Model is an ESAFORM benchmark project aiming to create the
+            AM-D-Model is an ESAFORM benchmark project aiming to create the data
-                data that will drive the future of Laser Powder-Bed-Fusion
+            that will drive the future of Laser Powder-Bed-Fusion (L-PBF)
-                (L-PBF) research and innovation. By connecting an international
+            research and innovation. By connecting an international network of
-                network of collaborators AM-D-Model will create a comprehensive,
+            collaborators AM-D-Model will create a comprehensive, open L-PBF
-                open L-PBF benchmark dataset. As part of our commitment to open
+            benchmark dataset. As part of our commitment to open science, this
-                science, this dataset will be openly shared with the research
+            dataset will be openly shared with the research community. Our goal
-                community. Our goal is to create a universal benchmark for the
+            is to create a universal benchmark for the L-PBF community, sparking
-                L-PBF community, sparking the collaboration and innovation that
+            the collaboration and innovation that will build the future of this
-                will build the future of this technology.
+            technology.
-            </div>
         </div>
         <div class="splash-button">
             <div class="splash-get-involved">Get Involved!</div>
         </div>
     </div>
-    <div class="splash-bottom-blend"></div>
 </div>

src/styles.css

@@ -1,4 +1,3 @@
-
 a,
 button,
 input,
@@ -19,7 +18,9 @@ h5,
     -webkit-font-smoothing: antialiased;
 }
 
-menu, ol, ul {
+menu,
+ol,
+ul {
     list-style-type: none;
     margin: 0;
     padding: 0;

src/vars.css

@@ -3,6 +3,7 @@
 
 :root {
     /* Colors */
+    --background: #090541;
     --cpalettelight: #009990;
     --cpalettemedium: #074799;
     --cpalettecomplimentary: #ffffff;
@@ -13,7 +14,9 @@
     --navigation-header-link-font-weight: 700;
     /* For the splash on the landing page */
     --splash-title-font-family: "Martel", sans-serif;
-    --splash-title-font-size: 64px;
+    --splash-title-font-size-large: 64px;
+    --splash-title-font-size-small: 48px;
+    --splash-title-font-size-tiny: 32px;
     --splash-title-font-weight: 700;
     --splash-body-font-family: "Assistant", sans-serif;
     --splash-body-font-size: 24px;
@@ -36,6 +39,9 @@
     --infscr-titlegap-size: 0.75rem;
     --infscr-textgap-size: 0.2rem;
     /* For the navigation footer on the landing page */
+    --bottom-call-font-family: "Martel", sans-serif;
+    --bottom-call-font-size-large: 64px;
+    --bottom-call-font-size-small: 48px;
     --navigation-footer-spacing: 24px;
 
     /* Effects */