Create/template/insights/codurance-press (#445)

* Set up initial layout for downloadable assets page (Insights Codurance Press) and create module for the listing

The module created started as a clone of the Simple-Card module since it's similar.

This decision was made to avoid adding more complexity on the Simple-Card module.

* Adjust hero section

* Set up downloadable assets module on page

* Position ebooks thumbnail correctly

* Position downloadables listing above hero section

* Layout adjustments of downloadable assets listing

* Set up background configuration for the gradient of the header of the cards and adjust styling of thumbnails

* Style adjustments after design review

version_control/Codurance_September2020/css/modules/downloadable-assets-listing.css

@@ -0,0 +1,93 @@
+{% import '../utils/utils.css' as utils %}
+
+.card-container {
+    display: grid;
+    row-gap: var(--space-4);
+}
+
+.card-container::-webkit-scrollbar {
+    display: none;
+}
+
+.card {
+    {{ utils.card_shadow() }}
+    background-color: white;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column; 
+}
+
+.card__background {
+    height: 13rem;
+    {{ utils.card_border_radius_top() }}
+    background: transparent linear-gradient(180deg, var(--slate) 0%, var(--woodsmoke) 100%) 0% 0% no-repeat padding-box; /* Fallback gradient */
+}
+
+.card__header-wrapper {
+    position: relative;
+}
+
+.card__img-container {
+    position: absolute;
+    right: var(--space-5);
+    top: var(--space-3);
+    filter: drop-shadow(0px 10px 20px #00000086);
+}
+
+.card__img {
+    rotate: 6deg;
+}
+
+.card__info {
+    padding: var(--space-5) var(--space-3);
+    height: 100%;
+    display: flex;
+    flex-direction: column; 
+    min-height: 8.8rem;
+}
+
+.card__info span {
+    text-transform: uppercase;
+    {{ utils.natus() }}
+}
+
+.card__info h3 {
+    margin-top: var(--space-0);
+    {{ utils.freed() }}
+    line-height: var(--base-line-height);
+    font-weight: bold;
+}
+
+.card__description {
+    margin-top: var(--space-2);
+    margin-bottom: var(--space-2);
+    {{ utils.natus() }}
+}
+
+.card__info a {
+    margin-top: auto;
+    margin-bottom: 0;
+}
+
+{% call utils.large_and_extra_large() %}
+    .card-container {
+        grid-template-columns: repeat(3, 1fr);
+    }
+{% endcall %}
+
+{% call utils.medium_large_and_extra_large() %}
+    .card-container {
+        column-gap: var(--space-3);
+        row-gap: var(--space-5);
+    }
+
+    .card__background {
+        height: 11.7rem;
+    }
+{% endcall %}
+
+{% call utils.medium() %}
+    .card-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+{% endcall %}

version_control/Codurance_September2020/css/pages/insights-codurance-press.css

@@ -0,0 +1,49 @@
+{% import '../utils/utils.css' as utils %}
+
+.hero .header-insights__container {
+  gap: var(--space-5);
+  min-height: 23rem;
+}
+
+.hero .header-insights__text {
+  max-width: 45ch;
+}
+
+.downloadable-assets.region {
+  padding-top: unset;
+}
+
+.downloadable-assets__wrapper {
+  max-width: var(--content-max-width);
+  margin-inline: auto;
+}
+
+.downloadable-assets__listing {
+  margin-top: -50px;
+}
+
+{% call utils.medium_large_and_extra_large() %}
+  .hero .header-insights__container {
+    padding-bottom: 3em;
+  }
+
+  .downloadable-assets__listing {
+    margin-top: -75px;
+  }
+{% endcall %}
+
+{% call utils.medium() %}  
+  .hero .header-insights__text {
+    gap: unset;
+  }
+
+  .hero .header-insights__image {
+    align-self: center;
+  }
+{% endcall %}
+
+{% call utils.small() %}  
+  .hero .header-insights__container {
+    padding-bottom: 6em;
+  }
+{% endcall %}

version_control/Codurance_September2020/css/partials/header-insights.css

@@ -29,7 +29,6 @@
 
 .header-insights__text h1 {
     {{ utils.dudler() }}
-    font-weight: var(--heavy-font-weight);
     margin-top: .4em;
     transition: var(--cta-transition);
 }

version_control/Codurance_September2020/modules/Downloadable-Assets-Listing.module/fields.json

@@ -0,0 +1,159 @@
+[
+  {
+   "children": [
+    {
+     "type": "group",
+     "id": "7f5039ea-4867-e7bd-f24f-6ee17fdc1187",
+     "label": "Gradient background",
+     "children": [
+      {
+       "type": "color",
+       "id": "c51721dc-9ecf-166f-70f3-48b4232c96b9",
+       "default": {
+        "color": "#1D233C",
+        "opacity": 100
+       },
+       "label": "Top color",
+       "name": "top_color",
+       "show_opacity": false
+      },
+      {
+       "type": "color",
+       "default": {
+        "color": "#0C0C0D",
+        "opacity": 100
+       },
+       "label": "Bottom color",
+       "name": "bottom_color",
+       "show_opacity": false,
+       "oldId": "c51721dc-9ecf-166f-70f3-48b4232c96b9",
+       "id": "1c1f8209-1a26-2537-8c4c-9519dc4bab8f"
+      }
+     ],
+     "name": "gradient_background",
+     "default": {
+      "top_color": {
+       "color": "#1D233C",
+       "opacity": 100
+      },
+      "bottom_color": {
+       "color": "#0C0C0D",
+       "opacity": 100
+      }
+     }
+    },
+    {
+     "default": {
+      "size_type": "auto",
+      "src": "",
+      "alt": null,
+      "loading": "lazy"
+     },
+     "display_width": null,
+     "id": "0738e89c-cb3f-fbec-21fb-caf2376219de",
+     "label": "Thumbnail",
+     "locked": false,
+     "name": "thumbnail",
+     "required": false,
+     "resizable": true,
+     "responsive": true,
+     "show_loading": false,
+     "type": "image"
+    },
+    {
+     "allow_new_line": false,
+     "display_width": null,
+     "id": "4f8e32c8-11d5-59b8-a35a-f64142d9f4d5",
+     "label": "Content Type",
+     "locked": false,
+     "name": "content_type",
+     "placeholder": "Download, case study, article... ",
+     "required": false,
+     "show_emoji_picker": false,
+     "type": "text",
+     "validation_regex": ""
+    },
+    {
+     "allow_new_line": false,
+     "display_width": null,
+     "id": "074b3ea9-479f-51f0-862d-78968808fd45",
+     "label": "Title",
+     "locked": false,
+     "name": "title",
+     "required": false,
+     "show_emoji_picker": false,
+     "type": "text",
+     "validation_regex": ""
+    },
+    {
+     "allow_new_line": false,
+     "display_width": null,
+     "id": "479d4b0b-e4b9-38f7-90ec-e0e6dfbe13e0",
+     "inline_help_text": "Optional",
+     "label": "Description",
+     "locked": false,
+     "name": "description",
+     "required": false,
+     "show_emoji_picker": false,
+     "type": "text",
+     "validation_regex": ""
+    },
+    {
+     "allow_new_line": false,
+     "display_width": null,
+     "id": "68f60c8d-d8b9-a9df-fae9-5878c3056d87",
+     "inline_help_text": "Optional",
+     "label": "Link text",
+     "locked": false,
+     "name": "card_link_text",
+     "required": false,
+     "show_emoji_picker": false,
+     "type": "text",
+     "validation_regex": ""
+    },
+    {
+     "default": {
+      "url": {
+       "content_id": null,
+       "href": "",
+       "type": "CONTENT"
+      },
+      "open_in_new_tab": false,
+      "no_follow": false
+     },
+     "display_width": null,
+     "id": "d417a8e1-4d7e-52e1-cb7b-71bc0f0194cb",
+     "label": "Link",
+     "locked": false,
+     "name": "link",
+     "required": false,
+     "show_advanced_rel_options": false,
+     "supported_types": [
+      "EXTERNAL",
+      "CONTENT",
+      "FILE",
+      "BLOG"
+     ],
+     "type": "link",
+     "visibility": {
+      "controlling_field_path": "downloadable_assets.card_link_text",
+      "operator": "NOT_EMPTY"
+     }
+    }
+   ],
+   "default": [],
+   "display_width": null,
+   "expanded": false,
+   "group_occurrence_meta": null,
+   "id": "2bdcb375-a9b5-6d9b-0723-16bcd3ad5b70",
+   "label": "Downloadable Assets",
+   "locked": false,
+   "name": "downloadable_assets",
+   "occurrence": {
+    "sorting_label_field": "074b3ea9-479f-51f0-862d-78968808fd45"
+   },
+   "required": false,
+   "tab": "CONTENT",
+   "type": "group"
+  }
+ ]

version_control/Codurance_September2020/modules/Downloadable-Assets-Listing.module/meta.json

@@ -0,0 +1,5 @@
+{
+  "global" : false,
+  "host_template_types" : [ "PAGE" ],
+  "is_available_for_new_content" : true
+}

version_control/Codurance_September2020/modules/Downloadable-Assets-Listing.module/module.html

@@ -0,0 +1,55 @@
+{% import '../../snippets/button-snippets.html' as snippets %}
+{{ require_css(get_asset_url("../css/modules/downloadable-assets-listing.css")) }}   
+
+<div class="card-container lateral-spacing">
+    {% for card in module.downloadable_assets %}
+        {% set current_card_class = "card--{{ loop.index }}" %}
+        {% require_css %}
+            <style>
+              {% scope_css %}
+                .{{ current_card_class }} .card__background {
+                background: transparent linear-gradient(180deg, {{ card.gradient_background.top_color.color }} 0%, {{ card.gradient_background.bottom_color.color }} 100%) 0% 0% no-repeat padding-box;
+                }
+              {% end_scope_css %}
+            </style>
+        {% end_require_css %}
+
+        <article class="card {{ current_card_class }}">
+            <div class="card__header-wrapper">
+                <div class="card__background"></div>
+
+                <div class="card__img-container">
+                    <img class="card__img"
+                        src="{{ card.thumbnail.src }}?noresize"
+                        alt=""
+                        width="170"
+                        height="241"
+                    />
+                </div>
+            </div>
+
+            <div class="card__info">
+                {% if card.content_type %}
+                    <span>{{ card.content_type }}</span>
+                {% endif %}
+
+                <h3>{{ card.title }}</h3>
+
+                {% if card.description %}
+                    <p class="card__description">{{ card.description }}</p>
+                {% endif %}
+
+                {% if card.card_link_text %}
+                    {{ snippets.text_cta_right_arrow(
+                        url=card.link.url.href,
+                        target="_blank",
+                        text="{{ card.card_link_text }}"
+                    ) }}
+                {% endif %}
+            </div>
+        </article>
+    {% endfor %}
+</div>
+
+
+