diff --git a/.storybook/main.js b/.storybook/main.js index 2413b24..79b4658 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,13 +1,11 @@ - - /** @type { import('@storybook/svelte-vite').StorybookConfig } */ const config = { - "stories": [ - "../src/**/*.stories.@(js|ts|svelte)" - ], - "addons": [ - "@storybook/addon-svelte-csf" - ], - "framework": "@storybook/svelte-vite" + stories: ['../src/**/*.stories.svelte'], + addons: ['@storybook/addon-svelte-csf'], + framework: { + name: '@storybook/svelte-vite', + options: {}, + }, }; + export default config; \ No newline at end of file diff --git a/generate-stories.js b/generate-stories.js new file mode 100644 index 0000000..de5a0ee --- /dev/null +++ b/generate-stories.js @@ -0,0 +1,37 @@ +import { readFileSync, writeFileSync } from 'fs'; +import { fileURLToPath } from 'url'; +import { dirname, resolve } from 'path'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +const svelteSrc = readFileSync(resolve(__dirname, './src/components/Svg.svelte'), 'utf-8'); + +const match = svelteSrc.match(/export const VARIANTS\s*=\s*\[([^\]]+)\]/); +if (!match) { + console.error('Could not find VARIANTS in Svg.svelte'); + process.exit(1); +} + +const variants = match[1] + .split(',') + .map(v => v.trim().replace(/['"]/g, '')) + .filter(Boolean); + +const stories = variants.map(v => ``).join('\n'); + +const output = ` + +${stories} +`; + +const outPath = resolve(__dirname, './src/stories/Svg.stories.svelte'); +writeFileSync(outPath, output, 'utf-8'); +console.log(`✅ Generated ${variants.length} stories: ${variants.join(', ')}`); \ No newline at end of file diff --git a/package.json b/package.json index dcb77a4..3db29fd 100644 --- a/package.json +++ b/package.json @@ -8,16 +8,18 @@ "build": "vite build", "preview": "vite preview", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "prestorybook": "node generate-stories.js", + "prebuild-storybook": "node generate-stories.js" }, "devDependencies": { + "@storybook/addon-svelte-csf": "^5.0.11", + "@storybook/svelte-vite": "^10.2.15", "@sveltejs/vite-plugin-svelte": "^6.2.1", "@types/js-yaml": "^4.0.9", - "svelte": "^5.43.8", - "vite": "npm:rolldown-vite@7.2.5", "storybook": "^10.2.15", - "@storybook/svelte-vite": "^10.2.15", - "@storybook/addon-svelte-csf": "^5.0.11" + "svelte": "^5.43.8", + "vite": "npm:rolldown-vite@7.2.5" }, "overrides": { "vite": "npm:rolldown-vite@7.2.5" diff --git a/public/_data/partners.yml b/public/_data/partners.yml index 8ea6e57..612420c 100644 --- a/public/_data/partners.yml +++ b/public/_data/partners.yml @@ -23,11 +23,6 @@ url: https://taltech.ee/et/infotehnoloogia-teaduskond additionalText: -- name: HexTech Solutions - image: hextech_logo.svg - url: https://hextech.ee/ - additionalText: - - name: EAS & MKM image: eas.svg url: https://eis.ee/ diff --git a/src/app.css b/src/app.css index 5e57d80..9a73bd0 100644 --- a/src/app.css +++ b/src/app.css @@ -2,54 +2,42 @@ @import "tailwindcss"; +/* Overwriting tailwindcss specific variables */ +@theme { + --color-orange-500: #f0941d; + --color-orange-300: #ffa940; + --color-orange-600: #d67d0a; + + --color-gray-100: #fffdfa; + --color-gray-900: #0d0d0d; + + --spacing-0: 0px; + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 16px; + --spacing-4: 24px; + --spacing-5: 32px; + --spacing-6: 48px; + + --max-width-2xl: 700px; + --max-width-3xl: 800px; + --max-width-4xl: 900px; +} + /* Design tokens & theme variables (light defaults) */ :root { - /* color tokens (light defaults) */ - --orange: #f0941d; - --orange-light: #ffa940; - --orange-dark: #d67d0a; - --black: #000000; - --off-black: #0d0d0d; - --white: #ffffff; - --off-white: #fffdfa; - --gray-50: #fafafa; - --gray-100: #f5f5f5; - --gray-200: #e5e5e5; - --gray-300: #d4d4d4; - --gray-800: #262626; - --gray-900: #171717; - /* layout tokens */ --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */ --content-max: 1200px; /* main content max width */ - --nav-height: 64px; - --footer-height: 80px; /* spacing scale */ - --space-0: 0px; - --space-1: 4px; - --space-2: 8px; - --space-3: 16px; - --space-4: 24px; - --space-5: 32px; - --space-6: 48px; - - /* radius / shadows */ - --radius-sm: 6px; - --radius-md: 10px; - --radius-lg: 14px; - --radius-xl: 20px; - --shadow-1: 0 1px 2px rgba(240, 148, 29, 0.2), - 0 1px 3px rgba(240, 148, 29, 0.12); - --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); - --shadow-glow: 0 0 20px rgba(240, 148, 29, 0.3); - - /* breakpoints */ - --bp-sm: 480px; - --bp-md: 768px; - --bp-lg: 1024px; - --bp-xl: 1280px; + --spacing-0: 0px; + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 16px; + --spacing-4: 24px; + --spacing-5: 32px; + --spacing-6: 48px; /* type scale (fluid base + modular sizes) */ --fs-base: clamp(0.95rem, 0.9vw + 0.9rem, 1rem); @@ -59,16 +47,6 @@ --fs-lg: 1.125rem; --fs-xl: 1.5rem; --line-height: 1.45; - - /* derived component tokens that components can rely on */ - --button-bg: var(--color-surface); - --button-text: var(--color-text); - --card-bg: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.98), - rgba(255, 255, 255, 0.96) - ); - --accent: var(--color-primary); } /* Global box sizing & accessible defaults */ @@ -88,8 +66,6 @@ html { } body { margin: 0; - color: var(--color-text); - background: var(--color-bg); line-height: var(--line-height); min-height: 100vh; -webkit-tap-highlight-color: transparent; @@ -100,22 +76,18 @@ body { /* Basic link & button defaults that components inherit */ a { - color: var(--color-primary); text-decoration: none; font-weight: 550; } a:hover { text-decoration: underline; - color: var(--color-primary-600); } button, input[type="button"], input[type="submit"] { font: inherit; - color: var(--button-text); - background: var(--button-bg); - border: 1px solid var(--color-border); + border: 1px solid var(--color-border); /* TODO: fix css magic (we need the border, but the variable doesnt exist, but you cant remove it either) */ padding: 0.5em 0.9em; border-radius: var(--radius-sm); cursor: pointer; @@ -126,17 +98,10 @@ button:active { transform: translateY(1px); } button:focus { - outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent); + outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent); /* TODO: change same magic here */ outline-offset: 2px; } -/* Simple responsive grid that adapts to available width */ -.grid { - display: grid; - gap: var(--space-3); - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); -} - /* Utility: visually hidden (accessible labels) */ .sr-only, .visually-hidden { @@ -167,49 +132,34 @@ button:focus { } } -/* Navbar & footer helpers so components can assume consistent heights */ -.site-header { - height: var(--nav-height); - display: flex; - align-items: center; - background: transparent; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 40; - border-bottom: 1px solid var(--color-border); - backdrop-filter: blur(6px); -} -.site-footer { - height: var(--footer-height); - display: flex; - align-items: center; - border-top: 1px solid var(--color-border); - background: transparent; -} - -/* Small form controls default */ -.input { - padding: 0.6em 0.8em; - border-radius: var(--radius-sm); - border: 1px solid var(--color-border); - background: transparent; - color: inherit; -} - -/* Utility to visually reduce emphasis (muted text) */ -.muted { - color: var(--color-muted); - font-size: 0.95em; -} - -/* Accessibility: respect reduced motion */ +/* Accessibility settings */ @media (prefers-reduced-motion: reduce) { * { - animation-duration: 0.001ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.001ms !important; + animation: none !important; + transition: none !important; scroll-behavior: auto !important; } + + /* Automatically apply final animation states */ + [data-animation] { /* Everything with animation needs to be marked like this:
Hello World
*/ + all: unset !important; + } } + +@media (prefers-reduced-transparency: reduce) { + * { + background: solid !important; + backdrop-filter: none !important; + } +} + +@media (forced-colors: active) { + * { + background: Window !important; + color: WindowText !important; + border-color: WindowText !important; + } + a { + color: Highlight !important; + } +} \ No newline at end of file diff --git a/src/components/Button.svelte b/src/components/Button.svelte index 5424159..4fb3174 100644 --- a/src/components/Button.svelte +++ b/src/components/Button.svelte @@ -1,23 +1,10 @@ - - diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte index d22f471..03ff447 100644 --- a/src/components/Dropdown.svelte +++ b/src/components/Dropdown.svelte @@ -4,7 +4,6 @@ export let name = ""; export let buttonClass = ""; export let panelClassName = ""; - export let buttonHoverStyle = ""; let isOpen = false; @@ -22,7 +21,7 @@
- - - - - - - - -
- + - -

{$text.about}

- + +

{$text.about}

+ - +