From 4e41363ec9c2fbed69d49add47149cc0a6f32807 Mon Sep 17 00:00:00 2001 From: moonleay Date: Mon, 4 Dec 2023 14:45:07 +0100 Subject: [PATCH 1/2] WIP: improved css all around, started fixing features page --- src/components/Footer.astro | 14 +-- src/components/ImageSection.astro | 22 ++--- src/pages/about.astro | 109 +++++++++++++----------- src/pages/contact.astro | 21 +++-- src/pages/features.astro | 5 ++ src/pages/how-do-i.astro | 2 +- src/pages/stack.astro | 45 ++++------ src/styles/components/Footer.scss | 7 ++ src/styles/components/ImageSection.scss | 103 +++++++++++----------- src/styles/pages/about.scss | 30 +++++++ src/styles/pages/contact.scss | 23 +++++ src/styles/pages/how-do-i.scss | 21 ++++- src/styles/pages/stack.scss | 42 ++++----- 13 files changed, 265 insertions(+), 179 deletions(-) create mode 100644 src/styles/pages/about.scss create mode 100644 src/styles/pages/contact.scss diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 0b5a098..99d73bc 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -27,23 +27,23 @@ import '../styles/components/Footer.scss'

The Software

The code of the botThe code of the bot external link The code of the websiteThe code of the website external link - The todo list + The todo list external link Acknowledgements

More

