dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix image size

Browse source
This commit is contained in:
Daniel Bulant 2022-08-22 21:24:53 +02:00
parent a093bafe0a
commit 14de7c0332
3 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/layouts/post.svelte
View file

@ -131,6 +131,9 @@
}
:global(body .post-layout p) {
@apply my-1em;
}
:global(body .post-layout p img) {
@apply inline;
}
main {
margin: 0 auto;

1
src/routes/index.svelte
View file

@ -340,6 +340,7 @@
.split ul {
min-width: 340px;
margin: 0;
list-style-type: none;
}
.also li {
height: 32px;

4
src/routes/posts/writing-personal-home-page/index.md
View file

@ -134,7 +134,7 @@ After a while (*oh wait it's already a year*) I wanted to write some blog posts.
The design from Carl was only a single page, but it did include some list of posts there (see the home page, also reused in the posts page), and I felt confident enough that I could code at least a text-first website without a design.
To more easily write blog posts without writing HTML, I decided to use <img src="/tech/markdown.png" alt="" aria-hidden="true" height="20px"> [Markdown](https://www.markdownguide.org/basic-syntax/).
To more easily write blog posts without writing HTML, I decided to use <img src="/tech/markdown.png" alt="" aria-hidden="true" style="height: 20px"> [Markdown](https://www.markdownguide.org/basic-syntax/).
To add more to that, I found [mdsvex](https://mdsvex.pngwn.io/), which allows one to use markdown from svelte, and use svelte from markdown.
Their website only specifies how to use it on classic Svelte (via rollup or webpack), but Svelte Kit hides this configuration (in addition to using vite in dev mode).
@ -256,7 +256,7 @@ First iteration of this new design wasn't actually Svelte Kit, but only ``plain'
This meant that the page was only client side, and the server only pre-compiled JS and sent only minimal HTML markup (which mostly just linked JS which did everything else). This meant the page didn't work without JS and took a bit to load.
To fix that, I later moved it into Svelte Kit page (Svelte does support SSR, but it's easier to use Svelte Kit) and used the `static` adapter which meant that all the pages are now prerendered and work without JS. This also means it's fast to load (especially when using CDN, such as <img src="/tech/cloudflare.png" alt="" aria-hidden="true" height="20px"> [Cloudflare](https://cloudflare.com), which this website does use. Not affiliated with them).
To fix that, I later moved it into Svelte Kit page (Svelte does support SSR, but it's easier to use Svelte Kit) and used the `static` adapter which meant that all the pages are now prerendered and work without JS. This also means it's fast to load (especially when using CDN, such as <img src="/tech/cloudflare.png" alt="" aria-hidden="true" style="height: 20px"> [Cloudflare](https://cloudflare.com), which this website does use. Not affiliated with them).
If you use the `adapter-auto`, deploying to Cloudflare pages should work nearly as is, you just need to set `NODE_VERSION` environment variable to `14` or `16`, as it's by default set to `12` which is too old for Svelte kit to work.