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

Button style

Browse source 
Adjust Music component JS
aurgh
This commit is contained in:
Michał 2024-05-23 20:10:08 +01:00
parent 79c55fc916
commit 6a88af6864
13 changed files with 115 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/banner-alt.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 MiB

44
src/components/Music.astro
View file

@ -1,44 +1,48 @@
---
---
<a id="current-music" href="https://www.last.fm/user/Fluffy_Bean_">
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
<img src="/leg.webp" alt="Track cover art" id="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>
<li id="music-title">Track Name</li>
<li id="music-artist">by Artist</li>
<li id="music-album">on Album</li>
</ul>
</a>
<script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
document.addEventListener("DOMContentLoaded", async () => {
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
const image= document.querySelector("#current-music-image") as HTMLImageElement;
const title = document.querySelector("#current-music-title") as HTMLParagraphElement;
const artist = document.querySelector("#current-music-artist") as HTMLParagraphElement;
const album = document.querySelector("#current-music-album") as HTMLParagraphElement;
image.src = data["track"]["image"][1]["#text"];
title.innerText = `Listening to ${data["track"]["name"]}`;
artist.innerText = `by ${data["track"]["artist"]["#text"]}`;
album.innerText = `on ${data["track"]["album"]["#text"]}`;
( <HTMLImageElement>document.querySelector("#music-image") ).src = data["track"]["image"][1]["#text"];
( <HTMLParagraphElement>document.querySelector("#music-title") ).innerText = `Listening to ${data["track"]["name"]}`;
( <HTMLParagraphElement>document.querySelector("#music-artist") ).innerText = `by ${data["track"]["artist"]["#text"]}`;
( <HTMLParagraphElement>document.querySelector("#music-album") ).innerText = `on ${data["track"]["album"]["#text"]}`;
});
</script>
<style lang="scss">
@import "../styles/vars.scss";
#current-music {
#music {
padding: 16px;
width: unset;
height: unset;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: unset;
text-decoration: none;
border-radius: $radius;
background-color: $gray;
color: $light;
&:before {
border-radius: $radius;
}
> img {
margin-right: 16px;
@ -64,7 +68,7 @@
}
}
#current-music-title {
#music-title {
font-weight: bold;
}
</style>

1
src/env.d.ts vendored
View file

@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

5
src/layouts/Layout.astro
View file

