mirror of
https://github.com/Cian-H/am-d-model.eu.git
synced 2025-12-22 21:41:57 +00:00
Separated landing page into multiple files
This commit is contained in:
84
src/LandingPage/BottomCall.scss
Normal file
84
src/LandingPage/BottomCall.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.btmcall {
|
||||
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;
|
||||
}
|
||||
|
||||
.btmcall-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.btmcall-button1 {
|
||||
background: var(--cpalettemedium);
|
||||
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 {
|
||||
background: var(--cpalettecomplimentary, #ffffff);
|
||||
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-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);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.btmcall-contact-us {
|
||||
color: var(--background, #090541);
|
||||
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);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
15
src/LandingPage/BottomCall.svelte
Normal file
15
src/LandingPage/BottomCall.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import "./BottomCall.scss";
|
||||
</script>
|
||||
|
||||
<div class="btmcall">
|
||||
<div class="btmcall-buttons">
|
||||
<div class="btmcall-button1">
|
||||
<div class="btmcall-get-involved">Get Involved!</div>
|
||||
</div>
|
||||
<div class="btmcall-button2">
|
||||
<div class="btmcall-contact-us">Contact Us</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btmcall-text">Interested in the project?</div>
|
||||
</div>
|
||||
90
src/LandingPage/InfoScroll.scss
Normal file
90
src/LandingPage/InfoScroll.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
.infscr {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: var(--infscr-vpad);
|
||||
padding-bottom: var(--infscr-vpad);
|
||||
padding-left: var(--infscr-hpad);
|
||||
padding-right: var(--infscr-hpad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-cardgap-size);
|
||||
}
|
||||
|
||||
.infscr-title {
|
||||
color: var(--cpalettelight);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: var(--infscr-title-font-family);
|
||||
font-size: var(--infscr-title-font-size);
|
||||
font-weight: var(--infscr-title-font-weight);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.infscr-subtitle {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: var(--infscr-subtitle-font-family);
|
||||
font-size: var(--infscr-subtitle-font-size);
|
||||
font-weight: var(--infscr-subtitle-font-weight);
|
||||
position: relative;
|
||||
width: 515px;
|
||||
}
|
||||
|
||||
.infscr-body {
|
||||
color: var(--cpalettecomplimentary);
|
||||
text-align: left;
|
||||
font-family: var(--infscr-body-font-family);
|
||||
font-size: var(--infscr-body-font-size);
|
||||
font-weight: var(--infscr-body-font-weight);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.infscr-image {
|
||||
border-radius: var(--infscr-corner-round);
|
||||
width: var(--infscr-img-size);
|
||||
height: var(--infscr-img-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.infscr-row,
|
||||
.infscr-row-reverse {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
gap: var(--infscr-cardgap-size);
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.infscr-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.infscr-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.infscr-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.infscr-row-reverse {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.infscr-textcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-titlegap-size);
|
||||
}
|
||||
|
||||
.infscr-subcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-textgap-size);
|
||||
}
|
||||
104
src/LandingPage/InfoScroll.svelte
Normal file
104
src/LandingPage/InfoScroll.svelte
Normal file
@@ -0,0 +1,104 @@
|
||||
<script>
|
||||
import "./InfoScroll.scss";
|
||||
</script>
|
||||
|
||||
<div class="infscr">
|
||||
<div class="infscr-row">
|
||||
<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">
|
||||
<div class="infscr-subtitle">Experienced Research Teams</div>
|
||||
<div class="infscr-body">
|
||||
Our collaboration is comprised of expert L-PBF researchers
|
||||
with years of experience in the field.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">International Excellence</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model contributors include scientists and engineers
|
||||
from respected research institutions across Europe.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Backed by Research Associations
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model is supported and funded by ESAFORM, a globally
|
||||
recognized association of research leaders in additive
|
||||
manufacturing.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-row-reverse">
|
||||
<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">
|
||||
<div class="infscr-subtitle">Building the Future of L-PBF</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model aims to provide a key cornerstone for the future
|
||||
of L-PBF research: a universal benchmark for process
|
||||
modelling.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Community Focused Data Management
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
We aim to provide a blueprint for future big data AM
|
||||
projects, working with contributors to ensure this
|
||||
benchmarking dataset is managed responsibly.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Data Science, as a Core Discipline
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
Our team includes expert data scientists, responsible for
|
||||
managing data contributions and maximizing data impact.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-row">
|
||||
<div>
|
||||
<img class="infscr-image" src="open-science-palettematched0.png" />
|
||||
</div>
|
||||
<div class="infscr-textcol">
|
||||
<div class="infscr-title">Open Science</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">FAIR, Transparent, and Open</div>
|
||||
<div class="infscr-body">
|
||||
The AM-D-Model benchmark project is designed with open
|
||||
science in mind, following FAIR principles of transparency
|
||||
and openness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Visibility, Accessibility and Impact
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
By making these results open, we believe that visibility and
|
||||
accessibility will maximize their impact on the L-PBF field.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Serving the Research Community
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
We aim to contribute to the L-PBF research community by
|
||||
providing a universally accessible benchmark similar to
|
||||
those driving other cutting-edge research fields.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
27
src/LandingPage/LandingPage.scss
Normal file
27
src/LandingPage/LandingPage.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.landing-page,
|
||||
.landing-page * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
background: var(--background, #090541);
|
||||
height: 3860px;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.landing-zone {
|
||||
position: relative;
|
||||
background-image: url("background-f-000143-10.png");
|
||||
background-size: 100% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,622 +1,21 @@
|
||||
<script>
|
||||
import "./LandingPage.scss";
|
||||
import NavigationHeader from "./NavigationHeader.svelte";
|
||||
import Splash from "./Splash.svelte";
|
||||
import InfoScroll from "./InfoScroll.svelte";
|
||||
import BottomCall from "./BottomCall.svelte";
|
||||
import NavigationFooter from "./NavigationFooter.svelte";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class={"landing-page " + className}>
|
||||
<div class="landing-zone">
|
||||
<div class="navigation-header">
|
||||
<div class="navigation-header-items">
|
||||
<div class="navigation-header-link">Data Repository</div>
|
||||
<div class="navigation-header-link">How to Contribute</div>
|
||||
<div class="navigation-header-button">
|
||||
<div class="navigation-header-contact-us">Contact Us</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="splash-button">
|
||||
<div class="splash-get-involved">Get Involved!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splash-bottom-blend"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr">
|
||||
<div class="infscr-row">
|
||||
<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">
|
||||
<div class="infscr-subtitle">
|
||||
Experienced Research Teams
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
Our collaboration is comprised of expert L-PBF
|
||||
researchers with years of experience in the field.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">International Excellence</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model contributors include scientists and engineers
|
||||
from respected research institutions across Europe.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Backed by Research Associations
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model is supported and funded by ESAFORM, a
|
||||
globally recognized association of research leaders in
|
||||
additive manufacturing.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-row-reverse">
|
||||
<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">
|
||||
<div class="infscr-subtitle">
|
||||
Building the Future of L-PBF
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
AM-D-Model aims to provide a key cornerstone for the
|
||||
future of L-PBF research: a universal benchmark for
|
||||
process modelling.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Community Focused Data Management
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
We aim to provide a blueprint for future big data AM
|
||||
projects, working with contributors to ensure this
|
||||
benchmarking dataset is managed responsibly.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Data Science, as a Core Discipline
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
Our team includes expert data scientists, responsible
|
||||
for managing data contributions and maximizing data
|
||||
impact.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-row">
|
||||
<div>
|
||||
<img
|
||||
class="infscr-image"
|
||||
src="open-science-palettematched0.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="infscr-textcol">
|
||||
<div class="infscr-title">Open Science</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
FAIR, Transparent, and Open
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
The AM-D-Model benchmark project is designed with open
|
||||
science in mind, following FAIR principles of
|
||||
transparency and openness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Visibility, Accessibility and Impact
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
By making these results open, we believe that visibility
|
||||
and accessibility will maximize their impact on the
|
||||
L-PBF field.
|
||||
</div>
|
||||
</div>
|
||||
<div class="infscr-subcol">
|
||||
<div class="infscr-subtitle">
|
||||
Serving the Research Community
|
||||
</div>
|
||||
<div class="infscr-body">
|
||||
We aim to contribute to the L-PBF research community by
|
||||
providing a universally accessible benchmark similar to
|
||||
those driving other cutting-edge research fields.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btmcall">
|
||||
<div class="btmcall-buttons">
|
||||
<div class="btmcall-button1">
|
||||
<div class="btmcall-get-involved">Get Involved!</div>
|
||||
</div>
|
||||
<div class="btmcall-button2">
|
||||
<div class="btmcall-contact-us">Contact Us</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btmcall-text">Interested in the project?</div>
|
||||
</div>
|
||||
<div class="navigation-footer">
|
||||
<div class="navigation-footer-items">
|
||||
<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">
|
||||
<img class="navigation-footer-social-icon" src="icon0.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon1.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon2.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon3.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-footer-divider"></div>
|
||||
<NavigationHeader />
|
||||
<Splash />
|
||||
</div>
|
||||
<InfoScroll />
|
||||
<BottomCall />
|
||||
<NavigationFooter />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
// Landing page level classes
|
||||
.landing-page,
|
||||
.landing-page * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.landing-page {
|
||||
background: var(--background, #090541);
|
||||
height: 3860px;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.landing-zone {
|
||||
position: relative;
|
||||
background-image: url("background-f-000143-10.png");
|
||||
background-size: 100% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
// Navigation Header classes
|
||||
.navigation-header {
|
||||
position: relative;
|
||||
height: 116.03px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navigation-header-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m, 48px);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 79.79px;
|
||||
top: 28px;
|
||||
}
|
||||
.navigation-header-link {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: var(--navigation-header-link-font-family);
|
||||
font-size: var(--navigation-header-link-font-size);
|
||||
font-weight: var(--navigation-header-link-font-weight);
|
||||
text-decoration: underline;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navigation-header-button {
|
||||
background: var(--cpalettelight);
|
||||
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-contact-us {
|
||||
@extend .navigation-header-link;
|
||||
color: var(--cpalettedark);
|
||||
text-decoration: none;
|
||||
}
|
||||
// Splash area classes
|
||||
.splash {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
height: 680px;
|
||||
}
|
||||
.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;
|
||||
width: 892.53px;
|
||||
height: 647.85px;
|
||||
position: absolute;
|
||||
left: 48.06px;
|
||||
top: 227.77px;
|
||||
}
|
||||
.splash-title {
|
||||
color: var(--cpalettecomplimentary);
|
||||
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-weight: var(--splash-title-font-weight);
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 844px;
|
||||
}
|
||||
.splash-body {
|
||||
color: var(--cpalettecomplimentary);
|
||||
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;
|
||||
}
|
||||
.splash-button {
|
||||
background: var(--background, #090541);
|
||||
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)
|
||||
);
|
||||
}
|
||||
.splash-get-involved {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: "Assistant-Bold", sans-serif;
|
||||
font-size: 24px;
|
||||
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);
|
||||
}
|
||||
// Info scroll area classes
|
||||
.infscr {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: var(--infscr-vpad);
|
||||
padding-bottom: var(--infscr-vpad);
|
||||
padding-left: var(--infscr-hpad);
|
||||
padding-right: var(--infscr-hpad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-cardgap-size);
|
||||
}
|
||||
.infscr-title {
|
||||
color: var(--cpalettelight);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: var(--infscr-title-font-family);
|
||||
font-size: var(--infscr-title-font-size);
|
||||
font-weight: var(--infscr-title-font-weight);
|
||||
position: relative;
|
||||
}
|
||||
.infscr-subtitle {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: var(--infscr-subtitle-font-family);
|
||||
font-size: var(--infscr-subtitle-font-size);
|
||||
font-weight: var(--infscr-subtitle-font-weight);
|
||||
position: relative;
|
||||
width: 515px;
|
||||
}
|
||||
.infscr-body {
|
||||
color: var(--cpalettecomplimentary);
|
||||
text-align: left;
|
||||
font-family: var(--infscr-body-font-family);
|
||||
font-size: var(--infscr-body-font-size);
|
||||
font-weight: var(--infscr-body-font-weight);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.infscr-image {
|
||||
border-radius: var(--infscr-corner-round);
|
||||
width: var(--infscr-img-size);
|
||||
height: var(--infscr-img-size);
|
||||
position: relative;
|
||||
}
|
||||
.infscr-row,
|
||||
.infscr-row-reverse {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
gap: var(--infscr-cardgap-size);
|
||||
}
|
||||
@media (orientation: landscape) {
|
||||
.infscr-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.infscr-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
.infscr-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.infscr-row-reverse {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.infscr-textcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-titlegap-size);
|
||||
}
|
||||
.infscr-subcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--infscr-textgap-size);
|
||||
}
|
||||
// Bottom call-to-action elements
|
||||
.btmcall {
|
||||
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;
|
||||
}
|
||||
.btmcall-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
top: 80px;
|
||||
}
|
||||
.btmcall-button1 {
|
||||
background: var(--cpalettemedium);
|
||||
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 {
|
||||
background: var(--cpalettecomplimentary, #ffffff);
|
||||
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-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);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.btmcall-contact-us {
|
||||
color: var(--background, #090541);
|
||||
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);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
// Navigation footer elements
|
||||
.navigation-footer {
|
||||
background: #ffffff;
|
||||
height: 264px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.navigation-footer-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navigation-footer-spacing);
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 187px;
|
||||
position: absolute;
|
||||
}
|
||||
.navigation-footer-topic {
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
font-family: "Assistant-Regular", sans-serif;
|
||||
font-size: 24px;
|
||||
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: var(--body-font-family);
|
||||
font-size: var(--body-font-size, 24px);
|
||||
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: relative;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
.navigation-footer-social-media {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xs, 8px);
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
left: 80px;
|
||||
top: 176px;
|
||||
}
|
||||
.navigation-footer-buttons-icon {
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
110
src/LandingPage/NavigationFooter.scss
Normal file
110
src/LandingPage/NavigationFooter.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
.navigation-footer {
|
||||
background: #ffffff;
|
||||
height: 264px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.navigation-footer-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navigation-footer-spacing);
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 187px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navigation-footer-topic {
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
font-family: "Assistant-Regular", sans-serif;
|
||||
font-size: 24px;
|
||||
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: var(--body-font-family);
|
||||
font-size: var(--body-font-size, 24px);
|
||||
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;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navigation-footer-social-icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-xs, 8px);
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 176px;
|
||||
}
|
||||
|
||||
.navigation-footer-buttons-icon {
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
29
src/LandingPage/NavigationFooter.svelte
Normal file
29
src/LandingPage/NavigationFooter.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import "./NavigationFooter.scss";
|
||||
</script>
|
||||
|
||||
<div class="navigation-footer">
|
||||
<div class="navigation-footer-items">
|
||||
<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">
|
||||
<img class="navigation-footer-social-icon" src="icon0.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon1.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon2.svg" />
|
||||
</div>
|
||||
<div class="navigation-footer-buttons-icon">
|
||||
<img class="navigation-footer-social-icon" src="icon3.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-footer-divider"></div>
|
||||
</div>
|
||||
51
src/LandingPage/NavigationHeader.scss
Normal file
51
src/LandingPage/NavigationHeader.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.navigation-header {
|
||||
position: relative;
|
||||
height: 116.03px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navigation-header-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-m, 48px);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 79.79px;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.navigation-header-link {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: var(--navigation-header-link-font-family);
|
||||
font-size: var(--navigation-header-link-font-size);
|
||||
font-weight: var(--navigation-header-link-font-weight);
|
||||
text-decoration: underline;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navigation-header-button {
|
||||
background: var(--cpalettelight);
|
||||
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-contact-us {
|
||||
@extend .navigation-header-link;
|
||||
color: var(--cpalettedark);
|
||||
text-decoration: none;
|
||||
}
|
||||
13
src/LandingPage/NavigationHeader.svelte
Normal file
13
src/LandingPage/NavigationHeader.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import "./NavigationHeader.scss";
|
||||
</script>
|
||||
|
||||
<div class="navigation-header">
|
||||
<div class="navigation-header-items">
|
||||
<div class="navigation-header-link">Data Repository</div>
|
||||
<div class="navigation-header-link">How to Contribute</div>
|
||||
<div class="navigation-header-button">
|
||||
<div class="navigation-header-contact-us">Contact Us</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
91
src/LandingPage/Splash.scss
Normal file
91
src/LandingPage/Splash.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
.splash {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
height: 680px;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 892.53px;
|
||||
height: 647.85px;
|
||||
position: absolute;
|
||||
left: 48.06px;
|
||||
top: 227.77px;
|
||||
}
|
||||
|
||||
.splash-title {
|
||||
color: var(--cpalettecomplimentary);
|
||||
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-weight: var(--splash-title-font-weight);
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 844px;
|
||||
}
|
||||
|
||||
.splash-body {
|
||||
color: var(--cpalettecomplimentary);
|
||||
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;
|
||||
}
|
||||
|
||||
.splash-button {
|
||||
background: var(--background, #090541);
|
||||
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));
|
||||
}
|
||||
|
||||
.splash-get-involved {
|
||||
color: var(--cpalettelight);
|
||||
text-align: left;
|
||||
font-family: "Assistant-Bold", sans-serif;
|
||||
font-size: 24px;
|
||||
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);
|
||||
}
|
||||
28
src/LandingPage/Splash.svelte
Normal file
28
src/LandingPage/Splash.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import "./Splash.scss";
|
||||
</script>
|
||||
|
||||
<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
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<div class="splash-button">
|
||||
<div class="splash-get-involved">Get Involved!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splash-bottom-blend"></div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user