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

WIP: improved css all around, started fixing features page

Browse source
This commit is contained in:
moonleay 2023-12-04 14:45:07 +01:00
parent ffa150d952
commit 4e41363ec9
Signed by: moonleay
GPG key ID: 82667543CCD715FB
13 changed files with 265 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Footer.astro
View file

@ -27,23 +27,23 @@ import '../styles/components/Footer.scss'
<h3>The Software</h3>
<div class="footerLinks">
<a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank"
>The code of the bot</a
>The code of the bot <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
>
<a
href="https://git.moonleay.net/Websites/liljudd-website"
target="_blank">The code of the website</a
target="_blank">The code of the website <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
>
<a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list</a>
<a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="/acknowledgements" target="_self">Acknowledgements</a>
</div>
</div>
<div>
<h3>More</h3>
<div class="footerLinks">
<a href="https://moonleay.net/" target="_self">My homepage</a>
<a href="https://moonleay.net/blog/" target="_blank">My blog</a>
<a href="https://moonleay.net/" target="_self">My homepage <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="https://moonleay.net/blog/" target="_blank">My blog <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
<a href="/contact" target="_self">Contact me</a>
<a href="https://status.moonleay.net/" target="_blank">Server Status</a>
<a href="https://status.moonleay.net/" target="_blank">Server Status <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a>
</div>
</div>
<div>
@ -54,7 +54,7 @@ import '../styles/components/Footer.scss'
<a href="/terms-of-service" target="_self">Terms of Service</a>
<a
href="https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE"
target="_blank">The license</a
target="_blank">The license <img src="https://static.moonleay.net/img/lilJuddWeb/logos/external.svg" alt="external link"/></a
>
</div>
</div>

22
src/components/ImageSection.astro
View file

