consolidate cardlist css

documentation and try cards use the same layout

try cards make slight modifications:

- add images
- center text
- larger headings

Author: minrk

_includes/head.html

@@ -14,8 +14,7 @@
     <!-- Bootstrap Core CSS -->
     <link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/logo-nav.css" | prepend: site.baseurl }}">
-    <link rel="stylesheet" href="{{ "/css/documentation.css" | prepend: site.baseurl }}">
-    <link rel="stylesheet" href="{{ "/css/try.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/css/cardlist.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/github-buttons.css" | prepend: site.baseurl }}">
     <link rel="icon" type="image/png" href="favicon.ico" />
     <link href="{{site.baseurl}}/assets/apple-touch-icon.png" rel="apple-touch-icon" />

_layouts/documentation.html

@@ -12,14 +12,14 @@ <h2>Documentation</h2>
 <section>
     <div class="top-section-border">
         <div class="container">
-            <div class="row docs-cards">
+            <div class="row cardlist">
               {%- for card in site.data.documentation -%}
-                <div class="col-lg-4 col-md-6 col-sm-6 docs-card-col">
-                  <div class="docs-card">
-                    <div class="docs-card-heading">
+                <div class="col-lg-4 col-md-6 col-sm-6 cardlist-col">
+                  <div class="cardlist-card doc-card">
+                    <div class="card-heading">
                       <h4>{{card[0]}}</h4>
                     </div>
-                    <div class="docs-card-body">
+                    <div class="card-body">
                       <ul>
                         {%- for item in card[1] %}
                         <li><a href="{{item[1]}}">{{item[0]}}</a></li>

_layouts/try.html

@@ -23,18 +23,18 @@ <h2>Try Jupyter</h2>
 <section>
   <div class="top-section-border">
     <div class="container">
-      <div class="row try-cards">
+      <div class="row cardlist">
         {%- for item in site.data.try -%}
         <a href="{{ item['url'] }}" class="try-link">
-          <div class="col-lg-4 col-md-6 col-sm-6">
-            <div class="try-card">
-              <div class="try-card-header">
-                <h3 class="text-center">{{ item['title'] }}</h3>
+          <div class="col-lg-4 col-md-6 col-sm-6 cardlist-col">
+            <div class="cardlist-card try-card text-center">
+              <div class="card-heading">
+                <h3>{{ item['title'] }}</h3>
+              </div>
+              <div class="card-body">
+                <img class="try-logo" src="{{ site.baseurl }}/assets/try/{{ item['logo'] }}"/>
+                <p>{{ item['description'] }}</p>
               </div>
-              <img src="{{ site.baseurl }}/assets/try/{{ item['logo'] }}"/>
-              <p>
-                {{ item['description'] }}
-              </p>
             </div>
           </div>
         </a>

css/cardlist.css

@@ -0,0 +1,80 @@
+/* cardlist used by documentation and try pages */
+
+.cardlist {
+  margin-bottom: 20px;
+}
+
+.cardlist-col {
+  padding: 16px;
+}
+
+.cardlist-card {
+  height: 240px;
+  background: white;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .24);
+  border-radius: 2px;
+}
+
+.card-heading {
+  padding: 16px;
+  /* color is on purpose not Jupyter Orange */
+  background: #1976D2;
+  color: white;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 14px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
+.card-body {
+  padding: 16px;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  flex: 0 1 auto;
+}
+
+.card-body ul {
+  padding-left: 0px;
+}
+
+.card-body li {
+  list-style: none;
+  padding: 4px 0px 4px 0px;
+  font-size: 14px;
+}
+
+
+/* extra style for try cards */
+
+/* try cards are links: eliminate text decoration and
+   highlight on hover by extending shadow
+*/
+
+a.try-link {
+color: inherit;
+  text-decoration: none;
+}
+
+a.try-link:visited {
+  color: inherit;
+}
+
+.try-card:hover {
+  box-shadow: 0px 6px 6px #aaa;
+}
+
+/* try cards need to be a little taller */
+.cardlist-card.try-card {
+  height: 300px;
+}
+
+/* shrink-to-fit logos */
+
+img.try-logo {
+  height: 100px;
+  width: 100%;
+  object-fit: contain;
+  margin: 12px auto;
+}
+