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

inner container items

Browse Source
This commit is contained in:
James Collins
2023-04-18 13:52:28 +10:00
parent f7da2c8185
commit b4c97c20d6
1 changed files with 72 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,42 +2,48 @@
<SMHero class="hero-offset" /> <SMHero class="hero-offset" />
<SMContainer class="about"> <SMContainer class="about">
<h2>Join the Fun!</h2> <template #inner>
<p></p> <h2>Join the Fun!</h2>
<p> <p></p>
To meet the demands of a constantly evolving world, it is essential <p>
to nurture a new generation of scientists, engineers, and leaders To meet the demands of a constantly evolving world, it is
who are skilled in problem-solving. Science and technology offer essential to nurture a new generation of scientists, engineers,
endless possibilities for innovation and progress, and it is through and leaders who are skilled in problem-solving. Science and
STEM education that we can equip the next generation with the tools technology offer endless possibilities for innovation and
they need to tackle these challenges. progress, and it is through STEM education that we can equip the
</p> next generation with the tools they need to tackle these
<p> challenges.
STEMMechanics is a family-run business that is committed to </p>
providing accessible and inclusive STEM education to all. We offer a <p>
wide range of STEM courses, after-school clubs, and themed workshops STEMMechanics is a family-run business that is committed to
across Queensland, both to the general public and to private groups. providing accessible and inclusive STEM education to all. We
</p> offer a wide range of STEM courses, after-school clubs, and
themed workshops across Queensland, both to the general public
and to private groups.
</p>
</template>
</SMContainer> </SMContainer>
<SMContainer class="workshops"> <SMContainer class="workshops">
<SMRow> <template #inner>
<SMColumn class="align-items-center flex-basis-55"> <SMRow>
<h2>Build skills while having a great time</h2> <SMColumn class="align-items-center flex-basis-55">
<p> <h2>Build skills while having a great time</h2>
Our online and in-person workshops are filled with engaging <p>
and exciting activities that kids will love. They will have Our online and in-person workshops are filled with
fun, make new friends, and gain valuable skills that they engaging and exciting activities that kids will love.
can use throughout their lives. They will have fun, make new friends, and gain valuable
</p> skills that they can use throughout their lives.
<SMButton </p>
:to="{ name: 'workshops' }" <SMButton
label="Explore Workshops" /> :to="{ name: 'workshops' }"
</SMColumn> label="Explore Workshops" />
<SMColumn </SMColumn>
class="align-items-center justify-content-center flex-basis-45"> <SMColumn
<img src="/img/green-screen.jpg" /> class="align-items-center justify-content-center flex-basis-45">
</SMColumn> <img src="/img/green-screen.jpg" />
</SMRow> </SMColumn>
</SMRow>
</template>
</SMContainer> </SMContainer>
<SMContainer full class="minecraft"> <SMContainer full class="minecraft">
<SMContainer> <SMContainer>
@@ -70,27 +76,32 @@
</SMContainer> </SMContainer>
</SMContainer> </SMContainer>
<SMContainer class="support"> <SMContainer class="support">
<h2>And the support doesn't stop!</h2> <template #inner>
<SMRow> <h2>And the support doesn't stop!</h2>
<SMColumn <SMRow>
class="align-items-center justify-content-center flex-basis-45"> <SMColumn
<img src="/img/discord.jpg" /> class="align-items-center justify-content-center flex-basis-45">
</SMColumn> <img src="/img/discord.jpg" />
<SMColumn class="align-items-center flex-basis-55"> </SMColumn>
<p> <SMColumn class="align-items-center flex-basis-55">
Though the workshop has come to a close, we remain available <p>
to assist you via email and Discord with any projects you Though the workshop has come to a close, we remain
undertake at home. We are always happy to help. available to assist you via email and Discord with any
</p> projects you undertake at home. We are always happy to
<div class="button-row"> help.
<SMButton </p>
type="primary" <div class="button-row">
to="https://discord.gg/yNzk4x7mpD" <SMButton
label="Join Discord" /> type="primary"
<SMButton :to="{ name: 'contact' }" label="Contact Us" /> to="https://discord.gg/yNzk4x7mpD"
</div> label="Join Discord" />
</SMColumn> <SMButton
</SMRow> :to="{ name: 'contact' }"
label="Contact Us" />
</div>
</SMColumn>
</SMRow>
</template>
</SMContainer> </SMContainer>
</template> </template>
@@ -105,13 +116,13 @@ import SMHero from "../components/SMHero.vue";
margin-top: -80px; margin-top: -80px;
} }
.about { .about .container-inner {
margin: 64px 32px 32px; margin: 64px 32px 32px;
padding: 0 90px 64px 90px; padding: 0 90px 64px 90px;
background-color: var(--accent-1-color); background-color: var(--accent-1-color);
color: var(--accent-1-color-text); color: var(--accent-1-color-text);
border-radius: 24px; border-radius: 24px;
width: auto; max-width: 960px;
h2 { h2 {
font-size: 400%; font-size: 400%;
@@ -124,9 +135,9 @@ import SMHero from "../components/SMHero.vue";
} }
} }
.workshops { .workshops .container-inner {
margin: 64px 24px; margin: 64px 24px;
width: auto; max-width: 960px;
h2 { h2 {
font-size: 300%; font-size: 300%;
@@ -189,13 +200,13 @@ import SMHero from "../components/SMHero.vue";
} }
} }
.support { .support .container-inner {
margin: 64px 32px 32px; margin: 64px 32px 32px;
padding: 0 90px 64px 90px; padding: 0 90px 64px 90px;
color: var(--accent-2-color-text); color: var(--accent-2-color-text);
background-color: var(--accent-2-color); background-color: var(--accent-2-color);
border-radius: 24px; border-radius: 24px;
width: auto; max-width: 960px;
img { img {
border-radius: 24px; border-radius: 24px;