Merge pull request #70 from econ-ark/update-home-columns

Homepage columns now HARK, REMARK, Other + new content

Author: llorracc

_layouts/home.html

@@ -18,43 +18,45 @@
 
 <h1 class="visuallyhidden">Econ-ARK</h1>
 
-<div class="ark-parts py-5">
+<div class="ark-parts px-5 py-5">
   <div class="container">
     <div class="row gx-5">
       <div class="part col-md-4 px-5 my-5">
-        <h2 class="title">HARK</h2>
+        <div class="title">
+          <h2 class="heading">HARK</h2>
+          <p class="resource">Toolkit</p>
+        </div>
         <p class="subtitle">Heterogeneous Agents Resources and toolKit</p>
         <div class="desc">
-          <p>HARK is a toolkit for simplifying and speeding up the development of solutions and estimation methods for
-            new
-            models.</p>
-          <p>Econ-ARK has developed an open source repository of highly modular, easily interoperable code for solving,
-            simulating, and estimating dynamic economic models with heterogeneous agents.</p>
+          <p>Econ-ARK developed a highly modular & interoperable open source toolkit for simulating, estimating and solving dynamic economic models with heterogeneous agents</p>
         </div>
         <p class="link"><a href="https://docs.econ-ark.org/overview/introduction.html">Introduction to HARK</a></p>
       </div>
+
       <div class="part col-md-4 px-5 my-5">
-        <h2 class="title">DemARK</h2>
-        <p class="subtitle">Demonstrations of tools, AgentTypes, and ModelClasses</p>
+        <div class="title">
+          <h2 class="heading">REMARK</h2>
+          <p class="resource">Materials</p>
+        </div>
+        <p class="subtitle">R[eplications/eproductions] and Explorations Made using ARK</p>
         <div class="desc">
-          <p>DemARK contains a collection of code demonstrations to give you a feeling for how the code works and what
-            you
-            can do with it.</p>
-          <p>These demonstrations form a repository produced by Econ-ARK containing a series of Jupyter Notebooks for
-            demonstrating how to use material in the Econ-ARK.</p>
+            <p>A <a href="https://github.com/econ-ark/REMARK">REMARK</a> is an executable archive that reproduces its own results on any computer using <a href="https://en.wikipedia.org/wiki/Docker_software">docker</a></p>
         </div>
-        <p class="link"><a href="https://github.com/econ-ark/DemARK">DemARK Repository</a></p>
+        <p class="link"><a href="/materials/">REMARKs</a></p>
       </div>
+
       <div class="part col-md-4 px-5 my-5">
-        <h2 class="title">REMARK</h2>
-        <p class="subtitle">R[eplications/eproductions] and Explorations Made using ARK</p>
+        <div class="title">
+          <h2 class="heading">OTHER</h2>
+          <p class="resource">Teaching</p>
+        </div>
+        <p class="subtitle">Demonstrations of tools, AgentTypes, and ModelClasses</p>
         <div class="desc">
-          <p>REMARKs are self-contained and complete projects that can be executed by anyone.</p>
-          <p>They include Explorations using HARK to demonstrate modelling ideas, Replications of important results of
-            published papers written using other tools, and Reproductions of all the code within a paper. </p>
+          <p>View the complete collection of our tools, materials, demonstrations, tutorials, blogs, assignments, documentation, and teaching</p>
         </div>
-        <p class="link"><a href="/materials/">Materials Library</a></p>
+        <p class="link"><a href="https://github.com/econ-ark/DemARK">DemARK</a></p>
       </div>
+
     </div>
   </div>
 </div>

assets/sass/_main.scss

@@ -228,11 +228,24 @@ a.button {
       color: $ark-lightblue;
 
       .title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
         padding: 0 0 0.25rem 0;
         border-bottom-width: 2px;
         border-bottom-style: solid;
         border-color: inherit;
         margin: 0;
+        .heading {
+          margin: 0;
+          padding: 0;
+          line-height: 1
+        }
+        .resource {
+          margin: 0;
+          padding: 0;
+        }
       }
 
       .subtitle {
@@ -244,7 +257,7 @@ a.button {
       }
 
       .desc {
-        padding: 1.5rem 0;
+        padding: 0 0;
         color: #898989;
       }