very light styling on brochure page

2 files changed, 77 insertions, 46 deletions

diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js
index 2fdc2c3..97ecde6 100644
--- a/server/lib/views/staff.js
+++ b/server/lib/views/staff.js
@@ -128,6 +128,7 @@ var staff = module.exports = {
     ensurePlans: function(req, res, next){
       Plan.find(function (err, plans) {
         res.locals.plans = (plans || []).map(staff.helpers.plan)
+        res.locals.plans.sort(function(a,b){ return a.monthly_price })
         next()
       })
     },
diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs
index 4ce558a..75e7b60 100644
--- a/views/about/brochure.ejs
+++ b/views/about/brochure.ejs
@@ -13,58 +13,54 @@
 	<div class="projectList about aboutintro">
 	  <div class="inner">
       Want to get more out of VValls?  Consider becoming a subscription user.
+      <br><br>
     </div>
-  </div>
   
-  <div>
-    <h3>[[- plans.free.name ]]</h3>
-    <ul>
-      <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
-    </ul>
-  </div>
+    <div class="about_plan planbox">
+      <h3>[[- plans.free.name ]]</h3>
+      <ul>
+        <li> [[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan
+      </ul>
+    </div>
 
-  <div>
-    <h3>[[- plans.premium.name ]]</h3>
-    <ul>
-      <li> $[[- plans.premium.monthly_price ]]/mo or $[[- plans.premium.yearly_price ]]/year
-      <li> [[- plans.premium.stock_project_limit ]] exhibitions included with pre-designed template floor plans
-      <li> Each new basic floor plan costs $[[- plans.premium.basic_layout_monthly_price ]]/mo
-           or $[[- plans.premium.basic_layout_yearly_price ]]/year, minimum 3 months
-      <li> Each new basic floor plan can have up to [[- plans.premium.basic_project_limit ]] exhibitions
-      <li> VValls logo appears when embedding an exhibition on a web page
-    </ul>
-  </div>
+    <div class="about_plan planbox">
+      <h3>[[- plans.basic.name ]]</h3>
+      <ul>
+        <li> $[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year
+        <li> [[- plans.basic.stock_project_limit ]] exhibitions included with pre-designed template floor plans
+        <li> Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo
+             or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new basic floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions
+        <li> VValls logo appears when embedding an exhibition on a web page
+      </ul>
+    </div>
 
-<div>
-    <h3>[[- plans.pro.name ]]</h3>
-    <ul>
-      <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
-      <li> Comes with [[- plans.premium.pro_layout_limit ]] pro floor plan and [[- plans.premium.pro_project_limit ]] exhibitions
-      <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
-           or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
-      <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
-      <li> Includes planning for 3D objects in the room
-      <li> No VValls logo on embed
-    </ul>
-  </div>
+    <div class="about_plan planbox">
+      <h3>[[- plans.pro.name ]]</h3>
+      <ul>
+        <li> $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year
+        <li> Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo
+             or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months
+        <li> Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions
+        <li> Includes planning for 3D objects in the room
+        <li> No VValls logo on embed
+      </ul>
+    </div>
   
-  <div>
-    Buying any extra floor plan unlocks collaboration. Invite an artist or curator to work on the exhibition with you.
-  </div>
-
-  <div>
-    Basic Floor plan: Rectangle-based design of any dimension.
-  </div>
-
-  <div>
-    Pro Floor plan: Trace an arbitrary floor plan from image.
-  </div>
-
+    <div class="about_custom miscbox">
+      <ul>
+        <li> Buying any extra floor plan unlocks collaboration. Invite an artist or curator to work on the exhibition with you.
+        <li> Basic Floor plan: Rectangle-based design of any dimension.
+        <li> Pro Floor plan: Trace an arbitrary floor plan from image.
+      </ul>
+    </div>
 
-  <div>
-    <h3>Custom</h3>
-    We offer many types of customizations and white-label options for business and educational uses.
-    <a>Contact us</a> for more information
+    <div class="planbox about_custom">
+      <h3>Custom</h3>
+      <li> We offer customized white-label options for business and educational uses.
+      <li> <a>Contact us</a> for more information.
+    </div>
   </div>
 
   
@@ -77,3 +73,37 @@
 </body>
 [[ include ../partials/scripts ]]
 </html>
+<style>
+.about_plan {
+  width: 28vw;
+  margin: 2vw;
+  float: left;
+}
+.about_custom {
+  width: 80vw;
+  margin: 2vw 10vw;
+}
+.planbox {
+  padding: 2vw;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 25px;
+  font-size: 17px;
+  line-height: 25px;
+  text-align: center;
+}
+.planbox h3 {
+  text-align: center;
+  margin-bottom: 10px;
+}
+.planbox li {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+.miscbox {
+  font-size: 21px;
+}
+.miscbox li {
+  list-style-type: none;
+}
+</style>
\ No newline at end of file