202310292134
This commit is contained in:
parent
e1bf484c46
commit
21fcd86ea9
7 changed files with 279 additions and 96 deletions
62
src/components/Card-noimg.astro
Executable file
62
src/components/Card-noimg.astro
Executable 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>→</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
42
src/components/Footer.astro
Normal 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
58
src/components/Header.astro
Normal 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>
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
---
|
---
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
}
|
}
|
||||||
|
|
@ -23,108 +25,14 @@ const { title } = Astro.props;
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<Header />
|
||||||
<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>
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
<center>
|
<Footer />
|
||||||
<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>
|
|
||||||
</html>
|
</html>
|
||||||
<style is:global>
|
<style is:global>
|
||||||
:root {
|
:root {
|
||||||
|
|
|
||||||
84
src/layouts/MDPost.astro
Executable file
84
src/layouts/MDPost.astro
Executable 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>
|
||||||
|
|
@ -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
13
src/pages/posts/post-1.md
Normal 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.
|
||||||
Loading…
Reference in a new issue