vipassana-design-standards 0.0.11 → 0.0.14
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.
- checksums.yaml +4 -4
- data/lib/vipassana/logo_helper.rb +11 -4
- data/lib/vipassana/logos_inline_svg.rb +1 -2
- data/lib/vipassana-design-standards.rb +0 -1
- metadata +2 -202
- data/.htaccess +0 -3
- data/README.md +0 -7
- data/app/assets/fonts/FootlightMTProBold.woff +0 -0
- data/app/assets/fonts/FootlightMTProBoldItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProExtraBold.woff +0 -0
- data/app/assets/fonts/FootlightMTProExtraBoldIt.woff +0 -0
- data/app/assets/fonts/FootlightMTProItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProLight.base64.js +0 -1
- data/app/assets/fonts/FootlightMTProLight.woff +0 -0
- data/app/assets/fonts/FootlightMTProLightItalic.woff +0 -0
- data/app/assets/fonts/FootlightMTProRegular.woff +0 -0
- data/app/assets/fonts/Lato-Black.woff +0 -0
- data/app/assets/fonts/Lato-BlackItalic.woff +0 -0
- data/app/assets/fonts/Lato-Bold.woff +0 -0
- data/app/assets/fonts/Lato-BoldItalic.woff +0 -0
- data/app/assets/fonts/Lato-Italic.woff +0 -0
- data/app/assets/fonts/Lato-Light.base64.js +0 -1
- data/app/assets/fonts/Lato-Light.woff +0 -0
- data/app/assets/fonts/Lato-LightItalic.woff +0 -0
- data/app/assets/fonts/Lato-Regular.woff +0 -0
- data/app/assets/fonts/Lato-Thin.woff +0 -0
- data/app/assets/fonts/Lato-ThinItalic.woff +0 -0
- data/app/assets/fonts/OFL.txt +0 -93
- data/app/assets/images/wheels/favicon.png +0 -0
- data/app/assets/images/wheels/favicon.svg +0 -1483
- data/app/assets/images/wheels/old versions/2.5D-wheel.png +0 -0
- data/app/assets/images/wheels/old versions/2.5D-wheel.svg +0 -109
- data/app/assets/images/wheels/old versions/2D-wheel.svg +0 -472
- data/app/assets/images/wheels/old versions/3D-wheel.svg +0 -1
- data/app/assets/images/wheels/old versions/dhamma wheel 3D.png +0 -0
- data/app/assets/images/wheels/old versions/wheel-3d.ai +5 -3727
- data/app/assets/images/wheels/old versions/wheel-3d.png +0 -0
- data/app/assets/images/wheels/tests/2.5D-wheel-1.svg +0 -414
- data/app/assets/images/wheels/tests/2.5D-wheel-2.svg +0 -409
- data/app/assets/images/wheels/tests/2.5D-wheel-3.svg +0 -449
- data/app/assets/images/wheels/tests/2.5D-wheel-4.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-5.svg +0 -452
- data/app/assets/images/wheels/tests/2.5D-wheel-6.svg +0 -457
- data/app/assets/images/wheels/tests/2.5D-wheel-7.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-8.svg +0 -459
- data/app/assets/images/wheels/tests/2.5D-wheel-sebastian.svg +0 -3
- data/app/assets/images/wheels/tests/3D-wheel-2.svg +0 -1352
- data/app/assets/images/wheels/tests/3D-wheel-sebastian.svg +0 -1
- data/app/assets/images/wheels/tests/3D-wheel.svg +0 -1
- data/app/assets/images/wheels/wheel-2023-duotone.png +0 -0
- data/app/assets/images/wheels/wheel-2023-duotone.svg +0 -1
- data/app/assets/images/wheels/wheel-2023-duotone.svg.js +0 -1
- data/app/assets/images/wheels/wheel-2023-working-document-with-all-layers.svg +0 -1608
- data/app/assets/images/wheels/wheel-2023.png +0 -0
- data/app/assets/images/wheels/wheel-2023.svg +0 -1
- data/app/assets/images/wheels/wheel-2023.svg.js +0 -1
- data/app/assets/javascripts/i18n.js +0 -302
- data/app/assets/javascripts/index.js +0 -400
- data/app/assets/stylesheets/custom-bootstrap-utilities.scss +0 -114
- data/app/assets/stylesheets/custom-bootstrap-variables.scss +0 -121
- data/app/assets/stylesheets/custom-bootstrap.scss +0 -151
- data/app/assets/stylesheets/fonts.css +0 -5182
- data/app/assets/stylesheets/index.css +0 -179
- data/app/assets/stylesheets/logo.css +0 -127
- data/app/assets/stylesheets/vds-header.scss +0 -30
- data/app/assets/stylesheets/vds-layout.scss +0 -85
- data/app/assets/stylesheets/vds-mixins.scss +0 -5
- data/app/assets/stylesheets/vds-sidenav.scss +0 -43
- data/app/assets/stylesheets/vds.scss +0 -11
- data/dist/Dhamma-Wheel.svg +0 -1
- data/dist/design-standards-v0.3.pdf +0 -0
- data/dist/favicon.png +0 -0
- data/dist/favicon.svg +0 -1490
- data/dist/fonts.zip +0 -0
- data/dist/logos/logo-bg-large.png +0 -0
- data/dist/logos/logo-bg-small.png +0 -0
- data/dist/logos/logo-bg.png +0 -0
- data/dist/logos/logo-cs-large.png +0 -0
- data/dist/logos/logo-cs-small.png +0 -0
- data/dist/logos/logo-cs.png +0 -0
- data/dist/logos/logo-de-large.png +0 -0
- data/dist/logos/logo-de-small.png +0 -0
- data/dist/logos/logo-de.png +0 -0
- data/dist/logos/logo-el-large.png +0 -0
- data/dist/logos/logo-el-small.png +0 -0
- data/dist/logos/logo-el.png +0 -0
- data/dist/logos/logo-en-large.png +0 -0
- data/dist/logos/logo-en-small.png +0 -0
- data/dist/logos/logo-en.png +0 -0
- data/dist/logos/logo-es-large.png +0 -0
- data/dist/logos/logo-es-small.png +0 -0
- data/dist/logos/logo-es.png +0 -0
- data/dist/logos/logo-fa-large.png +0 -0
- data/dist/logos/logo-fa-small.png +0 -0
- data/dist/logos/logo-fa.png +0 -0
- data/dist/logos/logo-fi-large.png +0 -0
- data/dist/logos/logo-fi-small.png +0 -0
- data/dist/logos/logo-fi.png +0 -0
- data/dist/logos/logo-fr-large.png +0 -0
- data/dist/logos/logo-fr-small.png +0 -0
- data/dist/logos/logo-fr.png +0 -0
- data/dist/logos/logo-gu-large.png +0 -0
- data/dist/logos/logo-gu-small.png +0 -0
- data/dist/logos/logo-gu.png +0 -0
- data/dist/logos/logo-he-large.png +0 -0
- data/dist/logos/logo-he-small.png +0 -0
- data/dist/logos/logo-he.png +0 -0
- data/dist/logos/logo-hi-large.png +0 -0
- data/dist/logos/logo-hi-small.png +0 -0
- data/dist/logos/logo-hi.png +0 -0
- data/dist/logos/logo-hu-large.png +0 -0
- data/dist/logos/logo-hu-small.png +0 -0
- data/dist/logos/logo-hu.png +0 -0
- data/dist/logos/logo-id-large.png +0 -0
- data/dist/logos/logo-id-small.png +0 -0
- data/dist/logos/logo-id.png +0 -0
- data/dist/logos/logo-it-large.png +0 -0
- data/dist/logos/logo-it-small.png +0 -0
- data/dist/logos/logo-it.png +0 -0
- data/dist/logos/logo-ja-large.png +0 -0
- data/dist/logos/logo-ja-small.png +0 -0
- data/dist/logos/logo-ja.png +0 -0
- data/dist/logos/logo-km-large.png +0 -0
- data/dist/logos/logo-km-small.png +0 -0
- data/dist/logos/logo-km.png +0 -0
- data/dist/logos/logo-ko-large.png +0 -0
- data/dist/logos/logo-ko-small.png +0 -0
- data/dist/logos/logo-ko.png +0 -0
- data/dist/logos/logo-lt-large.png +0 -0
- data/dist/logos/logo-lt-small.png +0 -0
- data/dist/logos/logo-lt.png +0 -0
- data/dist/logos/logo-lv-large.png +0 -0
- data/dist/logos/logo-lv-small.png +0 -0
- data/dist/logos/logo-lv.png +0 -0
- data/dist/logos/logo-mk-large.png +0 -0
- data/dist/logos/logo-mk-small.png +0 -0
- data/dist/logos/logo-mk.png +0 -0
- data/dist/logos/logo-mr-large.png +0 -0
- data/dist/logos/logo-mr-small.png +0 -0
- data/dist/logos/logo-mr.png +0 -0
- data/dist/logos/logo-nl-large.png +0 -0
- data/dist/logos/logo-nl-small.png +0 -0
- data/dist/logos/logo-nl.png +0 -0
- data/dist/logos/logo-or-large.png +0 -0
- data/dist/logos/logo-or-small.png +0 -0
- data/dist/logos/logo-or.png +0 -0
- data/dist/logos/logo-pl-large.png +0 -0
- data/dist/logos/logo-pl-small.png +0 -0
- data/dist/logos/logo-pl.png +0 -0
- data/dist/logos/logo-pt-large.png +0 -0
- data/dist/logos/logo-pt-small.png +0 -0
- data/dist/logos/logo-pt.png +0 -0
- data/dist/logos/logo-ro-large.png +0 -0
- data/dist/logos/logo-ro-small.png +0 -0
- data/dist/logos/logo-ro.png +0 -0
- data/dist/logos/logo-ru-large.png +0 -0
- data/dist/logos/logo-ru-small.png +0 -0
- data/dist/logos/logo-ru.png +0 -0
- data/dist/logos/logo-si-large.png +0 -0
- data/dist/logos/logo-si-small.png +0 -0
- data/dist/logos/logo-si.png +0 -0
- data/dist/logos/logo-sl-large.png +0 -0
- data/dist/logos/logo-sl-small.png +0 -0
- data/dist/logos/logo-sl.png +0 -0
- data/dist/logos/logo-sr-large.png +0 -0
- data/dist/logos/logo-sr-small.png +0 -0
- data/dist/logos/logo-sr.png +0 -0
- data/dist/logos/logo-sv-large.png +0 -0
- data/dist/logos/logo-sv-small.png +0 -0
- data/dist/logos/logo-sv.png +0 -0
- data/dist/logos/logo-ta-large.png +0 -0
- data/dist/logos/logo-ta-small.png +0 -0
- data/dist/logos/logo-ta.png +0 -0
- data/dist/logos/logo-te-large.png +0 -0
- data/dist/logos/logo-te-small.png +0 -0
- data/dist/logos/logo-te.png +0 -0
- data/dist/logos/logo-th-large.png +0 -0
- data/dist/logos/logo-th-small.png +0 -0
- data/dist/logos/logo-th.png +0 -0
- data/dist/logos/logo-tr-large.png +0 -0
- data/dist/logos/logo-tr-small.png +0 -0
- data/dist/logos/logo-tr.png +0 -0
- data/dist/logos/logo-vi-large.png +0 -0
- data/dist/logos/logo-vi-small.png +0 -0
- data/dist/logos/logo-vi.png +0 -0
- data/dist/logos/logo-zh-HANS-large.png +0 -0
- data/dist/logos/logo-zh-HANS-small.png +0 -0
- data/dist/logos/logo-zh-HANS.png +0 -0
- data/dist/logos/logo-zh-HANT-HK-large.png +0 -0
- data/dist/logos/logo-zh-HANT-HK-small.png +0 -0
- data/dist/logos/logo-zh-HANT-HK.png +0 -0
- data/dist/logos/logo-zh-HANT-large.png +0 -0
- data/dist/logos/logo-zh-HANT-small.png +0 -0
- data/dist/logos/logo-zh-HANT.png +0 -0
- data/dist/logos-inline-svg.json +0 -1
- data/dist/logos.zip +0 -0
- data/dist/resolutions/logo-en.svg +0 -1
- data/dist/resolutions/logo-en@128px.png +0 -0
- data/dist/resolutions/logo-en@640px.png +0 -0
- data/dist/resolutions/logo-en@64px.png +0 -0
- data/index.html +0 -231
- data/lib/vipassana/engine.rb +0 -4
- data/package.json +0 -11
- data/resolution.html +0 -22
- data/vipassana-design-standards.gemspec +0 -15
@@ -1,400 +0,0 @@
|
|
1
|
-
// i18n JSON
|
2
|
-
import i18nJson from './i18n.js?ver=0.10'
|
3
|
-
|
4
|
-
// Dependencies
|
5
|
-
import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
|
6
|
-
import fileSaver from 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/+esm'
|
7
|
-
import jszip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'
|
8
|
-
|
9
|
-
// Graphicals element as JS
|
10
|
-
import wheel from '../images/wheels/wheel-2023.svg.js'
|
11
|
-
import wheelDuotone from '../images/wheels/wheel-2023-duotone.svg.js'
|
12
|
-
import footlight from '../fonts/FootlightMTProLight.base64.js'
|
13
|
-
import lato from '../fonts/Lato-Light.base64.js'
|
14
|
-
|
15
|
-
export default {
|
16
|
-
data() {
|
17
|
-
return {
|
18
|
-
ready: false,
|
19
|
-
locale: 'en',
|
20
|
-
width: 1200,
|
21
|
-
height: 100,
|
22
|
-
scale100: 100,
|
23
|
-
wheel: 'wheel1',
|
24
|
-
disposition: 'left-one-line',
|
25
|
-
displayTagline: true,
|
26
|
-
night: false,
|
27
|
-
embedSVG: false,
|
28
|
-
generating: false,
|
29
|
-
customImageName: null,
|
30
|
-
customSizeName: null,
|
31
|
-
colorPalette: [
|
32
|
-
{ color: "#9C6B14", text: "Header text", name: "Dark Gold" },
|
33
|
-
{ color: "#B78730", text: "Buttons and graphical elements", name: "Light Gold" },
|
34
|
-
{ color: "#1E3461", text: "Header text, buttons and graphical elements", name: "Blue" },
|
35
|
-
{ color: "#4F4D47", text: "Paragraph Text", name: "Grey" },
|
36
|
-
]
|
37
|
-
}
|
38
|
-
},
|
39
|
-
computed: {
|
40
|
-
fullTitle() {
|
41
|
-
return this.t('vipassana_as_taught') || `${this.t('vipassana_meditation')} ${this.t('as_taught')}`
|
42
|
-
},
|
43
|
-
i18n() {
|
44
|
-
return i18nJson
|
45
|
-
},
|
46
|
-
isRtl() {
|
47
|
-
return this.i18n[this.locale].rtl
|
48
|
-
},
|
49
|
-
fontPath() {
|
50
|
-
return 'assets/fonts/'
|
51
|
-
},
|
52
|
-
titleFontUrl() {
|
53
|
-
return this.embedSVG ? footlight : `${this.fontPath}FootlightMTProLight.woff`
|
54
|
-
},
|
55
|
-
taglineFontUrl() {
|
56
|
-
return this.embedSVG ? lato : `${this.fontPath}Lato-Light.woff`
|
57
|
-
},
|
58
|
-
wheels() {
|
59
|
-
return {
|
60
|
-
wheel1: wheel,
|
61
|
-
wheel2: wheelDuotone,
|
62
|
-
}
|
63
|
-
},
|
64
|
-
wheelSVGCode() {
|
65
|
-
return this.wheels[this.wheel]
|
66
|
-
},
|
67
|
-
wheelPath() {
|
68
|
-
const paths = {
|
69
|
-
wheel1: 'https://design-standards.dhamma.org/dist/Dhamma-Wheel.svg',
|
70
|
-
wheel2: 'https://design-standards.dhamma.org/assets/images/wheels/wheel-2023-duotone.svg',
|
71
|
-
}
|
72
|
-
return paths[this.wheel]
|
73
|
-
},
|
74
|
-
scale() {
|
75
|
-
return this.scale100 / 100
|
76
|
-
},
|
77
|
-
dispositions() {
|
78
|
-
return ['left-one-line', 'left-two-lines', 'centered']
|
79
|
-
},
|
80
|
-
titleFontSize() {
|
81
|
-
switch (this.locale) {
|
82
|
-
case "si": return 27;
|
83
|
-
default: return 32
|
84
|
-
}
|
85
|
-
},
|
86
|
-
taglineFontSize() {
|
87
|
-
switch (this.locale) {
|
88
|
-
case "si": return 16;
|
89
|
-
default: return 18
|
90
|
-
}
|
91
|
-
},
|
92
|
-
titleFontFamily() {
|
93
|
-
return this.getTitleFontFamily(this.locale)
|
94
|
-
},
|
95
|
-
taglineFontFamily() {
|
96
|
-
return this.getTaglineFontFamily(this.locale)
|
97
|
-
},
|
98
|
-
reverse() {
|
99
|
-
return this.i18n[this.locale].reverse
|
100
|
-
},
|
101
|
-
positions() {
|
102
|
-
if (this.reverse) {
|
103
|
-
return {
|
104
|
-
'left-one-line': {
|
105
|
-
firstTitleTop: 60,
|
106
|
-
vTitleWithdraw: 6
|
107
|
-
},
|
108
|
-
'left-one-line_tagline': {
|
109
|
-
taglineTop: 38,
|
110
|
-
firstTitleTop: 73
|
111
|
-
},
|
112
|
-
'left-two-lines': {
|
113
|
-
secondTitleTop: 40,
|
114
|
-
firstTitleTop: 78
|
115
|
-
},
|
116
|
-
'left-two-lines_tagline': {
|
117
|
-
taglineTop: 19,
|
118
|
-
secondTitleTop: 56,
|
119
|
-
firstTitleTop: 92
|
120
|
-
},
|
121
|
-
'centered': {
|
122
|
-
secondTitleTop: 132,
|
123
|
-
firstTitleTop: 167,
|
124
|
-
},
|
125
|
-
'centered_tagline': {
|
126
|
-
taglineTop: 124,
|
127
|
-
secondTitleTop: 159,
|
128
|
-
firstTitleTop: 193,
|
129
|
-
|
130
|
-
},
|
131
|
-
}
|
132
|
-
}
|
133
|
-
return {
|
134
|
-
'left-one-line': {
|
135
|
-
firstTitleTop: 60,
|
136
|
-
vTitleWithdraw: 6
|
137
|
-
},
|
138
|
-
'left-one-line_tagline': {
|
139
|
-
firstTitleTop: 48,
|
140
|
-
taglineTop: 78,
|
141
|
-
vTitleWithdraw: 6
|
142
|
-
},
|
143
|
-
'left-two-lines': {
|
144
|
-
firstTitleTop: 43,
|
145
|
-
secondTitleTop: 81,
|
146
|
-
vTitleWithdraw: 3
|
147
|
-
},
|
148
|
-
'left-two-lines_tagline': {
|
149
|
-
firstTitleTop: 32,
|
150
|
-
secondTitleTop: 65,
|
151
|
-
taglineTop: 92,
|
152
|
-
vTitleWithdraw: 3
|
153
|
-
},
|
154
|
-
'centered': {
|
155
|
-
firstTitleTop: 132,
|
156
|
-
secondTitleTop: 167,
|
157
|
-
},
|
158
|
-
'centered_tagline': {
|
159
|
-
firstTitleTop: 132,
|
160
|
-
secondTitleTop: 167,
|
161
|
-
taglineTop: 195,
|
162
|
-
},
|
163
|
-
}
|
164
|
-
},
|
165
|
-
pos() {
|
166
|
-
return this.positions[this.disposition + (this.displayTagline ? '_tagline' : '')]
|
167
|
-
},
|
168
|
-
wheelTranslate() {
|
169
|
-
const wheelWidth = 70
|
170
|
-
if (this.disposition == 'centered') return (this.width / 2) - (wheelWidth / 2)
|
171
|
-
else return this.isRtl ? this.width - 70 : 0
|
172
|
-
},
|
173
|
-
textTranslate() {
|
174
|
-
return this.isRtl && this.disposition != 'centered' ? this.width : 0
|
175
|
-
},
|
176
|
-
imageName() {
|
177
|
-
if (this.customImageName) return this.customImageName
|
178
|
-
|
179
|
-
const wheel = this.wheel == 'wheel1' ? '' : `-${this.wheel}`
|
180
|
-
return `logo-${this.locale}-${this.disposition}${this.displayTagline ? '' : '-no-tagline'}${wheel}`
|
181
|
-
},
|
182
|
-
sizeName() {
|
183
|
-
if (this.customSizeName !== null) return this.customSizeName
|
184
|
-
|
185
|
-
return this.scale100 == 100 ? '' : `@${this.scale100}px`
|
186
|
-
},
|
187
|
-
titleColor() {
|
188
|
-
return this.night ? "#fff" : "#9C6B14"
|
189
|
-
},
|
190
|
-
taglineColor() {
|
191
|
-
return this.night ? "#ffffff90" : "#4F4D47"
|
192
|
-
},
|
193
|
-
logoCode() {
|
194
|
-
return `<img height="64" src="https://design-standards.dhamma.org/dist/logos/logo-${this.locale}.png" alt="${this.fullTitle}"/>`
|
195
|
-
}
|
196
|
-
},
|
197
|
-
mounted() {
|
198
|
-
this.ready = true
|
199
|
-
this.$watch(
|
200
|
-
(vm) => [vm.locale, vm.disposition, vm.displayTagline],
|
201
|
-
() => { if (!this.generating) this.updateImageSize() },
|
202
|
-
{ immediate: true, deep: true, }
|
203
|
-
)
|
204
|
-
},
|
205
|
-
methods: {
|
206
|
-
t(key) {
|
207
|
-
return this.i18n[this.locale][key]
|
208
|
-
},
|
209
|
-
copyCode() {
|
210
|
-
navigator.clipboard.writeText(this.logoCode);
|
211
|
-
},
|
212
|
-
inlineSvg() {
|
213
|
-
return document.querySelector('#logo-svg').outerHTML
|
214
|
-
},
|
215
|
-
textLeft(text) {
|
216
|
-
if (this.disposition == 'centered') return this.width / 2
|
217
|
-
|
218
|
-
let result = 86
|
219
|
-
// improve alignement when text start with v, like Vipassana
|
220
|
-
if (!this.isRtl && text && text.length > 1 && text[0].toLowerCase() == 'v')
|
221
|
-
result -= (this.pos.vTitleWithdraw || 0)
|
222
|
-
return this.isRtl ? -1 * result : result
|
223
|
-
},
|
224
|
-
getTitleFontFamily(locale) {
|
225
|
-
return this.universalFont(locale) || "FootLight"
|
226
|
-
},
|
227
|
-
getTaglineFontFamily(locale) {
|
228
|
-
switch (locale) {
|
229
|
-
case "tr": return 'Noto Sans';
|
230
|
-
case "bg": return 'Noto Sans';
|
231
|
-
case "el": return 'Noto Sans';
|
232
|
-
case "mk": return 'Noto Sans';
|
233
|
-
case "mr": return 'Noto Sans';
|
234
|
-
case "or": return 'Noto Sans';
|
235
|
-
case "ro": return 'Noto Sans';
|
236
|
-
case "ru": return 'Noto Sans';
|
237
|
-
case "vi": return 'Noto Sans';
|
238
|
-
default: return this.universalFont(locale) || "Lato"
|
239
|
-
}
|
240
|
-
},
|
241
|
-
universalFont(locale) {
|
242
|
-
switch (locale) {
|
243
|
-
case "gu": return 'Noto Sans Gujarati';
|
244
|
-
case "ja": return 'Noto Sans JP';
|
245
|
-
case "ko": return 'Noto Sans KR';
|
246
|
-
case "si": return 'Noto Sans Sinhala';
|
247
|
-
case "km": return 'Noto Sans Khmer';
|
248
|
-
case "fa": return 'Noto Sans Arabic';
|
249
|
-
case "ar": return 'Noto Sans Arabic';
|
250
|
-
default: return null
|
251
|
-
}
|
252
|
-
},
|
253
|
-
downloadSVG() {
|
254
|
-
const [filename, content] = this.getSVGData()
|
255
|
-
fileSaver.saveAs(content, filename);
|
256
|
-
},
|
257
|
-
getSVGData() {
|
258
|
-
const blob = new Blob([this.inlineSvg()], {type: 'image/svg'})
|
259
|
-
return [`${this.imageName}.svg`, blob]
|
260
|
-
},
|
261
|
-
downloadPNG() {
|
262
|
-
const [filename, canvas] = this.getPNGData()
|
263
|
-
setTimeout(() => {
|
264
|
-
fileSaver.saveAs(canvas.toDataURL(), filename);
|
265
|
-
}, 100)
|
266
|
-
},
|
267
|
-
getPNGData() {
|
268
|
-
// SVG -> canvas -> PNG
|
269
|
-
const canvas = document.querySelector('canvas')
|
270
|
-
Canvg.fromString(canvas.getContext('2d'), this.inlineSvg()).render()
|
271
|
-
return [`${this.imageName}${this.sizeName}.png`, canvas]
|
272
|
-
},
|
273
|
-
async updateImageSize() {
|
274
|
-
await this.$nextTick()
|
275
|
-
// Update the logo size based on the real width of wheel + text
|
276
|
-
this.width = document.getElementById("logo").getBBox().width + 3
|
277
|
-
this.height = document.getElementById("logo").getBBox().height + 1
|
278
|
-
},
|
279
|
-
async generateAllInlineSVG() {
|
280
|
-
this.generating = true
|
281
|
-
this.embedSVG = false
|
282
|
-
let svgs = {}
|
283
|
-
|
284
|
-
for (let locale in this.i18n) {
|
285
|
-
this.locale = locale
|
286
|
-
svgs[locale] = {}
|
287
|
-
|
288
|
-
// Left 2 line no tag line for Mobile
|
289
|
-
this.disposition = 'left-two-lines'
|
290
|
-
this.displayTagline = false
|
291
|
-
svgs[locale].mobile = await this.generateSvgCode()
|
292
|
-
|
293
|
-
// Auto disposition
|
294
|
-
this.disposition = 'left-one-line'
|
295
|
-
this.displayTagline = true
|
296
|
-
await this.updateImageSize()
|
297
|
-
if ((this.width / this.height) > 8.5) {
|
298
|
-
this.disposition = 'left-two-lines'
|
299
|
-
}
|
300
|
-
svgs[locale].normal = await this.generateSvgCode()
|
301
|
-
|
302
|
-
// All dispositions
|
303
|
-
for (let disposition of this.dispositions) {
|
304
|
-
this.disposition = disposition
|
305
|
-
for (let tagline of [true, false]) {
|
306
|
-
this.displayTagline = tagline
|
307
|
-
const name = `${this.disposition}${this.displayTagline ? '' : '-no-tagline'}`
|
308
|
-
svgs[locale][name] = await this.generateSvgCode()
|
309
|
-
}
|
310
|
-
}
|
311
|
-
}
|
312
|
-
|
313
|
-
// Create ruby file
|
314
|
-
const result = `
|
315
|
-
# This file has been generated by design-standards.dhamma.org wesbite
|
316
|
-
# index.js#generateAllInlineSVG
|
317
|
-
|
318
|
-
VIPASSANA_SVGS = ${JSON.stringify(svgs)}
|
319
|
-
`
|
320
|
-
var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
|
321
|
-
fileSaver.saveAs(blob, "logos_inline_svg.rb")
|
322
|
-
|
323
|
-
var blob = new Blob([JSON.stringify(svgs)], {type: "text/plain;charset=utf-8"})
|
324
|
-
fileSaver.saveAs(blob, "logos-inline-svg.json")
|
325
|
-
|
326
|
-
this.generating = false
|
327
|
-
},
|
328
|
-
async generateSvgCode() {
|
329
|
-
await this.updateImageSize()
|
330
|
-
await this.$nextTick()
|
331
|
-
let svgNode = document.getElementById("logo-svg").cloneNode(true)
|
332
|
-
svgNode.removeAttribute('id')
|
333
|
-
svgNode.removeAttribute('width')
|
334
|
-
svgNode.removeAttribute('height')
|
335
|
-
svgNode.getElementById('logo').removeAttribute('transform')
|
336
|
-
let result = svgNode.outerHTML
|
337
|
-
return result.replace(/<\!--.*?-->/g, "") // remove comments
|
338
|
-
},
|
339
|
-
async generateAllLogos() {
|
340
|
-
this.generating = true
|
341
|
-
const zip = new jszip();
|
342
|
-
|
343
|
-
for (let locale in this.i18n) {
|
344
|
-
this.locale = locale
|
345
|
-
|
346
|
-
// Left 2 line no tag line for Mobile
|
347
|
-
this.disposition = 'left-two-lines'
|
348
|
-
this.displayTagline = false
|
349
|
-
this.customImageName = `logo-${this.locale}`
|
350
|
-
this.customSizeName = '-small'
|
351
|
-
await this.generateImages(zip, [80])
|
352
|
-
|
353
|
-
// Auto disposition
|
354
|
-
this.disposition = 'left-one-line'
|
355
|
-
this.displayTagline = true
|
356
|
-
await this.updateImageSize()
|
357
|
-
if ((this.width / this.height) > 8.5) {
|
358
|
-
this.disposition = 'left-two-lines'
|
359
|
-
}
|
360
|
-
this.customImageName = `logo-${this.locale}`
|
361
|
-
this.customSizeName = ''
|
362
|
-
await this.generateImages(zip, [64])
|
363
|
-
this.customSizeName = '-large'
|
364
|
-
await this.generateImages(zip, [80])
|
365
|
-
}
|
366
|
-
|
367
|
-
zip.generateAsync({type:"blob"}).then((content) => {
|
368
|
-
fileSaver.saveAs(content, "logos.zip");
|
369
|
-
this.generating = false
|
370
|
-
this.customImageName = null
|
371
|
-
this.customSizeName = null
|
372
|
-
this.scale100 = 100
|
373
|
-
this.locale = "en"
|
374
|
-
this.wheel = "wheel1"
|
375
|
-
this.disposition = "left-one-line"
|
376
|
-
});
|
377
|
-
},
|
378
|
-
async generateImages(zip, sizes) {
|
379
|
-
await this.updateImageSize()
|
380
|
-
await this.$nextTick()
|
381
|
-
// const [filename, content] = this.getSVGData()
|
382
|
-
// zip.file(filename, content);
|
383
|
-
for(let scale of sizes) {
|
384
|
-
this.scale100 = scale
|
385
|
-
await this.$nextTick()
|
386
|
-
await this.$nextTick()
|
387
|
-
await this.addPNGImage(zip)
|
388
|
-
}
|
389
|
-
},
|
390
|
-
addPNGImage(zip) {
|
391
|
-
return new Promise(resolve => {
|
392
|
-
const [filename, canvas] = this.getPNGData()
|
393
|
-
canvas.toBlob(function(blob) {
|
394
|
-
zip.file(filename, blob)
|
395
|
-
resolve()
|
396
|
-
})
|
397
|
-
})
|
398
|
-
}
|
399
|
-
},
|
400
|
-
}
|
@@ -1,114 +0,0 @@
|
|
1
|
-
|
2
|
-
@use "sass:math";
|
3
|
-
|
4
|
-
:root {
|
5
|
-
// Generate missing CSS Variables
|
6
|
-
@each $color, $value in $blues {
|
7
|
-
--#{$prefix}#{$color}: #{$value};
|
8
|
-
}
|
9
|
-
@each $color, $value in $golds {
|
10
|
-
--#{$prefix}#{$color}: #{$value};
|
11
|
-
}
|
12
|
-
@each $color, $value in $greens {
|
13
|
-
--#{$prefix}#{$color}: #{$value};
|
14
|
-
}
|
15
|
-
@each $color, $value in $reds {
|
16
|
-
--#{$prefix}#{$color}: #{$value};
|
17
|
-
}
|
18
|
-
--bs-border-color: #{$border-color};
|
19
|
-
--bs-font-heading: #{$headings-font-family};
|
20
|
-
|
21
|
-
--bs-spacer-x: #{$spacer-x};
|
22
|
-
@include media-breakpoint-down(md) {
|
23
|
-
--bs-spacer-x: 1rem;
|
24
|
-
}
|
25
|
-
|
26
|
-
// adds other variables
|
27
|
-
--layout-padding: 1rem;
|
28
|
-
@include media-breakpoint-up(md) {
|
29
|
-
--layout-padding: 1.5rem;
|
30
|
-
}
|
31
|
-
@include media-breakpoint-up(xl) {
|
32
|
-
--layout-padding: 2rem;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
// Font-family helpers
|
37
|
-
.ff-normal {
|
38
|
-
font-family: $font-family-sans-serif;
|
39
|
-
}
|
40
|
-
.ff-heading {
|
41
|
-
font-family: $headings-font-family;
|
42
|
-
margin-bottom: -0.3em; // strange, but the Footlight font does not seems to be properly aligned with baseline
|
43
|
-
}
|
44
|
-
|
45
|
-
// Font-size helpers
|
46
|
-
.fs-normal {
|
47
|
-
font-size: 1rem !important;
|
48
|
-
}
|
49
|
-
// fs-09-rem, fs-085-em..
|
50
|
-
@for $i from 5 through 9 {
|
51
|
-
.fs-0#{$i}-rem {
|
52
|
-
font-size: #{math.div($i, 10)}rem !important;
|
53
|
-
}
|
54
|
-
.fs-0#{$i}-em {
|
55
|
-
font-size: #{math.div($i, 10)}em !important;
|
56
|
-
}
|
57
|
-
.fs-0#{$i}5-rem {
|
58
|
-
font-size: #{math.div($i, 10) + 0.05}rem !important;
|
59
|
-
}
|
60
|
-
.fs-0#{$i}5-em {
|
61
|
-
font-size: #{math.div($i, 10) + 0.05}em !important;
|
62
|
-
}
|
63
|
-
}
|
64
|
-
// fs-11-rem, fs-125-em...
|
65
|
-
@for $i from 1 through 5 {
|
66
|
-
.fs-1#{$i}-rem {
|
67
|
-
font-size: #{1 + math.div($i, 10)}rem !important;
|
68
|
-
}
|
69
|
-
.fs-1#{$i}-em {
|
70
|
-
font-size: #{1 + math.div($i, 10)}em !important;
|
71
|
-
}
|
72
|
-
.fs-1#{$i}5-rem {
|
73
|
-
font-size: #{1.05 + math.div($i, 10)}rem !important;
|
74
|
-
}
|
75
|
-
.fs-1#{$i}5-em {
|
76
|
-
font-size: #{1.05 + math.div($i, 10)}em !important;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
.full-width-sm {
|
81
|
-
@include media-breakpoint-down(md) {
|
82
|
-
margin-left: -1rem !important;
|
83
|
-
margin-right: -1rem !important;
|
84
|
-
width: calc(100% + 2rem) !important;
|
85
|
-
box-shadow: none !important;
|
86
|
-
--bs-card-border-radius: 0;
|
87
|
-
--bs-card-inner-border-radius: 0;
|
88
|
-
}
|
89
|
-
}
|
90
|
-
|
91
|
-
.btn-floating-sm {
|
92
|
-
@include media-breakpoint-down(md) {
|
93
|
-
position: fixed !important;
|
94
|
-
bottom: 3rem !important;
|
95
|
-
z-index: 200 !important;
|
96
|
-
right: 1rem !important;
|
97
|
-
box-shadow: 0 3px 1rem #21252985 !important;
|
98
|
-
}
|
99
|
-
}
|
100
|
-
|
101
|
-
// Make this section take the whole page when printing
|
102
|
-
@media print {
|
103
|
-
.full-page-print {
|
104
|
-
background-color: white;
|
105
|
-
height: 100%;
|
106
|
-
width: 100%;
|
107
|
-
position: fixed;
|
108
|
-
top: 0;
|
109
|
-
left: 0;
|
110
|
-
margin: 0;
|
111
|
-
padding: 2rem;
|
112
|
-
z-index: 500;
|
113
|
-
}
|
114
|
-
}
|
@@ -1,121 +0,0 @@
|
|
1
|
-
// Color Palette
|
2
|
-
$blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
|
3
|
-
$blue-150: #f0f2f4; //#e6e5ec;
|
4
|
-
$blue-200: #D2D6DF; //#e6e5ec; //#ced4da;
|
5
|
-
$blue-300: #8586a2;
|
6
|
-
$blue-400: #707595;
|
7
|
-
$blue-500: #5b6588;
|
8
|
-
$blue-600: #47547b;
|
9
|
-
$blue-700: #32446e;
|
10
|
-
$blue-800: #1E3461;
|
11
|
-
$blue-900: #121f3a;
|
12
|
-
|
13
|
-
$blue: $blue-800;
|
14
|
-
|
15
|
-
$gold-100: #FCFAF7;
|
16
|
-
$gold-200: #f0e7d5;
|
17
|
-
$gold-300: #deccad;
|
18
|
-
$gold-400: #c6a364;
|
19
|
-
$gold-500: #B78730;
|
20
|
-
$gold-600: #9c6b14;
|
21
|
-
$gold-700: #7D550C;
|
22
|
-
$gold-800: #493613;
|
23
|
-
$gold-900: #241a09;
|
24
|
-
|
25
|
-
$gold: $gold-500;
|
26
|
-
|
27
|
-
$blues: (
|
28
|
-
"blue-100": $blue-100,
|
29
|
-
"blue-150": $blue-150,
|
30
|
-
"blue-200": $blue-200,
|
31
|
-
"blue-300": $blue-300,
|
32
|
-
"blue-400": $blue-400,
|
33
|
-
"blue-500": $blue-500,
|
34
|
-
"blue-600": $blue-600,
|
35
|
-
"blue-700": $blue-700,
|
36
|
-
"blue-800": $blue-800,
|
37
|
-
"blue-900": $blue-900
|
38
|
-
);
|
39
|
-
|
40
|
-
$golds: (
|
41
|
-
"gold-100": $gold-100,
|
42
|
-
"gold-200": $gold-200,
|
43
|
-
"gold-300": $gold-300,
|
44
|
-
"gold-400": $gold-400,
|
45
|
-
"gold-500": $gold-500,
|
46
|
-
"gold-600": $gold-600,
|
47
|
-
"gold-700": $gold-700,
|
48
|
-
"gold-800": $gold-800,
|
49
|
-
"gold-900": $gold-900
|
50
|
-
);
|
51
|
-
|
52
|
-
$green-200: #D5E4C3;
|
53
|
-
$green: #3d6b00;
|
54
|
-
$green-700: #203800;
|
55
|
-
|
56
|
-
$red-200: #ECCCCC;
|
57
|
-
$red: #8e3333;
|
58
|
-
$red-700: #720000;
|
59
|
-
|
60
|
-
$primary: $blue-800;
|
61
|
-
$secondary: $gold-500;
|
62
|
-
$info: $secondary;
|
63
|
-
|
64
|
-
$dark: #4F4d47;
|
65
|
-
$light: $blue-150;
|
66
|
-
|
67
|
-
$dark-100: tint-color($dark, 80%);
|
68
|
-
$dark-200: tint-color($dark, 60%);
|
69
|
-
$dark-300: tint-color($dark, 40%);
|
70
|
-
$dark-400: tint-color($dark, 20%);
|
71
|
-
$dark-500: $dark;
|
72
|
-
$dark-600: shade-color($dark, 20%);
|
73
|
-
$dark-700: shade-color($dark, 40%);
|
74
|
-
$dark-800: shade-color($dark, 60%);
|
75
|
-
$dark-900: shade-color($dark, 80%);
|
76
|
-
|
77
|
-
// Customize Bootstrap
|
78
|
-
$font-family-sans-serif: var(--vipassana-font-family), 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
79
|
-
$headings-font-family: var(--vipassana-headings-font-family), 'FootLight', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
80
|
-
$headings-color: $blue;
|
81
|
-
$headings-font-weight: 600;
|
82
|
-
$headings-line-height: 1.5;
|
83
|
-
|
84
|
-
$border-radius: .25rem;
|
85
|
-
$border-color: $blue-200;
|
86
|
-
$body-bg: $gold-100;
|
87
|
-
|
88
|
-
$spacer: 1rem;
|
89
|
-
$spacer-x: 1.5rem;
|
90
|
-
|
91
|
-
$input-bg: white;
|
92
|
-
$input-btn-padding-x: 1rem;
|
93
|
-
$input-btn-padding-x-sm: .75rem;
|
94
|
-
$input-border-color: $border-color;
|
95
|
-
|
96
|
-
$alert-border-width: 0;
|
97
|
-
|
98
|
-
$card-spacer-x: $spacer-x;
|
99
|
-
$card-cap-padding-x: $spacer-x;
|
100
|
-
$card-cap-padding-y: .75rem;
|
101
|
-
$card-border-width: 0;
|
102
|
-
|
103
|
-
$accordion-padding-x: $spacer-x;
|
104
|
-
|
105
|
-
$list-group-item-padding-x: $spacer-x;
|
106
|
-
|
107
|
-
$badge-font-weight: 400;
|
108
|
-
|
109
|
-
$offcanvas-horizontal-width: auto;
|
110
|
-
$offcanvas-padding-x: 1.5rem;
|
111
|
-
$offcanvas-transition-duration: .25s;
|
112
|
-
|
113
|
-
$modal-inner-padding: $spacer-x;
|
114
|
-
$modal-content-border-radius: $border-radius;
|
115
|
-
$modal-content-border-width: 0;
|
116
|
-
$modal-header-border-width: 0;
|
117
|
-
$modal-header-padding: 1rem $modal-inner-padding 0 $modal-inner-padding;
|
118
|
-
$modal-fade-transform: translate(0, 0) scale(.8);
|
119
|
-
$modal-transition: transform .15s ease-out;
|
120
|
-
|
121
|
-
$enable-negative-margins: true;
|