Browse Source

utility-first css

More basscss compliant
master
Rue Turner 1 year ago
parent
commit
b74795aa7b
2 changed files with 6 additions and 20 deletions
  1. +3
    -3
      _includes/nutritional-information.html
  2. +3
    -17
      css/main.scss

+ 3
- 3
_includes/nutritional-information.html View File

@ -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 %}


+ 3
- 17
css/main.scss View File

@ -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; }

Loading…
Cancel
Save