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

Move more styles to own files

Browse source 
Adjust styles as usual
This commit is contained in:
Michał 2024-05-27 12:12:09 +01:00
parent 909e2c0bf3
commit c6d0b80b5c
8 changed files with 122 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Card.astro
View file

@ -97,7 +97,6 @@ const date = new Date(post.data.pubDate);
&:hover, &:focus-within {
> a {
/*text-decoration: underline;*/
outline: none;
}

78
src/components/Certificate.astro
View file

@ -3,81 +3,25 @@ const { certificate } = Astro.props;
---
<div class="certificate">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M168,157.94h0a44,44,0,1,1,56-67.88h0V56a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V184a8,8,0,0,0,8,8H168Z" opacity="0.2"/><line x1="72" y1="136" x2="120" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="72" y1="104" x2="120" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="196" cy="124" r="44" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M168,192H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V90.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="168 157.94 168 224 196 208 224 224 224 157.94" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<div class="certificate-front">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<path d="M168,157.94h0a44,44,0,1,1,56-67.88h0V56a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V184a8,8,0,0,0,8,8H168Z" opacity="0.2"/>
<line x1="72" y1="136" x2="120" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="72" y1="104" x2="120" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<circle cx="196" cy="124" r="44" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M168,192H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V90.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="168 157.94 168 224 196 208 224 224 224 157.94" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<div>
<h3>{certificate.data.title}</h3>
<p>{certificate.data.achieved}</p>
<p>By: {certificate.data.provider}</p>
{certificate.data.skills && (
<ul class="pill-list">
{certificate.data.skills.map((skill: string) => (
<li class="pill">{skill}</li>
))}
{certificate.data.skills.map((skill: string) => ( <li class="pill">{skill}</li> ))}
</ul>
)}
{certificate.data.link && (
<a href={certificate.data.link} class="button">View</a>
)}
{certificate.data.link && ( <a href={certificate.data.link} class="button">View</a> )}
</div>
</div>
<style lang="scss">
@import "../styles/vars.scss";
.certificate {
padding: 16px;
height: 100%;
position: relative;
border-radius: $radius;
border: 2px solid $gray;
background-color: $dark;
color: $light;
overflow: hidden;
> svg {
width: 200px;
height: 200px;
position: absolute;
top: -37px;
left: -25px;
opacity: 0.03;
z-index: +1;
}
}
.certificate-front {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
text-decoration: none;
text-align: center;
z-index: +2;
> h3 {
margin-bottom: 4px;
}
> .pill-list {
margin-top: 4px;
justify-content: center;
}
> .button {
margin-top: 4px;
}
}
</style>

10
src/components/HomeButton.astro
View file

@ -8,9 +8,13 @@
Homepage
</a>
<div style="height: calc(35px + 8px - 32px + 32px)" />
<div />
<style lang="scss">
div {
height: calc(35px + 8px - 32px + 32px);
}
#home {
padding: 0 20px;
@ -22,8 +26,8 @@
border-bottom-left-radius: 0;
&:before {
/*border-top-left-radius: 0;*/
/*border-bottom-left-radius: 0;*/
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
</style>

60
src/components/Music.astro
View file

@ -1,13 +1,18 @@
---
import { Image } from "astro:assets";
import leg from "../assets/leg.webp";
---
<a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
<Image src={leg} width="64" height="64" loading="eager" alt="Track cover art" id="music-image" />
<img
src={leg}
width="64"
height="64"
loading="eager"
alt="Track cover art"
id="music-image"
/>
<ul>
<li id="music-title">Track Name</li>
<li id="music-title" style="font-weight: 600;">Track Name</li>
<li id="music-artist">by Artist</li>
<li id="music-album">on Album</li>
</ul>
@ -24,50 +29,3 @@ import leg from "../assets/leg.webp";
( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`;
});
</script>
<style lang="scss">
@import "../styles/vars.scss";
#music {
padding: 16px;
width: unset;
height: unset;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: unset;
text-decoration: none;
border-radius: $radius;
&:before {
border-radius: $radius;
}
> img {
margin-right: 16px;
width: 64px;
height: 64px;
border-radius: $radius;
}
> ul {
display: flex;
flex-direction: column;
> li {
font-size: 16px;
list-style: none;
}
}
}
#music-title {
font-weight: 600;
}
</style>

3
src/styles/_button.scss
View file

@ -17,7 +17,6 @@
border-radius: 9999px;
border: 0 solid transparent;
//border: 2px solid rgba($light, 0.04);
background-color: rgba($light, 0.04);
color: $light;
@ -34,7 +33,7 @@
left: 0;
border-radius: 9999px;
background-color: rgba($light, 0.04);
background-color: rgba($accent, 0.13);
opacity: 0;
transform: scaleX(0%);

54
src/styles/_certificate.scss Normal file
View file

@ -0,0 +1,54 @@
.certificate {
padding: 16px;
height: 100%;
position: relative;
border-radius: $radius;
border: 2px solid $gray;
background-color: $dark;
color: $light;
overflow: hidden;
> svg {
width: 200px;
height: 200px;
position: absolute;
top: -37px;
left: -25px;
opacity: 0.03;
z-index: +1;
}
> div {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
text-decoration: none;
text-align: center;
z-index: +2;
> h3 {
margin-bottom: 4px;
}
> .pill-list {
margin-top: 4px;
justify-content: center;
}
> .button {
margin-top: 4px;
}
}
}

38
src/styles/_music.scss Normal file
View file

@ -0,0 +1,38 @@
#music {
padding: 16px;
width: unset;
height: unset;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: unset;
text-decoration: none;
border-radius: $radius;
&:before {
border-radius: $radius;
}
> img {
margin-right: 16px;
width: 64px;
height: 64px;
border-radius: $radius;
}
> ul {
display: flex;
flex-direction: column;
> li {
font-size: 16px;
list-style: none;
}
}
}

2
src/styles/styles.scss
View file

@ -9,3 +9,5 @@
@import "pill";
@import "pill_list";
@import "project_list";
@import "music";
@import "certificate";