vipassana-design-standards 0.0.6 → 0.0.7

package/app/assets/javascripts/index.js

@@ -315,7 +315,7 @@ export default {
       # This file has been generated by design-standards.dhamma.org wesbite
       # index.js#generateAllInlineSVG
 
-      SVGS = ${JSON.stringify(svgs)}
+      VIPASSANA_SVGS = ${JSON.stringify(svgs)}
       `
       var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
       fileSaver.saveAs(blob, "logos_inline_svg.rb")

package/app/assets/stylesheets/index.css

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

package/app/assets/stylesheets/logo.css

@@ -3,25 +3,26 @@
   align-items: center;
   transform: scale(1);
   transform-origin: left;
+  text-align: 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-title-font-size: 1.8em;
+  --vipassana-logo-tagline-font-size: 1.1em;
 }
 .vipassana-logo[data-disposition="left-two-lines"][data-tagline="true"] {
-  --vipassana-logo-title-line-height: 1.05;
+  --vipassana-logo-title-line-height: 1.1;
   --vipassana-logo-tagline-line-height: 1.25;
+  --vipassana-logo-title-font-size: 1.7em;
+  --vipassana-logo-tagline-font-size: 1em;
 }
 .vipassana-logo[data-disposition="left-two-lines"][data-tagline="false"] {
   --vipassana-logo-title-line-height: 1.15;
+  --vipassana-logo-title-font-size: 1.9em;
 }
 .vipassana-logo[data-reverse="true"] {
   --vipassana-logo-tagline-line-height: 1.8;
@@ -30,6 +31,9 @@
   --vipassana-logo-title-color: white;
   --vipassana-logo-tagline-color: #ffffff90;
 }
+.vipassana-logo[data-disposition="auto"] {
+  max-width: 48em; /* the title will wrap if it's too long */
+}
 .vipassana-logo[data-disposition="centered"] {
   flex-direction: column;
   text-align: center;
@@ -67,7 +71,7 @@
   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-size: var(--vipassana-logo-title-font-size);
   font-weight: normal;
   margin: 0;
   padding: 0;
@@ -115,7 +119,7 @@
   color: var(--vipassana-logo-tagline-color);
   font-family: var(--vipassana-font-family);
   font-weight: 300;
-  font-size: 1em;
+  font-size: var(--vipassana-logo-tagline-font-size);
   line-height: var(--vipassana-logo-tagline-line-height);
 }
 .vipassana-logo[data-tagline="false"] .logo-subtitle {

package/lib/vipassana/logo_helper.rb

@@ -1,12 +1,12 @@
 module Vipassana
   module LogoHelper
     require "vipassana/logos_inline_svg.rb"
-    require "vipassana/tranlsations.rb"
+    require "vipassana/translations.rb"
 
     def vipassana_logo_svg(locale: I18n.locale, disposition: "normal", height: nil, width: nil)
       height = 70 if height.nil? && width.nil?
 
-      data = SVGS[locale.to_sym] || SVGS[:en]
+      data = VIPASSANA_SVGS[locale.to_sym] || SVGS[:en]
       string = data[disposition.to_sym] || data[:normal]
 
       string.gsub!("<svg", "<svg height=\"#{height}\"") if height.present?
@@ -16,7 +16,7 @@ module Vipassana
     end
 
     def vipassana_logo_html(locale: I18n.locale, disposition: "auto", size: '18', tagline: true, dark: false)
-      trans = TRANSATIONS[locale.to_sym]
+      trans = VIPASSANA_TRANSLATIONS[locale.to_sym]
       result = <<-HTML
         <div class="vipassana-logo"
             data-disposition="#{disposition}"
@@ -24,7 +24,7 @@ module Vipassana
             data-dark-mode="#{dark}"
             data-reverse="#{trans[:reverse]}"
             style="font-size: #{size}px">
-          <img class="logo-wheel" :src="wheelPath"/>
+          <img class="logo-wheel" src="https://design-standards.dhamma.org/dist/Dhamma-Wheel.svg" />
           <div class="logo-text">
             <h1 class="logo-title">
               <span data-start-with="#{trans[:vipassana_meditation].at(0).downcase}">