Skip to content

Commit 9c20c5e

Browse files
danwosdanwos
committed
fix: pydata theme colors and video for the docs
Issue-ref: see eclipse-score#7 * Uses pyData Sphinx theme * Changes default theme colors * Adds Score title video * Add Contribute page for basic doc setup/infos
1 parent d05cb3e commit 9c20c5e

File tree

9 files changed

+485
-8
lines changed

9 files changed

+485
-8
lines changed

‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,12 @@ MODULE.bazel.lock
44

55
# Ruff
66
.ruff_cache
7+
8+
# Python
9+
.venv/
10+
11+
# Environments
12+
.envrc
13+
14+
# Sphinx builds
15+
_build/

‎docs/_assets/css/score.css

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
html {
2+
--pst-font-size-base: 17px;
3+
}
4+
5+
6+
/* SCORE specfic colors
7+
A list of available colro variable names for pyData Sphinx Theme can be found at
8+
https://pydata-sphinx-theme.readthedocs.io/en/stable/_downloads/565fbb3ecf2b3048f5fb3953890ba176/_color.scss
9+
10+
The base color is TEAL */
11+
12+
13+
html[data-theme="light"] {
14+
--pst-color-primary: #547980;
15+
--pst-color-secondary: #45ADA8;
16+
--pst-color-accent: #9DE0AD;
17+
--pst-color-target: #E5FCC2;
18+
--pst-color-on-surface: #594F4F;
19+
--pst-color-on-background: var(--pst-color-secondary);
20+
--pst-color-text-muted: #FFFFFF;
21+
}
22+
23+
html[data-theme="dark"] {
24+
--pst-color-primary: #45ADA8;
25+
--pst-color-secondary: #547980;
26+
--pst-color-accent: #9DE0AD;
27+
--pst-color-target: #E5FCC2;
28+
--pst-color-on-surface: #594F4F;
29+
--pst-color-on-background: var(--pst-color-secondary);
30+
--pst-color-text-muted: #FFFFFF;
31+
}
32+
33+
.search-button-field {
34+
color: var(--pst-color-primary);
35+
}
36+
html .pst-navbar-icon:hover {
37+
border-bottom: max(3px,.1875rem,.12em) solid var(--pst-color-primary) !important;
38+
color: var(--pst-color-primary) !important;
39+
}
40+
41+
.bd-header ul.navbar-nav > li.nav-item.current > .nav-link {
42+
color: var(--pst-color-text-muted) !important;
43+
font-weight: 900 !important;
44+
}
45+
46+
.bd-header ul.navbar-nav > li.nav-item > .nav-link:hover {
47+
color: var(--pst-color-primary);
48+
}
49+
50+
.bd-search input.form-control::placeholder,
51+
.bd-search input.form-control {
52+
color: var(--pst-color-primary) !important;
53+
}
54+
55+
/* SCORE Background video
56+
Source: https://www.imi21.com/background-video-full-screen.php */
57+
58+
div.score_banner {
59+
background-color: var(--pst-color-on-surface);
60+
}
61+
#videowrapper{
62+
position: relative;
63+
overflow: hidden;
64+
}
65+
66+
#fullScreenDiv{
67+
height: 300px;
68+
width: 100%;
69+
padding:0;
70+
margin: 0;
71+
/* background-color: gray;
72+
position: relative; */
73+
container-type: inline-size;
74+
}
75+
76+
#video{
77+
width: 100%;
78+
/* height: auto;
79+
margin: auto;
80+
display: block; */
81+
}
82+
@media (min-aspect-ratio: 16/9) {
83+
#video{
84+
width: 100%;
85+
height:auto;
86+
}
87+
}
88+
89+
#score-title {
90+
width: 100%;
91+
height: 100%;
92+
position: absolute;
93+
top: 0;
94+
left: 0;
95+
display: flex;
96+
justify-content: center;
97+
align-items: center;
98+
flex-direction: column;
99+
color: #ffffff;
100+
/* font-size: 4.5em; */
101+
font-size: 8.0cqw;
102+
font-weight: 900;
103+
animation: fadeIn 3s;
104+
}
105+
106+
html[data-theme="light"] #score-title {
107+
background-color: rgba(0,0,0,0.3);
108+
}
109+
110+
html[data-theme="dark"] #score-title {
111+
background-color: rgba(0,0,0,0.5);
112+
}
113+
114+
#score-subtitle {
115+
font-size: 0.4em;
116+
}
117+
118+
#score-phrase {
119+
font-size: 0.3em;
120+
font-weight: 400;
121+
}
122+
123+
@keyframes fadeIn {
124+
0% { opacity: 0; }
125+
100% { opacity: 1; }
126+
}

‎docs/_assets/score_bg_video.mp4

5.25 MB
Binary file not shown.

‎docs/conf.py

+35-2
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,38 @@
3434
# -- Options for HTML output -------------------------------------------------
3535
# https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
3636

37-
html_theme = "alabaster"
38-
html_theme_options = {"page_width": "auto", "body_max_width": "1500"}
37+
html_theme = "pydata_sphinx_theme" # "alabaster"
38+
# html_theme_options = {"page_width": "auto", "body_max_width": "1500"}
39+
40+
html_static_path = ["_assets"]
41+
html_css_files = [
42+
"css/score.css",
43+
]
44+
45+
html_theme_options = {
46+
"external_links": [
47+
{"name": "Docs", "url": "https://eclipse-score.github.io/score/"},
48+
{
49+
"name": "Eclipse",
50+
"url": "https://projects.eclipse.org/projects/automotive.score",
51+
},
52+
],
53+
"icon_links": [
54+
{
55+
"name": "GitHub",
56+
"url": "https://github.com/eclipse-score",
57+
"icon": "fa-brands fa-github",
58+
"type": "fontawesome",
59+
}
60+
],
61+
"use_edit_page_button": True, # https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/source-buttons.html#add-an-edit-button
62+
"collapse_navigation": True,
63+
}
64+
65+
html_context = {
66+
# "github_url": "https://github.com", # or your GitHub Enterprise site
67+
"github_user": "eclipse-score",
68+
"github_repo": "eclipse-score.github.io",
69+
"github_version": "main",
70+
"doc_path": "docs",
71+
}

‎docs/contribute/_images/score_colors.svg

+210
Loading

0 commit comments

Comments
 (0)