diff --git a/_includes/hero.html b/_includes/hero.html index 1533088d8..910a25aa0 100644 --- a/_includes/hero.html +++ b/_includes/hero.html @@ -120,6 +120,14 @@

{{ page.hero.text}}

{{ page.hero.subtext | markdownify }} +{% elsif page.class == "sprint-process" %} +
+
+

{{ page.hero.text}}

+
+ {{ page.hero.subtext | markdownify }} +
+
{% else %}
diff --git a/_includes/how-it-works-details.html b/_includes/how-it-works-details.html index 4afd6ccfc..6ac6d6aab 100644 --- a/_includes/how-it-works-details.html +++ b/_includes/how-it-works-details.html @@ -1,73 +1,83 @@ {% assign data = include.data %} -
-
    -
  1. - Identify Challenges -

    Government agencies or non-governmental organizations (NGOs) identify high-priority problems they seek to solve through the sprint. Challenges can be any priority facing the public.

    -
    2. -
  2. - Team Up -

    Technologists from industry, NGOs, and universities sign on to create data-driven, digital products in collaboration - with end users, community advocates, and data experts.

    -
    3. -
  3. -
    +
    +
    +
      +
    1. + Identify Challenges +

      Government agencies or non-governmental organizations (NGOs) identify high-priority problems they seek to solve through the sprint. Challenges can be any priority facing the public.

      +
      2. +
    2. + Team Up +

      Technologists from industry, NGOs, and universities sign on to create data-driven, digital products in collaboration + with end users, community advocates, and data experts.

      +
      3. +
    3. + Build +
      +

      + Tech teams build products during a 12-14 week technology development sprint that includes user research, data + exploration, and product development. Past products include mapping tools, apps, websites, games, AI algorithms, network + visualizations, and more. +

      +
      +
      +

      + +

      - -

      Build

      - - -

      - Tech teams build products during a 12-14 week technology development sprint that includes user research, data - exploration, and product development. Past products include mapping tools, apps, websites, games, AI algorithms, network - visualizations, and more. -

      -
      -
      -

      - -

      - -
      -
        -
      1. User Research: -

        Teams conduct user research and connect with user advocates who can offer insights into their communities.

        -
        2. -
      2. Data Discovery: -

        Teams begin identifying and exploring relevant datasets and connect with data stewards via email and phone to learn more about available datasets.

        -
        3. -
      3. Concept Pitch: -

        Teams present their initial progress and product concept for feedback.

        +
        +
          +
        1. User Research: +

          Teams conduct user research and connect with user advocates who can offer insights into their communities.

          2. -
        2. Product Advising: -

          Teams are paired with 1:1 product advisors that meet with the teams outside of milestones to discuss launch and product maintenance strategy

          - -
          3. -
        3. Beta Demo: -

          Teams present a prototype of their product for feedback.

          +
        4. Data Discovery: +

          Teams begin identifying and exploring relevant datasets and connect with data stewards via email and phone to learn more about available datasets.

          5. -
        5. MVP Demo: -

          Teams present a minimum viable product as the final outcome of the sprint and receive feedback on sustainability and longevity of their work.

          +
        6. Concept Pitch: +

          Teams present their initial progress and product concept for feedback.

          +
          7. +
        7. Product Advising: +

          Teams are paired with 1:1 product advisors that meet with the teams outside of milestones to discuss launch and product maintenance strategy

          +
          8. -
        +
      4. Beta Demo: +

        Teams present a prototype of their product for feedback.

        +
        5. +
      5. MVP Demo: +

        Teams present a minimum viable product as the final outcome of the sprint and receive feedback on sustainability and longevity of their work.

        +
        6. +
      + +
      +
      +
      4. +
    4. + Launch +

      Products are launched and federal agencies can decide how they want to showcase the results of their sprint.

      +
      5. +
    5. + Reach End Users +

      After the sprint, participants have the option to stay in touch and continue product development and deployment.

      +
      6. +
    -
    -
    -
    4. -
  4. - Launch -

    Products are launched and federal agencies can decide how they want to showcase the results of their sprint.

    -
    5. -
  5. - Reach End Users -

    After the sprint, participants have the option to stay in touch and continue product development and deployment.

    -
    6. -
+
+ + Facilitate a TOP sprint at your agency on your timeline with the TOPx Toolkit. + +
+
\ No newline at end of file diff --git a/_includes/single-column-header-text-hot-dog-cta.html b/_includes/single-column-header-text-hot-dog-cta.html index 1d37f5869..66784c416 100644 --- a/_includes/single-column-header-text-hot-dog-cta.html +++ b/_includes/single-column-header-text-hot-dog-cta.html @@ -1,54 +1,75 @@ {% assign data = include.data %} -
- {% for data in data %} -{% if data.text.title %} -

{{data.text.title}} -

-{% endif %} -
- {% if data.text.subtitle %} +{% for data in data %} +
+ {% if data.text.title %} +

{{ data.text.title }} +

+ {% endif %} -

{{data.text.subtitle}}

+
+ {% if data.text.subtitle %} - {% endif %} +

{{data.text.subtitle}}

- {% if data.role.title %} + {% endif %} -

{{data.role.title}}

+ {% if data.role.title %} - {% endif %} +

{{data.role.title}}

+ {% endif %} -

- {{ data.text.blurb | markdownify | remove: "

" | remove: "

" }} -

+ {% if data.text.blurb %} +

+ {{ data.text.blurb | markdownify | remove: "

" | remove: "

" }} +

-

- {{ data.role.blurb | markdownify | remove: "

" | remove: "

" }} -

+ {% endif %} -{% if data.download.href %} - -{{ data.download.text}} -{% endif %} + {% if data.role.blurb %} +

+ {{ data.role.blurb | markdownify | remove: "

" | remove: "

" }} +

+ {% endif%} -
+ {% if data.download.href %} +
+ + {{ data.download.text}} + +
+ {% endif %} +
-{% if data.cta %} -

{{data.blurb.title}}

-{% endif %} + {% if data.cta %} +

{{data.blurb.title}}

+ {% endif %} + + {% if data.role-details %} +
+
+
+

Interested in participating in a sprint?

+ + Email the TOP team. + +
+
+
+ {% endif %} +
{% endfor %} -
\ No newline at end of file diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss index 8b0ab38d7..f7ef446cf 100644 --- a/css/_uswds-theme-custom-styles.scss +++ b/css/_uswds-theme-custom-styles.scss @@ -1392,15 +1392,212 @@ main { .page-sprint-process { h2 { font-size: 14px; + + @include at-media('tablet') { + font-size: 20px; + line-height: 20px; + } + @include at-media('desktop') { + font-size: 32px; + line-height: 32px; + } } h3 { font-size: 12px; + @include at-media('tablet') { + font-size: 14px; + line-height: 14px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 24px; + } } p { font-size: 12px; line-height: 17px; + @include at-media('tablet') { + font-size: 14px; + line-height: 17px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 30px; + } + } + + .interior-hero { + padding-bottom: 60px; + } + + .usa-hero__bg { + width: 200px; + min-height: 114px; + background-color: #121923; + @include at-media('tablet') { + width: 343px; + // min-height: ; + } + + @include at-media('desktop') { + width: 571px; + } + } + + .usa-hero__title { + font-size: 14px; + margin: 0; + padding: 0; + padding-top: 25px; + @include at-media('tablet') { + font-size: 20px; + line-height: 20px; + } + @include at-media('desktop') { + font-size: 32px; + line-height: 32px; + } + } + + .usa-hero__subtitle { + font-size: 12px; + line-height: 17px; + margin-bottom: 0; + padding-bottom: 16px; + @include at-media('tablet') { + font-size: 14px; + line-height: 17px; + } + + @include at-media('desktop') { + font-size: 32px; + line-height: 32px; + } + } + + div.header-text-hot-dog, div.how-it-works-details { + padding: 52.64px 30.08px; + + @include at-media('tablet') { + padding: 52.64px 67.68px; + } + @include at-media('desktop') { + padding: 112px 127.5px; + } + } + div.grid-container div.text-wrapper { + margin: 15.04px 0; + + @include at-media('tablet') { + margin: 30px 0 8px; + } + @include at-media('desktop') { + margin: 30px 0px 0px; + } + a { + font-size: 12px; + line-height: 17px; + @include at-media('tablet') { + font-size: 14px; + } + @include at-media('desktop') { + font-size: 24px; + } + } + } + .how-it-works-details { + ol { + list-style-position: inside; + font-size: 12px; + @include at-media('tablet') { + font-size: 14px; + line-height: 17px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 24px; + } + .usa-accordion__button { + font-size: 12px; + line-height: 12px; + @include at-media('tablet') { + font-size: 14px; + line-height: 14px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 24px; + } + } + } + } + .site-button.usa-button { + box-shadow: inset 0 0 0 1px black; + text-decoration: underline; + font-size: 12px; + line-height: 17px; + @include at-media('tablet') { + font-size: 14px; + line-height: 17px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 30px; + } + &::hover { + text-decoration: underline; + } + @include at-media('desktop') { + text-decoration: none; + &:hover { + text-decoration: underline; + } + &:visited { + color: black; + } + } + } + .full-width-screen-spilt { + display: grid; + // max width of grid-container is 64 + // padding in mobile is 1rem + grid-template-columns: minmax(30.08px, 1fr) minmax(0, auto) minmax(30.08px, 1fr); + grid-template-rows: auto auto; + grid-template-areas: + ". roles ." + "semi semi semi"; + + .roles-content-block { + grid-column: 1/2; + grid-area: roles; + } + + .roles-downloads { + a { + text-decoration: none; + color: black; + &:visited { + color: black; + } + &:hover { + text-decoration: underline; + color: black; + } + } + } + .semi-cta-block { + grid-column: 2/-1; + justify-self: end; + grid-area: semi; + } + @include at-media('tablet') { + grid-template-columns: 67.68px auto 67.68px; + } + @include at-media('desktop') { + grid-template-columns: 127.5px auto 127.5px; + } } } @@ -2104,15 +2301,36 @@ div.toolkit-todo__resources { } } +.roles-downloads a { + font-size: 12px; +} + .semi-cta { border: 1px black solid; // border-radius: 130px 0 0 130px; padding: 50px 25px; - min-height: 172px; + min-height: 108px; + + @include at-media('tablet') { + width: 100%; + } &.radius-left-pill { border-right-style: none; } + + a { + font-size: 12px; + line-height: 17px; + @include at-media('tablet') { + font-size: 14px; + } + @include at-media('desktop') { + font-size: 24px; + line-height: 24px; + + } + } } .footer-contact-links { diff --git a/pages/our-process.md b/pages/our-process.md index ea30ed0c5..0e92714d2 100644 --- a/pages/our-process.md +++ b/pages/our-process.md @@ -37,8 +37,7 @@ roles-intro: roles-details: - role: title: Tech Teams - blurb: |- - Tech teams are the companies, universities, non-profits, and students who build digital products in the sprints. They design, develop, and launch the products they build, and own and maintain the products after the sprints. Teams may also develop non-digital products, such as toolkits, policy interventions and more. + blurb: Tech teams are the companies, universities, non-profits, and students who build digital products in the sprints. They design, develop, and launch the products they build, and own and maintain the products after the sprints. Teams may also develop non-digital products, such as toolkits, policy interventions and more. download: href: files/sprint-process-page/tech-team-role-overview.pdf text: Tech Team Overview @@ -91,27 +90,37 @@ cta-one: --- {% include hero.html %} +
+
{% include single-column-header-text-hot-dog-cta.html data=page.how-it-works %} -{% include how-it-works-details.html data=page.how-it-works %} - -
-
- - Facilitate a TOP sprint at your agency on your timeline with the TOPx Toolkit. -
-{% include single-column-header-text-hot-dog-cta.html data=page.roles-intro %} -{% include single-column-header-text-hot-dog-cta.html data=page.roles-details %} -
-
-
-

Interested in participating in a sprint?

- - Email the TOP team. - -
+ + +{% include how-it-works-details.html data=page.how-it-works utils='how-it-works' %} + + +
+
+ {% include single-column-header-text-hot-dog-cta.html data=page.roles-intro %}
+ +
+ +
+ {% include single-column-header-text-hot-dog-cta.html data=page.roles-details %} +
+
+
+
+

Interested in participating in a sprint?

+ + Email the TOP team. + +
+
+
+