Move more styles to own files

Adjust styles as usual

src/components/Card.astro

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

src/components/Certificate.astro

@@ -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>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-    <div class="certificate-front">
+        <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) => (
+                {certificate.data.skills.map((skill: string) => ( <li class="pill">{skill}</li> ))}
-                    <li class="pill">{skill}</li>
-                ))}
             </ul>
         )}
 
-        {certificate.data.link && (
+        {certificate.data.link && ( <a href={certificate.data.link} class="button">View</a> )}
-            <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>

src/components/HomeButton.astro

@@ -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-top-left-radius: 0;
-            /*border-bottom-left-radius: 0;*/
+            border-bottom-left-radius: 0;
         }
     }
 </style>

src/components/Music.astro

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

src/styles/_button.scss

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

src/styles/_certificate.scss

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

src/styles/_music.scss

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

src/styles/styles.scss

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