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

fix/features #1

Merged
moonleay merged 2 commits from fix/features into master 2023-12-04 16:22:56 +00:00
Conversation 0 Commits 2 Files changed 14 +235 -186
14 changed files with 235 additions and 186 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> <h3>The Software</h3>
<div class="footerLinks"> <div class="footerLinks">
<a href="https://git.moonleay.net/DiscordBots/lilJudd" target="_blank" <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 <a
href="https://git.moonleay.net/Websites/liljudd-website" 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> <a href="/acknowledgements" target="_self">Acknowledgements</a>
</div> </div>
</div> </div>
<div> <div>
<h3>More</h3> <h3>More</h3>
<div class="footerLinks"> <div class="footerLinks">
<a href="https://moonleay.net/" target="_self">My homepage</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</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="/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> </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="/terms-of-service" target="_self">Terms of Service</a>
<a <a
href="https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE" 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>
</div> </div>

27
src/components/ImageSection.astro
View file

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

109
src/pages/about.astro
View file

@ -1,62 +1,67 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import "../styles/pages/about.scss";
--- ---
<Layout> <Layout>
<section> <h1>About</h1>
<h1>Why does this bot exist?</h1> <div class="aboutdiv">
<p> <section>
We had a person in our team, who sent <a <h2>Why does this bot exist?</h2>
href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png" <p>
>these planning messages</a 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 > 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 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 designed to actually improve the Splatoon experience and not be the
10000th moderation and general utility bot with the same features as all 10000th moderation and general utility bot with the same features as all
bots. bots.
</p> </p>
</section> </section>
<section> <section>
<h1>Who is behind this?</h1> <h2>Who is behind this?</h2>
<p> <p>
The bot is currently being developed by <a The bot is currently being developed by <a
href="https://discord.com/users/372703841151614976" href="/contact"
target="_blank">moonleay</a target="_self">moonleay</a
> (hey that&apos;s me!) with occasional help from his friends! > (hey that&apos;s me!) with occasional help from his friends!
</p> </p>
</section> </section>
<section> <section>
<h1>How can I trust you, that you will not abuse your access?</h1> <h2>How can I trust you </h2>
<p> <p>
The bot only requests permissions, which are needed for it to work. Additionally, 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 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> <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! 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. A guide on how to do that can be found in the README of the git project.
</p> </p>
</section> </section>
<section> <section>
<h1>Where is my data stored?</h1> <h2>Where is my data stored?</h2>
<p> <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, 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. but I moved it to a VPS, because my internet connection was not stable enough.
</p> </p>
</section> </section>
<section> <section>
<h1>So whats in the future?</h1> <h2>So whats in the future?</h2>
<p> <p>
I plan on adding features, which are aimed to improve your and your teams 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>. 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> </p>
</section> </section>
<section> <section>
<h1>Hey, there is this really cool idea I have! Can you add it?</h1> <h2>Hey, there is this really cool idea I have! Can you add it?</h2>
<p> <p>
Just message me! I can't promise anything, but I am always open to new 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 ideas and improvements! You can find ways to contact me <a
href="/contact" href="/contact"
target="_blank">here</a target="_self">here</a
>. >.
</p> </p>
</section> </section>
</div>
</Layout> </Layout>

21
src/pages/contact.astro
View file

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

2
src/pages/features.astro
View file

@ -37,7 +37,7 @@ import "../styles/pages/features.scss";
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."
/> />
<ImageSection <ImageSection
centered span
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.."

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

@ -33,6 +33,6 @@ import "../styles/pages/how-do-i.scss";
</div> </div>
</section> </section>
<section class="footernotesection"> <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> </section>
</Layout> </Layout>

45
src/pages/stack.astro
View file

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

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

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

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

@ -1,60 +1,41 @@
.ImageSection { .ImageSection {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 2rem 1rem;
gap: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
width: 100%; width: 100%;
@media (max-width: 1100px) {
max-width: 80vw;
}
position: relative;
background-size: contain;
background-color: rgba(0, 0, 0, 0.5); 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 { @media (min-width: 1150px) {
grid-column: 1/-1; max-width: 80vw;
width: 50%;
justify-self: center; &.span {
grid-column: 1/-1;
width: 50%;
justify-self: center;
}
} }
.firstHalf { .imgDiv {
border-radius: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around;
.imgDiv { img {
//background-color: rgba(0, 0, 0, 0.4);
//backdrop-filter: blur(5px);
padding: 0.5rem;
margin-left: 3rem;
margin-right: 3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
display: flex; p {
flex-direction: column; padding-top: 0.25rem;
align-items: center; font-size: 0.8rem;
text-align: center;
img {
border-radius: 0.5rem;
max-width: 80%;
max-height: 280px;
}
p {
padding-top: 2px;
font-size: 0.8rem;
text-align: center;
}
} }
} }
@ -62,17 +43,12 @@
line-height: 1.5; line-height: 1.5;
vertical-align: middle; vertical-align: middle;
margin: auto; margin: 0 3rem;
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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;
}
}
}
}

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

@ -20,7 +20,7 @@
gap: 1rem; gap: 1rem;
} }
@media (min-width: 1100px) { @media (min-width: 1150px) {
.gridlayout { .gridlayout {
grid-template-columns: repeat(2, 550px); grid-template-columns: repeat(2, 550px);
} }

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

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