+
+
+
+
+
+
-
-
+
diff --git a/site/static/layouts/pricing/styles.css b/site/static/layouts/pricing/styles.css
index 1523102..8d00b7b 100644
--- a/site/static/layouts/pricing/styles.css
+++ b/site/static/layouts/pricing/styles.css
@@ -3,29 +3,29 @@
* Most of these are inherited from Base, but I want to change a few.
*/
body {
- color: #526066;
+ color: #526066;
}
-h2, h3 {
- letter-spacing: 0.25em;
- text-transform: uppercase;
- font-weight: 600;
+h2,
+h3 {
+ letter-spacing: 0.25em;
+ text-transform: uppercase;
+ font-weight: 600;
}
p {
- line-height: 1.6em;
+ line-height: 1.6em;
}
-
/*
* -- Layout Styles --
*/
.l-content {
- margin: 0 auto;
+ margin: 0 auto;
}
.l-box {
- padding: 0.5em 2em;
+ padding: 0.5em 2em;
}
/*
@@ -33,14 +33,13 @@ p {
* Make the menu have a very faint box-shadow.
*/
.pure-menu {
- box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.pure-menu-link {
- padding: .5em .7em;
+ padding: 0.5em 0.7em;
}
-
/*
* -- BANNER --
* The top banner with the headings. By using a combination
@@ -49,41 +48,41 @@ p {
*/
.banner {
- background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;
- text-align: center;
- background-size: cover;
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');
+ background: transparent
+ url("https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg")
+ 0 0 no-repeat fixed;
+ text-align: center;
+ background-size: cover;
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');
- height: 200px;
- width: 100%;
- margin-bottom: 3em;
- display: table;
+ height: 200px;
+ width: 100%;
+ margin-bottom: 3em;
+ display: table;
}
- .banner-head {
- display: table-cell;
- vertical-align: middle;
- margin-bottom: 0;
- font-size: 2em;
- color: white;
- font-weight: 500;
- text-shadow: 0 1px 1px black;
- }
-
-
+.banner-head {
+ display: table-cell;
+ vertical-align: middle;
+ margin-bottom: 0;
+ font-size: 2em;
+ color: white;
+ font-weight: 500;
+ text-shadow: 0 1px 1px black;
+}
/*
* -- PRICING TABLE WRAPPER --
* This element wraps up all the pricing table elements
*/
- .pricing-tables,
- .information {
- max-width: 980px;
- margin: 0 auto;
- }
+.pricing-tables,
+.information {
+ max-width: 980px;
+ margin: 0 auto;
+}
.pricing-tables {
- margin-bottom: 3.125em;
- text-align: center;
+ margin-bottom: 3.125em;
+ text-align: center;
}
/*
@@ -91,9 +90,9 @@ p {
* Every pricing table has the .pricing-table class
*/
.pricing-table {
- border: 1px solid #ddd;
- margin: 0 0.5em 2em;
- padding: 0 0 3em;
+ border: 1px solid #ddd;
+ margin: 0 0.5em 2em;
+ padding: 0 0 3em;
}
/*
@@ -101,11 +100,11 @@ p {
* Choose a different color based on the type of pricing table.
*/
.pricing-table-free .pricing-table-header {
- background: #519251;
+ background: #519251;
}
.pricing-table-biz .pricing-table-header {
- background: #2c4985;
+ background: #2c4985;
}
/*
@@ -113,107 +112,97 @@ p {
* By default, a header is black/white, and has some styles for its
+
-
-
+
+
+
-
-
- 
+
-
-
+ Photos from around the world
-A collection of beautiful photos gathered from Unsplash.com.
-
+
Photos from around the world
++ A collection of beautiful photos gathered from Unsplash.com. +
+
- 
- 
+ 
- 
+ 
- 
+ 
- 
- 
+ 
- 
+
-
-
Submit a Photo
+
+
+
+ Submit a Photo
- -
-
-
-
Creating a Photo Gallery Layout
+
+
+ Creating a Photo Gallery Layout
-- This page shows how to make a photo gallery using Pure Grids. Using Pure, we can create interesting layouts such as this photo gallery. This layout is fully responsive. We've added a bit of custom media queries on top of the responsive grid provided by Pure. -
++ This page shows how to make a photo gallery using + Pure Grids. Using Pure, we can create + interesting layouts such as this photo gallery. This layout is + fully responsive. We've added a bit of custom media queries on top + of the responsive grid provided by Pure. +
-
- We've also taken advantage of Pure Forms and Pure Menus. This example uses a form with the pure-form class name to create an inline form. We use Pure Buttons for the button styling.
-
+ We've also taken advantage of Pure Forms and
+ Pure Menus. This example uses a form with
+ the pure-form class name to create an inline form. We
+ use Pure Buttons for the button styling.
+