Give into SCSS
This commit is contained in:
parent
25f07fd9bb
commit
f75f8a5bf0
52
package-lock.json
generated
52
package-lock.json
generated
|
@ -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"
|
||||
|
|
|
@ -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
2
src/_vars.scss
Normal file
|
@ -0,0 +1,2 @@
|
|||
$size-container: 640px;
|
||||
$size-modal: 480px;
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -6,6 +6,6 @@ export async function load({ params }) {
|
|||
return {
|
||||
content,
|
||||
title,
|
||||
date
|
||||
date,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue