diff --git a/_data/nav.yml b/_data/nav.yml index 162025ffb..99b91eb91 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -26,6 +26,8 @@ primary: accordion: - text: Prize Challenge href: prize-challenge/ + - text: Annual Innovation Summit + href: summit/ secondary: - text: Our Process diff --git a/_includes/hero.html b/_includes/hero.html index fdbca4e59..cfa825279 100644 --- a/_includes/hero.html +++ b/_includes/hero.html @@ -126,13 +126,21 @@

{{ page.hero.text}}

{{ page.hero.subtext | markdownify }} +{% elsif page.class =="summit" %} +
+
+

{{ page.hero.text}}

+
+ {{ page.hero.subtext | markdownify }} +
+
{% else %} -
-
-

{{ page.hero.text}}

-
- {{ page.hero.subtext | markdownify }} -
+
+
+

{{ page.hero.text}}

+
+ {{ page.hero.subtext | markdownify }}
+
{% endif %}
diff --git a/_includes/summit-video.html b/_includes/summit-video.html new file mode 100644 index 000000000..ba00a9dce --- /dev/null +++ b/_includes/summit-video.html @@ -0,0 +1,53 @@ +{% assign data = include.data %} +{% assign video-data = include.video-data %} +
+

{{ data.title.text }}

+
+ + + + + + + + + +
+

{{ data.blurb.title }}

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

{{ data.blurb.p }}

+ {% endif %} + {% if data.checkmarks %} +
    + + {% for items in data.checkmarks %} +
  • {{ items.item }}
    • + {% endfor %} + + +
+ {% endif %} + {% if data.phase-video-list %} + {{phase-video-list}} + + {% endif %} +
+
+
\ No newline at end of file diff --git a/_includes/toolkit-refresh-video.html b/_includes/toolkit-refresh-video.html index 5cc1572b0..3b6726a0e 100644 --- a/_includes/toolkit-refresh-video.html +++ b/_includes/toolkit-refresh-video.html @@ -3,12 +3,12 @@

{{ data.title.text }}

- -
+

{{ data.blurb.title }}

{% if data.blurb.p %}

{{ data.blurb.p }}

diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss index 738326dcb..64e8a4362 100644 --- a/css/_uswds-theme-custom-styles.scss +++ b/css/_uswds-theme-custom-styles.scss @@ -1391,10 +1391,10 @@ main { // FAQ page ----------------- // .page-faqs { background: #E6E6E6; -} -.banner-background { - background: url("../img/photos/faqs/top-faq-banner.png") no-repeat 0 0; - background-size: cover; + .banner-background { + background: url("../img/photos/faqs/top-faq-banner.png") no-repeat 0 0; + background-size: cover; + } } @@ -1652,9 +1652,11 @@ main { } .video-section { - background-color: #FAF3E9; display: flex; flex-direction: column; + .page-topx-toolkit & { + background-color: #FAF3E9; + } h2 { margin: 0; @@ -1667,7 +1669,7 @@ main { align-items: center; width: 100%; - iframe { + .page-topx-toolkit & iframe { border: 0; @media screen and (min-width: 640px){ border-bottom: color('blue-warm-60v') 15px solid; @@ -3115,6 +3117,154 @@ code { } } +// Summit page +.page-annual-innovation-summit { + background: color("base-darkest"); + + .banner-background { + background: url("../img/photos/summit/desktop-hero-background.png") no-repeat 0 0; + background-size: cover; + } + .past-events { + background: url("../img/photos/summit/mobile-pastevents-background.png") no-repeat 0 0; + background-size: cover; + @include at-media('tablet') { + background: url("../img/photos/summit/desktop-pastevents-background.png") no-repeat 0 0; + background-size: cover; + + } + } + + h1 { + font-size: 10px; + line-height: 14px; + + @include at-media("tablet") { + font-size: 24px; + line-height: 28px; + } + + @include at-media("desktop") { + font-size: 32px; + line-height: 42px; + } + } + + .usa-hero__subtitle { + font-size: 8px; + line-height: 12px; + + @include at-media("tablet") { + font-size: 14px; + line-height: 20px; + } + + @include at-media("desktop") { + font-size: 24px; + line-height: 30px; + } + } + + .cta-one { + font-size: 8px; + line-height: 9.37px; + + @include at-media("tablet") { + font-size: 14px; + line-height: 18px; + } + + @include at-media("desktop") { + font-size: 24px; + line-height: 30px; + } + + >p a.site-cta { + font-size: 5px; + line-height: 6.39px; + + @include at-media("tablet") { + font-size: 10px; + line-height: 12.8px; + } + + @include at-media("desktop") { + font-size: 16px; + line-height: 20.4px; + } + } + } + + .video-section-container { + // put this in here + // flex-column flex-no-wrap flex-align-center flex-justify-center tablet: flex-row tablet:flex-wrap tablet:flex-align-start + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + + @include at-media("tablet") { + flex-direction: row; + flex-wrap: wrap; + align-items: start; + } + } + + .video-section { + // max-width: 375px; + width: 233px; + .iframe-content div { + min-width: 125px; + } + @include at-media("tablet") { + width: 247px; + } + @include at-media("desktop") { + width: 392px; + } + } + div.video-section-text-container { + font-size: 10px; + line-height: 12.6px; + padding: 16px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + h3 { + padding: 0; + margin:0; + } + @include at-media("tablet") { + max-width: 247px; + height: 144px; + padding: 24px; + } + + @include at-media("desktop") { + max-width: 392px; + height: 230px; + padding: 32px; + h3 { + font-size: 16px; + line-height: 24px; + } + + p { + font-size: 16px; + line-height: 20px; + } + } + } + } + + section.highlight-video-section div.video-section-text-container h3 { + @include at-media("desktop") { + font-size: 24px; + line-height: 24px; + } +} // Logo Garden diff --git a/img/photos/summit/desktop-hero-background.png b/img/photos/summit/desktop-hero-background.png new file mode 100644 index 000000000..22705f6f4 Binary files /dev/null and b/img/photos/summit/desktop-hero-background.png differ diff --git a/img/photos/summit/desktop-pastevents-background.png b/img/photos/summit/desktop-pastevents-background.png new file mode 100644 index 000000000..e1c505063 Binary files /dev/null and b/img/photos/summit/desktop-pastevents-background.png differ diff --git a/img/photos/summit/mobile-pastevents-background.png b/img/photos/summit/mobile-pastevents-background.png new file mode 100644 index 000000000..b0c090ae8 Binary files /dev/null and b/img/photos/summit/mobile-pastevents-background.png differ diff --git a/pages/summit.md b/pages/summit.md new file mode 100644 index 000000000..027d54d5a --- /dev/null +++ b/pages/summit.md @@ -0,0 +1,206 @@ +--- +title: "Annual Innovation Summit" +permalink: /summit/ +layout: default +name: summit +class: summit + +background: banner-background padding-x-4 tablet:padding-x-6 desktop:padding-x-10 +hero: + text: The Opportunity Project (TOP) Summit is an annual multi-day virtual conference that features speakers, discussions, product demonstrations, and hands-on learning opportunities by and for the TOP community. + subtext: Showcasing the latest in open innovation, cross-sector collaboration, civic technology, open data, and human-centered design. + +cta-one: + container-class: display-flex flex-column flex-align-center text-center cta-one + background-class: bg-blue-warm-60v + title: + text: Save the date! TOP Summit 2024 is scheduled for January 17 - 19, 2024. + class: text-normal cta-one padding-x-5 tablet:padding-x-9 + blurb: + text: |- + Join us virtually to view new digital products and many more innovations from the TOP community.

+ More information is coming soon. + + + class: text-normal cta-one padding-x-5 tablet:padding-x-9 + primary: + text: RSVP to Attend + href: /topx-toolkit/phase-1 + isExternal: true + class: secondary + +video-one: + class: highlight-video-section tablet:width-full + video: + src: https://www.youtube.com/embed/videoseries?si=qtl6VAkzlIoFThBN&list=PLewV-zKXDZkghdjPUCmmU02T7xI2dUPme + alt-text: "2022 TOP Summit (February 2023)" + mobile-width: 233 + mobile-height: 125 + tablet-width: 318 + tablet-height: 170 + desktop-width: 510 + desktop-height: 273 + copy-class: bg-white + blurb: + title: "2022 TOP Summit (February 2023)" + class: text-center + p: "Featured more than 25 new technology products created through 2022 TOP sprints focused on national and Puerto Rico-specific challenges." + class: + + +video-two: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/videoseries?si=cDwzTAWNVcuRFq0V&list=PLewV-zKXDZkitrXN6T7a0MG-oTi7WGTu_ + alt-text: "2021 TOP Summit: Open Innovation for All" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2021 TOP Summit: Open Innovation for All" + class: text-center + p: "Featured digital products envisioning the world post-COVID 19 and announced $260,000 in awards to the winners of the Open Data for Good Grand Challenge." + + +video-three: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/-c-DaW3ZHko?si=3kNadCt7cT3SNqo- + alt-text: "2020 TOP Demo Week: A Virtual Tech, Data, and Community Conference" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2020 TOP Demo Week: A Virtual Tech, Data, and Community Conference" + class: text-center + p: "Showcased 35+ new digital tools focused on challenges impacting the natural and built environment." + + +video-four: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/_qLQ8OD4bWI?si=mBiaainthFXorljE + alt-text: "2019 December Census Demo Day + TOP Summit at Georgetown University" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2019 December Census Demo Day + TOP Summit at Georgetown University" + class: text-center + p: "Featured 20+ digital tools that tackled a number of challenges — such as disaster response, local address data collection, and more." + + +video-five: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/36sdFlR1F-s?si=VzuwsflRIfhGJsEh + alt-text: "2018 TOP Demo Day (March 2019)" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2018 TOP Demo Day (March 2019)" + class: text-center + p: "Showcased 20+ digital tools that addressed issues like connecting veterans to jobs, student access to STEM fields, the opioid crisis, and more." + + +video-six: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/hiqn9a64wlo?si=uRRzo67q5XYXnk-p + alt-text: "2017 TOP Demo Day at the Census Bureau" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2017 TOP Demo Day at the Census Bureau" + class: text-center + p: "Featured 10 new tools that took on problems such as youth and veteran homelessness, engaging hard-to-count populations in the decennial census, and making federal grant data user-friendly." + + +video-seven: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/uqIiMj2S_Vk?si=zjm-En0_68jsmAo3 + alt-text: "2016 TOP Demo Day at the White House (October 2016)" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2016 TOP Demo Day at the White House (October 2016)" + class: text-center + p: "Featured digital tools that promoted emotional wellbeing, connected people with job opportunities, improved transit accessibility, and helped families find affordable housing." + + + +video-eight: + class: tablet:margin-x-105 desktop:margin-x-205 + video: + src: https://www.youtube.com/embed/6un7g9HhbrU?si=sNeLdDEd6fmZQY3b + alt-text: "2016 White House Launch of The Opportunity Project (March 2016)" + mobile-width: 233 + mobile-height: 125 + tablet-width: 247 + tablet-height: 133 + desktop-width: 392 + desktop-height: 211 + copy-class: bg-white + blurb: + title: "2016 White House Launch of The Opportunity Project (March 2016)" + class: text-center + p: "Featuring tools from the first-ever TOP sprint, and officially launching The Opportunity Project as an ongoing innovation program." + + +--- +{% include hero.html %} + +
+
+

Past Events

+
+ {% assign section = page.video-one %} + {% include summit-video.html data=section %} +
+
+ {% assign section = page.video-two %} + {% include summit-video.html data=section %} + {% assign section = page.video-three %} + {% include summit-video.html data=section %} + {% assign section = page.video-four %} + {% include summit-video.html data=section %} + {% assign section = page.video-five %} + {% include summit-video.html data=section %} + {% assign section = page.video-six %} + {% include summit-video.html data=section %} + {% assign section = page.video-seven %} + {% include summit-video.html data=section %} + {% assign section = page.video-eight %} + {% include summit-video.html data=section %} +
+
+
diff --git a/pages/topx/intro.md b/pages/topx/intro.md index 06bbc56f4..564847f5f 100644 --- a/pages/topx/intro.md +++ b/pages/topx/intro.md @@ -24,6 +24,8 @@ video-one: video: src: https://www.youtube.com/embed/hH5NwCca_5o alt-text: "Why Should I Facilitate a TOP Sprint at My Agency?" + width: 640 + height: 360 blurb: title: "Your Challenge + Data + Technologists & Communities = Digital Products That Solve Real-World Problems" p: "The Opportunity Project (TOP) is a tested innovation method that helps federal agencies rapidly and creatively solve problems. The resources in this Toolkit enable you to use the TOP sprint model to:" @@ -44,6 +46,8 @@ video-two: video: src: https://www.youtube.com/embed/z6zl7kSo_GY alt-text: "How Do I Facilitate a TOP Sprint?" + width: 640 + height: 360 blurb: title: "The Toolkit is a step-by-step guide on how to facilitate a TOP sprint." p: "You will learn how to:" diff --git a/pages/topx/phase-1.md b/pages/topx/phase-1.md index 6f5fe7e5b..fef6b346c 100644 --- a/pages/topx/phase-1.md +++ b/pages/topx/phase-1.md @@ -41,6 +41,8 @@ phase-info-video: video: src: https://www.youtube.com/embed/OyrkKHP3nBA alt-text: "TOPx: How to Plan for Your TOP Sprint" + width: 640 + height: 360 blurb: title: View More Phase 1 Videos In-Step Below phase-video-list: diff --git a/pages/topx/phase-2.md b/pages/topx/phase-2.md index e7da46509..35637fa01 100644 --- a/pages/topx/phase-2.md +++ b/pages/topx/phase-2.md @@ -38,6 +38,8 @@ phase-info-video: video: src: https://www.youtube.com/embed/bad8acAJ9lg alt-text: "TOPx: How To Execute Your TOP Sprint?" + width: 640 + height: 360 blurb: title: "View More Phase 2 Videos In-Step Below" phase-video-list: diff --git a/pages/topx/phase-3.md b/pages/topx/phase-3.md index 9641ce1a3..26e84c0a0 100644 --- a/pages/topx/phase-3.md +++ b/pages/topx/phase-3.md @@ -34,6 +34,8 @@ phase-info-video: video: src: https://www.youtube.com/embed/BXLrQv8VgMU alt-text: "TOPx: How to Showcase Your TOP Solutions" + width: 640 + height: 360 blurb: title: "How to Showcase Your TOP Solutions" # phase-video-list: