vipassana-design-standards 0.0.4 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc96aa2c95db4a4b6465fffba2d43a1b4ab6f0cdbe20e69a2ac61786b018433e
-  data.tar.gz: b9cfc9adb579e8f45c2dbdb468c103296a326fa95234b317ea8667cf9e89e38b
+  metadata.gz: 9ae88e192b757568c109e554815b2fef7446e8124653399ddbaf291f2519e30a
+  data.tar.gz: a46da6cb667d9c11b50e856165048371ba44984b8cb29ba9581db948eb6f9238
 SHA512:
-  metadata.gz: 46830664707c4b2cc4b3e11a072722a3f457ef08268e566f5131d4d7003bd1f8ded393b49c1074333d793bfa7624d2f7d8c015bf2dbdd4915668a4b8de5730a9
-  data.tar.gz: 3b32f8f4f9986bb871ffe402e9e2fa27dc038edd444e48e714742f454269110d2e705149f40aa498450c3cec6bbfe14fe16f2fac0143aa88a28470ee1f29f278
+  metadata.gz: 4d39d74b8e7c54f12177a7302c75f77b8b0091bcd6d8f9fc06add75f53aa073c1103424bfd00edbc4440e505f5a1ad8935b7fe54d1394a2311ad331f40566be8
+  data.tar.gz: 5e77dcc386052ea6df947c7a8fec6d11d71d4101eb0b1feaee7f2f16ae13346ccaaf30a79c97aadd09dc152b122958aec40691e6a4dce65bd7ade5252bfb5c0c

data/{assets → app/assets}/javascripts/index.js

