addressed PR comments

ocadotechnology · Jul 18, 2024 · 00e395f · 00e395f
1 parent 9b8e826
commit 00e395f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/portal/static/portal/sass/partials/_carousel.scss b/portal/static/portal/sass/partials/_carousel.scss
@@ -156,3 +156,23 @@
   /* shrink padding because cards have their own */
   @include _padding(0px, 2px, 0px, 2px);
 }
+
+.carousel-button {
+  margin-top: 2rem;
+}
+
+.carousel-image {
+  margin-top: 15px;
+}
+
+.carousel-image--column {
+  padding-right: 20px;
+}
+
+.carousel-column--images {
+  margin-top: -15px;
+}
+
+.carousel-header {
+  margin-top: 0rem !important;
+}
diff --git a/portal/static/portal/sass/partials/_images.scss b/portal/static/portal/sass/partials/_images.scss
@@ -83,18 +83,6 @@ img {
   position: relative;
 }
 
-.ten-year-button {
-  margin-top: 2rem;
-}
-
-.ten-year-carousel-image {
-  margin-top: 15px;
-}
-
-.ten-year-carousel-image--column {
-  padding-right: 20px;
-}
-
 #hatfield {
   left: 34.5%;
   top: 26.7%;

diff --git a/portal/templates/portal/ten_year_map.html b/portal/templates/portal/ten_year_map.html
@@ -50,16 +50,16 @@
                     <div class="carousel-inner" role="listbox">
                         <div class="item active" id="hatfield-carousel">
                             <div>
-                                <div class="col-sm-6">
+                                <div class="col-sm-6 carousel-column--images">
                                     <div class="row carousel-image-wrapper">
-                                        <img src="{% static 'portal/img/howe_dell_1.png' %}" class="ten-year-carousel-image ten-year-carousel-image--column" alt="Code for Life volunteers outside Howe Dell Primary School">
+                                        <img src="{% static 'portal/img/howe_dell_1.png' %}" class="carousel-image carousel-image--column" alt="Code for Life volunteers outside Howe Dell Primary School">
                                     </div>
                                     <div class="row carousel-image-wrapper">
-                                        <img src="{% static 'portal/img/howe_dell_2.png' %}" class="ten-year-carousel-image ten-year-carousel-image--column" alt="CfL volunteers outside Howe Dell Primary School showing off their Code for Life T-shirts">
+                                        <img src="{% static 'portal/img/howe_dell_2.png' %}" class="carousel-image carousel-image--column" alt="CfL volunteers outside Howe Dell Primary School showing off their Code for Life T-shirts">
                                     </div>
                                 </div>
                                 <div class="col-sm-6 carousel-text">
-                                    <h4>
+                                    <h4 class="carousel-header">
                                         <b>Howe Dell Primary School, Hatfield, UK</b>
                                     </h4>
                                     <h5>
@@ -76,13 +76,13 @@ <h5>
                                         The children's designs were exceptional, making the judging process challenging, but ultimately a few standout innovations were 
                                         selected.
                                     </p>
-                                    <div class="ten-year-button">
+                                    <div class="carousel-button">
                                         <a href="https://www.linkedin.com/company/code-for-life-uk/posts/?feedView=all" target="_blank" class="button button--primary button-right-arrow">Learn more</a>
                                     </div>
                                 </div>
                             </div>
                             <div>
-                                <img src="{% static 'portal/img/howe_dell_3.png' %}" class="ten-year-carousel-image"" alt="The three winners of Howe Dell Primary School's robot design challenge">
+                                <img src="{% static 'portal/img/howe_dell_3.png' %}" class="carousel-image"" alt="The three winners of Howe Dell Primary School's robot design challenge">
                             </div>
                         </div>
                         <div class="item" id="barcelona-carousel">