Merge pull request #357 from skylight-hq/ctse-conference

CTSE conference landing page

_data/solutions.yml

@@ -2,7 +2,11 @@
   description: |
     A platform that creates a feedback loop between gear users and acquirers, enabling data-driven decisions about gear problems and priorities.
   url: /work/solutions/gearfit/
-- name: Public Service Design
+- name: Service Design Accelerator
   description: |
     A strategic, holistic approach to delivering optimal user experiences within a complex ecosystem of policies, operations, people, and technology.
-  url: /work/solutions/public-service-design/
+  url: /work/solutions/public-service-design/
+- name: Public Health Data & Digital Services
+  description: |
+    A range of data and digital services to help public health jurisdictions build interoperable and sustainable data systems for public health action.
+  url: /work/solutions/public-health/

_includes/cta.html

@@ -1,4 +1,4 @@
-<section class="page-subfooter">
+<section class="page-subfooter {{include.section_class}}">
   <div class="page-subfooter-content">
     <div class="page-subfooter-header-row">
       <div class="page-subfooter-header-col">
@@ -16,7 +16,7 @@ <h2 class="page-subfooter-heading">{{include.header}}</h2>
     {% if ctaurl contains '://' %}
 
     {% else %}
-      {% assign ctaurl = include.cta_path | prepend: site.baseurl %}
+    {% assign ctaurl = include.cta_path | prepend: site.baseurl %}
     {% endif %}
 
     <div class="page-subfooter-cta-row">
@@ -27,4 +27,4 @@ <h2 class="page-subfooter-heading">{{include.header}}</h2>
       </div>
     </div>
   </div>
-</section>
+</section>

_includes/hero_banner.html

@@ -2,11 +2,11 @@
   {% if include.color %}
     bg-{{ include.color }}
   {% endif %} hero-banner {{include.additional_class}}" {% if include.image %} style="
-      background-image: url(/img/{{ include.image }});" {% endif %}>
+      background-image: url(/img/{{ include.image }}); background-size: 100% 100%" {% endif %}>
   <header class="hero hero-banner mb-5 {% if include.class %}{{ include.class }}{% endif %}">
     <div class="hero-container container-fluid text-center">
       <{% if page.layout=="toolkit" %}p{% else %}h1{% endif %}
-        class="hero-heading {% if include.text == 'dark' %}text-ink{% endif %}">
+        class="hero-heading {% if include.text == 'dark' %}text-ink{% endif %} mt-2">
         {% if include.hero_title %}
         {{ include.hero_title }}
         {% elsif page.layout == "toolkit" %}
@@ -22,6 +22,14 @@
         {{ include.hero_content | markdownify }}
         {% endif %}
       </div>
+      {% if include.link_content %}
+      <div class="hero-content mb-2">
+        <a href="{{include.link_href}}" class="{{include.link_class}}" {% if include.link_type
+          %}type="{{include.link_type}}" {% endif %}>
+          {{include.link_content}}
+        </a>
+      </div>
+      {% endif %}
     </div>
   </header>
 </div>

_includes/public_health_cta.html

@@ -0,0 +1,9 @@
+{% include cta.html
+section_class = "page-subfooter-light-blue"
+header = "Ready to modernize your data systems?"
+text = 'Contact us to learn more about how Skylight can help your organization.'
+text_css_class = "page-subfooter-text-col"
+cta_path = "/connect/contact/?page=public-health"
+cta = "Contact us"
+icon_css_class = "fal fa-long-arrow-right"
+%}

_sass/_buttons.scss

@@ -14,3 +14,42 @@
     @extend %mr-2;
   }
 }
+
+.usa-button--outline.usa-button--inverse {
+    box-shadow: inset 0 0 0 2px #e6e6e6;
+    color: #e6e6e6;
+}
+
+.usa-button--outline {
+    background-color: transparent !important;
+    box-shadow: inset 0 0 0 2px #005ea2;
+    color: #005ea2;
+}
+
+.usa-button {
+    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
+    font-size: 1.06rem;
+    line-height: .9;
+    color: #fff;
+    background-color: #005ea2;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    align-items: center;
+    border: 0;
+    border-radius: .25rem;
+    cursor: pointer;
+    -moz-column-gap: .5rem;
+    column-gap: .5rem;
+    display: inline-flex;
+    font-weight: 700;
+    justify-content: center;
+    margin-right: .5rem;
+    padding: .75rem 1.25rem;
+    text-align: center;
+    text-decoration: none;
+}
+
+.btn-10 {
+  width: 10rem;
+}

_sass/_custom.scss

@@ -289,6 +289,7 @@ $footer-link-border-hover: 1px dashed $footer-link-hover-color;
 // Page CTA (subfooter)
 $page-cta-color: $white;
 $page-cta-bg-color: $brand-primary;
+$page-cta-bg-color-alternate: $brand-primary-light;
 
 $btn-page-cta-color: $white;
 $btn-page-cta-bg: $brand-primary;

_sass/layout/_cta.scss

@@ -17,10 +17,14 @@
 
   > * {
     @include grid-container;
-    max-width: $size-md !important;
+    max-width: $size-desktop !important;
   }
 }
 
+.page-subfooter-light-blue {
+  background: $page-cta-bg-color-alternate !important;
+}
+
 .page-company {
   .page-subfooter {
     background-color: $sk-blue-light;

_sass/pages/_gearfit.scss

@@ -23,9 +23,6 @@
   h4 {
     font-size: $font-size-small;
   }
-  li::before{
-    content: "•" !important;
-  }
 }
 .controlled-heading{
   color: var(--Gray-300, #1C1D20);
@@ -54,9 +51,6 @@
     font-weight: 400;
     line-height: 1.9125rem; /* 1.9125rem */
   }
-  li::before{
-    content: "" !important;
-  }
   li.current{
     color: $blue-200 !important;
       cursor: pointer;

_sass/pages/_manifest.scss

@@ -22,4 +22,5 @@
 @import "brand";
 @import "career_pathways";
 @import "gearfit";
+@import "public_health";
 @import "solutions";