@@ -95,8 +95,11 @@ export default {
     taglineFontFamily() {
       return this.getTaglineFontFamily(this.locale)
     },
+    reverse() {
+      return this.i18n[this.locale].reverse
+    },
     positions() {
-      if (this.i18n[this.locale].reverse) {
+      if (this.reverse) {
         return {
           'left-one-line': {
             firstTitleTop: 60,
@@ -257,7 +260,9 @@ export default {
     },
     downloadPNG() {
       const [filename, canvas] = this.getPNGData()
-      fileSaver.saveAs(canvas.toDataURL(), filename);
+      setTimeout(() => {
+        fileSaver.saveAs(canvas.toDataURL(), filename);
+      }, 100)
     },
     getPNGData() {
       // SVG -> canvas -> PNG

data/{assets/css → app/assets/stylesheets}/fonts.css

@@ -3,70 +3,70 @@
 */
 
 :root { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="en"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="bg"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="cs"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="de"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="el"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="es"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="fa"] { --vipassana-font-family: 'Noto Sans Arabic'; --vipassana-headings-font-family: 'Noto Sans Arabic'; }
-html[lang="fi"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="fr"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="gu"] { --vipassana-font-family: 'Noto Sans Gujarati'; --vipassana-headings-font-family: 'Noto Sans Gujarati'; }
-html[lang="he"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="hi"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="hu"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="id"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="it"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="ja"] { --vipassana-font-family: 'Noto Sans JP'; --vipassana-headings-font-family: 'Noto Sans JP'; }
-html[lang="km"] { --vipassana-font-family: 'Noto Sans Khmer'; --vipassana-headings-font-family: 'Noto Sans Khmer'; }
-html[lang="ko"] { --vipassana-font-family: 'Noto Sans KR'; --vipassana-headings-font-family: 'Noto Sans KR'; }
-html[lang="lt"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="lv"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="mk"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="mr"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="nl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="or"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="pl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="pt"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="ro"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="ru"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="si"] { --vipassana-font-family: 'Noto Sans Sinhala'; --vipassana-headings-font-family: 'Noto Sans Sinhala'; }
-html[lang="sl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="sr"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="sv"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="ta"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="te"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="th"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="tr"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="vi"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="zh-HANS"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="zh-HANT"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
-html[lang="zh-HANT-HK"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="en"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="bg"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="cs"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="de"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="el"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="es"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="fa"] { --vipassana-font-family: 'Noto Sans Arabic'; --vipassana-headings-font-family: 'Noto Sans Arabic'; }
+[lang="fi"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="fr"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="gu"] { --vipassana-font-family: 'Noto Sans Gujarati'; --vipassana-headings-font-family: 'Noto Sans Gujarati'; }
+[lang="he"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="hi"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="hu"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="id"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="it"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="ja"] { --vipassana-font-family: 'Noto Sans JP'; --vipassana-headings-font-family: 'Noto Sans JP'; }
+[lang="km"] { --vipassana-font-family: 'Noto Sans Khmer'; --vipassana-headings-font-family: 'Noto Sans Khmer'; }
+[lang="ko"] { --vipassana-font-family: 'Noto Sans KR'; --vipassana-headings-font-family: 'Noto Sans KR'; }
+[lang="lt"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="lv"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="mk"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="mr"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="nl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="or"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="pl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="pt"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="ro"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="ru"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="si"] { --vipassana-font-family: 'Noto Sans Sinhala'; --vipassana-headings-font-family: 'Noto Sans Sinhala'; }
+[lang="sl"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="sr"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="sv"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="ta"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="te"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="th"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="tr"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="vi"] { --vipassana-font-family: 'Noto Sans'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="zh-HANS"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="zh-HANT"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
+[lang="zh-HANT-HK"] { --vipassana-font-family: 'Lato'; --vipassana-headings-font-family: 'FootLight'; }
 
 /* Main fonts */
 
 @font-face {
   font-family: 'FootLight';
-  src: url('https://design-standards.dhamma.org/assets/fonts/FootlightMTProLight.woff');
+  src: url('../fonts/FootlightMTProLight.woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'Lato';
-  src: url('https://design-standards.dhamma.org/assets/fonts/Lato-Regular.woff');
+  src: url('../fonts/Lato-Regular.woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'Lato';
-  src: url('https://design-standards.dhamma.org/assets/fonts/Lato-Light.woff');
+  src: url('../fonts/Lato-Light.woff');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: 'Lato';
-  src: url('https://design-standards.dhamma.org/assets/fonts/Lato-Bold.woff');
+  src: url('../fonts/Lato-Bold.woff');
   font-weight: 800;
   font-style: normal;
 }

data/{assets/css → app/assets/stylesheets}/index.css

@@ -122,7 +122,7 @@ select, button {
   border-radius: 3px;
 }
 
-#logo-html, canvas {
+.vipassana-logo, canvas {
   /* out of screen */
   visibility: hidden;
   position: absolute;

data/app/assets/stylesheets/logo.css

@@ -0,0 +1,123 @@
+.vipassana-logo {
+  display: inline-flex;
+  align-items: center;
+  transform: scale(1);
+  transform-origin: left;
+
+  --vipassana-logo-title-color: #9C6B14;
+  --vipassana-logo-tagline-color: #4F4D47;
+
+  --vipassana-logo-title-line-height: 1.1;
+  --vipassana-logo-tagline-line-height: 1.4;
+}
+.vipassana-logo[data-disposition="auto"] {
+  max-width: 44em; /* the title will wrap if it's too long */
+}
+.vipassana-logo[data-disposition="left-two-lines"] {
+  --vipassana-logo-tagline-line-height: 1.25;
+}
+.vipassana-logo[data-disposition="left-two-lines"][data-tagline="true"] {
+  --vipassana-logo-title-line-height: 1.05;
+  --vipassana-logo-tagline-line-height: 1.25;
+}
+.vipassana-logo[data-disposition="left-two-lines"][data-tagline="false"] {
+  --vipassana-logo-title-line-height: 1.15;
+}
+.vipassana-logo[data-reverse="true"] {
+  --vipassana-logo-tagline-line-height: 1.8;
+}
+.vipassana-logo[data-dark-mode="true"] {
+  --vipassana-logo-title-color: white;
+  --vipassana-logo-tagline-color: #ffffff90;
+}
+.vipassana-logo[data-disposition="centered"] {
+  flex-direction: column;
+  text-align: center;
+}
+
+/* Wheel */
+.vipassana-logo .logo-wheel {
+  height: 5.5em;
+  max-width: 3.9em;
+  margin-right: 1em;
+}
+[dir="rtl"] .vipassana-logo .logo-wheel {
+  margin-left: 1em;
+  margin-right: 0;
+}
+.vipassana-logo[data-disposition="centered"] .logo-wheel {
+  margin: 0 !important;
+  margin-bottom: .6em !important;
+}
+.vipassana-logo[data-disposition="centered"][data-reverse="true"] .logo-wheel {
+  margin-bottom: .25em !important;
+}
+
+/* Text */
+.vipassana-logo .logo-text {
+  display: flex;
+  flex-direction: column;
+}
+.vipassana-logo[data-reverse="true"] .logo-text {
+  flex-direction: column-reverse;
+}
+
+/* Title */
+.vipassana-logo .logo-title {
+  color: var(--vipassana-logo-title-color);
+  font-family: var(--vipassana-headings-font-family);
+  line-height: var(--vipassana-logo-title-line-height);
+  font-size: 1.8em;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.vipassana-logo[data-reverse="true"] .logo-title {
+  flex-direction: row-reverse;
+}
+.vipassana-logo[data-disposition="left-two-lines"] .logo-title,
+.vipassana-logo[data-disposition="centered"] .logo-title {
+  flex-direction: column;
+}
+.vipassana-logo[data-disposition="left-two-lines"] .logo-space,
+.vipassana-logo[data-disposition="centered"] .logo-space {
+  display: none;
+}
+.vipassana-logo[data-disposition="left-two-lines"][data-reverse="true"] .logo-title,
+.vipassana-logo[data-disposition="centered"][data-reverse="true"] .logo-title {
+  flex-direction: column-reverse;
+}
+
+
+.vipassana-logo .logo-title span {
+  display: inline-flex;
+}
+.vipassana-logo:not([data-reverse="true"]) [data-start-with="v"] {
+  margin-left: -.17em;
+}
+[dir="rtl"] .vipassana-logo [data-start-with="v"] {
+  margin-left: 0 !important;
+}
+
+.vipassana-logo[data-disposition="left-two-lines"] .logo-title span {
+  width: 100%;
+}
+.vipassana-logo[data-disposition="centered"] .logo-title span {
+  width: 100%;
+  justify-content: center;
+}
+
+/* Tagline */
+.logo-subtitle {
+  color: var(--vipassana-logo-tagline-color);
+  font-family: var(--vipassana-font-family);
+  font-weight: 300;
+  font-size: 1em;
+  line-height: var(--vipassana-logo-tagline-line-height);
+}
+.vipassana-logo[data-tagline="false"] .logo-subtitle {
+  display: none;
+}