Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-06-26 20:06:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Markdown reset

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

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