Skip to content

Commit dd92209

Browse files
Harshal6927adhtruong
Harshal6927
authored and
adhtruong
committed
chore: update docs ui (#748)
1 parent c7ad8e1 commit dd92209

File tree

4 files changed

+172
-80
lines changed

4 files changed

+172
-80
lines changed

‎docs/_static/custom.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* Theme color definitions */
2+
:root {
3+
--brand-font-size-xl: 6rem;
4+
--brand-font-size-lg: 5rem;
5+
--brand-font-size-md: 4rem;
6+
--brand-font-size-sm: 3rem;
7+
--brand-font-size-xs: 2.2rem;
8+
--brand-font-size-xxs: 1.6rem;
9+
10+
--brand-letter-spacing-xl: 0.25em;
11+
--brand-letter-spacing-lg: 0.2em;
12+
--brand-letter-spacing-md: 0.1em;
13+
--brand-letter-spacing-sm: 0.05em;
14+
--brand-letter-spacing-xs: 0.03em;
15+
}
16+
17+
html.light {
18+
--sl-color-primary: #202235;
19+
--sl-color-secondary: #edb641;
20+
--sl-color-accent: #ffd480;
21+
--sl-color-text-1: var(--sl-color-primary);
22+
--sl-color-text-2: var(--sl-color-secondary);
23+
--sy-c-foot-background: #f0f0f0;
24+
--yue-c-text: #000;
25+
--brand-text-glow:
26+
0 0 10px rgba(32, 34, 53, 0.3), 0 0 20px rgba(32, 34, 53, 0.2),
27+
0 0 30px rgba(237, 182, 65, 0.1);
28+
}
29+
30+
html.dark {
31+
--sl-color-text-1: var(--sl-color-secondary);
32+
--sy-c-foot-background: black;
33+
--yue-c-text: #fff;
34+
--brand-text-glow:
35+
0 0 10px rgba(237, 182, 65, 0.4), 0 0 20px rgba(237, 182, 65, 0.3),
36+
0 0 30px rgba(237, 182, 65, 0.2);
37+
}
38+
39+
.title-with-logo {
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
margin: 5rem auto 4rem;
44+
width: 100%;
45+
padding: 0 2rem;
46+
user-select: none;
47+
-webkit-user-select: none;
48+
-moz-user-select: none;
49+
-ms-user-select: none;
50+
}
51+
52+
html[class] .title-with-logo .brand-text {
53+
font-family: var(--sl-font-sans);
54+
font-weight: 300;
55+
font-size: var(--brand-font-size-lg);
56+
letter-spacing: var(--brand-letter-spacing-xl);
57+
text-transform: uppercase;
58+
text-align: center;
59+
line-height: 1.4;
60+
max-width: 100%;
61+
white-space: nowrap;
62+
word-break: break-word;
63+
word-wrap: break-word;
64+
overflow-wrap: break-word;
65+
hyphens: auto;
66+
-webkit-hyphens: auto;
67+
-ms-hyphens: auto;
68+
transition:
69+
color var(--sl-transition),
70+
text-shadow var(--sl-transition);
71+
}
72+
73+
html.light .title-with-logo .brand-text {
74+
color: var(--sl-color-text-1);
75+
text-shadow: var(--brand-text-glow);
76+
}
77+
78+
html.dark .title-with-logo .brand-text {
79+
color: var(--sl-color-text-2);
80+
text-shadow: var(--brand-text-glow);
81+
}
82+
83+
/* Button container wrapping */
84+
.buttons.wrap {
85+
display: flex;
86+
flex-wrap: wrap;
87+
gap: 0.5rem;
88+
}
89+
90+
.buttons.wrap .btn-no-wrap {
91+
flex: 0 0 auto;
92+
}
93+
94+
/* Large screens */
95+
@media (min-width: 1200px) {
96+
html[class] .title-with-logo .brand-text {
97+
font-size: var(--brand-font-size-xl);
98+
}
99+
}
100+
101+
/* Medium-small screens */
102+
@media (max-width: 991px) {
103+
html[class] .title-with-logo .brand-text {
104+
font-size: var(--brand-font-size-md);
105+
letter-spacing: var(--brand-letter-spacing-lg);
106+
}
107+
}
108+
109+
/* Small screens */
110+
@media (max-width: 767px) {
111+
html[class] .title-with-logo .brand-text {
112+
font-size: var(--brand-font-size-sm);
113+
letter-spacing: var(--brand-letter-spacing-md);
114+
}
115+
116+
html[class] .title-with-logo {
117+
margin: 2rem auto 1.5rem;
118+
}
119+
}
120+
121+
/* Extra small screens */
122+
@media (max-width: 480px) {
123+
html[class] .title-with-logo .brand-text {
124+
font-size: var(--brand-font-size-xs);
125+
letter-spacing: var(--brand-letter-spacing-sm);
126+
line-height: 1.2;
127+
}
128+
129+
html[class] .title-with-logo {
130+
margin: 1.5rem auto 1rem;
131+
padding: 0 1rem;
132+
}
133+
}
134+
135+
/* Smallest screens */
136+
@media (max-width: 360px) {
137+
html[class] .title-with-logo .brand-text {
138+
font-size: var(--brand-font-size-xxs);
139+
letter-spacing: var(--brand-letter-spacing-xs);
140+
}
141+
}
142+
143+
/* Preserve existing layout styles */
144+
#badges img {
145+
margin-top: 0;
146+
margin-bottom: 0;
147+
}
148+
149+
#badges {
150+
display: flex;
151+
flex-wrap: wrap;
152+
gap: 10px;
153+
margin-bottom: 3em;
154+
}

