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

1053
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -8,9 +8,15 @@
"preview": "vite preview"
},
"devDependencies": {
"@skeletonlabs/skeleton": "^2.5.1",
"@skeletonlabs/tw-plugin": "^0.2.4",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.27.4",
"autoprefixer": "^10.4.14",
"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" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-theme="skeleton" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</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 />

62
src/routes/+page.svelte
View File

@ -8,9 +8,7 @@
res = "";
console.log(init, init <= limit, limit);
for(let i = init; i <= limit; i++) {
console.log("bite");
for(let j = 0; j < rep; j++) {
res += i + ",";
}
@ -26,25 +24,45 @@
}
</script>
<div>
<h1>Make a string</h1>
<label>Rep</label>
<input type="text" id="rep" name="Repetition" value="3">
<br>
<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">
<style>
.title-string {
margin: -2rem 0 -1.5rem 0;
}
</style>
<br>
<br>
<button on:click={compute}>click me bitch</button>
<br>
<br>
<br>
<br>
<span id="result"></span>
<button on:click={copy}>Copy me cunt</button>
<div class="flex flex-col justify-center items-center w-screen h-screen">
<div class="flex flex-col p-2 w-80 gap-y-4">
<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>
<div class="flex flex-col">
<span id="result" style="overflow-wrap: break-word;"></span>
<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}>
Copy me cunt
</button>
</div>
</div>
</div>

9
svelte.config.js
View File

@ -1,4 +1,5 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from "@sveltejs/kit/vite";
import adapter from "@sveltejs/adapter-auto";
/** @type {import('@sveltejs/kit').Config} */
const config = {
@ -6,8 +7,10 @@ const config = {
// 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.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
adapter: adapter(),
},
preprocess: [vitePreprocess({})],
};
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" ] }
})
]
}