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

202310292134

Browse source
This commit is contained in:
nelle 2023-10-29 21:34:09 -06:00
parent e1bf484c46
commit 21fcd86ea9
7 changed files with 279 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/Card-noimg.astro Executable file
View file

@ -0,0 +1,62 @@
---
interface Props {
title: string;
body: string;
href: string;
source: string;
}
const { href, title, body, source } = Astro.props;
---
<li class="link-card">
<a href={href} class="informational">
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style:none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

42
src/components/Footer.astro Normal file
View file

@ -0,0 +1,42 @@
---
---
<center>
<footer class="footer">
<div class="content has-text-centered">
<!--Badges-->
<a href="https://limepot.xyz/"><image src="/assets/badges/limepotxyz-badge00.gif"></a>
<br>
<a href="https://jointhefediverse.net/"><image src="/assets/badges/FEDERATE-NOW.jpg"></a>
<a href="https://gnu.org"><image src="/assets/badges/gnu-linux.gif"></a>
<a href="https://fuckoffgoogle.de/"><image src="/assets/badges/google_stand.gif"></a>
<a href="https://privacytests.org/"><image src="/assets/badges/chrmevil.gif"></a>
<br>
<image src="/assets/badges/browser.gif">
<a href="https://tuxcrafting.online/"><image src="/assets/badges/tctek.gif"></a>
<iframe src="//incr.easrng.net/badge?key=limepot" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
<a href="https://cybercriminal.eu"><image src ="/assets/badges/cbrmnl.png"></a>
<br>
<!--Badges-->
<br><br>
<a href="https://astro.build">
<img src="https://astro.badg.es/v1/built-with-astro/tiny.svg" alt="Built with Astro" width="109" height="20">
</a>
<a href="https://bulma.io">
<img src="https://bulma.io/images/made-with-bulma--semiwhite.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
<a href="https://github.com/catppuccin/catppuccin">
<img src="https://img.shields.io/badge/Catppuccin-Mocha%20Mauve-%23cba6f7" width="185" height="20">
</a>
<a href="https://git.ouroboros.group/LimePotato/limepot-xyz">
<img src="https://img.shields.io/badge/Site-Source-lightgrey.svg" width="94.2" height="20">
</a>
<br>
<a href="https://up.ouroboros.group/status/obos"><u>Experiencing downtimes?</u></a>
<a href="/policy"><u>Security, Privacy, & Credits</u></a>
</div>
</footer></center>
</section>

58
src/components/Header.astro Normal file
View file

@ -0,0 +1,58 @@
---
---
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/branding/IMG_0934_square.JPG" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item" href="/about">
<span class="text-gradient">About Me</span>
</a>
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</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>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>

100
src/layouts/Layout.astro
View file

@ -1,4 +1,6 @@
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
interface Props {
title: string;
}
@ -23,108 +25,14 @@ const { title } = Astro.props;
</style>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/branding/IMG_0934_square.JPG" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item" href="/about">
<span class="text-gradient">About Me</span>
</a>
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
</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>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<Header />
<section class="section">
<div class="container">
<slot />
</div>
</section>
</body>
<center>
<footer class="footer">
<div class="content has-text-centered">
<!--Badges-->
<a href="https://limepot.xyz/"><image src="/assets/badges/limepotxyz-badge00.gif"></a>
<br>
<a href="https://jointhefediverse.net/"><image src="/assets/badges/FEDERATE-NOW.jpg"></a>
<a href="https://gnu.org"><image src="/assets/badges/gnu-linux.gif"></a>
<a href="https://fuckoffgoogle.de/"><image src="/assets/badges/google_stand.gif"></a>
<a href="https://privacytests.org/"><image src="/assets/badges/chrmevil.gif"></a>
<br>
<image src="/assets/badges/browser.gif">
<a href="https://tuxcrafting.online/"><image src="/assets/badges/tctek.gif"></a>
<iframe src="//incr.easrng.net/badge?key=limepot" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
<a href="https://cybercriminal.eu"><image src ="/assets/badges/cbrmnl.png"></a>
<br>
<!--Badges-->
<br><br>
<a href="https://astro.build">
<img src="https://astro.badg.es/v1/built-with-astro/tiny.svg" alt="Built with Astro" width="109" height="20">
</a>
<a href="https://bulma.io">
<img src="https://bulma.io/images/made-with-bulma--semiwhite.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
<a href="https://github.com/catppuccin/catppuccin">
<img src="https://img.shields.io/badge/Catppuccin-Mocha%20Mauve-%23cba6f7" width="185" height="20">
</a>
<a href="https://git.ouroboros.group/LimePotato/limepot-xyz">
<img src="https://img.shields.io/badge/Site-Source-lightgrey.svg" width="94.2" height="20">
</a>
<br>
<a href="https://up.ouroboros.group/status/obos"><u>Experiencing downtimes?</u></a>
<a href="/policy"><u>Security, Privacy, & Credits</u></a>
</div>
</footer></center>
</section>
<Footer />
</html>
<style is:global>
:root {

84
src/layouts/MDPost.astro Executable file
View file

@ -0,0 +1,84 @@
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const { frontmatter } = Astro.props;
---
<html>
<Header />
<center>
<h1 class="title">{frontmatter.title}</h1>
<h2 class="subtitle"><em>Summary: {frontmatter.description} - Written by {frontmatter.author} on {frontmatter.pubDate.slice(0,10)}</em></h2>
<br>
</center>
<slot />
<Footer />
</html>
<style is:global>
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--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>

16
src/pages/blog.astro
View file

@ -0,0 +1,16 @@
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card-noimg.astro';
---
<Layout title="LimePot - Blog">
<main>
<ul role="list" class="link-card-grid">
<Card
href="/posts/post-1"
title="First Post!"
body="First blog post on the blog blog woah"
/>
</ul>
</main>
</Layout>

13
src/pages/posts/post-1.md Normal file
View file

@ -0,0 +1,13 @@
---
layout: ../../layouts/MDPost.astro
title: 'My First Blog Post'
pubDate: 2023-10-29
description: 'This is the first post of my new blog.'
author: 'LimePotato'
image:
url: '/assets/branding/obo.svg'
alt: 'Website Icon'
tags: ["first", "blogging"]
---
Welcome to my _new blog_ this is a test post while I make the framework.