Make Apache config optional and add more links to index

This commit is contained in:
Bad Manners 2024-08-16 16:21:22 -03:00
parent 403ae18b6e
commit e84900a652
16 changed files with 280 additions and 82 deletions

View file

@ -0,0 +1,13 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 448 512">
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>
</SVGIcon>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,13 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.628 0 12-5.373 12-12S18.628 0 12 0zM7.08 4.182h2.781c.233 0 .42.21.42.47v14.696c0 .26-.187.47-.42.47h-2.78c-.233 0-.42-.21-.42-.47V4.652c0-.26.187-.47.42-.47zm4.664 0a.624.624 0 0 1 .326.091c.355.209 7.451 4.42 8.057 4.78a.604.604 0 0 1 0 1.039c-.436.264-7.558 4.495-8.074 4.789a.577.577 0 0 1-.873-.512v-1.812c0-1.712 2.962-2.201 3.398-2.465a.604.604 0 0 0 0-1.04c-.605-.36-3.398-.746-3.398-2.452V4.79c0-.334.251-.605.564-.61z"/>
</SVGIcon>

View file

@ -0,0 +1,13 @@
---
import SVGIcon from "../SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 24 24">
<path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>
</SVGIcon>

1
src/env.d.ts vendored
View file

@ -1,2 +1,3 @@
/// <reference path="../.astro/env.d.ts" />
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

46
src/pages/[...config].ts Normal file
View file

@ -0,0 +1,46 @@
import type { APIRoute, GetStaticPaths } from "astro";
import { APACHE_CONFIG } from "astro:env/server";
const htaccess = `
ErrorDocument 404 /404.html
RedirectMatch 301 ^/tos(\/(index.html)?)?$ /terms_of_service/
Redirect 301 /@/aryion https://aryion.com/g4/user/BadManners
Redirect 301 /@/eka https://aryion.com/g4/user/BadManners
Redirect 301 /@/bluesky https://bsky.app/profile/badmanners.xyz
Redirect 301 /@/bsky https://bsky.app/profile/badmanners.xyz
Redirect 301 /@/codeberg https://codeberg.org/BadManners
Redirect 301 /@/fa https://www.furaffinity.net/user/badmanners
Redirect 301 /@/furaffinity https://www.furaffinity.net/user/badmanners
Redirect 301 /@/gallery https://gallery.badmanners.xyz
Redirect 301 /@/github https://github.com/BadMannersXYZ
Redirect 301 /@/gitlab https://gitlab.com/Bad_Manners
Redirect 301 /@/inkbunny https://inkbunny.net/BadManners
Redirect 301 /@/ib https://inkbunny.net/BadManners
Redirect 301 /@/itaku https://itaku.ee/profile/badmanners
Redirect 301 /@/itch https://bad-manners.itch.io
Redirect 301 /@/keybase https://keybase.io/badmanners
Redirect 301 /@/mastodon https://meow.social/@BadManners
Redirect 301 /@/meow.social https://meow.social/@BadManners
Redirect 301 /@/neocities https://badmanners.neocities.org/
Redirect 301 /@/picarto https://www.picarto.tv/BadManners
Redirect 301 /@/signal https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB
Redirect 301 /@/sf https://bad-manners.sofurry.com/
Redirect 301 /@/sofurry https://bad-manners.sofurry.com/
Redirect 301 /@/steam https://steamcommunity.com/id/badmanners_/
Redirect 301 /@/subscribestar https://subscribestar.adult/bad-manners
Redirect 301 /@/telegram https://t.me/bad_manners
Redirect 301 /@/t.me https://t.me/bad_manners
Redirect 301 /@/twitch https://www.twitch.tv/bad__manners
Redirect 301 /@/weasyl https://www.weasyl.com/~badmanners
Redirect 301 /@/x https://x.com/BadManners__
Redirect 301 /@/twitter https://x.com/BadManners__
`.trim();
export const getStaticPaths: GetStaticPaths = async () => {
if (APACHE_CONFIG) {
return [{ params: { config: ".htaccess" }, props: { body: htaccess } }];
}
return [];
};
export const GET: APIRoute = ({ props: { body } }) => new Response(body);

View file

@ -16,7 +16,7 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
<h1 id="title-contact" class="text-2xl sm:text-3xl">Contact</h1>
<section>
<p class="mb-4 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6">
Feel free to reach out to me through any of my socials below, or by
Feel free to reach out through my main socials below, or by
<a href="/work" class="text-link underline transition-colors motion-reduce:transition-none"
>messaging me on any of my galleries</a
>, if you wanna talk about anything!

View file

