Develop

CHANGELOG.md

@@ -4,9 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.17](https://github.com/eea/volto-forests-theme/compare/0.1.16...0.1.17)
+
+- More limits to Lead nav [`0b5a328`](https://github.com/eea/volto-forests-theme/commit/0b5a328ac6b00ff60f2d4fa894d5cf131f5ce6a2)
+
 #### [0.1.16](https://github.com/eea/volto-forests-theme/compare/0.1.15...0.1.16)
 
-- Fill page width & lower limits on Lead Navigation [`efc8d99`](https://github.com/eea/volto-forests-theme/commit/efc8d99242ae1bc26a5f6a3318c7c77de46b1fcd)
+> 22 November 2021
+
+- Fill page width & lower limits on Lead Navigation [`#20`](https://github.com/eea/volto-forests-theme/pull/20)
 
 #### [0.1.15](https://github.com/eea/volto-forests-theme/compare/0.1.14...0.1.15)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/theme/Header/HeaderNavigation.jsx

@@ -137,7 +137,13 @@ const HeaderNavigation = ({ items, pageWidth }) => {
           {displayedItems.length > 0 &&
             displayedItems.map((item, index) => (
               <Link
-                style={{ width: `${100 / itemsPerPage}%` }}
+                style={{
+                  width: `${
+                    items.length < itemsPerPage
+                      ? 100 / items.length
+                      : 100 / itemsPerPage
+                  }%`,
+                }}
                 className={`lead-navigation-item ${
                   activeItem.title === item.title ? 'active-lead-nav' : ''
                 }`}

src/index.js

@@ -12,6 +12,8 @@ import {
   RAZZLE_FRONTEND_PUBLISHED_AT,
 } from './constants/runtime';
 
+import './slate-styles.css';
+
 export default function applyConfig(config) {
   // Add here your project's configuration here by modifying `config` accordingly
   config = [installBlocks, installFiseFrontend].reduce(
@@ -68,5 +70,46 @@ export default function applyConfig(config) {
     ...config.editForms,
   };
 
+  config.settings.slate = config.settings.slate || {};
+  config.settings.slate.styleMenu = config.settings.slate.styleMenu || {};
+  config.settings.slate.styleMenu.inlineStyles = [
+    ...(config.settings.slate.styleMenu?.inlineStyles || []),
+    { cssClass: 'white-text', label: 'White text' },
+    // blue series
+    { cssClass: 'blue-powder-text', label: 'Blue powder text' },
+    { cssClass: 'blue-lightsteel-text', label: 'Blue lightsteel text' },
+    { cssClass: 'blue-cadet-text', label: 'Blue cadet text' },
+    { cssClass: 'blue-teal-text', label: 'Blue teal text' },
+    { cssClass: 'blue-darkslate-text', label: 'Blue darkslate text' },
+    // green series
+    {
+      cssClass: 'green-blanchedalmond-text',
+      label: 'Green blanchedalmond text',
+    },
+    { cssClass: 'green-tan-text', label: 'Green tan text' },
+    { cssClass: 'green-olivedrab-text', label: 'Green olivedrab text' },
+    { cssClass: 'light-green-text', label: 'Light green text' },
+    { cssClass: 'green-forest-text', label: 'Green forest text' },
+    { cssClass: 'green-darkslate-text', label: 'Green darkslate text' },
+
+    // army series
+    { cssClass: 'army-darkolivegreen-text', label: 'Army darkolivegreen text' },
+    { cssClass: 'army-yellowgreen-text', label: 'Army yellowgreen text' },
+    { cssClass: 'army-olivedrab-text', label: 'Army olivedrab text' },
+    { cssClass: 'army-moccasin-text', label: 'Army moccasin text' },
+    { cssClass: 'army-khaki-text', label: 'Army khaki text' },
+
+    { cssClass: 'vivid-green-text', label: 'Vivid green text' },
+    { cssClass: 'blue-text', label: 'Blue text' },
+    { cssClass: 'red-text', label: 'Red text' },
+    { cssClass: 'yellow-text', label: 'Yellow text' },
+    { cssClass: 'grey-text', label: 'Grey text' },
+  ];
+  // config.settings.slate.styleMenu.blockStyles = [
+  //   ...config.settings.slate.styleMenu.blockStyles,
+  //   { cssClass: 'green-block-text', label: 'Green Text' },
+  //   { cssClass: 'underline-block-text', label: 'Underline Text' },
+  // ];
+
   return config;
 }

src/slate-styles.css

@@ -0,0 +1,93 @@
+.primary-big-text {
+  font-size: 45px;
+  line-height: 45px;
+}
+
+.medium-text {
+  font-size: 30px;
+  line-height: 30px;
+}
+
+.white-text {
+  color: #fff;
+}
+
+/* blue set */
+
+.blue-powder-text {
+  color: #bbdbec;
+}
+
+.blue-lightsteel-text {
+  color: #9dc6d4;
+}
+
+.blue-cadet-text {
+  color: #5a93aa;
+}
+
+.blue-teal-text {
+  color: #005d7b;
+}
+
+.blue-darkslate-text {
+  color: #003d53;
+}
+
+/* green set */
+.green-blanchedalmond-text {
+  color: #ebefc6;
+}
+
+.green-tan-text {
+  color: #bdd494;
+}
+
+.green-olivedrab-text {
+  color: #6bb535;
+}
+
+.green-forest-text {
+  color: #1e8339;
+}
+
+.green-darkslate-text {
+  color: #025e37;
+}
+
+/* army set */
+.army-darkolivegreen-text {
+  color: #464b0b;
+}
+
+.army-yellowgreen-text {
+  color: #b5c234;
+}
+
+.army-olivedrab-text {
+  color: #777b1a;
+}
+
+.army-moccasin-text {
+  color: #f4f1bc;
+}
+
+.army-khaki-text {
+  color: #e1e070;
+}
+
+.blue-text {
+  color: #0070ae;
+}
+
+.red-text {
+  color: #ed1834;
+}
+
+.yellow-text {
+  color: #f2a70e;
+}
+
+.grey-text {
+  color: #8d8d8d;
+}