From 3f85a2ca5767ddc9798e31782bfdbaa1c1b4ee07 Mon Sep 17 00:00:00 2001 From: Muchis Date: Fri, 3 May 2024 15:18:44 -0500 Subject: [PATCH 1/5] feat: expand css lib --- frontend/css/lib/buttons.css | 18 ++++++-- frontend/css/lib/typography.css | 74 ++++++++++++++++++++++++++++----- frontend/css/lib/variables.css | 20 +++++---- 3 files changed, 90 insertions(+), 22 deletions(-) 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; } From 4ae560ef16bf47bad4d2bf8eeff987f261edddc4 Mon Sep 17 00:00:00 2001 From: Muchis Date: Fri, 3 May 2024 15:19:07 -0500 Subject: [PATCH 2/5] feat: open-sans semi-bold --- layout/theme.liquid | 102 ++++++++++++++++++++++++-------------------- 1 file changed, 56 insertions(+), 46 deletions(-) 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 @@ - + - - - - - - - {% comment %} {% endcomment %} - {% comment %} {% endcomment %} - {% comment %} {% endcomment %} - {% comment %} {% endcomment %} - {% comment %} {% endcomment %} - {% comment %} {% endcomment %} - - - - {% include 'social-meta' %} - - {{ content_for_header }} - - - - {%- render 'vite-client' -%} - {%- render 'vite-tag' with 'main.css' -%} - {%- render 'vite-tag' with 'main.js' -%} - - - - - {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %} - - - - {% include 'header' %} - -
- {{ content_for_layout }} -
- - {% include 'footer' %} - - {% include 'icon-paths' %} - + + + + + + + {% comment %} {% endcomment %} + {% comment %} {% endcomment %} + {% comment %} {% endcomment %} + {% comment %} {% endcomment %} + {% comment %} {% endcomment %} + {% comment %} {% endcomment %} + + + + {% include 'social-meta' %} + + {{ content_for_header }} + + + + {%- render 'vite-client' -%} + {%- render 'vite-tag' with 'main.css' -%} + {%- render 'vite-tag' with 'main.js' -%} + + + + + {{ page_title }} + {% if current_tags -%} + {%- assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags -}} + {%- endif %} + {% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %} + {% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %} + + + + {% include 'header' %} + +
+ {{ content_for_layout }} +
+ + {% include 'footer' %} + + {% include 'icon-paths' %} + From 3eda9849f76708a5e1a7d792f2045c1c2b158c34 Mon Sep 17 00:00:00 2001 From: Muchis Date: Fri, 3 May 2024 15:24:27 -0500 Subject: [PATCH 3/5] feat: hero section --- modules/hero/hero.css | 94 ++++++++++++++++++++++++++++++++++++++++++- sections/hero.liquid | 81 +++++++++++++++++++++++++++++-------- snippets/hero.liquid | 68 +++++++++++++++++++++++++++++++ 3 files changed, 225 insertions(+), 18 deletions(-) diff --git a/modules/hero/hero.css b/modules/hero/hero.css index 8a5bd4b..f608642 100644 --- a/modules/hero/hero.css +++ b/modules/hero/hero.css @@ -1 +1,93 @@ -.hero {} +/* This should actually be a global reset but to respect the current work will put it here, I would usually put it globally */ +.hero-container img { + display: block; + height: 100%; + width: 100%; + max-width: 100%; + max-height: 100%; +} + +.hero-container { + /* Isolates the children stack-context to only this parent */ + isolation: isolate; +} + +.hero { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 24px; + + max-width: 1280px; + padding: 56px 26px; + margin-inline: auto; + text-align: center; + + @media (--m) { + flex-direction: row; + align-items: start; + gap: 8px; + + padding: 76px 20px; + text-align: left; + } +} + +.hero_copy, +.hero_fg-img { + @media (--m) { + flex-basis: 50%; + } +} + +.hero_copy { + @media (--m) { + padding-top: 68px; + padding-left: 20px; + } + + @media (--l) { + padding-top: 80px; + padding-left: 60px; + } +} + +.hero_copy .main-title { + font-size: 40px; + + @media (--m) { + font-size: 60px; + } +} + +.hero_text p { + max-width: 600px; + margin: 0; + font-size: 15px; +} + +.hero_fg-img { + height: 400px; + + @media (--m) { + height: 100%; + } +} + +.hero_fg-img img { + object-fit: contain; +} + +.hero_bg-img { + z-index: -1; +} +.hero_bg-img img { + object-fit: cover; +} +/* Here's where the bg-gradient exists */ +.hero_bg-img::after { + content: ""; + position: absolute; + inset: 0; +} diff --git a/sections/hero.liquid b/sections/hero.liquid index ecad781..653d648 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -1,20 +1,67 @@ -{% include 'hero' %} +{% comment %} Replacing {Include} with {Render} as {Include} is deprecated {% endcomment %} +{% comment %} https://shopify.dev/docs/api/liquid/tags/include {% endcomment %} +{% render 'hero', section: section %} {% schema %} - { - "name": "Hero", - "settings": [ - { - "type": "text", - "id": "title", - "label": "Title" - }, - { - "type": "richtext", - "id": "text", - "label": "Text", - "default": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" - } - ] - } +{ + "name": "Hero", + "settings": [ + { + "type": "header", + "content": "Background" + }, + { + "type": "image_picker", + "id": "background_image", + "label": "Background Image" + }, + { + "type": "color_background", + "id": "background_color", + "label": "background_color", + "default": "linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%)", + "info": "Set a background gradient color to overlay the image or use a solid color if no image is set." + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "title", + "label": "Title" + }, + { + "type": "richtext", + "id": "text", + "label": "Text", + "default": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" + }, + { + "type": "color", + "id": "text_color", + "label": "Text color", + "default": "#FFFFFF" + }, + { + "type": "image_picker", + "id": "foreground_image", + "label": "Foreground Image" + }, + { + "type": "header", + "content": "Layout" + }, + { + "type": "range", + "id": "desktop_height", + "label": "Desktop Height", + "min": 300, + "max": 940, + "step": 8, + "unit": "px", + "default": 308 + } + ] +} {% endschema %} diff --git a/snippets/hero.liquid b/snippets/hero.liquid index e69de29..f539882 100644 --- a/snippets/hero.liquid +++ b/snippets/hero.liquid @@ -0,0 +1,68 @@ +{% comment %} + Renders the hero section. + + Accepts: + - section: {Object} section object. + + Usage: + {% render 'hero', section: section %} +{% endcomment %} + +{% liquid + assign background_image = section.settings.background_image + assign title = section.settings.title + assign text = section.settings.text + assign foreground_image = section.settings.foreground_image + assign desktop_height = section.settings.desktop_height + assign text_color = section.settings.text_color + assign background_color = section.settings.background_color +%} + +
+
+
+ {% 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 %} +
+ + From 3bad8a0ee6f81f02ad3c687b07f7a09211cd4cc0 Mon Sep 17 00:00:00 2001 From: Muchis Date: Fri, 3 May 2024 15:27:11 -0500 Subject: [PATCH 4/5] feat: featured-post section --- modules/featured-post/featured-post.css | 75 ++++++++++++++++++- .../featured-post.section.liquid | 1 + sections/featured-post.liquid | 64 ++++++++++++++++ snippets/featured-post.liquid | 72 ++++++++++++++++++ 4 files changed, 211 insertions(+), 1 deletion(-) create mode 120000 modules/featured-post/featured-post.section.liquid create mode 100644 sections/featured-post.liquid diff --git a/modules/featured-post/featured-post.css b/modules/featured-post/featured-post.css index 9505e2e..e6939ae 100644 --- a/modules/featured-post/featured-post.css +++ b/modules/featured-post/featured-post.css @@ -1 +1,74 @@ -.featured-post {} +/* This should actually be a global reset but to respect the current work will put it here, I would usually put it globally */ +.featured-post-container img { + display: block; + height: 100%; + width: 100%; + max-width: 100%; + max-height: 100%; +} + +.featured-post-container { + --offset: -25%; + transform: translateY(var(--offset)); + + @media (--m) { + --offset: -50%; + } +} +.featured-post-container::after { + content: ""; + position: absolute; + box-sizing: border-box; /* I would add this to a global reset */ + inset: 0; + top: calc(var(--offset) * -1); + width: 100%; + height: calc(100% + var(--offset)); + z-index: -1; +} + +.featured-post { + align-items: stretch; + margin-inline: auto; + max-width: 1280px; + padding: 30px; + + @media (--m) { + flex-direction: row; + padding: 40px; + } + + @media (--l) { + padding-bottom: 65px; + } +} + +.featured-post_img { + height: 300px; + + @media (--m) { + aspect-ratio: 1 / 1; + flex-basis: 50%; + width: 100%; + height: auto; + max-height: 600px; + } +} +.featured-post_img img { + object-fit: cover; +} + +.featured-post_info { + flex-basis: 50%; + gap: 4px; +} + +.featured-post_info--content { + margin-inline: auto; + height: 100%; + max-width: 500px; +} + +.featured-post_info .date { + letter-spacing: 0.05rem; + margin-block: 0.5em; +} diff --git a/modules/featured-post/featured-post.section.liquid b/modules/featured-post/featured-post.section.liquid new file mode 120000 index 0000000..a2807fa --- /dev/null +++ b/modules/featured-post/featured-post.section.liquid @@ -0,0 +1 @@ +../../sections/featured-post.liquid \ No newline at end of file diff --git a/sections/featured-post.liquid b/sections/featured-post.liquid new file mode 100644 index 0000000..b02aa80 --- /dev/null +++ b/sections/featured-post.liquid @@ -0,0 +1,64 @@ +{% render 'featured-post', section: section %} + +{% schema %} +{ + "name": "Featured Post", + "settings": [ + { + "type": "header", + "content": "Content", + "info": "Select which content to display in this section." + }, + { + "type": "select", + "id": "content_type", + "label": "Content type", + "default": "recent_blog_post", + "options": [ + { + "value": "blog_post", + "label": "Specific blog post" + }, + { + "value": "recent_blog_post", + "label": "Recent post from a blog" + } + ] + }, + { + "type": "article", + "id": "blog_post", + "label": "Blog Post" + }, + { + "type": "blog", + "id": "blog", + "label": "Blog" + }, + { + "type": "color", + "id": "background_color", + "label": "Background Color", + "default": "#b1a485" + }, + { + "type": "header", + "content": "Layout" + }, + { + "type": "number", + "id": "adjust_bottom_spacing", + "label": "Adjust bottom spacing", + "default": -100, + "placeholder": "Regain spacing by adjusting the value in pixels" + }, + { + "type": "number", + "id": "adjust_bottom_spacing_mobile", + "label": "Adjust bottom spacing mobile", + "default": -100, + "placeholder": "Regain mobile spacing by adjusting the value in pixels" + } + ] +} +{% endschema %} diff --git a/snippets/featured-post.liquid b/snippets/featured-post.liquid index e69de29..844542e 100644 --- a/snippets/featured-post.liquid +++ b/snippets/featured-post.liquid @@ -0,0 +1,72 @@ +{% comment %} + Renders the featured post section. + + Accepts: + - section: {Object} section object. + + Usage: + {% render 'featured-post', section: section %} +{% endcomment %} + +{% liquid + assign specific_blog_post = section.settings.blog_post + assign blog = section.settings.blog + + assign content_type = section.settings.content_type + if content_type == 'blog_post' + assign blog_post = specific_blog_post + else + assign blog_post = blog.articles[0] | default: blogs.news.articles[0] + endif + + assign background_color = section.settings.background_color + assign adjust_bottom_spacing_mobile = section.settings.adjust_bottom_spacing_mobile + assign adjust_bottom_spacing = section.settings.adjust_bottom_spacing +%} + +{% if blog_post %} +
+
+
+ {% # This will automatically create a srcet and render an tag %} + {{ blog_post.image | image_url: width: 768 | image_tag: loading: 'lazy ' }} +
+ +
+
+ {% render 'post-icon', article: blog_post %} + {{ blog_post.created_at | date: '%B %d' | upcase }} + +

{{ blog_post.title }}

+ +

+ {{ blog_post.content | strip_html | truncate: 172 }} +

+ + {% render 'read-more', article: blog_post %} +
+
+
+
+{% else %} + {% # This will only show to the merchant when setting up the app, not in the storefront %} + {% if request.design_mode %} +

Select a blog post or a blog

+ {% endif %} +{% endif %} + + From 45fa10abdc59ef72f233edd4a40322600edfbbff Mon Sep 17 00:00:00 2001 From: Muchis Date: Fri, 3 May 2024 15:31:39 -0500 Subject: [PATCH 5/5] feat: setup incoming features --- config/settings_data.json | 20 ++++++++++++++++++-- snippets/vite-tag.liquid | 27 +++++++++++++++++++++++---- templates/index.liquid | 4 +--- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/config/settings_data.json b/config/settings_data.json index e5e185b..cf943ed 100755 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -36,8 +36,24 @@ "hero": { "type": "hero", "settings": { - "title": "", - "text": "

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/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' %}