From a47bbeea43b5a3b49ffac404c744c1b6f50a7a9f Mon Sep 17 00:00:00 2001
From: Aidan Feldman <aidan.feldman@gmail.com>
Date: Mon, 16 Sep 2013 15:16:10 -0400
Subject: [PATCH] make the additinal homepage questions side-by-side

---
 css/application.css | 39 +++++++++++++++------------------------
 index.html          | 39 +++++++++++++++++++++++++++------------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/css/application.css b/css/application.css
index f73cecd..67ffa69 100644
--- a/css/application.css
+++ b/css/application.css
@@ -190,37 +190,38 @@ strong {
   top: 10px;
 }
 
-.situations {
+.triptych {
   width: 900px;
-  margin: 0 auto;
+  margin: 0 auto 15px;
 }
-.situations li {
+.triptych li {
   width: 280px;
   float: left;
   margin-left: 27px;
   text-align: center;
 }
-.situations .whatever {
+.triptych li:first-child {
   margin-left: 0;
-  margin-top: 16px;
 }
-.situations .copyleft {
-  margin-top: 3px;
-}
-.situations h3 {
-  margin: 0 auto 20px auto;
-  width: 220px;
-}
-
-.situations h3 a {
+.triptych li > a {
   text-decoration: none;
+}
+.triptych h3 {
   color: #443a33;
   font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif;
   font-size: 22px;
   font-weight: 900;
   line-height: 1.1;
+  margin: 0 auto 20px auto;
+  width: 220px;
 }
 
+.situations .whatever {
+  margin-top: 16px;
+}
+.situations .copyleft {
+  margin-top: 3px;
+}
 .situations .button {
   margin-top: 20px;
 }
@@ -236,16 +237,6 @@ strong {
   color: #5c5855;
   padding: 16px;
 }
-.see-more {
-  margin-top: 20px;
-  display: inline-block;
-  padding-left: 80px;
-  padding-right: 80px;
-  font-weight: bold;
-}
-.see-more p:last-child {
-  margin-bottom: 0.3em;
-}
 
 .license-rules {
   font-size: 13px;
diff --git a/index.html b/index.html
index d23de3a..24f6572 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,12 @@ description: A site to provide non-judgmental guidance on choosing a license for
   Which of the following best describes your situation?
   <span>}</span>
 </h2>
-<ul class="situations cf">
+<ul class="triptych situations cf">
   <li class='whatever'>
-    <a href="licenses/mit"><img height='57' src='images/three-arrows@2x.png' width='72'></a>
-    <h3><a href="licenses/mit">I want it simple and permissive.</a></h3>
+    <a href="licenses/mit">
+      <img height='57' src='images/three-arrows@2x.png' width='72'>
+      <h3>I want it simple and permissive.</h3>
+    </a>
     <p>
       The <a href="licenses/mit">MIT License</a> is a permissive license that is short and to the point. It lets people do anything they want with your code as long as they provide attribution back to you and don’t hold you liable.
     </p>
@@ -23,8 +25,10 @@ description: A site to provide non-judgmental guidance on choosing a license for
     </p>
   </li>
   <li class='patents'>
-    <a href="licenses/apache"><img height='72' src='images/lightbulb@2x.png' width='43'></a>
-    <h3><a href="licenses/apache">I’m concerned about patents.</a></h3>
+    <a href="licenses/apache">
+      <img height='72' src='images/lightbulb@2x.png' width='43'>
+      <h3>I’m concerned about patents.</h3>
+    </a>
     <p>
       The <a href="licenses/apache/">Apache License</a> is a permissive license similar to the MIT License, but also provides an express grant of patent rights from contributors to users.
     </p>
@@ -33,8 +37,10 @@ description: A site to provide non-judgmental guidance on choosing a license for
     </p>
   </li>
   <li class='copyleft'>
-    <a href="licenses/gpl-v2"><img height='69' src='images/circular@2x.png' width='72'></a>
-    <h3><a href="licenses/gpl-v2">I care about sharing improvements.</a></h3>
+    <a href="licenses/gpl-v2">
+      <img height='69' src='images/circular@2x.png' width='72'>
+      <h3>I care about sharing improvements.</h3>
+    </a>
     <p>
       The GPL (<a href="licenses/gpl-v2">V2</a> or <a href="licenses/gpl-v3">V3</a>) is a copyleft license that requires anyone who distributes your code or a derivative work to make the source available under the same terms. V3 is similar to V2, but further restricts use in hardware that forbids software alterations.
     </p>
@@ -43,8 +49,17 @@ description: A site to provide non-judgmental guidance on choosing a license for
     </p>
   </li>
 </ul>
-<div class="see-more callout">
-  <p>What if none of these work for me or I want to retain all of my rights? <a href="licenses">More licenses are available</a>.</p>
-  <p>What if I need a license for content that isn't source code? <a href="http://creativecommons.org/choose/">Check out Creative Commons</a>.</p>
-  <p>What if I don't want to choose a license? <a href="no-license">You don't have to</a>.</p>
-</div>
+<ul class="triptych see-more cf">
+  <li>
+    <h3>What if none of these work for me or I want to retain all of my rights?</h3>
+    <a href="licenses">More licenses are available.</a>
+  </li>
+  <li>
+    <h3>What if I need a license for content that isn't source code?</h3>
+    <a href="http://creativecommons.org/choose/">Check out Creative Commons.</a>
+  </li>
+  <li>
+    <h3>What if I don't want to choose a license?</h3>
+    <a href="no-license">You don't have to.</a>
+  </li>
+</ul>