Give into SCSS

This commit is contained in:
Kaan Barmore-Genç 2024-05-06 23:58:54 -05:00
parent 25f07fd9bb
commit f75f8a5bf0
Signed by: kaan
GPG key ID: B2E280771CD62FCF
10 changed files with 93 additions and 31 deletions

52
package-lock.json generated
View file

@ -26,6 +26,7 @@
"phosphor-svelte": "^1.3.0",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.0",
"sass": "^1.77.0",
"svelte": "^4.2.5",
"svelte-check": "^3.6.0",
"tslib": "^2.6.2",
@ -629,7 +630,7 @@
},
"node_modules/anymatch": {
"version": "3.1.3",
"dev": true,
"devOptional": true,
"license": "ISC",
"dependencies": {
"normalize-path": "^3.0.0",
@ -697,7 +698,7 @@
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -724,7 +725,7 @@
},
"node_modules/braces": {
"version": "3.0.2",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"fill-range": "^7.0.1"
@ -789,7 +790,7 @@
},
"node_modules/chokidar": {
"version": "3.5.3",
"dev": true,
"devOptional": true,
"funding": [
{
"type": "individual",
@ -815,7 +816,7 @@
},
"node_modules/chokidar/node_modules/glob-parent": {
"version": "5.1.2",
"dev": true,
"devOptional": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@ -1373,7 +1374,7 @@
},
"node_modules/fill-range": {
"version": "7.0.1",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"to-regex-range": "^5.0.1"
@ -1570,6 +1571,12 @@
"node": ">=12.0.0"
}
},
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
"devOptional": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"dev": true,
@ -1619,7 +1626,7 @@
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"binary-extensions": "^2.0.0"
@ -1630,7 +1637,7 @@
},
"node_modules/is-extglob": {
"version": "2.1.1",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -1638,7 +1645,7 @@
},
"node_modules/is-glob": {
"version": "4.0.3",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"is-extglob": "^2.1.1"
@ -1649,7 +1656,7 @@
},
"node_modules/is-number": {
"version": "7.0.0",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=0.12.0"
@ -1945,7 +1952,7 @@
},
"node_modules/normalize-path": {
"version": "3.0.0",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -2070,7 +2077,7 @@
},
"node_modules/picomatch": {
"version": "2.3.1",
"dev": true,
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@ -2358,7 +2365,7 @@
},
"node_modules/readdirp": {
"version": "3.6.0",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
@ -2496,6 +2503,23 @@
"rimraf": "bin.js"
}
},
"node_modules/sass": {
"version": "1.77.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz",
"integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/semver": {
"version": "7.5.4",
"dev": true,
@ -2894,7 +2918,7 @@
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"is-number": "^7.0.0"

View file

@ -26,6 +26,7 @@
"phosphor-svelte": "^1.3.0",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.0",
"sass": "^1.77.0",
"svelte": "^4.2.5",
"svelte-check": "^3.6.0",
"tslib": "^2.6.2",

2
src/_vars.scss Normal file
View file

@ -0,0 +1,2 @@
$size-container: 640px;
$size-modal: 480px;

View file

@ -40,9 +40,6 @@ html {
--animation-speed: 0.2s;
--animation-type: ease-in-out;
--size-container: 640px;
--size-modal: 480px;
--shadow-luminosity: calc(100% - var(--color-bg-l));
--shadow-small: 0.5px 1px 1px
hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
@ -130,6 +127,5 @@ h6 {
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

View file

@ -1,5 +1,5 @@
<script lang="ts">
import '../app.css';
import '../app.scss';
import '../typography.css';
import '../prism/gruvbox/light.css';
@ -9,13 +9,25 @@
</script>
<Header />
<main><slot /></main>
<div class="main-wrapper">
<main><slot /></main>
</div>
<Spacer />
<Footer />
<style>
<style lang="scss">
@import '../vars';
main {
margin: 2rem auto;
max-width: var(--size-container);
margin: 0 0 6rem 0;
max-width: min($size-container, 100vw);
display: flex;
flex-direction: column;
padding: 0 2rem;
}
.main-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
</style>

View file

@ -12,9 +12,11 @@
</div>
</footer>
<style>
<style lang="scss">
@import '../vars';
footer {
width: 100%;
width: 100vw;
padding: 2rem;
display: flex;
flex-direction: column;
@ -38,7 +40,7 @@
.row {
margin: 0 auto;
max-width: var(--size-container);
max-width: $size-container;
background-color: var(--color-bg);
padding: 1rem;
border-radius: 0.5rem;

View file

@ -24,7 +24,9 @@
<Button href="/portfolio/">Portfolio</Button>
</header>
<style>
<style lang="scss">
@import '../vars';
header {
display: flex;
flex-direction: row;
@ -33,6 +35,11 @@
gap: 2rem;
margin-bottom: -3rem;
}
@media (max-width: $size-container) {
header {
margin-bottom: unset;
}
}
.logo {
width: 12rem;

View file

@ -1,9 +1,20 @@
<script lang="ts">
import { format } from 'date-fns';
export let data;
</script>
<article>
<h1>{data.title}</h1>
<p>Published: {data.date}</p>
<time datetime={data.date}>
{format(new Date(data.date), 'MMMM d, yyyy')}
</time>
<svelte:component this={data.content} />
</article>
<style>
time {
display: block;
margin-bottom: 4rem;
}
</style>

View file

@ -6,6 +6,6 @@ export async function load({ params }) {
return {
content,
title,
date
date,
};
}

View file

@ -33,7 +33,7 @@
<time datetime={post.meta.date}>
{format(new Date(post.meta.date), 'MMMM d')}
</time>
<span>about {post.readingTime.text}</span>
<div class="">About {post.readingTime.text}</div>
</li>
</a>
{/each}
@ -55,9 +55,16 @@
</div>
<style>
/* Restore the color of everything under the post links, except the titles */
.posts a {
color: var(--color-text);
}
.posts a .post-title {
color: var(--color-primary);
}
time {
width: 8rem;
color: var(--color-text);
}
.pagination-controls {