docs(colours): adjust logos heights

eea · Oct 4, 2022 · 854d4fb · 854d4fb
1 parent 0d4240c
commit 854d4fb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/website/docs/webdev/3-Guidelines/2-colours.mdx b/website/docs/webdev/3-Guidelines/2-colours.mdx
@@ -247,7 +247,6 @@ All thematic platforms use EEA Supplementary **colors, state colors, link colors
 
 <div className="thematicLogos">
 
-
 ![](../md_components/static/BISE.png)
 
 </div>
@@ -437,7 +436,11 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 ### Forest Information System
 
- ![](../md_components/static/FISE_logo.svg)
+<div className="thematicLogosBig">
+
+![](../md_components/static/FISE_logo.svg)
+
+</div>
 
 #### Brand Colors 
 
@@ -558,8 +561,13 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
 
 ### Wise Freshwater
+
+<div className="thematicLogosSmall">
+
 ![](../md_components/static/WISEF.png)
 
+</div>
+
 
 #### Brand Colors 
 
@@ -682,8 +690,12 @@ This color should be eye-catching but not harsh. It can be liberally applied to
 
 ### Wise Marine
 
+<div className="thematicLogos">
+
 ![](../md_components/static/WISEM.png)
 
+</div>
+
 #### Brand Colors 
 
 This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary color is the color displayed most frequently across your screens and components. Brand colors are extracted from the Wise Marine logo in order to help users to easily identify the brand.

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -328,3 +328,15 @@ iframe {
   justify-content: center;
 }
 
+.thematicLogos img {
+  height: 130px
+}
+
+.thematicLogosSmall img {
+  height: 120px
+}
+
+.thematicLogosBig img {
+  height: 220px
+}
+