Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

Chore: grid on features page

Browse source
This commit is contained in:
Aron Malcher 2023-11-16 12:49:01 +01:00
parent 729ff7168a
commit 5ac4ec0419
Signed by: aronmal
GPG key ID: 816B7707426FC612
8 changed files with 130 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/ImageSection.astro
View file

@ -1,17 +1,24 @@
--- ---
interface SectionProps { interface Props {
imgUrl: string; imgUrl: string;
imgAlt: string; imgAlt: string;
title: string; title: string;
description: string; description: string;
note: string; note: string;
centered?: boolean;
} }
const { imgUrl, imgAlt, title, description, note } = Astro.props; const {
import '../styles/components/ImageSection.scss' imgUrl,
imgAlt,
title,
description,
note,
centered = false,
} = Astro.props;
import "../styles/components/ImageSection.scss";
--- ---
<section class="ImageSection"> <section class:list={["ImageSection", { centered }]}>
<div class="content">
<h1>{title}</h1> <h1>{title}</h1>
<div class="imgDiv"> <div class="imgDiv">
<img src={imgUrl} alt={imgAlt} /> <img src={imgUrl} alt={imgAlt} />
@ -20,5 +27,4 @@ import '../styles/components/ImageSection.scss'
<div> <div>
<p>{note}</p> <p>{note}</p>
</div> </div>
</div>
</section> </section>

6
src/layouts/Layout.astro
View file

@ -1,8 +1,8 @@
--- ---
import Footer from "@components/Footer.astro"; import Footer from "@components/Footer.astro";
import NavBar from "@components/NavBar.astro"; import NavBar from "@components/NavBar.astro";
import '../styles/Layout.scss'; import "../styles/Layout.scss";
import '../styles/GlobalLayout.css' import "../styles/GlobalLayout.css";
--- ---
<!doctype html> <!doctype html>
@ -20,9 +20,7 @@ import '../styles/GlobalLayout.css'
</head> </head>
<body> <body>
<NavBar /> <NavBar />
<div class="content-div">
<slot /> <slot />
</div>
<Footer /> <Footer />
</body> </body>
</html> </html>

27
src/pages/features.astro
View file

@ -1,14 +1,13 @@
--- ---
import ImageSection from "@components/ImageSection.astro"; import ImageSection from "@components/ImageSection.astro";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import '../styles/pages/features.scss' import "../styles/pages/features.scss";
--- ---
<Layout> <Layout>
<div class="container"> <div class="container">
<h1 class="title">Features</h1> <h1 class="title">Features</h1>
<div class="gridlayout"> <div class="gridlayout">
<div >
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/timeplanner.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/timeplanner.png"
imgAlt="Screenshot of the time planning feature of li'l Judd" imgAlt="Screenshot of the time planning feature of li'l Judd"
@ -16,17 +15,6 @@ import '../styles/pages/features.scss'
description="Helps you to see on which days your fellow team mates are available." description="Helps you to see on which days your fellow team mates are available."
note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day." note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day."
/> />
</div>
<div >
<ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
imgAlt="Screenshot of the notification feature of li'l Judd"
title="Notifications"
description="Make sure that you and your team members remember to vote in the Time Planner."
note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people."
/>
</div>
<div>
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
imgAlt="Screenshot of the match planning feature of li'l Judd" imgAlt="Screenshot of the match planning feature of li'l Judd"
@ -34,8 +22,13 @@ import '../styles/pages/features.scss'
description="Make sure that you know when your next match is and who will participate." description="Make sure that you know when your next match is and who will participate."
note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started." note="The bot can send these planning messages, when the command /match is used. Members can click the buttons on each message to communicate, if they will participate in the match. Participating members will get a role until the match has started."
/> />
</div> <ImageSection
<div> imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
imgAlt="Screenshot of the notification feature of li'l Judd"
title="Notifications"
description="Make sure that you and your team members remember to vote in the Time Planner."
note="The bot can add roles. The first one gets pinged, when the time planner sends the messages, the other one gets assigned to the available members of the day, so that it is possible to ping all available people."
/>
<ImageSection <ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
imgAlt="Screenshot of the current x map rotation in li'l Judd's status" imgAlt="Screenshot of the current x map rotation in li'l Judd's status"
@ -43,10 +36,8 @@ import '../styles/pages/features.scss'
description="Li'l Judd can show you the current map rotation in his status." description="Li'l Judd can show you the current map rotation in his status."
note="The bot cycles through the current map and mode rotation. It updates every few seconds." note="The bot cycles through the current map and mode rotation. It updates every few seconds."
/> />
</div>
</div>
<div class="centered">
<ImageSection <ImageSection
centered
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png" imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png"
imgAlt="A Question Mark" imgAlt="A Question Mark"
title="More to come.." title="More to come.."

