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

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

Browse source
This commit is contained in:
Michał 2024-05-24 14:45:19 +01:00
parent e9d1191ec1
commit 2fa2bce317
7 changed files with 61 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/layouts/Layout.astro
View file

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

30
src/pages/index.astro
View file

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

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

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

24
src/styles/_banner.scss Normal file
View file

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

17
src/styles/_main.scss
View file

@ -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 {
0% {
transform: translateY(100px);
> hr {
margin: 32px 0;
border: 0 solid transparent;
border-bottom: 2px solid $gray;
}
100% {
transform: translateY(0);
}
}
}

11
src/styles/_section.scss Normal file
View file

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

6
src/styles/styles.scss
View file

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