Cian-H/am-d-model.eu
1
0
Fork 0
mirror of https://github.com/Cian-H/am-d-model.eu.git synced 2025-12-23 05:51:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Major hand rewrite

Browse Source 
Rewrite includes:
- Polish of look
- Responsive design
- Final, correct looking design
This commit is contained in:
Cian Hughes
2025-01-09 17:31:11 +00:00
parent 35bd8cb718
commit 4deb26a960
12 changed files with 270 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/LandingPage/BottomCall.scss
View File

@@ -1,47 +1,58 @@
.btmcall { .btmcall {
display: flex;
flex-direction: row;
align-items: center;
align-content: left;
background: #f7f7f7; background: #f7f7f7;
width: 100%; width: 100%;
height: 236px;
position: relative; 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 { .btmcall-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
height: 100%;
max-width: 50%;
gap: 24px; gap: 24px;
align-items: center; 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 { .btmcall-button1 {
background: var(--cpalettemedium); background: var(--background);
border-radius: 8px; border-radius: 8px;
padding: 20px 32px 20px 32px; padding: 20px 32px 20px 32px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
box-shadow: var(--button-shadow-box-shadow,
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
} }
.btmcall-button2 { .btmcall-button2 {
@@ -50,21 +61,17 @@
padding: 20px 32px 20px 32px; padding: 20px 32px 20px 32px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
box-shadow: var(--button-shadow-box-shadow,
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
} }
.btmcall-get-involved { .btmcall-get-involved {
color: var(--cpalettecomplimentary, #ffffff); color: var(--cpalettecomplimentary, #ffffff);
text-align: left; 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; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -72,13 +79,18 @@
} }
.btmcall-contact-us { .btmcall-contact-us {
color: var(--background, #090541); color: var(--background);
text-align: left; 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; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
@media (max-width: 380px) {
.btmcall-text {
font-size: var(--bottom-call-font-size-small);
}
}

2
src/LandingPage/BottomCall.svelte
View File

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

28
src/LandingPage/InfoScroll.scss
View File

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

10
src/LandingPage/InfoScroll.svelte
View File

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

25
src/LandingPage/LandingPage.scss
View File

@@ -4,14 +4,10 @@
} }
.landing-page { .landing-page {
background: var(--background, #090541); background: var(--background);
height: 3860px;
width: 100vw; width: 100vw;
min-width: 250px;
position: absolute; position: absolute;
right: 0px;
left: 0px;
top: 0px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -19,9 +15,22 @@
.landing-zone { .landing-zone {
position: relative; position: relative;
background-image: url("background-f-000143-10.png"); background-image: url("background-f-000143-10.png");
background-size: 100% auto; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; 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%);
}
} }

157
src/LandingPage/NavigationFooter.scss
View File

@@ -1,110 +1,141 @@
.navigation-footer { .navigation-footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background: #ffffff; background: #ffffff;
height: 264px;
width: 100%; 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 { .navigation-footer-site-name {
color: #000000; color: #000000;
text-align: left; 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; display: flex;
flex-direction: column; 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 { .navigation-footer-topic {
color: #000000; 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; position: relative;
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-start;
} }
.navigation-footer-link { .navigation-footer-link {
color: #454545; 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; position: relative;
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-start;
} }
.navigation-footer-social-icon { .navigation-footer-social-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute; position: relative;
left: 8px;
top: 8px;
overflow: visible;
} }
.navigation-footer-social-icons { .navigation-footer-social-media {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: var(--spacing-xs, 8px); gap: var(--spacing-xs, 8px);
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
position: absolute; position: relative;
left: 80px;
top: 176px;
} }
.navigation-footer-buttons-icon { .navigation-footer-buttons-icon {
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
flex-shrink: 0; width: 42px;
width: 40px; height: 42px;
height: 40px;
position: relative; position: relative;
} }
.navigation-footer-return { .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; 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;
}
} }

47
src/LandingPage/NavigationFooter.svelte
View File

@@ -3,27 +3,32 @@
</script> </script>
<div class="navigation-footer"> <div class="navigation-footer">
<div class="navigation-footer-items"> <div class="navigation-footer-column-left">
<div class="topic">Topic</div> <div class="navigation-footer-site-name">AM-D-Model.eu</div>
<div class="navigation-footer-link">Data Repository</div> <div class="navigation-footer-social-media">
<div class="navigation-footer-link">How to Contribute</div> <div class="navigation-footer-buttons-icon">
<div class="navigation-footer-link">Contact Us</div> <img class="navigation-footer-social-icon" src="icon0.svg" />
</div> </div>
<div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div> <div class="navigation-footer-buttons-icon">
<div class="navigation-footer-site-name">AM-D-Model.eu</div> <img class="navigation-footer-social-icon" src="icon1.svg" />
<div class="navigation-footer-social-media"> </div>
<div class="navigation-footer-buttons-icon"> <div class="navigation-footer-buttons-icon">
<img class="navigation-footer-social-icon" src="icon0.svg" /> <img class="navigation-footer-social-icon" src="icon2.svg" />
</div> </div>
<div class="navigation-footer-buttons-icon"> <div class="navigation-footer-buttons-icon">
<img class="navigation-footer-social-icon" src="icon1.svg" /> <img class="navigation-footer-social-icon" src="icon3.svg" />
</div> </div>
<div class="navigation-footer-buttons-icon"> </div>
<img class="navigation-footer-social-icon" src="icon2.svg" /> </div>
</div> <div class="navigation-footer-column-mid">
<div class="navigation-footer-buttons-icon"> <div class="navigation-footer-return">↥↥↥ Return to top ↥↥↥</div>
<img class="navigation-footer-social-icon" src="icon3.svg" /> </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> </div>
<div class="navigation-footer-divider"></div>
</div> </div>

9
src/LandingPage/NavigationHeader.scss
View File

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

90
src/LandingPage/Splash.scss
View File

@@ -1,91 +1,75 @@
.splash { .splash {
position: relative; position: relative;
width: 100%; max-width: 95%;
top: 0px; 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 { .splash-copy {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px;
align-items: flex-start; 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 { .splash-title {
color: var(--cpalettecomplimentary); color: var(--cpalettecomplimentary);
max-width: 100%;
text-align: left; text-align: left;
font-family: var(--splash-title-font-family); 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: var(--splash-title-font-weight);
font-weight: 700; position: relative;
position: absolute; padding-bottom: 16px;
left: 0px;
top: 0px;
width: 844px;
} }
.splash-body { .splash-body {
color: var(--cpalettecomplimentary); color: var(--cpalettecomplimentary);
max-width: 100%;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: left; text-align: left;
font-family: var(--splash-body-font-family); font-family: var(--splash-body-font-family);
font-size: var(--splash-body-font-size); font-size: var(--splash-body-font-size);
font-weight: var(--splash-body-font-weight); 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 { .splash-button {
background: var(--background, #090541); background: var(--background);
border-radius: 8px; 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; position: relative;
box-shadow: var(--button-shadow-box-shadow,
0px 1px 2px 0px rgba(0, 0, 0, 0.05));
} }
.splash-get-involved { .splash-get-involved {
color: var(--cpalettelight); color: var(--cpalettelight);
text-align: left; font-family: "Assistant";
font-family: "Assistant-Bold", sans-serif; font-size: 32px;
font-size: 24px;
font-weight: 700; font-weight: 700;
position: relative; 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);
}
} }

29
src/LandingPage/Splash.svelte
View File

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

5
src/styles.css
View File

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

8
src/vars.css
View File

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