Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-01-14 02:25:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Markdown reset

Browse source 
Move home button to its own component thang
CSS reset stufffffff
Leg
This commit is contained in:
Michał 2024-05-25 15:06:25 +01:00
parent b491b07bea
commit 8c02e380d0
11 changed files with 213 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/HomeButton.astro Normal file
View file

@ -0,0 +1,15 @@
---
---
<a class="button" href="/" id="home">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
</svg>
Home
</a>
<style lang="scss">
#home {
margin-bottom: 32px;
}
</style>

110
src/content/posts/code-examples.md Normal file
View file

@ -0,0 +1,110 @@
---
title: Code Examples
description: Aurghhhhhh
pubDate: 2022-07-08
image:
url: https://docs.astro.build/assets/arc.webp
alt: Tennis balls
tags:
- Gaybo
---
Penitc
```astro
---
import { getPosts } from "../../utils";
import Layout from "../../layouts/Layout.astro";
import Markdown from "../../layouts/Markdown.astro";
export async function getStaticPaths() {
const collection = await getPosts("projects");
return collection.map((post, i) => ({
params: { slug: post.slug },
props: {
post: post,
prev: i > 0 ? collection[i - 1] : undefined,
next: i < collection.length - 1 ? collection[i + 1] : undefined
}
}));
}
const { post, prev, next } = Astro.props;
---
<Layout title=`Leggy Land - ${post.data.title}` src={post.data.image.url} alt={post.data.image.alt}>
<Markdown {post} {prev} {next} base="/projects" />
</Layout>
```
```scss
.astro-code {
padding: 36px 8px 8px;
position: relative;
display: block;
font-size: 13px;
border-radius: $radius;
&::before {
content: "lang: " attr(data-language);
padding: 4px 8px;
width: 100%;
height: 28px;
position: absolute;
top: 0;
left: 0;
font-size: 13px;
background-color: $gray;
color: $light;
}
}
```
```go
func (p *penTool) Render() raylib.Texture2D {
offset := raylib.Vector2Scale(canvas.Offset, -1)
texture := raylib.LoadRenderTexture(int32(canvas.Size.X), int32(canvas.Size.Y))
raylib.BeginTextureMode(texture)
raylib.ClearBackground(raylib.Fade(raylib.Black, 0))
for i := 0; i < len(p.Points)-1; i++ {
startPointOffset := raylib.Vector2Add(p.Points[i], offset)
endPointOffset := raylib.Vector2Add(p.Points[i+1], offset)
raylib.DrawLineEx(startPointOffset, endPointOffset, p.Size, p.Color)
raylib.DrawCircle(int32(startPointOffset.X), int32(startPointOffset.Y), p.Size/2, p.Color)
}
if len(p.Points) > 0 {
endPointOffset := raylib.Vector2Add(p.Points[len(p.Points)-1], offset)
raylib.DrawCircle(int32(endPointOffset.X), int32(endPointOffset.Y), p.Size/2, p.Color)
}
raylib.EndTextureMode()
return texture.Texture
}
```
```python
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=255)
slug = models.SlugField()
body = models.TextField()
date = models.DateTimeField(auto_now_add=True)
thumb = models.ImageField(default="default.png", blank=True)
published = models.BooleanField(default=False)
def __str__(self):
return self.title
```

81
src/layouts/Markdown.astro
View file

