Merge pull request #131 from raghukamath/fixes-02

Second batch of fixes

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

@@ -32,7 +32,8 @@
 .dark-bg {
   background-color: #2E3338;
 }
-.left-aligned {
+.left-aligned,
+.text-left {
   text-align: left;
 }
 .right-aligned {
@@ -50,6 +51,9 @@
 .text-white {
   color: #fff;
 }
+.text-normal {
+  font-size: 1rem;
+}
 .text-medium {
   font-size: 1.5rem;
 }
@@ -57,7 +61,8 @@
   font-size: 0.5rem;
 }
 .centered {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 .bold {
   font-weight: bold;
@@ -71,6 +76,15 @@
 .list-circle {
   list-style: circle;
 }
+.bullet::before {
+  content: "\2022";
+  display: inline-block;
+  width: 1em;
+  font-size: 1.25rem;
+}
+.half-width {
+  max-width: 50%;
+}
 .border {
   border: 1px solid #d1d8dd;
 }
@@ -83,6 +97,65 @@
 .saturate:hover {
   filter: grayscale(0%);
 }
+/* colors */
+.green-bullet::before {
+  color: #98d85b;
+}
+/* components */
+.grid-of-four,
+.grid-of-three {
+  grid-gap: 2.5rem;
+  display: grid;
+}
+.grid-of-four {
+  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 {
+  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);
+  }
+}
+.columns {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+@media screen and (min-width: 767px) {
+  .columns {
+    flex-direction: row;
+  }
+}
+.column {
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 767px) {
+  .column {
+    margin: 0;
+  }
+}
 .indicator,
 .indicator-right {
   background: none;
@@ -167,22 +240,23 @@ a:focus,
 a:visited {
   outline: 0;
 }
+.header-1,
+.header-2,
+.header-3 {
+  line-height: 1.025;
+}
 .header-1 {
   font-size: 2.5rem;
-  line-height: 1.025;
 }
 .header-2 {
   font-size: 1.5rem;
-  line-height: 1.025;
 }
 .header-3 {
   font-size: 1rem;
-  line-height: 1.025;
 }
 .navbar {
   padding: 1rem;
   background-color: #fff;
-  box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 }
 @media screen and (min-width: 767px) {
   .navbar {
@@ -240,15 +314,22 @@ a:visited {
 }
 .feature,
 .footer {
-  padding: 4rem 1rem;
+  padding: 2.5rem 1rem;
   border-top: 1px solid #EBEFF2;
 }
 @media screen and (min-width: 767px) {
-  .feature,
-  .footer {
-    padding: 8rem 2.5rem;
+  .feature {
+    padding: 10.5rem 1.5rem;
   }
 }
+@media screen and (min-width: 767px) {
+  .footer {
+    padding: 4rem 1.5rem;
+  }
+}
+.feature .bullet {
+  margin-bottom: 0.5rem;
+}
 .page {
   padding: 0 1rem;
   border-top: 1px solid #EBEFF2;
@@ -272,56 +353,6 @@ a:visited {
 .list-items:hover {
   box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 }
-.grid-of-four,
-.grid-of-three {
-  grid-gap: 2.5rem;
-  display: grid;
-}
-.grid-of-four {
-  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 {
-  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);
-  }
-}
-.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;
-  }
-}
 .contact-content {
   max-width: 90%;
 }
@@ -330,14 +361,6 @@ a:visited {
     max-width: 50%;
   }
 }
-.columns {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 767px) {
-  .columns {
-    margin: 0;
-  }
-}
 .countries {
   max-width: 100%;
 }
@@ -426,7 +449,7 @@ a:visited {
 .page_content li,
 .sidebar-item,
 .footer-list li {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 .page-container {
   display: flex;
@@ -806,12 +829,6 @@ textarea.form-control {
   border-color: #5e5ec9;
   text-decoration: none;
 }
-.screenshot,
-.img-responsive {
-  max-width: 800px;
-  margin: auto;
-  width: auto;
-}
 img.blog-cover-image,
 .blog-text img,
 .screenshot {
@@ -975,6 +992,7 @@ img.blog-cover-image,
 }
 .media-object {
   width: 6.5rem;
+  max-width: inherit;
 }
 .with-border {
   border-radius: 0.25em;

foundation/public/css/reset.css

@@ -78,6 +78,7 @@ h5,
 h6 {
 	margin-bottom: 1rem;
 	margin-top: 0;
+	font-weight: 500;
 }
 
 p {
@@ -200,7 +201,7 @@ figure {
 img {
 	vertical-align: middle;
 	border-style: none;
-	width: 100%;
+	max-width: 100%;
 	border-radius: 0.25em;
 }
 

foundation/public/less/base.less

@@ -41,7 +41,8 @@
 	background-color: @text-dark;
 }
 
-.left-aligned {
+.left-aligned,
+.text-left {
 	text-align: left;
 }
 
@@ -65,6 +66,10 @@
 	color: #fff;
 }
 
+.text-normal {
+	font-size: 1rem;
+}
+
 .text-medium {
 	font-size: 1.5rem;
 }
@@ -74,7 +79,8 @@
 }
 
 .centered {
-	margin: 0 auto;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .bold {
@@ -93,6 +99,19 @@
 	list-style: circle;
 }
 
+.bullet {
+	&::before {
+		content: "\2022";
+		display: inline-block;
+		width: 1em;
+		font-size: 1.25rem;
+	}
+}
+
+.half-width {
+	max-width: 50%;
+}
+
 .border {
 	border: @border;
 }
@@ -108,3 +127,65 @@
 		filter: grayscale(0%);
 	}
 }
+
+/* colors */
+
+.green-bullet {
+	&::before {
+		color: @indicator-green;
+	}
+}
+
+/* components */
+
+.grid-of-four,
+.grid-of-three {
+	grid-gap: 2.5rem;
+	display: grid;
+}
+
+.grid-of-four {
+	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 {
+	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);
+	}
+}
+
+.columns {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+
+	@media screen and (min-width: @screen-xs) {
+		flex-direction: row;
+	}
+}
+
+.column {
+	margin-bottom: 1rem;
+
+	@media screen and (min-width: @screen-xs) {
+		margin: 0;
+	}
+}

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

@@ -19,25 +19,27 @@ a {
 	}
 }
 
+.header-1,
+.header-2,
+.header-3 {
+	line-height: 1.025;
+}
+
 .header-1 {
 	font-size: 2.5rem;
-	line-height: 1.025;
 }
 
 .header-2 {
 	font-size: 1.5rem;
-	line-height: 1.025;
 }
 
 .header-3 {
 	font-size: 1rem;
-	line-height: 1.025;
 }
 
 .navbar {
 	padding: 1rem;
 	background-color: #fff;
-	box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05);
 
 	@media screen and (min-width: @screen-xs) {
 		padding: 1rem 2.5rem;
@@ -103,14 +105,26 @@ a {
 
 .feature,
 .footer {
-	padding: 4rem 1rem;
+	padding: 2.5rem 1rem;
 	border-top: 1px solid @light-border-color;
+}
 
+.feature {
 	@media screen and (min-width: @screen-xs) {
-		padding: 8rem 2.5rem;
+		padding: 10.5rem 1.5rem;
 	}
 }
 
+.footer {
+	@media screen and (min-width: @screen-xs) {
+		padding: 4rem 1.5rem;
+	}
+}
+
+.feature .bullet {
+	margin-bottom: 0.5rem;
+}
+
 .page {
 	padding: 0 1rem;
 	border-top: 1px solid @light-border-color;
@@ -137,52 +151,6 @@ a {
 	}
 }
 
-.grid-of-four,
-.grid-of-three {
-	grid-gap: 2.5rem;
-	display: grid;
-}
-
-.grid-of-four {
-	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 {
-	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);
-	}
-}
-
-.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;
-	}
-}
-
 .contact-content {
 	max-width: 90%;
 
@@ -191,14 +159,6 @@ a {
 	}
 }
 
-.columns {
-	margin-bottom: 1rem;
-
-	@media screen and (min-width: @screen-xs) {
-		margin: 0;
-	}
-}
-
 .countries {
 	max-width: 100%;
 
@@ -301,7 +261,7 @@ a {
 .page_content li,
 .sidebar-item,
 .footer-list li {
-	margin-bottom: 1rem;
+	margin-bottom: 0.5rem;
 }
 
 .page-container {
@@ -745,13 +705,6 @@ textarea.form-control {
 	text-decoration: none;
 }
 
-.screenshot,
-.img-responsive {
-	max-width: 800px;
-	margin: auto;
-	width: auto;
-}
-
 img.blog-cover-image,
 .blog-text img,
 .screenshot {
@@ -950,6 +903,7 @@ img.blog-cover-image,
 
 .media-object {
 	width: 6.5rem;
+	max-width:inherit;
 }
 
 .with-border {

foundation/templates/includes/footer/footer.html

@@ -1,8 +1,8 @@
 <footer class="dark-bg">
 <div class="footer">
  <div class="container">
-	<div class="four-column left-aligned clearfix">
-		<div class="columns">
+	<div class="columns text-left clearfix">
+		<div class="column">
 			<h3 class="footer-title text-white">Industries</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -31,7 +31,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Foundation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -60,7 +60,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Community</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -90,7 +90,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="columns">
+		<div class="column">
 			<h3 class="footer-title text-white">Documentation</h3>
 			<ul class="list-unstyled footer-list">
 				<li>
@@ -116,19 +116,19 @@
     </div>
     <div class="footer-end dark-bg text-muted">
         <div class="container">
-            <div class="align-iten-center three-column">
-                <div class="columns">
+            <div class="align-iten-center columns">
+                <div class="column">
                 <p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg" alt="ERPnext Icon">
                     &copy; <span id="year"></span> ERPNext Open Source Software Foundation.</p>
                 </div>
-                <div class="columns">
+                <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="columns">
+                <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> | <a href="/terms" class="secondary-link">Terms of use</a>.
                     </p>
                 </div>

foundation/www/about.html

@@ -9,7 +9,7 @@
         <section class='top-spacer hero text-center about'>
             <div class="container">
                 <img class="about-img bottom-spacer" src="/assets/foundation/img/community-colored.jpg">
-                <h1 class="header1">ERPNext Foundation</h1>
+                <h1 class="header-1">ERPNext Foundation</h1>
                 <p class="intro-copy text-medium">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 text-medium"> 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>