‎docs/_static/logo-default.png‎

35.9 KB
Loading

‎docs/conf.py‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,15 @@
113113
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
114114

115115
# -- Style configuration -----------------------------------------------------
116-
html_theme = "litestar_sphinx_theme"
116+
html_theme = "shibuya"
117117
html_title = "Polyfactory"
118-
# pygments_style = "lightbulb"
118+
pygments_style = "dracula"
119119
todo_include_todos = True
120120

121+
html_favicon = "_static/logo-default.png"
121122
html_static_path = ["_static"]
122123
templates_path = ["_templates"]
123-
html_js_files = ["versioning.js"]
124-
html_css_files = ["style.css"]
124+
html_css_files = ["custom.css"]
125125

126126
html_show_sourcelink = True
127127
html_copy_source = True
@@ -131,18 +131,17 @@
131131
"source_user": "litestar-org",
132132
"source_repo": "polyfactory",
133133
"current_version": "latest",
134-
"versions": [
135-
("latest", "/latest"),
136-
("development", "/main"),
137-
],
138134
"version": release,
139135
}
140136

141137
html_theme_options = {
142138
"logo_target": "/",
143-
"github_repo_name": "polyfactory",
139+
"accent_color": "amber",
144140
"github_url": "https://github.com/litestar-org/polyfactory",
141+
"discord_url": "https://discord.gg/litestar",
145142
"navigation_with_keys": True,
143+
"light_logo": "_static/logo-default.png",
144+
"dark_logo": "_static/logo-default.png",
146145
"nav_links": [
147146
{"title": "Home", "url": "index"},
148147
{
@@ -246,5 +245,4 @@ def delayed_setup(app: Sphinx) -> None:
246245

247246
def setup(app: Sphinx) -> dict[str, bool]:
248247
app.connect("builder-inited", delayed_setup, priority=0)
249-
app.setup_extension("litestar_sphinx_theme")
250248
return {"parallel_read_safe": True, "parallel_write_safe": True}

‎docs/index.rst‎

Lines changed: 10 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,13 @@
44
.. container::
55
:name: home-head
66

7-
.. image:: https://raw.githubusercontent.com/litestar-org/branding/main/assets/Branding%20-%20SVG%20-%20Transparent/Badge%20-%20Blue%20and%20Yellow.svg
8-
:alt: Litestar Framework
9-
:width: 400
10-
:height: 400
11-
127
.. container::
138

149
.. raw:: html
1510

16-
<h1>Polyfactory</h1>
11+
<div class="title-with-logo">
12+
<div class="brand-text">Polyfactory</div>
13+
</div>
1714

1815
.. container:: badges
1916
:name: badges
@@ -48,12 +45,14 @@
4845
hints and supporting :doc:`dataclasses <python:library/dataclasses>`, :class:`TypedDicts <typing.TypedDict>`,
4946
Pydantic models, :class:`msgspec Struct's <msgspec.Struct>` and more.
5047

51-
.. container:: buttons
48+
.. container:: buttons wrap
49+
50+
.. raw:: html
5251

53-
:doc:`Get Started <getting-started>`
54-
`Usage Docs <usage>`_
55-
`API Docs <reference>`_
56-
`Blog <https://blog.litestar.dev>`_
52+
<a href="getting-started.html" class="btn-no-wrap">Get Started</a>
53+
<a href="usage/index.html" class="btn-no-wrap">Usage Docs</a>
54+
<a href="reference/index.html" class="btn-no-wrap">API Docs</a>
55+
<a href="https://blog.litestar.dev" class="btn-no-wrap">Blog</a>
5756

5857
.. grid:: 1 1 2 2
5958
:padding: 0
@@ -81,65 +80,6 @@
8180

8281
Contribute to Litestar's growth with code, docs, and more.
8382

84-
Sponsors
85-
--------
86-
87-
.. rst-class:: lead
88-
89-
Litestar is a community-driven, open-source initiative that thrives on the generous contributions of our sponsors,
90-
enabling us to pursue innovative developments and continue our mission to provide exceptional tools and resources
91-
to our users.
92-
93-
94-
A huge thank you to our current sponsors:
95-
96-
.. container::
97-
:name: sponsors-section
98-
99-
.. grid:: 3
100-
:class-row: surface
101-
:padding: 0
102-
:gutter: 2
103-
104-
.. grid-item-card::
105-
:link: https://github.com/scalar/scalar
106-
107-
.. image:: https://raw.githubusercontent.com/litestar-org/branding/main/assets/sponsors/scalar.svg
108-
:alt: Scalar.com
109-
:class: sponsor
110-
111-
`Scalar.com <https://github.com/scalar/scalar>`_
112-
113-
.. grid-item-card::
114-
:link: https://telemetrysports.com/
115-
116-
.. image:: https://raw.githubusercontent.com/litestar-org/branding/main/assets/sponsors/telemetry-sports/unofficial-telemetry-whitebg.svg
117-
:alt: Telemetry Sports
118-
:class: sponsor
119-
120-
`Telemetry Sports <https://telemetrysports.com/>`_
121-
122-
.. grid-item-card::
123-
:link: https://www.stok.kr/
124-
125-
.. image:: https://avatars.githubusercontent.com/u/144093421
126-
:alt: Stok
127-
:class: sponsor
128-
129-
`Stok <https://www.stok.kr/>`_
130-
131-
We invite organizations and individuals to join our sponsorship program.
132-
By becoming a sponsor on platforms like `Polar <sponsor-polar_>`_, `GitHub <sponsor-github_>`_
133-
and `Open Collective <sponsor-oc_>`_, you can play a pivotal role in our project's growth.
134-
135-
On top of regular sponsorship, we engage in pledge-based sponsorship opportunities through `Polar <sponsor-polar_>`_,
136-
where you can pledge an amount towards an issue or feature you would like to see implemented.
137-
138-
139-
.. _sponsor-github: https://github.com/sponsors/litestar-org
140-
.. _sponsor-oc: https://opencollective.com/litestar
141-
.. _sponsor-polar: https://polar.sh/litestar-org
142-
14383
.. toctree::
14484
:titlesonly:
14585
:caption: Documentation

0 commit comments

Comments
 (0)