mirror of
https://github.com/laurent22/joplin.git
synced 2025-02-01 19:15:01 +02:00
Doc: Add brand guidelines
This commit is contained in:
Laurent Cozic
parent
721a37a377
commit
7d218ca5b2
810
Assets/WebsiteAssets/css/brand.css
Normal file
810
Assets/WebsiteAssets/css/brand.css
Normal file
@ -0,0 +1,810 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
|
||||
|
||||
|
||||
/* Global */
|
||||
:root {
|
||||
--primary-DarkBlue: #043873;
|
||||
--primary-White: #ffffff;
|
||||
--primary-DarkGray: #32363f;
|
||||
--accent-LightBlue: #4f9cf9;
|
||||
--accent-Yellow: #ffe492;
|
||||
--variationPrimary-VaraintDark: #072445;
|
||||
--variationPrimary-VaraintWhite: #f8f9fa;
|
||||
--variationPrimary-VaraintDarkGray: #212529;
|
||||
--variationAccent-VaraintLightBlue: #d9e8f8;
|
||||
}
|
||||
* {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
#mobile_icon_logo{
|
||||
display: none;
|
||||
}
|
||||
.joplin__para {
|
||||
font-weight: 400;
|
||||
font-size: 20.8px;
|
||||
line-height: 1.5;
|
||||
color: var(--primary-DarkGray);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__para {
|
||||
/* text-align: center; */
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 425px) {
|
||||
.joplin__para {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.joplin__tagline1 {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1.5;
|
||||
color: var(--variationPrimary-VaraintDarkGray);
|
||||
}
|
||||
@media screen and (max-width: 425px) {
|
||||
.joplin__tagline1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
max-width: 1220px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.justify-content-tablet-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
/* Global */
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background-image: url("../images/brand/background\ blue\ motif\ 1.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
padding: 36px 0;
|
||||
}
|
||||
header .container nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 425px) {
|
||||
header .container nav {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
header .container nav h1.main-logo {
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
color: var(--primary-White);
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
header .container nav img {
|
||||
max-width: 200px;
|
||||
}
|
||||
#brand_guidelines{
|
||||
margin-top: 50px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
header .container nav img {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 576px) {
|
||||
#main_lockup {
|
||||
display: none;
|
||||
}
|
||||
#mobile_icon_logo{
|
||||
display: block;
|
||||
max-width: 80px;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
#brand_guidelines{
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
header .container nav h1.main-logo {
|
||||
font-size: 40px;
|
||||
}
|
||||
#main_lockup{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#mobile_icon_logo{
|
||||
display: block;
|
||||
max-width: 80px;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
#brand_guidelines{
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*header .container nav .logo {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
flex-wrap: nowrap;
|
||||
}*/
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
header .container nav .logo {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
header .container nav .logo h3 {
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
header .container nav .logo h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
/* Header */
|
||||
/* joplin Logos */
|
||||
.joplin__logos {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 43px;
|
||||
}
|
||||
.joplin__logos h2.main-logo {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: var(--primary-DarkBlue);
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__logos h2.main-logo {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__logos h2.main-logo {
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
.joplin__logos .container > p {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.joplin__logos > .wrapper {
|
||||
padding: 42px 59px 48px 66px;
|
||||
margin: 40px 45px;
|
||||
width: calc(100% - 6.5vw);
|
||||
border: 1px solid var(--variationPrimary-VaraintDarkGray);
|
||||
border-radius: 5px;
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
.joplin__logos > .wrapper {
|
||||
padding: 40px 0 45px 0;
|
||||
margin: 40px auto;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .para-1 {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.joplin__logos .wrapper .logo-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 27px;
|
||||
}
|
||||
.joplin__logos .wrapper .logo-wrapper:last-child {
|
||||
gap: 24px;
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.joplin__logos .wrapper .logo-wrapper img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .logo-wrapper h4 {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.joplin__logos .wrapper .logo-wrapper h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .logo-wrapper .blue-header {
|
||||
color: var(--accent-LightBlue);
|
||||
margin: 0;
|
||||
}
|
||||
.joplin__logos .wrapper .logo-wrapper .white-header {
|
||||
color: var(--primary-White);
|
||||
margin: 0;
|
||||
}
|
||||
.joplin__logos .wrapper .para-1 .blue-text {
|
||||
font-weight: bold;
|
||||
color: var(--accent-LightBlue);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__logos .wrapper .box:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .box:nth-child(1) > p {
|
||||
width: 80%;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.joplin__logos .wrapper .box:nth-child(1) > p {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.para-1 {
|
||||
width: 100%;
|
||||
}
|
||||
.joplin__logos .wrapper-2 .our-para {
|
||||
width: 100% !important;
|
||||
}
|
||||
@media screen and (min-width: 1400px) {
|
||||
.joplin__logos .wrapper .box2 {
|
||||
/* padding-left: 50px;
|
||||
margin-right: -130px; */
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .colored-box {
|
||||
background-color: var(--primary-DarkBlue);
|
||||
padding: 17px 15px 15px 24px;
|
||||
/* width: 320px; */
|
||||
/* height: 189px; */
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.joplin__logos .wrapper .colored-box {
|
||||
transform: translateX(-35px);
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .colored-box p {
|
||||
font-weight: normal;
|
||||
color: var(--primary-White);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__logos .wrapper .colored-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .box-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__logos .wrapper .box-wrapper {
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.joplin__logos .wrapper h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper .box-wrapper img {
|
||||
margin-top: 7px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.joplin__logos .wrapper .box-wrapper p {
|
||||
width: 70%;
|
||||
}
|
||||
.joplin__logos .wrapper-2 {
|
||||
position: relative;
|
||||
padding: 42px 0 35px 0;
|
||||
}
|
||||
@media screen and (max-width: 425px) {
|
||||
.joplin__logos .wrapper-2 {
|
||||
padding: 42px 0 35px 0;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper-2 .pipeline {
|
||||
width: 1px;
|
||||
height: 94%;
|
||||
background-color: var(--variationPrimary-VaraintDarkGray);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 47%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.joplin__logos .wrapper-2 .pipeline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.joplin__logos .wrapper-2 .pipeline {
|
||||
left: 49%;
|
||||
}
|
||||
}
|
||||
.joplin__logos .wrapper-2 .joplin__tagline1 {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.joplin__logos .wrapper-2 .our-para {
|
||||
margin-top: 19px;
|
||||
}
|
||||
.joplin__logos .wrapper-2 img {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 425px) {
|
||||
.joplin__logos .wrapper-2 .box-wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) and (max-width: 2100px) {
|
||||
.joplin__logos .wrapper-2 .special-box {
|
||||
margin-left: 150px;
|
||||
}
|
||||
.joplin__logos .wrapper-2 .special-box p {
|
||||
width: 100%;
|
||||
}
|
||||
.joplin__logos .wrapper-2 .pipeline {
|
||||
left: 53%;
|
||||
}
|
||||
}
|
||||
/* @media (min-width: 1441px) and (max-width: 1750px) {
|
||||
.joplin__logos .p-row {
|
||||
padding: 0 5rem;
|
||||
}
|
||||
} */
|
||||
/* joplin Logos */
|
||||
|
||||
/* joplin__Colours */
|
||||
.joplin__colours {
|
||||
padding: 5px 0;
|
||||
background-image: url("../images/brand/background\ blue\ motif\ 2.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.joplin__colours h2 {
|
||||
color: var(--primary-White);
|
||||
font-size: 40px;
|
||||
margin-bottom: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__colours h2 {
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__colours h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.joplin__colours p {
|
||||
color: var(--primary-White);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.joplin__colours .custom-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 45px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
.joplin__colours .custom-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.joplin__colours .custom-row .chartjs-wrapper canvas {
|
||||
width: 535px;
|
||||
}
|
||||
@media screen and (max-width: 575px) {
|
||||
.joplin__colours .custom-row .chartjs-wrapper canvas {
|
||||
width: 270px;
|
||||
}
|
||||
}
|
||||
/* joplin__Colours */
|
||||
/* joplin__Pallet */
|
||||
.joplin__pallet {
|
||||
padding: 45px 0 92px 0;
|
||||
}
|
||||
.joplin__pallet h3 {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__pallet h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.joplin__pallet h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.joplin__pallet .sigma-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 35px;
|
||||
}
|
||||
@media screen and (max-width: 555px) {
|
||||
.joplin__pallet .sigma-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.joplin__pallet .sigma-wrapper .circle-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.joplin__pallet .sigma-wrapper .circle-wrapper {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.joplin__pallet .sigma-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.joplin__pallet .sigma-wrapper .circle-wrapper .circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.joplin__pallet .row-space {
|
||||
padding: 50px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.joplin__pallet .row-space div {
|
||||
width: 97%;
|
||||
height: 1px;
|
||||
background-color: var(--primary-DarkGray);
|
||||
}
|
||||
.joplin__pallet .dark-blue {
|
||||
background-color: var(--primary-DarkBlue);
|
||||
}
|
||||
.joplin__pallet .white {
|
||||
background-color: var(--primary-White);
|
||||
}
|
||||
.joplin__pallet .dark-gray {
|
||||
background-color: var(--primary-DarkGray);
|
||||
}
|
||||
.joplin__pallet .light-blue {
|
||||
background-color: var(--accent-LightBlue);
|
||||
}
|
||||
.joplin__pallet .yellow {
|
||||
background-color: var(--accent-Yellow);
|
||||
}
|
||||
.joplin__pallet .variant-dark {
|
||||
background-color: var(--variationPrimary-VaraintDark);
|
||||
}
|
||||
.joplin__pallet .variant-white {
|
||||
background-color: var(--variationPrimary-VaraintWhite);
|
||||
}
|
||||
.joplin__pallet .variant-dark-gray {
|
||||
background-color: var(--variationPrimary-VaraintDarkGray);
|
||||
}
|
||||
.joplin__pallet .variant-light-blue {
|
||||
background-color: var(--variationAccent-VaraintLightBlue);
|
||||
}
|
||||
/* joplin__Pallet */
|
||||
/* joplin__State */
|
||||
.joplin__state {
|
||||
background-color: var(--primary-DarkBlue);
|
||||
background-image: url("../images/brand/Rectangle\ 16.png");
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding: 65px 0 78px 0;
|
||||
position: relative;
|
||||
}
|
||||
.joplin__state::before {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 98%;
|
||||
background-color: var(--variationPrimary-VaraintDarkGray);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.joplin__state::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.joplin__state .image {
|
||||
transform: translateY(25px);
|
||||
}
|
||||
.joplin__state .wrapper > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.joplin__state .wrapper > div .box h2 {
|
||||
color: var(--primary-White);
|
||||
font-size: 40px;
|
||||
margin-bottom: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* @media screen and (min-width: 1400px) {
|
||||
.joplin__state .wrapper > div .box h2 {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
} */
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__state .wrapper > div .box h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.joplin__state .wrapper > div .box h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__state .wrapper > div .box h2 {
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.joplin__state .wrapper > div .box p {
|
||||
color: var(--primary-White);
|
||||
width: 85%;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.joplin__state .wrapper > div .box p {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.joplin__state .wrapper > div .box img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.joplin__highlighter {
|
||||
padding: 74px 0;
|
||||
background-image: url("../images/brand/Rectangle\ 16.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.joplin__highlighter h2 {
|
||||
color: var(--primary-White);
|
||||
font-size: 40px;
|
||||
margin-bottom: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__highlighter h2 {
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__highlighter h2 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.joplin__highlighter p {
|
||||
color: var(--primary-White);
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.joplin__highlighter p {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.joplin__highlighter .wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__highlighter .wrapper {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.joplin__highlighter .wrapper div {
|
||||
padding: 32px 62px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.joplin__highlighter .wrapper div:first-child img {
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.joplin__highlighter .wrapper div:last-child img {
|
||||
position: absolute;
|
||||
top: 59%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.joplin__highlighter .wrapper div:first-child img {
|
||||
top: 43%;
|
||||
}
|
||||
.joplin__highlighter .wrapper div:last-child img {
|
||||
top: 44%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__highlighter .wrapper div:first-child img {
|
||||
top: 59%;
|
||||
}
|
||||
.joplin__highlighter .wrapper div:last-child img {
|
||||
top: 59%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 490px) {
|
||||
.joplin__highlighter .wrapper div:first-child img {
|
||||
top: 43%;
|
||||
}
|
||||
.joplin__highlighter .wrapper div:last-child img {
|
||||
top: 43%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
.joplin__highlighter .wrapper div:last-child img {
|
||||
top: 36%;
|
||||
}
|
||||
}
|
||||
.joplin__highlighter .wrapper div.yellow {
|
||||
background-color: var(--primary-White);
|
||||
}
|
||||
.joplin__highlighter .wrapper div.blue {
|
||||
background-color: var(--primary-DarkBlue);
|
||||
}
|
||||
.joplin__highlighter .wrapper div h4 {
|
||||
color: var(--variationPrimary-VaraintDarkGray);
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 20.8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.joplin__highlighter .wrapper div.blue h4 {
|
||||
color: var(--primary-White);
|
||||
}
|
||||
|
||||
/* joplin__State */
|
||||
/* joplin__Voice */
|
||||
.joplin__voice {
|
||||
padding: 78px 0;
|
||||
}
|
||||
.joplin__voice .container h2 {
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 1.5;
|
||||
color: var(--variationPrimary-VaraintDarkGray);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.joplin__voice .container h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__voice .container h2 {
|
||||
font-size: 33px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.joplin__voice .container .wrapper {
|
||||
margin-top: 57px;
|
||||
}
|
||||
.joplin__voice .container .wrapper .box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.joplin__voice .container .wrapper .box {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.joplin__voice .container .wrapper .box div:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
.joplin__voice .container .wrapper .box div:last-child {
|
||||
flex: 2;
|
||||
}
|
||||
.joplin__voice .container .wrapper .box div h3 {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1.7;
|
||||
color: var(--primary-DarkGray);
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.joplin__voice .container .wrapper .box div h3 {
|
||||
text-align: center;
|
||||
font-size:28px;
|
||||
}
|
||||
.joplin__voice .container .wrapper .box {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.joplin__voice .container .wrapper .box div p {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.joplin__voice .container .wrapper .box div p {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
/* joplin__Voice */
|
||||
.chartjs-wrapper {
|
||||
background-color: #d9d9d9;
|
||||
padding: 10px 20px;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
Assets/WebsiteAssets/images/brand/Rectangle 16.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/Rectangle 16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
Assets/WebsiteAssets/images/brand/Rectangle 18.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/Rectangle 18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
Assets/WebsiteAssets/images/brand/Vector.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Assets/WebsiteAssets/images/brand/Vector2.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/Vector2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Assets/WebsiteAssets/images/brand/Vector3.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/Vector3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
Assets/WebsiteAssets/images/brand/background blue motif 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/background blue motif 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
Assets/WebsiteAssets/images/brand/background blue motif 2.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/background blue motif 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
Assets/WebsiteAssets/images/brand/customise-it-img 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/customise-it-img 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
Assets/WebsiteAssets/images/brand/frame-blue 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/frame-blue 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Assets/WebsiteAssets/images/brand/frame-yellow 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/frame-yellow 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Assets/WebsiteAssets/images/brand/logo-text 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/logo-text 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
Assets/WebsiteAssets/images/brand/logo-text 2.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/logo-text 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
Assets/WebsiteAssets/images/brand/logo-text-blue 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/logo-text-blue 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
Assets/WebsiteAssets/images/brand/tagline 1.png
Normal file
BIN
Assets/WebsiteAssets/images/brand/tagline 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
0
Assets/WebsiteAssets/js/brand.js
Normal file
0
Assets/WebsiteAssets/js/brand.js
Normal file
392
Assets/WebsiteAssets/templates/brand.mustache
Normal file
392
Assets/WebsiteAssets/templates/brand.mustache
Normal file
@ -0,0 +1,392 @@
|
||||
<!-- Logos Section -->
|
||||
<section class="joplin__logos">
|
||||
<div class="container">
|
||||
<h2 class="main-logo">Logos</h2>
|
||||
<p class="joplin__para">
|
||||
All the variations of Joplin logo are all front facing. <br />
|
||||
To ensure a clarity and legibility of design, the logo should always
|
||||
be surrounded by a clear space.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-tablet-end gy-5 p-row">
|
||||
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
||||
<div class="box">
|
||||
<h3 class="joplin__tagline1">Lockup logo</h2>
|
||||
<p class="joplin__para">
|
||||
Joplin lockup is the company's main logo. It is used for
|
||||
corporate materials and marketing communications. To ensure
|
||||
sufficient contrast and readability, two following versions of
|
||||
the lockup are provided.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
||||
<div class="box box2">
|
||||
<p class="joplin__para para-1">
|
||||
<span class="blue-text">Blue text</span> version to be used on
|
||||
bright background.
|
||||
</p>
|
||||
<div class="logo-wrapper">
|
||||
<img src="{{imageBaseUrl}}/brand/Vector.png" alt="" />
|
||||
<h4 class="blue-header">Joplin</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
||||
<div class="colored-box">
|
||||
<p class="joplin__para">
|
||||
White text version to be used <br />
|
||||
on dark background.
|
||||
</p>
|
||||
<div class="logo-wrapper">
|
||||
<img src="{{imageBaseUrl}}/brand/Vector2.png" alt="" />
|
||||
<h4 class="white-header">Joplin</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper wrapper-2">
|
||||
<div class="container">
|
||||
<div class="pipeline"></div>
|
||||
<div class="row align-items-center gy-5 p-row justify-between">
|
||||
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="box">
|
||||
<h3 class="joplin__tagline1">Brandmark logo</h2>
|
||||
<div class="box-wrapper">
|
||||
<img
|
||||
src="{{imageBaseUrl}}/brand/J logo transparent background 1.png"
|
||||
alt=""
|
||||
/>
|
||||
<p class="joplin__para">
|
||||
The classic brandmark icon is often used on a bright
|
||||
background to help increase the contrast. It is a reduced
|
||||
version of a logo which should be used in limited spacing or
|
||||
when using a full company name is not necessary.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="box special-box">
|
||||
<h3 class="joplin__tagline1">Joplin tagline</h3>
|
||||
<img src="{{imageBaseUrl}}/brand/tagline 1.png" alt="" />
|
||||
<p class="joplin__para our-para">
|
||||
Our tagline is an invitation to capture your thoughts and
|
||||
securely access them from any device.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="joplin__colours">
|
||||
<div class="container">
|
||||
<h2>Colours</h2>
|
||||
<p class="joplin__para">
|
||||
Two core colour palettes can be used while representing the brand. The
|
||||
accent colours are used to highlight <br />
|
||||
important elements and support the colours of the core palettes.
|
||||
</p>
|
||||
<div class="custom-row gy-4">
|
||||
<div
|
||||
class="chartjs-wrapper"
|
||||
>
|
||||
<canvas id="chart1" ></canvas>
|
||||
</div>
|
||||
<div
|
||||
class="chartjs-wrapper"
|
||||
>
|
||||
<canvas id="chart2" ></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Colours Section -->
|
||||
<!-- Pallet Section -->
|
||||
<section class="joplin__pallet">
|
||||
<div class="container">
|
||||
<div class="row gy-5">
|
||||
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
||||
<h3>Primary colours</h3>
|
||||
<div class="sigma-wrapper">
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle dark-blue"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Dark blue</p>
|
||||
<p class="joplin__para">HEX - 043873</p>
|
||||
<p class="joplin__para">RGB - 4, 56, 115</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle white"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">White</p>
|
||||
<p class="joplin__para">HEX - FFFFFF</p>
|
||||
<p class="joplin__para">RGB - 255, 255,</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle dark-gray"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Dark gray</p>
|
||||
<p class="joplin__para">HEX - 32363F</p>
|
||||
<p class="joplin__para">RGB - 50, 54, 63</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1"></div>
|
||||
<div class="col-xxl-5 col-xl-5 col-lg-12 col-md-12 col-sm-12">
|
||||
<h3>Accent colours</h3>
|
||||
<div class="sigma-wrapper">
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle light-blue"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Light blue</p>
|
||||
<p class="joplin__para">HEX - 4F9CF9</p>
|
||||
<p class="joplin__para">RGB - 79, 156, 249</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle yellow"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Yellow</p>
|
||||
<p class="joplin__para">HEX - FFE492</p>
|
||||
<p class="joplin__para">RGB - 255, 228, 146</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-space">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="row gy-5">
|
||||
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
||||
<h3>
|
||||
Allowed variations of <br />
|
||||
primary colours
|
||||
</h3>
|
||||
<div class="sigma-wrapper">
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle variant-dark"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Variant dark</p>
|
||||
<p class="joplin__para">HEX - 072445</p>
|
||||
<p class="joplin__para">RGB - 7, 36, 69</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle variant-white"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Variant white</p>
|
||||
<p class="joplin__para">HEX - F8F9FA</p>
|
||||
<p class="joplin__para">RGB - 248, 249,</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle variant-dark-gray"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Variant dark gray</p>
|
||||
<p class="joplin__para">HEX - 212529</p>
|
||||
<p class="joplin__para">RGB - 33, 37, 41</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1"></div>
|
||||
<div class="col-xxl-5 col-xl-5 col-lg-12 col-md-12 col-sm-12">
|
||||
<h3>
|
||||
Allowed variations of <br />
|
||||
accent colours
|
||||
</h3>
|
||||
<div class="sigma-wrapper">
|
||||
<div class="circle-wrapper">
|
||||
<div class="circle variant-light-blue"></div>
|
||||
<div class="info">
|
||||
<p class="joplin__para">Variant light blue</p>
|
||||
<p class="joplin__para">HEX - D9E8F8</p>
|
||||
<p class="joplin__para">RGB - 217, 232,</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Pallet Section -->
|
||||
<!-- State Section -->
|
||||
<section class="joplin__state">
|
||||
<div class="container">
|
||||
<div class="wrapper row justify-content-between gy-5">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="box pb-3">
|
||||
<h2>Typography</h2>
|
||||
<p class="joplin__para">
|
||||
<b>Font-family: Montserrat</b> <br />
|
||||
Montserrat is a typeface chosen for its great readability. It is
|
||||
used as a default font. Sans-serif font should be used when
|
||||
Montserrat is not available.
|
||||
</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Connector element</h2>
|
||||
<p class="joplin__para">
|
||||
The graphic element that represents the connection between the
|
||||
components, files and data. It's Joplin's signature element
|
||||
present in application's website as well as in marketing
|
||||
communications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="box">
|
||||
<h2>Imagery</h2>
|
||||
<p class="joplin__para">
|
||||
The company uses vector art illustration . It ensures high
|
||||
quality images in any scale, large or small. All the
|
||||
illustrations come from storyset.com and are personalised to
|
||||
match the company's colours.
|
||||
</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<img src="{{imageBaseUrl}}/brand/customise-it-img 1.png" alt="" class="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="joplin__highlighter">
|
||||
<div class="container">
|
||||
<h2>Highlighter</h2>
|
||||
<p class="joplin__para">
|
||||
It is a reference to process of note taking on paper. It is used to
|
||||
emphasize words in the titles. There are two <br />
|
||||
variations of the element:
|
||||
</p>
|
||||
<div class="wrapper">
|
||||
<div class="yellow">
|
||||
<h4>Yellow version under dark text</h4>
|
||||
<img src="{{imageBaseUrl}}/brand/frame-yellow 1.png" alt="" />
|
||||
</div>
|
||||
<div class="blue">
|
||||
<h4>Light blue version under white text</h4>
|
||||
<img src="{{imageBaseUrl}}/brand/frame-blue 1.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="joplin__voice">
|
||||
<div class="container">
|
||||
<h2>Tone of voice</h2>
|
||||
<div class="wrapper">
|
||||
<div class="box">
|
||||
<div>
|
||||
<h3>
|
||||
Professional, <br />
|
||||
Friendly, <br />
|
||||
Welcoming, <br />
|
||||
Trustworthy, <br />
|
||||
Open-minded, <br />
|
||||
Genuine
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<p class="joplin__para">
|
||||
We believe that transparency is key to honest and successful
|
||||
communication. We remain <b>trustworthy</b> and
|
||||
<b>genuine</b> in engaging with our users and Joplin community.
|
||||
</p>
|
||||
<p class="joplin__para">
|
||||
As a company providing open-source product we stay
|
||||
<b>open-minded</b> and <b>enthusiastic</b> about new ideas and
|
||||
solutions. At the same time we continue to be
|
||||
<b>professional</b> to honour the trust the users place in us.
|
||||
</p>
|
||||
<p class="joplin__para">
|
||||
We appreciate the value the users bring to our product and
|
||||
therefore we keep our tone <b>friendly</b> and <b>welcoming</b>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- State Section -->
|
||||
<!-- Chart.Js Lib -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||
<script>
|
||||
const ctx = document.getElementById("chart1");
|
||||
const myChart = new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Dark blue 60%", "White 20%", "light blue 10%", "yellow 7%", "dark gray 3%"],
|
||||
datasets: [
|
||||
{
|
||||
label: "# of Votes",
|
||||
data: [60, 20, 10, 7, 3],
|
||||
backgroundColor: [
|
||||
"#043873",
|
||||
"#ffffff",
|
||||
"#4f9cf9",
|
||||
"#ffe492",
|
||||
"#212529",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
layout: {},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "Blue colour palette",
|
||||
font: {
|
||||
size: 21,
|
||||
align: "left",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const ctx2 = document.getElementById("chart2");
|
||||
const myChart2 = new Chart(ctx2, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["White 60%", "Dark 20%", "light blue 10%", "dark gray 7%", "yellow 3%"],
|
||||
datasets: [
|
||||
{
|
||||
label: "# of Votes",
|
||||
data: [60, 20, 10, 7, 3],
|
||||
backgroundColor: [
|
||||
"#ffffff",
|
||||
"#043873",
|
||||
"#4f9cf9",
|
||||
"#212529",
|
||||
"#ffe492",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
layout: {},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "White colour palette",
|
||||
font: {
|
||||
size: 21,
|
||||
align: "left",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -40,6 +40,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
|
||||
onload="this.media='all'; this.onload = null"
|
||||
/>
|
||||
<link rel="stylesheet" href="{{{assetUrls.css.site}}}" as="style" />
|
||||
{{#assetUrls.css.brand}}<link rel="stylesheet" href="{{{assetUrls.css.brand}}}" as="style" />{{/assetUrls.css.brand}}
|
||||
<title>{{pageTitle}}</title>
|
||||
|
||||
<script
|
||||
|
||||
@ -42,6 +42,7 @@ const readmeDir = `${rootDir}/readme`;
|
||||
const mainTemplateHtml = readFileSync(`${websiteAssetDir}/templates/main-new.mustache`, 'utf8');
|
||||
const frontTemplateHtml = readFileSync(`${websiteAssetDir}/templates/front.mustache`, 'utf8');
|
||||
const plansTemplateHtml = readFileSync(`${websiteAssetDir}/templates/plans.mustache`, 'utf8');
|
||||
const brandTemplateHtml = readFileSync(`${websiteAssetDir}/templates/brand.mustache`, 'utf8');
|
||||
const stripeConfig = loadStripeConfig(buildConfig.env, `${rootDir}/packages/server/stripeConfig.json`);
|
||||
const partialDir = `${websiteAssetDir}/templates/partials`;
|
||||
|
||||
@ -364,6 +365,44 @@ async function main() {
|
||||
templateParams.templateHtml = updatePageLanguage(templateParams.templateHtml, locale.lang);
|
||||
|
||||
renderPageToHtml('', `${docDir}${pathPrefix}/plans/index.html`, templateParams);
|
||||
|
||||
// =============================================================
|
||||
// BRAND GUIDELINES PAGE
|
||||
// =============================================================
|
||||
|
||||
{
|
||||
const brandAssetUrls: AssetUrls = {
|
||||
css: {
|
||||
...assetUrls.css,
|
||||
brand: `${cssBaseUrl}/brand.css?h=${await md5File(`${cssBasePath}/brand.css`)}`,
|
||||
},
|
||||
js: {
|
||||
...assetUrls.js,
|
||||
},
|
||||
};
|
||||
|
||||
const brandPageParams: TemplateParams = {
|
||||
...defaultTemplateParams(brandAssetUrls, locale),
|
||||
partials: translatePartials(partials, localeName, locale.htmlTranslations),
|
||||
templateHtml: applyTranslations(brandTemplateHtml, localeName, locale.htmlTranslations),
|
||||
};
|
||||
|
||||
const brandPageContentHtml = renderMustache('', brandPageParams);
|
||||
|
||||
const templateParams = {
|
||||
...defaultTemplateParams(brandAssetUrls, locale),
|
||||
pageName: 'plans',
|
||||
partials,
|
||||
showToc: false,
|
||||
showImproveThisDoc: false,
|
||||
contentHtml: brandPageContentHtml,
|
||||
title: 'Joplin Brand Guidelines',
|
||||
};
|
||||
|
||||
templateParams.templateHtml = updatePageLanguage(templateParams.templateHtml, locale.lang);
|
||||
|
||||
renderPageToHtml('', `${docDir}${pathPrefix}/brand/index.html`, templateParams);
|
||||
}
|
||||
}
|
||||
|
||||
setLocale('en_GB');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user