Skip to content

Commit

Permalink
Merge pull request #75 from nevermined-io/feature/ux
Browse files Browse the repository at this point in the history 
Update UI
  • Loading branch information
@metabacalhau
metabacalhau committed Jul 13, 2023
2 parents b42707a + 5ce9a74 commit 829d479
Show file tree
Hide file tree
Showing 39 changed files with 408 additions and 79 deletions.
16 changes: 7 additions & 9 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula')
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Nevermined App Documentation',
tagline:
'Monetize your AI and your Data with Nevermined Smart Subscriptions',
tagline: 'Monetize your AI and your Data with Nevermined Smart Subscriptions',
url: 'https://docs.nevermined.app',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
plugins: ['docusaurus-plugin-sass', './src/plugins/http-support'],
plugins: ['docusaurus-plugin-sass', './src/plugins/http-support', './src/plugins/preload-plugin'],
customFields: {
subtitle: 'Your Data & AI Unchained',
},
Expand Down Expand Up @@ -50,8 +49,7 @@ const config = {
blog: {
showReadingTime: true,
blogTitle: 'Nevermined Blog',
blogDescription:
'Here is included the last 10 posts from Nevermined Medium',
blogDescription: 'Here is included the last 10 posts from Nevermined Medium',
blogSidebarCount: 0,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
Expand Down Expand Up @@ -82,7 +80,7 @@ const config = {
navbar: {
logo: {
alt: 'Nevermined Logo',
src: 'img/nevermined/nevermined-app-logo.png',
src: 'img/nevermined/nevermined-app-logo.svg',
},
items: [
{
Expand All @@ -98,7 +96,7 @@ const config = {
{
position: 'left',
label: 'App',
href: 'https://nevermined.app/'
href: 'https://nevermined.app/',
},
{
position: 'right',
Expand Down Expand Up @@ -157,9 +155,9 @@ const config = {
{
label: 'Gnosis Chiado',
href: 'https://chiado.nevermined.app/',
},
},
],
},
},
{
title: 'More',
items: [
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"@tsconfig/docusaurus": "^1.0.5",
"@typescript-eslint/eslint-plugin": "^5.41.0",
"@typescript-eslint/parser": "^5.41.0",
"@vue/preload-webpack-plugin": "^2.0.0",
"buffer": "^6.0.3",
"constants-browserify": "^1.0.0",
"crypto-browserify": "^3.12.0",
Expand Down
4 changes: 4 additions & 0 deletions src/pages/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
color: var(--ifm-color-black);
}

&__subtitle {
margin-top: 1.5rem;
}

&__description {
text-align: center;
margin-top: 1.5rem;
Expand Down
24 changes: 24 additions & 0 deletions src/plugins/preload-plugin.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* eslint-disable-next-line */
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')

module.exports = function (_context, _options) {
return {
name: 'preload-plugin',
configureWebpack(_config, _isServer) {
return {
plugins: [
new PreloadWebpackPlugin({
rel: 'preload',
as: 'font',
fileWhitelist: [/\.(woff2?|eot|ttf|otf)(\?.*)?$/i],
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'image',
fileWhitelist: [/(.*)?home-bg-((?!banner|mobile|products).*)?\.png$/i],
}),
],
}
},
}
}
170 changes: 139 additions & 31 deletions src/scss/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,122 @@
--ifm-breadcrumb-separator-size-multiplier: 2;

--ifm-code-font-size: 14px;
--ifm-code-background: #fff;
--ifm-code-border-radius: 15px;
--ifm-code-border-color: rgba(197, 197, 197, 0.80);
--prism-color: #000;
--prism-background-color: #fff;

--ifm-font-family-base: Catalogue, -apple-system, BlinkMacSystemFont, Segoe UI,
Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
--ifm-font-family-monospace: 'PT Mono', SFMono-Regular, Menlo, Monaco,
Consolas, 'Liberation Mono', 'Courier New', monospace;
--ifm-font-family-base: Exo, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--ifm-font-family-monospace: CourierPrime, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;

--ifm-footer-background-color: transparent;
--ifm-footer-color: var(--ifm-color-black);
--ifm-footer-link-color: var(--ifm-color-black);
--ifm-footer-title-color: var(--ifm-color-primary);

--ifm-color-primary: #2f12dc;
--ifm-color-scheme: light;
--ifm-dark-value: 10%;
--ifm-darker-value: 15%;
--ifm-darkest-value: 30%;
--ifm-light-value: 15%;
--ifm-lighter-value: 30%;
--ifm-lightest-value: 50%;
--ifm-contrast-background-value: 90%;
--ifm-contrast-foreground-value: 70%;
--ifm-contrast-background-dark-value: 70%;
--ifm-contrast-foreground-dark-value: 90%;
--ifm-color-primary: #763eff;
--ifm-color-secondary: #f41ca2;
--ifm-color-success: #00a400;
--ifm-color-info: #54c7ec;
--ifm-color-warning: #ffba00;
--ifm-color-danger: #fa383e;
--ifm-color-primary-dark: rgba(0, 0, 56, 0.2);
--ifm-color-primary-darker: rgba(0, 0, 56, 0.5);
--ifm-color-primary-darkest: #000038;
--ifm-color-primary-light: #763eff;
--ifm-color-primary-lighter: rgba(118, 62, 255, 0.5);
--ifm-color-primary-lightest: rgba(118, 62, 255, 0.2);
--ifm-color-primary-contrast-background: rgb(235, 242, 252);
--ifm-color-primary-contrast-foreground: rgb(16, 36, 69);
--ifm-color-secondary-dark: rgb(212, 213, 216);
--ifm-color-secondary-darker: rgb(200, 201, 204);
--ifm-color-secondary-darkest: rgb(164, 166, 168);
--ifm-color-secondary-light: rgb(238, 240, 242);
--ifm-color-secondary-lighter: rgb(241, 242, 245);
--ifm-color-secondary-lightest: rgb(245, 246, 248);
--ifm-color-secondary-contrast-background: rgb(253, 253, 254);
--ifm-color-secondary-contrast-foreground: rgb(71, 71, 72);
--ifm-color-success-dark: rgb(0, 148, 0);
--ifm-color-success-darker: rgb(0, 139, 0);
--ifm-color-success-darkest: rgb(0, 115, 0);
--ifm-color-success-light: rgb(38, 178, 38);
--ifm-color-success-lighter: rgb(77, 191, 77);
--ifm-color-success-lightest: rgb(128, 210, 128);
--ifm-color-success-contrast-background: rgb(230, 246, 230);
--ifm-color-success-contrast-foreground: rgb(0, 49, 0);
--ifm-color-info-dark: rgb(76, 179, 212);
--ifm-color-info-darker: rgb(71, 169, 201);
--ifm-color-info-darkest: rgb(59, 139, 165);
--ifm-color-info-light: rgb(110, 207, 239);
--ifm-color-info-lighter: rgb(135, 216, 242);
--ifm-color-info-lightest: rgb(170, 227, 246);
--ifm-color-info-contrast-background: rgb(238, 249, 253);
--ifm-color-info-contrast-foreground: rgb(25, 60, 71);
--ifm-color-warning-dark: rgb(230, 167, 0);
--ifm-color-warning-darker: rgb(217, 158, 0);
--ifm-color-warning-darkest: rgb(179, 130, 0);
--ifm-color-warning-light: rgb(255, 196, 38);
--ifm-color-warning-lighter: rgb(255, 207, 77);
--ifm-color-warning-lightest: rgb(255, 221, 128);
--ifm-color-warning-contrast-background: rgb(255, 248, 230);
--ifm-color-warning-contrast-foreground: rgb(77, 56, 0);
--ifm-color-danger-dark: rgb(225, 50, 56);
--ifm-color-danger-darker: rgb(213, 48, 53);
--ifm-color-danger-darkest: rgb(175, 39, 43);
--ifm-color-danger-light: rgb(251, 86, 91);
--ifm-color-danger-lighter: rgb(251, 116, 120);
--ifm-color-danger-lightest: rgb(253, 156, 159);
--ifm-color-danger-contrast-background: rgb(255, 235, 236);
--ifm-color-danger-contrast-foreground: rgb(75, 17, 19);
--ifm-color-white: #fff;
--ifm-color-black: #000;
--ifm-color-gray-0: var(--ifm-color-white);
--ifm-color-gray-100: #f5f6f7;
--ifm-color-gray-200: #ebedf0;
--ifm-color-gray-300: #dadde1;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-gray-500: #bec3c9;
--ifm-color-gray-600: #8d949e;
--ifm-color-gray-700: #606770;
--ifm-color-gray-800: #444950;
--ifm-color-gray-900: #1c1e21;
--ifm-color-gray-1000: var(--ifm-color-black);
--ifm-color-emphasis-0: var(--ifm-color-gray-0);
--ifm-color-emphasis-100: var(--ifm-color-gray-100);
--ifm-color-emphasis-200: var(--ifm-color-gray-200);
--ifm-color-emphasis-300: var(--ifm-color-gray-300);
--ifm-color-emphasis-400: var(--ifm-color-gray-400);
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
--ifm-color-emphasis-600: var(--ifm-color-gray-600);
--ifm-color-emphasis-700: var(--ifm-color-gray-700);
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
--ifm-color-emphasis-900: var(--ifm-color-gray-900);
--ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
--ifm-color-content: var(--ifm-color-emphasis-900);
--ifm-color-content-inverse: var(--ifm-color-emphasis-0);
--ifm-color-content-secondary: #525860;
--ifm-background-color: transparent;
--ifm-background-surface-color: var(--ifm-color-content-inverse);
--ifm-global-border-width: 1px;
--ifm-global-radius: 0.4rem;
--ifm-hover-overlay: rgba(0, 0, 0, 0.05);
--ifm-font-color-base: var(--ifm-color-content);
--ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
--ifm-font-color-secondary: var(--ifm-color-content-secondary);

--ifm-navbar-background-color: var(--ifm-color-white);
--ifm-navbar-height: 74px;
Expand All @@ -45,27 +148,22 @@

--ifm-pre-line-height: 1.5rem;
--ifm-pre-padding: 1.5rem;
--ifm-pre-color: #000;
--ifm-pre-border-radius: 15px;

--ifm-table-border-color: #dbdbdb;
--ifm-table-head-background: linear-gradient(
107.16deg,
#2f12dc 9.77%,
#1ddef9 100%
);
--ifm-table-head-background: linear-gradient(107.16deg, #2f12dc 9.77%, #1ddef9 100%);
--ifm-table-head-color: var(--ifm-color-white);

--ifm-tabs-color-active-border: linear-gradient(
107.16deg,
#2f12dc 9.77%,
#1ddef9 100%
);
--ifm-tabs-color-active-border: linear-gradient(107.16deg, #2f12dc 9.77%, #1ddef9 100%);
--ifm-tabs-color-active: var(--ifm-color-black);
}

html,
body {
background: var(--ifm-background-color) !important;
color: unset !important;
font-family: var(--ifm-font-family-base) !important;
}

header,
Expand Down Expand Up @@ -98,11 +196,18 @@ footer {
}
}

pre {
background-color: var(--ifm-code-background);
}

code {
font-family: var(--ifm-font-family-monospace) !important;
font-weight: 400;
font-size: var(--ifm-code-font-size) !important;
line-height: var(--ifm-pre-line-height) !important;
border-radius: 15px;
border: 1px solid var(--ifm-code-border-color);
background: #fff;
}

.main-wrapper {
Expand All @@ -117,35 +222,34 @@ code {
}

h1 {
font-size: 50px;
font-weight: bold;
line-height: 4rem;
font-size: 42px;
line-height: 1;
letter-spacing: -1px;
}

h2 {
font-size: 40px;
font-weight: bold;
line-height: 3rem;
font-size: 24px;
line-height: 1;

&.text--truncate {
font-size: 35px;
font-size: 20px;
}
}

h3 {
font-size: 30px;
font-weight: bold;
line-height: 2.5rem;
font-size: 18px;
line-height: 1;
}

h4 {
font-weight: bold;
line-height: 2rem;
line-height: 1;
}

li {
list-style-type: disc;
margin-left: 20px;
font-size: 16px;
line-height: 1.5;

&.theme-doc-sidebar-item-link,
&.theme-doc-sidebar-item-category {
Expand All @@ -162,10 +266,8 @@ code {
}

p {
font-weight: 400;
font-size: 16px;
line-height: 32px;
line-height: 2em;
line-height: 1.25;
}

a.hash-link {
Expand Down Expand Up @@ -241,6 +343,7 @@ ul.breadcrumbs {

.breadcrumbs__link {
color: var(--ifm-breadcrumb-item-color-inactive);
vertical-align: middle;
}

.breadcrumbs__item--active {
Expand All @@ -261,6 +364,7 @@ ul.breadcrumbs {

&:not(:last-child):after {
background: var(--ifm-breadcrumb-separator) center no-repeat;
vertical-align: middle;
}
}
}
Expand Down Expand Up @@ -347,3 +451,7 @@ ul.breadcrumbs {
}
}
}

.DocSearch {
font-family: var(--ifm-font-family-base) !important;
}
Loading

0 comments on commit 829d479

Please sign in to comment.