Skip to content

Commit

Permalink
Initial commit for Cilium theme
Browse files Browse the repository at this point in the history
This is re-design of built-in readthedocs theme,
to be more inline with cilium.io design

- Use white colors
- Use different font
- Use cilium website navigation

[ Rebase notes:
    - Removed non-related indent changes
    - Squashed the following commits:
        - c639db2 ("Initial commit for Cilium theme")
        - 31d738e ("Fixes for menu & content width")
    - Address conflicts from:
        - 5e80b2b ("Sphinx 6: Use logo_url instead of logo (readthedocs#1405)") ]

Signed-off-by: Sergey Generalov <sergey@genbit.ru>
Signed-off-by: Alex Solovev <alex.solovev.work@gmail.com>
Signed-off-by: Quentin Monnet <quentin@isovalent.com>
  • Loading branch information
Alex Solovev authored and qmonnet committed Sep 14, 2023
1 parent 8ce23ce commit d7ef65c
Show file tree
Hide file tree
Showing 13 changed files with 351 additions and 80 deletions.
15 changes: 12 additions & 3 deletions docs/_templates/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
{%- if not READTHEDOCS %}
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
<span class="rst-current-version" data-toggle="rst-current-version">
<span class="fa fa-book"> Read the Docs</span>
v: latest
<span class="rst-current-version-label"> Read the Docs</span>
version: latest
<span class="fa fa-caret-down"></span>
</span>
<div class="rst-other-versions">
Expand Down Expand Up @@ -45,10 +45,19 @@
<a href="#">{{ _('Builds') }}</a>
</dd>
</dl>
<dl>
<!-- <dl>
<dt>Debug</dt>
<dd><a href="#" data-toggle="rst-debug-badge">Swap badge position</a></dd>
</dl> -->
<dl>
<dt>Search</dt>
<dd>
<div class="wy-side-nav-search bottom">
{% include "searchbox.html" %}
</div>
</dd>
</dl>
<small>Hosted by <a href="#">Read te Docs</a> · <a href="#">Privacy Policy</a></small>
</div>
</div>
{%- endif %}
Expand Down
5 changes: 3 additions & 2 deletions docs/conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
from sphinx_rtd_theme import __version_full__ as theme_version_full
from sphinx.locale import _

project = u'Read the Docs Sphinx Theme'
project = u'Cilium Docs'
slug = re.sub(r'\W+', '-', project.lower())
version = theme_version
release = theme_version_full
Expand All @@ -28,6 +28,7 @@
'sphinx.ext.mathjax',
'sphinx.ext.viewcode',
'sphinx_rtd_theme',
'sphinx_copybutton',
]

templates_path = ['_templates']
Expand Down Expand Up @@ -68,7 +69,7 @@
range(1, 100)
))

html_logo = "demo/static/logo-wordmark-light.svg"
html_logo = "demo/static/cilium-logo.svg"
html_show_sourcelink = True
html_favicon = "demo/static/favicon.ico"

Expand Down
24 changes: 24 additions & 0 deletions docs/demo/static/cilium-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"bourbon-neat": "~1.9",
"copy-webpack-plugin": "^5.1.2",
"css-loader": "^3.6.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"font-awesome": "^4.7.0",
"html5shiv": "^3.7.3",
Expand Down
43 changes: 31 additions & 12 deletions sphinx_rtd_theme/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -120,36 +120,55 @@
</head>

<body class="wy-body-for-nav">

