Add sprout logo brand kit and apply website identity (#1)

theme/base.html

@@ -41,18 +41,27 @@
     <meta property="og:locale:alternate" content="pt">
     <meta property="og:type" content="website">
     <meta name=description content="A Open Source community for sharing knowledge">
-    <meta name=twitter:card content="summary">
+    <meta name=twitter:card content="summary_large_image">
     <meta name=twitter:creator content>
-    <meta name=twitter:title content>
-    <meta name=twitter:image content="/images/thumbnail.png">
+    <meta name=twitter:title content="{{ config.site_name }}">
+    <meta name=twitter:image content="{{ config.site_url.rstrip('/') }}/images/logos/social-card.png">
+    <meta name=twitter:image:alt content="Open Research Network: an open gold O with a green-teal sprout">
     <meta property="og:url" content="/">
-    <meta property="og:title" content>
+    <meta property="og:title" content="{{ config.site_name }}">
     <meta property="og:description" content="A Open Source community for sharing knowledge">
-    <meta property="og:image" content="/images/thumbnail.png">
+    <meta property="og:image" content="{{ config.site_url.rstrip('/') }}/images/logos/social-card.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:image:alt" content="Open Research Network: an open gold O with a green-teal sprout">
     <meta name=keywords content="open science,data science,latam">
-    <link rel=apple-touch-icon sizes=180x180 href=/icons/apple-touch-icon.png>
-    <link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png>
-    <link rel=manifest href=/icons/site.webmanifest>
+    <link rel="icon" type="image/svg+xml" href="{{ 'icons/favicon.svg'|url }}">
+    <link rel="icon" type="image/x-icon" href="{{ 'icons/favicon.ico'|url }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ 'icons/favicon-32x32.png'|url }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ 'icons/favicon-16x16.png'|url }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ 'icons/apple-touch-icon.png'|url }}">
+    <link rel="manifest" href="{{ 'icons/site.webmanifest'|url }}">
+    <meta name="theme-color" content="#102723">
+    <meta name="msapplication-config" content="{{ 'icons/browserconfig.xml'|url }}">
     <link rel=canonical href=/>
     <link rel=alternate type=application/rss+xml href=/index.xml title="Open Research Network">
     <link rel=alternate type=application/json href=/js/index.json title="Open Research Network">
@@ -63,7 +72,7 @@
     <header class="nav_header">
       <nav class="nav">
         <a href="/" class="nav_brand nav_item" title="Open Research Network">
-          <img src="/images/logos/logo.png" class=logo alt="Open Research Network">
+          <img src="{{ 'images/logos/logo.svg'|url }}" class="logo" alt="Open Research Network" width="1128" height="422">
           <div class=nav_close>
             <div>
               <svg class="icon">
@@ -264,7 +273,9 @@
     <footer class=footer>
       <div class="footer_inner wrap pale site_footer_inner">
         <div class="footer_identity">
-          <strong>Open Research Network</strong>
+          <a href="{{ '.'|url }}" class="footer_brand" title="Open Research Network home">
+            <img src="{{ 'images/logos/logo-reverse.svg'|url }}" alt="Open Research Network" width="1128" height="422" loading="lazy">
+          </a>
           <span>Building an open, collaborative research ecosystem.</span>
         </div>
         <div class="footer_legal">

theme/css/index.css

@@ -58,7 +58,7 @@ a.nav_item[title=Donate] {
 
 .nav_brand img,
 .nav_brand .logo {
-  height: 3.05rem;
+  height: 3.75rem;
   max-width: 13.25rem;
   object-fit: contain;
   width: auto;
@@ -273,10 +273,17 @@ main.main_with_submenu {
   gap: 0.18rem;
 }
 
-.footer_identity strong {
-  color: #ffffff;
-  font-size: 1rem;
-  letter-spacing: -0.01em;
+.footer_brand {
+  display: inline-flex;
+  justify-self: start;
+  margin-bottom: 0.55rem;
+}
+
+.footer_brand img {
+  display: block;
+  height: auto;
+  width: 12.5rem;
+  max-width: 100%;
 }
 
 .footer_identity span {
@@ -1576,7 +1583,7 @@ main.main_with_submenu {
 
   .nav_brand img,
   .nav_brand .logo {
-    height: 2.55rem;
+    height: 3.75rem;
     max-width: 11rem;
   }
 

theme/icons/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <square150x150logo src="mstile-150x150.png"/>
+            <TileColor>#102723</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

theme/icons/site.webmanifest

@@ -1,19 +1,26 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Open Research Network",
+    "short_name": "ORN",
+    "start_url": "../",
+    "scope": "../",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-256x256.png",
+            "src": "android-chrome-256x256.png",
             "sizes": "256x256",
             "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
+    "theme_color": "#102723",
     "background_color": "#ffffff",
     "display": "standalone"
 }

theme/images/logos/README.md

@@ -0,0 +1,94 @@
+# Open Research Network logo kit
+
+The approved identity is an open gold O containing a green-teal sprout, with
+**Open / Research / Network** in three lines beside it. This kit uses the
+website palette and retains the approved letterforms as editable vector paths.
+No fonts, linked images, or external resources are needed to display the logos.
+
+![Brand variants and palette](brand-overview.png)
+
+## Choose a layout
+
+| File prefix | Layout | Typical use |
+| --- | --- | --- |
+| `logo` | Symbol at left; three-line name at right | Primary identity, website header, documents |
+| `logo-stacked` | Symbol above the three-line name | Narrow or portrait compositions |
+| `symbol` | Open O and sprout only, square canvas | Favicon, social avatar, app icon |
+| `wordmark` | Three-line name only | Supporting use where the symbol already appears |
+
+Every layout has four color treatments:
+
+| Suffix | Treatment | Background |
+| --- | --- | --- |
+| No suffix | Gold O, green-teal sprout, dark green name | White or very light |
+| `-reverse` | Gold O, green-teal sprout, white name | Dark, uncluttered |
+| `-black` | Entire mark in pure black | Light; single-ink production |
+| `-white` | Entire mark in white | Dark; reversed single-ink production |
+
+Reverse and white files have transparent backgrounds. Their white elements
+may be invisible in a preview application with a white canvas.
+
+## Formats and folders
+
+- **SVG:** resolution-independent, transparent, outlined artwork. Use on the
+  website and edit in Illustrator, Inkscape, Affinity Designer, or Figma.
+- **`source/logo-master.svg`:** canonical editable path master. Update it first
+  when changing the actual design, then regenerate the exports.
+- **`png/`:** transparent sRGB PNGs at 1024 and 2048 pixels wide for every
+  layout and treatment. `logo.png` is the 1024-pixel primary compatibility copy.
+- **`print/*.pdf` (no `-cmyk` suffix):** vector PDFs preserving the digital RGB
+  palette for presentations, general document use, and printer-managed conversion.
+- **`print/*-cmyk.pdf`:** vector PDFs with explicit DeviceCMYK process fills,
+  for full-color and black versions of each layout. Black uses only K.
+- **`print/*.eps`:** legacy vector EPS versions in RGB, for full-color and
+  black artwork. Use PDF when the production workflow supports it.
+- **`social-card.png`:** 1200 x 630 image with a light background for link previews.
+- **`brand-overview.png`:** visual reference showing the four primary treatments.
+- **`palette.json`:** machine-readable digital palette.
+- **`../../icons/`:** SVG favicon, multi-size ICO, 16/32/48-pixel PNG favicons,
+  180-pixel Apple icon, 192/256/512-pixel launcher icons, and a Windows tile.
+
+The PDFs use a nominal RGB-to-CMYK process conversion, not a press-specific ICC
+profile or certified PDF/X preset. For color-critical print, have the printer
+apply the profile for the chosen press and paper. Digital HEX colors are the
+reference; do not treat the process conversion as a Pantone specification.
+
+## Palette
+
+Colors match `--orn-gold`, `--orn-teal-2`, and `--orn-heading` in
+`theme/css/index.css`.
+
+| Role | HEX | RGB | Nominal CMYK (%) |
+| --- | --- | --- | --- |
+| Gold O | `#FFCC00` | 255, 204, 0 | 0, 20, 100, 0 |
+| Green-teal sprout | `#14A389` | 20, 163, 137 | 88, 0, 16, 36 |
+| Dark green name | `#102723` | 16, 39, 35 | 59, 0, 10, 85 |
+
+## Use and spacing
+
+- Prefer the primary full-color logo on white. Use reverse artwork on the
+  site's dark green surfaces. Use the symbol where a full name is too small.
+- Leave at least half the thickness of the O's gold stroke clear around the
+  visible artwork; more space is encouraged. SVG canvas padding is not the
+  complete clear-space allowance.
+- Recommended minimum: 160 CSS pixels wide for the primary lockup and
+  24 pixels wide for the symbol. The dedicated favicon is the small-size exception.
+- Preserve the aspect ratio, diagonal opening, sprout, and lettering. Do not
+  stretch, recolor individual letters, add effects, or place over busy imagery.
+- The sprout stays green-teal; gold is the O's fill, not a background panel.
+
+## Rebuild exports
+
+From the repository root, in a Python environment with system Cairo:
+
+```sh
+python -m pip install CairoSVG==2.9.1 Pillow==13.0.0 pypdf fonttools
+python tools/export_logos.py
+```
+
+The generator reads the outlined master and recreates all supplied layouts,
+color variants, raster and print exports, social image, and icon files. It is
+an optional design-production tool; it is not required for the MkDocs build.
+
+The older `logo-idea.png`, `logo-discord.png`, and `logo.xcf` are historical
+assets retained from the repository. They are not current logo masters.