Markdown reset

Move home button to its own component thang
CSS reset stufffffff
Leg

src/components/HomeButton.astro

@@ -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>

src/content/posts/code-examples.md

@@ -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
+```

src/layouts/Markdown.astro

@@ -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">
+    <ul id="tags" class="pill-list" role="list">
-        {post.data.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
+        {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 {
+        > li > .button {
-            list-style: none;
+            // background-color: transparent;
+            // padding: 0 16px;
 
-            > .button {
+            min-width: 35px;
-                // background-color: transparent;
+            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;
             }

src/pages/index.astro

@@ -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}`

src/pages/leg.astro

@@ -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>

src/pages/posts/index.astro

@@ -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>

src/pages/projects/index.astro

@@ -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>

src/styles/_button.scss

@@ -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;

src/styles/_pill_list.scss

@@ -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
+    gap: 8px;
-    > li {
-        list-style: none;
-    }
 }

src/styles/_project_list.scss

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

src/styles/_reset.scss

@@ -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;
+}