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",

14
dist/about/index.html vendored
View file

@ -38,21 +38,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

14
dist/blog/index.html vendored
View file

@ -38,21 +38,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

View file

@ -37,21 +37,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

14
dist/index.html vendored
View file

@ -37,21 +37,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

View file

@ -37,21 +37,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

View file

@ -34,21 +34,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<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

@ -34,21 +34,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<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

@ -38,21 +38,23 @@
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
</div>
</div>
<div class="navbar-end"><!--
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
</div>
</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>
<!-- 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>
<section class="section">
<div class="container">

View file

@ -1,12 +1,22 @@
---
---
<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%">
<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">
<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>
@ -21,38 +31,41 @@
<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>
</div>
<div class="navbar-end"><!--
</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', () => {
<!-- 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);
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', () => {
$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');
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});</script>
});
</script>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
</nav>