tweak homepage

This commit is contained in:
Raghavendra Kamath
2018-02-19 09:48:37 +05:30
parent adcc889734
commit 6c4b738635
7 changed files with 127 additions and 91 deletions

View File

@@ -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 {
list-style: none;
margin-bottom: 1rem;
.page_content li,
.sidebar-item,
.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: 4em;
padding-bottom: 4rem;
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-weight: bold;
font-size: 2.5rem;
}
.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;
}

View File

@@ -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;
}
.list-unstyled li {
li {
list-style: none;
}
}
.bulleted-list {
margin: 0;
list-style: circle;
padding-left: 1em;
}
.bulleted-list li {
li {
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 {
list-style: none;
margin-bottom: 1rem;
}
.page_content li, .sidebar-item, .footer-list li{
margin-bottom: 1em;
}
.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;
color: @text-muted;
}
.breadcrumb a:hover{
&:focus, &:visited {
background-color: transparent;
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: 4em;
padding-bottom: 4rem;
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-weight:bold;
font-size: 2.5rem;
}
.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;
}

View File

@@ -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;

View File

@@ -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">

View File

@@ -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>
{% if doctype != 'Blog Post' %}
<div class="col-sm-8 col-xs-6">
{% block header %}{% endblock %}
</div>
{% endif %}
<div class="col-sm-4 col-xs-6">
{% if show_search %}
<div class="page-search-block">

View File

@@ -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 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">
</a>
<a class="primary-links domain-links" href="/docs/user/manual/en/accounts/point-of-sale-pos-invoice">Retail</a>
<img class="domain-image" src="/assets/foundation/img/retail.svg"><span>Retail</span></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">
</a>
<a class="primary-links domain-links" href="/docs/user/manual/en/stock">Distribution</a>
<img class="domain-image" src="/assets/foundation/img/distribution.svg"><span>Distribution</span></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">
</a>
<a class="primary-links domain-links" href="/docs/user/manual/en/schools">Education</a>
<img class="domain-image" src="/assets/foundation/img/education.svg"><span>Education</span></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">
</a>
<a class="primary-links domain-links" href="/agriculture">Agriculture</a>
<img class="domain-image" src="/assets/foundation/img/agriculture.svg"><span>Agriculture</span></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">
</a>
<a class="primary-links domain-links" href="/docs/user/manual/en/healthcare"">Healthcare</a>
<img class="domain-image" src="/assets/foundation/img/healthcare.svg"><span>Healthcare</span></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">
</a>
<a class="primary-links domain-links" href="/Non-Profits">Non-Profits</a>
<img class="domain-image" src="/assets/foundation/img/non-profit.svg"><span>Non-Profits</span></a>
</li>
</ul>
</div>