feat(root page): prettify and add new home page content #7
103
package.json
103
package.json
|
|
@ -1,53 +1,54 @@
|
|||
{
|
||||
"name": "floral.systems",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"lint": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-node": "^5.2.9",
|
||||
"@sveltejs/enhanced-img": "^0.3.9",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@types/node": "^22.8.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"husky": "^9.1.6",
|
||||
"lint-staged": "^15.2.10",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.2.6",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.4"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"mdast": "^3.0.0",
|
||||
"moderndash": "^3.12.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"rehype-slug-custom-id": "^2.0.0",
|
||||
"rehype-stringify": "^10.0.1",
|
||||
"remark": "^15.0.1",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.1",
|
||||
"svelte-highlight": "^7.7.0",
|
||||
"to-vfile": "^8.0.0",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-flatmap": "^1.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
|
||||
}
|
||||
"name": "floral.systems",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"lint": "prettier --check .",
|
||||
"format": "prettier --write .",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-node": "^5.2.9",
|
||||
"@sveltejs/enhanced-img": "^0.3.9",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@types/node": "^22.8.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"husky": "^9.1.6",
|
||||
"lint-staged": "^15.2.10",
|
||||
"postcss": "^8.4.47",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.2.6",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.4"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"clsx": "^2.1.1",
|
||||
"mdast": "^3.0.0",
|
||||
"moderndash": "^3.12.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"rehype-slug-custom-id": "^2.0.0",
|
||||
"rehype-stringify": "^10.0.1",
|
||||
"remark": "^15.0.1",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.1",
|
||||
"svelte-highlight": "^7.7.0",
|
||||
"to-vfile": "^8.0.0",
|
||||
"unified": "^11.0.5",
|
||||
"unist-util-flatmap": "^1.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"{package.json,*.js,src/**.{svelte,ts,js,css}}": "prettier --write --ignore-unknown"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,16 @@
|
|||
let renderedCode = $derived(slice ? code.replace(/\/\*<hidden>[^]*?<\/hidden>\*\//, "")
|
||||
: code.replace(/\/\*(<hidden>|<\/hidden>)\*\//g,""));
|
||||
|
||||
$effect(() => {
|
||||
console.log(slice)
|
||||
});
|
||||
</script>
|
||||
|
||||
<p class="sr-only">{alt}</p>
|
||||
<div class="font-mono relative" aria-hidden="true" title={alt}>
|
||||
<div class="font-mono relative @container" aria-hidden="true" title={alt}>
|
||||
<!-- HACK: apply the pre-wrap style to the child to avoid
|
||||
HTML formatting whitespace issues down the line. -->
|
||||
<div class="*:whitespace-pre-wrap"><Highlight {language} code={renderedCode} /></div>
|
||||
<div class="*:whitespace-pre-wrap pt-6 @xs:pt-0"><Highlight {language} code={renderedCode} /></div>
|
||||
<button
|
||||
class="top-0 right-0 absolute font-sans text-xs font-bold"
|
||||
class:text-blue-500={slice}
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46666 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="arrow-from-left-to-down.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="2.0436167"
|
||||
inkscape:cx="387.79288"
|
||||
inkscape:cy="184.2322"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1360"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="26"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -7.073472,16.7234 -14.77889,15.435432 -8.086315,-1.351635 -9.539445,-10.597699 -6.065485,-14.788091 8.975288,-10.826254 21.354159,-4.201044 30.166085,0.64734 2.989795,1.645006 7.69663,6.452256 9.710113,10.875327 4.705176,10.335987 3.978976,18.111457 -3.884045,20.973846 C 90.59464,56.838903 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 115.43554,39.783947 118.1221,45.677357 c 2.40997,5.286669 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
|
||||
id="path3"
|
||||
sodipodi:nodetypes="csssssssssssc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="57.973808"
|
||||
sodipodi:cy="96.324318"
|
||||
sodipodi:r1="24.403963"
|
||||
sodipodi:r2="12.201981"
|
||||
sodipodi:arg1="0.53437152"
|
||||
sodipodi:arg2="1.5815691"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
|
||||
inkscape:transform-center-x="-5.9930106"
|
||||
inkscape:transform-center-y="0.12432086"
|
||||
transform="rotate(-151.201,79.803925,98.585649)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46666 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="arrow-from-up-to-down.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="1.0218084"
|
||||
inkscape:cx="-239.28166"
|
||||
inkscape:cy="117.92818"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1360"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="26"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 50.793004,3.8400172 c 0.04577,8.2393038 1.789258,13.0051818 11.002986,16.1775828 8.487892,2.922487 10.530007,10.902745 9.095497,17.254543 -2.20475,9.762305 -12.026078,13.604391 -18.921467,9.932072 -7.236246,-3.853849 -5.672512,-13.081852 -1.04597,-15.94941 11.953088,-7.408596 21.581254,2.810421 28.393024,10.210195 2.311161,2.510667 5.244184,8.56553 5.745989,13.399355 1.172635,11.295848 -1.989381,18.436358 -10.354507,18.64865 -5.68235,0.144207 -12.977472,-6.074328 -10.16553,-14.472655 2.260712,-6.75203 10.371898,-9.352025 17.502237,-7.383337 11.238728,3.103015 15.956913,13.733677 16.629083,20.175576 0.60296,5.778691 -1.440166,17.644438 -4.028604,22.846059"
|
||||
id="path3"
|
||||
sodipodi:nodetypes="cssssssssssc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="57.973808"
|
||||
sodipodi:cy="96.324318"
|
||||
sodipodi:r1="24.403963"
|
||||
sodipodi:r2="12.201981"
|
||||
sodipodi:arg1="0.53437152"
|
||||
sodipodi:arg2="1.5815691"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
|
||||
inkscape:transform-center-x="-4.7162935"
|
||||
inkscape:transform-center-y="1.5424015"
|
||||
transform="rotate(-157.87918,75.76367,97.954627)" />
|
||||
</g>
|
||||
</svg>
|
||||
69
src/lib/assets/arrow-north-to-east.svg
Normal file
69
src/lib/assets/arrow-north-to-east.svg
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46666 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="arrow-north-to-east.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="1.4450552"
|
||||
inkscape:cx="32.870716"
|
||||
inkscape:cy="379.91628"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1359"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="26"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g1"
|
||||
transform="matrix(0,1,1,0,-0.9026756,3.8322078)">
|
||||
<path
|
||||
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -5.931657,17.716645 -13.743145,17.830593 -8.086315,0.117958 -15.236044,-7.360994 -9.884796,-16.665379 7.01113,-12.190473 24.655835,-5.559951 32.949651,0.129467 6.55017,4.493306 12.917869,12.153856 13.982559,16.895597 1.27427,5.675133 -1.26448,12.60906 -8.156491,14.953576 C 90.554583,56.725125 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 114.85557,40.084531 118.1221,45.677357 c 4.67566,8.005501 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
|
||||
id="path3"
|
||||
sodipodi:nodetypes="csssssssssssc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="57.973808"
|
||||
sodipodi:cy="96.324318"
|
||||
sodipodi:r1="24.403963"
|
||||
sodipodi:r2="12.201981"
|
||||
sodipodi:arg1="0.53437152"
|
||||
sodipodi:arg2="1.5815691"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
|
||||
inkscape:transform-center-x="-5.9930106"
|
||||
inkscape:transform-center-y="0.12432086"
|
||||
transform="rotate(-151.201,79.803925,98.585649)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
69
src/lib/assets/arrow-north-to-south.svg
Normal file
69
src/lib/assets/arrow-north-to-south.svg
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46666 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="arrow-north-to-south.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="1.4450552"
|
||||
inkscape:cx="129.06081"
|
||||
inkscape:cy="269.19386"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1359"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="26"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g1"
|
||||
transform="translate(13.236126,-0.54928696)">
|
||||
<path
|
||||
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 57.122655,99.016667 c 0,0 -12.0052,-8.957795 -12.818511,-18.982533 C 43.224775,66.730003 54.300471,61.132091 62.04062,64.713936 69.620979,68.221835 69.669406,78.89371 62.259766,82.749152 53.610058,87.249835 43.618742,81.854841 40.970734,63.925307 39.21652,52.047608 48.79738,34.956558 60.765072,35.921617 c 5.554347,0.447897 9.871607,8.520089 6.630034,14.198806 -2.50231,4.383646 -9.764417,5.901086 -15.18291,1.210552 C 44.181237,44.378951 42.889541,34.72258 47.043823,24.946647 51.639152,14.132834 65.869935,5.6799693 65.869935,5.6799693"
|
||||
id="path1"
|
||||
sodipodi:nodetypes="cssssssssc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="57.973808"
|
||||
sodipodi:cy="96.324318"
|
||||
sodipodi:r1="24.403963"
|
||||
sodipodi:r2="12.201981"
|
||||
sodipodi:arg1="0.53437152"
|
||||
sodipodi:arg2="1.5815691"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
|
||||
inkscape:transform-center-x="5.4467283"
|
||||
inkscape:transform-center-y="0.48035022"
|
||||
transform="matrix(0.89910672,-0.43772951,-0.43772951,-0.89910672,49.995486,221.7563)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
69
src/lib/assets/arrow-west-to-north.svg
Normal file
69
src/lib/assets/arrow-west-to-north.svg
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46666 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="arrow-west-to-north.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="1.4450552"
|
||||
inkscape:cx="32.870716"
|
||||
inkscape:cy="379.91628"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1359"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="26"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g1"
|
||||
transform="matrix(1,0,0,-1,2.1971496,136.58098)">
|
||||
<path
|
||||
style="fill:none;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 7.7680906,7.5091541 c 0,0 38.4917724,-4.5181708 58.9080194,0.7768092 6.293471,1.6322199 13.239679,7.0217937 14.112031,13.4646907 1.34283,9.91768 -5.931657,17.716645 -13.743145,17.830593 -8.086315,0.117958 -15.236044,-7.360994 -9.884796,-16.665379 7.01113,-12.190473 24.655835,-5.559951 32.949651,0.129467 6.55017,4.493306 12.917869,12.153856 13.982559,16.895597 1.27427,5.675133 -1.26448,12.60906 -8.156491,14.953576 C 90.554583,56.725125 81.70025,53.264158 81.69442,44.407585 81.68972,37.287142 88.552418,32.24187 95.938614,31.83997 107.58063,31.2065 114.85557,40.084531 118.1221,45.677357 c 4.67566,8.005501 4.24774,17.185947 3.44851,22.940777 -1.69551,12.208548 -16.05405,30.036616 -16.05405,30.036616"
|
||||
id="path3"
|
||||
sodipodi:nodetypes="csssssssssssc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#b1e9d0;fill-opacity:1;stroke:#b1e9d0;stroke-width:5.29167;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path2"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="57.973808"
|
||||
sodipodi:cy="96.324318"
|
||||
sodipodi:r1="24.403963"
|
||||
sodipodi:r2="12.201981"
|
||||
sodipodi:arg1="0.53437152"
|
||||
sodipodi:arg2="1.5815691"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 78.975588,108.75326 57.842362,108.52559 36.709136,108.29792 47.47292,90.109846 58.236701,71.921771 68.606144,90.337518 Z"
|
||||
inkscape:transform-center-x="-5.9930106"
|
||||
inkscape:transform-center-y="0.12432086"
|
||||
transform="rotate(-151.201,79.803925,98.585649)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -1,12 +0,0 @@
|
|||
<script lang="ts">
|
||||
import box from "$lib/assets/box.svg?raw";
|
||||
|
||||
let props = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex pr-4 shadow w-60 rounded-full whitespace-nowrap bg-zinc-100 font-bold overflow-hidden">
|
||||
<span class="w-11 h-10 bg-teal-500 py-2 pl-3 pr-2 text-white">
|
||||
{@html box}
|
||||
</span>
|
||||
<span class="flex py-2 pl-2">{@render props.children?.()}</span>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<script>
|
||||
import Highlight from "$lib/Highlight.svelte";
|
||||
import LinkChip from "$lib/components/LinkChip.svelte";
|
||||
import PackageTile from "$lib/components/PackageTile.svelte";
|
||||
import FlowerDivider from "$lib/components/FlowerDivider.svelte";
|
||||
|
||||
import leaf from "$lib/assets/leaf.svg";
|
||||
import petal from "$lib/assets/petal.svg";
|
||||
import box from "$lib/assets/box.svg?raw";
|
||||
|
||||
import arrowNorthToEast from "$lib/assets/arrow-north-to-east.svg";
|
||||
import arrowWestToNorth from "$lib/assets/arrow-west-to-north.svg";
|
||||
|
||||
import nix from "svelte-highlight/languages/nix";
|
||||
|
||||
import demo1 from "./demo1/vm.nix?raw";
|
||||
import forkGraph from "./fork.svg?raw";
|
||||
|
||||
let fleurixExampleSlice = $state(true);
|
||||
</script>
|
||||
|
||||
{#snippet packageExample(name)}
|
||||
<div class="flex pr-4 shadow w-60 rounded-full whitespace-nowrap bg-zinc-100 font-bold overflow-hidden">
|
||||
<span class="w-11 h-10 bg-teal-500 py-2 pl-3 pr-2 text-white">
|
||||
{@html box}
|
||||
</span>
|
||||
<span class="flex py-2 pl-2">{name}</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<div class="flex flex-col gap-y-16 px-2">
|
||||
<div class="mt-4 sm:mt-16">
|
||||
<h1 class="text-5xl sm:text-6xl text-balance">A declarative, comprehensive <span class="text-teal-500 font-aladin font-bold">package ecosystem</span></h1>
|
||||
|
|
@ -69,32 +83,64 @@
|
|||
<span>Try FleurixOS</span>
|
||||
</LinkChip>
|
||||
</div>
|
||||
<div class="grid grid-cols-[1fr,1fr] gap-4 mt-4 align-top place-items-start">
|
||||
<div class="flex relative w-full">
|
||||
<div class="grid grid-cols[1fr] md:grid-cols-[1fr,1fr] gap-4 mt-4 align-top place-items-start">
|
||||
<div class="flex flex-col relative w-full items-end">
|
||||
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow max-w-3xl max-sm:max-w-full h-fit w-full">
|
||||
<Highlight
|
||||
language={nix} code={demo1}
|
||||
alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
|
||||
bind:slice={fleurixExampleSlice}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden w-full max-w-3xl">
|
||||
<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
|
||||
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
|
||||
<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
|
||||
</div>
|
||||
<div class="flex items-center pl-4 pr-2 gap-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#facc15]" />
|
||||
<div class="w-3 h-3 rounded-full bg-teal-400" />
|
||||
<div class="w-3 h-3 rounded-full bg-coral-400" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
|
||||
<enhanced:img src="./demo1/mediawiki.png?format=png"
|
||||
alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
|
||||
class="w-full"
|
||||
{#if fleurixExampleSlice}
|
||||
<enhanced:img
|
||||
src="$lib/assets/arrow-north-to-east.svg"
|
||||
class="pt-2 hidden lg:block"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
{/if}
|
||||
<enhanced:img
|
||||
src="$lib/assets/arrow-north-to-south.svg"
|
||||
class="md:hidden mx-auto pt-4"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden w-full max-w-3xl">
|
||||
<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
|
||||
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
|
||||
<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
|
||||
</div>
|
||||
<div class="flex items-center pl-4 pr-2 gap-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#facc15]" />
|
||||
<div class="w-3 h-3 rounded-full bg-teal-400" />
|
||||
<div class="w-3 h-3 rounded-full bg-coral-400" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
|
||||
|
|
||||
<enhanced:img src="./demo1/mediawiki.png?format=png"
|
||||
ckie
commented
But we'll want to take this vague idea into docs for some featured usecases we write about, a bit like the "Learn by example." bit on bun's website. But probably more colorful. But we'll want to take this vague idea into docs for some featured usecases we write about, a bit like the "Learn by example." bit on [bun's website](https://bun.sh/). But probably more colorful.
|
||||
alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<!-- NOTE: enhanced:img breaks when creating multiple elements with the same src -->
|
||||
<img
|
||||
src={arrowWestToNorth}
|
||||
class="pt-4 hidden md:block lg:hidden"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
{#if !fleurixExampleSlice}
|
||||
<enhanced:img
|
||||
src="$lib/assets/arrow-west-to-north.svg"
|
||||
class="pt-4 hidden lg:block"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -119,30 +165,30 @@
|
|||
</LinkChip>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 place-items-center grid-flow-dense gap-4 max-w-5xl mx-auto mt-6">
|
||||
<PackageTile>LLVM</PackageTile>
|
||||
<PackageTile>GCC</PackageTile>
|
||||
<PackageTile>NodeJS</PackageTile>
|
||||
<PackageTile>Rust</PackageTile>
|
||||
<PackageTile>Firefox</PackageTile>
|
||||
<PackageTile>Aseprite</PackageTile>
|
||||
<PackageTile>Discord</PackageTile>
|
||||
<PackageTile>KDE</PackageTile>
|
||||
<PackageTile>Python</PackageTile>
|
||||
<PackageTile>Inkscape</PackageTile>
|
||||
<PackageTile>Pipewire</PackageTile>
|
||||
<PackageTile>Kitty</PackageTile>
|
||||
<PackageTile>Element</PackageTile>
|
||||
<PackageTile>Blender</PackageTile>
|
||||
<PackageTile>Ruby</PackageTile>
|
||||
<PackageTile>Chromium</PackageTile>
|
||||
<PackageTile>Steam</PackageTile>
|
||||
<PackageTile>Thunderbird</PackageTile>
|
||||
<PackageTile>VS Code</PackageTile>
|
||||
<PackageTile>Vim</PackageTile>
|
||||
<PackageTile>GNOME Desktop</PackageTile>
|
||||
<PackageTile>Emacs</PackageTile>
|
||||
<PackageTile>Lutris</PackageTile>
|
||||
<PackageTile>Lix</PackageTile>
|
||||
{@render packageExample("LLVM")}
|
||||
{@render packageExample("GCC")}
|
||||
{@render packageExample("NodeJS")}
|
||||
{@render packageExample("Rust")}
|
||||
{@render packageExample("Firefox")}
|
||||
{@render packageExample("Aseprite")}
|
||||
{@render packageExample("Discord")}
|
||||
{@render packageExample("KDE")}
|
||||
{@render packageExample("Python")}
|
||||
{@render packageExample("Inkscape")}
|
||||
{@render packageExample("Pipewire")}
|
||||
{@render packageExample("Kitty")}
|
||||
{@render packageExample("Element")}
|
||||
{@render packageExample("Blender")}
|
||||
{@render packageExample("Ruby")}
|
||||
{@render packageExample("Chromium")}
|
||||
{@render packageExample("Steam")}
|
||||
{@render packageExample("Thunderbird")}
|
||||
{@render packageExample("VS Code")}
|
||||
{@render packageExample("Vim")}
|
||||
{@render packageExample("GNOME Desktop")}
|
||||
{@render packageExample("Emacs")}
|
||||
{@render packageExample("Lutris")}
|
||||
{@render packageExample("Lix")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -150,7 +196,7 @@
|
|||
|
||||
<div class="pb-60">
|
||||
<h2 class="text-4xl w-fit pb-4">
|
||||
Our <span class="font-aladin font-bold text-teal-500">vision</span> for <span class="font-aladin fontold text-coral-970">floral.systems</span>
|
||||
Our vision
|
||||
</h2>
|
||||
<div class="grid lg:grid-cols-[1.15fr,1fr] gap-12">
|
||||
<div class="text-xl flex flex-col gap-4">
|
||||
|
|
@ -182,7 +228,7 @@
|
|||
|
||||
<div>
|
||||
<h2 class="text-4xl w-fit pb-4">
|
||||
And much <span class="text-teal-500">more</span>!
|
||||
And much more!
|
||||
</h2>
|
||||
<div class="grid lg:grid-cols-[1.15fr,1fr]">
|
||||
<div class="clear-left text-xl">
|
||||
|
|
@ -206,8 +252,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- https://pad.lix.systems/v0Bew569R_2IB0abRSy4kA?view=#Pretty-much-final-draft-About-us -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import colors from "tailwindcss/colors";
|
||||
import containerQueries from "@tailwindcss/container-queries";
|
||||
|
||||
/** @type {import("tailwindcss").Config} */
|
||||
export default {
|
||||
|
|
@ -77,7 +78,9 @@ export default {
|
|||
// that dense https://tailwindcss.com/docs/screens
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
containerQueries
|
||||
],
|
||||
safelist: [
|
||||
// this is pretty sensible, and depended on in src/routes/colors/Color.svelte
|
||||
{ pattern: /bg-.+/ }
|
||||
|
|
|
|||
Loading…
Reference in a new issue
Nit/general: I find it unlikely we'll have
PackageTiles on many pages, so a{#snippet}would be more appropriate to not pollute the$lib/componentsscope, which should be when you're expecting usage from multiple components.Converting these to a snippet, thank you for letting me know!