Move more styling out of astro files, and into SCSS files

src/layouts/Layout.astro

@@ -43,51 +43,3 @@ const { title, src, alt } = Astro.props;
         </main>
     </body>
 </html>
-
-<style is:global lang="scss">
-    @import "../styles/vars";
-
-    .banner {
-        margin: 0 -16px;
-
-        position: relative;
-
-        height: 700px;
-
-        box-shadow: 0 8px 8px rgba(#000, 0.3);
-
-        overflow: hidden;
-
-        > img {
-            width: 100%;
-            height: 100%;
-
-            position: absolute;
-            top: 0;
-            left: 0;
-
-            display: block;
-
-            object-fit: cover;
-        }
-    }
-
-    hr {
-        margin: 32px 0;
-
-        border: 0 solid transparent;
-        border-bottom: 2px solid $gray;
-    }
-
-    section {
-        padding-bottom: 32px;
-
-        > h2 {
-            padding-bottom: 10px;
-        }
-
-        &:last-of-type {
-            padding-bottom: 0;
-        }
-    }
-</style>

src/pages/index.astro

@@ -15,11 +15,11 @@ const posts = await getPosts("posts");
 	<h1>Leggy Land</h1>
 	<p>Made with Coffee, lots of it.</p>
 
-	<div style="margin: 16px 0">
+	<div style="margin: 32px 0">
 		<Music />
 	</div>
 
-	<section>
+	<div class="section">
 		<h2>Who am I</h2>
 		<p>
 			My name is Michał, I go by Fluffy, I'm 19 and I like computers
@@ -30,9 +30,9 @@ const posts = await getPosts("posts");
 			<br><br>
 			I use Arch btw.
 		</p>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Find me on</h2>
 		<ul class="pill-list">
 			<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
@@ -40,30 +40,30 @@ const posts = await getPosts("posts");
 			<li><a class="button" href="https://t.me/Fluffy_Bean" target="_blank">Telegram</a></li>
 			<li><a class="button" href="https://github.com/Fluffy-Bean" target="_blank">GitHub</a></li>
 		</ul>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Tools</h2>
 		<ul class="pill-list">
 			{tools.map(tool => ( <li class="pill large">{tool}</li> ))}
 		</ul>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Languages</h2>
 		<ul class="pill-list">
 			{languages.map(language => ( <li class="pill large">{language}</li> ))}
 		</ul>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Frameworks</h2>
 		<ul class="pill-list">
 			{frameworks.map(framework => ( <li class="pill large">{framework}</li> ))}
 		</ul>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Projects</h2>
 		<ul class="project-list">
 			{projects.slice(0, 2).map(project => (
@@ -75,9 +75,9 @@ const posts = await getPosts("posts");
 			))}
 		</ul>
 		<a class="button" id="see-all-projects" href="/projects">All Projects</a>
-	</section>
+	</div>
 
-	<section>
+	<div class="section">
 		<h2>Recent Posts</h2>
 		<ul class="project-list">
 			{posts.slice(0, 2).map(project => (
@@ -89,7 +89,7 @@ const posts = await getPosts("posts");
 			))}
 		</ul>
 		<a class="button" id="see-all-posts" href="/posts">All Posts</a>
-	</section>
+	</div>
 </Layout>
 
 <style lang="scss">

src/pages/posts/index.astro

@@ -15,15 +15,10 @@ const posts = await getCollection('posts');
 
     <hr>
 
-    <!--<div class="search-box">-->
-    <!--    <label for="search">Search</label>-->
-    <!--    <input type="text" id="search" name="search" />-->
-    <!--</div>-->
-
     <ul role="list" class="project-list">
         {posts.map(project => (
             <Card
-                href=`/projects/${project.slug}`
+                href=`/posts/${project.slug}`
                 title={project.data.title}
                 body={project.data.description}
             />
@@ -32,59 +27,5 @@ const posts = await getCollection('posts');
 </Layout>
 
 <style lang="scss">
-    @import "../../styles/vars.scss";
-
-    .search-box {
-        padding: 8px 0 32px;
-
-        width: 100%;
-
-        position: relative;
-
-        > label {
-            padding: 0 8px;
-
-            position: absolute;
-            top: -4px;
-            left: 20px;
-
-            background: $dark;
-
-            pointer-events: none;
-            z-index: +1;
-        }
-
-        > input {
-            padding: 0 16px;
-
-            width: 100%;
-            height: 35px;
-
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-
-            text-decoration: none;
-
-            border-radius: 9999px;
-            border: 2px solid $gray;
-            background-color: $dark;
-            color: $light;
-
-            overflow: hidden;
-
-            &:hover {
-                border: 2px solid lighten($gray, 1%);
-            }
-
-            &:focus-visible {
-                outline: 0 solid transparent;
-                border: 2px solid $light;
-            }
-        }
-    }
-
     #home { margin-bottom: 32px; }
 </style>

src/styles/_banner.scss

@@ -0,0 +1,24 @@
+.banner {
+    margin: 0 -16px;
+
+    position: relative;
+
+    height: 700px;
+
+    box-shadow: 0 8px 8px rgba(#000, 0.3);
+
+    overflow: hidden;
+
+    > img {
+        width: 100%;
+        height: 100%;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        display: block;
+
+        object-fit: cover;
+    }
+}

src/styles/_main.scss

@@ -18,19 +18,14 @@ main {
     box-shadow: 0 8px 8px rgba(#000, 0.3);
     z-index: 10;
 
-    // causes problems on chrome
-    //animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
-
     > h1 {
         padding-bottom: 8px;
     }
-}
 
-@keyframes mainSlide {
+    > hr {
-    0% {
+        margin: 32px 0;
-        transform: translateY(100px);
+
+        border: 0 solid transparent;
+        border-bottom: 2px solid $gray;
     }
-    100% {
+}
-        transform: translateY(0);
-    }
-}

src/styles/_section.scss

@@ -0,0 +1,11 @@
+.section {
+    padding-bottom: 32px;
+
+    > h2 {
+        padding-bottom: 10px;
+    }
+
+    &:last-of-type {
+        padding-bottom: 0;
+    }
+}

src/styles/styles.scss

@@ -1,8 +1,10 @@
 @import "vars";
-@import "reset";
 
+@import "reset";
+@import "main";
+@import "banner";
+@import "section";
 @import "button";
 @import "pill";
 @import "pill_list";
 @import "project_list";
-@import "main";