minor tweaks for service providers

foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html

@@ -8,18 +8,18 @@
 <p><span class=label>{{ membership_type }} Member<span></p>
 {% endif %}
 <section>
-	<div class="media" style="margin: 45px 0px; ">
+	<div class="media">
-		<div class="media-left" style='min-width: 80px;'>
+		{% if image %}
+		<div class="media-left">
 			<a href="#">
 				<img class="media-object"
-					src="{{ image }}"
+					src="{{ image }}">
-					style="max-width: 80px; ">
 			</a>
 		</div>
+		{% endif %}
 		<div class="media-body">
 			{{ introduction }}
-			<table class='table table-bordered small'
+			<table class='table table-bordered small'>
-				style='max-width: 400px; margin-bottom: 0px; margin-top: 20px'>
 				<tr>
 					<td style='width: 38.2%'>Country</td>
 					<td>{{ country }}</td>

foundation/public/css/erpnext-org-theme.css

@@ -1,75 +1,5 @@
 @import "reset.css";
-.indicator,
+@import "indicator.css";
-.indicator-right {
-  background: none;
-  font-size: 12px;
-  vertical-align: middle;
-  font-weight: bold;
-  color: #6c7680;
-}
-.indicator::before,
-.indicator-right::after {
-  content: '';
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 8px;
-}
-.indicator::before {
-  margin: 0 4px 0 0px;
-}
-.indicator-right::after {
-  margin: 0 0 0 4px;
-}
-.indicator.grey::before,
-.indicator-right.grey::after {
-  background: #F0F4F7;
-}
-.indicator.blue::before,
-.indicator-right.blue::after {
-  background: #5e64ff;
-}
-.indicator.red::before,
-.indicator-right.red::after {
-  background: #ff5858;
-}
-.indicator.green::before,
-.indicator-right.green::after {
-  background: #98d85b;
-}
-.indicator.orange::before,
-.indicator-right.orange::after {
-  background: #ffa00a;
-}
-.indicator.purple::before,
-.indicator-right.purple::after {
-  background: #743ee2;
-}
-.indicator.darkgrey::before,
-.indicator-right.darkgrey::after {
-  background: #b8c2cc;
-}
-.indicator.black::before,
-.indicator-right.black::after {
-  background: #36414C;
-}
-.indicator.yellow::before,
-.indicator-right.yellow::after {
-  background: #FEEF72;
-}
-.indicator.light-blue::before,
-.indicator-right.light-blue::after {
-  background: #7CD6FD;
-}
-.indicator.lightblue::before,
-.indicator-right.lightblue::after {
-  background: #7CD6FD;
-}
-.modal-header .indicator {
-  float: left;
-  margin-top: 7.5px;
-  margin-right: 3px;
-}
 a {
   color: #7575ff;
   text-decoration: none;
@@ -79,9 +9,26 @@ a:hover {
   color: #2E3338;
   text-decoration: underline;
 }
+.header1 {
+  font-size: 2.5rem;
+  line-height: 1.025;
+}
+.header2 {
+  font-size: 1.5rem;
+  line-height: 1.025;
+}
+.header3 {
+  font-size: 1rem;
+  line-height: 1.025;
+}
+.navbar {
+  padding: 1rem;
+  background-color: #fff;
+}
+@media screen and (min-width: 767px) {
   .navbar {
     padding: 1rem 2.5rem;
-  background-color: #fff;
+  }
 }
 .navbar-header {
   display: flex;
@@ -121,16 +68,27 @@ a:hover {
   text-decoration: none;
 }
 .container {
-  max-width: 1200px;
+  max-width: 100%;
   margin: 0 auto;
 }
+@media screen and (min-width: 1199px) {
+  .container {
+    max-width: 1199px;
+  }
+}
 .feature,
 .footer {
-  padding: 8rem 2.5rem;
+  padding: 4rem 1rem;
   border-top: 1px solid #EBEFF2;
 }
+@media screen and (min-width: 767px) {
+  .feature,
+  .footer {
+    padding: 8rem 2.5rem;
+  }
+}
 .page {
-  padding: 0 2.5rem;
+  padding: 0 1rem;
   border-top: 1px solid #EBEFF2;
 }
 .hero-illustration {
@@ -141,14 +99,6 @@ a:hover {
 .about-img {
   margin-bottom: 2.5rem;
 }
-.title {
-  font-size: 2.5rem;
-  line-height: 1.025;
-  margin-top: 0;
-}
-.subtitle {
-  margin-top: 0;
-}
 .list-items {
   text-align: center;
   border-radius: .5rem;
@@ -159,18 +109,57 @@ a:hover {
 .list-items:hover {
   box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.05);
 }
-.list.grid-of-four {
+.list.grid-of-four,
+.grid-of-three {
   grid-gap: 2.5rem;
 }
 .grid-of-four {
   display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+@media screen and (min-width: 500px) {
+  .grid-of-four {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 767px) {
+  .grid-of-four {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media screen and (min-width: 991px) {
+  .grid-of-four {
     grid-template-columns: repeat(4, 1fr);
   }
+}
+.grid-of-three {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+@media screen and (min-width: 500px) {
+  .grid-of-three {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 767px) {
+  .grid-of-three {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
 .list {
   list-style: none;
   padding-left: 0;
 }
 /*utilities*/
+.top-zero {
+  margin-top: 0;
+}
+.top-spacer {
+  margin-top: 1rem;
+}
+.bottom-spacer-4 {
+  margin-bottom: 4rem;
+}
 .gray-bg {
   background-color: #fafbfc;
 }
@@ -183,7 +172,6 @@ a:hover {
 .right-aligned {
   text-align: right;
 }
-.centered,
 .text-center {
   text-align: center;
 }
@@ -196,9 +184,66 @@ a:hover {
 .text-white {
   color: #fff;
 }
+.centered {
+  margin: 0 auto;
+}
+.bold {
+  font-weight: bold;
+}
+.list-unstyled {
+  padding: 0;
+  margin: 0;
+}
+.list-unstyled li {
+  list-style: none;
+}
+.list-circle {
+  list-style: circle;
+}
+.two-column,
+.three-column,
+.four-column {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+@media screen and (min-width: 767px) {
+  .two-column,
+  .three-column,
+  .four-column {
+    flex-direction: row;
+  }
+}
+.columns {
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 767px) {
+  .columns {
+    margin: 0;
+  }
+}
+.countries {
+  max-width: 100%;
+}
+@media screen and (min-width: 500px) {
+  .countries {
+    max-width: 50%;
+    min-width: 50%;
+  }
+}
+@media screen and (min-width: 767px) {
+  .countries {
+    max-width: 25%;
+    min-width: 25%;
+  }
+}
+.flex-wrap {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
 .intro-copy {
   font-size: 1.5rem;
-  max-width: 600px;
+  max-width: 599.5px;
   margin: 0 auto 1.5rem auto;
   line-height: 1.5em;
 }
@@ -211,7 +256,7 @@ a:hover {
   text-decoration: none;
 }
 .button {
-  padding: .75em 1.5em .5em;
+  padding: 1rem 1.5rem;
   border-radius: .25em;
   cursor: pointer;
   transition: all 0.3s ease-out;
@@ -257,27 +302,6 @@ a:hover {
 .active {
   color: #2E3338;
 }
-.three-column,
-.two-column {
-  display: flex;
-  justify-content: space-between;
-}
-.three-column .columns {
-  max-width: 33.33%;
-}
-.two-column {
-  max-width: 50%;
-}
-.list-unstyled {
-  padding: 0;
-  margin: 0;
-}
-.list-unstyled li {
-  list-style: none;
-}
-.list-circle {
-  list-style: circle;
-}
 .bulleted-list {
   margin: 0;
   padding-left: 1em;
@@ -285,14 +309,6 @@ a:hover {
 .bulleted-list li {
   padding-bottom: 1em;
 }
-.footer-row {
-  display: flex;
-  text-align: left;
-  justify-content: space-between;
-}
-.footer-end .footer-row {
-  align-items: center;
-}
 .footer-list {
   padding-left: 0;
   padding: ;
@@ -302,14 +318,18 @@ a:hover {
 .footer-list li {
   margin-bottom: 1em;
 }
-.top-spacer {
-  margin-top: 3rem;
-}
 .page-container {
   display: flex;
-  max-width: 1200px;
+  max-width: 1199px;
   margin: 0 auto;
 }
+.page-content {
+  width: 100%;
+  padding: 4rem 0;
+}
+.page-content h1:first-child {
+  margin-top: 0;
+}
 .breadcrumb {
   padding: 0;
   margin-bottom: 1.5rem;
@@ -341,13 +361,6 @@ a:hover {
   min-width: 200px;
   border-right: 1px solid #EBEFF2;
 }
-.page-content {
-  width: 100%;
-  padding: 4rem 0;
-}
-.page-content h1:first-child {
-  margin-top: 0;
-}
 .blog-page {
   padding: 4rem 0;
   max-width: 700px;
@@ -381,12 +394,6 @@ hr {
 .fade.in {
   opacity: 1;
 }
-.with-border a {
-  text-decoration: none;
-}
-.with-border a:hover {
-  text-decoration: none;
-}
 .clickable a {
   color: #36414C;
 }
@@ -616,9 +623,11 @@ code {
   border-color: #5e5ec9;
   text-decoration: none;
 }
-.screenshot {
+.screenshot,
+.img-responsive {
   max-width: 800px;
   margin: auto;
+  width: auto;
 }
 img.blog-cover-image,
 .blog-text img,
@@ -680,14 +689,20 @@ img.blog-cover-image,
 }
 .blogger-name {
   margin-top: .25em;
+  font-weight: normal;
+  font-size: 1rem;
+}
+.blogger-name a {
+  color: #36414C;
 }
 .blog-list-item .avatar {
   margin-right: 1em;
 }
 .avatar {
   display: inline-block;
-  width: 50px;
+  width: 3rem;
-  height: 50px;
+  height: 3rem;
+  margin-right: 1rem;
 }
 .avatar img {
   max-width: 100%;
@@ -707,31 +722,52 @@ img.blog-cover-image,
 }
 .media {
   display: flex;
-  padding: 1.5rem;
   background: #fafbfc;
   margin-bottom: 1.5rem;
   border-radius: .25em;
-  border: 1px solid lightgray;
+  padding: 1.5rem;
-  width: 75%;
 }
 .media-left {
   width: 10%;
-  margin-right: 1.5rem;
+  margin-right: 2.5rem;
 }
 .media-heading {
   margin-top: 0;
 }
 .with-border {
-  border: 1px solid #d1d8dd;
   border-radius: 0.25em;
   padding: 1rem;
   margin-bottom: 2rem;
+  border: 1px solid #d1d8dd;
+}
+.with-border a {
+  text-decoration: none;
+}
+.with-border a:hover {
+  text-decoration: none;
 }
 .with-border:hover {
-  border-color: #6c7680;
   background-color: #fafbfc;
 }
 /* individual elements */
+.gold-member {
+  display: flex;
+  padding: 2.5rem 0;
+  transition: background-color 0.3s ease-out;
+  border-bottom: 1px solid #d1d8dd;
+}
+.gold-member:hover {
+  background-color: #fafbfc;
+}
+.silver-member {
+  padding: 1.5rem;
+  border: 1px solid #d1d8dd;
+  border-radius: .25em;
+  transition: background-color 0.3s ease-out;
+}
+.silver-member:hover {
+  background-color: #fafbfc;
+}
 .domain-links {
   font-size: 1.5rem;
   display: block;
@@ -740,6 +776,9 @@ img.blog-cover-image,
 .domain-links span {
   display: block;
 }
+.thumb-small {
+  width: 100px;
+}
 .domain-image {
   width: 125px;
   padding-bottom: 1.5rem;

foundation/public/css/reset.css

@@ -22,8 +22,14 @@ html {
     -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: transparent;
     line-height: 1.5;
+	font-size: 14px;
 }
+@media screen and (min-width: 767px){
+	html{
+	font-size: 16px;
 
+	}
+}
 @-ms-viewport {
     width: device-width;
 }
@@ -34,7 +40,6 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
 
 body {
     margin: 0;
-    font-size: 1em;
     font-weight: 400;
     text-align: left;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans",  Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

foundation/public/less/erpnext-org-theme.less

@@ -1,6 +1,6 @@
-@import (css) "reset.css";
 @import "variables.less";
-@import "indicator.less";
+@import (css) "reset.css";
+@import (css) "indicator.css";
 
 a {
     color: @brand-primary;
@@ -8,12 +8,31 @@ a {
     transition: @transition-color;
     &:hover{
     color: @text-dark;
-    text-decoration:underline
+    text-decoration: underline;
     }
 }
+
+.header1 {
+	font-size: 2.5rem;
+	line-height: 1.025;
+}
+
+.header2 {
+	font-size: 1.5rem;
+	line-height: 1.025;
+}
+
+.header3 {
+	font-size: 1rem;
+	line-height: 1.025;
+}
+
 .navbar {
-    padding: 1rem 2.5rem;
+	padding: 1rem;
 	background-color:#fff;
+	@media screen and (min-width: @screen-xs) {
+		padding: 1rem 2.5rem;
+	}
 }
 .navbar-header {
     display: flex;
@@ -58,16 +77,22 @@ a {
 }
 
 .container {
-    max-width: @screen-max;
+    max-width: 100%;
     margin: 0 auto;
+	@media screen and (min-width: @screen-md){
+		max-width: @screen-md;
+   }
 }
 
 .feature, .footer {
-    padding: 8rem 2.5rem;
+	padding: 4rem 1rem;
     border-top: 1px solid @light-border-color;
+	@media screen and (min-width: @screen-xs){
+    padding: 8rem 2.5rem;
+	}
 }
 .page{
-    padding: 0 2.5rem;
+    padding: 0 1rem;
     border-top: 1px solid @light-border-color;
 }
 
@@ -81,16 +106,6 @@ a {
 
 }
 
-.title{
-    font-size: 2.5rem;
-    line-height: 1.025;
-    margin-top: 0;
-}
-
-.subtitle {
-    margin-top: 0;
-}
-
 .list-items {
     text-align: center;
     border-radius: .5rem;
@@ -102,20 +117,56 @@ a {
     }
 }
 
-.list.grid-of-four{
+.list.grid-of-four, .grid-of-three {
     grid-gap: 2.5rem;
 }
 
 .grid-of-four {
     display: grid;
+    grid-template-columns: repeat(1, 1fr);
+	@media screen and (min-width: @screen-palm) {
+	grid-template-columns: repeat(2, 1fr);
+	}
+    @media screen and (min-width: @screen-xs) {
+	grid-template-columns: repeat(3, 1fr);
+	}
+	@media screen and (min-width: @screen-sm) {
 	grid-template-columns: repeat(4, 1fr);
 	}
+}
+
+
+
+.grid-of-three{
+	display: grid;
+    grid-template-columns: repeat(1, 1fr);
+	@media screen and (min-width: @screen-palm) {
+	grid-template-columns: repeat(2, 1fr);
+	}
+    @media screen and (min-width: @screen-xs) {
+	grid-template-columns: repeat(3, 1fr);
+	}
+
+}
 
 .list {
     list-style: none;
     padding-left: 0;
 }
+
+@spacer-1: 0.5rem;
+@spacer-2: @spacer-1 * 2;
+
 /*utilities*/
+.top-zero {
+    margin-top: 0;
+}
+.top-spacer {
+    margin-top: @spacer-2;
+}
+.bottom-spacer-4{
+	margin-bottom: 4rem;
+}
 .gray-bg {
     background-color: @light-bg;
 }
@@ -131,7 +182,7 @@ a {
     text-align: right;
 }
 
-.centered, .text-center{
+.text-center{
     text-align: center;
 }
 
@@ -147,9 +198,65 @@ a {
     color:#fff;
 }
 
+.centered{
+	margin: 0 auto;
+}
+
+.bold{
+	font-weight: bold;
+}
+
+.list-unstyled {
+    padding: 0;
+    margin: 0;
+
+    li {
+        list-style: none;
+    }
+
+}
+
+.list-circle {
+    list-style: circle;
+}
+
+
+.two-column, .three-column, .four-column {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+	@media screen and (min-width: @screen-xs) {
+		 flex-direction: row;
+   }
+
+}
+
+.columns {
+	margin-bottom: 1rem;
+	@media screen and (min-width: @screen-xs) {
+		 margin:0;
+   }
+}
+.countries {
+	max-width: 100%;
+	@media screen and (min-width: @screen-palm) {
+		max-width: 50%;
+		min-width: 50%;
+	}
+	@media screen and (min-width: @screen-xs) {
+		 max-width: 25%;
+		 min-width: 25%;
+   }
+
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+	justify-content: flex-start;
+}
 .intro-copy {
     font-size: 1.5rem;
-    max-width: @screen-max/2;
+    max-width: @screen-md/2;
     margin: 0 auto 1.5rem auto;
     line-height: 1.5em;
 }
@@ -164,7 +271,7 @@ a {
 }
 
 .button {
-    padding: .75em 1.5em .5em;
+    padding: 1rem 1.5rem;
     border-radius:.25em;
     cursor: pointer;
     transition: @transition-all;
@@ -215,31 +322,6 @@ a {
     color: @text-dark;
 }
 
-.three-column, .two-column {
-    display: flex;
-    justify-content: space-between;
-}
-
-.three-column .columns {
-    max-width: 33.33%;
-}
-.two-column{
-	max-width: 50%;
-}
-.list-unstyled {
-    padding: 0;
-    margin: 0;
-
-    li {
-        list-style: none;
-    }
-
-}
-
-.list-circle {
-    list-style: circle;
-}
-
 .bulleted-list {
     margin: 0;
     padding-left: 1em;
@@ -250,16 +332,6 @@ a {
 
 }
 
-.footer-row {
-    display: flex;
-    text-align: left;
-    justify-content: space-between;
-}
-
-.footer-end .footer-row{
-    align-items: center;
-}
-
 .footer-list {
     padding-left: 0;
     padding: ;
@@ -268,15 +340,22 @@ a {
     margin-bottom: 1em;
 
 }
-.top-spacer {
+
-    margin-top: 3rem;
-}
 .page-container {
     display: flex;
-    max-width: @screen-max;
+    max-width: @screen-md;
     margin: 0 auto;
 }
 
+.page-content{
+    width:100%;
+    padding: 4rem 0;
+
+    h1:first-child {
+    margin-top: 0;
+	}
+}
+
 .breadcrumb {
     padding: 0;
     margin-bottom: 1.5rem;
@@ -313,15 +392,6 @@ a {
     border-right: 1px solid @light-border-color;
 }
 
-.page-content{
-    width:100%;
-    padding: 4rem 0;
-}
-
-.page-content h1:first-child {
-    margin-top: 0;
-}
-
 .blog-page{
     padding: 4rem 0;
     max-width: 700px;
@@ -331,6 +401,7 @@ a {
 .page-content.with-sidebar {
     padding: 4rem 0 4rem 2.5rem;
 }
+
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -361,16 +432,6 @@ hr {
   opacity: 1;
 }
 
-
-.with-border {
-	a{
-    text-decoration: none;
-
-		&:hover{
-			text-decoration: none;
-		}
-    }
-}
 .clickable a {
     color: @text-color;
 }
@@ -611,9 +672,10 @@ code {
     text-decoration:none;
 }
 
-.screenshot {
+.screenshot, .img-responsive {
     max-width:800px;
     margin: auto;
+    width: auto;
 }
 
 img.blog-cover-image, .blog-text img, .screenshot {
@@ -690,6 +752,11 @@ img.blog-cover-image, .blog-text img, .screenshot {
 }
 .blogger-name {
 	margin-top: .25em;
+    font-weight: normal;
+    font-size: 1rem;
+    a{
+    color: @text-color;
+    }
 }
 
 .blog-list-item .avatar {
@@ -698,8 +765,9 @@ img.blog-cover-image, .blog-text img, .screenshot {
 
 .avatar {
     display: inline-block;
-    width:  50px;
+    width:  3rem;
-    height: 50px;
+    height: 3rem;
+    margin-right: 1rem;
 }
 .avatar img {
     max-width: 100%;
@@ -722,31 +790,55 @@ img.blog-cover-image, .blog-text img, .screenshot {
 
 .media {
 	display: flex;
-  padding: 1.5rem;
 	background: @light-bg;
 	margin-bottom: 1.5rem;
 	border-radius: .25em;
-  border: 1px solid lightgray;
+	padding: 1.5rem;
-  width: 75%;
+
 }
 .media-left {
   width: 10%;
-  margin-right: 1.5rem;
+  margin-right: 2.5rem;
 }
 .media-heading {
   margin-top: 0;
 }
 .with-border {
-	border: @border;
 	border-radius: 0.25em;
 	padding: 1rem;
 	margin-bottom: 2rem;
+	border: 1px solid @border-color;
+	a{
+    text-decoration: none;
+
+		&:hover{
+			text-decoration: none;
+		}
+    }
     &:hover{
-		border-color: @text-light;
 		background-color: @light-bg;
     }
 }
 /* individual elements */
+.gold-member{
+    display: flex;
+    padding: 2.5rem 0;
+    transition: background-color @transition;
+    border-bottom: 1px solid @border-color;
+    &:hover {
+		background-color:@light-bg;
+    }
+}
+
+.silver-member{
+	padding: 1.5rem;
+	border: 1px solid @border-color;
+	border-radius: .25em;
+	transition: background-color @transition;
+	&:hover {
+		background-color:@light-bg;
+    }
+}
 
 .domain-links {
     font-size: 1.5rem;
@@ -757,7 +849,9 @@ img.blog-cover-image, .blog-text img, .screenshot {
     display:block;
     }
 }
-
+.thumb-small {
+    width: 100px;
+}
 .domain-image {
     width: 125px;
     padding-bottom: 1.5rem;

foundation/public/less/variables.less

@@ -6,7 +6,8 @@
 @button-primary-hover:      darken(desaturate(@brand-primary, 50%), 15%);
 @button-secondary-hover:    darken(@light-bg, 15%);
 @primary-link-color:        lighten(@brand-primary, 5%);
-@screen-max:                1200px;
 @transition-color:          color .3s ease-out;
 @transition-all:            all .3s ease-out;
 @border:                    1px solid @border-color;
+@transition:				.3s ease-out;
+@screen-palm:				500px;

foundation/templates/base.html

@@ -22,6 +22,9 @@
 			<link type="text/css" rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
 			<link type="text/css" rel="stylesheet" href="/assets/frappe/css/octicons/octicons.css">
         {% endif %}
+        {% if path == 'contact' %}
+			<link type="text/css" rel="stylesheet" href="/assets/foundation/css/bootstrap-for-webform.css">
+		{% endif %}
 	{%- endblock -%}
 	{%- block head_include %}{{ head_include or "" }}{% endblock -%}
 	{%- block style %}{%- endblock -%}

foundation/templates/includes/footer/footer.html

@@ -1,8 +1,8 @@
 <footer class="gray-bg">
 <div class="footer">
  <div class="container">
-	<div class="footer-row clearfix">
+	<div class="four-column left-aligned clearfix">
-		<div class="columned">
+		<div class="columns">
 			<h3 class="footer-title">Domains</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -31,7 +31,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columned">
+		<div class="columns">
 			<h3 class="footer-title">Foundation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -47,7 +47,7 @@
 					<a class="secondary-link" href="/foundation-felow">Fellow</a>
 				</li>
 				<li>
-					<a class="secondary-link" href="bounties">Bounties</a>
+					<a class="secondary-link" href="/bounties">Bounties</a>
 				</li>
 				<li>
 					<a class="secondary-link" href="/conf">Conferences</a>
@@ -60,7 +60,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columned">
+		<div class="columns">
 			<h3 class="footer-title">Community</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -90,7 +90,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columned">
+		<div class="columns">
 			<h3 class="footer-title">Documentation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -118,19 +118,19 @@
     </div>
     <div class="footer-end dark-bg text-muted">
         <div class="container">
-            <div class="footer-row">
+            <div class="three-column">
-                <div class="logo-footer">
+                <div class="column">
                 <p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg">
                     &copy; <span id="year"></span> ERPNext Open Source Software Foundation.</p>
                 </div>
-                <div class="centered">
+                <div class="column">
                     <p>Find us on
                         <a class="secondary-link" href="https://twitter.com/erpnext" target="_blank">Twitter</a>,
                         <a class="secondary-link" href="https://www.facebook.com/ERPNext/" target="_blank">Facebook</a> &
                         <a class="secondary-link" href="https://medium.com/frappé-thoughts/" target="_blank">Medium</a>
                     </p>
                 </div>
-                <div class="right-aligned">
+                <div class="column">
                     <p>Content licensed under <a class="secondary-link" href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank"> CC-BY-SA 3.0</a>. Read the <a href="/terms" class="secondary-link">terms of use</a>.
                     </p>
                 </div>

foundation/templates/includes/macros.html

@@ -1,12 +1,12 @@
 {% macro media(title, content, image, link) %}
-	<div class="media with-border {% if link %}clickable{% endif %}"
+	<div class="media centered {% if link %}clickable{% endif %}"
 		{% if link %}style="cursor: pointer;"{% endif %}
 		{% if link %}onclick="location.href='{{ link }}'"{% endif %}>
 		<div class="media-left">
 			<a href="{{ link or "#" }}">
 				<img class="media-object"
 					src="{% if image %}{% if not '/' in image %}/assets/foundation/img/{% endif %}{{ image }}{% else %}/assets/foundation/img/frappe-bird-grey.svg{% endif %}"
-					style="width: 64px; height: 64px; max-width: 64px; {% if image and not '/' in image %}opacity: 0.4{% endif %}">
+					style="{% if image and not '/' in image %}opacity: 0.4{% endif %}">
 			</a>
 		</div>
 		<div class="media-body">

foundation/www/about.html

@@ -6,11 +6,11 @@
 
 {% block content%}
 	<div class="page">
-        <section class='top-spacer hero centered about'>
+        <section class='top-spacer hero text-center about'>
             <div class="container">
                 <img class="about-img" src="/assets/foundation/img/community-colored.png">
                 <h1 class="title">ERPNext Foundation</h1>
-                <p class="intro-copy">We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p><p class="intro-copy"> ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the <a href="/faq" class="secondary-links" target="_blank">FAQ</a>.
+                <p class="intro-copy">We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p><p class="intro-copy"> ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the <a href="/faq" class="secondary-link" target="_blank">FAQ</a>.
             </div>
         </section>
         <div class="page-content">

foundation/www/index.html

@@ -1,17 +1,17 @@
-{% extends "templates/base.html" %}
+{% extends "foundation/templates/base.html" %}
 {% block title %}ERPNext Foundation{% endblock %}
 {% block content %}
-<section class='feature hero centered'>
+<section class='feature hero text-center'>
     <div class="container">
         <img class="hero-illustration" src='/assets/foundation/img/hero-illustration-erpnext.png'>
-        <h1 class="title">ERP for Everybody</h1>
+        <h1 class="header1">ERP for Everybody</h1>
         <p class='intro-copy text-light'>A free and opensource do-it-yourself business management system that will help you stay in control.</p>
         <a class="button button-primary" href="https://erpnext.com/pricing">Get Started</a>
     </div>
 </section>
 <section class="feature gray-bg left-aligned">
     <div class="container">
-        <h1 class="subtitle">One App Many Domains</h1>
+        <h2 class="header1 bottom-spacer-4 text-center">One App Many Domains</h1>
           <ul class="list grid-of-four">
             <li class="list-items grid-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/manufacturing">
@@ -52,9 +52,9 @@
 </section>
 <section class="feature community-bg text-white">
     <div class="container">
-        <div class="centered">
+        <div class="text-center">
-            <h1 class="title">ERPNext Foundation</h1>
+            <h1 class="header1">ERPNext Foundation</h1>
-            <p class="intro-copy">ERPNext Foundation is a community of ERPNext Users, Developers and Service Providers. The goal of the ERPNext Foundation is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p>
+            <p class="intro-copy">ERPNext Foundation is a community of ERPNext users, developers and service providers. The goal of the ERPNext Foundation is to provide a platform for the ERPNext Community to come together, join hands and build assets to help build and enhance ERPNext around the world.</p>
             <a href="/members/details" class="button button-secondary">Become a Member</a>
         </div>
     </div>
@@ -68,7 +68,7 @@
                 {# get first three events from portal events doctype #}
                 {% for e in events[:3] %}
 					<li>
-						<a href="{{ e.route }}" class="secondary-link">{{ frappe.format_date(e.event_date, "medium") }} - {{ e.event_title }}</a>
+						<a href="{{ e.route }}" class="secondary-link"><b>{{ e.event_title }}</b><br>{{ frappe.format_date(e.event_date, "medium") }}</a>
 					</li>
 					{% endfor %}
                 </ul>
@@ -96,9 +96,9 @@
                     <li>
                         <a href="https://discuss.erpnext.com/" class="secondary-link">Ask in our forum</a>
                     </li>
-                    <li>
+<!--                    <li>
                         <a href="" class="secondary-link">Get Paid Support</a>
-                    </li>
+                    </li>-->
                 </ul>
             </div>
         </div>

foundation/www/members/index.html

@@ -7,12 +7,7 @@
 {% block page_content %}
 <section>
 	<h1>Memberships</h1>
-	<p class='lead'>Be a Part of the ERPNext Foundation</p>
+	<p>Be a Part of the ERPNext Foundation. The ERPNext Foundation aims to be driven by its members. By becoming a members, you get
-</section>
-<section>
-	<h3>Introduction</h3>
-	<p>
-		The ERPNext Foundation aims to be driven by its members. By becoming a members, you get
 		a preferred listing on the ERPNext Job Board and access to incoming requests for implementation
 		and customization jobs<br>
 	</p>

foundation/www/service-providers.html

@@ -1,77 +1,78 @@
-{% extends "templates/web.html" %}
+{% extends "foundation/templates/web.html" %}
 
 {% from "foundation/templates/includes/macros.html" import media %}
 
 {% macro gold_member(m) %}
-<div class='gold-member'>
+<div class="media {{ 'text-muted' if m.placeholder else '' }}" style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
-	<div class="media with-border clickable {{ 'text-muted' if m.placeholder else '' }}" style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
+		{% if m.image %}
 		<div class="media-left">
 			<a href="{{ m.route }}">
-				<img class="media-object" src="{{ m.image or '/assets/foundation/img/gold.png' }}"
+				<img class="thumb-small media-object" src="{{ m.image or '/assets/foundation/img/gold.png' }}">
-					style="max-width: 72px;">
 			</a>
 		</div>
+		{% endif %}
 		<div class="media-body">
 			<h4 class="media-heading">{{ m.title }}</h4>
-			<p><span class=label>Gold Member</span></p>
 			{{ m.introduction }}
 		</div>
 </div>
-</div>
 {% endmacro %}
 
 {% macro silver_member(m) %}
-<div class='col-sm-4'>
+	<div class="silver-member clickable {{ 'text-muted' if m.placeholder else '' }}"
-	<div class="silver-member with-border clickable {{ 'text-muted' if m.placeholder else '' }}"
 		 style="cursor: pointer;" onclick="location.href='{{ m.route }}'">
 		<h4>{{ m.title }}</h4>
-			<p><span class=label>Silver Member</span></p>
+		<p>{{ m.introduction | truncate(140) }}</p>
-		<p>{{ m.introduction[:100] }}</p>
-	</div>
 	</div>
 {% endmacro %}
 
 {% macro show_member(s) %}
-	<div class='col-sm-4' style='height: 130px; padding-bottom: 30px'>
+	<div class='columns'>
+		<h3><a class='secondary-link bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a></h3>
 		<p>
-			<a class='bold' href="/{{ s.route }}">{{ s.title and s.title[:25] }}</a><br>
+			{{ s.introduction and s.introduction | truncate(140) }}
-			{{ s.introduction and s.introduction[:100] }}
 		</p>
 	</div>
 {% endmacro %}
 
 {% block page_content %}
-<h1 class='media-heading' style='margin-bottom: 30px;'>{{ title }}</h1>
 {% if form_dict.country %}
 {% endif %}
-<section>
+<section class="gold bottom-spacer-4">
+	<h2 class='media-heading'>Gold Members</h2>
 	{% for m in gold_members %}
 		{{ gold_member(m) }}
 	{% endfor %}
 	{% if has_gold_member %}
-	<p><a class='text-muted' href='/members'>
+	<p class="top-spacer text-center"><a class='text-muted' href='/members'>
 		Become a Gold Member and get your company featured here</a></p>
 	{% endif %}
 </section>
-<section>
+
-	<div class='row'>
+<section class="silver bottom-spacer-4">
+<h2 class='media-heading'>Silver Members</h2>
+<div class="grid-of-three">
 	{% for m in silver_members %}
 		{{ silver_member(m) }}
 	{% endfor %}
 </div>
+	{% if has_silver_member %}
+		<p class="top-spacer text-center"><a class='text-muted' href='/members'>
+			Become a Silver Member and get your company featured here</a></p>
+	{% endif %}
 </section>
-<section>
+<section class="bottom-spacer-4">
 	<h2>Individual Members</h2>
-	<div class='row'>
+	<div class="grid-of-three">
 		{% for s in individual_members %}
 			{{ show_member(s) }}
 		{% endfor %}
 	</div>
 </section>
 {% if form_dict.country %}
-<section>
+<section class="bottom-spacer-4">
 	<h2>Other Service Providers</h2>
-	<div class='row'>
+	<div class="grid-of-three">
 		{% for s in service_providers %}
 			{{ show_member(s) }}
 		{% endfor %}
@@ -80,16 +81,15 @@
 {% else %}
 <section>
 	<h2>Select by country</h2>
-	<div class='row'>
+	<div class='four-column flex-wrap'>
 	{% for c in countries %}
-	<div class='col-sm-4'>
+	<div class='countries columns'>
 		<p>
-			<a href="/service-providers?country={{ c[0] }}">{{ c[0] }} ({{ c[1] }})</a>
+			<a class="secondary-link" href="/service-providers?country={{ c[0] }}">{{ c[0] }} ({{ c[1] }})</a>
 		</p>
 	</div>
 	{% endfor %}
 </div>
 </section>
 {% endif %}
-
 {% endblock %}

foundation/www/service_providers.py

@@ -26,7 +26,6 @@ def get_context(context):
 		context.gold_members.append(dict(
 			title='Your Company',
 			introduction='Become a Gold Member today and get your company featured here',
-			image='/assets/foundation/img/gold.png',
 			route='/members',
 			placeholder=True
 		))
@@ -38,17 +37,16 @@ def get_context(context):
 		context.silver_members = frappe.get_all('Service Provider', 'title, introduction, `image`, route',
 			filters, debug=1)
 
-	# round to 3 columns
+	if context.silver_members:
-	for i in xrange(3 - (len(context.silver_members) % 3)):
+		context.has_silver_member = 1
+	else:
 		context.silver_members.append(dict(
 			title='Your Company',
-			introduction='Become a Silver Member today and get your company featured here',
+			introduction='Become a silver Member today and get your company featured here',
-			image='/assets/foundation/img/silver.png',
 			route='/members',
 			placeholder=True
 		))
 
-
 	context.individual_members = []
 	individual_members = [d.name for d in frappe.get_all('Member',
 		dict(membership_type='Individual'))]