add blog button

This commit is contained in:
nelle 2024-02-17 19:44:02 -07:00
parent c376c0eb83
commit 4681ed7441
10 changed files with 314 additions and 279 deletions

6
.vscode/launch.json vendored
View file

@ -1,6 +1,12 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro build",
"name": "Build prod",
"request": "launch",
"type": "node-terminal"
},
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",

56
dist/about/index.html vendored
View file

@ -18,41 +18,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

56
dist/blog/index.html vendored
View file

@ -18,41 +18,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

View file

@ -17,41 +17,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

56
dist/index.html vendored
View file

@ -17,41 +17,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

View file

@ -17,41 +17,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

View file

@ -14,41 +14,43 @@
<link rel="stylesheet" href="/_astro/about.4daafeb6.css" /><script type="module">document.addEventListener("DOMContentLoaded",()=>{Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0).forEach(t=>{t.addEventListener("click",()=>{const e=t.dataset.target,a=document.getElementById(e);t.classList.toggle("is-active"),a.classList.toggle("is-active")})})});
</script></head>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<center>
<h1 class="title">My First Blog Post</h1>
<h2 class="subtitle"><em>Summary: This is the first post of my new blog. - Written by LimePotato on 2023-10-29</em></h2>

View file

@ -14,41 +14,43 @@
<link rel="stylesheet" href="/_astro/about.4daafeb6.css" /><script type="module">document.addEventListener("DOMContentLoaded",()=>{Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0).forEach(t=>{t.addEventListener("click",()=>{const e=t.dataset.target,a=document.getElementById(e);t.classList.toggle("is-active"),a.classList.toggle("is-active")})})});
</script></head>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<center>
<h1 class="title">My Second Blog Post</h1>
<h2 class="subtitle"><em>Summary: This is the second post of my new blog. - Written by LimePotato on 2023-10-29</em></h2>

View file

@ -18,41 +18,43 @@
</script></head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" 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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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 class="navbar-end"><!--
</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>-->
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<section class="section">
<div class="container">

View file

@ -1,58 +1,71 @@
---
---
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="/assets/profileimages/lunanelle.jpeg" style="border-radius: 20%">
<span class="text-gradient">LimePot</span>
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img
src="/assets/profileimages/lunanelle.jpeg"
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 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 class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</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"><!--
</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>-->
</div>
</div>
</div>
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<script>document.addEventListener('DOMContentLoaded', () => {
</div>
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
<!-- 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', () => {
// 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);
// 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');
});
// 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>
});
});
</script>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->