diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css index e18e5e31..284b9f23 100644 --- a/foundation/public/css/erpnext-org-theme.css +++ b/foundation/public/css/erpnext-org-theme.css @@ -32,11 +32,10 @@ .dark-bg { background-color: #2E3338; } -.left-aligned, .text-left { text-align: left; } -.right-aligned { +.text-right { text-align: right; } .text-center { @@ -91,6 +90,9 @@ .border-top { border-top: 1px solid #d1d8dd; } +.border-top-light { + border-top: 1px solid #EBEFF2; +} .saturate { filter: grayscale(100%); } @@ -145,7 +147,7 @@ } @media screen and (min-width: 767px) { .columns { - flex-direction: row; + flex-direction: inherit; } } .column { @@ -156,6 +158,29 @@ margin: 0; } } +.three-column { + max-width: 100%; +} +@media screen and (min-width: 767px) { + .three-column { + max-width: 33%; + } +} +.copyright { + font-size: 1rem; +} +@media screen and (min-width: 767px) { + .copyright { + font-size: 0.75rem; + } +} +.flex-wrap { + flex-wrap: wrap; + justify-content: flex-start; +} +.grid-center { + justify-items: center; +} .indicator, .indicator-right { background: none; @@ -240,6 +265,9 @@ a:focus, a:visited { outline: 0; } +[data-path=""] .get-started { + display: none; +} .header-1, .header-2, .header-3 { @@ -291,8 +319,8 @@ a:visited { display: flex; margin: 0; } -.menu-items { - padding-left: 1.5rem; +.menu-item { + margin-left: 1.5rem; } .menu-links { color: #6c7680; @@ -306,28 +334,49 @@ a:visited { max-width: 100%; margin: 0 auto; } +@media screen and (min-width: 991px) { + .container, + .page-content-wrapper { + max-width: 959px; + } +} @media screen and (min-width: 1199px) { .container, .page-content-wrapper { - max-width: 1199px; + max-width: 1167px; } } -.feature, -.footer { +.section-padding.hero { padding: 2.5rem 1rem; - border-top: 1px solid #EBEFF2; } @media screen and (min-width: 767px) { - .feature { + .section-padding.hero { padding: 10.5rem 1.5rem; } } +.section-padding { + padding: 2.5rem 1rem; +} @media screen and (min-width: 767px) { - .footer { - padding: 4rem 1.5rem; + .section-padding { + padding: 6.5rem 1.5rem; } } -.feature .bullet { +.reviews { + max-width: 200px; +} +.stars { + width: 125px; +} +.footer-brand { + order: 10; +} +@media screen and (min-width: 767px) { + .footer-brand { + order: unset; + } +} +.section-bullet { margin-bottom: 0.5rem; } .page { @@ -382,10 +431,6 @@ a:visited { min-width: 25%; } } -.flex-wrap { - flex-wrap: wrap; - justify-content: flex-start; -} .intro-copy { max-width: 599.5px; margin: 0 auto 1.5rem auto; @@ -422,6 +467,18 @@ a:visited { background: #5e5ec9; color: #fff; } +.button-primary-small { + color: #fff; + background: #7575ff; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; +} +.button-primary-small:hover { + background: #5e5ec9; + color: #fff; +} .button-secondary { font-size: 1.5em; color: #6c7680; @@ -449,9 +506,19 @@ a:visited { .bulleted-list li { padding-bottom: 1em; } +.footer-title { + margin-bottom: 0.5rem; +} .footer-list { padding-left: 0; } +.footer-email-input { + border: 1px solid #8D99A6; + border-radius: 0.25rem; + padding: 0.25rem; + color: #8D99A6; + margin-right: 0.5rem; +} .page_content li, .sidebar-item, .footer-list li { @@ -530,27 +597,32 @@ hr { border: 0; border-top: 1px solid #EBEFF2; } -.footer-end { - border-top: 1px solid #354047; - padding-top: 1rem; - margin-top: 1rem; - font-size: 0.75rem; -} -@media screen and (min-width: 767px) { - .footer-end { - padding-top: 2.5rem; - margin-top: 1.5rem; - } -} -.footer a { +.footer-link { color: #8D99A6; + transition: color 0.3s ease-out; } -.footer a:hover { +.footer-link:hover { color: #fff; } +.button-dark { + color: #fff; + background: #8D99A6; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; +} .footer-icon { - width: 1.5rem; - margin-right: 0.5em; + width: 4rem; + margin-right: unset; +} +@media screen and (min-width: 767px) { + .footer-icon { + margin-right: 0.5rem; + } +} +.footer-email-title { + margin-bottom: 0.5rem; } /* loaned from bootstrap need to cleanup*/ /*progress bar*/ @@ -1059,7 +1131,7 @@ img.blog-cover-image, max-width: 250px; } .community-bg { - background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), #7574fe), url("/assets/foundation/img/community-2016.jpg"); + background-image: linear-gradient(to bottom, rgba(46, 51, 56, 0.5), #2E3338), url("/assets/foundation/img/community-2016.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; diff --git a/foundation/public/css/reset.css b/foundation/public/css/reset.css index c6d523c8..75fb7d43 100644 --- a/foundation/public/css/reset.css +++ b/foundation/public/css/reset.css @@ -25,7 +25,7 @@ html { font-size: 14px; } -@media screen and (min-width: 767px) { +@media screen and (min-width: 1199px) { html { font-size: 16px; } diff --git a/foundation/public/img/captera-bw.png b/foundation/public/img/captera-bw.png new file mode 100644 index 00000000..eb09daf3 Binary files /dev/null and b/foundation/public/img/captera-bw.png differ diff --git a/foundation/public/img/g2-crowd-bw.png b/foundation/public/img/g2-crowd-bw.png new file mode 100644 index 00000000..7718474c Binary files /dev/null and b/foundation/public/img/g2-crowd-bw.png differ diff --git a/foundation/public/img/getapp-bw.png b/foundation/public/img/getapp-bw.png new file mode 100644 index 00000000..94a7a918 Binary files /dev/null and b/foundation/public/img/getapp-bw.png differ diff --git a/foundation/public/img/screenshot-main.png b/foundation/public/img/screenshot-main.png new file mode 100644 index 00000000..9e4ec289 Binary files /dev/null and b/foundation/public/img/screenshot-main.png differ diff --git a/foundation/public/img/software-advice-bw.png b/foundation/public/img/software-advice-bw.png new file mode 100644 index 00000000..83f0a2ae Binary files /dev/null and b/foundation/public/img/software-advice-bw.png differ diff --git a/foundation/public/img/stars.png b/foundation/public/img/stars.png new file mode 100644 index 00000000..baf37bf8 Binary files /dev/null and b/foundation/public/img/stars.png differ diff --git a/foundation/public/less/base.less b/foundation/public/less/base.less index 8a9f2f4f..c5a8f7ca 100644 --- a/foundation/public/less/base.less +++ b/foundation/public/less/base.less @@ -41,12 +41,11 @@ background-color: @text-dark; } -.left-aligned, .text-left { text-align: left; } -.right-aligned { +.text-right { text-align: right; } @@ -120,6 +119,10 @@ border-top: @border; } +.border-top-light { + border-top: @border-light; +} + .saturate { filter: grayscale(100%); @@ -178,7 +181,7 @@ flex-direction: column; @media screen and (min-width: @screen-xs) { - flex-direction: row; + flex-direction: inherit; } } @@ -189,3 +192,28 @@ margin: 0; } } + +.three-column { + max-width: 100%; + + @media screen and (min-width: @screen-xs) { + max-width: 33%; + } +} + +.copyright { + font-size: 1rem; + + @media screen and (min-width: @screen-xs) { + font-size: 0.75rem; + } +} + +.flex-wrap { + flex-wrap: wrap; + justify-content: flex-start; +} + +.grid-center { + justify-items: center; +} diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less index 21d34270..682a943b 100644 --- a/foundation/public/less/erpnext-org-theme.less +++ b/foundation/public/less/erpnext-org-theme.less @@ -19,6 +19,10 @@ a { } } +[ data-path = "" ] .get-started { + display: none; +} + .header-1, .header-2, .header-3 { @@ -80,8 +84,8 @@ a { margin: 0; } -.menu-items { - padding-left: 1.5rem; +.menu-item { + margin-left: 1.5rem; } .menu-links { @@ -98,30 +102,48 @@ a { max-width: 100%; margin: 0 auto; + @media screen and (min-width: @screen-sm) { + max-width: @screen-sm - 32px; + } + @media screen and (min-width: @screen-md) { - max-width: @screen-md; + max-width: @screen-md - 32px; } } -.feature, -.footer { +.section-padding.hero { padding: 2.5rem 1rem; - border-top: 1px solid @light-border-color; -} -.feature { @media screen and (min-width: @screen-xs) { padding: 10.5rem 1.5rem; } } -.footer { +.section-padding { + padding: 2.5rem 1rem; + @media screen and (min-width: @screen-xs) { - padding: 4rem 1.5rem; + padding: 6.5rem 1.5rem; } } -.feature .bullet { +.reviews { + max-width: 200px; +} + +.stars { + width: 125px; +} + +.footer-brand { + order: 10; + + @media screen and (min-width: @screen-xs) { + order: unset; + } +} + +.section-bullet { margin-bottom: 0.5rem; } @@ -178,11 +200,6 @@ a { } } -.flex-wrap { - flex-wrap: wrap; - justify-content: flex-start; -} - .intro-copy { max-width: @screen-md/2; margin: 0 auto 1.5rem auto; @@ -226,6 +243,20 @@ a { } } +.button-primary-small { + color: #fff; + background: #7575ff; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; + + &:hover { + background: @button-primary-hover; + color: #fff; + } +} + .button-secondary { font-size: 1.5em; color: @text-light; @@ -259,10 +290,22 @@ a { } } +.footer-title { + margin-bottom: 0.5rem; +} + .footer-list { padding-left: 0; } +.footer-email-input { + border: 1px solid @text-muted; + border-radius: 0.25rem; + padding: 0.25rem; + color: @text-muted; + margin-right: 0.5rem; +} + .page_content li, .sidebar-item, .footer-list li { @@ -352,29 +395,35 @@ hr { border-top: 1px solid @light-border-color; } -.footer-end { - border-top: 1px solid @dark-border-color; - padding-top: 1rem; - margin-top: 1rem; - font-size: 0.75rem; - - @media screen and (min-width: @screen-xs) { - padding-top: 2.5rem; - margin-top: 1.5rem; - } -} - -.footer a { +.footer-link { color: @text-muted; + transition: color @transition; &:hover { color: #fff; } } +.button-dark { + color: #fff; + background: @text-muted; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; +} + .footer-icon { - width: 1.5rem; - margin-right: 0.5em; + width: 4rem; + margin-right: unset; + + @media screen and (min-width: @screen-xs) { + margin-right: 0.5rem; + } +} + +.footer-email-title { + margin-bottom: 0.5rem; } /* loaned from bootstrap need to cleanup*/ @@ -985,7 +1034,7 @@ img.blog-cover-image, } .community-bg { - background-image: linear-gradient(to bottom, rgba(117, 116, 254, 0.52), rgb(117, 116, 254)), url("/assets/foundation/img/community-2016.jpg"); + background-image: linear-gradient(to bottom, rgba(46, 51, 56, 0.5), @text-dark), url("/assets/foundation/img/community-2016.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; diff --git a/foundation/public/less/variables.less b/foundation/public/less/variables.less index 8d7f3c32..aae770ea 100644 --- a/foundation/public/less/variables.less +++ b/foundation/public/less/variables.less @@ -1,12 +1,13 @@ @import "../../../../frappe/frappe/public/less/variables.less"; -@brand-primary: #7575ff; -@screen-sm-min: 768px; -@screen-xs-max: (@screen-sm-min - 1); -@button-primary-hover: darken(desaturate(@brand-primary, 50%), 15%); -@button-secondary-hover: lighten(@light-bg, 15%); -@primary-link-color: lighten(@brand-primary, 5%); -@border: 1px solid @border-color; -@transition: 0.3s ease-out; -@screen-palm: 500px; -@dark-border-color: darken(@border-color, 60%); +@brand-primary: #7575ff; +@screen-sm-min: 768px; +@screen-xs-max: (@screen-sm-min - 1); +@button-primary-hover: darken(desaturate(@brand-primary, 50%), 15%); +@button-secondary-hover: lighten(@light-bg, 15%); +@primary-link-color: lighten(@brand-primary, 5%); +@border: 1px solid @border-color; +@border-light: 1px solid @light-border-color; +@transition: 0.3s ease-out; +@screen-palm: 500px; +@dark-border-color: darken(@border-color, 60%); diff --git a/foundation/templates/includes/email-subscription-block.html b/foundation/templates/includes/email-subscription-block.html new file mode 100644 index 00000000..f80be996 --- /dev/null +++ b/foundation/templates/includes/email-subscription-block.html @@ -0,0 +1,5 @@ +