4
src/styles/GlobalLayout.css
View file

@ -2,7 +2,8 @@
font-family: "Splatoon"; font-family: "Splatoon";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url("/assets/fonts/Splatoon2-common.woff2") format("woff2"), src:
url("/assets/fonts/Splatoon2-common.woff2") format("woff2"),
url("/assets/fonts/Splatoon2-common.woff") format("woff"); url("/assets/fonts/Splatoon2-common.woff") format("woff");
} }
@ -52,4 +53,3 @@ a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }

6
src/styles/components/Footer.scss
View file

@ -75,13 +75,13 @@ footer {
font-size: 0.65rem; font-size: 0.65rem;
a { a {
transition: .5s; transition: 0.5s;
}
a:hover { &:hover {
color: rgb(96 59 255) !important; color: rgb(96 59 255) !important;
} }
} }
}
@media (min-width: 768px) { @media (min-width: 768px) {
display: grid; display: grid;

24
src/styles/components/ImageSection.scss
View file

@ -1,32 +1,38 @@
.ImageSection { .ImageSection {
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: 100vw;
max-height: 550px;
//height: 550px;
width: 550px;
position: relative; position: relative;
background-size: contain; background-size: contain;
background-color: rgba(183, 183, 183, 0.4); background-color: rgba(183, 183, 183, 0.4);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"), linear-gradient(180deg,rgba(2,0,36,.1) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 100%); background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/tapes-bg.png"),
linear-gradient(
180deg,
rgba(2, 0, 36, 0.1) 0%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0.25) 100%
);
margin: 1rem;
padding: 1rem; padding: 1rem;
.content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around;
&.centered {
grid-column: 1/-1;
width: 50%;
justify-self: center;
} }
.imgDiv { .imgDiv {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
padding: 0.5rem 0.5rem 0; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
display: flex; display: flex;

25
src/styles/pages/features.scss
View file

@ -9,33 +9,16 @@
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }
.centered {
display: flex;
flex-direction: column;
align-items: center;
}
.gridlayout { .gridlayout {
display: grid;
grid-template-columns: 550px;
align-content: center;
padding: 1rem; padding: 1rem;
} }
.gridlayout div {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
}
@media (min-width: 1100px) { @media (min-width: 1100px) {
.gridlayout { .gridlayout {
display: grid; grid-template-columns: repeat(2, 550px);
grid-template-columns: repeat(2, 1fr);
align-items: center;
div {
grid-column: span 1;
margin: 1rem;
} }
} }
} }

19
src/styles/pages/index.scss
View file

@ -3,20 +3,20 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
}
.section h1 { h1 {
font-size: 4rem; font-size: 4rem;
} }
.section h5 { h5 {
font-size: 1.5rem; font-size: 1.5rem;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.section div { div {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
}
.p1 { .p1 {
font-size: 1rem; font-size: 1rem;
@ -24,15 +24,14 @@
.p2 { .p2 {
font-size: 0.8rem; font-size: 0.8rem;
} a {
.p2 a {
font-weight: bolder; font-weight: bolder;
text-decoration: underline; text-decoration: underline;
font-size: 0.9rem; font-size: 0.9rem;
transition: .5s; transition: 0.5s;
}
.p2 a:hover { &:hover {
color: rgb(96 59 255) !important; color: rgb(96 59 255) !important;
} }
}
}