From b74795aa7b1374fe0aa45fd1fb874bae27f01ba0 Mon Sep 17 00:00:00 2001
From: Rue Turner <rue@thinlayer.co.uk>
Date: Fri, 14 Feb 2020 17:09:17 +0000
Subject: [PATCH] utility-first css

More basscss compliant
---
 _includes/nutritional-information.html |  6 +++---
 css/main.scss                          | 20 +++-----------------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/_includes/nutritional-information.html b/_includes/nutritional-information.html
index 12d1288..6477cf7 100644
--- a/_includes/nutritional-information.html
+++ b/_includes/nutritional-information.html
@@ -4,7 +4,7 @@
 {% if page.nutrition['servingSize'] != nil %}
 ({{ page.nutrition['servingSize'] }})
 {% endif %}</h4>
-<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+<div class="flex flex-wrap" itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
 {% assign nutrients = page.nutrition %}
 {% for nutrient in nutrients  %}
   {% if nutrient.first == 'servingSize' %}{% continue %}{% endif %}
@@ -12,8 +12,8 @@
   {% assign name = site.data.nutrients[itemprop].name %}
   {% assign value = nutrient.last %}
   {% assign unit = site.data.nutrients[itemprop].unit %}
-  <div  class="rounded center border border-gray col-2 nutrient ">
-    <h5 class="bg-gray white">{{ name  }}</h5>
+  <div  class="rounded center border border-1 border-gray sm-col sm-col-2 lg-col-1 mr1 mb1">
+    <h5 class="bg-gray white m0 p1 capitalize">{{ name  }}</h5>
     <p itemprop="{{ itemprop }}">{{ value }}{{ unit }}</p>
   </div>
   {% endfor %}
diff --git a/css/main.scss b/css/main.scss
index e97d087..f22d26e 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -48,20 +48,6 @@ a:hover .image{opacity:0.2;}
 .recipes .sm-col{border-bottom:3px solid white}
 }
 
-div[itemprop="nutrition"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: start;
-  align-items: stretch;
-  .nutrient {
-    margin: 0 .2rem .2rem 0;
-    border-width: 1px;
-    h5 {
-      text-transform: capitalize;
-      margin: 0;
-      padding: 0.4rem;
-    }
-  }
-
-}
+.border-1 { border-width: 1px; }
+.border-1:active { border-width: 1px; }
+.capitalize { text-transform: capitalize; }