Merge pull request #40 from genai-impact/docs/branding

Branding of the documentation

README.md

@@ -1,7 +1,11 @@
-EcoLogits
-============
-
-**EcoLogits** tracks and estimates the energy consumption and environmental impacts of using generative AI models through APIs.
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./docs/assets/logo_dark.png">
+    <img alt="EcoLogits" width="500" height="118" src="./docs/assets/logo_light.png">
+  </picture>
+</p>
+
+🌱 **EcoLogits** tracks the energy and environmental footprint of using generative AI models through APIs.
 
 
 ## ⚙️ Installation

docs/coming_soon.md

@@ -0,0 +1,4 @@
+
+!!! warning
+
+    This page is under construction.

docs/css/extra.css

@@ -0,0 +1,32 @@
+/*:root {*/
+/*  --md-primary-fg-color: #0b3b36;*/
+/*  !*--md-primary-fg-color: #0b3b36;*!*/
+/*  !*--md-primary-fg-color--light: #ff0000;*!*/
+/*  !*--md-primary-fg-color--dark: #ffea00;*!*/
+/*  --md-primary-bg-color--light: #0b3b36*/
+/*}*/
+
+/*
+Dark green: 0b3b36
+Light green: 00bf63
+*/
+
+
+[data-md-color-scheme="ecologits"] {
+  --md-primary-fg-color: #0b3b36;
+  --md-typeset-a-color: #00914b;
+  --md-accent-fg-color: #00bf63;
+}
+
+[data-md-color-scheme="ecologits"] img[src$="#only-dark"],
+[data-md-color-scheme="ecologits"] img[src$="#gh-dark-mode-only"] {
+  display: none; /* Hide dark images in light mode */
+}
+
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: #0b3b36;
+  --md-hue: 200;
+  --md-default-fg-color: hsla(var(--md-hue), 15%, 95%, 1);
+  --md-typeset-a-color: #00bf63 !important;
+  --md-accent-fg-color: #008343;
+}

docs/index.md

@@ -1,6 +1,12 @@
-# Getting Started
+#
+
+<figure markdown="span">
+  ![EcoLogits](assets/logo_light.png#only-light)
+  ![EcoLogits](assets/logo_dark.png#only-dark)
+</figure>
+
+**EcoLogits** tracks the energy consumption and environmental impacts of using generative AI models through APIs.
 
-**EcoLogits** tracks and estimates the energy consumption and environmental impacts of using generative AI models through APIs.
 
 ## Installation
 

docs/js/katex.js

@@ -0,0 +1,10 @@
+document$.subscribe(({ body }) => {
+  renderMathInElement(body, {
+    delimiters: [
+      { left: "$$",  right: "$$",  display: true },
+      { left: "$",   right: "$",   display: false },
+      { left: "\\(", right: "\\)", display: false },
+      { left: "\\[", right: "\\]", display: true }
+    ],
+  })
+})

mkdocs.yml

@@ -3,47 +3,59 @@ site_url: https://ecologits.ai
 repo_name: genai-impact/ecologits
 repo_url: https://github.com/genai-impact/ecologits
 
-
 nav:
-  - 'Getting Started': index.md
+  - 'Get Started':
+    - 'Welcome to EcoLogits': index.md
+  - 'Tutorial': coming_soon.md
+  - 'Methodology': coming_soon.md
+  - 'API Reference': coming_soon.md
 
 
 theme:
   name: material
-  logo: assets/logo.png
+  logo: assets/leaf.svg
+  favicon: assets/leaf.svg
   font:
     text: Roboto
   palette:
-    - scheme: default
-      primary: green
+    - scheme: ecologits
+      primary: custom
+      accsent: custom
       toggle:
         icon: material/lightbulb-outline
         name: Switch to dark mode
     - scheme: slate
-      primary: green
       toggle:
         icon: material/lightbulb
         name: Switch to light mode
   features:
+    - navigation.tabs
     - content.tabs.link
     - content.code.copy
     - content.code.annotate
 
+extra_css:
+  - css/extra.css
+  - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
 
+extra_javascript:
+  - js/katex.js
+  - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js
+  - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js
 
 watch:
   - docs
 
-
 plugins:
   - search
 
-
 markdown_extensions:
   - attr_list
   - md_in_html
   - tables
   - admonition
+  - pymdownx.arithmatex:
+      generic: true
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
@@ -57,4 +69,3 @@ markdown_extensions:
   - pymdownx.details
   - pymdownx.tabbed:
       alternate_style: true
-