diff --git a/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html b/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html index 1f9c4e08..2a144931 100644 --- a/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html +++ b/foundation/erpnext_foundation/doctype/service_provider/templates/service_provider.html @@ -8,18 +8,18 @@

{{ membership_type }} Member

{% endif %}
-
-
+
+ {% if image %} + + {% endif %}
{{ introduction }} - +
diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css index a394c340..5233adbf 100644 --- a/foundation/public/css/erpnext-org-theme.css +++ b/foundation/public/css/erpnext-org-theme.css @@ -1,75 +1,5 @@ @import "reset.css"; -.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; -} +@import "indicator.css"; a { color: #7575ff; text-decoration: none; @@ -79,10 +9,27 @@ a:hover { color: #2E3338; text-decoration: underline; } +.header1 { + font-size: 2.5rem; + line-height: 1.025; +} +.header2 { + font-size: 1.5rem; + line-height: 1.025; +} +.header3 { + font-size: 1rem; + line-height: 1.025; +} .navbar { - padding: 1rem 2.5rem; + padding: 1rem; background-color: #fff; } +@media screen and (min-width: 767px) { + .navbar { + padding: 1rem 2.5rem; + } +} .navbar-header { display: flex; justify-content: space-between; @@ -121,16 +68,27 @@ a:hover { text-decoration: none; } .container { - max-width: 1200px; + max-width: 100%; margin: 0 auto; } +@media screen and (min-width: 1199px) { + .container { + max-width: 1199px; + } +} .feature, .footer { - padding: 8rem 2.5rem; + padding: 4rem 1rem; border-top: 1px solid #EBEFF2; } +@media screen and (min-width: 767px) { + .feature, + .footer { + padding: 8rem 2.5rem; + } +} .page { - padding: 0 2.5rem; + padding: 0 1rem; border-top: 1px solid #EBEFF2; } .hero-illustration { @@ -141,14 +99,6 @@ a:hover { .about-img { margin-bottom: 2.5rem; } -.title { - font-size: 2.5rem; - line-height: 1.025; - margin-top: 0; -} -.subtitle { - margin-top: 0; -} .list-items { text-align: center; border-radius: .5rem; @@ -159,18 +109,57 @@ a:hover { .list-items:hover { box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.05); } -.list.grid-of-four { +.list.grid-of-four, +.grid-of-three { grid-gap: 2.5rem; } .grid-of-four { display: grid; - grid-template-columns: repeat(4, 1fr); + 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 { + display: grid; + 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); + } } .list { list-style: none; padding-left: 0; } /*utilities*/ +.top-zero { + margin-top: 0; +} +.top-spacer { + margin-top: 1rem; +} +.bottom-spacer-4 { + margin-bottom: 4rem; +} .gray-bg { background-color: #fafbfc; } @@ -183,7 +172,6 @@ a:hover { .right-aligned { text-align: right; } -.centered, .text-center { text-align: center; } @@ -196,9 +184,66 @@ a:hover { .text-white { color: #fff; } +.centered { + margin: 0 auto; +} +.bold { + font-weight: bold; +} +.list-unstyled { + padding: 0; + margin: 0; +} +.list-unstyled li { + list-style: none; +} +.list-circle { + list-style: circle; +} +.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; + } +} +.columns { + margin-bottom: 1rem; +} +@media screen and (min-width: 767px) { + .columns { + margin: 0; + } +} +.countries { + max-width: 100%; +} +@media screen and (min-width: 500px) { + .countries { + max-width: 50%; + min-width: 50%; + } +} +@media screen and (min-width: 767px) { + .countries { + max-width: 25%; + min-width: 25%; + } +} +.flex-wrap { + flex-wrap: wrap; + justify-content: flex-start; +} .intro-copy { font-size: 1.5rem; - max-width: 600px; + max-width: 599.5px; margin: 0 auto 1.5rem auto; line-height: 1.5em; } @@ -211,7 +256,7 @@ a:hover { text-decoration: none; } .button { - padding: .75em 1.5em .5em; + padding: 1rem 1.5rem; border-radius: .25em; cursor: pointer; transition: all 0.3s ease-out; @@ -257,27 +302,6 @@ a:hover { .active { color: #2E3338; } -.three-column, -.two-column { - display: flex; - justify-content: space-between; -} -.three-column .columns { - max-width: 33.33%; -} -.two-column { - max-width: 50%; -} -.list-unstyled { - padding: 0; - margin: 0; -} -.list-unstyled li { - list-style: none; -} -.list-circle { - list-style: circle; -} .bulleted-list { margin: 0; padding-left: 1em; @@ -285,14 +309,6 @@ a:hover { .bulleted-list li { padding-bottom: 1em; } -.footer-row { - display: flex; - text-align: left; - justify-content: space-between; -} -.footer-end .footer-row { - align-items: center; -} .footer-list { padding-left: 0; padding: ; @@ -302,14 +318,18 @@ a:hover { .footer-list li { margin-bottom: 1em; } -.top-spacer { - margin-top: 3rem; -} .page-container { display: flex; - max-width: 1200px; + max-width: 1199px; margin: 0 auto; } +.page-content { + width: 100%; + padding: 4rem 0; +} +.page-content h1:first-child { + margin-top: 0; +} .breadcrumb { padding: 0; margin-bottom: 1.5rem; @@ -341,13 +361,6 @@ a:hover { min-width: 200px; border-right: 1px solid #EBEFF2; } -.page-content { - width: 100%; - padding: 4rem 0; -} -.page-content h1:first-child { - margin-top: 0; -} .blog-page { padding: 4rem 0; max-width: 700px; @@ -381,12 +394,6 @@ hr { .fade.in { opacity: 1; } -.with-border a { - text-decoration: none; -} -.with-border a:hover { - text-decoration: none; -} .clickable a { color: #36414C; } @@ -616,9 +623,11 @@ code { border-color: #5e5ec9; text-decoration: none; } -.screenshot { +.screenshot, +.img-responsive { max-width: 800px; margin: auto; + width: auto; } img.blog-cover-image, .blog-text img, @@ -680,14 +689,20 @@ img.blog-cover-image, } .blogger-name { margin-top: .25em; + font-weight: normal; + font-size: 1rem; +} +.blogger-name a { + color: #36414C; } .blog-list-item .avatar { margin-right: 1em; } .avatar { display: inline-block; - width: 50px; - height: 50px; + width: 3rem; + height: 3rem; + margin-right: 1rem; } .avatar img { max-width: 100%; @@ -707,31 +722,52 @@ img.blog-cover-image, } .media { display: flex; - padding: 1.5rem; background: #fafbfc; margin-bottom: 1.5rem; border-radius: .25em; - border: 1px solid lightgray; - width: 75%; + padding: 1.5rem; } .media-left { width: 10%; - margin-right: 1.5rem; + margin-right: 2.5rem; } .media-heading { margin-top: 0; } .with-border { - border: 1px solid #d1d8dd; border-radius: 0.25em; padding: 1rem; margin-bottom: 2rem; + border: 1px solid #d1d8dd; +} +.with-border a { + text-decoration: none; +} +.with-border a:hover { + text-decoration: none; } .with-border:hover { - border-color: #6c7680; background-color: #fafbfc; } /* individual elements */ +.gold-member { + display: flex; + padding: 2.5rem 0; + transition: background-color 0.3s ease-out; + border-bottom: 1px solid #d1d8dd; +} +.gold-member:hover { + background-color: #fafbfc; +} +.silver-member { + padding: 1.5rem; + border: 1px solid #d1d8dd; + border-radius: .25em; + transition: background-color 0.3s ease-out; +} +.silver-member:hover { + background-color: #fafbfc; +} .domain-links { font-size: 1.5rem; display: block; @@ -740,6 +776,9 @@ img.blog-cover-image, .domain-links span { display: block; } +.thumb-small { + width: 100px; +} .domain-image { width: 125px; padding-bottom: 1.5rem; diff --git a/foundation/public/css/reset.css b/foundation/public/css/reset.css index d7a7080b..6ebfd46e 100644 --- a/foundation/public/css/reset.css +++ b/foundation/public/css/reset.css @@ -22,8 +22,14 @@ html { -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; line-height: 1.5; + font-size: 14px; } +@media screen and (min-width: 767px){ + html{ + font-size: 16px; + } +} @-ms-viewport { width: device-width; } @@ -34,7 +40,6 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s body { margin: 0; - font-size: 1em; font-weight: 400; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans", Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; diff --git a/foundation/public/less/erpnext-org-theme.less b/foundation/public/less/erpnext-org-theme.less index 37f3172f..9dd186be 100644 --- a/foundation/public/less/erpnext-org-theme.less +++ b/foundation/public/less/erpnext-org-theme.less @@ -1,19 +1,38 @@ -@import (css) "reset.css"; @import "variables.less"; -@import "indicator.less"; +@import (css) "reset.css"; +@import (css) "indicator.css"; a { - color:@brand-primary; - text-decoration:none; + color: @brand-primary; + text-decoration: none; transition: @transition-color; &:hover{ - color:@text-dark; - text-decoration:underline + color: @text-dark; + text-decoration: underline; } } -.navbar{ - padding: 1rem 2.5rem; - background-color:#fff; + +.header1 { + font-size: 2.5rem; + line-height: 1.025; +} + +.header2 { + font-size: 1.5rem; + line-height: 1.025; +} + +.header3 { + font-size: 1rem; + line-height: 1.025; +} + +.navbar { + padding: 1rem; + background-color:#fff; + @media screen and (min-width: @screen-xs) { + padding: 1rem 2.5rem; + } } .navbar-header { display: flex; @@ -38,7 +57,7 @@ a { color: @text-dark; } } -.navbar-brand:visited{ +.navbar-brand:visited { color: @text-color; } @@ -58,16 +77,22 @@ a { } .container { - max-width: @screen-max; + max-width: 100%; margin: 0 auto; + @media screen and (min-width: @screen-md){ + max-width: @screen-md; + } } .feature, .footer { - padding: 8rem 2.5rem; + padding: 4rem 1rem; border-top: 1px solid @light-border-color; + @media screen and (min-width: @screen-xs){ + padding: 8rem 2.5rem; + } } .page{ - padding: 0 2.5rem; + padding: 0 1rem; border-top: 1px solid @light-border-color; } @@ -81,16 +106,6 @@ a { } -.title{ - font-size: 2.5rem; - line-height: 1.025; - margin-top: 0; -} - -.subtitle { - margin-top: 0; -} - .list-items { text-align: center; border-radius: .5rem; @@ -102,20 +117,56 @@ a { } } -.list.grid-of-four{ +.list.grid-of-four, .grid-of-three { grid-gap: 2.5rem; } -.grid-of-four{ +.grid-of-four { display: grid; - grid-template-columns: repeat(4, 1fr); + 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); + } } -.list{ + + +.grid-of-three{ + display: grid; + 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); + } + +} + +.list { list-style: none; padding-left: 0; } + +@spacer-1: 0.5rem; +@spacer-2: @spacer-1 * 2; + /*utilities*/ +.top-zero { + margin-top: 0; +} +.top-spacer { + margin-top: @spacer-2; +} +.bottom-spacer-4{ + margin-bottom: 4rem; +} .gray-bg { background-color: @light-bg; } @@ -123,33 +174,89 @@ a { background-color: @text-dark; } -.left-aligned{ +.left-aligned { text-align: left; } -.right-aligned{ +.right-aligned { text-align: right; } -.centered, .text-center{ +.text-center{ text-align: center; } -.text-muted{ +.text-muted { color: @text-muted; } -.text-light{ +.text-light { color: @text-light; } -.text-white{ +.text-white { color:#fff; } -.intro-copy{ +.centered{ + margin: 0 auto; +} + +.bold{ + font-weight: bold; +} + +.list-unstyled { + padding: 0; + margin: 0; + + li { + list-style: none; + } + +} + +.list-circle { + list-style: circle; +} + + +.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; + } + +} + +.columns { + margin-bottom: 1rem; + @media screen and (min-width: @screen-xs) { + margin:0; + } +} +.countries { + max-width: 100%; + @media screen and (min-width: @screen-palm) { + max-width: 50%; + min-width: 50%; + } + @media screen and (min-width: @screen-xs) { + max-width: 25%; + min-width: 25%; + } + +} + +.flex-wrap { + flex-wrap: wrap; + justify-content: flex-start; +} +.intro-copy { font-size: 1.5rem; - max-width: @screen-max/2; + max-width: @screen-md/2; margin: 0 auto 1.5rem auto; line-height: 1.5em; } @@ -163,8 +270,8 @@ a { } } -.button{ - padding: .75em 1.5em .5em; +.button { + padding: 1rem 1.5rem; border-radius:.25em; cursor: pointer; transition: @transition-all; @@ -175,7 +282,7 @@ a { } } -.button-primary{ +.button-primary { font-size: 1.5em; color: #fff; background: @brand-primary; @@ -189,7 +296,7 @@ a { } } -.button-secondary{ +.button-secondary { font-size: 1.5em; color: @text-light; background: @btn-bg; @@ -215,31 +322,6 @@ a { color: @text-dark; } -.three-column, .two-column { - display: flex; - justify-content: space-between; -} - -.three-column .columns { - max-width: 33.33%; -} -.two-column{ - max-width: 50%; -} -.list-unstyled { - padding: 0; - margin: 0; - - li { - list-style: none; - } - -} - -.list-circle { - list-style: circle; -} - .bulleted-list { margin: 0; padding-left: 1em; @@ -250,16 +332,6 @@ a { } -.footer-row { - display: flex; - text-align: left; - justify-content: space-between; -} - -.footer-end .footer-row{ - align-items: center; -} - .footer-list { padding-left: 0; padding: ; @@ -268,15 +340,22 @@ a { margin-bottom: 1em; } -.top-spacer { - margin-top: 3rem; -} + .page-container { display: flex; - max-width: @screen-max; + max-width: @screen-md; margin: 0 auto; } +.page-content{ + width:100%; + padding: 4rem 0; + + h1:first-child { + margin-top: 0; + } +} + .breadcrumb { padding: 0; margin-bottom: 1.5rem; @@ -313,15 +392,6 @@ a { border-right: 1px solid @light-border-color; } -.page-content{ - width:100%; - padding: 4rem 0; -} - -.page-content h1:first-child { - margin-top: 0; -} - .blog-page{ padding: 4rem 0; max-width: 700px; @@ -331,6 +401,7 @@ a { .page-content.with-sidebar { padding: 4rem 0 4rem 2.5rem; } + hr { margin-top: 20px; margin-bottom: 20px; @@ -361,16 +432,6 @@ hr { opacity: 1; } - -.with-border { - a{ - text-decoration: none; - - &:hover{ - text-decoration: none; - } - } -} .clickable a { color: @text-color; } @@ -611,9 +672,10 @@ code { text-decoration:none; } -.screenshot { +.screenshot, .img-responsive { max-width:800px; margin: auto; + width: auto; } img.blog-cover-image, .blog-text img, .screenshot { @@ -690,6 +752,11 @@ img.blog-cover-image, .blog-text img, .screenshot { } .blogger-name { margin-top: .25em; + font-weight: normal; + font-size: 1rem; + a{ + color: @text-color; + } } .blog-list-item .avatar { @@ -698,8 +765,9 @@ img.blog-cover-image, .blog-text img, .screenshot { .avatar { display: inline-block; - width: 50px; - height: 50px; + width: 3rem; + height: 3rem; + margin-right: 1rem; } .avatar img { max-width: 100%; @@ -721,32 +789,56 @@ img.blog-cover-image, .blog-text img, .screenshot { } .media { - display: flex; - padding: 1.5rem; - background: @light-bg; - margin-bottom: 1.5rem; - border-radius: .25em; - border: 1px solid lightgray; - width: 75%; + display: flex; + background: @light-bg; + margin-bottom: 1.5rem; + border-radius: .25em; + padding: 1.5rem; + } .media-left { width: 10%; - margin-right: 1.5rem; + margin-right: 2.5rem; } .media-heading { margin-top: 0; } .with-border { - border: @border; border-radius: 0.25em; padding: 1rem; margin-bottom: 2rem; + border: 1px solid @border-color; + a{ + text-decoration: none; + + &:hover{ + text-decoration: none; + } + } &:hover{ - border-color: @text-light; background-color: @light-bg; } } /* individual elements */ +.gold-member{ + display: flex; + padding: 2.5rem 0; + transition: background-color @transition; + border-bottom: 1px solid @border-color; + &:hover { + background-color:@light-bg; + } +} + +.silver-member{ + padding: 1.5rem; + border: 1px solid @border-color; + border-radius: .25em; + transition: background-color @transition; + &:hover { + background-color:@light-bg; + } +} .domain-links { font-size: 1.5rem; @@ -757,7 +849,9 @@ img.blog-cover-image, .blog-text img, .screenshot { display:block; } } - +.thumb-small { + width: 100px; +} .domain-image { width: 125px; padding-bottom: 1.5rem; diff --git a/foundation/public/less/variables.less b/foundation/public/less/variables.less index 680b37d1..21a6cc70 100644 --- a/foundation/public/less/variables.less +++ b/foundation/public/less/variables.less @@ -6,7 +6,8 @@ @button-primary-hover: darken(desaturate(@brand-primary, 50%), 15%); @button-secondary-hover: darken(@light-bg, 15%); @primary-link-color: lighten(@brand-primary, 5%); -@screen-max: 1200px; @transition-color: color .3s ease-out; @transition-all: all .3s ease-out; @border: 1px solid @border-color; +@transition: .3s ease-out; +@screen-palm: 500px; diff --git a/foundation/templates/base.html b/foundation/templates/base.html index 1961bbb8..71b711fe 100644 --- a/foundation/templates/base.html +++ b/foundation/templates/base.html @@ -18,10 +18,13 @@ {% block meta_block %}{% endblock %} {% if path != '' %} - - - + + + {% endif %} + {% if path == 'contact' %} + + {% endif %} {%- endblock -%} {%- block head_include %}{{ head_include or "" }}{% endblock -%} {%- block style %}{%- endblock -%} diff --git a/foundation/templates/includes/footer/footer.html b/foundation/templates/includes/footer/footer.html index 786f6876..ccd5abc8 100644 --- a/foundation/templates/includes/footer/footer.html +++ b/foundation/templates/includes/footer/footer.html @@ -1,8 +1,8 @@
Country {{ country }}