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 Tasted So Good",
+ "text": "
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
index 6bed470..a2cec9d 100644
--- 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
index 20d527f..34ae9a5 100644
--- a/frontend/css/lib/typography.css
+++ b/frontend/css/lib/typography.css
@@ -1,4 +1,3 @@
-
/**
* This is the definitive place for
* the site's typographic styles.
@@ -6,9 +5,9 @@
* 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,6 +21,51 @@ 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;
}
@@ -29,7 +73,12 @@ 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
index af30687..70d3a4b 100644
--- 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
index ccf306b..4f3d8ff 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -1,48 +1,58 @@
-
+
-
+ {% if title != blank %}
+ {% comment %} h2 because I saw there's already an h1 set on the navbar {% endcomment %}
+
{{ title }}
+ {% endif %}
+
+ {% if text != blank %}
+
+ {{ text }}
+
+ {% endif %}
+
+
+ {% if foreground_image %}
+
+ {% comment %} This will automatically create a srcet and render an tag {% endcomment %}
+ {% comment %} Loading Lazy its optional, as it's a hero banner for the home loading lazy might not be ideal, we want this to be seen asap {% endcomment %}
+ {{ foreground_image | image_url: width: 1024 | image_tag: loading: 'eager' }}
+
+ {% endif %}
+
+
+ {% if background_image %}
+
+ {% comment %} This will automatically create a srcet and render an tag {% endcomment %}
+ {% comment %} Loading Lazy its optional, as it's a hero banner for the home loading lazy might not be ideal, we want this to be seen asap {% endcomment %}
+ {{ background_image | image_url: width: 2560 | image_tag: loading: 'eager' }}
+
+ {% endif %}
+
+
+
diff --git a/snippets/vite-tag.liquid b/snippets/vite-tag.liquid
index 9c4d79d..7d4fd14 100644
--- a/snippets/vite-tag.liquid
+++ b/snippets/vite-tag.liquid
@@ -3,8 +3,27 @@
Do not attempt to modify this file directly, as any changes will be overwritten by the next build.
{% endcomment %}
{% assign path = vite-tag | replace: 'react/', '../../preact-compat/' | replace: 'react-dom/', '../../preact-compat/' | replace: '~/', '../' | replace: '@/', '../' | replace: '@modules/', '../../modules/' | replace: '~modules/', '../../modules/' %}
-{% if path == "/frontend/entrypoints/main.css" or path == "main.css" %}
- {{ 'main.9581e0a5.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }}
-{% elsif path == "/frontend/entrypoints/main.js" or path == "main.js" %}
-
+{% liquid
+ assign path_prefix = path | slice: 0
+ if path_prefix == '/'
+ assign file_url_prefix = 'http://localhost:5173'
+ else
+ assign file_url_prefix = 'http://localhost:5173/frontend/entrypoints/'
+ endif
+ assign file_url = path | prepend: file_url_prefix
+ assign file_name = path | split: '/' | last
+ if file_name contains '.'
+ assign file_extension = file_name | split: '.' | last
+ endif
+ assign css_extensions = 'css|less|sass|scss|styl|stylus|pcss|postcss' | split: '|'
+ assign is_css = false
+ if css_extensions contains file_extension
+ assign is_css = true
+ endif
+%}
+
+{% if is_css == true %}
+ {{ file_url | stylesheet_tag }}
+{% else %}
+
{% endif %}
diff --git a/templates/index.liquid b/templates/index.liquid
index 9ebde5b..859f2cd 100755
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -2,8 +2,6 @@
{% section 'hero' %}
-{% for article in blogs['news'].articles limit: 1 %}
- {% include 'featured-post' %}
-{% endfor %}
+{% section 'featured-post' %}
{% include 'posts-list' %}