{%- block extrabody %} {% endblock %}
<div class="wy-grid-for-nav">
{#- SIDE NAV, TOGGLES ON MOBILE #}
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
{%- block sidebartitle %}

<header class="wy-header">
<div class="wy-header-left">
{# the logo helper function was removed in Sphinx 6 and deprecated since Sphinx 4 #}
{# the master_doc variable was renamed to root_doc in Sphinx 4 (master_doc still exists in later Sphinx versions) #}
{%- set _logo_url = logo_url|default(pathto('_static/' + (logo or ""), 1)) %}
{%- set _root_doc = root_doc|default(master_doc) %}
<a href="{{ pathto(_root_doc) }}"{% if not theme_logo_only %} class="icon icon-home"{% endif %}>
<a href="{{ pathto(_root_doc) }}"{% if not theme_logo_only %} class="wy-header-logo-wrapper icon icon-home"{% else %} class="wy-header-logo-wrapper"{% endif %}>
{% if not theme_logo_only %}{{ project }}{% endif %}
{%- if logo or logo_url %}
<img src="{{ _logo_url }}" class="logo" alt="{{ _('Logo') }}"/>
{%- endif %}
</a>

<span class="wy-github-stars">
<iframe src="https://ghbtns.com/github-btn.html?user=cilium&repo=cilium&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
</span>
</div>

<nav class="wy-main-nav">
<input name="wy-main-nav-checkbox" id="wy-main-nav-checkbox" class="wy-main-nav-checkbox" type="checkbox">
<label for="wy-main-nav-checkbox" class="wy-main-nav-toggle">Menu</label>
<ul id="#wy-main-nav-menu" class="wy-main-nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>

{%- block extrabody %} {% endblock %}
<div class="wy-grid-for-nav">
{#- SIDE NAV, TOGGLES ON MOBILE #}
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
{%- block sidebartitle %}

{%- if theme_display_version %}
{%- set nav_version = version %}
{%- if READTHEDOCS and current_version %}
{%- set nav_version = current_version %}
{%- endif %}
{%- if nav_version %}
<!-- {%- if nav_version %}
<div class="version">
{{ nav_version }}
</div>
{%- endif %}
{%- endif %} -->
{%- endif %}

{%- include "searchbox.html" %}
Expand Down
13 changes: 11 additions & 2 deletions sphinx_rtd_theme/versions.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
{# Add rst-badge after rst-versions for small badge style. #}
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
<span class="rst-current-version" data-toggle="rst-current-version">
<span class="fa fa-book"> Read the Docs</span>
v: {{ current_version }}
<span class="ret-current-version-label"> Read the Docs</span>
version: {{ current_version }}
<span class="fa fa-caret-down"></span>
</span>
<div class="rst-other-versions">
Expand All @@ -29,6 +29,15 @@
<a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
</dd>
</dl>
<dl>
<dt>Search</dt>
<dd>
<div class="wy-side-nav-search bottom">
{% include "searchbox.html" %}
</div>
</dd>
</dl>
<small>Hosted by <a href="#">Read te Docs</a> · <a href="#">Privacy Policy</a></small>
</div>
</div>
{% endif %}
32 changes: 22 additions & 10 deletions src/sass/_theme_badge.sass
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,44 @@
bottom: 0
left: 0
width: $nav-desktop-width
color: $section-background-color
background: darken($menu-background-color, 8%)
color: $text-color
background: #F7F7F7
font-family: $base-font-family
z-index: $z-index-tray

small
color: $text-color
font-size: 95%
a
color: $nav-link-color

a
color: $link_color
color: $text-color
text-decoration: none
.rst-badge-small
display: none
.rst-current-version
padding: $base-line-height / 2
background-color: darken($menu-background-color, 5%)
padding: $base-line-height / 1.5
display: block
text-align: right
font-size: 90%
cursor: pointer
color: $green
+clearfix
.fa
color: $section-background-color
.fa-book
float: left
.icon-book
color: #868686
.rst-current-version-label
color: $text-color
font-weight: 600
float: left
&.rst-out-of-date
background-color: $red
color: $white
&.rst-active-old-version
background-color: $yellow
color: $black
span
color: $text-color
&.shift-up
height: auto
max-height: 100%
Expand All @@ -51,13 +59,17 @@
margin: 20px 0
padding: 0
border-top: solid 1px lighten($menu-background-color, 5%)
dt
color: #868686
padding: 0.25rem 0
dd
display: inline-block
margin: 0
line-height: 1.4rem
a
display: inline-block
padding: $base-line-height / 4
color: $section-background-color
color: $text-color
&.rst-badge
width: auto
bottom: 20px
Expand Down
2 changes: 2 additions & 0 deletions src/sass/_theme_font_local.sass
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')

$lato-font-path: "~lato-font/fonts"
$roboto-font-path: "~roboto-fontface/fonts/roboto-slab"

Expand Down
Loading

0 comments on commit d7ef65c

Please sign in to comment.