therbron/Double-Maker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(css): Add skeleton css

Browse Source
This commit is contained in:
Tanguy Herbron 2023-12-06 23:24:50 +01:00
parent 2945af1ee3
commit 87734f0c0c
9 changed files with 2225 additions and 1099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3163
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
package.json
View File

@ -1,17 +1,23 @@
{ {
"name": "double-maker", "name": "double-maker",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0", "@skeletonlabs/skeleton": "^2.5.1",
"@sveltejs/kit": "^1.27.4", "@skeletonlabs/tw-plugin": "^0.2.4",
"svelte": "^4.2.7", "@sveltejs/adapter-auto": "^2.0.0",
"vite": "^4.4.2" "@sveltejs/kit": "^1.27.4",
}, "autoprefixer": "^10.4.14",
"type": "module" "postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"svelte": "^4.2.7",
"tailwindcss": "^3.3.2",
"vite": "^4.4.2"
},
"type": "module"
} }

13
postcss.config.cjs Normal file
View File

@ -0,0 +1,13 @@
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer,
],
};
module.exports = config;

2
src/app.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-theme="skeleton" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

4
src/app.pcss Normal file
View File

@ -0,0 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

5
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
import "../app.pcss";
</script>
<slot />

60
src/routes/+page.svelte
View File

@ -8,9 +8,7 @@
res = ""; res = "";
console.log(init, init <= limit, limit);
for(let i = init; i <= limit; i++) { for(let i = init; i <= limit; i++) {
console.log("bite");
for(let j = 0; j < rep; j++) { for(let j = 0; j < rep; j++) {
res += i + ","; res += i + ",";
} }
@ -26,25 +24,45 @@
} }
</script> </script>
<div> <style>
<h1>Make a string</h1> .title-string {
<label>Rep</label> margin: -2rem 0 -1.5rem 0;
<input type="text" id="rep" name="Repetition" value="3"> }
<br> </style>
<label>Init</label>
<input type="text" id="init" name="Init" value="3">
<br>
<label>Limit</label>
<input type="text" id="limit" name="Limit" value="10">
<br> <div class="flex flex-col justify-center items-center w-screen h-screen">
<br> <div class="flex flex-col p-2 w-80 gap-y-4">
<button on:click={compute}>click me bitch</button> <div class="mb-2">
<h1 class="h1 flex justify-center title-string">
<span class="leading-normal bg-gradient-to-br from-blue-500 to-cyan-300 bg-clip-text text-transparent box-decoration-clone font-bold">
Make
</span>
</h1>
<h1 class="h1 flex justify-center title-string">
<span class="leading-normal bg-gradient-to-br from-red-500 to-yellow-500 bg-clip-text text-transparent box-decoration-clone font-bold">
Any
</span>
</h1>
<h1 class="h1 flex justify-center title-string">
<span class="leading-normal bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone font-bold">
String
</span>
</h1>
</div>
<div class="flex flex-col gap-y-2">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="rep" type="text" placeholder="Repetition">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="init" type="text" placeholder="Init">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="limit" type="text" placeholder="Limit">
<button class="bg-blue-500 mt-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" on:click={compute}>
click me bitch
</button>
</div>
<br> <div class="flex flex-col">
<br> <span id="result" style="overflow-wrap: break-word;"></span>
<br> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" on:click={copy}>
<br> Copy me cunt
<span id="result"></span> </button>
<button on:click={copy}>Copy me cunt</button> </div>
</div>
</div> </div>

17
svelte.config.js
View File

@ -1,13 +1,16 @@
import adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from "@sveltejs/kit/vite";
import adapter from "@sveltejs/adapter-auto";
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter. // If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
} },
preprocess: [vitePreprocess({})],
}; };
export default config; export default config;

24
tailwind.config.cjs Normal file
View File

@ -0,0 +1,24 @@
const { skeleton } = require('@skeletonlabs/tw-plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
// 2. Opt for dark mode to be handled via the class method
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
// 3. Append the path to the Skeleton package
require('path').join(require.resolve(
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
)
],
theme: {
extend: {},
},
plugins: [
skeleton({
themes: { preset: [ "skeleton" ] }
})
]
}