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>
<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>

27
src/components/ImageSection.astro
View file

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

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>

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."
/>
<ImageSection
centered
span
imgUrl="https://static.moonleay.net/img/lilJuddWeb/features/unknown.png"
imgAlt="A Question Mark"
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>
</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;
}

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

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

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

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

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;