add new row for scala center activities

scala · Aug 22, 2023 · ede8d26 · ede8d26
1 parent bcce351
commit ede8d26
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
@@ -34,7 +34,7 @@
             </div>
         </div>
       </div>
-      <div class="container inner-splash" style="margin-top: 135px;">
+      <div class="container inner-splash main-logo-wrap">
         <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">
             <img src="/resources/img/scala-center-main-logo@2x.png" width="100%" alt="ScalaCenter. For Open Source. For Education" >
@@ -47,7 +47,7 @@
           <div class="col-md-12 text-center">
             <div class="objectives">
               An independent not-for-profit center established at EPFL.<br/>
-              <b>Focused on:</b>
+              <b>Focused on</b>
             </div>
           </div>
         </div>
@@ -57,6 +57,19 @@
             <a class="btn btn-default btn" data-toggle="popover" data-placement="bottom" data-container="body" href="#education">Education</a>
           </div>
         </div>
+        <div class="row">
+          <div class="col-md-12 text-center">
+            <div class="objectives short">
+              <b>Activities</b>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12 text-center home-popovers">
+            <a class="btn btn-default btn" href="/records/first-five-years/">5 year impact report</a>
+            <a class="btn btn-default btn" href="https://www.scala-lang.org/blog/2023/01/31/scala-center-2023-roadmap.html">2023 Roadmap</a>
+          </div>
+        </div>
       </div>
       <div class="vertical-spacer-bottom gradient"></div>
     </div>

diff --git a/resources/css/main.scss b/resources/css/main.scss
@@ -57,6 +57,18 @@ $fa-font-path: "./../../bower_components/font-awesome/fonts";
   overflow-x: hidden;
 }
 
+.main-logo-wrap {
+  margin-top: 135px;
+
+  @media (max-width: 991px) {
+    margin-top: 42px;
+  }
+
+  @media (max-width: 767px) {
+    margin-top: 154px;
+  }
+}
+
 /* HEADER */
 .header-logo {
   .swirl {
@@ -121,9 +133,6 @@ $fa-font-path: "./../../bower_components/font-awesome/fonts";
   .popover .arrow {
     left: 50% !important;
   }
-  body.home .splash {
-    height: 815px !important;
-  }
 }
 
 /* HOME */
@@ -180,7 +189,13 @@ body.home {
   }
 
   .splash {
-    height: 650px;
+    height: 720px;
+    @media (max-width: 768px) {
+      height: 770px;
+    }
+    @media (max-width: 520px) {
+      height: 900px;
+    }
     background-color: #15414c;
     position: relative;
     font-family: "Lato", sans-serif;
@@ -255,6 +270,9 @@ body.home {
       line-height: 1.42;
       margin-bottom: 40px;
       font-weight: 400;
+      &.short {
+        height: 14px;
+      }
       b {
         margin-top: 15px;
         display: block;