barrel · muchisx · May 3, 2024 · May 3, 2024 · May 3, 2024 · May 3, 2024
diff --git a/config/settings_data.json b/config/settings_data.json
@@ -36,8 +36,24 @@
       "hero": {
         "type": "hero",
         "settings": {
-          "title": "",
-          "text": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.<\/p>"
+          "background_image": "shopify:\/\/shop_images\/www.knobcreek.com-1293609732325191.jpg",
+          "background_color": "linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%)",
+          "title": "Maple Never<br>Tasted So Good",
+          "text": "<p>We blend this bourbon with natural smoked maple flavors fora unique, smoky sweetness. Full bodied, inviting maple notesthat lift to smoke and are complemented with rich vanillacaramel. Smoked hickory and maple wood, with hints ofearthy grains.<\/p>",
+          "text_color": "#f3f1ed",
+          "foreground_image": "shopify:\/\/shop_images\/www.knobcreek.com-1310894113736742_cr.png",
+          "desktop_height": 940
+        }
+      },
+      "featured-post": {
+        "type": "featured-post",
+        "settings": {
+          "content_type": "recent_blog_post",
+          "blog_post": "news\/too-much-flavor-for-four-walls-to-hold",
+          "blog": "news",
+          "background_color": "#b1a485",
+          "adjust_bottom_spacing": -285,
+          "adjust_bottom_spacing_mobile": -150
         }
       }
     },

diff --git a/frontend/css/lib/buttons.css b/frontend/css/lib/buttons.css
@@ -4,12 +4,25 @@ button {
   padding: 0;
   background-color: transparent;
   color: inherit;
-  font-size: inherit;
   -webkit-appearance: none;
+
+  /* Following the Design Guide */
+  /* I would use --s and --ml instead of --ml and --xl but doing like this to follow the current work */
+  /* 👆🏼 Because it aligns the Design Guide with more fidelity */
+  font-size: 11px;
+  font-weight: var(--f-weight-semi-bold);
+
+  @media (--ml) {
+    font-size: 13px;
+  }
+
+  @media (--xl) {
+    font-size: 14px;
+  }
 }
 button[disabled],
 input[disabled] {
-  cursor: default
+  cursor: default;
 }
 
 /**
@@ -36,4 +49,3 @@ input.button[type="submit"] {
 .pointer {
   cursor: pointer;
 }
-
diff --git a/frontend/css/lib/typography.css b/frontend/css/lib/typography.css
@@ -1,14 +1,13 @@
-
 /**
  * This is the definitive place for
  * the site's typographic styles.
  *
  * i.e h1, h2, h3, p, li, a, etc
  */
 body {
-	color: var(--black);
-  font-family: 'Open Sans', sans-serif;
-	font-size: 14px;
+  color: var(--black);
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
   line-height: 1.7;
   font-weight: var(--f-weight-normal);
   padding-top: calc(var(--h-height) + var(--h-promobar-height));
@@ -22,14 +21,64 @@ body {
     font-size: 16px;
   }
 }
+
+/* Following the Design Guide */
+/* I would use --s and --ml instead of --ml and --xl but doing like this to follow the current work */
+/* 👆🏼 Because it aligns the Design Guide with more fidelity */
+.main-title {
+  font-size: 35px;
+
+  @media (--ml) {
+    font-size: 60px;
+  }
+
+  @media (--xl) {
+    font-size: 70px;
+  }
+}
+.main-heading {
+  font-size: 19px;
+
+  @media (--ml) {
+    font-size: 35px;
+  }
+}
+.sub-heading {
+  font-size: 18px;
+
+  @media (--ml) {
+    font-size: 21px;
+  }
+
+  @media (--xl) {
+    font-size: 28px;
+  }
+}
+.sub-heading--small {
+  font-size: 17px;
+
+  @media (--ml) {
+    font-size: 18px;
+  }
+
+  @media (--xl) {
+    font-size: 24px;
+  }
+}
+
 a {
   text-decoration: none;
 }
 p {
   margin-top: 0;
   margin-bottom: 15px;
 }
