change projects layout

Author: gbrammer

_pages/projects.md

@@ -10,38 +10,46 @@ description: Research projects and collaborations
 {% for project in ordered_pages %}
 
 {% if project.redirect %}
+
 <div class="project">
-    <div class="thumbnail">
+    <div class="project_thumbnail">
         <a href="{{ project.redirect }}" target="_blank">
         {% if project.img %}
-        <img class="thumbnail" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
+        <img class="aligned_image" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
         {% else %}
-        <div class="thumbnail blankbox"></div>
-        {% endif %}    
+        <div class="project_thumbnail blankbox"></div>
+        {% endif %}   
+        </a>
+    </div>
+    <div class="project_text">
+        <a href="{{ project.redirect }}" target="_blank">
         <span>
-            <h1>{{ project.title }}</h1>
-            <br/>
+            <h3>{{ project.title }}</h3>
             <p>{{ project.description }}</p>
         </span>
         </a>
     </div>
 </div>
+
 {% else %}
 
 <div class="project ">
-    <div class="thumbnail">
-        <a href="{{ project.url | prepend: site.baseurl | prepend: site.url }}">
+    <div class="project_thumbnail">
+      <a href="{{ project.url | prepend: site.baseurl | prepend: site.url }}">
         {% if project.img %}
-        <img class="thumbnail" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
+        <img class="aligned_image" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
         {% else %}
         <div class="thumbnail blankbox"></div>
         {% endif %}    
+      </a>
+    </div>
+    <div class="project_text">
+      <a href="{{ project.url | prepend: site.baseurl | prepend: site.url }}">
         <span>
-            <h1>{{ project.title }}</h1>
-            <br/>
+            <h3>{{ project.title }}</h3>
             <p>{{ project.description }}</p>
         </span>
-        </a>
+      </a>
     </div>
 </div>
 

_projects/grizli.md

@@ -2,7 +2,7 @@
 layout: page
 title: Grizli
 description: Imaging and slitless spectroscopy pipeline
-img: /assets/img/sq_grizli.png
+img: /assets/img/grizli_logo.png
 order_number: 20
 redirect: http://www.github.com/gbrammer/grizli
 ---

_sass/_projects.scss

@@ -1,59 +1,62 @@
 .project {
-    box-sizing: border-box;
+    // box-sizing: border-box;
     float: left;
-    height: 240px;
-    padding: 5px;
-    vertical-align: middle;
-    width: 33.33%;
-    min-width: 225px;
+    padding: 0px;
+    position:relative;
 
-    .thumbnail {
-        overflow: hidden;
-        height: 230px;
-        width: 100%;
-        border: 1px solid $grey-color-light;
-
-        img {
-            height: 100%;
-            position: relative;
-                left: 0%;
-                top: 0%;
-            width: auto;
-        }
-
-        a {
+    display: inline-flex;
+    
+    width: 100%;
+    margin: 5px;
+    
+    border: 1px solid $grey-color-light;
+    min-height: 90px;
+      
+    .project_thumbnail {
+        float: left; 
+        width: 20%;
+        height: 100%;
+        min-width: 40px;
+        max-width: 140px;
+        
+        margin: auto 0px;
+        
+        .aligned_image {
             float: left;
-            height: 230px;
-            position: relative;
             width: 100%;
+            vertical-align: middle;
+        }
+    }
+            
+    .project_text {
+        width: 78%;
+        height: 100%;
+        min-width:150px;
+        float: left;
 
-            span {
-                display: none;
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                background: rgba(0,0,0,0.4);
-                color: $grey-color-light;
-                padding: 30px;
-                text-align: center;
-
-                h1 {
-                    font-size: 1.5rem;
-                    margin: 0;
-                }
+        margin: auto 0px;
 
-                p {
-                    color: $grey-color-light;
-                }
+        padding: 0px;
+                        
+        span {
+            vertical-align: middle;
+            color: $text-color;
+            text-align: center;
+            height: 100%;
+            
+            h3 {
+                font-size: 1.0rem;
+                font-weight: bold;
+                margin: 0;
+                padding: 0;
             }
 
-            &:hover {
-                span {
-                    display: block;
-                }
+            p {
+                color: $text-color;
+                font-size: $base-font-size;
+                margin: 0;
+                padding-left: 5px;
             }
-        }
+        }        
     }
 }

_sass/_variables.scss

@@ -55,6 +55,9 @@ $pink:              #f92080 !default;
 $light-pink:        #ffdddd !default;
 $yellow:            #efcc00 !default;
 
+// matplotlib colors
+$mpl-blue:          #1f77b4 !default;
+
 $white:             #fff !default;
 $dark-gray:         #333 !default;
 $mid-gray:          #666 !default;
@@ -70,7 +73,7 @@ $darken-2:          rgba(#000,.125) !default;
 $darken-3:          rgba(#000,.25) !default;
 $darken-4:          rgba(#000,.5) !default;
 
-$theme-color:       $purple;
+$theme-color:       $mpl-blue;
 $code-color:        $dark-gray;
 $text-color:        $mid-gray;
 $background-color:  white;