From e210c199ba0d0861f35f4db57ca4ee1a614316ae Mon Sep 17 00:00:00 2001 From: dpilafian Date: Tue, 9 Jul 2024 18:31:04 -0700 Subject: [PATCH] Add TOC to products page --- src/templates/table-of-products-toc.html | 14 + src/templates/table-of-products.html | 641 +++++++++++---------- src/website/css/layout.less | 71 ++- src/website/do-not-learn-metric/index.html | 4 +- src/website/index.html | 2 +- src/website/products/index.html | 19 +- 6 files changed, 396 insertions(+), 355 deletions(-) create mode 100644 src/templates/table-of-products-toc.html diff --git a/src/templates/table-of-products-toc.html b/src/templates/table-of-products-toc.html new file mode 100644 index 0000000..4be3605 --- /dev/null +++ b/src/templates/table-of-products-toc.html @@ -0,0 +1,14 @@ +
  • Tape Measures
    • +
  • Meter Sticks
    • +
  • Rulers
    • +
  • Adhesive Rulers
    • +
  • Calipers
    • +
  • Squares & Blocks
    • +
  • Architect Scales
    • +
  • Measuring Spoons & Cups
    • +
  • Scales
    • +
  • Thermometers
    • +
  • Kettles
    • +
  • Tool Sets
    • +
  • Office Supplies
    • +
  • Education & Games
    • diff --git a/src/templates/table-of-products.html b/src/templates/table-of-products.html index c773611..8ff2e84 100644 --- a/src/templates/table-of-products.html +++ b/src/templates/table-of-products.html @@ -1,333 +1,336 @@ - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ItemNoteImage
    Tape Measures
    🏆 Takamine Professional Tape Measure, 5.5mHigh Contrastpreview
    🏆 PICAGER Self-Lock Metric-Only Tape Measure, 5mHigh Contrastpreview
    Milwaukee Autolock Tape Measure, 5mProfessionalpreview
    Milwaukee Pro Compact Metric Tape Measure, 8mProfessionalpreview
    STANLEY FATMAX Classic Tape with Blade Armor, 8mSturdypreview
    STANLEY FATMAX Autolock Tape, 5mSturdypreview
    Komelon PG85 Metric Gripper Tape, 8mGood valuepreview
    OX Trade Series Metric Tape Nylon Coated, 3mCompact sizepreview
    Stanley Tylon Tape Measure, Black/Yellow, 3m / 5m / 8mCompact sizepreview
    🏆 Komelon Keymaster Pocket Mini Tape Measure, 2mPocket sizepreview
    PENCO Pocket Measure Red, 2mPocket sizepreview
    Utoolmart 2m Measuring TapePocket sizepreview
    Tape Measures
    🏆 Takamine Professional Tape Measure, 5.5mHigh Contrastpreview
    🏆 PICAGER Self-Lock Metric-Only Tape Measure, 5mHigh Contrastpreview
    Milwaukee Autolock Tape Measure, 5mProfessionalpreview
    Milwaukee Pro Compact Metric Tape Measure, 8mProfessionalpreview
    STANLEY FATMAX Classic Tape with Blade Armor, 8mSturdypreview
    STANLEY FATMAX Autolock Tape, 5mSturdypreview
    Komelon PG85 Metric Gripper Tape, 8mGood valuepreview
    OX Trade Series Metric Tape Nylon Coated, 3mCompact sizepreview
    Stanley Tylon Tape Measure, Black/Yellow, 3m / 5m / 8mCompact sizepreview
    🏆 Komelon Keymaster Pocket Mini Tape Measure, 2mPocket sizepreview
    PENCO Pocket Measure Red, 2mPocket sizepreview
    Utoolmart 2m Measuring TapePocket sizepreview
    Meter Sticks
    Shinwa 1,000 mm Rigid "Zero Glare" Metric Machinist Rule, 1mStainless steelpreview
    Double Sided Meter Stick, Hardwood, Protective Metal Ends, 1mWoodpreview
    Meter Sticks
    Shinwa 1,000 mm Rigid "Zero Glare" Metric Machinist Rule, 1mStainless steelpreview
    Double Sided Meter Stick, Hardwood, Protective Metal Ends, 1mWoodpreview
    Rulers
    🏆 Shinwa Sokutei Pickup Scale (Ruler), 10cm / 15cm / 30cm / 60cmStainless steelpreview
    Midori Aluminium Ruler Black, 15cmSmall, aluminiumpreview
    Midori Metric CL Ruler Clear, 15cmSmall, plasticpreview
    Wiha MaxiFlex Folding Ruler, Outside Reading, 2mFiberglass folding rulerpreview
    Rulers
    🏆 Shinwa Sokutei Pickup Scale (Ruler), 10cm / 15cm / 30cm / 60cmStainless steelpreview
    Midori Aluminium Ruler Black, 15cmSmall, aluminiumpreview
    Midori Metric CL Ruler Clear, 15cmSmall, plasticpreview
    Wiha MaxiFlex Folding Ruler, Outside Reading, 2mFiberglass folding rulerpreview
    Adhesive Rulers
    uxcell Adhesive Backed Tape Measure, 10cmPVC stickerpreview
    Steel Metric Self Adhesive String Ruler, 1mMetal stickerpreview
    Adhesive Rulers
    uxcell Adhesive Backed Tape Measure, 10cmPVC stickerpreview
    Steel Metric Self Adhesive String Ruler, 1mMetal stickerpreview
    Calipers
    Utoolmart Vernier Caliper 80mm Measuring Tool, Outside InsideCopperpreview
    Tyenaza Vernier Caliper, 0mm-150mm Range, 0.02mm AccuracyStainless Steelpreview
    Mitutoyo Digital Caliper, 0-150mm RangeSolar poweredpreview
    Calipers
    Utoolmart Vernier Caliper 80mm Measuring Tool, Outside InsideCopperpreview
    Tyenaza Vernier Caliper, 0mm-150mm Range, 0.02mm AccuracyStainless Steelpreview
    Mitutoyo Digital Caliper, 0-150mm RangeSolar poweredpreview
    Squares & Blocks
    🏆 Swanson NA202 Metric Speed Square Layout Tool, 25 cmAluminumpreview
    45/90 Degree Right Angle Line Gauge Carpenter Ruler and Center Finder, 9 cmAluminum Alloypreview
    45/90 Degree Centering Gauge Measuring Tool, Carpenter Ruler, 200×150 mmStainless Steelpreview
    Carpenter Square with 3D Multi-Angle Layout Measuring Ruler, Pin Pivot Design, 120×80 mmAluminum Alloypreview
    Square for Woodworking Miter Scriber T Ruler 45/90 Degree Angle Protractor Gauge, 16 cmAluminum Alloypreview
    90 Degree L Shaped Dual Angle Side Square Layout Tool, 150×300 mmStainless Steelpreview
    Shinwa Sokutei 12101 Curb Scale, Right Angle Ruler, Stainless Steel, 10×5 cmSmallpreview
    Height Gauge Set, 15-Piece Precision Metric Setup Blocks for Router and Table Saw, 25×50×75 mmAluminumpreview
    Squares & Blocks
    🏆 Swanson NA202 Metric Speed Square Layout Tool, 25 cmAluminumpreview
    45/90 Degree Right Angle Line Gauge Carpenter Ruler and Center Finder, 9 cmAluminum Alloypreview
    45/90 Degree Centering Gauge Measuring Tool, Carpenter Ruler, 200×150 mmStainless Steelpreview
    Carpenter Square with 3D Multi-Angle Layout Measuring Ruler, Pin Pivot Design, 120×80 mmAluminum Alloypreview
    Square for Woodworking Miter Scriber T Ruler 45/90 Degree Angle Protractor Gauge, 16 cmAluminum Alloypreview
    90 Degree L Shaped Dual Angle Side Square Layout Tool, 150×300 mmStainless Steelpreview
    Shinwa Sokutei 12101 Curb Scale, Right Angle Ruler, Stainless Steel, 10×5 cmSmallpreview
    Height Gauge Set, 15-Piece Precision Metric Setup Blocks for Router and Table Saw, 25×50×75 mmAluminumpreview
    Architect Scales
    Alumicolor Metric Architect Hollow Scale, 30cm, 20/25/50/75/100/125Aluminumpreview
    Alumicolor Aluminum Engineer Metric Pocket Scale, 15cm, 1/2/5/10/20/50Pocket sizepreview
    Architect Scales
    Alumicolor Metric Architect Hollow Scale, 30cm, 20/25/50/75/100/125Aluminumpreview
    Alumicolor Aluminum Engineer Metric Pocket Scale, 15cm, 1/2/5/10/20/50Pocket sizepreview
    Measuring Spoons & Cups
    Bezall 5 in 1 Colorful Plastic Measuring Spoons Set, Kitchen Cooking Baking ToolsPlasticpreview
    🏆 CHEFMADE Hello Kitty Glass Measuring Cup, Pour Spout, 350 mlGlasspreview
    Appletofu Funnel Pitcher, Easy Pour Plastic Measuring Cup with Long Spout, Microwave Safe, 1,000 mlPlasticpreview
    Multi-Function Food Grade Measuring Cup with Handle and Durable Bamboo Lid, 350 ml / 500 ml / 1,000 mlGlasspreview
    OBALY Jigger, Cocktail Metering Cups, 25/50 ml × 15/30 mlStainless Steelpreview
    Barfly Japanese Style Jigger, 25 ml × 50 mlStainless Steelpreview
    Measuring Spoons & Cups
    Bezall 5 in 1 Colorful Plastic Measuring Spoons Set, Kitchen Cooking Baking ToolsPlasticpreview
    🏆 CHEFMADE Hello Kitty Glass Measuring Cup, Pour Spout, 350 mlGlasspreview
    Appletofu Funnel Pitcher, Easy Pour Plastic Measuring Cup with Long Spout, Microwave Safe, 1,000 mlPlasticpreview
    Multi-Function Food Grade Measuring Cup with Handle and Durable Bamboo Lid, 350 ml / 500 ml / 1,000 mlGlasspreview
    OBALY Jigger, Cocktail Metering Cups, 25/50 ml × 15/30 mlStainless Steelpreview
    Barfly Japanese Style Jigger, 25 ml × 50 mlStainless Steelpreview
    Scales
    🏆 Tanita KF-200 Kitchen Scale, 2 kgDigitalpreview
    Tanita 1445 Kitchen Scale, 1 kg (5 g increments)Analogpreview
    Scales
    🏆 Tanita KF-200 Kitchen Scale, 2 kgDigitalpreview
    Tanita 1445 Kitchen Scale, 1 kg (5 g increments)Analogpreview
    Thermometers
    Indoor/Outdoor Mini Temperature Humidity MeterAnalogpreview
    Reotemp K82P-7 Large Dial Easy Read Pocket Thermometer, -10 to 110 °C, WaterproofPocketpreview
    Robinair Dial Thermometer, -40 to 70 °CPocketpreview
    Thermometers
    Indoor/Outdoor Mini Temperature Humidity MeterAnalogpreview
    Reotemp K82P-7 Large Dial Easy Read Pocket Thermometer, -10 to 110 °C, WaterproofPocketpreview
    Robinair Dial Thermometer, -40 to 70 °CPocketpreview
    Kettles
    Aigostar Electric Kettle Temperature Control 1.7L, LED Indicator Light ChangeAuto shut-offpreview
    NESSGRAIM Retro Electric Kettle, 1.7L Stainless Steel Tea Kettle with Large Temperature GaugeAnalogpreview
    Retro Electric Hot Water Kettle, 1,350w Quick Boil, Auto Shut-OffAnalogpreview
    Kettles
    Aigostar Electric Kettle Temperature Control 1.7L, LED Indicator Light ChangeAuto shut-offpreview
    Tool Sets
    Makita Metric Bit and Hand Tool SetCarrying casepreview
    NESSGRAIM Retro Electric Kettle, 1.7L Stainless Steel Tea Kettle with Large Temperature GaugeAnalogpreview
    Office Supplies
    A4 Size Premium Printer Paper by Double A, 100 SheetsWhitepreview
    Retro Electric Hot Water Kettle, 1,350w Quick Boil, Auto Shut-OffAnalogpreview
    Tool Sets
    Makita Metric Bit and Hand Tool SetCarrying casepreview
    Office Supplies
    A4 Size Premium Printer Paper by Double A, 100 SheetsWhitepreview
    Education & Games
    Learning Resources 1g Centimeter Cubes, Assorted Colors, Set of 500Plasticpreview
    + + + Education & Games + + + Learning Resources 1g Centimeter Cubes, Assorted Colors, Set of 500 + Plastic + preview + diff --git a/src/website/css/layout.less b/src/website/css/layout.less index 66c0655..d09a13d 100644 --- a/src/website/css/layout.less +++ b/src/website/css/layout.less @@ -2,6 +2,45 @@ // Style: Layout .SectionStyle() { + &#toc { + ol { + li { + margin-bottom: 2px; + } + } + } + >h2 { + >i.font-icon { + font-size: 1em; + padding-right: 0.4em; + } + >img { + height: 1.1em; + padding-right: 0.5em; + margin-bottom: -0.2em; + } + } + >p, >div { + text-align: left; + li { + font-size: 1em; + text-indent: 0px; + padding-left: 0em; + margin-bottom: 15px; + } + } + a { + white-space: normal; + } + >figure { + display: block; + } + >p + h3 { + margin-top: 50px; + } + >p:has(i[data-icon=circle-down]) { + text-align: center; + } table { thead tr th { font-size: 1rem; @@ -72,38 +111,6 @@ body { main { >section { .SectionStyle(); - >h2 { - >i.font-icon { - font-size: 1em; - padding-right: 0.4em; - } - >img { - height: 1.1em; - padding-right: 0.5em; - margin-bottom: -0.2em; - } - } - >p, >div { - text-align: left; - li { - font-size: 1em; - text-indent: 0px; - padding-left: 0em; - margin-bottom: 15px; - } - } - a { - white-space: normal; - } - >figure { - display: block; - } - >p + h3 { - margin-top: 50px; - } - >p:has(i[data-icon=circle-down]) { - text-align: center; - } } >section:last-child >figure:last-child { font-size: 1.6em; diff --git a/src/website/do-not-learn-metric/index.html b/src/website/do-not-learn-metric/index.html index 3e72b90..90af459 100644 --- a/src/website/do-not-learn-metric/index.html +++ b/src/website/do-not-learn-metric/index.html @@ -51,7 +51,9 @@

    Steps

    1. Settings — - Set your mobile device to metric.  + Set your + mobile device + to metric.  Set your refrigerator, home thermostat, and car temperature to Celsius.  Set the scales in your kitchen and bathroom to display grams and kilograms. 
      2. diff --git a/src/website/index.html b/src/website/index.html index a208318..89ef661 100644 --- a/src/website/index.html +++ b/src/website/index.html @@ -36,7 +36,7 @@

      Go metric to boost your efficiency

      - think-metric.org/products + https://think-metric.org/products

      diff --git a/src/website/products/index.html b/src/website/products/index.html index 54c406e..c56b6a8 100644 --- a/src/website/products/index.html +++ b/src/website/products/index.html @@ -21,10 +21,18 @@

      Go metric to boost your efficiency

      -
      +
      +

      Table of Contents

      +
      +
        + {% render 'src/templates/table-of-products-toc.html' %} +
      +

      Products listed below are (or at were at one time) available in the U.S. with "Free Shipping by Amazon".  + The links are NOT affiliate links — there are no commissions + earned. 

      @@ -34,7 +42,14 @@

      Buy Metric-Only

      🏆: Favorite product

      - {% render 'src/templates/table-of-products.html' %} + + + + + + {% render 'src/templates/table-of-products.html' %} + +
      ItemNoteImage

      The above links are NOT affiliate links — there are no commissions