General cleanup and organization

src/locales/de.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Ihre E-Mail-Adresse",
       "signup_form_submit": "Abschicken",
       "signup_form_success": "Wir senden Ihnen eine E-Mail, kurz bevor wir eröffnen!",
-      "admin_link_html": "Sind Sie der Geschäftsinhaber? <a href=\"/admin\" class=\"text-link\">Melden Sie sich hier an</a>",
+      "admin_link_html": "Sind Sie der Geschäftsinhaber? <a href=\"/admin\">Melden Sie sich hier an</a>",
       "password_link": "Mit Passwort betreten",
       "powered_by_shopify_html": "Dieser Shop wird mit Hilfe von {{ shopify }} betrieben werden"
     },

src/locales/en.default.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Your email",
       "signup_form_submit": "Submit",
       "signup_form_success": "We will send you an email right before we open!",
-      "admin_link_html": "Are you the store owner? <a href=\"/admin\" class=\"text-link\">Log in here</a>",
+      "admin_link_html": "Are you the store owner? <a href=\"/admin\">Log in here</a>",
       "password_link": "Enter using password",
       "powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
     },

src/locales/es.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Tu dirección de correo electrónico",
       "signup_form_submit": "Enviar",
       "signup_form_success": "¡Te enviaremos un correo electrónico antes de inaugurar!",
-      "admin_link_html": "¿Eres el dueño de la tienda? <a href=\"/admin\" class=\"text-link\">Regístrate aquí</a>",
+      "admin_link_html": "¿Eres el dueño de la tienda? <a href=\"/admin\">Regístrate aquí</a>",
       "password_link": "Entrar usando contraseña",
       "powered_by_shopify_html": "Esta tienda estará impulsada por {{ shopify }}"
     },

src/locales/fr.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Votre courriel",
       "signup_form_submit": "Soumettre",
       "signup_form_success": "Nous vous ferons parvenir un courriel juste avant l'ouverture!",
-      "admin_link_html": "Êtes-vous le propriétaire de la boutique? <a href=\"/admin\" class=\"text-link\">Connectez-vous ici</a>.",
+      "admin_link_html": "Êtes-vous le propriétaire de la boutique? <a href=\"/admin\">Connectez-vous ici</a>.",
       "password_link": "Entrer avec un mot de passe",
       "powered_by_shopify_html": "Cette boutique sera propulsée par {{ shopify }}"
     },

src/locales/pt-BR.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Seu e-mail",
       "signup_form_submit": "Enviar",
       "signup_form_success": "Nós lhe enviaremos um e-mail logo antes de abrirmos!",
-      "admin_link_html": "Você é o dono da loja? <a href=\"/admin\" class=\"text-link\">Faça login aqui</a>",
+      "admin_link_html": "Você é o dono da loja? <a href=\"/admin\">Faça login aqui</a>",
       "password_link": "Entre usando a senha",
       "powered_by_shopify_html": "Esta loja será patrocinada por {{ shopify }}"
     },

src/locales/pt-PT.json

@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "O seu email",
       "signup_form_submit": "Submeter",
       "signup_form_success": "Iremos enviar-lhe um email imediatamente antes de abrirmos!",
-      "admin_link_html": "É o dono da loja? <a href=\"/admin\" class=\"text-link\">Inicie sessão aqui</a>",
+      "admin_link_html": "É o dono da loja? <a href=\"/admin\">Inicie sessão aqui</a>",
       "password_link": "Entre usando a palavra-passe",
       "powered_by_shopify_html": "Esta loja será movida por {{ shopify }}"
     },

src/scripts/slate/rte.js

