diff --git a/package-lock.json b/package-lock.json index 0dca48b..aa14fe0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@sveltejs/adapter-auto": "^1.0.0-next.18", "@sveltejs/adapter-node": "^1.0.0-next.67", "@sveltejs/kit": "next", + "@tailwindcss/typography": "^0.5.9", "@typescript-eslint/eslint-plugin": "^5.10.1", "@typescript-eslint/parser": "^5.10.1", "autoprefixer": "^10.4.2", @@ -31,6 +32,7 @@ "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", + "tailwind-scrollbar": "^3.0.4", "tailwindcss": "^3.0.17", "tslib": "^2.3.1", "typescript": "^4.4.3" @@ -368,6 +370,34 @@ "tailwindcss": ">=3.2.0" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz", + "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -2129,6 +2159,18 @@ "node": ">=10" } }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3127,6 +3169,18 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "node_modules/tailwind-scrollbar": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.0.4.tgz", + "integrity": "sha512-X/QBsn/C5u9x6/YvTc1Zo7b09Gqs5BfDe0UK/8LDQUv8IEBKF+p2ISTRwvAr50MH0hn/wTyCEOann7uXoa1/2Q==", + "dev": true, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "tailwindcss": "3.x" + } + }, "node_modules/tailwindcss": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", @@ -3689,6 +3743,30 @@ "integrity": "sha512-t1GeJ9P8ual160BvKy6Y1sG7bjChArMaK6iRXm3ZYjZGN2FTzmqb5ztsTDb9AsTSJD4NMHtsnaI2ielrXEk+hw==", "requires": {} }, + "@tailwindcss/typography": { + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz", + "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==", + "dev": true, + "requires": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + } + } + }, "@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -4841,6 +4919,18 @@ "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz", "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==" }, + "lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5484,6 +5574,13 @@ } } }, + "tailwind-scrollbar": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.0.4.tgz", + "integrity": "sha512-X/QBsn/C5u9x6/YvTc1Zo7b09Gqs5BfDe0UK/8LDQUv8IEBKF+p2ISTRwvAr50MH0hn/wTyCEOann7uXoa1/2Q==", + "dev": true, + "requires": {} + }, "tailwindcss": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz", diff --git a/package.json b/package.json index 54ba4c8..bd9b4db 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@sveltejs/adapter-auto": "^1.0.0-next.18", "@sveltejs/adapter-node": "^1.0.0-next.67", "@sveltejs/kit": "next", + "@tailwindcss/typography": "^0.5.9", "@typescript-eslint/eslint-plugin": "^5.10.1", "@typescript-eslint/parser": "^5.10.1", "autoprefixer": "^10.4.2", @@ -28,6 +29,7 @@ "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", + "tailwind-scrollbar": "^3.0.4", "tailwindcss": "^3.0.17", "tslib": "^2.3.1", "typescript": "^4.4.3" diff --git a/src/app.css b/src/app.css index 5883115..0e2b4b2 100644 --- a/src/app.css +++ b/src/app.css @@ -68,4 +68,17 @@ hr { .a:hover { text-decoration: underline; +} + +.backg { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1000' height='4000' preserveAspectRatio='none' viewBox='0 0 1000 4000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1072%26quot%3b)' fill='none'%3e%3crect width='1000' height='4000' x='0' y='0' fill='rgba(243%2c 244%2c 246%2c 1)'%3e%3c/rect%3e%3cpath d='M322.6957896427178 1012.5715450325381L159.95270018013207 831.4802616486547 90.66067255486604 1032.718922014166z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M568.244%2c2832.447C600.696%2c2831.035%2c623.882%2c2804.839%2c640.036%2c2776.658C656.077%2c2748.674%2c666.422%2c2715.736%2c651.553%2c2687.111C635.664%2c2656.521%2c602.709%2c2637.839%2c568.244%2c2638.445C534.739%2c2639.034%2c506.581%2c2660.915%2c489.857%2c2689.953C473.168%2c2718.931%2c468.634%2c2754.115%2c484.752%2c2783.414C501.425%2c2813.724%2c533.684%2c2833.951%2c568.244%2c2832.447' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1141.982840070039 223.15446202120583L1055.7248183090524 19.943297384308806 852.5136536721552 106.20131914529551 938.7716754331419 309.41248378219257z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M258.5889060127539 281.35918881629607L147.05790512748686 109.61650817390006-24.68477551490912 221.1475090591671 86.8462253703579 392.89018970156314z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M484.05 2086.43 a172.61 172.61 0 1 0 345.22 0 a172.61 172.61 0 1 0 -345.22 0z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M228.80454984414283 1290.2062106934764L398.1407448763988 1254.3813294449294 298.8771207482494 1140.1915922616452z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M173.813%2c3765.279C235.301%2c3769.971%2c305.139%2c3758.098%2c335.296%2c3704.308C365.065%2c3651.209%2c333.276%2c3589.283%2c301.64%2c3537.276C271.685%2c3488.033%2c231.449%2c3439.325%2c173.813%2c3438.846C115.572%2c3438.362%2c68.631%2c3483.193%2c42.255%2c3535.121C18.37%2c3582.145%2c23.858%2c3636.753%2c50.031%2c3682.542C76.428%2c3728.722%2c120.775%2c3761.232%2c173.813%2c3765.279' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M980.126%2c1915.224C1071.263%2c1916.123%2c1126.54%2c1823.516%2c1167.489%2c1742.092C1203.379%2c1670.727%2c1217.733%2c1588.948%2c1179.479%2c1518.821C1139.652%2c1445.809%2c1063.256%2c1396.092%2c980.126%2c1398.617C900.644%2c1401.031%2c838.094%2c1460.149%2c800.702%2c1530.328C765.735%2c1595.955%2c767.637%2c1671.061%2c799.055%2c1738.459C837.252%2c1820.398%2c889.725%2c1914.333%2c980.126%2c1915.224' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M405.1853855765305 346.8608745257303L328.1984935445406 678.8837825568656 614.5972264875737 596.7602673982816z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M957.4302400556646 3480.210793484157L1005.7179870853452 3253.034804889443 730.2542514609507 3431.9230464544767z' fill='rgba(191%2c 219%2c 254%2c 0.2)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1072'%3e%3crect width='1000' height='4000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); +} + +.dark .backg { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1000' height='4000' preserveAspectRatio='none' viewBox='0 0 1000 4000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1168%26quot%3b)' fill='none'%3e%3crect width='1000' height='4000' x='0' y='0' fill='rgba(17%2c 24%2c 39%2c 1)'%3e%3c/rect%3e%3cpath d='M370.86333929891646 1742.6391941833374L658.131189956521 1697.1404364337002 612.6324322068838 1409.8725857760955 325.36458154927925 1455.3713435257328z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M127.55 941.9 a250.26 250.26 0 1 0 500.52 0 a250.26 250.26 0 1 0 -500.52 0z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M443.67 3245.32 a220.38 220.38 0 1 0 440.76 0 a220.38 220.38 0 1 0 -440.76 0z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M88.98 2195.14 a296.46 296.46 0 1 0 592.92 0 a296.46 296.46 0 1 0 -592.92 0z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M957.627%2c3728.379C1018.73%2c3723.489%2c1058.147%2c3669.315%2c1086.269%2c3614.848C1111.562%2c3565.859%2c1121.609%2c3509.523%2c1095.769%2c3460.82C1068.304%2c3409.055%2c1016.178%2c3374.771%2c957.627%2c3372.386C894.631%2c3369.82%2c832.437%2c3395.569%2c798.512%2c3448.712C761.919%2c3506.034%2c753.956%2c3579.641%2c787.586%2c3638.75C821.545%2c3698.438%2c889.174%2c3733.857%2c957.627%2c3728.379' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M561.077%2c2972.939C625.195%2c2974.979%2c686.945%2c2943.637%2c719.455%2c2888.335C752.388%2c2832.313%2c748.756%2c2763.552%2c717.737%2c2706.448C685.125%2c2646.412%2c629.393%2c2597.71%2c561.077%2c2596.773C491.375%2c2595.817%2c428.115%2c2639.77%2c396.794%2c2702.046C368.196%2c2758.909%2c386.242%2c2824.358%2c419.247%2c2878.781C450.786%2c2930.786%2c500.287%2c2971.004%2c561.077%2c2972.939' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M180.1924431506152 1521.8539057962548L232.90065307891572 1359.634715825947 70.68146310860806 1306.9265058976466 17.973253180307523 1469.1456958679544z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M501.624%2c2286.146C606.923%2c2286.329%2c709.049%2c2236.183%2c759.765%2c2143.902C808.874%2c2054.544%2c792.035%2c1944.741%2c736.107%2c1859.486C685.427%2c1782.232%2c594.015%2c1749.721%2c501.624%2c1750.401C410.609%2c1751.071%2c322.84%2c1786.706%2c273.047%2c1862.895C218.026%2c1947.083%2c197.246%2c2054.512%2c245.037%2c2143.005C294.917%2c2235.366%2c396.655%2c2285.963%2c501.624%2c2286.146' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M217.27 2649.27 a195.48 195.48 0 1 0 390.96 0 a195.48 195.48 0 1 0 -390.96 0z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M191.99 206.81 a202.49 202.49 0 1 0 404.98 0 a202.49 202.49 0 1 0 -404.98 0z' fill='rgba(30%2c 64%2c 175%2c 0.1)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1168'%3e%3crect width='1000' height='4000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); +} + +.href { + color: blue; + text-decoration: underline; } \ No newline at end of file diff --git a/src/app.html b/src/app.html index b4d00e7..c5c0e0f 100644 --- a/src/app.html +++ b/src/app.html @@ -7,49 +7,51 @@ %svelte.head% - +
%svelte.body%
diff --git a/src/lib/Socials.svelte b/src/lib/Socials.svelte index 7d81c54..8b4b4b1 100644 --- a/src/lib/Socials.svelte +++ b/src/lib/Socials.svelte @@ -3,8 +3,7 @@ export let type = "default"; -{#if type == "default"} -
+
-
- -{:else if type == "grid"} -
-
- Social Profiles -
- - - - -
- // EOL -
-
-{:else if type == "list"} -
- - - - -
-{/if} \ No newline at end of file +
\ No newline at end of file diff --git a/src/lib/blog/Post.svelte b/src/lib/blog/Post.svelte new file mode 100644 index 0000000..78b2313 --- /dev/null +++ b/src/lib/blog/Post.svelte @@ -0,0 +1,24 @@ + + +
+ + +
+

{title}

+
Posted {date} by Pascal
+
+ +
+ +
+ +
+ +
+ +
Posted {date} by Pascal
+
\ No newline at end of file diff --git a/src/lib/blog/Preview.svelte b/src/lib/blog/Preview.svelte new file mode 100644 index 0000000..aa129fb --- /dev/null +++ b/src/lib/blog/Preview.svelte @@ -0,0 +1,29 @@ + + +{#if featured} + + {#if image.length > 0} + + {/if} +

{title}

+

+ {preview} +

+ {date} +
+{:else} + + {#if image.length > 0} + + {/if} +

{title}

+ {date} +
+{/if} \ No newline at end of file diff --git a/src/lib/blog/blog.ts b/src/lib/blog/blog.ts new file mode 100644 index 0000000..b04bd23 --- /dev/null +++ b/src/lib/blog/blog.ts @@ -0,0 +1,7 @@ +interface BlogPost { + title: string; + url: string; + image: string; + date: string; + content: string; +} diff --git a/src/lib/footer/Social.svelte b/src/lib/footer/Social.svelte index 504c273..aff4f14 100644 --- a/src/lib/footer/Social.svelte +++ b/src/lib/footer/Social.svelte @@ -13,7 +13,7 @@ href={url} {title} target="_blank" - class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-95 duration-150 shadow" + class="rounded-xl bg-gray-200 bg-opacity-80 hover:bg-opacity-100 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-[101%] hover:shadow-2xl duration-150 shadow" >
{icon} diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte index 3555d68..53917fb 100644 --- a/src/lib/header/Nav.svelte +++ b/src/lib/header/Nav.svelte @@ -16,10 +16,11 @@