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" href="https://git.moonleay.net/Websites/liljudd-website"
target="_blank">The code of the website</a 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> <a href="/acknowledgements" target="_self">Acknowledgements</a>
</div> </div>
</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/" target="_self">My homepage</a>
<a href="https://moonleay.net/blog/" target="_blank">My blog</a> <a href="https://moonleay.net/blog/" target="_blank">My blog</a>
<a href="/contact" target="_self">Contact me</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> </div>
<div> <div>

2
src/components/NavBar.astro
View file

@ -27,7 +27,7 @@ import '../styles/components/NavBar.scss';
</li> </li>
<li class="navElem"> <li class="navElem">
<a <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 target="_blank">Invite to your server</a
> >
</li> </li>

2
src/layouts/Layout.astro
View file

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

10
src/pages/about.astro
View file

@ -28,8 +28,8 @@ import Layout from "@layouts/Layout.astro";
<section> <section>
<h1>How can I trust you, that you will not abuse your access?</h1> <h1>How can I trust you, that you will not abuse your access?</h1>
<p> <p>
Well you kinda have to take my word for it. If you want to check how the bot works The bot only requests permissions, which are needed for it to work. Additionally,
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.
@ -46,11 +46,7 @@ import Layout from "@layouts/Layout.astro";
<h1>So whats in the future?</h1> <h1>So whats in the future?</h1>
<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! I probably should set up a todo list in the 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>.
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
>.
</p> </p>
</section> </section>
<section> <section>

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

@ -1,46 +1,38 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import "../styles/pages/how-do-i.scss";
--- ---
<Layout> <Layout>
<h1>How do I...?</h1> <h1 class="title">How do I...?</h1>
<section> <section class="section">
<h2>.. enable / disable certain features?</h2> <h2>.. enable / disable certain features?</h2>
<p> <p>
Features can be enabled and disables using the <code>/feature</code> Features can be enabled and disables using the <code>/feature</code>
command.<br />Example: command.<br />Example:
</p> </p>
<p> <div class="imgwrapper">
"<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>
<img <img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png" 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> <section class="section">
<h2>.. create a match?</h2> <h2>.. create a match?</h2>
<p> <p>
You can create a match time using the <code>/match</code> command.<br You can create a match time using the <code>/match</code> command.<br
/>Example: />Example:
</p> </p>
<p> <div class="imgwrapper">
"<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>
<img <img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png" src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
alt="A screenshot of the example in Discord." 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> <section class="footernotesection">
<p>Is something missing here? Please contact me!</p> <p>Is something missing here? Please contact me!</p>
</section> </section>
</Layout> </Layout>

28
src/pages/stack.astro
View file

@ -1,47 +1,65 @@
--- ---
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import "../styles/pages/stack.scss"
--- ---
<Layout> <Layout>
<section> <h1 class="title">The Stack</h1>
<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">
<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 I chose this programming language because it is my main one. There is
nothing more to that. nothing more to that.
</p> </p>
</div>
</section> </section>
<section> <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">
<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>
</section> </section>
<section> <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">
<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>
</section> </section>
<section> <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">
<h1>The PostgreSQL database</h1> <h1>The PostgreSQL database</h1>
<p> <p>
A fast and reliable database. Also something, which I already used A fast and reliable database. Also something, which I already used
beforehand. beforehand.
</p> </p>
</div>
</section> </section>
<section> <section class="stacknote">
<p> <p>
To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>. To see all used libraries and their licenses, check the <a href="/acknowledgements">Acknowledgements</a>.
</p> </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;
}
}
}