tweak homepage

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

@@ -73,7 +73,7 @@
 a {
   color: #7575ff;
   text-decoration: none;
-  transition: color 0.5s ease-in;
+  transition: color 0.3s ease-out;
 }
 a:hover {
   color: #2E3338;
@@ -85,6 +85,7 @@ a:hover {
 .navbar-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .navbar-icon {
   width: 25px;
@@ -142,6 +143,10 @@ a:hover {
 .domain-links {
   font-size: 1.5rem;
   display: block;
+  padding: 1.5rem;
+}
+.domain-links span {
+  display: block;
 }
 .domain-image {
   width: 125px;
@@ -149,10 +154,13 @@ a:hover {
 }
 .list-items {
   text-align: center;
-  padding: 2em;
-  /* border: 1px solid @border-color;*/
   border-radius: .5rem;
   background-color: #fff;
+  min-width: 200px;
+  transition: all 0.3s ease-out;
+}
+.list-items:hover {
+  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.05);
 }
 .list.grid-of-four {
   grid-gap: 2.5rem;
@@ -168,7 +176,8 @@ a:hover {
 .right-aligned {
   text-align: right;
 }
-.centered {
+.centered,
+.text-center {
   text-align: center;
 }
 .text-muted {
@@ -195,7 +204,7 @@ a:hover {
 }
 .primary-links {
   color: #6c7680;
-  transition: color 0.5s ease-in;
+  transition: color 0.3s ease-out;
 }
 .primary-links:hover {
   color: #2E3338;
@@ -205,7 +214,7 @@ a:hover {
   padding: .75em 1.5em .5em;
   border-radius: .25em;
   cursor: pointer;
-  transition: all 0.3s ease 0s;
+  transition: all 0.3s ease-out;
   border-bottom: 3px solid rgba(0, 0, 0, 0.2);
   text-decoration: none;
 }
@@ -253,7 +262,7 @@ a:hover {
 }
 .secondary-link {
   color: #6c7680;
-  transition: color 0.5s ease-in;
+  transition: color 0.3s ease-out;
 }
 .secondary-link:hover {
   color: #2E3338;
@@ -282,13 +291,17 @@ a:hover {
   text-align: left;
   justify-content: space-between;
 }
+.footer-end .footer-row {
+  align-items: center;
+}
 .footer-list {
   padding-left: 0;
   padding: ;
 }
-.list-unstyled li {
+.page_content li,
-  list-style: none;
+.sidebar-item,
-  margin-bottom: 1rem;
+.footer-list li {
+  margin-bottom: 1em;
 }
 .top-spacer {
   margin-top: 3rem;
@@ -305,7 +318,10 @@ a:hover {
   padding: 0;
   margin-bottom: 1.5rem;
 }
-.breadcrumb a,
+.breadcrumb a {
+  background-color: transparent;
+  color: #8D99A6;
+}
 .breadcrumb a:focus,
 .breadcrumb a:visited {
   background-color: transparent;
@@ -313,7 +329,7 @@ a:hover {
 }
 .breadcrumb a:hover {
   color: #2E3338;
-  transition: color 0.5s ease-in;
+  transition: color 0.3s ease-out;
 }
 .breadcrumb > li {
   display: inline-block;
@@ -333,6 +349,11 @@ a:hover {
   width: 100%;
   padding: 4rem 0;
 }
+.blog-page {
+  padding: 4rem 0;
+  max-width: 700px;
+  margin: 0 auto;
+}
 .page-content.with-sidebar {
   padding: 4rem 0 4rem 2.5rem;
 }
@@ -425,7 +446,7 @@ hr {
   border-radius: .25em;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  transition: border-color ease-out 0.15s, box-shadow ease-out 0.15s;
 }
 code {
   color: #FC4F51;
@@ -457,7 +478,7 @@ code {
   background-color: #7575ff;
   border-color: #7575ff;
   color: #fff;
-  transition: background-color 0.5s ease-in;
+  transition: background-color 0.3s ease-in;
 }
 .btn-primary:hover,
 .btn-primary:focus,
@@ -500,8 +521,7 @@ img.blog-cover-image,
   background: transparent;
 }
 .blog-list-item {
-  padding-top: 4em;
+  padding-bottom: 4rem;
-  padding-bottom: 4em;
   border-bottom: 1px solid #EBEFF2;
 }
 .blog-list-item:last-child {
@@ -512,20 +532,21 @@ img.blog-cover-image,
 }
 .blog-list-item h1 {
   margin-bottom: .5em;
-  font-weight: normal;
+}
+.blog-list-item:not(:first-child) {
+  padding-top: 4rem;
 }
 .blogpost-cover-img {
   width: 75%;
 }
-.blog-list-item .avatar {
-  margin-right: 1em;
-}
 .blog-list-item .blog-header {
-  font-size: 1.6em;
+  font-size: 2.5rem;
+}
+.blog-container img {
+  margin-bottom: 1.5rem;
 }
 .blog-header {
-  font-size: 2em;
+  font-size: 2.5rem;
-  font-weight: bold;
 }
 .blog-comments {
   position: relative;
@@ -535,7 +556,6 @@ img.blog-cover-image,
   margin: 2em 0;
 }
 .blog-text {
-  line-height: 2;
   font-size: 1.25em;
   letter-spacing: 0.01em;
 }
@@ -570,5 +590,5 @@ img.blog-cover-image,
   display: inline-block;
 }
 .blog-container {
-  max-width: 800px;
+  max-width: 700px;
 }

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

@@ -17,6 +17,7 @@ a {
 .navbar-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
 }
 .navbar-icon {
     width: 25px;
@@ -81,7 +82,12 @@ a {
 
 .domain-links{
     font-size: 1.5rem;
+    display: block;
+    padding: 1.5rem;
+
+    span{
     display:block;
+    }
 }
 
 .domain-image {
@@ -91,10 +97,13 @@ a {
 
 .list-items {
     text-align: center;
-    padding: 2em;
-   /* border: 1px solid @border-color;*/
     border-radius: .5rem;
     background-color: #fff;
+    min-width:200px;
+    transition: @transition-all;
+    &:hover{
+        box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.05);
+    }
 }
 
 .list.grid-of-four{
@@ -115,7 +124,7 @@ a {
     text-align: right;
 }
 
-.centered{
+.centered, .text-center{
     text-align: center;
 }
 
@@ -159,7 +168,7 @@ a {
     padding: .75em 1.5em .5em;
     border-radius:.25em;
     cursor: pointer;
-    transition: all 0.3s ease 0s;
+    transition: @transition-all;
     border-bottom: 3px solid rgba(0, 0, 0, 0.2);
     text-decoration: none;
     &:hover{
@@ -226,19 +235,23 @@ a {
 .list-unstyled{
     padding: 0;
     margin: 0;
+
+    li {
+        list-style: none;
+    }
+
 }
-.list-unstyled li {
+
-	list-style: none;
-}
 
 .bulleted-list {
     margin: 0;
     list-style: circle;
     padding-left: 1em;
-}
 
-.bulleted-list li {
+    li {
-  padding-bottom: 1em;
+        padding-bottom: 1em;
+    }
+
 }
 
 .footer-row {
@@ -247,15 +260,18 @@ a {
     justify-content: space-between;
 }
 
+.footer-end .footer-row{
+    align-items: center;
+}
+
 .footer-list {
     padding-left: 0;
     padding: ;
 }
-.list-unstyled li {
+.page_content li, .sidebar-item, .footer-list li{
-    list-style: none;
+    margin-bottom: 1em;
-	margin-bottom: 1rem;
-}
 
+}
 .top-spacer {
     margin-top: 3rem;
 }
@@ -265,24 +281,29 @@ a {
     margin: 0 auto;
 }
 
-.active{
+.active {
     color: @text-dark;
 }
 .breadcrumb {
     padding: 0;
     margin-bottom: 1.5rem;
-}
 
-.breadcrumb a, .breadcrumb a:focus, .breadcrumb a:visited {
+    a {
-    background-color: transparent;
+        background-color: transparent;
-    color: @text-muted;
+        color: @text-muted;
-}
 
-.breadcrumb a:hover{
+        &:focus, &:visited {
-    color: @text-dark;
+            background-color: transparent;
-    transition: @transition-color;
+            color: @text-muted;
-}
+        }
+        &:hover{
+            color: @text-dark;
+            transition: @transition-color;
+        }
+    }
 
+
+}
 .breadcrumb > li {
     display: inline-block;
 }
@@ -304,6 +325,12 @@ a {
     padding: 4rem 0;
 }
 
+.blog-page{
+    padding: 4rem 0;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
 .page-content.with-sidebar {
     padding: 4rem 0 4rem 2.5rem;
 }
@@ -398,7 +425,7 @@ hr {
     border-radius: .25em;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-out .15s, box-shadow ease-out .15s;
 }
 
 code {
@@ -435,7 +462,7 @@ code {
     background-color: @brand-primary;
     border-color: @brand-primary;
     color: #fff;
-    transition: background-color .5s ease-in;
+    transition: background-color .3s ease-in;
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
@@ -481,8 +508,7 @@ img.blog-cover-image, .blog-text img, .screenshot {
 }
 
 .blog-list-item {
-	padding-top: 4em;
+    padding-bottom: 4rem;
-	padding-bottom: 4em;
 	border-bottom: 1px solid @navbar-default-border;
 	&:last-child{
 	border-bottom: 0;
@@ -492,27 +518,29 @@ img.blog-cover-image, .blog-text img, .screenshot {
 	}
 	h1{
 	margin-bottom: .5em;
-	font-weight:normal
 	}
 }
 
+.blog-list-item:not(:first-child){
+    padding-top: 4rem;
+    }
 
 
 .blogpost-cover-img{
 width: 75%;
 }
 
-.blog-list-item .avatar {
-    margin-right: 1em;
-}
 
 .blog-list-item .blog-header {
-    font-size: 1.6em;
+    font-size: 2.5rem;
+}
+
+.blog-container img {
+    margin-bottom: 1.5rem;
 }
 
 .blog-header {
-	font-size: 2em;
+	font-size: 2.5rem;
-	font-weight:bold;
 }
 .blog-comments {
 	position: relative;
@@ -522,7 +550,6 @@ width: 75%;
 	margin: 2em 0;
 }
 .blog-text {
-	line-height: 2;
 	font-size: 1.25em;
 	letter-spacing: 0.01em;
 }
@@ -564,5 +591,5 @@ margin-bottom: 3em;
 }
 
 .blog-container {
-    max-width: 800px;
+    max-width: 700px;
 }

foundation/public/less/variables.less

@@ -7,4 +7,5 @@
 @button-secondary-hover:    darken(@light-bg, 15%);
 @primary-link-color:        lighten(@brand-primary, 5%);
 @screen-max:                1200px;
-@transition-color:          color .5s ease-in;
+@transition-color:          color .3s ease-out;
+@transition-all:            all .3s ease-out;

foundation/templates/base.html

@@ -17,7 +17,7 @@
 	{%- block head -%}
 		{% block meta_block %}{% endblock %}
         <link href="/assets/foundation/css/erpnext-org-theme.css" rel="stylesheet">
-        {% if 'docs' in  path %}
+        {% if 'docs' in  path or doctype == 'Blog Post' %}
                 <link type="text/css" rel="stylesheet" href="/assets/frappe/css/hljs.css">
                 <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">

foundation/templates/web.html

@@ -9,7 +9,7 @@
                     {% include "templates/includes/web_sidebar.html" %}
                 </div>
             {% endif %}
-        <div class="{% if show_sidebar %}page-content with-sidebar{% else %}page-content without-sidebar{% endif %}">
+        <div class="{% if show_sidebar %}page-content with-sidebar{% elif doctype == 'Blog Post' %} blog-page {% else %}page-content without-sidebar{% endif %}">
             <div class="page-content-wrapper">
                 <div class="row page-head">
                     <div class='col-sm-12'>
@@ -21,9 +21,11 @@
                         </div>
                         {% endif %}
                     </div>
-                    <div class="col-sm-8 col-xs-6">
+                    {% if doctype != 'Blog Post' %}
-                        {% block header %}{% endblock %}
+                        <div class="col-sm-8 col-xs-6">
-                    </div>
+                            {% block header %}{% endblock %}
+                        </div>
+                    {% endif %}
                     <div class="col-sm-4 col-xs-6">
                         {% if show_search %}
                             <div class="page-search-block">

foundation/www/index.html

@@ -15,51 +15,37 @@
           <ul class="list grid-of-four">
             <li class="list-items grid-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/manufacturing">
-					<img class="domain-image" src="/assets/foundation/img/manufacturing-domain.svg">
+					<img class="domain-image" src="/assets/foundation/img/manufacturing-domain.svg"><span>Manufacturing</span>
-				</a>
+                </a>
-                <a class="primary-links domain-links" href="/docs/user/manual/en/manufacturing">Manufacturing</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/manufacturing">
-					<img class="domain-image" src="/assets/foundation/img/services.svg">
+					<img class="domain-image" src="/assets/foundation/img/services.svg"><span>Services</span>
 				</a>
-                <a class="primary-links domain-links" href="/docs/user/manual/en/projects">Services</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">
-					<img class="domain-image" src="/assets/foundation/img/retail.svg">
+					<img class="domain-image" src="/assets/foundation/img/retail.svg"><span>Retail</span></a>
-				</a>
-                <a class="primary-links domain-links" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">Retail</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links"  href="/docs/user/manual/en/stock">
-					<img class="domain-image" src="/assets/foundation/img/distribution.svg">
+					<img class="domain-image" src="/assets/foundation/img/distribution.svg"><span>Distribution</span></a>
-				</a>
-                <a class="primary-links domain-links"  href="/docs/user/manual/en/stock">Distribution</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/schools">
-					<img class="domain-image" src="/assets/foundation/img/education.svg">
+					<img class="domain-image" src="/assets/foundation/img/education.svg"><span>Education</span></a>
-				</a>
-                <a class="primary-links domain-links" href="/docs/user/manual/en/schools">Education</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/agriculture">
-					<img class="domain-image" src="/assets/foundation/img/agriculture.svg">
+					<img class="domain-image" src="/assets/foundation/img/agriculture.svg"><span>Agriculture</span></a>
-				</a>
-                <a class="primary-links domain-links" href="/agriculture">Agriculture</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/healthcare">
-					<img class="domain-image" src="/assets/foundation/img/healthcare.svg">
+					<img class="domain-image" src="/assets/foundation/img/healthcare.svg"><span>Healthcare</span></a>
-				</a>
-                <a class="primary-links domain-links" href="/docs/user/manual/en/healthcare"">Healthcare</a>
             </li>
             <li class="list-items">
 				<a class="primary-links domain-links" href="/docs/user/manual/en/non-profits">
-					<img class="domain-image" src="/assets/foundation/img/non-profit.svg">
+					<img class="domain-image" src="/assets/foundation/img/non-profit.svg"><span>Non-Profits</span></a>
-				</a>
-                <a class="primary-links domain-links" href="/Non-Profits">Non-Profits</a>
             </li>
         </ul>
 	</div>