WEB: Adding new pandas logo (#28948)

Author: datapythonista

web/pandas/_templates/layout.html

@@ -12,6 +12,7 @@
         <title>pandas - Python Data Analysis Library</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel='shortcut icon' type='image/x-icon' href='{{ base_url }}/static/img/favicon.ico'/>
         <link rel="stylesheet"
               href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
               integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"

web/pandas/about/citing.md

@@ -33,14 +33,91 @@ If you use _pandas_ for a scientific publication, we would appreciate citations
 
 When using the project name _pandas_, please use it in lower case, even at the beginning of a sentence.
 
-The official logo of _pandas_ is:
+The official logos of _pandas_ are:
 
-![]({{ base_url }}/static/img/pandas.svg)
+### Primary logo
 
-You can download a `svg` version of the logo [here]({{ base_url }}/static/img/pandas.svg).
+<table class="table logo">
+    <tr>
+        <td>
+            <img alt="" src="{{ base_url }}/static/img/pandas.svg"/>
+        </td>
+        <td style="background-color: #150458">
+            <img alt="" src="{{ base_url }}/static/img/pandas_white.svg"/>
+        </td>
+    </tr>
+</table>
+
+### Secondary logo
+
+<table class="table logo">
+    <tr>
+        <td>
+            <img alt="" src="{{ base_url }}/static/img/pandas_secondary.svg"/>
+        </td>
+        <td style="background-color: #150458">
+            <img alt="" src="{{ base_url }}/static/img/pandas_secondary_white.svg"/>
+        </td>
+    </tr>
+</table>
+
+### Logo mark
+
+<table class="table logo">
+    <tr>
+        <td>
+            <img alt="" src="{{ base_url }}/static/img/pandas_mark.svg"/>
+        </td>
+        <td style="background-color: #150458">
+            <img alt="" src="{{ base_url }}/static/img/pandas_mark_white.svg"/>
+        </td>
+    </tr>
+</table>
+
+### Logo usage
+
+The pandas logo is available in full color and white accent.
+The full color logo should only appear against white backgrounds.
+The white accent logo should go against contrasting color background.
 
 When using the logo, please follow the next directives:
 
-- Leave enough margin around the logo
+- Primary logo should never be seen under 1 inch in size for printing and 72px for web
+- The secondary logo should never be seen under 0.75 inch in size for printing and 55px for web
+- Leave enough margin around the logo (leave the height of the logo in the top, bottom and both sides)
 - Do not distort the logo by changing its proportions
 - Do not place text or other elements on top of the logo
+
+### Colors
+
+<table class="table">
+    <tr>
+        <td style="text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+                <circle cx="50" cy="50" r="50" fill="#150458"/>
+            </svg>
+            <br/>
+            <b style="color: #150458;">Blue</b><br/>
+            RGB: R21 G4 B88<br/>
+            HEX: #150458
+        </td>
+        <td style="text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+                <circle cx="50" cy="50" r="50" fill="#ffca00"/>
+            </svg>
+            <br/>
+            <b style="color: #150458;">Yellow</b><br/>
+            RGB: R255 G202 B0<br/>
+            HEX: #FFCA00
+        </td>
+        <td style="text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+                <circle cx="50" cy="50" r="50" fill="#e70488"/>
+            </svg>
+            <br/>
+            <b style="color: #150458;">Pink</b><br/>
+            RGB: R231 G4 B136<br/>
+            HEX: #E70488
+        </td>
+    </tr>
+</table>

web/pandas/config.yml

@@ -16,7 +16,7 @@ main:
   - tables
   - fenced_code
 static:
-  logo: # /static/img/pandas.svg
+  logo: /static/img/pandas_white.svg
   css:
   - /static/css/pandas.css
 navbar:

web/pandas/static/css/pandas.css

@@ -31,7 +31,7 @@ code {
     color: #130654;
 }
 a.navbar-brand img {
-    max-height: 2em;
+    height: 3rem;
 }
 div.card {
     margin: 0 0 .2em .2em !important;
@@ -52,3 +52,9 @@ div.card .card-title {
 .navbar-dark .navbar-nav .nav-link:hover {
     color: white;
 }
+table.logo td {
+    text-align: center;
+}
+table.logo img {
+    height: 4rem;
+}