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

redesign #5

Merged
limepotato merged 9 commits from redesign into main 2024-06-25 19:00:32 -06:00
Conversation 0 Commits 9 Files changed 13 +97 -142
7 changed files with 97 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit eef1b71abe - Show all commits

52
public/css/classes.css
View file

@ -31,6 +31,11 @@
padding-left: 10px;
}
.navbar .navbar-menu {
flex-grow: initial;
flex-shrink: initial;
}
.astro-a {
position: absolute;
top: -32px;
@ -87,3 +92,50 @@
background-size: 400%;
background-position: 0%;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
.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;
}

25
public/css/mystyle.css
View file

@ -13,6 +13,31 @@
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
font-family: system-ui, sans-serif;
}
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;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
a:link {

1
src/components/Head.astro
View file

@ -8,6 +8,5 @@
<meta content="she/they" property="pronouns">
<meta name="generator" content={Astro.generator} />
<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" />

34
src/components/Header.astro
View file

@ -33,39 +33,5 @@
</div>
</nav>
<div class="navbar-end">
<!--
<a class="navbar-item" href="https://ko-fi.com/limepot">
<img src="/assets/other-branding/ko-fi-button-red.png">
</a>
-->
<!--
<a class="navbar-item" href="https://likeitsthe90s.limepot.xyz/">
Lets act like its the 90s
</a>
-->
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<script>
document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});
</script>
</center>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->

81
src/layouts/Layout.astro
View file

@ -31,86 +31,5 @@ const { title } = Astro.props;
if (chromium)
window.location.replace("/nochrome");
</script>
<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>

36
src/pages/index.astro
View file

@ -6,25 +6,25 @@ import Card from "../components/Card.astro";
<Layout title="LimePot">
<main>
<div class="content" style="text-align: center;">
<marquee Behavior="Alternate">
<marquee Behavior="Alternate">
<h1 class="title">LimePotato</h1>
</marquee>
<hr />
<p class="title">Name(s):</p>
<p>
You can call me <span style="color: #fab387;">[Nelle]</span>, although
some call me <span style="color: #fab387;">[Luna, Lilith, ???]</span>.
Or you can simply call me by my username <span style="color: #fab387;"
>[LimePot/LimePotato]</span
>.
</p>
<hr />
<p class="title">Pronoun'd:</p>
<p>
<span style="color: #fab387;">[She/They]</span>, Alternatively: <a
href="https://pronouns.cc/@LimePotato"><u>pronouns.cc page</u></a
>.
</p>
</marquee>
<hr />
<p>
Howdy! You can call me <span style="color: #fab387;">[Nelle]</span>,
although some call me <span style="color: #fab387;"
>[Luna, Lilith, ???]</span
>. Or you can simply call me by my username <span
style="color: #fab387;">[LimePot/LimePotato]</span
>.
</p>
<p>
My pronouns are <span style="color: #fab387;">[She/They]</span>,
Alternatively checkout my <a href="https://pronouns.cc/@LimePotato"
><u>pronouns.cc page</u></a
>.
</p>
<hr />
</div>
</main>
</Layout>

10
src/pages/projects.astro
View file

@ -21,21 +21,15 @@ import Card from "../components/Card.astro";
<Card
source="/assets/icons/Forgejo_logo.svg"
href="https://git.nullafati.xyz/LimePotato/"
title="Self-Hosted ForgeJo Instance"
title="Git"
alt="Forgejo Logo"
/>
<Card
source="https://avatars.githubusercontent.com/u/67560307?s=200&v=4"
href="https://modrinth.com/user/limepotato"
title="Modrinth"
title="Modrinth Profile"
alt="Modrinth Logo"
/>
<Card
source="/assets/icons/image-outline.svg"
href="https://files.nullafati.xyz/Photos/limepotato/"
title="Photography - File Archive"
alt="image icon, mountains and a sun in outline"
/>
</ul>
<br /><br />
<center>