@ -10,13 +10,18 @@ import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
import IconItchIO from "../components/icons/brands/IconItchIO.astro";
import IconKeybase from "../components/icons/brands/IconKeybase.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconNeocities from "../components/icons/brands/IconNeocities.astro";
import IconPicarto from "../components/icons/brands/IconPicarto.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
import IconSteam from "../components/icons/brands/IconSteam.astro";
import IconSubscribeStar from "../components/icons/brands/IconSubscribeStar.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconTwitch from "../components/icons/brands/IconTwitch.astro";
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
import IconX from "../components/icons/brands/IconX.astro";
import IconEllipsis from "../components/icons/IconEllipsis.astro";
import IconItaku from "../components/icons/brands/IconItaku.astro";
---
<BaseLayout>
@ -37,229 +42,282 @@ import IconX from "../components/icons/brands/IconX.astro";
class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
/>
<p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, and a furry who occasionally writes stuff.</p>
<ul class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32">
<ul id="links" class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://bsky.app/profile/badmanners.xyz"
target="_blank"
rel="me"
title="Bluesky"
aria-label="Bluesky"
>
<IconBluesky height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@badmanners.xyz</span>
<IconBluesky height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">@badmanners.xyz on Bluesky</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://codeberg.org/BadManners"
target="_blank"
rel="me"
title="Codeberg"
aria-label="Codeberg"
>
<IconCodeberg height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
<IconCodeberg height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Codeberg</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
target="_blank"
rel="me"
title="Eka's Portal"
aria-label="Eka's Portal"
>
<IconEkasPortal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
<IconEkasPortal height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Eka's Portal</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
target="_blank"
rel="me"
title="Fur Affinity"
aria-label="Fur Affinity"
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
<IconFurAffinity height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Fur Affinity</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://github.com/BadMannersXYZ"
target="_blank"
rel="me"
title="GitHub"
aria-label="GitHub"
>
<IconGitHub height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadMannersXYZ</span>
<IconGitHub height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadMannersXYZ on GitHub</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://gitlab.com/Bad_Manners"
target="_blank"
rel="me"
title="GitLab"
aria-label="GitLab"
>
<IconGitLab height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad_Manners</span>
<IconGitLab height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">Bad_Manners on GitLab</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
target="_blank"
rel="me"
title="Inkbunny"
aria-label="Inkbunny"
>
<IconInkbunny height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
<IconInkbunny height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Inkbunny</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://itaku.ee/profile/badmanners"
target="_blank"
rel="me"
aria-label="Itaku"
>
<IconItaku height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">badmanners on Itaku</span>
</a>
</li>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.itch.io"
target="_blank"
rel="me"
title="Itch.io"
aria-label="Itch.io"
>
<IconItchIO height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">bad-manners</span>
<IconItchIO height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">Bad Manners on Itch.io</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://keybase.io/badmanners"
target="_blank"
rel="me"
title="Keybase"
aria-label="Keybase"
>
<IconKeybase height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners</span>
<IconKeybase height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">badmanners on Keybase</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://meow.social/@BadManners"
target="_blank"
rel="me"
title="Mastodon"
aria-label="Mastodon"
>
<IconMastodon height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners@meow.social</span>
<IconMastodon height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">@BadManners@meow.social on Mastodon</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://badmanners.neocities.org/"
target="_blank"
rel="me"
aria-label="Neocities"
>
<IconNeocities height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">badmanners.neocities.org on Neocities</span>
</a>
</li>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://www.picarto.tv/BadManners"
target="_blank"
rel="me"
aria-label="Picarto"
>
<IconPicarto height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Picarto</span>
</a>
</li>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
target="_blank"
rel="me"
title="Signal"
aria-label="Signal"
>
<IconSignal height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners.10</span>
<IconSignal height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">badmanners.10 on Signal</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com/"
target="_blank"
rel="me"
title="SoFurry"
aria-label="SoFurry"
>
<IconSoFurry height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">Bad Manners</span>
<IconSoFurry height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">Bad Manners on SoFurry</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://steamcommunity.com/id/badmanners_/"
target="_blank"
rel="me"
title="Steam"
aria-label="Steam"
>
<IconSteam height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">badmanners_</span>
<IconSteam height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">badmanners_ on Steam</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://subscribestar.adult/bad-manners"
target="_blank"
rel="me"
title="SubscribeStar"
aria-label="SubscribeStar"
>
<IconSubscribeStar height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">bad-manners</span>
<IconSubscribeStar height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">Bad Manners on SubscribeStar</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://t.me/bad_manners"
target="_blank"
rel="me"
title="Telegram"
aria-label="Telegram"
>
<IconTelegram height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@bad_manners</span>
<IconTelegram height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">@bad_manners on Telegram</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://www.twitch.tv/bad__manners"
target="_blank"
rel="me"
aria-label="Twitch"
>
<IconTwitch height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">bad__manners on Twitch</span>
</a>
</li>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
target="_blank"
rel="me"
title="Weasyl"
aria-label="Weasyl"
>
<IconWeasyl height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">BadManners</span>
<IconWeasyl height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">BadManners on Weasyl</span>
</a>
</li>
<li>
<a
class="u-url text-link p-2 transition-colors motion-reduce:transition-none"
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="https://x.com/BadManners__"
target="_blank"
rel="me"
title="X"
aria-label="X"
>
<IconX height="1.75rem" width="1.75rem" class="inline" />
<span class="p-nickname hidden">@BadManners__</span>
<IconX height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
<span class="p-nickname hidden">@BadManners__ on X</span>
</a>
</li>
<li>
<a
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
href="/contact"
aria-label="More options..."
>
<IconEllipsis height="1.75rem" width="1.75rem" class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100" />
</a>
</li>
</ul>
</section>
</article>
</BaseLayout>
<script>
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
(function () {
tippy(document.querySelectorAll("#links a"), {
content: (el) => el.getAttribute("aria-label")!,
theme: "bm",
});
})();
</script>

View file

@ -38,7 +38,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
<a class="text-link transition-colors" href="https://linktr.ee/Rimmi1357" target="_blank">
<span class="underline">Rimmi</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
>. Click to view a high quality version.
</figcaption>
</figure>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">
@ -86,7 +86,7 @@ import ImageSamRefsheet from "../assets/images/sam_refsheet.webp";
<a class="text-link transition-colors" href="https://olivecow.carrd.co/" target="_blank">
<span class="underline">OliveCow</span>
<IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" /></a
>. Click to view in higher quality.
>. Click to view a high quality version.
</figcaption>
</figure>
<p class="mt-3 text-justify indent-6 sm:mt-2 sm:px-5 sm:indent-12 md:px-12">