From fc7b58364b026ec2e9bd899c3b7094a6043ed31b Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Thu, 15 Oct 2020 11:52:01 -0400
Subject: [PATCH] finished tools for tablet

---
 src/views/annual-report/annual-report.jsx  |   2 +-
 src/views/annual-report/annual-report.scss | 100 ++++++++++++++-------
 2 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 5f4fbce22..cede1eb6c 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -1113,7 +1113,7 @@ class AnnualReport extends React.Component {
                                                 alt=""
                                                 src="/images/annual-report/initiatives/Abhi Avatar.png"
                                             />
-                                            <div>Ahbi</div>
+                                            <div>Abhi</div>
                                         </div>
                                         <Comment
                                             comment={this.props.intl.formatMessage(
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index ebb61cb3c..4859369ff 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -32,6 +32,7 @@ h5 {
     text-transform: none;
     font-size: 1rem;
     margin: .5rem 0;
+    letter-spacing: 0;
 }
 
 p {
@@ -667,7 +668,7 @@ p {
         display: flex;
         align-items: center;
         font-weight: bold;
-        margin-left: 16px;
+        margin-left: -16px;
 
         img {
             width: 60px;
@@ -678,6 +679,43 @@ p {
     }
 
     .initiatives-tools {
+        .hero {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        img {
+            &.left {
+                @media #{$big} {
+                    width: 432px;
+                }
+                @media #{$intermediate} {
+                    width: 340px;
+                }
+                @media #{$medium} {
+                    width: 192px;
+                }
+                @media #{$small} {
+                    width: 132px;
+                }
+            }
+
+            &.right {
+                @media #{$big} {
+                    width: 780px;
+                }
+                @media #{$intermediate} {
+                    width: 468px;
+                }
+                @media #{$medium} {
+                    width: 342px;
+                }
+                @media #{$small} {
+                    width: 220px;
+                }
+            }
+        }
+
         .subsection-tag {
             background-color: $ui-aqua;
 
@@ -816,42 +854,42 @@ p {
                 padding: 1.75rem;
             }
         }
-    }
 
-    .initiatives-tools {
-        .hero {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        img {
-            &.left {
-                @media #{$big} {
-                    width: 432px;
-                }
-                @media #{$intermediate} {
-                    width: 260px;
-                }
-                @media #{$medium} {
-                    width: 192px;
-                }
-                @media #{$small} {
-                    width: 132px;
+        @media #{$intermediate-and-smaller} {
+            .tools-LEGO-info, .tools-app-info {
+                h4, p {
+                    text-align: left;
                 }
             }
 
-            &.right {
-                @media #{$big} {
-                    width: 780px;
+            .tools-extension {
+                width: 300px;
+
+                .tools-stat {
+                    width: 140px;
                 }
-                @media #{$intermediate} {
-                    width: 468px;
+            }
+
+            .tools-abhi {
+                width: 100%;
+                align-items: center;
+
+                .tools-abhi-intro {
+                    width: 100%;
+                    justify-content: center;
+
+                    img {
+                        order: -1;
+                        width: 460px;
+                    }
+
+                    div {
+                        max-width: 100%;
+                    }
                 }
-                @media #{$medium} {
-                    width: 342px;
-                }
-                @media #{$small} {
-                    width: 220px;
+
+                .emoji-text {
+                    text-align: left;
                 }
             }
         }