Skip to content

Commit

Permalink
refactor(docusaurus): fix side menu / moved more content in palette p…
Browse files Browse the repository at this point in the history 
…artial
  • Loading branch information
@g-stamatis
g-stamatis committed Sep 13, 2022
1 parent 65c240e commit f5b7077
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 281 deletions.
96 changes: 1 addition & 95 deletions website/docs/webdev/3-Guidelines/2-colours.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: ""
order: 2
---

import EEAColorPalette from './partials/_markdown_eea_color_palette.mdx';
import EEAColorPalette from './_partials/_markdown-eea-color-palette.mdx';

## Communication is key

Expand Down Expand Up @@ -414,97 +414,3 @@ For example, Green has a positive connotation. We use Green to convey success, c
</table>

<EEAColorPalette />

<br />
<div style={ {width:'100%', float:'left', marginBottom: '40px'}}>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-0)'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#FFFFFF<br/>grey-0<br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-1)'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#F9F9F9<br/>grey-1<br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-2)'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#E6E7E8<br/>grey-2<br/>AA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-3)'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#BCBEC0<br/>grey-3<br/>AA L</div>
</td>
</tr>
</tbody> </table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-4)'}} className="small-color-box-td">
<div style={{color:'#FFFFFF'}} className="small-color-box">#747678<br/>grey-4<br/>AA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-5)'}} className="small-color-box-td">
<div style={{color:'white'}} className="small-color-box">#323232<br/>grey-5<br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}}>
<tbody>
<tr>
<td style={{backgroundColor:'var(--grey-6)'}} className="small-color-box-td">
<div style={{color:'white'}} className="small-color-box">#000000<br/>grey-6<br/>AAA</div>
</td>
</tr>
</tbody>
</table>
</div>

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
30 changes: 1 addition & 29 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: ""
order: 1
---

import EEAColorPalette from '../partials/_markdown_eea_color_palette.mdx';
import EEAColorPalette from '../_partials/_markdown-eea-color-palette.mdx';

![](../../md_components/static/BISE.png)

Expand Down Expand Up @@ -406,31 +406,3 @@ For example, Green has a positive connotation. We use Green to convey success, c
</table>

<EEAColorPalette />

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
30 changes: 1 addition & 29 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ order: 4

---

import EEAColorPalette from '../partials/_markdown_eea_color_palette.mdx';
import EEAColorPalette from '../_partials/_markdown-eea-color-palette.mdx';

![](../../md_components/static/FISE_logo.svg)

Expand Down Expand Up @@ -344,31 +344,3 @@ For example, Green has a positive connotation. We use Green to convey success, c
</table>

<EEAColorPalette />

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
32 changes: 2 additions & 30 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/WiseFreshwater.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: ""
order: 3
---

import EEAColorPalette from '../partials/_markdown_eea_color_palette.mdx';
import EEAColorPalette from '../_partials/_markdown-eea-color-palette.mdx';

![](../../md_components/static/WISEF.png)

Expand Down Expand Up @@ -344,32 +344,4 @@ For example, Green has a positive connotation. We use Green to convey success, c
</tbody>
</table>

<EEAColorPalette />

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
<EEAColorPalette />
98 changes: 2 additions & 96 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/WiseMarine.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: ""
order: 2
---

import EEAColorPalette from '../partials/_markdown_eea_color_palette.mdx';
import EEAColorPalette from '../_partials/_markdown-eea-color-palette.mdx';

![](../../md_components/static/WISEM.png)

Expand Down Expand Up @@ -345,98 +345,4 @@ For example, Green has a positive connotation. We use Green to convey success, c
</tbody>
</table>

<EEAColorPalette />

<br />
<div style={ {width:'100%', float:'left', marginBottom: '40px'}}>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#FFFFFF'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#FFFFFF <br/> grey-0 <br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#F9F9F9'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#F9F9F9 <br/> grey-1 <br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#E6E7E8'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#E6E7E8 <br/> grey-2<br/>AA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#BCBEC0'}} className="small-color-box-td">
<div style={{color:'#3D5265'}} className="small-color-box">#BCBEC0 <br/> grey-3<br/>AA L</div>
</td>
</tr>
</tbody> </table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#747678'}} className="small-color-box-td">
<div style={{color:'#FFFFFF'}} className="small-color-box">#747678 <br/> grey-4<br/>AA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#323232'}} className="small-color-box-td">
<div style={{color:'white'}} className="small-color-box">#323232 <br/> grey-5 <br/>AAA</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#000000'}} className="small-color-box-td">
<div style={{color:'white'}} className="small-color-box">#000000 <br/> grey-6 <br/>AAA</div>
</td>
</tr>
</tbody>
</table>
</div>

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
<EEAColorPalette />
30 changes: 29 additions & 1 deletion .../partials/_markdown_eea_color_palette.mdx → ..._partials/_markdown-eea-color-palette.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -535,4 +535,32 @@ Not all colors have to be used - sometimes a simple color scheme works best. Acc
</tr>
</tbody>
</table>
</div>
</div>
<br />

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/

**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
2 changes: 1 addition & 1 deletion website/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ module.exports = {
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
exclude: ['**/md_components/**'],
exclude: ['**/md_components/**','**/_partials/**' ],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
Expand Down

0 comments on commit f5b7077

Please sign in to comment.