- My homepage - My blog + My homepage external link + My blog external link Contact me - Server Status + Server Status external link
@@ -54,7 +54,7 @@ import '../styles/components/Footer.scss' Terms of Service The licenseThe license external link
diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro index 37260d4..835dae4 100644 --- a/src/components/ImageSection.astro +++ b/src/components/ImageSection.astro @@ -5,6 +5,7 @@ interface Props { title: string; description: string; note: string; + idnr: number; centered?: boolean; } const { @@ -13,20 +14,19 @@ const { title, description, note, + idnr, centered = false, } = Astro.props; import "../styles/components/ImageSection.scss"; --- -
-
-

{title}

-
- {imgAlt} -

{description}

-
-
-
-

{note}

-
+
+

{title}

+
+ {imgAlt} +

{description}

+
+
+

{note}

+
diff --git a/src/pages/about.astro b/src/pages/about.astro index 366a643..b8aeb10 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,62 +1,67 @@ --- import Layout from "@layouts/Layout.astro"; +import "../styles/pages/about.scss"; --- -
-

Why does this bot exist?

-

- We had a person in our team, who sent these planning messagesAbout +

+
+

Why does this bot exist?

+

+ We had a person in our team, who sent these planning messages 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. -

-
-
-

Who is behind this?

-

- The bot is currently being developed by moonleay +

+
+

Who is behind this?

+

+ The bot is currently being developed by moonleay (hey that's me!) with occasional help from his friends! -

-
-
-

How can I trust you, that you will not abuse your access?

-

- 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 - read the code - 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. -

-
-
-

Where is my data stored?

-

- Your data is stored in a VPS from Contabo in Germany, Bavaria. The bot used to be hosted on a server in my basement, +

+
+
+

How can I trust you

+

+ 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 + read the code + 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. +

+
+
+

Where is my data stored?

+

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

-
-
-

So whats in the future?

-

- I plan on adding features, which are aimed to improve your and your teams - competitive experience! You can check out my public todo list here. -

-
-
-

Hey, there is this really cool idea I have! Can you add it?

-

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

+
+

So whats in the future?

+

+ I plan on adding features, which are aimed to improve your and your teams + competitive experience! You can check out my public todo list here. +

+
+
+

Hey, there is this really cool idea I have! Can you add it?

+

+ 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 here. -

-
+

+
+ diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 7ab4201..d0121db 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -1,15 +1,20 @@ --- import Layout from "@layouts/Layout.astro"; +import "../styles/pages/contact.scss"; --- -
+

Contact

-

- EMail: contact@moonleay.net -

-

- Discord: @moonleay -

-
+
+ + Email + contact@moonleay.net + + + Discord + @moonleay + +
+ diff --git a/src/pages/features.astro b/src/pages/features.astro index 0e867d3..7ba3722 100644 --- a/src/pages/features.astro +++ b/src/pages/features.astro @@ -14,6 +14,7 @@ import "../styles/pages/features.scss"; title="Time Planning and Management" description="Helps you to see on which days your fellow team mates are available." note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day." + idnr={1} /> diff --git a/src/pages/how-do-i.astro b/src/pages/how-do-i.astro index 7dca34a..cb28b21 100644 --- a/src/pages/how-do-i.astro +++ b/src/pages/how-do-i.astro @@ -33,6 +33,6 @@ import "../styles/pages/how-do-i.scss";
-

Is something missing here? Please contact me!

+

Is something missing here? Please contact me!

diff --git a/src/pages/stack.astro b/src/pages/stack.astro index 28bb687..8876858 100644 --- a/src/pages/stack.astro +++ b/src/pages/stack.astro @@ -6,51 +6,42 @@ import "../styles/pages/stack.scss"

The Stack

-
- Kotlin 'K' logo -
+ Kotlin 'K' logo

The Kotlin programming language

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

-
- The Kord logo -
+ The Kord logo

The Kord library

A Kotlin library for creating Discord bots. Pretty bare bones.

-
- The Kord-Extensions logo -
+ The Kord-Extensions logo

The Kord Extensions library

A Kotlin library to improve the Kord experience.

-
- The PostgreSQL elephant -
+ The PostgreSQL elephant

The PostgreSQL database

@@ -61,7 +52,7 @@ import "../styles/pages/stack.scss"

- To see all used libraries and their licenses, check the Acknowledgements. + To view all used libraries and their licenses, check the Acknowledgements.

diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss index 4e1b522..9d057d8 100644 --- a/src/styles/components/Footer.scss +++ b/src/styles/components/Footer.scss @@ -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; } diff --git a/src/styles/components/ImageSection.scss b/src/styles/components/ImageSection.scss index 245bca0..01b8774 100644 --- a/src/styles/components/ImageSection.scss +++ b/src/styles/components/ImageSection.scss @@ -1,6 +1,10 @@ .ImageSection { border-radius: 0.5rem; width: 100%; + grid-row: var(--id)/calc(var(--id) + 2); + grid-row: var(--id)/calc(var(--id) + 2); + grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); + @media (max-width: 1100px) { max-width: 80vw; } @@ -9,15 +13,6 @@ 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; @@ -25,54 +20,56 @@ justify-self: center; } - .firstHalf { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; +} +h1 { + z-index: 1; + grid-row: var(--id)/calc(var(--id) + 1); + grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); +} +.imgDiv { + z-index: 1; + grid-row: calc(var(--id) + 1)/calc(var(--id) + 2); + grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); + padding: 0.5rem; + margin-left: 3rem; + margin-right: 3rem; + border-radius: 0.5rem; - .imgDiv { - //background-color: rgba(0, 0, 0, 0.4); - //backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + align-items: center; - padding: 0.5rem; - margin-left: 3rem; - margin-right: 3rem; - border-radius: 0.5rem; - - 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; - } - } + img { + border-radius: 0.5rem; + max-width: 80%; + max-height: 280px; } - .noteP { - line-height: 1.5; - vertical-align: middle; - - margin: auto; - font-size: 1rem; + p { + padding-top: 2px; + font-size: 0.8rem; text-align: center; - - display: flex; - justify-content: center; - align-items: center; - - p { - margin: auto; - padding: 2rem; - } + } +} + +.noteP { + z-index: 1; + grid-row: calc(var(--id) + 2)/calc(var(--id) + 3); + grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); + + line-height: 1.5; + vertical-align: middle; + + margin: auto; + font-size: 1rem; + text-align: center; + + display: flex; + justify-content: center; + align-items: center; + + p { + margin: auto; + padding: 2rem; } } diff --git a/src/styles/pages/about.scss b/src/styles/pages/about.scss new file mode 100644 index 0000000..53cd9a4 --- /dev/null +++ b/src/styles/pages/about.scss @@ -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; + } + } +} diff --git a/src/styles/pages/contact.scss b/src/styles/pages/contact.scss new file mode 100644 index 0000000..cfca583 --- /dev/null +++ b/src/styles/pages/contact.scss @@ -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; + } + } + } +} diff --git a/src/styles/pages/how-do-i.scss b/src/styles/pages/how-do-i.scss index f75e192..dd177fe 100644 --- a/src/styles/pages/how-do-i.scss +++ b/src/styles/pages/how-do-i.scss @@ -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; + } + } +} + diff --git a/src/styles/pages/stack.scss b/src/styles/pages/stack.scss index 577e2eb..9af3872 100644 --- a/src/styles/pages/stack.scss +++ b/src/styles/pages/stack.scss @@ -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; From b707eb1dcf1615e4836965648be4ffddd418694d Mon Sep 17 00:00:00 2001 From: aronmal Date: Mon, 4 Dec 2023 17:03:03 +0100 Subject: [PATCH 2/2] fix: features page --- src/components/ImageSection.astro | 29 ++----- src/pages/features.astro | 7 +- src/styles/components/ImageSection.scss | 107 ++++++++++-------------- src/styles/pages/features.scss | 2 +- 4 files changed, 54 insertions(+), 91 deletions(-) diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro index 835dae4..b752cd5 100644 --- a/src/components/ImageSection.astro +++ b/src/components/ImageSection.astro @@ -5,28 +5,17 @@ interface Props { title: string; description: string; note: string; - idnr: number; - centered?: boolean; + span?: boolean; } -const { - imgUrl, - imgAlt, - title, - description, - note, - idnr, - centered = false, -} = Astro.props; +const { imgUrl, imgAlt, title, description, note, span = false } = Astro.props; import "../styles/components/ImageSection.scss"; --- -
+
+

{title}

+
+ {imgAlt} +

{description}

+
+

{note}

-

{title}

-
- {imgAlt} -

{description}

-
-
-

{note}

-
diff --git a/src/pages/features.astro b/src/pages/features.astro index 7ba3722..5793c60 100644 --- a/src/pages/features.astro +++ b/src/pages/features.astro @@ -14,7 +14,6 @@ import "../styles/pages/features.scss"; title="Time Planning and Management" description="Helps you to see on which days your fellow team mates are available." note="The bot can send these planning messages every monday at 3AM. Members can click the buttons on each message to communicate, if they have time on that day." - idnr={1} /> diff --git a/src/styles/components/ImageSection.scss b/src/styles/components/ImageSection.scss index 01b8774..c09c2ec 100644 --- a/src/styles/components/ImageSection.scss +++ b/src/styles/components/ImageSection.scss @@ -1,75 +1,54 @@ .ImageSection { - border-radius: 0.5rem; - width: 100%; - grid-row: var(--id)/calc(var(--id) + 2); - grid-row: var(--id)/calc(var(--id) + 2); - grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); - - @media (max-width: 1100px) { - max-width: 80vw; - } - - position: relative; - - background-size: contain; - background-color: rgba(0, 0, 0, 0.5); - - &.centered { - grid-column: 1/-1; - width: 50%; - justify-self: center; - } - -} -h1 { - z-index: 1; - grid-row: var(--id)/calc(var(--id) + 1); - grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); -} -.imgDiv { - z-index: 1; - grid-row: calc(var(--id) + 1)/calc(var(--id) + 2); - grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); - padding: 0.5rem; - margin-left: 3rem; - margin-right: 3rem; - border-radius: 0.5rem; - display: flex; flex-direction: column; align-items: center; + justify-content: space-around; + padding: 2rem 1rem; + gap: 1rem; + border-radius: 0.5rem; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); - img { + @media (min-width: 1150px) { + max-width: 80vw; + + &.span { + grid-column: 1/-1; + width: 50%; + justify-self: center; + } + } + + .imgDiv { 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: 0.25rem; + font-size: 0.8rem; + text-align: center; + } } - p { - padding-top: 2px; - font-size: 0.8rem; + .noteP { + line-height: 1.5; + vertical-align: middle; + + margin: 0 3rem; + font-size: 1rem; text-align: center; - } -} - -.noteP { - z-index: 1; - grid-row: calc(var(--id) + 2)/calc(var(--id) + 3); - grid-column: mod(var(--id), 2)/calc(mod(var(--id), 2) + 1); - - line-height: 1.5; - vertical-align: middle; - - margin: auto; - font-size: 1rem; - text-align: center; - - display: flex; - justify-content: center; - align-items: center; - - p { - margin: auto; - padding: 2rem; + + display: flex; + justify-content: center; + align-items: center; } } diff --git a/src/styles/pages/features.scss b/src/styles/pages/features.scss index 193fc81..3346dbd 100644 --- a/src/styles/pages/features.scss +++ b/src/styles/pages/features.scss @@ -20,7 +20,7 @@ gap: 1rem; } - @media (min-width: 1100px) { + @media (min-width: 1150px) { .gridlayout { grid-template-columns: repeat(2, 550px); }