diff --git a/2 b/2 new file mode 100644 index 0000000..bce4448 --- /dev/null +++ b/2 @@ -0,0 +1,135 @@ +@import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css'; +@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap'); + +.fraunces-me { + } + +body { + color: var(--rp-moon-text); + background: var(--rp-moon-base); + padding: 0; + margin: 0; + text-align: justify; +} + +pre { + background: var(--rp-moon-base); + border-radius: 0.5rem; +} + +a { + color: var(--rp-moon-iris); + text-decoration: none; +} + +a:visited { + color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85)) +} + +.nav { + margin: auto; + margin-top: 1rem; + + padding: 2rem; + max-width: 60rem; + width: calc(100%-4rem); + + font-family: "Fraunces", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + font-variation-settings: + "SOFT" 0, + "WONK" 0; + font-size:1.728rem; +} + +a.nav{ + margin: 1rem; + margin-left: 0rem; + padding-left: 0rem; + color: var(--rp-moon-text); +} + +.main { + background: var(--rp-moon-surface); + padding: 1rem; + margin: auto; + margin-top: 1rem; + max-width: 60rem; + width: calc(100%-4rem); + box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85)); + border-radius: 0.5rem; +} + +hr { + color: var(--rp-moon-muted); +} + + + +.blog-entry{ + background: var(--rp-moon-overlay); + padding-left: 0.5rem; + border-radius: 0.5rem; + #display: block; + #height:10rem; + width:100%; + color: var(--rp-moon-text) !important; + text-decoration : none !important; + display: flex; +} + + + +.blog-entry:hover{ + box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-surface) h s calc(l * 0.85)); + transition: 0.15s; +} + +.blog-entry div { + width: calc(100% - 15rem); + min-width: 20rem; +} + + + +.blog-entry img{ + #height:100%; + width:15rem; + object-fit: cover; + border-radius: 0 0.5rem 0.5rem 0; +} + +@media only screen and (max-width: 600px) { + .blog-entry div { + width: 100%; + } + + .blog-entry img { + width: 100%; + } +} + +.blog-entry h4{ + margin-top:1rem; +} + + +h1{font-size: 2.986rem} +h2{font-size: 2.488rem} +h3{font-size: 2.074rem} +h4{font-size: 1.728rem} + + h1, h2, h3, h4{ + font-family: "Fraunces", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + text-align: left; + font-variation-settings: + "SOFT" 0, + "WONK" 0; +} + + diff --git a/package-lock.json b/package-lock.json index 2359cf3..d069949 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "blog", "version": "0.0.1", "dependencies": { - "prism-rose-pine": "github:rose-pine/prism#main" + "@rose-pine/palette": "github:rose-pine/rose-pine-palette", + "prism-rose-pine": "github:rose-pine/prism#main", + "svelte-preprocess": "^6.0.3" }, "devDependencies": { "@eslint/compat": "^1.2.5", @@ -701,7 +703,6 @@ "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", @@ -712,7 +713,6 @@ "version": "2.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -723,7 +723,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -733,14 +732,12 @@ "version": "1.5.5", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.30", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz", "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1087,12 +1084,11 @@ ] }, "node_modules/@rose-pine/palette": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@rose-pine/palette/-/palette-2.1.0.tgz", - "integrity": "sha512-CVts9RNQU2wCn5rnWJ3QVlLQdjbxJktoGT+U5K8k+9HDgmC8n25C+QjrQ8l4XNTPCl1YzKCdpTy7H8qHutkC5w==", + "version": "4.0.1", + "resolved": "git+ssh://git@github.com/rose-pine/rose-pine-palette.git#20998b7abfc40a47d73586140e01d71f53e7e405", "license": "MIT", "engines": { - "node": ">=12" + "node": ">=16" }, "funding": { "url": "https://github.com/rose-pine/palette?sponsor=1" @@ -1109,7 +1105,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", "integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==", - "dev": true, "license": "MIT", "peerDependencies": { "acorn": "^8.9.0" @@ -1136,9 +1131,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "2.37.1", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.37.1.tgz", - "integrity": "sha512-4T9rF2Roe7RGvHfcn6+n92Yc2NF88k7ljFz9+wE0jWxyencqRpadr2/CvlcQbbTXf1ozmFxgMO6af+qm+1mPFw==", + "version": "2.38.0", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.38.0.tgz", + "integrity": "sha512-iLmykJOv4PAZvuC0niq1HUoK/LZdfsTW1CpkPAAnroYeYiV7Bp73Eeh/As8u0Y1n/2IDM+p9cdoHYufcpvkXkQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1224,7 +1219,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, "license": "MIT" }, "node_modules/@types/json-schema": { @@ -1513,7 +1507,6 @@ "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", - "dev": true, "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -1576,7 +1569,6 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz", "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==", - "dev": true, "license": "Apache-2.0", "engines": { "node": ">= 0.4" @@ -1586,7 +1578,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==", - "dev": true, "license": "Apache-2.0", "engines": { "node": ">= 0.4" @@ -1670,7 +1661,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -1983,7 +1973,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz", "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==", - "dev": true, "license": "MIT" }, "node_modules/espree": { @@ -2021,7 +2010,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.0.tgz", "integrity": "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" @@ -2335,7 +2323,6 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz", "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==", - "dev": true, "license": "MIT", "dependencies": { "@types/estree": "^1.0.6" @@ -2427,7 +2414,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", - "dev": true, + "devOptional": true, "license": "MIT", "engines": { "node": ">=10" @@ -2437,7 +2424,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", - "dev": true, "license": "MIT" }, "node_modules/locate-path": { @@ -2467,7 +2453,6 @@ "version": "0.30.19", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz", "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" @@ -2572,7 +2557,7 @@ "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", - "dev": true, + "devOptional": true, "funding": [ { "type": "github", @@ -2681,7 +2666,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, + "devOptional": true, "license": "ISC" }, "node_modules/picomatch": { @@ -2701,7 +2686,7 @@ "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", - "dev": true, + "devOptional": true, "funding": [ { "type": "opencollective", @@ -2730,7 +2715,7 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "lilconfig": "^2.0.5", @@ -2760,7 +2745,7 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, + "devOptional": true, "license": "ISC", "engines": { "node": ">= 6" @@ -2883,6 +2868,18 @@ "node": ">=12" } }, + "node_modules/prism-rose-pine/node_modules/@rose-pine/palette": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@rose-pine/palette/-/palette-2.1.0.tgz", + "integrity": "sha512-CVts9RNQU2wCn5rnWJ3QVlLQdjbxJktoGT+U5K8k+9HDgmC8n25C+QjrQ8l4XNTPCl1YzKCdpTy7H8qHutkC5w==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/rose-pine/palette?sponsor=1" + } + }, "node_modules/prism-rose-pine/node_modules/prettier": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", @@ -3121,7 +3118,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, + "devOptional": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -3157,7 +3154,6 @@ "version": "5.38.7", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.38.7.tgz", "integrity": "sha512-1ld9TPZSdUS3EtYGQzisU2nhwXoIzNQcZ71IOU9fEmltaUofQnVfW5CQuhgM/zFsZ43arZXS1BRKi0MYgUV91w==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/remapping": "^2.3.4", @@ -3232,6 +3228,61 @@ } } }, + "node_modules/svelte-preprocess": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz", + "integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==", + "hasInstallScript": true, + "license": "MIT", + "engines": { + "node": ">= 18.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.10.2", + "coffeescript": "^2.5.1", + "less": "^3.11.3 || ^4.0.0", + "postcss": "^7 || ^8", + "postcss-load-config": ">=3", + "pug": "^3.0.0", + "sass": "^1.26.8", + "stylus": ">=0.55", + "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0", + "typescript": "^5.0.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "coffeescript": { + "optional": true + }, + "less": { + "optional": true + }, + "postcss": { + "optional": true + }, + "postcss-load-config": { + "optional": true + }, + "pug": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/tinyglobby": { "version": "0.2.15", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", @@ -3302,7 +3353,7 @@ "version": "5.9.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz", "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", - "dev": true, + "devOptional": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -3562,7 +3613,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", - "dev": true, "license": "MIT" } } diff --git a/package.json b/package.json index 9d35dff..49e2a79 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "vite": "^7.0.4" }, "dependencies": { - "prism-rose-pine": "github:rose-pine/prism#main" + "@rose-pine/palette": "github:rose-pine/rose-pine-palette", + "prism-rose-pine": "github:rose-pine/prism#main", + "svelte-preprocess": "^6.0.3" } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1b2189e..4a78458 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,9 @@ @@ -8,4 +11,11 @@ -{@render children?.()} +
+ Home + About +
+ +
+ {@render children?.()} +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e0c213e..152e1e2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,6 +1,7 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

-{#each blog_entries as [href, page]} - {page.metadata?.title}
- -{/each} +
+

Welcome to SvelteKit

+

+ Visit svelte.dev/docs/kit to read the documentation +

+ {#each blog_entries as [href, page]} + +
+
+

{page.metadata?.title}

+

{page.metadata?.desc}

+

{new Date(Date.parse(page.metadata?.date)).toDateString()}

+
+ +
+ +
+ + {/each} +
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/blogs/blog.svelte b/src/routes/blogs/blog.svelte new file mode 100644 index 0000000..4b7bd9a --- /dev/null +++ b/src/routes/blogs/blog.svelte @@ -0,0 +1,32 @@ + + + + +export let alt; + +

{title}

+
+

Last updated {ddate.toDateString()}

+
+

{desc}

+ + + +
+
+ + diff --git a/src/routes/blogs/img.svelte b/src/routes/blogs/img.svelte new file mode 100644 index 0000000..8c9e24b --- /dev/null +++ b/src/routes/blogs/img.svelte @@ -0,0 +1,9 @@ + + + diff --git a/src/routes/blogs/style-blog.css b/src/routes/blogs/style-blog.css new file mode 100644 index 0000000..3dfd4d9 --- /dev/null +++ b/src/routes/blogs/style-blog.css @@ -0,0 +1,10 @@ +.blog-text{ + border-radius: 0.5rem; + background: var(--rp-moon-surface); + box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85)); + margin: -1rem; + padding: 1rem; +} + + + diff --git a/src/routes/blogs/test/+page.svx b/src/routes/blogs/test/+page.svx index f4367f8..2ed3b99 100644 --- a/src/routes/blogs/test/+page.svx +++ b/src/routes/blogs/test/+page.svx @@ -1,18 +1,55 @@ --- -title: "Blog Entry #1" +title: "The creation of this Blog" +layout: blog +date: 2025-09-12 +desc: "The goal was to create an easy to maintain blog with while the main focus relays on keeping the effort +to write new posts minimal. This is more a ressource summery with tips, than an full tutorial." --- -# Title ---- +## Static side generation +The stack consists of: +- [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction) +- [mdsvex](https://mdsvex.pngwn.io/) +- [static adapter](https://svelte.dev/docs/kit/adapter-static) -1. asd -2. asd -3. asd +The core functionallity provides which allow you to combine svelte and markdown. -```js -{..., lib}: -{ - "hello" = "world"; -} -``` \ No newline at end of file +![Tasd|20rem](/blog-1.png) + +## Image sizing + +I want to be able to rezise an image in markdown without using HTML, +just like in obsidian, by declaring the width after the alt text `![some alt text|](/some-image.png)`. +To archive that I replace every img that that mdsvex creates with some new written `img` component: + +```ts +//img.svelte + + + +``` + +And then needs to be imported in the mdsvex layout: +```ts + +``` + +This is desctibed in furhter details by the [mdsvex docs](https://mdsvex.pngwn.io/docs#custom-components) +and this [issue](https://github.com/pngwn/MDsveX/discussions/292). + +## Colors + +I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications, +and think it improves this blog too. +Both the [prism theme](https://github.com/rose-pine/prism) and [color palette](https://github.com/rose-pine/rose-pine-palette) +can be added as npm package and used without compications. diff --git a/src/routes/blogs/test2/+page.svx b/src/routes/blogs/test2/+page.svx index e69de29..be37a73 100644 --- a/src/routes/blogs/test2/+page.svx +++ b/src/routes/blogs/test2/+page.svx @@ -0,0 +1,7 @@ +--- +title: "FemDev GameJam - Catrastrophe" +date: 2024-11-10 +src: "https://elkortes.itch.io/catastrophe" +desc: "I took part in the amazing FemDev Game and helped to creathe this little game. +My work are the animations, 3d Models and some texturing" +--- diff --git a/src/routes/main.svelte b/src/routes/main.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/style-entries.css b/src/routes/style-entries.css new file mode 100644 index 0000000..3d42950 --- /dev/null +++ b/src/routes/style-entries.css @@ -0,0 +1,47 @@ + +.blog-entry{ + background: var(--rp-moon-surface); + border-radius: 0.5rem; + width:100%; + color: var(--rp-moon-text) !important; + text-decoration : none !important; + display: flex; + flex-flow: row wrap; + box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85)); +} + + + +.blog-entry:hover{ + box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75)); + background: var(--rp-moon-overlay); + transition: 0.2s; +} + +.blog-entry div { + width: calc(100% - 17rem); + padding: 1rem; +} + +.blog-entry img{ + width:15rem; + object-fit: cover; + border-radius: 0 0.5rem 0.5rem 0; +} + +@media only screen and (max-width: 700px) { + .blog-entry div { + width: calc( 100% - 2rem); + } + + .blog-entry img { + width: 100%; + max-height: 15rem; + border-radius: 0 0rem 0.5rem 0.5rem; + } +} + +.blog-entry h4{ + margin-top:0.5rem; + margin-bottom: 0.5rem; +} diff --git a/src/routes/style.css b/src/routes/style.css new file mode 100644 index 0000000..712e52a --- /dev/null +++ b/src/routes/style.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap'); + + +body { + color: var(--rp-moon-text); + background: var(--rp-moon-base); + padding: 0; + margin: 0; + text-align: justify; +} + +pre { + background: var(--rp-moon-base); + border-radius: 0.5rem; +} + +a { + color: var(--rp-moon-iris); + text-decoration: none; +} + +a:visited { + color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85)) +} + + +.nav { + margin: auto; + margin-top: 1rem; + + padding: 1rem; + max-width: 60rem; + width: calc(100% - 2rem); + + font-family: "Fraunces", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + font-variation-settings: + "SOFT" 0, + "WONK" 0; + font-size:1.728rem; +} + +a.nav{ + margin: 1rem; + margin-left: 0rem; + padding-left: 0rem; + color: var(--rp-moon-foam); + #text-decoration: underline; +} + +main { + padding: 1rem; + margin: auto; + #margin-top: 1rem; + max-width: 60rem; + width: calc(100% - 2rem); + #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85)); +} + +.date{ + text-align: right; + color: var(--rp-moon-subtle) +} + +hr { + color: var(--rp-moon-muted); +} + + +h1{font-size: 2.986rem} +h2{font-size: 2.488rem} +h3{font-size: 2.074rem} +h4{font-size: 1.728rem} + + h1, h2, h3, h4{ + font-family: "Fraunces", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + text-align: left; + font-variation-settings: + "SOFT" 0, + "WONK" 0; +} + +h4{ + color: var(--rp-moon-rose); +} + + diff --git a/static/blog-1.png b/static/blog-1.png new file mode 100644 index 0000000..7554839 Binary files /dev/null and b/static/blog-1.png differ diff --git a/svelte.config.js b/svelte.config.js index ff0406c..471031a 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -2,24 +2,36 @@ import adapter from '@sveltejs/adapter-static'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { mdsvex } from 'mdsvex'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const path_to_layout = join(__dirname, './src/routes/blogs/blog.svelte'); + /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://svelte.dev/docs/kit/integrations - // for more information about preprocessors - preprocess: [vitePreprocess(), mdsvex()], - kit: { - // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. - // If your environment is not supported, or you settled on a specific environment, switch out the adapter. - // See https://svelte.dev/docs/kit/adapters for more information about adapters. - adapter: adapter({ - pages: 'build', - assets: 'build', - fallback: undefined, - precompress: false, - strict: true - }) - }, - extensions: ['.svelte', '.svx'] + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: [vitePreprocess(), mdsvex({ + layout: { + blog: path_to_layout + } + })], + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter({ + pages: 'build', + assets: 'build', + fallback: undefined, + precompress: false, + strict: true + }) + }, + extensions: ['.svelte', '.svx'] }; export default config;