From 5b49090133bd376c1c00669343ff654e382ef2c5 Mon Sep 17 00:00:00 2001 From: moonleay Date: Tue, 28 Nov 2023 08:16:12 +0100 Subject: [PATCH] WIP: further improvement of features page --- public/favicon.ico | Bin 6518 -> 16958 bytes src/components/ImageSection.astro | 12 +++-- src/pages/about.astro | 12 ++--- src/styles/components/ImageSection.scss | 64 ++++++++++++++++-------- src/styles/pages/features.scss | 6 ++- 5 files changed, 59 insertions(+), 35 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index 613e1fbb1ce5e2668b94c4efa108e464a29e1954..88e813b4e02234dcbdb0ff64bde50ae7be73ecc5 100644 GIT binary patch literal 16958 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 diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro index bba112f..37260d4 100644 --- a/src/components/ImageSection.astro +++ b/src/components/ImageSection.astro @@ -19,12 +19,14 @@ import "../styles/components/ImageSection.scss"; ---
-

{title}

-
- {imgAlt} -

{description}

+
+

{title}

+
+ {imgAlt} +

{description}

+
-
+

{note}

diff --git a/src/pages/about.astro b/src/pages/about.astro index 8bed684..05dac57 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -10,13 +10,7 @@ import Layout from "@layouts/Layout.astro"; href="https://static.moonleay.net/img/lilJuddWeb/about/oldplanningmsg.png" >these planning messages and I thought that this should be automated. Some time later the first - version of li'l Judd was born. -

- -
-

What now?

-

- Today the bot has more features and keeps getting more of them! It is + 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. @@ -44,8 +38,8 @@ import Layout from "@layouts/Layout.astro";

Where is my data stored?

- Your data is stored in my basement on my server in Germany. And this will - stay that way until I move. + Your data is stored in a VPS from Contabo in Germany, Bavaria. 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.

diff --git a/src/styles/components/ImageSection.scss b/src/styles/components/ImageSection.scss index e17344f..62e4c03 100644 --- a/src/styles/components/ImageSection.scss +++ b/src/styles/components/ImageSection.scss @@ -1,5 +1,9 @@ .ImageSection { border-radius: 0.5rem; + width: 100%; + @media (max-width: 1100px) { + max-width: 80vw; + } position: relative; @@ -14,40 +18,60 @@ rgba(0, 0, 0, 0.25) 100% ); - margin: 1rem; - padding: 1rem; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - &.centered { grid-column: 1/-1; width: 50%; justify-self: center; } - .imgDiv { - background-color: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(5px); - - padding: 0.5rem; - border-radius: 0.5rem; - + .firstHalf { display: flex; flex-direction: column; align-items: center; + justify-content: space-around; - img { + .imgDiv { + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); + + padding: 0.5rem; + margin-left: 3rem; + margin-right: 3rem; 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; + } } + } + + .noteP { + line-height: 1.5; + vertical-align: middle; + + margin: auto; + font-size: 1rem; + text-align: center; + + display: flex; + justify-content: center; + align-items: center; p { - padding-top: 2px; - font-size: 0.8rem; + margin: auto; + padding: 2rem; } } } diff --git a/src/styles/pages/features.scss b/src/styles/pages/features.scss index f143acc..193fc81 100644 --- a/src/styles/pages/features.scss +++ b/src/styles/pages/features.scss @@ -12,8 +12,12 @@ .gridlayout { display: grid; grid-template-columns: 550px; - align-content: center; padding: 1rem; + width: 100vw; + justify-content: center; + justify-items: center; + align-content: center; + gap: 1rem; } @media (min-width: 1100px) {