@ -40,9 +40,12 @@ const { title, src, alt } = Astro.props;
.banner {
margin: 0 -16px;
background-color: $gray;
height: 700px;
background-color: rgba($light, 0.01);
box-shadow: 0 8px 8px rgba(#000, 0.3);
> img {
width: 100%;
height: 100%;

75
src/pages/index.astro
View file

@ -12,65 +12,59 @@ const projects = await getCollection('projects');
const posts = await getCollection('posts');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
<h1>Leggy Land</h1>
<p>Made with Coffee, lots of it.</p>
<div style="margin: 16px 0">
<Music />
<Music client:load />
</div>
<section>
<h2>Who am I</h2>
<p>My name is Fluffy, I'm an 19-year-old nerd, who likes to code and tinker with computers!</p>
<p>My name is Fluffy or Michał, I'm 19 and like 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>
<p>I mainly do website stuff, work with the front and backend, but I also like networking and breaking things</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>
<p>My favorite language currently is Go, but I also know a few other languages that are listed below!</p>
<br>
<p>I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.</p>
<p>I use Arch btw.</p>
</section>
<section>
<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>
<h2>Find me on</h2>
<ul class="pill-list">
<li><a class="button" href="#">Twitter</a></li>
<li><a class="button" href="#">BlueSky</a></li>
<li><a class="button" href="#">Discord</a></li>
<li><a class="button" 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 class="pill-list">
{tools.map(tool => ( <li class="pill large">{tool}</li> ))}
</ul>
</section>
<section>
<h2>Languages</h2>
<ul role="list" class="pill-list">
{languages.map(language => (
<li class="pill large">{language}</li>
))}
<ul class="pill-list">
{languages.map(language => ( <li class="pill large">{language}</li> ))}
</ul>
</section>
<section>
<h2>Frameworks</h2>
<ul role="list" class="pill-list">
{frameworks.map(framework => (
<li class="pill large">{framework}</li>
))}
<ul class="pill-list">
{frameworks.map(framework => ( <li class="pill large">{framework}</li> ))}
</ul>
</section>
<section>
<h2>Projects</h2>
<ul role="list" class="project-list">
<ul class="project-list">
{projects.map(project => (
<Card
href=`/projects/${project.slug}`
@ -79,12 +73,12 @@ const posts = await getCollection('posts');
/>
))}
</ul>
<a href="/projects" id="see-all-projects">See Projects</a>
<a class="button" id="see-all-projects" href="/projects">See Projects</a>
</section>
<section>
<h2>Recent Posts</h2>
<ul role="list" class="project-list">
<ul class="project-list">
{posts.map(project => (
<Card
href=`/posts/${project.slug}`
@ -93,7 +87,7 @@ const posts = await getCollection('posts');
/>
))}
</ul>
<a href="/posts" id="see-all-posts">See Posts</a>
<a class="button" id="see-all-posts" href="/posts">See Posts</a>
</section>
</Layout>
@ -105,6 +99,10 @@ const posts = await getCollection('posts');
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
> li {
list-style: none;
}
}
.project-list {
@ -118,26 +116,5 @@ const posts = await getCollection('posts');
#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>

23
src/pages/posts/[...slug].astro
View file

@ -17,7 +17,7 @@ const { post } = Astro.props;
---
<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
<a id="back" href="/">Back</a>
<a class="button" href="/" id="back">Back</a>
<h1>{post.data.title}</h1>
<p>{post.data.description}</p>
<ul id="tags">
@ -37,27 +37,6 @@ const { post } = Astro.props;
#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 {

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

@ -8,7 +8,7 @@ const posts = await getCollection('posts');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<a id="back" href="/">Back</a>
<a class="button" id="back" href="/">Back</a>
<h1>All Posts</h1>
<p>Some regrettable, some not so bad...</p>
@ -37,26 +37,5 @@ const posts = await getCollection('posts');
#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>

23
src/pages/projects/[...slug].astro
View file

@ -17,7 +17,7 @@ const { project } = Astro.props;
---
<Layout title="Leggy Land" src={project.data.image.url} alt={project.data.image.alt}>
<a id="back" href="/">Back</a>
<a class="button" id="back" href="/">Back</a>
<h1>{project.data.title}</h1>
<p>{project.data.description}</p>
@ -38,27 +38,6 @@ const { project } = Astro.props;
#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 {

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

@ -8,7 +8,7 @@ const projects = await getCollection('projects');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<a id="back" href="/">Back</a>
<a class="button" id="back" href="/">Back</a>
<h1>All Projects</h1>
<p>Too many, so many</p>
@ -37,26 +37,5 @@ const projects = await getCollection('projects');
#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>

52
src/styles/_button.scss Normal file
View file

@ -0,0 +1,52 @@
.button {
padding: 0 32px;
width: max-content;
height: 35px;
position: relative;
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: rgba($light, 0.05);
color: $light;
overflow: hidden;
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 9999px;
background-color: rgba($light, 0.05);
transform: scale(0);
opacity: 0;
pointer-events: none;
}
&:hover, &:focus-visible {
outline: 0 solid transparent;
&:before {
transform: scale(1);
opacity: 1;
transition: opacity 0.3s cubic-bezier(0,1,0,1), transform 0.5s cubic-bezier(0,1,0,1);
}
}
}

2
src/styles/_main.scss
View file

@ -9,6 +9,8 @@ main {
border-top-left-radius: $radius;
border-top-right-radius: $radius;
border: 2px solid $gray;
border-bottom: 0 solid transparent;
background-color: $dark;
box-shadow: 0 8px 8px rgba(#000, 0.3);

1
src/styles/styles.scss
View file

@ -1,5 +1,6 @@
@import "vars";
@import "reset";
@import "button";
@import "pill";
@import "main";

1
src/styles/vars.scss
View file

@ -2,5 +2,6 @@ $dark: #312620;
$gray: #382e28;
$light: #f0e7e4;
$orange: #f2672c;
$green: #1f2d23;
$radius: 4px;