-.h1, .h2, .h3, .h4, .h5, .h6 {
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   font-weight: var(--f-weight-normal);
   line-height: 1.1;
   margin-top: 0;
@@ -53,7 +102,7 @@ p {
 .blockquote {
   margin: 3rem 0;
   padding-left: 2rem;
-  border-left: 4px solid #148ECC;
+  border-left: 4px solid #148ecc;
 }
 .hr {
   display: block;
@@ -102,11 +151,14 @@ h2 {
 h3 {
   @extend .h3;
 }
-h4, h5, h6 {
+h4,
+h5,
+h6 {
   @extend .h4;
 }
 
-ol, ul {
+ol,
+ul {
   @extend .list;
 }
 
@@ -122,10 +174,12 @@ a {
   @extend .link;
 }
 
-i, em {
+i,
+em {
   @extend .italic;
 }
 
-b, strong {
+b,
+strong {
   @extend .bold;
 }
diff --git a/frontend/css/lib/variables.css b/frontend/css/lib/variables.css
@@ -19,15 +19,15 @@
   --black: #000000;
   --white: #ffffff;
   --charcoal: #343538;
-  --grey1: #8D8D8D;
+  --grey1: #8d8d8d;
   --grey2: #e3e3e3;
-  --grey3: #CDCDCD;
-  --grey4: #F5F5F5;
-  --red: #CA0526;
-  --mongoose: #B5A484;
-  --pampas: #F3F1ED;
-  --wellRead: #BD3131;
-  --codGray: #1E1E1E;
+  --grey3: #cdcdcd;
+  --grey4: #f5f5f5;
+  --red: #ca0526;
+  --mongoose: #b5a484;
+  --pampas: #f3f1ed;
+  --wellRead: #bd3131;
+  --codGray: #1e1e1e;
 
   /* Borders */
   --border: 1px solid var(--black);
@@ -51,7 +51,8 @@
   /* Grids */
   --gutter: 20px;
   --gutter-sm: 10px;
-  --gutter-lg: 20px;-ease-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --gutter-lg: 20px;
+  -ease-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 
   /* Header */
   --h-height: 73px;
@@ -63,6 +64,7 @@
 
   /* Typography */
   --f-weight-normal: 400;
+  --f-weight-semi-bold: 500;
   --f-weight-bold: 600;
   --f-small: 13px;
 }

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -1,48 +1,58 @@
-<!DOCTYPE html>
+<!doctype html>
 <html class="no-js">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <link rel="canonical" href="{{ canonical_url }}">
-  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-
-  {% comment %} <link rel="apple-touch-icon" sizes="180x180" href="{{'apple-touch-icon.png' | asset_url }}"> {% endcomment %}
-  {% comment %} <link rel="icon" type="image/png" href="{{'favicon-32x32.png' | asset_url }}" sizes="32x32"> {% endcomment %}
-  {% comment %} <link rel="icon" type="image/png" href="{{'favicon-16x16.png' | asset_url }}" sizes="16x16"> {% endcomment %}
-  {% comment %} <link rel="manifest" href="{{'manifest.json' | asset_url }}"> {% endcomment %}
-  {% comment %} <link rel="mask-icon" href="{{'safari-pinned-tab.svg' | asset_url }}" color="#5bbad5"> {% endcomment %}
-  {% comment %} <meta name="theme-color" content="#ffffff"> {% endcomment %}
-
-  <script type="text/javascript">var SHOPIFY_CDN = "{{ 'test.jpg' | asset_url }}".replace(/test.jpg\?\d*/,'')</script>
-
-  {% include 'social-meta' %}
-
-  {{ content_for_header }}
-
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
-
-  {%- render 'vite-client' -%}
-  {%- render 'vite-tag' with 'main.css' -%}
-  {%- render 'vite-tag' with 'main.js' -%}
-
-
-  <script>
-    /** Used in the account pages! */
-    window.barrel = window.barrel || {}
-  </script>
-
-  <title> {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %} </title>
-</head>
-<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}" >
-
-  {% include 'header' %}
-
-  <main id="page" class="relative z0" role="main">
-    {{ content_for_layout }}
-  </main>
-
-  {% include 'footer' %}
-
-  {% include 'icon-paths' %}
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="canonical" href="{{ canonical_url }}">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+
+    {% comment %} <link rel="apple-touch-icon" sizes="180x180" href="{{'apple-touch-icon.png' | asset_url }}"> {% endcomment %}
+    {% comment %} <link rel="icon" type="image/png" href="{{'favicon-32x32.png' | asset_url }}" sizes="32x32"> {% endcomment %}
+    {% comment %} <link rel="icon" type="image/png" href="{{'favicon-16x16.png' | asset_url }}" sizes="16x16"> {% endcomment %}
+    {% comment %} <link rel="manifest" href="{{'manifest.json' | asset_url }}"> {% endcomment %}
+    {% comment %} <link rel="mask-icon" href="{{'safari-pinned-tab.svg' | asset_url }}" color="#5bbad5"> {% endcomment %}
+    {% comment %} <meta name="theme-color" content="#ffffff"> {% endcomment %}
+
+    <script type="text/javascript">
+      var SHOPIFY_CDN = "{{ 'test.jpg' | asset_url }}".replace(/test.jpg\?\d*/, '');
+    </script>
+
+    {% include 'social-meta' %}
+
+    {{ content_for_header }}
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600" rel="stylesheet">
+
+    {%- render 'vite-client' -%}
+    {%- render 'vite-tag' with 'main.css' -%}
+    {%- render 'vite-tag' with 'main.js' -%}
+
+    <script>
+      /** Used in the account pages! */
+      window.barrel = window.barrel || {};
+    </script>
+
+    <title>
+      {{ page_title }}
+      {% if current_tags -%}
+        {%- assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
+      {%- endif %}
+      {% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}
+      {% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
+    </title>
+  </head>
+  <body
+    id="{{ page_title | handle }}"
+    class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"
+  >
+    {% include 'header' %}
+
+    <main id="page" class="relative z0" role="main">
+      {{ content_for_layout }}
+    </main>
+
+    {% include 'footer' %}
+
+    {% include 'icon-paths' %}
+  </body>
 </html>