@ -5,6 +5,7 @@ interface Props {
title: string;
description: string;
note: string;
idnr: number;
centered?: boolean;
}
const {
@ -13,20 +14,19 @@ const {
title,
description,
note,
idnr,
centered = false,
} = Astro.props;
import "../styles/components/ImageSection.scss";
---
<section class:list={["ImageSection", { centered }]}>
<div class="firstHalf">
<h1>{title}</h1>
<div class="imgDiv">
<img src={imgUrl} alt={imgAlt} />
<p>{description}</p>
</div>
</div>
<div class="noteP">
<p>{note}</p>
</div>
<section style={{"--id":idnr}} class:list={["ImageSection", { centered }]}>
</section>
<h1 style={{"--id":idnr}}>{title}</h1>
<div style={{"--id":idnr}} class="imgDiv">
<img src={imgUrl} alt={imgAlt} />
<p>{description}</p>
</div>
<div style={{"--id":idnr}} class="noteP">
<p>{note}</p>
</div>

109
src/pages/about.astro
View file

@ -1,62 +1,67 @@
---
import Layout from "@layouts/Layout.astro";
import "../styles/pages/about.scss";
---
<Layout>
<section>
<h1>Why does this bot exist?</h1>
<p>
We had a person in our team, who sent <a
href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
>these planning messages</a
<h1>About</h1>
<div class="aboutdiv">
<section>
<h2>Why does this bot exist?</h2>
<p>
We had a person in our team, who sent <a
href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png"
target="_blank"
>these planning messages</a
> and I thought that this should be automated. Some time later the first
version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is
designed to actually improve the Splatoon experience and not be the
10000th moderation and general utility bot with the same features as all
bots.
</p>
</section>
<section>
<h1>Who is behind this?</h1>
<p>
The bot is currently being developed by <a
href="https://discord.com/users/372703841151614976"
target="_blank">moonleay</a
version of li'l Judd was born. Today the bot has more features and keeps getting more of them! It is
designed to actually improve the Splatoon experience and not be the
10000th moderation and general utility bot with the same features as all
bots.
</p>
</section>
<section>
<h2>Who is behind this?</h2>
<p>
The bot is currently being developed by <a
href="/contact"
target="_self">moonleay</a
> (hey that&apos;s me!) with occasional help from his friends!
</p>
</section>
<section>
<h1>How can I trust you, that you will not abuse your access?</h1>
<p>
The bot only requests permissions, which are needed for it to work. Additionally,
if you want to check how the bot works under the hood, you can
<a href="https://git.moonleay.net/DiscordBots/lilJudd">read the code</a>
and if you still don't trust me, you can always host the bot yourself!
A guide on how to do that can be found in the README of the git project.
</p>
</section>
<section>
<h1>Where is my data stored?</h1>
<p>
Your data is stored in a VPS from Contabo in Germany, Bavaria. The bot used to be hosted on a server in my basement,
</p>
</section>
<section>
<h2>How can I trust you </h2>
<p>
The bot only requests permissions, which are needed for it to work. Additionally,
if you want to check how the bot works under the hood, you can
<a href="https://git.moonleay.net/DiscordBots/lilJudd">read the code</a>
and if you still don't trust me, you can always host the bot yourself!
A guide on how to do that can be found in the README of the git project.
</p>
</section>
<section>
<h2>Where is my data stored?</h2>
<p>
Your data is stored in a VPS from Contabo in Germany. The bot used to be hosted on a server in my basement,
but I moved it to a VPS, because my internet connection was not stable enough.
</p>
</section>
<section>
<h1>So whats in the future?</h1>
<p>
I plan on adding features, which are aimed to improve your and your teams
competitive experience! You can check out my public todo list <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">here</a>.
</p>
</section>
<section>
<h1>Hey, there is this really cool idea I have! Can you add it?</h1>
<p>
Just message me! I can't promise anything, but I am always open to new
ideas and improvements! You can find ways to contact me <a
href="/contact"
target="_blank">here</a
</p>
</section>
<section>
<h2>So whats in the future?</h2>
<p>
I plan on adding features, which are aimed to improve your and your teams
competitive experience! You can check out my public todo list <a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">here</a>.
</p>
</section>
<section>
<h2>Hey, there is this really cool idea I have! Can you add it?</h2>
<p>
Just message me! I can't promise anything, but I am always open to new
ideas and improvements! You can find ways to contact me <a
href="/contact"
target="_self">here</a
>.
</p>
</section>
</p>
</section>
</div>
</Layout>

21
src/pages/contact.astro
View file

@ -1,15 +1,20 @@
---
import Layout from "@layouts/Layout.astro";
import "../styles/pages/contact.scss";
---
<Layout>
<section>
<div class="wrapper">
<h1>Contact</h1>
<p>
EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a>
</p>
<p>
Discord: <a>@moonleay</a>
</p>
</section>
<section class="contact">
<a href="mailto:contact@moonleay.net" target="_blank">
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/email.svg" alt="Email"/>
contact@moonleay.net
</a>
<a href="https://discord.com/users/372703841151614976" target="_blank">
<img src="https://static.moonleay.net/img/lilJuddWeb/logos/discord.svg" alt="Discord"/>
@moonleay
</a>
</section>
</div>
</Layout>

5
src/pages/features.astro
View file

@ -14,6 +14,7 @@ import "../styles/pages/features.scss";
title="Time Planning and Management"
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."
idnr={1}
/>
<ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/matchplanner.png"
@ -21,6 +22,7 @@ import "../styles/pages/features.scss";
title="Match Planner"
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."
idnr={2}
/>
<ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/notifs.png"
@ -28,6 +30,7 @@ import "../styles/pages/features.scss";
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."
idnr={3}
/>
<ImageSection
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/rotationstatus.png"
@ -35,6 +38,7 @@ import "../styles/pages/features.scss";
title="Rotation 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."
idnr={4}
/>
<ImageSection
centered
@ -43,6 +47,7 @@ import "../styles/pages/features.scss";
title="More to come.."
description="The bot is still in development. More features will be added."
note="If you have a specific feature request, you can contact me on Discord: @moonleay or email: contact at moonleay dot net"
idnr={5}
/>
</div>
</div>

2
src/pages/how-do-i.astro
View file

@ -33,6 +33,6 @@ import "../styles/pages/how-do-i.scss";
</div>
</section>
<section class="footernotesection">
<p>Is something missing here? Please contact me!</p>
<p>Is something missing here? Please <a href="/contact" target="_self">contact me</a>!</p>
</section>
</Layout>

45
src/pages/stack.astro
View file

@ -6,51 +6,42 @@ import "../styles/pages/stack.scss"
<Layout>
<h1 class="title">The Stack</h1>
<section class="stacksection">
<div class="stackgrid_1 stackitm">
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
alt="Kotlin 'K' logo"
/>
</div>
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
alt="Kotlin 'K' logo"
/>
<div class="stackgrid_3 stackitm">
<h1>The Kotlin programming language</h1>
<p>
I chose this programming language because it is my main one. There is
nothing more to that.
A programming language, which runs in the JVM. Also my main language.
</p>
</div>
</section>
<section class="stacksection">
<div class="stackgrid_1 stackitm">
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
alt="The Kord logo"
/>
</div>
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
alt="The Kord logo"
/>
<div class="stackgrid_3 stackitm">
<h1>The Kord library</h1>
<p>A Kotlin library for creating Discord bots. Pretty bare bones.</p>
</div>
</section>
<section class="stacksection">
<div class="stackgrid_1 stackitm">
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
alt="The Kord-Extensions logo"
/>
</div>
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
alt="The Kord-Extensions logo"
/>
<div class="stackgrid_3 stackitm">
<h1>The Kord Extensions library</h1>
<p>A Kotlin library to improve the Kord experience.</p>
</div>
</section>
<section class="stacksection">
<div class="stackgrid_1 stackitm">
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
alt="The PostgreSQL elephant"
/>
</div>
<img
src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
alt="The PostgreSQL elephant"
/>
<div class="stackgrid_3 stackitm">
<h1>The PostgreSQL database</h1>
<p>
@ -61,7 +52,7 @@ import "../styles/pages/stack.scss"
</section>
<section class="stacknote">
<p>
To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
To view all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
</p>
</section>
</Layout>

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

@ -29,6 +29,13 @@ footer {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
div {
img {
margin: auto;
max-width: 0.5rem;
}
}
h3 {
margin-bottom: 8px;
}

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

@ -1,6 +1,10 @@
.ImageSection {
border-radius: 0.5rem;
width: 100%;
grid-row: var(--id)/calc(var(--id) + 2);
grid-row: var(--id)/calc(var(--id) + 2);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
@media (max-width: 1100px) {
max-width: 80vw;
}
@ -9,15 +13,6 @@
background-size: contain;
background-color: rgba(0, 0, 0, 0.5);
//background-color: rgba(183, 183, 183, 0.5);
//backdrop-filter: blur(5px);
//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%
// );
&.centered {
grid-column: 1/-1;
@ -25,54 +20,56 @@
justify-self: center;
}
.firstHalf {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
h1 {
z-index: 1;
grid-row: var(--id)/calc(var(--id) + 1);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
}
.imgDiv {
z-index: 1;
grid-row: calc(var(--id) + 1)/calc(var(--id) + 2);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
padding: 0.5rem;
margin-left: 3rem;
margin-right: 3rem;
border-radius: 0.5rem;
.imgDiv {
//background-color: rgba(0, 0, 0, 0.4);
//backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
margin-left: 3rem;
margin-right: 3rem;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
img {
border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
p {
padding-top: 2px;
font-size: 0.8rem;
text-align: center;
}
}
img {
border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
.noteP {
line-height: 1.5;
vertical-align: middle;
margin: auto;
font-size: 1rem;
p {
padding-top: 2px;
font-size: 0.8rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
p {
margin: auto;
padding: 2rem;
}
}
}
.noteP {
z-index: 1;
grid-row: calc(var(--id) + 2)/calc(var(--id) + 3);
grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1);
line-height: 1.5;
vertical-align: middle;
margin: auto;
font-size: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
p {
margin: auto;
padding: 2rem;
}
}

30
src/styles/pages/about.scss Normal file
View file

@ -0,0 +1,30 @@
h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
.aboutdiv {
section {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
}
h2 {
font-size: 1.5rem;
}
a {
color: white;
text-decoration: underline;
font-size: 0.9rem;
transition: 0.5s;
&:hover {
color: rgb(96 59 255) !important;
}
}
}

23
src/styles/pages/contact.scss Normal file
View file

@ -0,0 +1,23 @@
.wrapper {
margin: 0;
h1 {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
text-align: center;
.contact {
display: flex;
flex-direction: column;
align-items: center;
a {
display: flex;
align-items: center;
img {
margin: 0 5px;
}
}
}
}

21
src/styles/pages/how-do-i.scss
View file

@ -26,7 +26,7 @@
img {
display: flex;
border-radius: 5px;
max-width: 90%;
max-width: 100%;
}
p, code {
@ -36,3 +36,22 @@
}
}
.footernotesection {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
text-align: center;
a {
color: white;
text-decoration: underline;
font-size: 0.9rem;
transition: 0.5s;
&:hover {
color: rgb(96 59 255) !important;
}
}
}

42
src/styles/pages/stack.scss
View file

@ -8,33 +8,31 @@
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
padding: 1.5rem;
display: block;
@media (min-width: 800px) {
display: grid;
grid-template-columns: repeat(4, 1fr);
@media (min-width: 950px) {
max-width: 900px;
margin: 1rem auto;
display: flex;
width: 100%;
justify-content: space-between;
//display: grid;
//grid-template-columns: repeat(4, 1fr);
}
.stackgrid_1 {
grid-column: span 1;
text-align: center;
img {
max-width: 80%;
max-height: 200px;
width: 200px;
border-radius: 5px;
}
img {
max-width: 80%;
max-height: 200px;
width: 200px;
border-radius: 5px;
}
.stackgrid_3 {
grid-column: span 3;
//grid-column: span 3;
text-align: center;
align-self: center;
margin: auto
}
.stackitm {
margin: auto;
}
}
@ -43,6 +41,12 @@
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
@media (min-width: 950px) {
width: 900px;
margin: 1rem auto;
}
padding: 1rem;
text-align: center;