Tweak some styles and change get-started page

This commit is contained in:
Raghavendra Kamath
2018-02-27 19:25:40 +05:30
parent b6300c8bd1
commit 40ec04f634
12 changed files with 681 additions and 2896 deletions

View File

@@ -1,7 +1,6 @@
{% extends "templates/web.html" %}
{% from "foundation/templates/includes/macros.html" import media %}
{% block page_content %}
<h1 class="media-heading">{{ title }}</h1>
{% if membership_type %}
@@ -50,5 +49,4 @@
<section>
<p><a class='btn-primary btn' href="mailto:{{ email }}">Contact {{ title }}</a></p>
</section>
{% endblock %}

View File

@@ -1,63 +0,0 @@
/*utilities*/
.align-items-center {
align-items: center;
}
.hide,
.hidden {
display: none;
visibility: hidden;
}
.top-zero {
margin-top: 0;
}
.bottom-zero {
margin-bottom: 0;
}
.top-spacer {
margin-top: 2.5rem;
}
.bottom-spacer {
margin-bottom: 2.5rem;
}
.bottom-spacer-4 {
margin-bottom: 4rem;
}
.gray-bg {
background-color: #fafbfc;
}
.dark-bg {
background-color: #2E3338;
}
.left-aligned {
text-align: left;
}
.right-aligned {
text-align: right;
}
.text-center {
text-align: center;
}
.text-muted {
color: #8D99A6;
}
.text-light {
color: #6c7680;
}
.text-white {
color: #fff;
}
.centered {
margin: 0 auto;
}
.bold {
font-weight: bold;
}
.list-unstyled {
padding: 0;
}
.list-unstyled li {
list-style: none;
}
.list-circle {
list-style: circle;
}

View File

