@hanology/cham-browser 0.4.73 → 0.4.74

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 (2) hide show
  1. package/package.json +1 -1
  2. package/template/src/components/PartBlock.vue +40 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanology/cham-browser",
3
- "version": "0.4.73",
3
+ "version": "0.4.74",
4
4
  "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/template/src/components/PartBlock.vue CHANGED
@@ -64,8 +64,9 @@ const annotationEntries = computed(() =>
64
64
 
65
65
  <template>
66
66
  <div class="part-block" :class="{ 'part-block--vertical': vertical }">
67
- <div v-if="sourceLabel" class="part-source">
68
- {{ sourceLabel }}
67
+ <div v-if="sourceLabel" class="part-header">
68
+ <span class="part-header-num">{{ num }}</span>
69
+ <h3>{{ sourceLabel }}</h3>
69
70
  </div>
70
71
  <div class="part-text" @mouseover="onHover" @mouseleave="onLeave" @click="onTap">
71
72
  <span
@@ -114,17 +115,22 @@ const annotationEntries = computed(() =>
114
115
  border-left: 1px dashed var(--border-light);
115
116
  }
116
117
 
117
- .part-source {
118
- font-family: var(--sans);
119
- font-size: 12px;
120
- letter-spacing: 1px;
121
- color: var(--ink-faint);
122
- background: var(--surface);
123
- display: inline-block;
124
- padding: 3px 10px;
125
- border-radius: 3px;
126
- margin-bottom: 12px;
127
- border: 1px solid var(--border-light);
118
+ .part-header {
119
+ display: flex; align-items: center; gap: 12px;
120
+ margin-bottom: 20px; padding-bottom: 12px;
121
+ border-bottom: 1px solid var(--border);
122
+ }
123
+
124
+ .part-header-num {
125
+ display: inline-flex; align-items: center; justify-content: center;
126
+ width: 28px; height: 28px; border-radius: 50%;
127
+ background: var(--vermillion); color: var(--paper);
128
+ font-family: var(--sans); font-size: 13px; font-weight: 700;
129
+ flex-shrink: 0;
130
+ }
131
+
132
+ .part-header h3 {
133
+ font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--ink);
128
134
  }
129
135
 
130
136
  .part-text {
@@ -249,9 +255,28 @@ const annotationEntries = computed(() =>
249
255
  font-size: 0.38em;
250
256
  }
251
257
 
252
- .part-block--vertical .part-source {
258
+ .part-block--vertical .part-header {
259
+ flex-direction: column;
260
+ align-items: flex-start;
253
261
  margin-bottom: 0;
254
- margin-left: 8px;
262
+ margin-left: 20px;
263
+ padding-bottom: 0;
264
+ border-bottom: none;
265
+ padding-left: 16px;
266
+ border-left: 2px solid var(--vermillion);
267
+ }
268
+
269
+ .part-block--vertical .part-header-num {
270
+ width: auto; height: auto;
271
+ border-radius: 0;
272
+ background: none;
273
+ color: var(--vermillion);
274
+ font-size: 16px;
275
+ }
276
+
277
+ .part-block--vertical .part-header h3 {
278
+ font-size: 20px;
279
+ letter-spacing: 6px;
255
280
  }
256
281
 
257
282
  .part-block--vertical .part-annotations {