fix: pydata theme colors and video for the docs

Issue-ref: see #007

* Uses pyData Sphinx theme
* Changes default theme colors
* Adds Score title video
* Add Contribute page for basic doc setup/infos

.gitignore

@@ -4,3 +4,12 @@ MODULE.bazel.lock
 
 # Ruff
 .ruff_cache
+
+# Python
+.venv/
+
+# Environments
+.envrc
+
+# Sphinx builds
+_build/

docs/_assets/css/score.css

@@ -0,0 +1,126 @@
+html {
+    --pst-font-size-base: 17px;
+}
+
+
+/*  SCORE specfic colors 
+    A list of available colro variable names for pyData Sphinx Theme can be found at
+    https://pydata-sphinx-theme.readthedocs.io/en/stable/_downloads/565fbb3ecf2b3048f5fb3953890ba176/_color.scss 
+    
+    The base color is TEAL */
+
+
+html[data-theme="light"] {
+    --pst-color-primary: #547980;
+    --pst-color-secondary: #45ADA8;
+    --pst-color-accent: #9DE0AD;
+    --pst-color-target: #E5FCC2;
+    --pst-color-on-surface: #594F4F;
+    --pst-color-on-background: var(--pst-color-secondary);
+    --pst-color-text-muted: #FFFFFF;
+}
+
+html[data-theme="dark"] {
+    --pst-color-primary: #45ADA8;
+    --pst-color-secondary: #547980;
+    --pst-color-accent: #9DE0AD;
+    --pst-color-target: #E5FCC2;
+    --pst-color-on-surface: #594F4F;
+    --pst-color-on-background: var(--pst-color-secondary);
+    --pst-color-text-muted: #FFFFFF;
+}
+
+.search-button-field {
+    color: var(--pst-color-primary);
+}
+html .pst-navbar-icon:hover {
+    border-bottom: max(3px,.1875rem,.12em) solid var(--pst-color-primary) !important;
+    color: var(--pst-color-primary) !important;
+  }
+
+.bd-header ul.navbar-nav > li.nav-item.current > .nav-link {
+    color: var(--pst-color-text-muted) !important;
+    font-weight: 900 !important;
+}
+
+.bd-header ul.navbar-nav > li.nav-item > .nav-link:hover {
+    color: var(--pst-color-primary);
+  }
+
+.bd-search input.form-control::placeholder,
+.bd-search input.form-control {
+    color: var(--pst-color-primary) !important;
+}
+
+/* SCORE Background video
+   Source: https://www.imi21.com/background-video-full-screen.php */
+
+div.score_banner {
+    background-color: var(--pst-color-on-surface);
+}
+#videowrapper{  
+    position: relative;
+    overflow: hidden;
+} 
+
+#fullScreenDiv{
+    height: 300px;
+    width: 100%;
+    padding:0;
+    margin: 0;
+    /* background-color: gray;
+    position: relative; */
+    container-type: inline-size;
+}
+
+#video{    
+    width: 100%; 
+    /* height: auto;
+    margin: auto;
+    display: block; */
+}
+@media (min-aspect-ratio: 16/9) {
+  #video{
+    width: 100%; 
+    height:auto;
+  }
+}
+
+#score-title {
+    width: 100%; 
+    height: 100%;
+    position: absolute; 
+    top: 0; 
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: #ffffff;
+    /* font-size: 4.5em; */
+    font-size: 8.0cqw;
+    font-weight: 900;
+    animation: fadeIn 3s;
+}
+
+html[data-theme="light"] #score-title {
+    background-color: rgba(0,0,0,0.3);
+}
+
+html[data-theme="dark"] #score-title {
+    background-color: rgba(0,0,0,0.5);
+}
+
+#score-subtitle {
+    font-size: 0.4em;
+}
+
+#score-phrase {
+    font-size: 0.3em;
+    font-weight: 400;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }

docs/conf.py

@@ -34,5 +34,38 @@
 # -- Options for HTML output -------------------------------------------------
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
 
-html_theme = "alabaster"
-html_theme_options = {"page_width": "auto", "body_max_width": "1500"}
+html_theme = "pydata_sphinx_theme"  #  "alabaster"
+# html_theme_options = {"page_width": "auto", "body_max_width": "1500"}
+
+html_static_path = ["_assets"]
+html_css_files = [
+    "css/score.css",
+]
+
+html_theme_options = {
+    "external_links": [
+        {"name": "Docs", "url": "https://eclipse-score.github.io/score/"},
+        {
+            "name": "Eclipse",
+            "url": "https://projects.eclipse.org/projects/automotive.score",
+        },
+    ],
+    "icon_links": [
+        {
+            "name": "GitHub",
+            "url": "https://github.com/eclipse-score",
+            "icon": "fa-brands fa-github",
+            "type": "fontawesome",
+        }
+    ],
+    "use_edit_page_button": True,  # https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/source-buttons.html#add-an-edit-button
+    "collapse_navigation": True,
+}
+
+html_context = {
+    # "github_url": "https://github.com", # or your GitHub Enterprise site
+    "github_user": "eclipse-score",
+    "github_repo": "eclipse-score.github.io",
+    "github_version": "main",
+    "doc_path": "docs",
+}