STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

updated

Browse Source
This commit is contained in:
James Collins
2023-04-18 13:32:16 +10:00
parent 9d9a5fd9d2
commit 6082beb964
1 changed files with 203 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
resources/js/views/Home.vue
View File

@@ -39,28 +39,6 @@
</SMColumn> </SMColumn>
</SMRow> </SMRow>
</SMContainer> </SMContainer>
<SMContainer class="support">
<h2>And the support doesn't stop!</h2>
<SMRow>
<SMColumn
class="align-items-center justify-content-center flex-basis-45">
<img src="/img/discord.jpg" />
</SMColumn>
<SMColumn class="align-items-center flex-basis-55">
<p>
Though the workshop has come to a close, we remain available
to assist you via email and Discord with any projects you
undertake at home. We are always happy to help.
</p>
<div class="button-row">
<SMButton
to="https://discord.gg/yNzk4x7mpD"
label="Join Discord" />
<SMButton :to="{ name: 'contact' }" label="Contact Us" />
</div>
</SMColumn>
</SMRow>
</SMContainer>
<SMContainer full class="minecraft"> <SMContainer full class="minecraft">
<SMContainer> <SMContainer>
<h2>Play Minecraft with us</h2> <h2>Play Minecraft with us</h2>
@@ -91,6 +69,29 @@
</p> </p>
</SMContainer> </SMContainer>
</SMContainer> </SMContainer>
<SMContainer class="support">
<h2>And the support doesn't stop!</h2>
<SMRow>
<SMColumn
class="align-items-center justify-content-center flex-basis-45">
<img src="/img/discord.jpg" />
</SMColumn>
<SMColumn class="align-items-center flex-basis-55">
<p>
Though the workshop has come to a close, we remain available
to assist you via email and Discord with any projects you
undertake at home. We are always happy to help.
</p>
<div class="button-row">
<SMButton
type="primary"
to="https://discord.gg/yNzk4x7mpD"
label="Join Discord" />
<SMButton :to="{ name: 'contact' }" label="Contact Us" />
</div>
</SMColumn>
</SMRow>
</SMContainer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -99,271 +100,211 @@ import SMHero from "../components/SMHero.vue";
</script> </script>
<style lang="scss"> <style lang="scss">
.hero-offset { .page-home {
margin-top: -80px; .hero-offset {
} margin-top: -80px;
// .sm-page-home {
// margin-top: -127px !important;
// background-color: #fff;
// h2 {
// font-weight: 1000;
// text-align: center;
// margin: 0;
// }
.about {
margin-top: 5rem;
margin-left: 2rem;
margin-right: 2rem;
background-color: #3d4e5d;
color: rgb(230, 245, 235);
border-radius: 24px;
padding: 4rem 8rem;
width: auto;
align-self: center;
h2 {
font-size: 400%;
} }
p { .about {
font-size: 125%; margin: 64px 32px 32px;
line-height: 150%; padding: 0 90px 64px 90px;
} background-color: var(--accent-1-color);
} color: var(--accent-1-color-text);
.workshops {
margin: 8rem auto;
align-self: center;
h2 {
font-size: 300%;
}
p {
font-size: 125%;
line-height: 150%;
max-width: 32rem;
text-align: center;
margin: 1rem auto 2rem auto;
}
img {
border-radius: 50rem;
height: 20rem;
width: 20rem;
}
}
.support {
background-color: #e6f5eb;
color: rgb(56, 79, 95);
border-radius: 24px;
padding: 4rem 5rem;
margin-left: 2rem;
margin-right: 2rem;
width: auto;
align-self: center;
img {
border-radius: 24px; border-radius: 24px;
height: 80%; width: auto;
width: 80%;
transform: rotateZ(-10deg); h2 {
font-size: 400%;
text-align: center;
}
p {
font-size: 125%;
line-height: 150%;
}
} }
h2 { .workshops {
font-size: 300%; margin: 64px 24px;
text-align: left; width: auto;
text-align: center;
margin-bottom: 1rem; h2 {
font-size: 300%;
text-align: center;
}
p {
font-size: 125%;
line-height: 150%;
max-width: 32rem;
margin: 16px auto 32px auto;
}
img {
border-radius: 50rem;
height: 360px;
width: 360px;
}
.button {
background-color: var(--accent-1-color);
color: var(--accent-1-color-text);
}
} }
p { .minecraft {
font-size: 125%; margin-top: 64px;
line-height: 150%; background-image: url("/img/minecraft.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 48px;
color: var(--base-color-light);
h2 {
font-size: 300%;
text-align: center;
}
p {
font-size: 125%;
line-height: 150%;
text-align: center;
margin: 24px auto;
}
.minecraft-education {
text-align: left;
.minecraft-image {
float: left;
margin-top: 24px;
margin-right: 48px;
}
}
.minecraft-address {
width: 100%;
height: 100%;
}
} }
.button-row { .support {
display: flex; margin: 64px 32px 32px;
justify-content: space-between; padding: 0 90px 64px 90px;
width: 100%; color: var(--accent-2-color-text);
margin-top: 1rem; background-color: var(--accent-2-color);
border-radius: 24px;
width: auto;
a { img {
font-weight: bold;
color: inherit;
border: 2px solid rgb(56, 79, 95);
border-radius: 24px; border-radius: 24px;
padding: 0.5rem 1.5rem; width: 80%;
transition: color 0.2s ease-in-out, border 0.2s ease-in-out, transform: rotateZ(-10deg);
background 0.2s ease-in-out; }
&:hover { h2 {
text-decoration: none; font-size: 300%;
background-color: rgb(56, 79, 95); text-align: center;
color: #e6f5eb; margin-bottom: 16px;
}
p {
font-size: 125%;
line-height: 1.5em;
}
.button-row {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 16px;
}
}
}
@media only screen and (max-width: 896px) {
.page-home {
.support {
img {
min-width: 256px;
margin-left: -90px;
}
.button-row {
flex-direction: column;
gap: 20px;
.button {
text-align: center;
}
} }
} }
} }
} }
.minecraft { @media only screen and (max-width: 768px) {
margin-top: 4rem; .page-home {
background-image: url("/img/minecraft.png"); .about {
background-repeat: no-repeat; margin: 0;
background-position: center; border-radius: 0;
background-size: cover;
padding: 4rem;
color: #fff;
h2 {
font-size: 300%;
}
p {
font-size: 125%;
line-height: 150%;
text-align: center;
max-width: 44rem;
margin: 1rem auto;
}
.minecraft-education {
text-align: left;
.minecraft-image {
float: left;
margin-top: 1rem;
margin-right: 2rem;
} }
}
.minecraft-address { .workshops {
width: 100%; margin-top: 0;
height: 100%; margin-bottom: 0;
}
.minecraft {
margin: 0;
padding: 32px;
.minecraft-education {
text-align: center;
.minecraft-image {
float: none;
display: block;
margin: 0 auto 1rem auto;
}
}
}
.support {
margin: 0;
border-radius: 0;
}
} }
} }
// .subscribe { @media only screen and (max-width: 640px) {
// margin: 6rem auto 0 auto; .page-home {
// align-self: center; .about {
padding: 0 32px 32px 32px;
// h2 { h2 {
// font-size: 200%; font-size: 300%;
// } }
// p { p {
// text-align: center; font-size: 100%;
// font-size: 120%; line-height: 1.5em;
// line-height: 140%; }
// margin: 1rem auto; }
// }
// .form-row { .workshops,
// background-color: #eee; .support,
// border-radius: 24px; .minecraft,
// padding: 2rem; .subscribe {
// display: flex; padding: 32px 32px 32px 32px;
// flex-direction: column;
// width: 100%;
// max-width: 600px;
// margin: 1rem auto;
// }
// }
// }
// @media only screen and (max-width: 1024px) { h2 {
// .sm-page-home { font-size: 200%;
// .about { }
// padding: 4rem;
// }
// .support { p {
// padding: 4rem; font-size: 100%;
// } }
// } }
// } }
}
// @media only screen and (max-width: 896px) {
// .sm-page-home {
// .support {
// .row {
// flex-direction: column;
// }
// }
// }
// }
// @media only screen and (max-width: 768px) {
// .sm-page-home {
// .about {
// margin-top: 2rem;
// margin-left: 0;
// margin-right: 0;
// border-radius: 0;
// }
// .workshops {
// margin-top: 4rem;
// margin-bottom: 4rem;
// }
// .support {
// margin-left: 0;
// margin-right: 0;
// border-radius: 0;
// }
// .minecraft {
// margin-top: 0;
// padding-left: 1rem;
// padding-right: 1rem;
// .minecraft-education {
// text-align: center;
// .minecraft-image {
// float: none;
// display: block;
// margin: 0 auto 1rem auto;
// }
// }
// }
// }
// }
// @media only screen and (max-width: 640px) {
// .sm-page-home {
// .about {
// padding: 2rem;
// h2 {
// font-size: 300%;
// }
// p {
// font-size: 100%;
// line-height: 150%;
// }
// }
// .workshops,
// .support,
// .minecraft,
// .subscribe {
// padding: 2rem;
// h2 {
// font-size: 200%;
// }
// p {
// font-size: 100%;
// }
// }
// }
// }
</style> </style>