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

WIP: added CSS to how-do-i page, stack page, edited about page, edited links in footer, edited invite-link in header

Browse source
This commit is contained in:
moonleay 2023-12-03 19:47:41 +01:00
parent 5b49090133
commit c34662ce2d
Signed by: moonleay
GPG key ID: 82667543CCD715FB
8 changed files with 175 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Footer.astro
View file

@ -33,6 +33,7 @@ import '../styles/components/Footer.scss'
href="https://git.moonleay.net/Websites/liljudd-website"
target="_blank">The code of the website</a
>
<a href="https://todo.moonleay.net/share/OmisuzgPDdsrCAXKjGrTfYzWwqNDNclOMGJWeMsi/auth?view=kanban" target="_blank">The todo list</a>
<a href="/acknowledgements" target="_self">Acknowledgements</a>
</div>
</div>
@ -42,7 +43,7 @@ import '../styles/components/Footer.scss'
<a href="https://moonleay.net/" target="_self">My homepage</a>
<a href="https://moonleay.net/blog/" target="_blank">My blog</a>
<a href="/contact" target="_self">Contact me</a>
<a href="https://up.moonleay.net/" target="_blank">Uptime Status</a>
<a href="https://status.moonleay.net/" target="_blank">Server Status</a>
</div>
</div>
<div>

2
src/components/NavBar.astro
View file

@ -27,7 +27,7 @@ import '../styles/components/NavBar.scss';
</li>
<li class="navElem">
<a
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"
href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
target="_blank">Invite to your server</a
>
</li>

2
src/layouts/Layout.astro
View file

@ -16,7 +16,7 @@ import "../styles/GlobalLayout.css";
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>Lil Judd</title>
<title>li'l Judd - Your competitive Splatoon assistant</title>
</head>
<body>
<NavBar />

10
src/pages/about.astro
View file

@ -28,8 +28,8 @@ import Layout from "@layouts/Layout.astro";
<section>
<h1>How can I trust you, that you will not abuse your access?</h1>
<p>
Well you kinda have to take my word for it. If you want to check how the bot works
under the hood, you can
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.
@ -46,11 +46,7 @@ import Layout from "@layouts/Layout.astro";
<h1>So whats in the future?</h1>
<p>
I plan on adding features, which are aimed to improve your and your teams
competitive experience! I probably should set up a todo list in the
future, but for now you can see my ideas <a
href="https://git.moonleay.net/DiscordBots/lilJudd#maybe-upcoming-features"
target="_blank">in the README of the git project</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>
</section>
<section>

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

@ -1,46 +1,38 @@
---
import Layout from "@layouts/Layout.astro";
import "../styles/pages/how-do-i.scss";
---
<Layout>
<h1>How do I...?</h1>
<section>
<h1 class="title">How do I...?</h1>
<section class="section">
<h2>.. enable / disable certain features?</h2>
<p>
Features can be enabled and disables using the <code>/feature</code>
command.<br />Example:
</p>
<p>
"<code
>/feature feature:Time Planning Feature set:Enable
channel:#ich-kann-heute</code
>"<br />will enable the Time Planning Feature in the "ich-kann-heute"
channel.
</p>
<div class="imgwrapper">
<img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
alt="A screenshot of the example in Discord."
/>
alt="A screenshot of the example in Discord."/>
<p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p>
</div>
</section>
<section>
<section class="section">
<h2>.. create a match?</h2>
<p>
You can create a match time using the <code>/match</code> command.<br
/>Example:
</p>
<p>
"<code
>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code
>"<br />will create a match on the 24th of December 2069 at 4am in the
morning.<br />Keep in mind that it is important to use the right time
format. (<code>dd.MM.yyyy HH:mm</code>)
</p>
<div class="imgwrapper">
<img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
alt="A screenshot of the example in Discord."
/>
<p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p>
</div>
</section>
<section>
<section class="footernotesection">
<p>Is something missing here? Please contact me!</p>
</section>
</Layout>

28
src/pages/stack.astro
View file

@ -1,47 +1,65 @@
---
import Layout from "@layouts/Layout.astro";
import "../styles/pages/stack.scss"
---
<Layout>
<section>
<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>
<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.
</p>
</div>
</section>
<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>
<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>
<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>
<div class="stackgrid_3 stackitm">
<h1>The Kord Extensions library</h1>
<p>A Kotlin library to improve the Kord experience.</p>
</div>
</section>
<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>
<div class="stackgrid_3 stackitm">
<h1>The PostgreSQL database</h1>
<p>
A fast and reliable database. Also something, which I already used
beforehand.
</p>
</div>
</section>
<section>
<section class="stacknote">
<p>
To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
</p>

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

@ -0,0 +1,38 @@
.title {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
.section {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
.imgwrapper {
margin: auto;
text-align: center;
img {
display: none;
}
p, code {
display: flex;
}
@media (min-width: 600px) {
img {
display: flex;
border-radius: 5px;
max-width: 90%;
}
p, code {
display: none;
}
}
}
}

59
src/styles/pages/stack.scss Normal file
View file

@ -0,0 +1,59 @@
.title {
font-size: 3rem;
text-align: center;
margin-bottom: 1.2rem;
}
.stacksection {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
display: block;
@media (min-width: 800px) {
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;
}
}
.stackgrid_3 {
grid-column: span 3;
text-align: center;
align-self: center;
margin: auto
}
.stackitm {
margin: auto;
}
}
.stacknote {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 1rem;
padding: 1rem;
text-align: center;
a {
color: white;
text-decoration: underline;
font-size: 0.9rem;
transition: 0.5s;
&:hover {
color: rgb(96 59 255) !important;
}
}
}