slidev-theme-the-unnamed 0.0.4 → 0.0.5

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.
Files changed (6) hide show
  1. package/README.md +32 -10
  2. package/changelog.md +7 -2
  3. package/example.md +31 -3
  4. package/layouts/center.vue +7 -0
  5. package/package.json +1 -1
  6. package/styles/layout.css +45 -15
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  A [Slidev](https://sli.dev/) theme based on the [The unnamed - VS Code theme](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-unnamed-theme) by [Elio Struyf](https://elio.dev).
6
6
 
7
+ The unnamed theme allows you to fully customize its colors to fit your brand.
8
+
7
9
  ## Usage
8
10
 
9
11
  Add the following frontmatter to your `slides.md`. Start Slidev then it will prompt you to install the theme automatically.
@@ -26,7 +28,7 @@ The theme currently has the following layouts:
26
28
 
27
29
  ### Cover
28
30
 
29
- ![](./assets/001.png)
31
+ ![](/assets/cover.png)
30
32
 
31
33
  **Usage**
32
34
 
@@ -39,7 +41,7 @@ background: <image url> (optional)
39
41
 
40
42
  ### About me
41
43
 
42
- ![](./assets/002.png)
44
+ ![](/assets/about-me.png)
43
45
 
44
46
  **Usage**
45
47
 
@@ -59,9 +61,13 @@ social3:
59
61
  ---
60
62
  ```
61
63
 
64
+ ### Center
65
+
66
+ ![](/assets/center.png)
67
+
62
68
  ### Default
63
69
 
64
- ![](./assets/005.png)
70
+ ![](/assets/default.png)
65
71
 
66
72
 
67
73
  ## Cusomizations
@@ -70,9 +76,12 @@ You can customize the theme by adding the following frontmatter to your `slides.
70
76
 
71
77
  ```yaml
72
78
  themeConfig:
73
- background: "#161C2C"
74
79
  color: "#F3EFF5"
75
-
80
+ background: "#161C2C"
81
+
82
+ code-background: "#0F131E"
83
+ code-border: "#242d34"
84
+
76
85
  accents-teal: "#44FFD2"
77
86
  accents-yellow: "#FFE45E"
78
87
  accents-red: "#FE4A49"
@@ -80,13 +89,26 @@ themeConfig:
80
89
  accents-blue: "#5EADF2"
81
90
  accents-vulcan: "#0E131F"
82
91
 
83
- code-background: "#0F131E"
84
- code-border: "#242d34"
85
- ```
92
+ default-headingBg: var(--slidev-theme-accents-yellow)
93
+ default-headingColor: var(--slidev-theme-accents-vulcan)
86
94
 
87
- ## Components
95
+ center-headingBg: var(--slidev-theme-accents-blue)
96
+ center-headingColor: var(--slidev-theme-accents-vulcan)
97
+
98
+ cover-headingBg: var(--slidev-theme-accents-teal)
99
+ cover-headingColor: var(--slidev-theme-accents-vulcan)
100
+
101
+ section-headingBg: var(--slidev-theme-accents-lightblue)
102
+ section-headingColor: var(--slidev-theme-accents-vulcan)
103
+
104
+ aboutme-bg: var(--slidev-theme-color)
105
+ aboutme-color: var(--slidev-theme-background)
106
+ aboutme-helloBg: var(--slidev-theme-accents-yellow)
107
+ aboutme-helloColor: var(--slidev-theme-background)
108
+ aboutme-nameColor: var(--slidev-theme-accents-red)
109
+ ```
88
110
 
89
- *Coming later*
111
+ > **Info**: we made it possible to change all the accent colors, or define your own colors per type of slide.
90
112
 
91
113
  <br />
92
114
  <br />
package/changelog.md CHANGED
@@ -1,11 +1,16 @@
1
1
  # Changelog
2
2
 
3
- ## [0.0.4] - 2023-02-02
3
+ ## [0.0.5] - 2023-02-02
4
+
5
+ - Better css variable names for theming
6
+ - Added center layout
7
+
8
+ ## [0.0.4] - 2023-02-01
4
9
 
5
10
  - Added mermaid styles for `sequenceDiagram`
6
11
  - Small fixes
7
12
 
8
- ## [0.0.3] - 2023-02-02
13
+ ## [0.0.3] - 2023-02-01
9
14
 
10
15
  - Updated styles for all layouts
11
16
  - Added screenshots and documentation
package/example.md CHANGED
@@ -3,16 +3,36 @@ theme: ./
3
3
  background: https://source.unsplash.com/collection/94734566/1920x1080
4
4
 
5
5
  themeConfig:
6
- background: "#161C2C"
7
6
  color: "#F3EFF5"
7
+ background: "#161C2C"
8
+
9
+ code-background: "#0F131E"
10
+ code-border: "#242d34"
11
+
8
12
  accents-teal: "#44FFD2"
9
13
  accents-yellow: "#FFE45E"
10
14
  accents-red: "#FE4A49"
11
15
  accents-lightblue: "#15C2CB"
12
16
  accents-blue: "#5EADF2"
13
17
  accents-vulcan: "#0E131F"
14
- code-background: "#0F131E"
15
- code-border: "#242d34"
18
+
19
+ default-headingBg: var(--slidev-theme-accents-yellow)
20
+ default-headingColor: var(--slidev-theme-accents-vulcan)
21
+
22
+ center-headingBg: var(--slidev-theme-accents-blue)
23
+ center-headingColor: var(--slidev-theme-accents-vulcan)
24
+
25
+ cover-headingBg: var(--slidev-theme-accents-teal)
26
+ cover-headingColor: var(--slidev-theme-accents-vulcan)
27
+
28
+ section-headingBg: var(--slidev-theme-accents-lightblue)
29
+ section-headingColor: var(--slidev-theme-accents-vulcan)
30
+
31
+ aboutme-bg: var(--slidev-theme-color)
32
+ aboutme-color: var(--slidev-theme-background)
33
+ aboutme-helloBg: var(--slidev-theme-accents-yellow)
34
+ aboutme-helloColor: var(--slidev-theme-background)
35
+ aboutme-nameColor: var(--slidev-theme-accents-red)
16
36
  ---
17
37
 
18
38
  # Slidev - The Unnamed
@@ -49,6 +69,14 @@ layout: section
49
69
 
50
70
  Subtitle for the section
51
71
 
72
+ ---
73
+ layout: center
74
+ ---
75
+
76
+ # Center title
77
+
78
+ Subtitle for the center layout
79
+
52
80
  ---
53
81
 
54
82
  # Code with Shiki and The unnamed theme
package/layouts/center.vue ADDED
@@ -0,0 +1,7 @@
1
+ <template>
2
+ <div class="slidev-layout center h-full grid place-content-center">
3
+ <div class="my-auto flex flex-col justify-center items-center">
4
+ <slot />
5
+ </div>
6
+ </div>
7
+ </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "slidev-theme-the-unnamed",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "keywords": [
5
5
  "slidev-theme",
6
6
  "slidev"
package/styles/layout.css CHANGED
@@ -12,12 +12,36 @@
12
12
  --slidev-theme-code-border: #242d34;
13
13
 
14
14
  // Accent colors
15
+ --slidev-theme-accents-rose: #f141a8;
15
16
  --slidev-theme-accents-teal: #44FFD2;
16
17
  --slidev-theme-accents-yellow: #FFE45E;
17
18
  --slidev-theme-accents-red: #FE4A49;
18
19
  --slidev-theme-accents-lightblue: #15C2CB;
19
20
  --slidev-theme-accents-blue: #5EADF2;
20
21
  --slidev-theme-accents-vulcan: #0E131F;
22
+
23
+ // Default
24
+ --slidev-theme-default-headingBg: var(--slidev-theme-accents-yellow);
25
+ --slidev-theme-default-headingColor: var(--slidev-theme-accents-vulcan);
26
+
27
+ // Center
28
+ --slidev-theme-center-headingBg: var(--slidev-theme-accents-blue);
29
+ --slidev-theme-center-headingColor: var(--slidev-theme-accents-vulcan);
30
+
31
+ // Cover
32
+ --slidev-theme-cover-headingBg: var(--slidev-theme-accents-teal);
33
+ --slidev-theme-cover-headingColor: var(--slidev-theme-accents-vulcan);
34
+
35
+ // Section
36
+ --slidev-theme-section-headingBg: var(--slidev-theme-accents-lightblue);
37
+ --slidev-theme-section-headingColor: var(--slidev-theme-accents-vulcan);
38
+
39
+ // About me
40
+ --slidev-theme-aboutme-bg: var(--slidev-theme-color);
41
+ --slidev-theme-aboutme-color: var(--slidev-theme-background);
42
+ --slidev-theme-aboutme-helloBg: var(--slidev-theme-accents-yellow);
43
+ --slidev-theme-aboutme-helloColor: var(--slidev-theme-background);
44
+ --slidev-theme-aboutme-nameColor: var(--slidev-theme-accents-red);
21
45
  }
22
46
 
23
47
  /* The unnamed styles */
@@ -106,7 +130,8 @@
106
130
  .slidev-layout.intro,
107
131
  .slidev-layout.default,
108
132
  .slidev-layout.center,
109
- .slidev-layout[layout="default"] {
133
+ .slidev-layout[layout="default"],
134
+ .about-me {
110
135
  h1 {
111
136
  display: inline-block;
112
137
  padding: 0.25em;
@@ -139,10 +164,10 @@
139
164
  .slidev-layout.default,
140
165
  .slidev-layout[layout="default"] {
141
166
  h1 {
142
- color: var(--slidev-theme-code-background);
167
+ color: var(--slidev-theme-default-headingColor);
143
168
 
144
169
  &::before {
145
- background: var(--slidev-theme-accents-yellow);
170
+ background: var(--slidev-theme-default-headingBg);
146
171
  }
147
172
  }
148
173
  }
@@ -175,7 +200,7 @@
175
200
  z-index: 1;
176
201
 
177
202
  h1 {
178
- color: var(--slidev-theme-accents-vulcan);
203
+ color: var(--slidev-theme-cover-headingColor);
179
204
  padding: .25em .5em;
180
205
  margin: 0;
181
206
 
@@ -184,7 +209,7 @@
184
209
  height: calc(100% - 0.25em);
185
210
  margin-left: -0.25em;
186
211
  margin-top: -0.12em;
187
- background: var(--slidev-theme-accents-teal);
212
+ background: var(--slidev-theme-cover-headingBg);
188
213
  }
189
214
  }
190
215
 
@@ -220,7 +245,7 @@
220
245
  padding-bottom: 2.5rem;
221
246
 
222
247
  h1 {
223
- color: var(--slidev-theme-code-background);
248
+ color: var(--slidev-theme-section-headingColor);
224
249
  font-size: 2.25rem;
225
250
  line-height: 2.5rem;
226
251
  margin-left: -0.05em;
@@ -228,7 +253,7 @@
228
253
  position: relative;
229
254
 
230
255
  &::before {
231
- background: var(--slidev-theme-accents-lightblue);
256
+ background: var(--slidev-theme-section-headingBg);
232
257
  }
233
258
  }
234
259
 
@@ -242,39 +267,44 @@
242
267
  // Center
243
268
  .slidev-layout.center {
244
269
  h1 {
245
- color: var(--slidev-theme-code-background);
270
+ width: fit-content;
271
+ color: var(--slidev-theme-center-headingColor);
246
272
  margin-bottom: 0;
247
273
 
248
274
  &::before {
249
- background: var(--slidev-theme-accents-blue);
275
+ background: var(--slidev-theme-center-headingBg);
250
276
  }
251
277
 
252
278
  code {
253
279
  background: transparent !important;
254
280
  }
255
281
  }
282
+
283
+
256
284
  }
257
285
 
258
286
  /* About me slide */
259
287
  .about-me {
260
- background: var(--slidev-theme-color) !important;
261
- color: var(--slidev-theme-code-background) !important;
288
+ background: var(--slidev-theme-aboutme-bg);
289
+ color: var(--slidev-theme-aboutme-color) !important;
262
290
 
263
291
  h1 {
264
- background: var(--slidev-theme-accents-yellow);
265
- display: inline-block;
292
+ color: var(--slidev-theme-aboutme-helloColor);
266
293
  padding: 0.25em;
267
294
  font-weight: bold;
268
295
  font-size: 3em;
296
+
297
+ &::before {
298
+ background: var(--slidev-theme-aboutme-helloBg);
299
+ }
269
300
  }
270
301
 
271
302
  h2 {
272
- color: var(--slidev-theme-accents-red);
303
+ color: var(--slidev-theme-aboutme-nameColor);
273
304
  font-size: 2.5em;
274
305
  }
275
306
 
276
307
  p {
277
308
  margin-bottom: 0;
278
- color: #3F3F3F;
279
309
  }
280
310
  }