accomadesc 0.3.5 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PageComponent.svelte +24 -14
- package/dist/PageHeader.svelte +2 -3
- package/dist/Section.svelte +2 -0
- package/dist/Text.svelte +5 -4
- package/dist/basic/Icon.svelte +5 -1
- package/dist/basic/Icon.svelte.d.ts +1 -0
- package/dist/style.d.ts +7 -0
- package/dist/style.js +7 -0
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
import { page } from '$app/state';
|
|
17
17
|
import Button from './basic/Button.svelte';
|
|
18
18
|
import { onMount } from 'svelte';
|
|
19
|
+
import { fallbackCSS } from './style';
|
|
19
20
|
|
|
20
21
|
let {
|
|
21
22
|
hero,
|
|
@@ -25,6 +26,7 @@
|
|
|
25
26
|
logoLink,
|
|
26
27
|
content,
|
|
27
28
|
nav,
|
|
29
|
+
css,
|
|
28
30
|
showFooter = true,
|
|
29
31
|
footerRef = 'footer_html',
|
|
30
32
|
fixedHamburger = true,
|
|
@@ -58,7 +60,7 @@
|
|
|
58
60
|
}
|
|
59
61
|
};
|
|
60
62
|
|
|
61
|
-
let
|
|
63
|
+
let selectedTheme = $state('light');
|
|
62
64
|
onMount(() => {
|
|
63
65
|
if (window) {
|
|
64
66
|
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
|
@@ -68,6 +70,15 @@
|
|
|
68
70
|
}
|
|
69
71
|
});
|
|
70
72
|
|
|
73
|
+
let theme = $state(fallbackCSS);
|
|
74
|
+
$effect(() => {
|
|
75
|
+
if (selectedTheme == 'light') {
|
|
76
|
+
theme = css?.themes.light;
|
|
77
|
+
} else if (selectedTheme == 'dark') {
|
|
78
|
+
theme = css?.themes.dark;
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
71
82
|
let hamburgerOpen = $state(false);
|
|
72
83
|
let pageWidth = $state(0);
|
|
73
84
|
</script>
|
|
@@ -109,21 +120,16 @@
|
|
|
109
120
|
{/snippet}
|
|
110
121
|
|
|
111
122
|
{#snippet themeswitcher()}
|
|
112
|
-
<div class="theme" class:hero={!!hero}>
|
|
113
|
-
{#if
|
|
114
|
-
<Button iconName="moon" clicked={() => (
|
|
123
|
+
<div class="theme" class:hero={!!hero} class:ham={!!hero && !navbarOverHamburger}>
|
|
124
|
+
{#if selectedTheme == 'light'}
|
|
125
|
+
<Button iconName="moon" clicked={() => (selectedTheme = 'dark')} />
|
|
115
126
|
{:else}
|
|
116
|
-
<Button iconName="sun" clicked={() => (
|
|
127
|
+
<Button iconName="sun" clicked={() => (selectedTheme = 'light')} />
|
|
117
128
|
{/if}
|
|
118
129
|
</div>
|
|
119
130
|
{/snippet}
|
|
120
131
|
|
|
121
|
-
<div
|
|
122
|
-
class="page-wrapper"
|
|
123
|
-
bind:clientWidth={pageWidth}
|
|
124
|
-
class:light={theme == 'light'}
|
|
125
|
-
class:dark={theme == 'dark'}
|
|
126
|
-
>
|
|
132
|
+
<div class="page-wrapper" bind:clientWidth={pageWidth} style={theme}>
|
|
127
133
|
{#if hero}
|
|
128
134
|
<header class="hero-image">
|
|
129
135
|
<Photo photoPath={hero.photoPath} alt="Hero Image" eager={true} />
|
|
@@ -228,6 +234,10 @@
|
|
|
228
234
|
top: 0.5rem;
|
|
229
235
|
}
|
|
230
236
|
|
|
237
|
+
.theme.hero.ham {
|
|
238
|
+
left: 0.5rem;
|
|
239
|
+
}
|
|
240
|
+
|
|
231
241
|
div.section-wrapper {
|
|
232
242
|
margin-bottom: 2rem;
|
|
233
243
|
width: 100%;
|
|
@@ -283,17 +293,17 @@
|
|
|
283
293
|
text-align: center;
|
|
284
294
|
}
|
|
285
295
|
|
|
286
|
-
|
|
296
|
+
h1 {
|
|
297
|
+
color: var(--main-font-color);
|
|
287
298
|
font-weight: bolder;
|
|
288
299
|
font-size: 2.8rem;
|
|
289
300
|
font-family: var(--landing-title-font-family, 'sans-serif');
|
|
290
301
|
font-variant: var(--landing-title-font-variant, 'small-caps');
|
|
291
|
-
color: var(--title-font-color);
|
|
292
302
|
filter: var(--title-filter);
|
|
293
303
|
}
|
|
294
304
|
|
|
295
305
|
@media (max-width: 300px) {
|
|
296
|
-
|
|
306
|
+
h1 {
|
|
297
307
|
font-size: 1.6rem;
|
|
298
308
|
}
|
|
299
309
|
}
|
package/dist/PageHeader.svelte
CHANGED
|
@@ -31,9 +31,6 @@
|
|
|
31
31
|
margin: 0;
|
|
32
32
|
width: 100%;
|
|
33
33
|
background-color: var(--header-bg-color);
|
|
34
|
-
* {
|
|
35
|
-
color: var(--header-font-color);
|
|
36
|
-
}
|
|
37
34
|
}
|
|
38
35
|
|
|
39
36
|
div.text-wrapper {
|
|
@@ -51,6 +48,7 @@
|
|
|
51
48
|
font-family: var(--header-font-family, 'sans-serif');
|
|
52
49
|
font-variant: var(--header-font-variant, 'small-caps');
|
|
53
50
|
margin-bottom: 1rem;
|
|
51
|
+
color: var(--header-font-color);
|
|
54
52
|
}
|
|
55
53
|
|
|
56
54
|
div.header h1 {
|
|
@@ -58,6 +56,7 @@
|
|
|
58
56
|
margin-bottom: 0.3rem;
|
|
59
57
|
font-family: var(--page-title-font-family, 'sans-serif');
|
|
60
58
|
font-variant: var(--page-title-font-variant, 'small-caps');
|
|
59
|
+
color: var(--header-font-color);
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
object.logo {
|
package/dist/Section.svelte
CHANGED
package/dist/Text.svelte
CHANGED
|
@@ -52,6 +52,11 @@
|
|
|
52
52
|
width: 100%;
|
|
53
53
|
background-color: var(--main-bg-color);
|
|
54
54
|
|
|
55
|
+
:global(*) {
|
|
56
|
+
color: var(--main-font-color);
|
|
57
|
+
font-size: var(--font-size-text);
|
|
58
|
+
}
|
|
59
|
+
|
|
55
60
|
div.content {
|
|
56
61
|
width: 100%;
|
|
57
62
|
height: 100%;
|
|
@@ -60,10 +65,6 @@
|
|
|
60
65
|
margin-left: 0.2rem;
|
|
61
66
|
margin-right: 0.2rem;
|
|
62
67
|
|
|
63
|
-
:global(*) {
|
|
64
|
-
color: var(--main-font-color);
|
|
65
|
-
font-size: var(--font-size-text);
|
|
66
|
-
}
|
|
67
68
|
:global(h3) {
|
|
68
69
|
font-size: var(--font-size-header);
|
|
69
70
|
text-align: left;
|
package/dist/basic/Icon.svelte
CHANGED
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
iconName,
|
|
6
6
|
width,
|
|
7
7
|
height,
|
|
8
|
+
filter,
|
|
8
9
|
}: {
|
|
9
10
|
color?: string;
|
|
10
11
|
iconName: string;
|
|
11
12
|
width?: string;
|
|
12
13
|
height?: string;
|
|
14
|
+
filter?: string;
|
|
13
15
|
} = $props();
|
|
14
16
|
</script>
|
|
15
17
|
|
|
@@ -17,7 +19,9 @@
|
|
|
17
19
|
class="icon-wrapper"
|
|
18
20
|
style="
|
|
19
21
|
width: {width};
|
|
20
|
-
height: {height};
|
|
22
|
+
height: {height};
|
|
23
|
+
{filter ? `filter: ${filter};` : ''}
|
|
24
|
+
"
|
|
21
25
|
>
|
|
22
26
|
{@html getIcon(iconName, color)}
|
|
23
27
|
</div>
|
package/dist/style.d.ts
ADDED
package/dist/style.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export const fallbackCSS = {
|
|
2
|
+
base: "\n body,html {\n font-family: var(--main-font-family, 'sans-serif');\n font-variant: var(--main-font-variant, 'small-caps');\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n\n font-family: var(--main-font-family, 'sans-serif');\n font-variant: var(--main-font-variant, 'small-caps');\n }\n\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n *::before {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n hr {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n\n h4 {\n font-family: var(--header-font-family, 'sans-serif');\n font-variant: var(--header-font-variant, 'small-caps');\n font-size: 1.2rem;\n text-align: center;\n margin-bottom: 0.2rem;\n margin-top: 0.4rem;\n } \n\n\n h3 {\n font-family: var(--header-font-family, 'sans-serif');\n font-variant: var(--header-font-variant, 'small-caps');\n text-align: center;\n font-size: 1.8rem;\n margin-bottom: 0.6rem;\n margin-top: 1rem;\n } \n\n h2 {\n font-family: var(--header-font-family, 'sans-serif');\n font-variant: var(--header-font-variant, 'small-caps');\n font-size: 2.2rem;\n text-align: center;\n margin-bottom: 0.8rem;\n margin-top: 1.2rem;\n } \n\n\n h1 {\n font-family: var(--header-font-family, 'sans-serif');\n font-variant: var(--header-font-variant, 'small-caps');\n font-size: 3rem;\n text-align: center;\n margin-bottom: 0.8rem;\n margin-top: 1.2rem;\n } \n\n ol {\n padding-left: 0.5rem;\n margin: 1rem;\n }\n\n ul {\n margin-left: 1rem;\n padding-left: 0.2rem;\n }",
|
|
3
|
+
themes: {
|
|
4
|
+
light: '--main-font-color: rgba(34, 49, 63, 1);\n--main-bg-color: rgba(255,255,255,1);\n--main-border-color: rgba(2,48,71,1);\n--main-border: 1px solid var(--main-border-color);\n--accept-font-color: rgba(46, 204, 113, 1);\n--alert-font-color: rgba(157,0,0,1);\n--invalid-border-color: rgba(176,19,19,1);\n--invalid-border: 0.15rem solid var(--invalid-border-color);\n--disable-font-color: rgba(52, 73, 94, 0.4);\n--disabled-border-color: rgba(35,35,35,0.5);\n--disabled-border: 0.1rem solid var(--disabled-border-color);\n--focussed-border-color: rgba(41, 128, 185, 0.9);\n--focussed-border: 0.15rem solid var(--focussed-border-color);\n--focussed-filter: drop-shadow(0 0 0.75rem rgba(41, 128, 185, 0.9));\n--avatar-border: 0.15rem solid rgba(34, 49, 63, 0.9);\n--hamburger-color: rgba(41, 128, 185, 1);\n--hamburger-bg-color: rgba(0,0,0,0);\n--hamburger-filter: drop-shadow(0.2rem 0.2rem 0.2rem rgba(255,255,255,1));\n--gallery-button-bg-color: rgba(220, 235, 245, 0.5);\n--gallery-button-font-color: rgba(15,14,15,0.6);\n--button-font-color: rgba(7,7,7,1);\n--button-bg-color: rgba(52, 152, 219, 1);\n--button-danger-bg-color: rgba(176,19,19,1);\n--button-danger-font-color: rgba(255,255,255,1);\n--button-focus-filter: drop-shadow(0 0 0.75rem rgba(41, 128, 185, 0.9));\n--icon-not-color: rgba(192, 57, 43, 1);\n--icon-disabled-color: rgba(35,35,35,0.4);\n--icon-color: rgba(34, 49, 63, 1);\n--table-odd-bg-color: rgba(236, 240, 241, 1);\n--table-odd-font-color: rgba(0,0,0,1);\n--table-even-bg-color: rgba(220, 225, 229, 1);\n--table-even-font-color: rgba(0,0,0,1);\n--table-header-bg-color: rgba(44, 62, 80, 1);\n--table-header-font-color: rgba(243,243,243,1);\n--table-footer-bg-color: rgba(44, 62, 80, 1);\n--table-footer-font-color: rgba(255, 255, 255, 1);\n--picture-link-bg-color: rgba(52, 73, 94, 0.8);\n--picture-link-font-color: rgba(168,194,250,1);\n--external-link-font-color: rgba(105,152,252,1);\n--attribution-bg-color: rgba(236, 240, 241, 0.6);\n--attribution-font-color: rgba(7,7,7,1);\n--picture-frame-shadow: 0px 1.1px 2.2px rgba(0,0,0,0.02),0px 2.7px 5.3px rgba(0,0,0,0.028),0px 5px 10px rgba(0,0,0,0.035),0px 8.9px 17.9px rgba(0,0,0,0.042),0px 16.7px 33.4px rgba(0,0,0,0.05),0px 40px 80px rgba(0,0,0,0.07);\n--nav-font-color: rgba(255, 255, 255, 1);\n--nav-bg-color: rgba(44, 62, 80, 0.8);\n--title-font-color: rgba(255,255,255,1);\n--title-filter: drop-shadow(0.2rem 0.3rem 0.2rem rgba(0,0,0,1));\n--footer-font-color: rgba(255, 255, 255, 1);\n--footer-bg-color: rgba(44, 62, 80, 1);\n--header-font-color: rgba(255,240,240,1);\n--header-bg-color: rgba(7,7,7,1);\n--acco-card-shadow: -1.2px -3.7px 4.5px rgba(0,0,0,0.017),-1.4px -4.4px 8.9px rgba(0,0,0,0.024),-0.4px -1.3px 13.3px rgba(0,0,0,0.03),1.7px 5.5px 17.9px rgba(0,0,0,0.035),4.9px 15.5px 23.3px rgba(0,0,0,0.04),8.9px 28.2px 30.7px rgba(0,0,0,0.046),13.7px 43.1px 43.8px rgba(0,0,0,0.053),19px 60px 80px rgba(0,0,0,0.07);\n--acco-card-font: rgba(34, 49, 63, 1);\n--acco-card-bg: rgba(255, 255, 255, 1);\n--occuplan-main-border-color: rgba(52, 152, 219, 1);\n--occuplan-main-border: 1px solid var(--occuplan-main-border-color);\n--occuplan-grid-border-color: rgba(52, 152, 219, 0.2);\n--occuplan-grid-border: 0.2px solid var(--occuplan-grid-border-color);\n--occuplan-main-font-color: rgba(52, 152, 219, 1);\n--occuplan-main-bg-color: rgba(255,255,255,0);\n--occuplan-days-font-color: rgba(52, 152, 219, 1);\n--occuplan-days-bg-color: rgba(0,0,0,0);\n--occuplan-days-header-font-color: rgba(255, 255, 255, 1);\n--occuplan-days-header-bg-color: rgba(52, 152, 219, 1);\n--occuplan-weeknum-font-color: rgba(52, 152, 219, 0.5);\n--occuplan-weeknum-bg-color: rgba(0,0,0,0);\n--occuplan-months-font-color: rgba(255, 255, 255, 1);\n--occuplan-months-bg-color: rgba(52, 152, 219, 1);\n--occuplan-invalid-days-font-color: rgba(52, 73, 94, 1);\n--occuplan-invalid-days-bg-color: rgba(149, 165, 166, 0.6);\n--occuplan-weekend-bg-color: rgba(2,48,71,1);\n--occupation-type-1-font-color: rgba(255, 255, 255, 1);\n--occupation-type-1-bg-color: rgba(41, 128, 185, 1);\n--occupation-type-2-font-color: rgba(34, 49, 63, 1);\n--occupation-type-2-bg-colog: rgba(173, 216, 230, 1);\n--occupation-type-3-font-color: rgba(255,255,0,1);\n--occupation-type-3-bg-color: rgba(144, 238, 144, 1);\n--notes-vert-line: 0.5px dashed rgba(2,48,71,0.5);\n--notes-font-color: rgba(44, 62, 80, 1);\n--notes-bg-color: rgba(255, 255, 224, 1);\n--notes-disabled-font-color: rgba(22,0,103,1);\n--notes-disabled-bg-color: rgba(236, 240, 241, 1);\n',
|
|
5
|
+
dark: '--header-font-color: rgba(255,240,240,1);\n--header-bg-color: rgba(7,7,7,1);\n--main-font-color: rgba(255, 255, 255, 1);\n--main-bg-color: rgba(20, 20, 20, 1);\n--main-border-color: rgba(200, 200, 200, 1);\n--main-border: 1px solid var(--main-border-color);\n--accept-font-color: rgba(13, 157, 0, 1);\n--alert-font-color: rgba(255, 0, 0, 1);\n--invalid-border-color: rgba(255, 100, 100, 1);\n--invalid-border: 0.15rem solid var(--invalid-border-color);\n--disable-font-color: rgba(255, 255, 255, 0.4);\n--disabled-border-color: rgba(255, 255, 255, 0.5);\n--disabled-border: 0.1rem solid var(--disabled-border-color);\n--focussed-border-color: rgba(102, 120, 243, 0.9);\n--focussed-border: 0.15rem solid var(--focussed-border-color);\n--focussed-filter: drop-shadow(0 0 0.75rem rgba(102, 120, 243, 0.9));\n--avatar-border: 0.15rem solid rgba(255, 255, 255, 0.9);\n--hamburger-color: rgba(255, 255, 255, 1);\n--hamburger-bg-color: rgba(0, 0, 0, 0);\n--hamburger-filter: drop-shadow(0.2rem 0.2rem 0.2rem rgba(20, 20, 20, 1));\n--gallery-button-bg-color: rgba(30, 30, 30, 0.5);\n--gallery-button-font-color: rgba(255, 255, 255, 0.8);\n--button-font-color: rgba(255, 255, 255, 1);\n--button-bg-color: rgba(30, 30, 30, 1);\n--button-danger-bg-color: rgba(255, 0, 0, 1);\n--button-danger-font-color: rgba(255, 255, 255, 1);\n--button-focus-filter: drop-shadow(0 0 0.75rem rgba(102, 120, 243, 0.9));\n--icon-not-color: rgba(255, 50, 50, 1);\n--icon-disabled-color: rgba(255, 255, 255, 0.4);\n--icon-color: rgba(255, 255, 255, 1);\n--table-odd-bg-color: rgba(40, 40, 40, 1);\n--table-odd-font-color: rgba(255, 255, 255, 1);\n--table-even-bg-color: rgba(50, 50, 50, 1);\n--table-even-font-color: rgba(255, 255, 255, 1);\n--table-header-bg-color: rgba(20, 20, 20, 1);\n--table-header-font-color: rgba(200, 200, 200, 1);\n--table-footer-bg-color: rgba(20, 20, 20, 1);\n--table-footer-font-color: rgba(200, 200, 200, 1);\n--picture-link-bg-color: rgba(100, 100, 100, 0.8);\n--picture-link-font-color: rgba(168, 194, 250, 1);\n--external-link-font-color: rgba(105, 152, 252, 1);\n--attribution-bg-color: rgba(30, 30, 30, 0.9);\n--attribution-font-color: rgba(255, 255, 255, 1);\n--picture-frame-shadow: none;\n--nav-font-color: rgba(255,255,255,1);\n--nav-bg-color: rgba(20, 20, 20, 0.9);\n--title-font-color: rgba(255, 255, 255, 1);\n--title-filter: drop-shadow(0.2rem 0.3rem 0.2rem rgba(0,0,0,1)));\n--footer-font-color: rgba(225,233,254,1);\n--footer-bg-color: rgba(20, 20, 20, 1);\n--footer-font-color: rgba(225,233,254,1);\n--footer-bg-color: rgba(20, 20, 20, 1);\n--acco-card-shadow: none;\n--acco-card-font: rgba(255,229,229,1);\n--acco-card-bg: rgba(30, 30, 30, 1);\n--occuplan-main-border-color: rgba(200, 200, 200, 1);\n--occuplan-main-border: 1px solid var(--occuplan-main-border-color);\n--occuplan-grid-border-color: rgba(200, 200, 200, 0.2);\n--occuplan-grid-border: 0.2px solid var(--occuplan-grid-border-color);\n--occuplan-main-font-color: rgba(200, 200, 200, 1);\n--occuplan-main-bg-color: rgba(30, 30, 30, 0);\n--occuplan-days-font-color: rgba(200, 200, 200, 1);\n--occuplan-days-bg-color: rgba(0, 0, 0, 0);\n--occuplan-days-header-font-color: rgba(200, 200, 200, 1);\n--occuplan-days-header-bg-color: rgba(50, 50, 50, 1);\n--occuplan-weeknum-font-color: rgba(200, 200, 200, 0.5);\n--occuplan-weeknum-bg-color: rgba(0, 0, 0, 0);\n--occuplan-months-font-color: rgba(200, 200, 200, 1);\n--occuplan-months-bg-color: rgba(50, 50, 50, 1);\n--occuplan-invalid-days-font-color: rgba(255, 255, 255, 1);\n--occuplan-invalid-days-bg-color: rgba(110, 110, 110, 0.8);\n--occuplan-weekend-bg-color: rgba(200, 200, 200, 1);\n--occupation-type-1-font-color: rgba(200, 200, 200, 1);\n--occupation-type-1-bg-color: rgba(33, 158, 188, 1);\n--occupation-type-2-font-color: rgba(255, 255, 255, 1);\n--occupation-type-2-bg-colog: rgba(249,112,249,1);\n--occupation-type-3-font-color: rgba(255, 255, 255, 1);\n--occupation-type-3-bg-color: rgba(0, 112, 23, 1);\n--notes-vert-line: 0.5px dashed rgba(200, 200, 200, 0.5);\n--notes-font-color: rgba(255, 255, 255, 1);\n--notes-bg-color: rgba(50, 50, 50, 1);\n--notes-disabled-font-color: rgba(255, 255, 255, 1);\n--notes-disabled-bg-color: rgba(70, 70, 70, 1);\n',
|
|
6
|
+
},
|
|
7
|
+
};
|
package/dist/types.d.ts
CHANGED