mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-14 08:02:16 +00:00
Post, Project and index pages
Example posts
This commit is contained in:
parent
5970f11bcc
commit
d3dafddf74
21 changed files with 625 additions and 168 deletions
BIN
public/banner.webp
Normal file
BIN
public/banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,022 KiB |
BIN
public/leg.webp
Normal file
BIN
public/leg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -23,8 +23,10 @@ const { href, title, body } = Astro.props;
|
|||
<style lang="scss">
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
$corner-speed: 0.2s;
|
||||
|
||||
.link-card {
|
||||
height: 150px;
|
||||
height: 125px;
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -33,7 +35,6 @@ const { href, title, body } = Astro.props;
|
|||
box-shadow: 0 0 0 rgba(#000, 0);
|
||||
list-style: none;
|
||||
|
||||
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
> a {
|
||||
|
|
@ -41,6 +42,8 @@ const { href, title, body } = Astro.props;
|
|||
height: 100%;
|
||||
display: block;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: $radius;
|
||||
border: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
|
|
@ -59,40 +62,50 @@ const { href, title, body } = Astro.props;
|
|||
border-top: 2px solid $gray;
|
||||
border-left: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
background-image: linear-gradient(135deg, $dark, darken($dark, 1%));
|
||||
color: $light;
|
||||
|
||||
transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out;
|
||||
box-shadow: -4px -4px 0 rgba(#000, 0);
|
||||
|
||||
transition: right $corner-speed ease-in-out, bottom $corner-speed ease-in-out, box-shadow $corner-speed ease-in-out;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
z-index: +3;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
height: 2px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: calc(-150%);
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
|
||||
transform: rotate(-45deg);
|
||||
|
||||
background-color: #382e28;
|
||||
border-top: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
|
||||
transition: left 0.3s ease-in-out;
|
||||
transition: left $corner-speed ease-in-out, top $corner-speed ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
/*box-shadow: 0 8px 8px rgba(#000, 0.3);*/
|
||||
/*transform: translateY(-8px);*/
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.link-card-corner {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
box-shadow: -4px -4px 10px rgba(#000, 0.1);
|
||||
|
||||
&::after {
|
||||
top: 3px;
|
||||
left: calc(-50% + 2px);
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
58
src/components/Music.astro
Normal file
58
src/components/Music.astro
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
---
|
||||
|
||||
<div id="current-music">
|
||||
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
|
||||
<ul>
|
||||
<li id="current-music-title">Track Name</li>
|
||||
<li id="current-music-artist">by Artist</li>
|
||||
<li id="current-music-album">on Album</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
|
||||
const data = await request.json();
|
||||
|
||||
console.log(data);
|
||||
|
||||
document.getElementById("current-music-image").src = data["track"]["image"][1]["#text"];
|
||||
document.getElementById("current-music-title").innerText = `Listening to ${data["track"]["name"]}`;
|
||||
document.getElementById("current-music-artist").innerText = `by ${data["track"]["artist"]["#text"]}`;
|
||||
document.getElementById("current-music-album").innerText = `on ${data["track"]["album"]["#text"]}`;
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
#current-music {
|
||||
padding: 8px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
border-radius: $radius;
|
||||
border: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
|
||||
> img {
|
||||
margin-right: 16px;
|
||||
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> li {
|
||||
font-size: 16px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
name: string;
|
||||
}
|
||||
|
||||
const { name } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="pill">
|
||||
<span>{name}</span>
|
||||
</li>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
.pill {
|
||||
padding: 0 10px;
|
||||
|
||||
width: max-content;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
border-radius: 99999px;
|
||||
border: 2px solid rgba($light, 0.04);
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
28
src/content/content.ts
Normal file
28
src/content/content.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { z, defineCollection } from 'astro:content';
|
||||
|
||||
|
||||
const postsCollection = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
pubDate: z.date(),
|
||||
image: z.string().optional(),
|
||||
tags: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
const projectsCollection = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
image: z.string().optional(),
|
||||
tags: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
"posts": postsCollection,
|
||||
"projects": projectsCollection,
|
||||
};
|
||||
|
|
@ -2,12 +2,11 @@
|
|||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: This is an example Post
|
||||
author: GwaGwa
|
||||
description: "After learning some Astro, I couldn't stop!"
|
||||
description: "Blamby ford"
|
||||
pubDate: 2022-07-08
|
||||
image:
|
||||
url: "https://docs.astro.build/assets/arc.webp"
|
||||
alt: "Thumbnail of Astro arcs."
|
||||
pubDate: 2022-07-08
|
||||
tags:
|
||||
- "GwaGwa"
|
||||
- "Gaming"
|
||||
16
src/content/projects/example-2.md
Normal file
16
src/content/projects/example-2.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: Project 2
|
||||
description: Another one
|
||||
image:
|
||||
url: "https://docs.astro.build/assets/arc.webp"
|
||||
alt: "Thumbnail of Astro arcs."
|
||||
tags:
|
||||
- "GwaGwa"
|
||||
- "Gaming"
|
||||
- "Urchin"
|
||||
- "Fortnite"
|
||||
---
|
||||
|
||||
AURGH
|
||||
16
src/content/projects/example.md
Normal file
16
src/content/projects/example.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: Project 1
|
||||
description: Example Project Im working on
|
||||
image:
|
||||
url: "https://docs.astro.build/assets/arc.webp"
|
||||
alt: "Thumbnail of Astro arcs."
|
||||
tags:
|
||||
- "GwaGwa"
|
||||
- "Gaming"
|
||||
- "Urchin"
|
||||
- "Fortnite"
|
||||
---
|
||||
|
||||
Gay Balls even
|
||||
16
src/content/projects/gwagwa.md
Normal file
16
src/content/projects/gwagwa.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: GwaGwa
|
||||
description: :3
|
||||
image:
|
||||
url: "https://docs.astro.build/assets/arc.webp"
|
||||
alt: "Thumbnail of Astro arcs."
|
||||
tags:
|
||||
- "GwaGwa"
|
||||
- "Gaming"
|
||||
- "Urchin"
|
||||
- "Fortnite"
|
||||
---
|
||||
|
||||
gwagwa
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import "../styles/styles.scss";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -27,7 +27,7 @@ const { title, src, alt } = Astro.props;
|
|||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
{src && <Image src={src} alt={alt} inferSize={true} />}
|
||||
{src && <img src={src} alt={alt} />}
|
||||
</div>
|
||||
<main>
|
||||
<slot />
|
||||
|
|
@ -37,33 +37,11 @@ const { title, src, alt } = Astro.props;
|
|||
<style is:global lang="scss">
|
||||
@import "../styles/vars";
|
||||
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/*border-top: 2px solid $orange;*/
|
||||
/*border-bottom: 2px solid $orange;*/
|
||||
background-color: #261f1b;
|
||||
color: $light
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0 -16px;
|
||||
|
||||
background-color: $gray;
|
||||
height: 400px;
|
||||
height: 700px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
|
|
@ -75,45 +53,6 @@ const { title, src, alt } = Astro.props;
|
|||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin: -300px auto 0;
|
||||
padding: 32px;
|
||||
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
background-color: $dark;
|
||||
|
||||
box-shadow: 0 8px 8px rgba(#000, 0.3);
|
||||
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
|
||||
|
||||
> h1 {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
> hr {
|
||||
margin: 32px 0;
|
||||
|
||||
height: 2px;
|
||||
|
||||
border: 0 solid transparent;
|
||||
background-color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mainSlide {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0 32px;
|
||||
|
||||
|
|
@ -125,11 +64,18 @@ const { title, src, alt } = Astro.props;
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 32px 0;
|
||||
|
||||
border: 0 solid transparent;
|
||||
border-bottom: 2px solid $gray;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-bottom: 32px;
|
||||
|
||||
> h2 {
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import Layout from "./Layout.astro";
|
||||
import Pill from "../components/Pill.astro";
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
|
|
@ -10,8 +10,8 @@ const { frontmatter } = Astro.props;
|
|||
<p>By {frontmatter.author}</p>
|
||||
|
||||
<ul id="tags">
|
||||
{frontmatter.tags.map((item) => (
|
||||
<Pill name={item} />
|
||||
{frontmatter.tags.map(item => (
|
||||
<li class="pill">#{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
|
|
@ -38,12 +38,12 @@ const { frontmatter } = Astro.props;
|
|||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 2px solid $gray;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: transparent;
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,90 +1,109 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Pill from "../components/Pill.astro";
|
||||
import Music from "../components/Music.astro";
|
||||
|
||||
const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgres", "MySQL"];
|
||||
const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
|
||||
const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
|
||||
const projects = await getCollection('projects');
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land">
|
||||
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
|
||||
<h1>Leggy Land</h1>
|
||||
<p>Made with Coffee</p>
|
||||
<p>Made with Coffee, lots of it.</p>
|
||||
<div style="margin-top: 16px" />
|
||||
<Music />
|
||||
<div style="margin-top: 16px" />
|
||||
|
||||
<hr>
|
||||
<!--<hr>-->
|
||||
|
||||
<section>
|
||||
<h2>Who am I</h2>
|
||||
<p>
|
||||
My name is Fluffy, I'm an 18-year-old nerd, who likes to code and tinker with computers!
|
||||
<br /><br />
|
||||
I specialise in Front-End development, but also enjoy working with the back end. My Favorite framework currently is Flask, but this website runs on Django, lol
|
||||
<br /><br />
|
||||
My favorite language is Python, but I also know how to use PHP, HTML, CSS/Sass, JavaScript, Docker, SQL, Shell Scripting, and a little bit of Rust.
|
||||
<br /><br />
|
||||
I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.
|
||||
</p>
|
||||
<p>My name is Fluffy, I'm an 19-year-old nerd, who likes to code and tinker with computers!</p>
|
||||
<br>
|
||||
<p>I specialise in Front-End development, but also enjoy working with the back end. My Favorite framework currently is Flask, but this website runs on Django, lol</p>
|
||||
<br>
|
||||
<p>My favorite language is Python, but I also know how to use PHP, HTML, CSS/Sass, JavaScript, Docker, SQL, Shell Scripting, and a little bit of Rust.</p>
|
||||
<br>
|
||||
<p>I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Developer tools</h2>
|
||||
<ul role="list" class="language-list">
|
||||
<Pill name="Proxmox" />
|
||||
<Pill name="JetBrain IDEs" />
|
||||
<Pill name="Docker" />
|
||||
<h2>Social Media</h2>
|
||||
<ul role="list" class="pill-list">
|
||||
<li class="pill large"><a href="#">Twitter</a></li>
|
||||
<li class="pill large"><a href="#">BlueSky</a></li>
|
||||
<li class="pill large"><a href="#">Discord</a></li>
|
||||
<li class="pill large"><a href="#">Telegram</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tools</h2>
|
||||
<ul role="list" class="pill-list">
|
||||
{tools.map(tool => (
|
||||
<li class="pill large">{tool}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Languages</h2>
|
||||
<ul role="list" class="language-list">
|
||||
<Pill name="GoLang" />
|
||||
<Pill name="Python" />
|
||||
<Pill name="HTML" />
|
||||
<Pill name="TypeScript" />
|
||||
<ul role="list" class="pill-list">
|
||||
{languages.map(language => (
|
||||
<li class="pill large">{language}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Web Frameworks</h2>
|
||||
<ul role="list" class="language-list">
|
||||
<Pill name="Gin" />
|
||||
<Pill name="Echo" />
|
||||
<Pill name="Flask" />
|
||||
<Pill name="Svelte" />
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Game Frameworks</h2>
|
||||
<ul role="list" class="language-list">
|
||||
<Pill name="RayLib" />
|
||||
<h2>Frameworks</h2>
|
||||
<ul role="list" class="pill-list">
|
||||
{frameworks.map(framework => (
|
||||
<li class="pill large">{framework}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Projects</h2>
|
||||
<ul role="list" class="project-list">
|
||||
{projects.map(project => (
|
||||
<Card
|
||||
href=`/projects/${project.slug}`
|
||||
title={project.data.title}
|
||||
body={project.data.description}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<a href="/projects" id="see-all-projects">See Projects</a>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Recent Posts</h2>
|
||||
<ul role="list" class="project-list">
|
||||
<Card
|
||||
href="/projects/example"
|
||||
title="Python Gallery"
|
||||
body="Abandoned Python based image Gallery"
|
||||
title="Bruh"
|
||||
body="Lmao"
|
||||
/>
|
||||
<Card
|
||||
href="/projects/example"
|
||||
title="Unnamed game"
|
||||
body="First written in Python, then moved to Go + RayLib"
|
||||
/>
|
||||
<Card
|
||||
href="/projects/example"
|
||||
title="College Work"
|
||||
body="Aurgh"
|
||||
title="Aurgh"
|
||||
body="Blowing up Blandfords"
|
||||
/>
|
||||
</ul>
|
||||
<a href="/posts" id="see-all-posts">See Posts</a>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
.language-list {
|
||||
.pill-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -97,4 +116,31 @@ import Pill from "../components/Pill.astro";
|
|||
gap: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#see-all-projects,
|
||||
#see-all-posts {
|
||||
margin-top: 16px;
|
||||
margin-left: auto;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
71
src/pages/posts/[...slug].astro
Normal file
71
src/pages/posts/[...slug].astro
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const collection = await getCollection('posts')
|
||||
return collection.map(post => {
|
||||
return {
|
||||
params: { slug: post.slug },
|
||||
props: { post: post },
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
|
||||
<a id="back" href="/">Back</a>
|
||||
<h1>{post.data.title}</h1>
|
||||
<p>{post.data.description}</p>
|
||||
<ul id="tags">
|
||||
{post.data.tags.map(item => (
|
||||
<li class="pill">#{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<div>
|
||||
{post.body}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style is:global lang="scss">
|
||||
@import "../../styles/vars";
|
||||
|
||||
#back {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
#tags {
|
||||
padding-top: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
62
src/pages/posts/index.astro
Normal file
62
src/pages/posts/index.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Card from "../../components/Card.astro";
|
||||
|
||||
const posts = await getCollection('posts');
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
|
||||
<a id="back" href="/">Back</a>
|
||||
<h1>All Posts</h1>
|
||||
<p>Some regrettable, some not so bad...</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul role="list" class="project-list">
|
||||
{posts.map(project => (
|
||||
<Card
|
||||
href=`/projects/${project.slug}`
|
||||
title={project.data.title}
|
||||
body={project.data.description}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/vars.scss";
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#back {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/pages/projects/[...slug].astro
Normal file
72
src/pages/projects/[...slug].astro
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const collection = await getCollection('projects')
|
||||
return collection.map(project => {
|
||||
return {
|
||||
params: { slug: project.slug },
|
||||
props: { project: project },
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
const { project } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src={project.data.image.url} alt={project.data.image.alt}>
|
||||
<a id="back" href="/">Back</a>
|
||||
|
||||
<h1>{project.data.title}</h1>
|
||||
<p>{project.data.description}</p>
|
||||
<ul id="tags">
|
||||
{project.data.tags.map(item => (
|
||||
<li class="pill">#{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
<hr>
|
||||
|
||||
<div>
|
||||
{project.body}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style is:global lang="scss">
|
||||
@import "../../styles/vars";
|
||||
|
||||
#back {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
#tags {
|
||||
padding-top: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
62
src/pages/projects/index.astro
Normal file
62
src/pages/projects/index.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Card from "../../components/Card.astro";
|
||||
|
||||
const projects = await getCollection('projects');
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
|
||||
<a id="back" href="/">Back</a>
|
||||
<h1>All Projects</h1>
|
||||
<p>Too many, so many</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul role="list" class="project-list">
|
||||
{projects.map(project => (
|
||||
<Card
|
||||
href=`/projects/${project.slug}`
|
||||
title={project.data.title}
|
||||
body={project.data.description}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/vars.scss";
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
|
||||
gap: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#back {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/styles/_main.scss
Normal file
29
src/styles/_main.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
main {
|
||||
margin: -500px auto 0;
|
||||
padding: 32px;
|
||||
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
background-color: $dark;
|
||||
|
||||
box-shadow: 0 8px 8px rgba(#000, 0.3);
|
||||
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
|
||||
|
||||
> h1 {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mainSlide {
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
31
src/styles/_pill.scss
Normal file
31
src/styles/_pill.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.pill {
|
||||
padding: 0 10px;
|
||||
|
||||
width: max-content;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
border-radius: 99999px;
|
||||
border: 2px solid rgba($light, 0.04);
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
|
||||
list-style: none;
|
||||
|
||||
> a {
|
||||
//text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.pill.large {
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
23
src/styles/_reset.scss
Normal file
23
src/styles/_reset.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 16px;
|
||||
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #261f1b;
|
||||
color: $light
|
||||
}
|
||||
5
src/styles/styles.scss
Normal file
5
src/styles/styles.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "vars";
|
||||
@import "reset";
|
||||
|
||||
@import "pill";
|
||||
@import "main";
|
||||
Loading…
Add table
Reference in a new issue