mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-01-14 18:45:16 +00:00
Markdown reset
Move home button to its own component thang CSS reset stufffffff Leg
This commit is contained in:
parent
b491b07bea
commit
8c02e380d0
15
src/components/HomeButton.astro
Normal file
15
src/components/HomeButton.astro
Normal 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
110
src/content/posts/code-examples.md
Normal 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
|
||||
```
|
||||
|
|
@ -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;
|
||||
|
||||
> .button {
|
||||
> li > .button {
|
||||
// background-color: transparent;
|
||||
}
|
||||
// padding: 0 16px;
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,4 @@
|
|||
flex-direction: column;
|
||||
|
||||
gap: 16px;
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue