limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

Chrome deter

Browse source
This commit is contained in:
nelle 2024-06-25 13:17:17 -06:00
parent 95421ee177
commit 25ee660657
5 changed files with 263 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Head.astro
View file

@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Personal website of LimePotato" /> <meta name="description" content="Personal website of LimePotato" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta content="woman(ish)" property="og:profile:gender">
<meta content="she/they" property="pronouns">
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="stylesheet" href="/css/mystyle.css" /> <link rel="stylesheet" href="/css/mystyle.css" />
<link rel="script" href="/scripts/limepot.js" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />

108
src/layouts/Layout-nochrome.astro Executable file
View file

@ -0,0 +1,108 @@
---
import Header from "../components/Header.astro";
import Head from "../components/Head.astro";
import Footer from "../components/Footer.astro";
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<Head />
<title>{title}</title>
</head>
<body onload="redirect()">
<Header />
<section class="section">
<div class="container">
<slot />
</div>
</section>
<Footer />
<style is:global>
.navbar .navbar-menu {
flex-grow: initial;
flex-shrink: initial;
}
:root {
--accent: 250, 179, 135;
--accent-light: 250, 221, 201;
--accent-dark: 149, 106, 81;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(
rgba(var(--accent-dark), 66%),
rgba(var(--accent-dark), 33%)
);
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>
</body>
</html>

173
src/layouts/Layout.astro
View file

@ -15,7 +15,7 @@ const { title } = Astro.props;
<Head /> <Head />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body onload="redirect()">
<Header /> <Header />
<section class="section"> <section class="section">
<div class="container"> <div class="container">
@ -23,85 +23,94 @@ const { title } = Astro.props;
</div> </div>
</section> </section>
<Footer /> <Footer />
</body><style is:global> <script type="text/javascript">
.navbar .navbar-menu { let chromium = /Chrome|Chromium|OPR|Opera|Edge|UC|QQ|Brave/.test(
flex-grow: initial; navigator.userAgent
flex-shrink: initial; );
} let disclaimer = `<div class="web-disclaimer">`;
:root { if (chromium)
--accent: 250, 179, 135; window.location.replace("/nochrome");
--accent-light: 250, 221, 201; </script>
--accent-dark: 149, 106, 81; <style is:global>
--accent-gradient: linear-gradient( .navbar .navbar-menu {
45deg, flex-grow: initial;
rgb(var(--accent)), flex-shrink: initial;
rgb(var(--accent-light)) 30%, }
white 60% :root {
); --accent: 250, 179, 135;
} --accent-light: 250, 221, 201;
html { --accent-dark: 149, 106, 81;
font-family: system-ui, sans-serif; --accent-gradient: linear-gradient(
background: #13151a; 45deg,
background-size: 224px; rgb(var(--accent)),
} rgb(var(--accent-light)) 30%,
main { white 60%
margin: auto; );
padding: 1rem; }
width: 800px; html {
max-width: calc(100% - 2rem); font-family: system-ui, sans-serif;
color: white; background: #13151a;
font-size: 20px; background-size: 224px;
line-height: 1.6; }
} main {
.astro-a { margin: auto;
position: absolute; padding: 1rem;
top: -32px; width: 800px;
left: 50%; max-width: calc(100% - 2rem);
transform: translatex(-50%); color: white;
width: 220px; font-size: 20px;
height: auto; line-height: 1.6;
z-index: -1; }
} .astro-a {
h1 { position: absolute;
font-size: 4rem; top: -32px;
font-weight: 700; left: 50%;
line-height: 1; transform: translatex(-50%);
text-align: center; width: 220px;
margin-bottom: 1em; height: auto;
} z-index: -1;
.text-gradient { }
background-image: var(--accent-gradient); h1 {
-webkit-background-clip: text; font-size: 4rem;
-webkit-text-fill-color: transparent; font-weight: 700;
background-size: 400%; line-height: 1;
background-position: 0%; text-align: center;
} margin-bottom: 1em;
.instructions { }
margin-bottom: 2rem; .text-gradient {
border: 1px solid rgba(var(--accent-light), 25%); background-image: var(--accent-gradient);
background: linear-gradient( -webkit-background-clip: text;
rgba(var(--accent-dark), 66%), -webkit-text-fill-color: transparent;
rgba(var(--accent-dark), 33%) background-size: 400%;
); background-position: 0%;
padding: 1.5rem; }
border-radius: 8px; .instructions {
} margin-bottom: 2rem;
.instructions code { border: 1px solid rgba(var(--accent-light), 25%);
font-size: 0.8em; background: linear-gradient(
font-weight: bold; rgba(var(--accent-dark), 66%),
background: rgba(var(--accent-light), 12%); rgba(var(--accent-dark), 33%)
color: rgb(var(--accent-light)); );
border-radius: 4px; padding: 1.5rem;
padding: 0.3em 0.4em; border-radius: 8px;
} }
.instructions strong { .instructions code {
color: rgb(var(--accent-light)); font-size: 0.8em;
} font-weight: bold;
.link-card-grid { background: rgba(var(--accent-light), 12%);
display: grid; color: rgb(var(--accent-light));
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); border-radius: 4px;
gap: 2rem; padding: 0.3em 0.4em;
padding: 0; }
} .instructions strong {
</style> color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>
</body>
</html> </html>

58
src/pages/index.astro
View file

@ -6,16 +6,9 @@ import Card from "../components/Card.astro";
<Layout title="LimePot"> <Layout title="LimePot">
<main> <main>
<div class="content"> <div class="content">
<center>
<h1 class="title">LimePotato</h1>
<marquee Behavior="Alternate"> <marquee Behavior="Alternate">
<h2> <h1 class="title">LimePotato</h1>
<span class="text-gradient">Hello World</span>
</h2>
</marquee> </marquee>
<!--
<a href="/404" style="font-size: 34px" class="subtitle">0 Days since last incident.</a>
-->
<hr /> <hr />
<p class="title">Name(s):</p> <p class="title">Name(s):</p>
<p> <p>
@ -26,61 +19,12 @@ import Card from "../components/Card.astro";
>. >.
</p> </p>
<hr /> <hr />
<p class="title">Pronoun'd:</p> <p class="title">Pronoun'd:</p>
<p> <p>
<span style="color: #fab387;">[She/They]</span>, Alternatively: <a <span style="color: #fab387;">[She/They]</span>, Alternatively: <a
href="https://pronouns.cc/@LimePotato"><u>pronouns.cc page</u></a href="https://pronouns.cc/@LimePotato"><u>pronouns.cc page</u></a
>. >.
</p> </p>
<hr />
<p class="title">Some Info:</p>
<p>
I do a lot of tinkering with various things, hardware and software.
Currently messing around with Web Development, Minecraft mods, 3D
Printing, Linux, System Administration, Pixel Art, and whatever comes
to mind really. Checkout my <a href="https://limepot.xyz/projects"
><u>Projects</u></a
> to see what I'm currently working on.
</p>
<br />
<br /><br />
<p class="instructions">
<strong>Where to find/contact me:</strong>
</p><br />
<ul role="list" class="link-card-grid">
<Card
source="/assets/icons/mail-outline.svg"
href="mailto: limepot@protonmail.ch"
title="Email"
alt="Icon of a piece of Mail"
/>
<Card
source="https://upload.wikimedia.org/wikipedia/commons/9/93/Fediverse_logo_proposal.svg"
href="https://ouroboros.gay/@limepot"
title="Fediverse"
alt="Fediverse Icon"
/>
<Card
source="/assets/icons/listenbrainzicon.png"
href="https://listenbrainz.org/user/LimePotato/"
title="ListenBrainz Profile"
alt="ListenBrainz Icon"
/>
<Card
source="/assets/icons/logo-youtube.svg"
href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA"
title="Youtube"
alt="Youtube Logo"
/>
<Card
source="/assets/icons/logo-steam.svg"
href="https://steamcommunity.com/id/limepot/"
title="Steam"
alt="Steam Logo"
/>
</ul>
</center>
</div> </div>
</main> </main>
</Layout> </Layout>

59
src/pages/nochrome.astro Normal file
View file

@ -0,0 +1,59 @@
---
import Layout from "../layouts/Layout-nochrome.astro";
import Card from "../components/Card-noimg.astro";
---
<Layout title="LimePot">
<main>
<div class="content" style="text-align: center;">
<h1 class="title">You Are Using a Chromium-based Browser.</h1>
<h2 class="subtitle">
There are many reasons not to use chrome (as well as base firefox), consider using an alternative
browser.
</h2>
<hr />
<a href="https://fuckoffgoogle.de/"
><h2 class="subtitle">Google is Evil</h2></a
>
<a href="https://privacytests.org/"
><h2 class="subtitle">Browser Privacy Tests</h2></a
>
<hr />
<h2 class="subtitle">Some Recommendations</h2>
<ul role="list" class="link-card-grid">
<Card
href="https://librewolf.net/"
title="Librewolf"
/>
<Card
href="https://mullvad.net/en/browser"
title="Mullvad Browser"
/>
<Card
href="https://www.waterfox.net/"
title="Waterfox"
/>
<Card
href="https://www.netsurf-browser.org/"
title="Netsurf"
/>
<Card
href="https://awesomekling.github.io/Ladybird-a-new-cross-platform-browser-project/"
title="Ladybird"
/>
<Card
href="https://www.microsoft.com/en-us/download/internet-explorer"
title="Internet Explorer"
/>
</ul>
<hr />
<a
href="https://chromewebstore.google.com/detail/user-agent-switcher-and-m/bhchdcejhohfmigjafbampogmaanbfkg"
><h2>
If you are really dead-set on using chromium to browse this website,
you can use a user-agent switcher
</h2></a
>
</div>
</main>
</Layout>