@ -1,4 +1,6 @@
---
import HomeButton from "../components/HomeButton.astro";
interface Props {
post: any,
}
@ -8,36 +10,44 @@ const { post, prev, next, base } = Astro.props;
const { Content } = await post.render();
---
<a class="button" href="/" id="home">Home</a>
<HomeButton />
<div class="header">
<h1>{post.data.title}</h1>
<p>{post.data.description}</p>
<ul id="tags" class="pill-list">
{post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
<ul id="tags" class="pill-list" role="list">
{post.data.tags.map((item: string) => (
<li class="pill">#{item}</li>
))}
</ul>
</div>
<hr>
<div id="markdown">
<Content />
<div style="margin-bottom: 32px" />
<Content />
<div style="margin-top: 32px" />
</div>
<hr>
<ul id="controls">
<ul id="controls" role="list">
<li>
{prev && (
<a class="button" href=`${base}/${prev.slug}` id="prev">
{ prev.data.title }
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
Last
<!--{ prev.data.title }-->
</a>
)}
</li>
<li>
{next && (
<a class="button" href=`${base}/${next.slug}` id="next">
{ next?.data.title }
<!--{ next?.data.title }-->
Next
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
</a>
)}
</li>
@ -46,35 +56,44 @@ const { Content } = await post.render();
<style is:global lang="scss">
@import "../styles/vars";
#home { margin-bottom: 32px; }
#controls {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
> li {
list-style: none;
> li > .button {
// background-color: transparent;
// padding: 0 16px;
> .button {
// background-color: transparent;
}
min-width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
}
}
#markdown {
margin: -32px 0;
display: block;
flex-grow: 1;
h1, h2, h3, h4, h5, h6 {
padding-bottom: 8px;
:target {
scroll-margin-block: 5ex;
}
h2, h3, h4, h5, h6 {
padding-top: 16px;
h1, h2, h3, h4, h5, h6 {
margin-top: 16px;
margin-bottom: 8px;
line-height: 1.1;
text-wrap: balance;
}
p {
padding-bottom: 8px;
margin-bottom: 8px;
}
a {
@ -85,6 +104,11 @@ const { Content } = await post.render();
&:hover, &:focus-visible {
text-decoration: underline;
}
&:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
}
ol, ul {
@ -112,7 +136,9 @@ const { Content } = await post.render();
blockquote {
margin: 8px 0 8px 16px;
padding: 0 8px;
font-style: italic;
border-left: 2px solid $orange;
}
@ -168,28 +194,35 @@ const { Content } = await post.render();
// }
.astro-code {
padding: 36px 8px 8px;
margin: 16px 0;
padding: 40px 8px 8px;
position: relative;
display: block;
font-size: 13px;
border-radius: $radius;
&::before {
content: "lang: " attr(data-language);
content: attr(data-language);
padding: 4px 8px;
padding: 4px 16px;
width: 100%;
width: max-content;
height: 28px;
position: absolute;
top: 0;
top: 4px;
left: 0;
font-size: 13px;
text-transform: capitalize;
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
background-color: $gray;
color: $light;
}

14
src/pages/index.astro
View file

@ -39,7 +39,7 @@ const posts = await getPosts("posts");
</div>
<div class="section">
<ul class="pill-list">
<ul class="pill-list" role="list">
<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
<li><a class="button" href="https://bsky.app/profile/leggy.dev" target="_blank">BlueSky</a></li>
<li><a class="button" href="https://t.me/Fluffy_Bean" target="_blank">Telegram</a></li>
@ -49,7 +49,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Tools</h2>
<ul class="pill-list">
<ul class="pill-list" role="list">
{tools.map(tool => (
<li class="pill large">
{tool}
@ -60,7 +60,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Languages</h2>
<ul class="pill-list">
<ul class="pill-list" role="list">
{languages.map(language => (
<li class="pill large">
{language}
@ -71,7 +71,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Frameworks</h2>
<ul class="pill-list">
<ul class="pill-list" role="list">
{frameworks.map(framework => (
<li class="pill large">
{framework}
@ -82,7 +82,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Certificates</h2>
<ul class="project-list">
<ul class="project-list" role="list">
{certificates.map(certificate => (
<li>
<Certificate {certificate} />
@ -93,7 +93,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Projects</h2>
<ul class="project-list">
<ul class="project-list" role="list">
{projects.slice(0, 2).map(project => (
<Card
href=`/projects/${project.slug}`
@ -107,7 +107,7 @@ const posts = await getPosts("posts");
<div class="section">
<h2>Recent Posts</h2>
<ul class="project-list">
<ul class="project-list" role="list">
{posts.slice(0, 2).map(project => (
<Card
href=`/posts/${project.slug}`

7
src/pages/leg.astro
View file

@ -1,10 +1,11 @@
---
import Layout from "../layouts/Layout.astro";
import BannerImg from "../../../public/banner-alt.webp";
import HomeButton from "../components/HomeButton.astro";
---
<Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" src={BannerImg} alt="Temporary Banner">
<a class="button" href="/" id="home">Home</a>
<HomeButton />
<div class="header">
<h1>Maned Wolf Jumpscare</h1>
@ -15,7 +16,3 @@ import BannerImg from "../../../public/banner-alt.webp";
<img src="/leg.jpg" alt="Two Maned wolfs having a disagreement" />
</Layout>
<style lang="scss">
#home { margin-bottom: 32px; }
</style>

7
src/pages/posts/index.astro
View file

@ -1,6 +1,7 @@
---
import { getPosts } from "../../utils";
import Layout from "../../layouts/Layout.astro";
import HomeButton from "../../components/HomeButton.astro";
import Card from "../../components/Card.astro";
import BannerImg from "../../../public/banner-alt.webp";
@ -8,7 +9,7 @@ const posts = await getPosts("posts");
---
<Layout title="Leggy Land - All Posts" src={BannerImg} alt="Temporary Banner">
<a class="button" id="home" href="/">Home</a>
<HomeButton />
<div class="header">
<h1>All Posts</h1>
@ -27,7 +28,3 @@ const posts = await getPosts("posts");
))}
</ul>
</Layout>
<style lang="scss">
#home { margin-bottom: 32px; }
</style>

7
src/pages/projects/index.astro
View file

@ -3,12 +3,13 @@ import { getPosts } from "../../utils";
import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro";
import BannerImg from "../../../public/banner-alt.webp";
import HomeButton from "../../components/HomeButton.astro";
const projects = await getPosts("projects");
---
<Layout title="Leggy Land - All Projects" src={BannerImg} alt="Temporary Banner">
<a class="button" id="home" href="/">Home</a>
<HomeButton />
<div class="header">
<h1>All Projects</h1>
@ -27,7 +28,3 @@ const projects = await getPosts("projects");
))}
</ul>
</Layout>
<style lang="scss">
#home { margin-bottom: 32px; }
</style>

3
src/styles/_button.scss
View file

@ -1,5 +1,5 @@
.button {
padding: 0 32px;
padding: 0 20px;
width: max-content;
height: 35px;
@ -12,6 +12,7 @@
align-items: center;
gap: 8px;
font-size: 14px;
text-decoration: none;
border-radius: 9999px;

8
src/styles/_pill_list.scss
View file

@ -1,11 +1,9 @@
.pill-list {
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
// if the anchor tag has the pill class
> li {
list-style: none;
}
gap: 8px;
}

4
src/styles/_project_list.scss
View file

@ -5,8 +5,4 @@
flex-direction: column;
gap: 16px;
> li {
list-style: none;
}
}

13
src/styles/_reset.scss
View file

@ -10,6 +10,9 @@
html {
min-height: 100vh;
font-size: 100%;
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
}
body {
@ -23,3 +26,13 @@ body {
background-color: #261f1b;
color: $light;
}
ul[role='list'],
ol[role='list'] {
list-style: none;
}
img, picture {
max-width: 100%;
display: block;
}