@nil-/doc 0.2.35 → 0.2.36
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/CHANGELOG.md +8 -0
- package/components/Layout.svelte +39 -30
- package/components/block/Block.svelte +1 -0
- package/components/block/Template.svelte +34 -15
- package/components/etc/Container.svelte +5 -1
- package/components/etc/ThemeIcon.svelte +1 -3
- package/components/navigation/Nav.svelte +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @nil-/doc
|
|
2
2
|
|
|
3
|
+
## 0.2.36
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [doc][fix] color changes and transition ([#55](https://github.com/njaldea/mono/pull/55))
|
|
8
|
+
|
|
9
|
+
- [all] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
|
|
10
|
+
|
|
3
11
|
## 0.2.35
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/components/Layout.svelte
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
display: grid;
|
|
6
6
|
grid-template-columns: 1fr;
|
|
7
7
|
grid-template-rows: minmax(40px, auto) 1fr;
|
|
8
|
+
gap: 1px;
|
|
8
9
|
width: 100%;
|
|
9
10
|
height: 100%;
|
|
10
11
|
font-family: "Fira Code", "Courier New", Courier, monospace;
|
|
@@ -20,6 +21,11 @@
|
|
|
20
21
|
user-select: none;
|
|
21
22
|
}
|
|
22
23
|
|
|
24
|
+
.main {
|
|
25
|
+
height: 100%;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
.content {
|
|
24
30
|
height: 100%;
|
|
25
31
|
padding: 5px;
|
|
@@ -49,24 +55,25 @@
|
|
|
49
55
|
|
|
50
56
|
/* colors */
|
|
51
57
|
.layout {
|
|
52
|
-
transition: color 350ms, background-color 350ms;
|
|
53
|
-
background-color: hsl(0, 0%, 100%);
|
|
54
|
-
color: hsl(0, 100%, 0%);
|
|
55
58
|
color-scheme: light;
|
|
59
|
+
color: hsl(0, 0%, 0%);
|
|
60
|
+
background-color: hsl(0, 2%, 70%);
|
|
61
|
+
transition: color 350ms, background-color 350ms;
|
|
56
62
|
}
|
|
57
63
|
|
|
58
|
-
.layout
|
|
59
|
-
|
|
64
|
+
.layout.dark {
|
|
65
|
+
color-scheme: dark;
|
|
66
|
+
color: hsl(0, 0%, 80%);
|
|
67
|
+
background-color: hsl(0, 2%, 40%);
|
|
60
68
|
}
|
|
61
69
|
|
|
62
|
-
.layout
|
|
63
|
-
|
|
70
|
+
.layout > div {
|
|
71
|
+
background-color: hsl(0, 0%, 100%);
|
|
72
|
+
transition: background-color 350ms;
|
|
64
73
|
}
|
|
65
74
|
|
|
66
|
-
.layout.dark {
|
|
75
|
+
.layout.dark > div {
|
|
67
76
|
background-color: hsl(200, 4%, 14%);
|
|
68
|
-
color: hsl(200, 6%, 80%);
|
|
69
|
-
color-scheme: dark;
|
|
70
77
|
}
|
|
71
78
|
</style>
|
|
72
79
|
|
|
@@ -94,25 +101,27 @@ $:
|
|
|
94
101
|
<ThemeIcon bind:dark={$isDark} />
|
|
95
102
|
<NilIcon />
|
|
96
103
|
</div>
|
|
97
|
-
<
|
|
98
|
-
<
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
104
|
+
<div class="main">
|
|
105
|
+
<Container offset={250} vertical secondary>
|
|
106
|
+
<svelte:fragment slot="primary">
|
|
107
|
+
<div class="content scrollable">
|
|
108
|
+
<Nav
|
|
109
|
+
info={data}
|
|
110
|
+
selected={current ?? ""}
|
|
111
|
+
sorter={sorter ?? defaultSorter}
|
|
112
|
+
renamer={renamer ?? ((s) => s)}
|
|
113
|
+
on:navigate
|
|
114
|
+
/>
|
|
115
|
+
</div>
|
|
116
|
+
</svelte:fragment>
|
|
117
|
+
<svelte:fragment slot="secondary">
|
|
118
|
+
<div class="content scrollable">
|
|
119
|
+
{#key current}
|
|
120
|
+
<slot />
|
|
121
|
+
{/key}
|
|
122
|
+
</div>
|
|
123
|
+
</svelte:fragment>
|
|
124
|
+
</Container>
|
|
125
|
+
</div>
|
|
117
126
|
</div>
|
|
118
127
|
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
<style>
|
|
2
|
+
div {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
2
6
|
.template {
|
|
3
7
|
display: grid;
|
|
4
|
-
gap: 5px;
|
|
5
8
|
padding-bottom: 10px;
|
|
6
9
|
padding-top: 10px;
|
|
7
10
|
grid-auto-rows: 1fr;
|
|
8
11
|
grid-auto-columns: auto;
|
|
9
12
|
grid-auto-flow: row;
|
|
13
|
+
border-radius: 5px;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
.template.columns {
|
|
@@ -22,7 +26,7 @@
|
|
|
22
26
|
|
|
23
27
|
.content {
|
|
24
28
|
min-height: 100px;
|
|
25
|
-
border-radius: 5px
|
|
29
|
+
border-radius: 5px;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
div:not(.cside) > .misc {
|
|
@@ -37,8 +41,16 @@
|
|
|
37
41
|
user-select: none;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
|
-
.
|
|
44
|
+
.instance {
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.content,
|
|
49
|
+
.misc {
|
|
41
50
|
margin: 3px;
|
|
51
|
+
border-style: solid;
|
|
52
|
+
border-width: 1px;
|
|
53
|
+
padding: 1px;
|
|
42
54
|
}
|
|
43
55
|
|
|
44
56
|
/* scrollable */
|
|
@@ -53,22 +65,29 @@
|
|
|
53
65
|
}
|
|
54
66
|
|
|
55
67
|
/* colors */
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
background-color: hsl(0,
|
|
68
|
+
.template {
|
|
69
|
+
color: hsl(0, 0%, 0%);
|
|
70
|
+
background-color: hsl(0, 2%, 70%);
|
|
71
|
+
transition: color 350ms, background-color 350ms;
|
|
59
72
|
}
|
|
60
73
|
|
|
61
|
-
.
|
|
62
|
-
|
|
74
|
+
.template.dark {
|
|
75
|
+
color-scheme: dark;
|
|
76
|
+
color: hsl(0, 0%, 80%);
|
|
77
|
+
background-color: hsl(0, 2%, 40%);
|
|
63
78
|
}
|
|
64
79
|
|
|
65
|
-
.content
|
|
66
|
-
|
|
67
|
-
|
|
80
|
+
.content,
|
|
81
|
+
.misc {
|
|
82
|
+
border-color: hsl(0, 2%, 60%);
|
|
83
|
+
background-color: hsl(0, 0%, 100%);
|
|
84
|
+
transition: border-color 350ms, background-color 350ms;
|
|
68
85
|
}
|
|
69
86
|
|
|
70
|
-
.
|
|
71
|
-
|
|
87
|
+
.dark .content,
|
|
88
|
+
.dark .misc {
|
|
89
|
+
border-color: hsl(0, 2%, 40%);
|
|
90
|
+
background-color: hsl(200, 4%, 14%);
|
|
72
91
|
}
|
|
73
92
|
</style>
|
|
74
93
|
|
|
@@ -99,10 +118,10 @@ $:
|
|
|
99
118
|
let key = false;
|
|
100
119
|
beforeUpdate(() => key = !key);
|
|
101
120
|
</script>
|
|
102
|
-
<div class="template" class:columns>
|
|
121
|
+
<div class="template" class:columns class:dark={$isDark}>
|
|
103
122
|
{#each $params as param (param.id)}
|
|
104
123
|
<div
|
|
105
|
-
class="
|
|
124
|
+
class="instance"
|
|
106
125
|
class:cside={expanded && "right" === $controlsState.position}
|
|
107
126
|
use:cquery={{
|
|
108
127
|
class: "cside",
|
|
@@ -56,10 +56,14 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.container.dark {
|
|
59
|
-
--color-p: hsl(0, 2%,
|
|
59
|
+
--color-p: hsl(0, 2%, 40%);
|
|
60
60
|
--color-s: hsl(0, 0%, 100%);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
.divider {
|
|
64
|
+
transition: border-color 350ms, background-color 350ms;
|
|
65
|
+
}
|
|
66
|
+
|
|
63
67
|
.container:not(.vertical) > .divider {
|
|
64
68
|
border-bottom: var(--color-p) solid 2.5px;
|
|
65
69
|
border-top: var(--color-p) solid 2.5px;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script>import { tweened } from "svelte/motion";
|
|
2
|
-
import { elasticOut } from "svelte/easing";
|
|
3
2
|
export let dark = true;
|
|
4
|
-
const values = tweened(dark ? vdark : vlight
|
|
3
|
+
const values = tweened(dark ? vdark : vlight);
|
|
5
4
|
$:
|
|
6
5
|
$values = dark ? vdark : vlight;
|
|
7
6
|
const index = indexer++;
|
|
@@ -49,7 +48,6 @@ const vdark = {
|
|
|
49
48
|
class:dark
|
|
50
49
|
viewBox="-25 -25 50 50"
|
|
51
50
|
transform={`rotate(${$values.rotate})`}
|
|
52
|
-
style={`color: hsl(0, 0%, ${$values.v * 100}%);`}
|
|
53
51
|
on:click={() => (dark = !dark)}
|
|
54
52
|
on:keypress={null}
|
|
55
53
|
>
|