@@ -1,6 +1,5 @@
/*utilities*/
@import "reset.css";
@import "indicator.css";
.align-items-center {
align-items: center;
}
@@ -21,6 +20,9 @@
.bottom-spacer {
margin-bottom: 2.5rem;
}
.top-spacer-4 {
margin-top: 4rem;
}
.bottom-spacer-4 {
margin-bottom: 4rem;
}
@@ -72,12 +74,86 @@
.border {
border: 1px solid #d1d8dd;
}
.border-top {
border-top: 1px solid #d1d8dd;
}
.saturate {
filter: grayscale(100%);
}
.saturate:hover {
filter: grayscale(0%);
}
.indicator,
.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 0;
}
.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;
@@ -107,6 +183,7 @@ a:visited {
.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 {
@@ -151,12 +228,14 @@ a:visited {
.menu-links:hover {
text-decoration: none;
}
.container {
.container,
.page-content-wrapper {
max-width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 1199px) {
.container {
.container,
.page-content-wrapper {
max-width: 1199px;
}
}
@@ -175,6 +254,11 @@ a:visited {
padding: 0 1rem;
border-top: 1px solid #EBEFF2;
}
@media screen and (min-width: 767px) {
.page {
padding: 0 2.5rem;
}
}
.hero-illustration {
width: 100%;
max-width: 800px;
@@ -426,7 +510,7 @@ hr {
}
@media screen and (min-width: 767px) {
.footer-end {
padding-top: 1.5rem;
padding-top: 2.5rem;
margin-top: 1.5rem;
}
}
@@ -451,6 +535,9 @@ hr {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: inherit;
}
.progress-bar-success {
background-color: #98d85b;
}

View File

@@ -1,71 +0,0 @@
.indicator,
.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;
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,5 +1,3 @@
@import "variables.less";
/*utilities*/
.align-items-center {
align-items: center;
@@ -27,6 +25,10 @@
margin-bottom: 2.5rem;
}
.top-spacer-4 {
margin-top: 4rem;
}
.bottom-spacer-4 {
margin-bottom: 4rem;
}
@@ -92,7 +94,11 @@
}
.border {
border: 1px solid @border-color;
border: @border;
}
.border-top {
border-top: @border;
}
.saturate {

View File

@@ -1,7 +1,7 @@
@import "variables.less";
@import "base.less";
@import (css) "reset.css";
@import (css) "indicator.css";
@import "indicator.less";
a {
color: @brand-primary;
@@ -38,6 +38,7 @@ a {
.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;
@@ -91,7 +92,8 @@ a {
}
}
.container {
.container,
.page-content-wrapper {
max-width: 100%;
margin: 0 auto;
@@ -113,6 +115,10 @@ a {
.page {
padding: 0 1rem;
border-top: 1px solid @light-border-color;
@media screen and (min-width: @screen-xs) {
padding: 0 2.5rem;
}
}
.hero-illustration {
@@ -389,7 +395,7 @@ hr {
font-size: 0.75rem;
@media screen and (min-width: @screen-xs) {
padding-top: 1.5rem;
padding-top: 2.5rem;
margin-top: 1.5rem;
}
}
@@ -420,6 +426,10 @@ hr {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: inherit;
}
.progress-bar-success {
background-color: #98d85b;
}

View File

@@ -11,7 +11,7 @@
.indicator::before,
.indicator-right::after {
content:'';
content: "";
display: inline-block;
height: 8px;
width: 8px;
@@ -19,7 +19,7 @@
}
.indicator::before {
margin:0 4px 0 0px;
margin: 0 4px 0 0;
}
.indicator-right::after {
@@ -30,26 +30,32 @@
.indicator-right.grey::after {
background: @btn-bg;
}
.indicator.blue::before,
.indicator-right.blue::after {
background: @indicator-blue;
}
.indicator.red::before,
.indicator-right.red::after {
background: @indicator-red;
}
.indicator.green::before,
.indicator-right.green::after {
background: @indicator-green;
}
.indicator.orange::before,
.indicator-right.orange::after {
background: @indicator-orange;
}
.indicator.purple::before,
.indicator-right.purple::after {
background: @indicator-purple;
}
.indicator.darkgrey::before,
.indicator-right.darkgrey::after {
background: @indicator-darkgrey;

View File

@@ -118,10 +118,10 @@
<div class="container">
<div class="align-iten-center three-column">
<div class="columns">
<p><img class="footer-icon" src="/assets/foundation/img/erpnext-logo.svg">
<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="columns">
<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> &

View File

@@ -2,13 +2,15 @@
<div class="container">
<div class="navbar-header">
<div class="left">
<a class="navbar-brand"
href="{{ url_prefix }}{{ home_page or "/"}}">
<a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/"}}">
<span>{{ brand_html or (frappe.get_hooks("brand_html") or ["Home"])[0] }}</span>
</a>
</div>
<div class="right">
<ul class="menu list-unstyled">
<li class="menu-items">
<a href="/service-providers" class="menu-links">Service providers</a>
</li>
<li class="menu-items">
<a href="/blog" class="menu-links">Blog</a>
</li>

View File

@@ -1,10 +1,10 @@
{% extends "foundation/templates/base.html" %}
{% block title %} Get Started - ERPNext Foundation{% endblock %}
{% block content %}
<section class="feature text-center">
<section class="feature">
<div class="container">
<h1 class="header1">Virtual Machine Images</h1>
<p class='text-medium text-light bottom-spacer-4'>Download a pre-installed Virtual Box Images</p>
<h1 class="header1 text-center">Virtual Machine Images</h1>
<p class='text-medium text-light text-center bottom-spacer-4'>Download a pre-installed Virtual Box Images</p>
<ul class="list-unstyled grid-of-three">
<li class="list-items border grid-items">
<a class="primary-links grid-boxes saturate" href="http://build.erpnext.com/ERPNext-Production.ova">
@@ -30,6 +30,8 @@
</p>
</li>
</ul>
<p class="text-center top-spacer-4"><a class="secondary-link" href="https://github.com/frappe/frappe/wiki/The-Hitchhiker%27s-Guide-to-Installing-Frapp%C3%A9-on-Linux-OS">Read more in the wiki for manually installing ERPNext on your
machine</a></p>
</div>
</section>
{% endblock %}