@@ -18,7 +18,7 @@ slate.rte = {
 
     $iframeVideo.each(function() {
       // Add wrapper to make video responsive
-      $(this).wrap('<div class="video-wrapper"></div>');
+      $(this).wrap('<div class="rte__video-wrapper"></div>');
     });
 
     $iframeReset.each(function() {

src/sections/header.liquid

@@ -18,7 +18,7 @@
         {% else %}
         <div class="h1" itemscope itemtype="http://schema.org/Organization">
           {% endif %}
-          <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-logo--has-image{% endif %}">
+          <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-header__logo-image{% endif %}">
             {% if section.settings.logo != blank %}
               {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
               <img src="{{ section.settings.logo | img_url: image_size }}"

src/styles/global/icons.scss

@@ -50,3 +50,9 @@ symbol {
   @include prefix('user-select', 'none', moz ms webkit spec);
   cursor: default;
 }
+
+/*================ Shopify icon on password page ================*/
+.icon-shopify-logo {
+  width: 1.5 * $font-size-base * 120 / 35;
+  height: 1.5 * $font-size-base;
+}

src/styles/global/links-buttons.scss

@@ -1,12 +1,4 @@
 /*================ Links & Buttons ================*/
-.text-link {
-  display: inline;
-  border: 0 none;
-  background: none;
-  padding: 0;
-  margin: 0;
-}
-
 .btn {
   @include prefix('user-select', 'none', moz ms webkit spec);
   @include prefix(appearance, none, webkit moz spec);

src/styles/global/rte.scss

@@ -13,6 +13,7 @@
     margin: 0 0 ($gutter / 2) $gutter;
   }
 
+  // Match the styles from RTE nested lists
   ul {
     list-style: disc outside;
 
@@ -43,3 +44,30 @@
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
+
+// This class is wrapped around YouTube/Vimeo embeds in the RTE
+// to make them responsive and prevent layout breaking
+.rte__video-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  height: auto;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// This class is wrapped around tables in the RTE
+// to prevent layout breaking with a scrollable parent
+.rte__table-wrapper {
+  max-width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}

src/styles/global/slate-reset.scss

@@ -18,6 +18,11 @@ a:focus {
   color: inherit;
 }
 
+img {
+  max-width: 100%;
+}
+
+/*================ Form element helpers ================*/
 form {
   margin: 0;
 }

src/styles/modules/site-header.scss

@@ -1,10 +1,6 @@
 /*================ Site Header ================*/
 .site-logo {
   display: block;
-}
-
-.site-logo--has-image {
-  max-width: $logo-max-width;
 
   img {
     display: block;

src/styles/settings/variables.scss → src/styles/settings/variables.scss.liquid

@@ -1,8 +1,8 @@
 /*================ Color Variables ================*/
-$color-primary: $settings-color-primary;
+$color-primary: {{ settings.color_primary }};
 
 // Text colors
-$color-body-text: $settings-color-body-text;
+$color-body-text: {{ settings.color_body_text }};
 
 // Backgrounds
 $color-body: #fff;
@@ -26,7 +26,7 @@ $font-stack-header: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-se
 $font-weight-header: $font-weight-bold;
 
 $font-stack-body: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-size-base: $settings-font-size-base; // Henseforth known as 1em
+$font-size-base: {{ settings.type_base_size }};
 
 /*============================================================================
   Grid Breakpoints and Class Names
@@ -63,15 +63,14 @@ $breakpoints: (
   Generate breakpoint-specific column widths and push classes
     - Default column widths: $breakpoint-has-widths: ($small, $medium-up);
     - Default is no push classes
-    - Will not work if `theme/grid.scss` is removed
+    - Will not work if `styles/global/grid.scss` is removed
 ==============================================================================*/
 $breakpoint-has-widths: ($small, $medium-up);
 $breakpoint-has-push: ();
 
 /*================ Sizing Variables ================*/
 $width-site: 1180px;
 $gutter: 30px;
-$logo-max-width: $settings-logo-max-width;
 
 /*================ Z-Index ================*/
 $z-index-dropdown: 2;

src/styles/theme.scss

@@ -7,8 +7,7 @@
 @import url('tools/mixins.scss');
 
 /*================ SETTINGS ================*/
-@import url('settings/theme-settings.scss.liquid');
-@import url('settings/variables.scss');
+@import url('settings/variables.scss.liquid');
 
 /*================ COMMON ================*/
 @import url('global/normalize.scss');
@@ -20,11 +19,9 @@
 @import url('global/rte.scss');
 @import url('global/responsive-tables.scss');
 @import url('global/links-buttons.scss');
-@import url('global/media.scss');
 @import url('global/forms.scss');
 @import url('global/blank-states.scss');
 
 /*================ MODULES ================*/
 @import url('modules/site-header.scss');
-@import url('modules/password-template.scss');
 @import url('modules/gift-card-template.scss');

src/templates/customers/addresses.liquid

@@ -112,7 +112,7 @@
     </label>
 
     <input type="submit" class="btn" value="{{ 'customer.addresses.add' | t }}">
-    <button type="button" class="text-link address-new-toggle">
+    <button type="button" class="address-new-toggle">
       {{ 'customer.addresses.cancel' | t }}
     </button>