From 4deb26a9601fecb7f65b5647d63cc4ac0aaa4a28 Mon Sep 17 00:00:00 2001 From: Cian Hughes Date: Thu, 9 Jan 2025 17:31:11 +0000 Subject: [PATCH] Major hand rewrite Rewrite includes: - Polish of look - Responsive design - Final, correct looking design --- src/LandingPage/BottomCall.scss | 76 +++++++----- src/LandingPage/BottomCall.svelte | 2 +- src/LandingPage/InfoScroll.scss | 28 ++--- src/LandingPage/InfoScroll.svelte | 10 +- src/LandingPage/LandingPage.scss | 25 ++-- src/LandingPage/NavigationFooter.scss | 157 ++++++++++++++---------- src/LandingPage/NavigationFooter.svelte | 47 +++---- src/LandingPage/NavigationHeader.scss | 9 +- src/LandingPage/Splash.scss | 90 ++++++-------- src/LandingPage/Splash.svelte | 29 ++--- src/styles.css | 5 +- src/vars.css | 8 +- 12 files changed, 270 insertions(+), 216 deletions(-) diff --git a/src/LandingPage/BottomCall.scss b/src/LandingPage/BottomCall.scss index ef052de..51d645a 100644 --- a/src/LandingPage/BottomCall.scss +++ b/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; -} - -.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; + padding: 86px 0 86px 32px; } .btmcall-buttons { display: flex; flex-direction: row; + flex-wrap: wrap; + height: 100%; + max-width: 50%; gap: 24px; align-items: center; - justify-content: flex-end; - position: absolute; - right: 80px; - top: 80px; + justify-content: center; + position: relative; + padding: 0 32px 0 32px; +} + +@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-size: var(--body-font-size, 24px); - font-weight: var(--body-font-weight, 400); + font-family: "Assistant", sans-serif; + font-size: 24px; 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-size: var(--body-font-size, 24px); - font-weight: var(--body-font-weight, 400); + font-family: "Assistant", sans-serif; + font-size: 24px; 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); + } +} diff --git a/src/LandingPage/BottomCall.svelte b/src/LandingPage/BottomCall.svelte index 86aed22..c8bd779 100644 --- a/src/LandingPage/BottomCall.svelte +++ b/src/LandingPage/BottomCall.svelte @@ -3,6 +3,7 @@
+
Interested in the project?
Get Involved!
@@ -11,5 +12,4 @@
Contact Us
-
Interested in the project?
diff --git a/src/LandingPage/InfoScroll.scss b/src/LandingPage/InfoScroll.scss index 0749efc..f5df4ce 100644 --- a/src/LandingPage/InfoScroll.scss +++ b/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); - height: var(--infscr-img-size); + width: 100%; + 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); } diff --git a/src/LandingPage/InfoScroll.svelte b/src/LandingPage/InfoScroll.svelte index 3a75add..980c7f1 100644 --- a/src/LandingPage/InfoScroll.svelte +++ b/src/LandingPage/InfoScroll.svelte @@ -4,7 +4,9 @@
-
+
+ +
Experts in L-PBF
@@ -34,7 +36,9 @@
-
+
+ +
Data Driven Research
@@ -67,7 +71,7 @@
-
+
diff --git a/src/LandingPage/LandingPage.scss b/src/LandingPage/LandingPage.scss index c047ec0..eddf978 100644 --- a/src/LandingPage/LandingPage.scss +++ b/src/LandingPage/LandingPage.scss @@ -4,14 +4,10 @@ } .landing-page { - background: var(--background, #090541); - height: 3860px; + background: var(--background); 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%); + } } diff --git a/src/LandingPage/NavigationFooter.scss b/src/LandingPage/NavigationFooter.scss index c68f59d..ab31f5c 100644 --- a/src/LandingPage/NavigationFooter.scss +++ b/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-size: var(--body-font-size, 24px); - font-weight: var(--body-font-weight, 400); - position: absolute; - display: flex; - align-items: center; - justify-content: flex-start; + font-family: "Assistant", sans-serif; + font-size: 24px; + position: relative; + padding: 8px; } -.navigation-footer-items { +.navigation-footer-topic-column { display: flex; flex-direction: column; - gap: var(--navigation-footer-spacing); - align-items: flex-end; - justify-content: center; - width: 187px; - position: absolute; + flex-wrap: wrap; + position: relative; } .navigation-footer-topic { color: #000000; - text-align: left; - font-family: "Assistant-Regular", sans-serif; - font-size: 24px; - font-weight: 400; + font-family: "Assistant", sans-serif; + font-size: 28px; + font-weight: 600; position: relative; - align-self: stretch; - display: flex; - align-items: center; - justify-content: flex-start; } .navigation-footer-link { color: #454545; - text-align: left; - font-family: var(--body-font-family); - font-size: var(--body-font-size, 24px); - font-weight: var(--body-font-weight, 400); + font-family: "Assistant", sans-serif; + font-size: 24px; + text-decoration: underline; position: relative; - align-self: stretch; - display: flex; - align-items: center; - justify-content: flex-start; } .navigation-footer-social-icon { width: 24px; height: 24px; - position: absolute; - left: 8px; - top: 8px; - overflow: visible; + position: relative; } -.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; - left: 80px; - top: 176px; + position: relative; } .navigation-footer-buttons-icon { border-radius: 4px; padding: 8px; - flex-shrink: 0; - width: 40px; - height: 40px; + width: 42px; + height: 42px; position: relative; } .navigation-footer-return { - color: rgba(69, 69, 69, 0.5); - text-align: left; - font-family: var(--small-text-font-family, "Inter-Medium", sans-serif); - font-size: var(--small-text-font-size, 16px); - line-height: var(--small-text-line-height, 150%); - font-weight: var(--small-text-font-weight, 500); + color: rgba(70, 70, 70, 0.5); + font-family: "Assistant", sans-serif; + font-size: 16px; position: relative; - display: flex; - align-items: center; - justify-content: flex-start; } -.navigation-footer-divider { - margin-top: -1px; - border-style: solid; - border-color: #e6e6e6; - border-width: 1px 0 0 0; - width: 1280px; - height: 0px; - position: absolute; - left: 80px; - top: 1px; - transform-origin: 0 0; - transform: rotate(0deg) scale(1, 1); +@media (max-width: 820px) { + .navigation-footer { + height: 100%; + flex-direction: column-reverse; + } + + .navigation-footer-column { + width: 100%; + } + + .navigation-footer-column-left { + 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; + } } diff --git a/src/LandingPage/NavigationFooter.svelte b/src/LandingPage/NavigationFooter.svelte index d261ea2..7eadb07 100644 --- a/src/LandingPage/NavigationFooter.svelte +++ b/src/LandingPage/NavigationFooter.svelte @@ -3,27 +3,32 @@
-
-
Topic
-
Data Repository
-
How to Contribute
-
Contact Us
-
-
↥↥↥ Return to top ↥↥↥
-
AM-D-Model.eu
-
-
- -
-
- -
-
- -
-
- +
+
AM-D-Model.eu
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
↥↥↥ Return to top ↥↥↥
+
+
+
+
Topic
+
Data Repository
+
How to Contribute
+
Contact Us
-
diff --git a/src/LandingPage/NavigationHeader.scss b/src/LandingPage/NavigationHeader.scss index 454baaa..767be01 100644 --- a/src/LandingPage/NavigationHeader.scss +++ b/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; + } +} diff --git a/src/LandingPage/Splash.scss b/src/LandingPage/Splash.scss index e0900be..9d9de12 100644 --- a/src/LandingPage/Splash.scss +++ b/src/LandingPage/Splash.scss @@ -1,91 +1,75 @@ .splash { position: relative; - width: 100%; + max-width: 95%; top: 0px; - height: 680px; -} - -.splash-page-title { - align-self: stretch; - flex-shrink: 0; - height: 492px; - position: relative; + padding-bottom: 128px; + padding-right: 32px } .splash-copy { display: flex; flex-direction: column; - gap: 40px; align-items: flex-start; - justify-content: flex-start; - width: 892.53px; - height: 647.85px; - position: absolute; - left: 48.06px; - top: 227.77px; + max-width: 920px; + position: relative; + left: 5%; } .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: 64px; - letter-spacing: -0.02em; + font-size: var(--splash-title-font-size-large); + line-height: 125%; font-weight: var(--splash-title-font-weight); - font-weight: 700; - position: absolute; - left: 0px; - top: 0px; - width: 844px; + position: relative; + padding-bottom: 16px; } .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; - left: 0px; - top: 258px; - width: 844px; - display: flex; - align-items: center; - justify-content: flex-start; + padding-bottom: 32px; + position: relative; } .splash-button { - background: var(--background, #090541); + 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; + padding: 18px 32px 18px 32px; 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-Bold", sans-serif; - font-size: 24px; + font-family: "Assistant"; + font-size: 32px; font-weight: 700; position: relative; - display: flex; - align-items: center; - justify-content: flex-start; } -.splash-bottom-blend { - background: var(--background, #090541); - width: 100%; - height: 33.31px; - top: 905.69px; - box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +@media (max-width: 720px) { + .splash { + padding-top: 120px; + } + + .splash-title { + font-size: var(--splash-title-font-size-small); + } +} + + +@media (max-width: 380px) { + .splash-title { + font-size: var(--splash-title-font-size-tiny); + } } diff --git a/src/LandingPage/Splash.svelte b/src/LandingPage/Splash.svelte index 9ed077c..8dac604 100644 --- a/src/LandingPage/Splash.svelte +++ b/src/LandingPage/Splash.svelte @@ -4,25 +4,22 @@
-
-
- Benchmarking the future of metal 3d printing -
-
- AM-D-Model is an ESAFORM benchmark project aiming to create the - data that will drive the future of Laser Powder-Bed-Fusion - (L-PBF) research and innovation. By connecting an international - network of collaborators AM-D-Model will create a comprehensive, - open L-PBF benchmark dataset. As part of our commitment to open - science, this dataset will be openly shared with the research - community. Our goal is to create a universal benchmark for the - L-PBF community, sparking the collaboration and innovation that - will build the future of this technology. -
+
+ Benchmarking the future of metal 3d printing +
+
+ AM-D-Model is an ESAFORM benchmark project aiming to create the data + that will drive the future of Laser Powder-Bed-Fusion (L-PBF) + research and innovation. By connecting an international network of + collaborators AM-D-Model will create a comprehensive, open L-PBF + benchmark dataset. As part of our commitment to open science, this + dataset will be openly shared with the research community. Our goal + is to create a universal benchmark for the L-PBF community, sparking + the collaboration and innovation that will build the future of this + technology.
Get Involved!
-
diff --git a/src/styles.css b/src/styles.css index a545a79..0b965e3 100644 --- a/src/styles.css +++ b/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; diff --git a/src/vars.css b/src/vars.css index 0e9d5e2..557926d 100644 --- a/src/vars.css +++ b/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 */