cleanup
This commit is contained in:
@@ -1,49 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<SMHero />
|
<SMHero class="hero-offset" />
|
||||||
|
|
||||||
<section class="container">
|
|
||||||
<h2>Latest Articles</h2>
|
|
||||||
<div class="d-flex" style="gap: 30px">
|
|
||||||
<SMArticleCard
|
|
||||||
:image="articles[0].hero.url"
|
|
||||||
:title="articles[0].title"
|
|
||||||
:excerpt="excerpt(articles[0].content)"
|
|
||||||
:to="{
|
|
||||||
name: 'article',
|
|
||||||
params: { slug: articles[0].slug },
|
|
||||||
}"
|
|
||||||
class="flex-fill"></SMArticleCard>
|
|
||||||
<div class="article-list">
|
|
||||||
<SMArticleCard
|
|
||||||
:image="articles[1].hero.url"
|
|
||||||
:title="articles[1].title"
|
|
||||||
:excerpt="excerpt(articles[1].content)"
|
|
||||||
type="row"
|
|
||||||
:to="{
|
|
||||||
name: 'article',
|
|
||||||
params: { slug: articles[1].slug },
|
|
||||||
}"></SMArticleCard>
|
|
||||||
<SMArticleCard
|
|
||||||
:image="articles[2].hero.url"
|
|
||||||
:title="articles[2].title"
|
|
||||||
:excerpt="excerpt(articles[2].content)"
|
|
||||||
type="row"
|
|
||||||
:to="{
|
|
||||||
name: 'article',
|
|
||||||
params: { slug: articles[2].slug },
|
|
||||||
}"></SMArticleCard>
|
|
||||||
<SMArticleCard
|
|
||||||
:image="articles[3].hero.url"
|
|
||||||
:title="articles[3].title"
|
|
||||||
:excerpt="excerpt(articles[3].content)"
|
|
||||||
type="row"
|
|
||||||
:to="{
|
|
||||||
name: 'article',
|
|
||||||
params: { slug: articles[3].slug },
|
|
||||||
}"></SMArticleCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<SMContainer class="about">
|
<SMContainer class="about">
|
||||||
<h2>Join the Fun!</h2>
|
<h2>Join the Fun!</h2>
|
||||||
@@ -97,10 +53,10 @@
|
|||||||
undertake at home. We are always happy to help.
|
undertake at home. We are always happy to help.
|
||||||
</p>
|
</p>
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<a href="https://discord.gg/yNzk4x7mpD">Join Discord</a>
|
<SMButton
|
||||||
<router-link :to="{ name: 'contact' }"
|
to="https://discord.gg/yNzk4x7mpD"
|
||||||
>Contact Us</router-link
|
label="Join Discord" />
|
||||||
>
|
<SMButton :to="{ name: 'contact' }" label="Contact Us" />
|
||||||
</div>
|
</div>
|
||||||
</SMColumn>
|
</SMColumn>
|
||||||
</SMRow>
|
</SMRow>
|
||||||
@@ -135,63 +91,18 @@
|
|||||||
</p>
|
</p>
|
||||||
</SMContainer>
|
</SMContainer>
|
||||||
</SMContainer>
|
</SMContainer>
|
||||||
<SMContainer class="subscribe">
|
|
||||||
<h2>Be the first to know</h2>
|
|
||||||
<p>
|
|
||||||
Sign up for our mailing list to receive expert tips and tricks, as
|
|
||||||
well as updates on upcoming workshops.
|
|
||||||
</p>
|
|
||||||
</SMContainer>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, reactive, ref } from "vue";
|
|
||||||
import { useReCaptcha } from "vue-recaptcha-v3";
|
|
||||||
import SMButton from "../components/SMButton.vue";
|
import SMButton from "../components/SMButton.vue";
|
||||||
import SMFormCard from "../components/SMFormCard.vue";
|
|
||||||
import SMForm from "../components/SMForm.vue";
|
|
||||||
import SMInput from "../depreciated/SMInput-old.vue";
|
|
||||||
import SMHero from "../components/SMHero.vue";
|
import SMHero from "../components/SMHero.vue";
|
||||||
|
|
||||||
import { excerpt } from "../helpers/string";
|
|
||||||
import { api } from "../helpers/api";
|
|
||||||
import { Form, FormControl } from "../helpers/form";
|
|
||||||
import { And, Email, Required } from "../helpers/validate";
|
|
||||||
import { Article } from "../helpers/api.types";
|
|
||||||
import SMArticleCard from "../components/SMArticleCard.vue";
|
|
||||||
|
|
||||||
const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
|
|
||||||
let form = reactive(
|
|
||||||
Form({
|
|
||||||
email: FormControl("", And([Required(), Email()])),
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const articles: Ref<Article[]> = ref([]);
|
|
||||||
|
|
||||||
const handleLoad = async () => {
|
|
||||||
const result = await api.get({
|
|
||||||
url: "/posts",
|
|
||||||
params: {
|
|
||||||
limit: 4,
|
|
||||||
after: 1, // is this working???
|
|
||||||
// order: "-date",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
articles.value = result.data.posts;
|
|
||||||
};
|
|
||||||
|
|
||||||
handleLoad();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.article-list {
|
.hero-offset {
|
||||||
flex: 1;
|
margin-top: -80px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// .sm-page-home {
|
// .sm-page-home {
|
||||||
// margin-top: -127px !important;
|
// margin-top: -127px !important;
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
@@ -202,139 +113,139 @@ handleLoad();
|
|||||||
// margin: 0;
|
// margin: 0;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .about {
|
.about {
|
||||||
// margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
// margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
// margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
// background-color: #3d4e5d;
|
background-color: #3d4e5d;
|
||||||
// color: rgb(230, 245, 235);
|
color: rgb(230, 245, 235);
|
||||||
// border-radius: 24px;
|
border-radius: 24px;
|
||||||
// padding: 4rem 8rem;
|
padding: 4rem 8rem;
|
||||||
// width: auto;
|
width: auto;
|
||||||
// align-self: center;
|
align-self: center;
|
||||||
|
|
||||||
// h2 {
|
h2 {
|
||||||
// font-size: 400%;
|
font-size: 400%;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// p {
|
p {
|
||||||
// font-size: 125%;
|
font-size: 125%;
|
||||||
// line-height: 150%;
|
line-height: 150%;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .workshops {
|
.workshops {
|
||||||
// margin: 8rem auto;
|
margin: 8rem auto;
|
||||||
// align-self: center;
|
align-self: center;
|
||||||
|
|
||||||
// h2 {
|
h2 {
|
||||||
// font-size: 300%;
|
font-size: 300%;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// p {
|
p {
|
||||||
// font-size: 125%;
|
font-size: 125%;
|
||||||
// line-height: 150%;
|
line-height: 150%;
|
||||||
// max-width: 32rem;
|
max-width: 32rem;
|
||||||
// text-align: center;
|
text-align: center;
|
||||||
// margin: 1rem auto 2rem auto;
|
margin: 1rem auto 2rem auto;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// img {
|
img {
|
||||||
// border-radius: 50rem;
|
border-radius: 50rem;
|
||||||
// height: 20rem;
|
height: 20rem;
|
||||||
// width: 20rem;
|
width: 20rem;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .support {
|
.support {
|
||||||
// background-color: #e6f5eb;
|
background-color: #e6f5eb;
|
||||||
// color: rgb(56, 79, 95);
|
color: rgb(56, 79, 95);
|
||||||
// border-radius: 24px;
|
border-radius: 24px;
|
||||||
// padding: 4rem 5rem;
|
padding: 4rem 5rem;
|
||||||
// margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
// margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
// width: auto;
|
width: auto;
|
||||||
// align-self: center;
|
align-self: center;
|
||||||
|
|
||||||
// img {
|
img {
|
||||||
// border-radius: 24px;
|
border-radius: 24px;
|
||||||
// height: 80%;
|
height: 80%;
|
||||||
// width: 80%;
|
width: 80%;
|
||||||
// transform: rotateZ(-10deg);
|
transform: rotateZ(-10deg);
|
||||||
// }
|
}
|
||||||
|
|
||||||
// h2 {
|
h2 {
|
||||||
// font-size: 300%;
|
font-size: 300%;
|
||||||
// text-align: left;
|
text-align: left;
|
||||||
// text-align: center;
|
text-align: center;
|
||||||
// margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// p {
|
p {
|
||||||
// font-size: 125%;
|
font-size: 125%;
|
||||||
// line-height: 150%;
|
line-height: 150%;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .button-row {
|
.button-row {
|
||||||
// display: flex;
|
display: flex;
|
||||||
// justify-content: space-between;
|
justify-content: space-between;
|
||||||
// width: 100%;
|
width: 100%;
|
||||||
// margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
||||||
// a {
|
a {
|
||||||
// font-weight: bold;
|
font-weight: bold;
|
||||||
// color: inherit;
|
color: inherit;
|
||||||
// border: 2px solid rgb(56, 79, 95);
|
border: 2px solid rgb(56, 79, 95);
|
||||||
// border-radius: 24px;
|
border-radius: 24px;
|
||||||
// padding: 0.5rem 1.5rem;
|
padding: 0.5rem 1.5rem;
|
||||||
// transition: color 0.2s ease-in-out, border 0.2s ease-in-out,
|
transition: color 0.2s ease-in-out, border 0.2s ease-in-out,
|
||||||
// background 0.2s ease-in-out;
|
background 0.2s ease-in-out;
|
||||||
|
|
||||||
// &:hover {
|
&:hover {
|
||||||
// text-decoration: none;
|
text-decoration: none;
|
||||||
// background-color: rgb(56, 79, 95);
|
background-color: rgb(56, 79, 95);
|
||||||
// color: #e6f5eb;
|
color: #e6f5eb;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .minecraft {
|
.minecraft {
|
||||||
// margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
// background-image: url("/img/minecraft.png");
|
background-image: url("/img/minecraft.png");
|
||||||
// background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
// background-position: center;
|
background-position: center;
|
||||||
// background-size: cover;
|
background-size: cover;
|
||||||
// padding: 4rem;
|
padding: 4rem;
|
||||||
// color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
// h2 {
|
h2 {
|
||||||
// font-size: 300%;
|
font-size: 300%;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// p {
|
p {
|
||||||
// font-size: 125%;
|
font-size: 125%;
|
||||||
// line-height: 150%;
|
line-height: 150%;
|
||||||
// text-align: center;
|
text-align: center;
|
||||||
// max-width: 44rem;
|
max-width: 44rem;
|
||||||
// margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .minecraft-education {
|
.minecraft-education {
|
||||||
// text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
// .minecraft-image {
|
.minecraft-image {
|
||||||
// float: left;
|
float: left;
|
||||||
// margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
// margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .minecraft-address {
|
.minecraft-address {
|
||||||
// width: 100%;
|
width: 100%;
|
||||||
// height: 100%;
|
height: 100%;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// .subscribe {
|
// .subscribe {
|
||||||
// margin: 6rem auto 0 auto;
|
// margin: 6rem auto 0 auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user