diff --git a/package-lock.json b/package-lock.json index aad2a79..56d0729 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,12 +13,13 @@ "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@tailwindcss/typography": "^0.5.13", "autoprefixer": "^10.4.19", "daisyui": "^4.12.10", "postcss": "^8.4.39", "sass": "^1.77.8", "svelte": "^4.2.7", - "svelte-check": "^3.6.0", + "svelte-check": "^3.8.4", "tailwindcss": "^3.4.4", "tslib": "^2.4.1", "typescript": "^5.0.0", @@ -837,6 +838,34 @@ "vite": "^5.0.0" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz", + "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==", + "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/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", @@ -1717,6 +1746,24 @@ "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", "dev": true }, + "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", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", diff --git a/package.json b/package.json index b2c48fd..8021e80 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,13 @@ "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@tailwindcss/typography": "^0.5.13", "autoprefixer": "^10.4.19", "daisyui": "^4.12.10", "postcss": "^8.4.39", "sass": "^1.77.8", "svelte": "^4.2.7", - "svelte-check": "^3.6.0", + "svelte-check": "^3.8.4", "tailwindcss": "^3.4.4", "tslib": "^2.4.1", "typescript": "^5.0.0", diff --git a/src/app.css b/src/app.css index 1441d94..d9e5aaf 100644 --- a/src/app.css +++ b/src/app.css @@ -19,15 +19,6 @@ body { min-height: 100vh; margin: 0; - background-attachment: fixed; - background-color: var(--color-bg-1); - background-size: 100vw 100vh; - background-image: radial-gradient( - 50% 50% at 50% 50%, - rgba(255, 255, 255, 0.75) 0%, - rgba(255, 255, 255, 0) 100% - ), - linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); } h1, diff --git a/src/app.html b/src/app.html index 77a5ff5..bbb98ff 100644 --- a/src/app.html +++ b/src/app.html @@ -5,8 +5,14 @@ %sveltekit.head% + + + + + + - -
%sveltekit.body%
+ +
%sveltekit.body%
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 97201ef..6883677 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,26 @@ import Counter from './Counter.svelte'; import welcome from '$lib/images/svelte-welcome.webp'; import welcome_fallback from '$lib/images/svelte-welcome.png'; + import "tailwindcss/tailwind.css"; + + const sleep = (ms) => { + return new Promise((resolve) => setTimeout(resolve, ms)); + }; + + let isAutoTyping = true; + let textField; + async function startTyping(){ + for (let charecter of "testing..."){ + if (!isAutoTyping) break; + textField.value += charecter; + await sleep(200); + } + } + + import { onMount } from 'svelte'; + onMount(() => { + startTyping(); + }) @@ -10,50 +30,23 @@
-

- - - - Welcome - - - - to your new
SvelteKit app -

- -

- try editing src/routes/+page.svelte -

- - +
+
+

+ Welcome to
+ OpenBirch +

+
+
+
+ +
+
- diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index 8ed21e9..a93cdc4 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -5,126 +5,31 @@ import "tailwindcss/tailwind.css"; -
-
- - SvelteKit - -
- - - -
- - GitHub - +
+
+
+ Tailwind CSS Navbar component +
+
+
+
+
diff --git a/tailwind.config.js b/tailwind.config.js index 3a43fbd..0a92378 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,16 @@ export default { theme: { extend: {}, }, - plugins: [require('daisyui')], + plugins: [require("@tailwindcss/typography"), require('daisyui')], + daisyui: { + themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] + darkTheme: "dark", // name of one of the included themes for dark mode + base: true, // applies background color and foreground color for root element by default + styled: true, // include daisyUI colors and design decisions for all components + utils: true, // adds responsive and modifier utility classes + prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) + logs: true, // Shows info about daisyUI version and used config in the console when building your CSS + themeRoot: ":root", // The element that receives theme color CSS variables + }, }