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>

44
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 <img
>/feature feature:Time Planning Feature set:Enable src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
channel:#ich-kann-heute</code alt="A screenshot of the example in Discord."/>
>"<br />will enable the Time Planning Feature in the "ich-kann-heute" <p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p>
channel. </div>
</p>
<img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/featureexample.png"
alt="A screenshot of the example in Discord."
/>
</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 <img
>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
>"<br />will create a match on the 24th of December 2069 at 4am in the alt="A screenshot of the example in Discord."
morning.<br />Keep in mind that it is important to use the right time />
format. (<code>dd.MM.yyyy HH:mm</code>) <p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p>
</p> </div>
<img
src="https://static.moonleay.net/img/lilJuddWeb/howdoi/matchexample.png"
alt="A screenshot of the example in Discord."
/>
</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>

88
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>
<img <section class="stacksection">
src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg" <div class="stackgrid_1 stackitm">
alt="Kotlin 'K' logo" <img
/> src="https://static.moonleay.net/img/lilJuddWeb/logos/kotlin.svg"
<h1>The Kotlin programming language</h1> alt="Kotlin 'K' logo"
<p> />
I chose this programming language because it is my main one. There is </div>
nothing more to that. <div class="stackgrid_3 stackitm">
</p> <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> <section class="stacksection">
<img <div class="stackgrid_1 stackitm">
src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png" <img
alt="The Kord logo" src="https://static.moonleay.net/img/lilJuddWeb/logos/kord.png"
/> alt="The Kord logo"
<h1>The Kord library</h1> />
<p>A Kotlin library for creating Discord bots. Pretty bare bones.</p> </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> <section class="stacksection">
<img <div class="stackgrid_1 stackitm">
src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png" <img
alt="The Kord-Extensions logo" src="https://static.moonleay.net/img/lilJuddWeb/logos/kordextensions.png"
/> alt="The Kord-Extensions logo"
<h1>The Kord Extensions library</h1> />
<p>A Kotlin library to improve the Kord experience.</p> </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> <section class="stacksection">
<img <div class="stackgrid_1 stackitm">
src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png" <img
alt="The PostgreSQL elephant" src="https://static.moonleay.net/img/lilJuddWeb/logos/pgelephant.png"
/> alt="The PostgreSQL elephant"
<h1>The PostgreSQL database</h1> />
<p> </div>
A fast and reliable database. Also something, which I already used <div class="stackgrid_3 stackitm">
beforehand. <h1>The PostgreSQL database</h1>
</p> <p>
A fast and reliable database. Also something, which I already used
beforehand.
</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;
}
}
}