feat(css): Add skeleton css
This commit is contained in:
parent
2945af1ee3
commit
87734f0c0c
3163
package-lock.json
generated
3163
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@ -1,17 +1,23 @@
|
||||
{
|
||||
"name": "double-maker",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.27.4",
|
||||
"svelte": "^4.2.7",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module"
|
||||
"name": "double-maker",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"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
13
postcss.config.cjs
Normal 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;
|
||||
@ -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
4
src/app.pcss
Normal 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
5
src/routes/+layout.svelte
Normal file
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import "../app.pcss";
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
@ -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>
|
||||
<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>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<span id="result"></span>
|
||||
<button on:click={copy}>Copy me cunt</button>
|
||||
<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>
|
||||
|
||||
@ -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} */
|
||||
const config = {
|
||||
kit: {
|
||||
// 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()
|
||||
}
|
||||
kit: {
|
||||
// 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(),
|
||||
},
|
||||
|
||||
preprocess: [vitePreprocess({})],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
24
tailwind.config.cjs
Normal file
24
tailwind.config.cjs
Normal 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" ] }
|
||||
})
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user