Adjustable width sections

.github/workflows/ci.yml

@@ -1,25 +1,27 @@
 name: CI
 on: [push]
 jobs:
-  tailwindcss-update:
-    name: Generate Tailwind CSS
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Generate Tailwind CSS
-        uses: ZoeyVid/tailwindcss-update@main
-        with:
-          input: assets/app-tailwind.css
-          output: assets/app.css
-          params: ""
-      - name: Commit & Push
-        run: |
-          git add --force assets/app.css
-          git config user.name "GitHub"
-          git config user.email "noreply@github.com"
-          git diff-index --quiet HEAD || git commit -m "ci: tailwindcss-update"
-          git push
+  #################### REMEMBER TO ENABLE code in .husky/post-checkout when this job is enabled! ####################
+  #################### AND run `git update-index --skip-worktree assets/app.css` to prevent the file from being committed! ####################
+  # tailwindcss-update:
+  #   name: Generate Tailwind CSS
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+  #     - name: Generate Tailwind CSS
+  #       uses: ZoeyVid/tailwindcss-update@main
+  #       with:
+  #         input: assets/app-tailwind.css
+  #         output: assets/app.css
+  #         params: ""
+  #     - name: Commit & Push
+  #       run: |
+  #         git add --force assets/app.css
+  #         git config user.name "GitHub"
+  #         git config user.email "noreply@github.com"
+  #         git diff-index --quiet HEAD || git commit -m "ci: tailwindcss-update"
+  #         git push
   lhci:
     name: Lighthouse
     runs-on: ubuntu-latest

.husky/post-checkout

@@ -1,4 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-git update-index --skip-worktree assets/app.css
+# Commenting this out because I want to push updated app.css while the GH Workflow is disabled!
+# git update-index --skip-worktree assets/app.css

.shopify/metafields.json

@@ -0,0 +1,188 @@
+{
+  "article": [
+    {
+      "key": "563460112471",
+      "namespace": "app--3653839--recipekit",
+      "name": "recipe-563460112471",
+      "description": null,
+      "type": {
+        "name": "json",
+        "category": "JSON"
+      }
+    },
+    {
+      "key": "563460178007",
+      "namespace": "app--3653839--recipekit",
+      "name": "recipe-563460178007",
+      "description": null,
+      "type": {
+        "name": "json",
+        "category": "JSON"
+      }
+    },
+    {
+      "key": "562445385815",
+      "namespace": "app--3653839--recipekit",
+      "name": "recipe-562445385815",
+      "description": null,
+      "type": {
+        "name": "json",
+        "category": "JSON"
+      }
+    },
+    {
+      "key": "563477708887",
+      "namespace": "app--3653839--recipekit",
+      "name": "recipe-563477708887",
+      "description": null,
+      "type": {
+        "name": "json",
+        "category": "JSON"
+      }
+    },
+    {
+      "key": "563356336215",
+      "namespace": "app--3653839--recipekit",
+      "name": "recipe-563356336215",
+      "description": null,
+      "type": {
+        "name": "json",
+        "category": "JSON"
+      }
+    }
+  ],
+  "blog": [],
+  "brand": [],
+  "collection": [],
+  "company": [],
+  "company_location": [],
+  "location": [],
+  "market": [],
+  "order": [],
+  "page": [],
+  "product": [
+    {
+      "key": "custom_product",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Product",
+      "description": "Use to indicate whether or not the unique product identifiers (UPIs) GTIN, MPN, and brand are available for your product.",
+      "type": {
+        "name": "boolean",
+        "category": "TRUE_FALSE"
+      }
+    }
+  ],
+  "variant": [
+    {
+      "key": "custom_label_4",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Label 4",
+      "description": "Label that you assign to a product to help organize bidding and reporting in Shopping campaigns.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "custom_label_3",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Label 3",
+      "description": "Label that you assign to a product to help organize bidding and reporting in Shopping campaigns.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "custom_label_2",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Label 2",
+      "description": "Label that you assign to a product to help organize bidding and reporting in Shopping campaigns.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "custom_label_1",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Label 1",
+      "description": "Label that you assign to a product to help organize bidding and reporting in Shopping campaigns.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "custom_label_0",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Custom Label 0",
+      "description": "Label that you assign to a product to help organize bidding and reporting in Shopping campaigns.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "size_system",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Size System",
+      "description": "The country of the size system used by your product.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "size_type",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Size Type",
+      "description": "Your apparel product’s cut.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "mpn",
+      "namespace": "mm-google-shopping",
+      "name": "Google: MPN",
+      "description": "Your product’s Manufacturer Part Number (MPN).",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "gender",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Gender",
+      "description": "The gender for which your product is intended.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "condition",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Condition",
+      "description": "The condition of your product at time of sale.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    },
+    {
+      "key": "age_group",
+      "namespace": "mm-google-shopping",
+      "name": "Google: Age Group",
+      "description": "The demographic for which your product is intended.",
+      "type": {
+        "name": "single_line_text_field",
+        "category": "TEXT"
+      }
+    }
+  ],
+  "shop": []
+}

README.md

@@ -103,7 +103,7 @@ These secret values are used in the `ci.yml` GitHub workflow:
    `shopify theme pull -d`
 
 4. Anytime you add a Tailwind CSS class (remember to prefix it with twcss-), run the CLI tool to scan your template files for classes and build your CSS to assets/app.css:
-   `npx tailwindcss -i ./assets/app-tailwind.css -o ./assets/app.css --watch`
+   `npx @tailwindcss/cli -i ./assets/app-tailwind.css -o ./assets/app.css --watch`
 
 - Run this command in a separate terminal, so it will continue to run while you are developing.
 - Note that using a Tailwind CSS class without a space afterward when followed by a liquid tag causes compiling issues:
@@ -283,7 +283,7 @@ content: [
 ],
 ```
 
-If desired, run the Tailwind compile command to purge any unused styles (this step is optional as making a commit with changes to the tailwind config file will auto-generate a new `app.css` file after the commit is pushed, but this step will allow for a quick check on the proper purging of the classes): `npx tailwindcss -i ./assets/app-tailwind.css -o ./assets/app.css`
+If desired, run the Tailwind compile command to purge any unused styles (this step is optional as making a commit with changes to the tailwind config file will auto-generate a new `app.css` file after the commit is pushed, but this step will allow for a quick check on the proper purging of the classes): `npx @tailwindcss/cli -i ./assets/app-tailwind.css -o ./assets/app.css`
 
 #### Lock Down the Admin Fields
 

assets/app-tailwind.css

@@ -1,3 +1,58 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' prefix(twcss);
+
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 320px;
+  --breakpoint-md: 750px;
+  --breakpoint-lg: 990px;
+  --breakpoint-xlg: 1440px;
+  --breakpoint-x2lg: 1920px;
+  --breakpoint-page-max-width: 1440px;
+
+  --color-accent-light: 255, 85, 88;
+  --color-accent: 250, 91, 91;
+
+  --font-heading: var(--font-heading-family);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  :root {
+    --color-accent-light: 255, 85, 88;
+    --color-accent: 250, 91, 91;
+  }
+
+  .twcss\:max-w-content {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 0 2rem;
+  }
+
+  .twcss\:text-accent {
+    color: rgb(var(--color-accent));
+  }
+
+  .twcss\:shadow-clean {
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
+      rgba(61, 59, 53, 0.16) 0px 0px 0px 1px,
+      rgba(61, 59, 53, 0.08) 0px 3px 9px 0px,
+      rgba(61, 59, 53, 0.08) 0px 2px 5px 0px;
+  }
+}