From 6f1688d399b23605739159c73fcfb634a3c901dc Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Wed, 13 Oct 2021 10:55:29 -0700
Subject: [PATCH] embed some projects

---
 .../annual-report-example.scss                |  3 +
 .../2020/index/annual-report.jsx              | 29 +++++++---
 .../2020/index/annual-report.scss             | 56 +++++++++++++------
 3 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/src/components/annual-report-example/annual-report-example.scss b/src/components/annual-report-example/annual-report-example.scss
index c13f568ab..bca2ff6c7 100644
--- a/src/components/annual-report-example/annual-report-example.scss
+++ b/src/components/annual-report-example/annual-report-example.scss
@@ -5,6 +5,9 @@
   align-items: center;
   justify-content: space-around;
   margin: 30px 0;
+  &.between{
+    justify-content: space-between;
+  }
   @media #{$intermediate-and-smaller} {
     flex-direction: column;
   }
diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx
index d6673787f..8dfb19446 100644
--- a/src/views/annual-report/2020/index/annual-report.jsx
+++ b/src/views/annual-report/2020/index/annual-report.jsx
@@ -1102,14 +1102,14 @@ class AnnualReport extends React.Component {
                                         </div>
                                     </div>
                                     <div className="flex-content">
-                                        <AnnualReportExample
-                                            className="regular"
-                                            paragraph={this.props.intl.formatMessage(
-                                                {id: 'annualReport.adaptationHighlightText2'}
-                                            )}
-                                            type="image"
-                                            large_image="/images/annual-report/2020/adaptation/Aaron Reuland - Class Projects 1.png"
-                                        />
+                                        <div className="annual-report-example regular between">
+                                            <div className="half">
+                                            <iframe src="https://scratch.mit.edu/projects/389148460/embed" allowtransparency="true" width="375" height="310" frameborder="0" scrolling="no" allowfullscreen></iframe>
+                                            </div>
+                                            <div className="half">
+                                                <p>Aaron’s students worked together to build a “kooky” version of their town called “Norwouldn’t,” packed with storybook creatures, original artwork, and interconnecting narratives. It was one of many collaborative Scratch projects Aaron facilitated to remind students that even while COVID-19 kept them inside their homes, they were still part of a caring and joyful community.</p>
+                                            </div>
+                                        </div>
                                     </div>
                                     <div className="world">
                                         <div className="spotlight bubble adaptation">
@@ -1262,6 +1262,19 @@ class AnnualReport extends React.Component {
                                             <FormattedMessage id="annualReport.communityText2" />
                                         </p>
                                     </div>
+                                    <div className="bg-image-container">
+                                        <img src="/images/annual-report/2020/community/Creative Computing Sprinkles left.svg"></img>
+                                        <img src="/images/annual-report/2020/community/Creative Computing Sprinkles right.svg"></img>
+                                    </div>
+                                    <div className="iframe-holder">
+                                        <iframe src="https://scratch.mit.edu/projects/412126066/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
+                                        <p>project by u/STORMPRIMEX</p>
+                                    </div>
+                                    <a className="download community" href="https://drive.google.com/file/d/1Kpwf4vN5I6SYY3l941v0IsP_tHVasuXW/view">
+                                        <span>Virtual Family Coding Nights Guide</span>
+                                        <img src="/images/annual-report/2020/Symbols-UI/File Download.svg" />
+                                    </a>
+                                    
                                 </div>
                                 
                                 <div className="inner">
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss
index 31cfac850..ba1653f9c 100644
--- a/src/views/annual-report/2020/index/annual-report.scss
+++ b/src/views/annual-report/2020/index/annual-report.scss
@@ -41,6 +41,10 @@ p {
     line-height: 2em;
 }
 
+a{
+    cursor: pointer;
+}
+
 .photo-credit {
     font-size: 0.875rem;
     line-height: 1.125rem;
@@ -1361,7 +1365,7 @@ img.comment-viz{
 
     .initiatives-adaptation, .initiatives-community {
         .world{
-            max-width: 700px;
+            max-width: 600px;
             margin: 50px auto;
         }
         .left-align{
@@ -1369,26 +1373,42 @@ img.comment-viz{
             text-align: left;
             margin: 50px 0;
         }
-        .community-hero-img {
+        .bg-image-container{
             width: 100%;
-            height: 545px;
-            margin: 52px 0;
-
-            background-image: url("/images/annual-report/initiatives/community-hero.png");
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center center;
-            overflow: hidden;
-
-            @media #{$intermediate} {
-                height: 330px;
-            }
-
-            @media #{$medium-and-smaller} {
-                height: 244px;
+            position: relative;
+            // z-index: -1;
+            display: flex;
+            justify-content: space-between;
+            margin-top: -400px;
+            @media #{$intermediate-and-smaller} {
+                display: none;
+            }
+        }
+        .iframe-holder{
+            margin: auto;
+            width: 100%;
+            max-width: 485px;
+            margin-top: -70px;
+            p{
+                margin: 0px;
+            }
+        }
+        .download{
+            color: $ui-white;
+            font-weight: bold;
+            border-radius: 4px;
+            text-align: center;
+            margin: 60px auto;
+            border-width: 0px;
+            width: 320px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            &.community{
+                background-color: $ui-blue;
             }
         }
-
         .moderation-and-guidelines {
             display: flex;
             justify-content: space-between;