diff --git a/package.json b/package.json index 1805027..5896d37 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@sveltejs/kit": "^1.20.5", "sass": "^1.62.0", "svelte": "^3.54.0", + "svelte-material-icons": "^3.0.5", "svelte-preprocess": "^5.0.3", "vite": "^4.3.0" }, diff --git a/src/app.scss b/src/app.scss index c14cb0c..ea53e23 100644 --- a/src/app.scss +++ b/src/app.scss @@ -13,45 +13,11 @@ h1, h2, h3, h4, h5, h6, body { // color: #000000; } -/* Green Light scheme (Default) */ -/* Can be forced with data-theme="light" */ [data-theme="light"], :root:not([data-theme="dark"]) { - --primary: #43a047; - --primary-hover: #388e3c; - --primary-focus: rgba(67, 160, 71, 0.125); - --primary-inverse: #FFF; background-color: #FAF9F6; } -/* Green Dark scheme (Auto) */ -/* Automatically enabled if user has Dark mode enabled */ -@media only screen and (prefers-color-scheme: dark) { - :root:not([data-theme]) { - --primary: #43a047; - --primary-hover: #4caf50; - --primary-focus: rgba(67, 160, 71, 0.25); - --primary-inverse: #FFF; - } -} - -/* Green Dark scheme (Forced) */ -/* Enabled if forced with data-theme="dark" */ -[data-theme="dark"] { - --primary: #43a047; - --primary-hover: #4caf50; - --primary-focus: rgba(67, 160, 71, 0.25); - --primary-inverse: #FFF; -} - -/* Green (Common styles) */ -:root { - --form-element-active-border-color: var(--primary); - --form-element-focus-color: var(--primary-focus); - --switch-color: var(--primary-inverse); - --switch-checked-background-color: var(--primary); -} - p, li { cursor: text; } @@ -60,3 +26,37 @@ article { border-radius: 10px; box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2); } + +[role="button"].card { + background-color: $zinc-100; + border-color: $zinc-50; + p { + color: black; + } +} + +button.transparent, +[role="button"].transparent { + --pico-background-color: var(--pico-form-element-background-color); + --pico-border-color: var(--pico-form-element-border-color); + border-left: none; + border-right: none; + color: black; + + &:focus { + outline: none; + } +} + +[data-theme="dark"] button.transparent, +[data-theme="dark"] [role="button"].transparent { + color: white; +} + +[data-theme="dark"] [role="button"].card { + background-color: $slate-800; + border-color: $slate-750; + p { + color: white; + } +} diff --git a/src/lib/common.ts b/src/lib/common.ts new file mode 100644 index 0000000..1013a3c --- /dev/null +++ b/src/lib/common.ts @@ -0,0 +1,15 @@ +export function smoothScrollTo(elementId: string) { + const element = document.getElementById(elementId); + if (element) { + element.scrollIntoView({ + behavior: 'smooth' + }); + } +} + +export function handleKeydown(elementId: string, event: KeyboardEvent) { + // Trigger redirection on Enter key or Space bar + if (event.key === 'Enter' || event.key === ' ') { + smoothScrollTo(elementId); + } +} diff --git a/src/lib/modules/ModCards.svelte b/src/lib/modules/ModCards.svelte index 1888744..a815bd0 100644 --- a/src/lib/modules/ModCards.svelte +++ b/src/lib/modules/ModCards.svelte @@ -1,10 +1,30 @@