Remove unsafe-inline from style csp directives.

* Remove unused CSS variable

kitsune/products/jinja2/products/includes/product_macros.html

@@ -1,5 +1,5 @@
 {% macro product_cards(products, topic=None) -%}
-<div class="sumo-card-grid is-product-wrap" style="--cg-count: {{ products|length }};">
+<div class="sumo-card-grid is-product-wrap">
   <div class="scroll-wrap">
     {% for product in products %}
       <div class="card card--product zoom-on-hover">

kitsune/products/jinja2/products/includes/topic_macros.html

@@ -1,6 +1,6 @@
 {% macro help_topics(topics, product_slug=None, new_tab=False) -%}
 
-  <div class="sumo-card-grid" style="--cg-count: {{ topics|length }};">
+  <div class="sumo-card-grid">
     <div class="scroll-wrap">
       {% for topic in topics %}
       {% set topic_url = url('products.documents', product_slug=product_slug or product.slug, topic_slug=topic.slug) %}

kitsune/questions/jinja2/questions/includes/aaq_macros.html

@@ -5,7 +5,7 @@
   <h1 class="sumo-page-heading">{{ _('Contact Support') }}</h1>
   <h2 class="sumo-page-subheading">{{ _('Which product do you need help with?') }}</h2>
   <div class="sumo-page-section--inner">
-    <div id="product-picker" class="sumo-card-grid stack-on-mobile" style="--cg-count: {{ products|length }};">
+    <div id="product-picker" class="sumo-card-grid stack-on-mobile">
       <div class="scroll-wrap">
         {% for key, product in products.items() %}
         <div class="card card--product zoom-on-hover">

kitsune/questions/jinja2/questions/product_list.html

@@ -19,7 +19,7 @@
 
 
 
-    <div class="product-list sumo-card-grid" style="--cg-count: {{ products|length + 1}};">
+    <div class="product-list sumo-card-grid">
       <div class="scroll-wrap">
         {% for product in products %}
         <div class="card card--product zoom-on-hover product">

kitsune/search/jinja2/search/results.html

@@ -43,7 +43,7 @@
 
         <p>{{ _("Try searching again with a different keyword, or browse our featured articles and threads below instead.") }}</p>
 
-        <section class="sumo-card-grid content-box" style="--cg-count: {{ fallback_results|length }};">
+        <section class="sumo-card-grid content-box">
           <div class="scroll-wrap">
             {% for doc in fallback_results %}
             <div class="card card--article result document">

kitsune/settings.py

@@ -1243,7 +1243,6 @@ CSP_FONT_SRC = (
 
 CSP_STYLE_SRC = (
     "'self'",
-    "'unsafe-inline'",
     "https://*.itsre-sumo.mozilla.net",
 )
 

kitsune/sumo/jinja2/includes/common_macros.html

@@ -475,7 +475,7 @@
 {% endmacro %}
 
 {% macro featured_articles(articles, new_tab=False) %}
-<div class="sumo-card-grid is-four-wide" style="--cg-count: 4;">
+<div class="sumo-card-grid is-four-wide">
   <div class="scroll-wrap">
     {% for doc in articles %}
     <div class="card card--article zoom-on-hover">

kitsune/sumo/static/sumo/tpl/search-results-list.njk

@@ -43,7 +43,7 @@
 {% else %}
   <p>{{ _("Try searching again with a different keyword, or browse our featured articles below instead.") }}</p>
 
-  <section class="sumo-card-grid extra-padding content-box" style="--cg-count: {{ fallback_results|length }};">
+  <section class="sumo-card-grid extra-padding content-box">
     <div class="scroll-wrap">
       {% for doc in fallback_results %}
         <div class="card card--article result document">

kitsune/wiki/jinja2/wiki/document.html

@@ -113,7 +113,7 @@
       <div class="text-center">
         <h2 class="sumo-page-subheading">{{ _('Related Articles') }}</h2>
       </div>
-      <div class="sumo-card-grid" style="--cg-count: {{ docs|length }};">
+      <div class="sumo-card-grid">
         <div class="scroll-wrap">
           {% for related in docs %}
           <div class="card card--article">

styleguide/styleguide-examples/card-grid-articles.njk

@@ -3,7 +3,7 @@
     <h2 class="sumo-page-subheading">Featured Articles &amp; Threads</h2>
   </div>
 
-  <div class="sumo-card-grid is-four-wide" style="--cg-count: 4;">
+  <div class="sumo-card-grid is-four-wide">
     <div class="scroll-wrap">
       <div class="card card--article">
           <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title">

styleguide/styleguide-examples/card-grid-products.njk

@@ -3,7 +3,7 @@
     <h2 class="sumo-page-subheading">Get Help</h2>
     <p>Pick your product</p>
   </div>
-  <div class="sumo-card-grid" style="--cg-count: 2;">
+  <div class="sumo-card-grid">
   <div class="scroll-wrap">
 
       <div class="card card--product">

styleguide/styleguide-examples/card-grid.njk

@@ -1,5 +1,5 @@
 
-  <div class="sumo-card-grid {{ modifier_class }}" style="--cg-count: 8;">
+  <div class="sumo-card-grid {{ modifier_class }}">
     <div class="scroll-wrap">
       <div class="card card--article">
           <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />