Design Updates

Signed-off-by: Javier Canossini <[email protected]>

Author: javiercanossini

accord_logo.png accord_logo_large.png

@@ -209,7 +209,9 @@ let modelFileIndex = [];
     nunjucks.configure('./views', { autoescape: true });
 
     // copy the logo to build directory
-    await fs.copy('accord_logo.png', './build/accord_logo.png');
+    await fs.copy('assets', './build/assets');
+    await fs.copy('styles.css', './build/styles.css');
+    await fs.copy('fonts.css', './build/fonts.css');
     await fs.copy('_headers', './build/_headers');
 
     // validate and copy all the files

assets/fonts/Graphik-100-Italic.otf

@@ -0,0 +1,42 @@
+@font-face {
+	font-family: Graphik;
+	font-style: normal;
+	font-weight: 400;
+	src: url(/assets/fonts/Graphik-400.woff) format("woff2"),
+		url(/assets/fonts/Graphik-400.woff) format("woff");
+}
+@font-face {
+	font-family: Graphik;
+	font-style: normal;
+	font-weight: 500;
+	src: url(/assets/fonts/Graphik-500.woff2) format("woff2"),
+		url(/assets/fonts/Graphik-500.woff) format("woff");
+}
+@font-face {
+	font-family: Graphik;
+	font-style: normal;
+	font-weight: 600;
+	src: url(/assets/fonts/Graphik-600.woff2) format("woff2"),
+		url(/assets/fonts/Graphik-600.woff) format("woff");
+}
+@font-face {
+	font-family: Graphik;
+	font-style: italic;
+	font-weight: 400;
+	src: url(/assets/fonts/Graphik-400-Italic.woff2) format("woff2"),
+		url(/assets/fonts/Graphik-400-Italic.woff) format("woff");
+}
+@font-face {
+	font-family: Graphik;
+	font-style: normal;
+	font-weight: 200;
+	src: url(/assets/fonts/Graphik-200.woff2) format("woff2"),
+		url(/assets/fonts/Graphik-200.woff) format("woff");
+}
+@font-face {
+	font-family: Graphik;
+	font-style: normal;
+	font-weight: 300;
+	src: url(/assets/fonts/Graphik-300.woff2) format("woff2"),
+		url(/assets/fonts/Graphik-300.woff) format("woff");
+}

assets/fonts/Graphik-100-Italic.woff

@@ -0,0 +1,275 @@
+ /* Global Styles Override */
+ body {
+  font-family: 'Graphik', sans-serif, Arial, Helvetica, sans-serif !important;
+}
+
+a {
+  color: rgb(25, 198, 199);
+  font-weight: 500;
+  transition: color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+a:hover {
+  color: rgb(27, 37, 64) ;
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  color: rgb(27, 37, 64);
+}
+
+.content h1:not(:first-child) {
+  margin-top: 1em;
+  font-weight: 400;
+  font-size: 2.5rem;
+  margin-bottom: 5px;
+}
+
+.content p:not(:last-child) {
+  margin-bottom:0px!important;
+}
+
+.content p {
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 28px;
+  color: rgba(5, 12, 64, 0.502);
+}
+
+.content:not(:last-child) {
+  margin-bottom:45px;
+}
+
+.box {
+  border-radius: 10px;
+  display: inline-block;
+  margin-bottom: 50px!important;
+}
+
+/* Headings */
+
+.title {
+font-weight: 400;
+color: rgb(27, 37, 64);
+}
+
+.title:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.title.is-2 {
+  margin-bottom: 5px;
+}
+
+.title.is-4 {
+  margin-bottom: 20px;
+}
+
+.title:not(.is-spaced)+.subtitle {
+  max-width: 720px;
+  margin-top:4px;
+}
+
+.subtitle {
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 28px;
+  color: rgba(5, 12, 64, 0.502);
+}
+
+.has-background-dark,
+.is-dark {
+  background-color: rgb(27, 37, 64) !important;
+}
+
+.has-light {
+  font-weight: 200!important;
+  font-style: normal;
+  color: rgb(211, 206, 224);
+}
+
+/* Buttons */
+
+.button {
+  transition: background 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.button.is-primary {
+  color: rgb(5, 12, 64) !important;
+  background-color: rgb(25, 198, 199);
+  height: 45px;
+  width: auto;
+  padding: 15px 30px 13px;
+  font-size: 15px;
+  border: 2px solid transparent;
+  margin-right: 10px;
+  margin-bottom: 15px;
+}
+
+.button.is-primary.is-hovered,
+.button.is-primary:hover {
+  background-color: rgba(255, 255, 255, 0);
+  border: 2px solid rgb(25, 198, 199);
+}
+
+.button.download-button {
+  margin-right:15px;
+}
+
+a.navbar-item {
+  color:rgb(255, 255, 255);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1;
+  transition: color .15s ease-in;
+}
+
+a.navbar-item:hover {
+  background-color: transparent;
+  color: rgb(25, 198, 199);
+}
+
+a.navbar-item img{
+  margin-right:10px;
+}
+
+.icon {
+  margin-top: -2px;
+  margin-right: 5px!important;
+}
+
+/* Hero */
+.hero {
+  padding-top: 140px;
+  padding-bottom: 70px;
+  background-image: url(/assets/images/background.jpg);
+  background-repeat: no-repeat;
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: cover;
+}
+
+.hero.is-dark a:not(.button):not(.dropdown-item):not(.tag) {
+  color: rgb(25, 198, 199);
+  transition: color .15s ease-in;
+}
+
+.hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):hover {
+  color:rgb(255, 255, 255);
+}
+
+/* Footer */
+
+.footer .content p {
+  font-weight: 500;
+  font-style: normal;
+  color: rgba(255, 255, 255, 0.502);
+  font-size: 0.6666666667rem;
+  letter-spacing: 1px;
+  line-height: 1.8;
+  text-transform: uppercase;
+}
+
+/* Dropdown */
+
+.dropdown {
+  margin-top: 5px;
+  margin-right: 20px;
+}
+
+.dropdown .button .span {
+  font-size: 15px;
+  font-weight: 500;
+  color: rgb(5, 12, 64);
+}
+
+.dropdown-item {
+  font-weight: 400!important;
+}
+
+a.dropdown-item.is-active {
+  background-color: rgb(25, 198, 199);
+  color: rgb(5, 12, 64);
+}
+
+svg.svg-inline--fa.fa-angle-down.fa-w-10 path {
+  fill:rgb(25, 198, 199)!important;
+}
+
+/* Tags */
+.tags:not(:last-child) {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+.brand-label {
+  color: #fff;
+  font-size: 18.75px;
+  font-weight: 600;
+}
+
+/* Table */
+
+.table thead th {
+  font-weight: 500;
+  color: rgb(5, 12, 64);
+  line-height: initial;
+  border-bottom: 2px solid rgba(5, 12, 64, 0.102);
+  color: rgba(5, 12, 64, 0.502);
+  font-size: 0.6666666667rem;
+  font-weight: 500;
+  letter-spacing: 2.7px;
+  line-height: initial;
+  text-transform: uppercase;
+  padding-bottom: 15px;
+}
+
+.table td,
+.table th {
+  border: 1px solid rgb(219, 219, 219);
+  border-width: 0 0 1px;
+  padding: 0.5em 0.75em;
+  vertical-align: top;
+  color: rgba(5, 12, 64, 0.6);
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.table tfoot th {
+  font-weight: 500;
+  color: rgb(5, 12, 64);
+  line-height: initial;
+  border-top: 2px solid rgba(5, 12, 64, 0.102);
+  color: rgba(5, 12, 64, 0.502);
+  font-size: 0.6666666667rem;
+  font-weight: 500;
+  letter-spacing: 2.7px;
+  line-height: initial;
+  text-transform: uppercase;
+  padding-top: 15px;
+  padding-bottom: 0;
+}
+
+.table a:hover {
+  color: rgb(5, 12, 64) !important;
+}
+
+.technical-integration {
+  margin-top: 95px;
+}
+
+table.table.box.versions {
+  margin-top: 10px;
+}
+
+.inner-content {
+  padding-top: 140px;
+}
+
+ul.namespaces-list li {
+  color: rgba(5, 12, 64, 0.502);
+}

assets/fonts/Graphik-100-Italic.woff2

@@ -1,42 +1,27 @@
 {% extends "page.njk" %}
 
 {% block body %}
-    <section class="section">
-        <div class="container">
-            <h1 class="title">
-                Accord Project Model Repository
-            </h1>
-            <p class="subtitle">
-                Open Source Data Models for Smart Legal Contracts, DLT and more...
-            </p>
-        </div>
-    </section>
-
-    <section class="section">
+    <section class="hero is-dark">
+      <div class="hero-body">
         <div class="container">
-            <h2 class="title is-2">Welcome!</h2>
+          <h1 class="title is-1">
+            Accord Project <span class="has-light">Model Repository</span>
+          </h1>
+          <h2 class="subtitle">
             This repository host all Accord Project models. Models are captured using the
             <a href="https://github.com/hyperledger/composer-concerto">Concerto Modeling Language (CTO)</a>; a platform and runtime neutral typed schema language. The CTO
             <a href="https://models.accordproject.org/concerto/metamodel.html">meta-model</a> provides just-enough functionality to capture most business models and maps naturally to many executions
             languages. The CTO runtime stack is implemented in JavaScript and CTO instances serialize to JSON. CTO models
             can also be exported to Java, Go, XML Schema, Typescript etc using the <a href="https://github.com/hyperledger/composer-concerto-tools">Concerto Tools Project.</a>
+          </h2>
         </div>
+      </div>
     </section>
-
-    <section class="section">
-        <div class="container">
-            <h2 class="title is-2">Contributing</h2>
-            To contribute new models (or fix existing models), importers or exporters, you can fork this GitHub repository and submit
-            pull requests to the maintainers. Please join the
-            <a href="http://accordproject.org">Accord Project</a> Technology Working Group Slack channel.
-        </div>
-    </section>
-
     <section class="section">
         <div class="container">
             <h2 class="title is-2">Model Namespaces</h2>
             <div class="content">
-                <ul>
+                <ul class="namespaces-list">
                     {% for e in modelFileIndex %}
                     <li>
                         <a href="{{e.htmlFile}}">{{e.modelFile.getNamespace()}}{{ e.modelVersion }}</a> ({{e.modelFile.getAllDeclarations().length}} types)