From 3be158c94b6a2c1e6d6934f7d3748a52ca881926 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Mon, 27 May 2024 11:01:30 -0400 Subject: [PATCH 01/30] Switch to ruff for formatting --- .pre-commit-config.yaml | 13 +++++-------- changelog.d/20240527_110205_jsick_DM_43638.md | 17 +++++++++++++++++ pyproject.toml | 18 ------------------ 3 files changed, 22 insertions(+), 26 deletions(-) create mode 100644 changelog.d/20240527_110205_jsick_DM_43638.md diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index b390e97..a21353a 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -7,24 +7,21 @@ repos: - id: check-toml - repo: https://github.com/pre-commit/mirrors-prettier - rev: v4.0.0-alpha.8 + # prettier 4 is not compatible with pre-commit + rev: v3.1.0 hooks: - id: prettier - repo: https://github.com/charliermarsh/ruff-pre-commit - rev: v0.4.2 + rev: v0.4.5 hooks: + - id: ruff-format - id: ruff args: [--fix, --exit-non-zero-on-fix] - - repo: https://github.com/psf/black - rev: 24.4.2 - hooks: - - id: black - - repo: https://github.com/asottile/blacken-docs rev: 1.16.0 hooks: - id: blacken-docs - additional_dependencies: [black==23.7.0] + additional_dependencies: [black==24.3.0] args: [-l, '79', -t, py311] diff --git a/changelog.d/20240527_110205_jsick_DM_43638.md b/changelog.d/20240527_110205_jsick_DM_43638.md new file mode 100644 index 0000000..468dc9e --- /dev/null +++ b/changelog.d/20240527_110205_jsick_DM_43638.md @@ -0,0 +1,17 @@ + + +### Backwards-incompatible changes + +- + +### New features + +- + +### Bug fixes + +- + +### Other changes + +- Adopt ruff for formatting (dropping Black). diff --git a/pyproject.toml b/pyproject.toml index d64b223..ff0c590 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -88,24 +88,6 @@ exclude_lines = [ "if TYPE_CHECKING:", ] -[tool.black] -line-length = 79 -target-version = ["py311"] -exclude = ''' -/( - \.eggs - | \.git - | \.mypy_cache - | \.tox - | \.venv - | _build - | build - | dist -)/ -''' -# Use single-quoted strings so TOML treats the string like a Python r-string -# Multi-line strings are implicitly treated by black as regular expressions - [tool.pytest.ini_options] asyncio_mode = "strict" python_files = ["tests/*.py", "tests/*/*.py"] From 912447bfef3661094b6f0287727896aec52ec1a9 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Mon, 27 May 2024 16:41:55 -0400 Subject: [PATCH 02/30] Vendor sphinx-basic-ng into technote We've "vendored" sphinx-basic-ng into the Technote project itself. This is to prepare for changing the technote theme to a two column layout. --- changelog.d/20240527_110205_jsick_DM_43638.md | 2 +- src/technote/theme/changes/frameset.html | 1 + src/technote/theme/changes/rstsource.html | 1 + .../theme/changes/versionchanges.html | 1 + .../theme/components/breadcrumbs.html | 15 + .../theme/components/edit-this-page.html | 59 ++++ src/technote/theme/components/logo.html | 3 + .../theme/components/related-pages.html | 28 ++ .../theme/components/search-hide.html | 1 + .../theme/components/search-input.html | 3 + .../theme/components/view-this-page.html | 62 ++++ src/technote/theme/defindex.html | 1 + src/technote/theme/domainindex.html | 58 ++++ src/technote/theme/genindex-single.html | 58 ++++ src/technote/theme/genindex-split.html | 32 ++ src/technote/theme/genindex.html | 66 ++++ src/technote/theme/globaltoc.html | 1 + src/technote/theme/layout.html | 70 ++++ src/technote/theme/localtoc.html | 1 + src/technote/theme/relations.html | 1 + src/technote/theme/search.html | 29 ++ src/technote/theme/searchbox.html | 1 + src/technote/theme/sourcelink.html | 1 + src/technote/theme/static/debug.css | 73 +++++ src/technote/theme/static/skeleton.css | 307 ++++++++++++++++++ src/technote/theme/theme.conf | 2 +- 26 files changed, 875 insertions(+), 2 deletions(-) create mode 100644 src/technote/theme/changes/frameset.html create mode 100644 src/technote/theme/changes/rstsource.html create mode 100644 src/technote/theme/changes/versionchanges.html create mode 100644 src/technote/theme/components/breadcrumbs.html create mode 100644 src/technote/theme/components/edit-this-page.html create mode 100644 src/technote/theme/components/logo.html create mode 100644 src/technote/theme/components/related-pages.html create mode 100644 src/technote/theme/components/search-hide.html create mode 100644 src/technote/theme/components/search-input.html create mode 100644 src/technote/theme/components/view-this-page.html create mode 100644 src/technote/theme/defindex.html create mode 100644 src/technote/theme/domainindex.html create mode 100644 src/technote/theme/genindex-single.html create mode 100644 src/technote/theme/genindex-split.html create mode 100644 src/technote/theme/genindex.html create mode 100644 src/technote/theme/globaltoc.html create mode 100644 src/technote/theme/layout.html create mode 100644 src/technote/theme/localtoc.html create mode 100644 src/technote/theme/relations.html create mode 100644 src/technote/theme/search.html create mode 100644 src/technote/theme/searchbox.html create mode 100644 src/technote/theme/sourcelink.html create mode 100644 src/technote/theme/static/debug.css create mode 100644 src/technote/theme/static/skeleton.css diff --git a/changelog.d/20240527_110205_jsick_DM_43638.md b/changelog.d/20240527_110205_jsick_DM_43638.md index 468dc9e..f427c0f 100644 --- a/changelog.d/20240527_110205_jsick_DM_43638.md +++ b/changelog.d/20240527_110205_jsick_DM_43638.md @@ -2,7 +2,7 @@ ### Backwards-incompatible changes -- +- We've "vendored" sphinx-basic-ng into the Technote project itself. This is to prepare for changing the technote theme to a two column layout. ### New features diff --git a/src/technote/theme/changes/frameset.html b/src/technote/theme/changes/frameset.html new file mode 100644 index 0000000..2ebe1b6 --- /dev/null +++ b/src/technote/theme/changes/frameset.html @@ -0,0 +1 @@ +{{ warning("This theme does not support changes/frameset.html") }} diff --git a/src/technote/theme/changes/rstsource.html b/src/technote/theme/changes/rstsource.html new file mode 100644 index 0000000..5ba2c36 --- /dev/null +++ b/src/technote/theme/changes/rstsource.html @@ -0,0 +1 @@ +{{ warning("This theme does not support changes/rstsource.html") }} diff --git a/src/technote/theme/changes/versionchanges.html b/src/technote/theme/changes/versionchanges.html new file mode 100644 index 0000000..13f684b --- /dev/null +++ b/src/technote/theme/changes/versionchanges.html @@ -0,0 +1 @@ +{{ warning("This theme does not support changes/versionchanges.html") }} diff --git a/src/technote/theme/components/breadcrumbs.html b/src/technote/theme/components/breadcrumbs.html new file mode 100644 index 0000000..fac3717 --- /dev/null +++ b/src/technote/theme/components/breadcrumbs.html @@ -0,0 +1,15 @@ +{% if (breadcrumb_include_index_as and pagename != 'index') or parents or breadcrumb_include_page -%} + +{%- endif -%} diff --git a/src/technote/theme/components/edit-this-page.html b/src/technote/theme/components/edit-this-page.html new file mode 100644 index 0000000..67f1a9b --- /dev/null +++ b/src/technote/theme/components/edit-this-page.html @@ -0,0 +1,59 @@ +{%- macro sanitise_trailing_slash(s) -%}{{ s.rstrip("/") }}{%- endmacro -%} + +{%- macro determine_page_edit_link() -%} + {%- if theme_source_edit_link -%} + {{ theme_source_edit_link.format(filename=pagename+page_source_suffix) }} + {%- else -%} + {#- First, sanitise the trailing slashes. -#} + {%- set repo = sanitise_trailing_slash(theme_source_repository) -%} + {%- set branch = theme_source_branch -%} + {%- set subdirectory = sanitise_trailing_slash(theme_source_directory) -%} + + {#- Figure out the document's source file path. -#} + {%- set relative_path = pagename + page_source_suffix -%} + {%- if not subdirectory -%} + {%- set document_path = relative_path -%} + {%- else -%} + {%- set document_path = subdirectory + "/" + relative_path -%} + {%- endif -%} + + {#- Don't allow http:// URLs -#} + {%- if repo.startswith( + ( + "http://github.com/", + "http://gitlab.com/", + "http://bitbucket.org/", + ) + ) -%} + {{ warning("Could not use `source_repository` provided. Please use https:// links in your `conf.py` file's `html_theme_options`.") }} + {#- Handle the relevant cases -#} + {%- elif repo.startswith("https://github.com/") -%} + {{ repo }}/edit/{{ branch }}/{{ document_path }} + {%- elif repo.startswith("https://gitlab.com/") -%} + {{ repo }}/-/edit/{{ branch }}/{{ document_path }} + {%- elif repo.startswith("https://bitbucket.org/") -%} + {{ repo }}/src/{{ branch }}/{{ document_path }}?mode=edit&at={{ branch }} + {#- Fail with a warning -#} + {%- else -%} + {{ warning( + "Could not understand `source_repository` provided: " + repo + "\n" + + "You should set `source_edit_link`, so that the edit link is presented." + ) }} + {%- endif -%} + {%- endif -%} +{%- endmacro -%} + + +{%- if page_source_suffix -%} + {%- set can_find_edit_link = ( + (theme_source_edit_link and pagename) + or (theme_source_repository and theme_source_branch) + ) -%} + {%- if can_find_edit_link -%} + {%- block link_available -%} + {{ _("Edit this page") }} + {%- endblock link_available -%} + {%- else -%} + {%- block link_not_available -%}{%- endblock -%} + {%- endif -%} +{%- endif -%} diff --git a/src/technote/theme/components/logo.html b/src/technote/theme/components/logo.html new file mode 100644 index 0000000..c59c0dd --- /dev/null +++ b/src/technote/theme/components/logo.html @@ -0,0 +1,3 @@ +{% if logo %} + +{% endif %} diff --git a/src/technote/theme/components/related-pages.html b/src/technote/theme/components/related-pages.html new file mode 100644 index 0000000..ceb396d --- /dev/null +++ b/src/technote/theme/components/related-pages.html @@ -0,0 +1,28 @@ +
+ {% if next -%} + +
+
+ {{ _("Next") }} +
+
{{ next.title }}
+
+ + + {%- endif %} + {% if prev -%} + + +
+
+ {{ _("Previous") }} +
+ {% if prev.link == pathto(master_doc) %} +
{{ _("Home") }}
+ {% else %} +
{{ prev.title }}
+ {% endif %} +
+ + {%- endif %} +
diff --git a/src/technote/theme/components/search-hide.html b/src/technote/theme/components/search-hide.html new file mode 100644 index 0000000..4dd95a2 --- /dev/null +++ b/src/technote/theme/components/search-hide.html @@ -0,0 +1 @@ + diff --git a/src/technote/theme/components/search-input.html b/src/technote/theme/components/search-input.html new file mode 100644 index 0000000..3a477dd --- /dev/null +++ b/src/technote/theme/components/search-input.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/technote/theme/components/view-this-page.html b/src/technote/theme/components/view-this-page.html new file mode 100644 index 0000000..fafa7d3 --- /dev/null +++ b/src/technote/theme/components/view-this-page.html @@ -0,0 +1,62 @@ +{%- macro sanitise_trailing_slash(s) -%}{{ s.rstrip("/") }}{%- endmacro -%} + +{%- macro determine_page_view_link() -%} + {%- if theme_source_view_link -%} + {{ theme_source_view_link.format(filename=pagename+page_source_suffix) }} + {%- elif theme_source_repository -%} + {#- First, sanitise the trailing slashes. -#} + {%- set repo = sanitise_trailing_slash(theme_source_repository) -%} + {%- set branch = theme_source_branch -%} + {%- set subdirectory = sanitise_trailing_slash(theme_source_directory) -%} + + {#- Figure out the document's source file path. -#} + {%- set relative_path = pagename + page_source_suffix -%} + {%- if not subdirectory -%} + {%- set document_path = relative_path -%} + {%- else -%} + {%- set document_path = subdirectory + "/" + relative_path -%} + {%- endif -%} + + {#- Don't allow http:// URLs -#} + {%- if repo.startswith( + ( + "http://github.com/", + "http://gitlab.com/", + "http://bitbucket.org/", + ) + ) -%} + {{ warning("Could not use `source_repository` provided. Please use https:// links in your `conf.py` file's `html_theme_options`.") }} + {#- Handle the relevant cases -#} + {%- elif repo.startswith("https://github.com/") -%} + {{ repo }}/blob/{{ branch }}/{{ document_path }}?plain=1 + {%- elif repo.startswith("https://gitlab.com/") -%} + {{ repo }}/blob/{{ branch }}/{{ document_path }} + {%- elif repo.startswith("https://bitbucket.org/") -%} + {{ repo }}/src/{{ branch }}/{{ document_path }} + {#- Fail with a warning -#} + {%- else -%} + {{ warning( + "Could not understand `source_repository` provided: " + repo + "\n" + + "You should set `source_view_link`, so that the view link is presented." + ) }} + {%- endif -%} + {%- elif show_source and has_source -%} + {{ pathto('_sources/' + sourcename, true) }} + {%- endif -%} +{%- endmacro -%} + + +{%- if page_source_suffix -%} + {%- set can_find_view_link = ( + (theme_source_view_link and pagename) + or (show_source and has_source and sourcename) + or (theme_source_repository and theme_source_branch) + ) -%} + {%- if can_find_view_link -%} + {%- block link_available -%} + {{ _("View sources") }} + {%- endblock link_available -%} + {%- else -%} + {%- block link_not_available -%}{%- endblock -%} + {%- endif -%} +{%- endif -%} diff --git a/src/technote/theme/defindex.html b/src/technote/theme/defindex.html new file mode 100644 index 0000000..91442b9 --- /dev/null +++ b/src/technote/theme/defindex.html @@ -0,0 +1 @@ +{{ warning('defindex.html template is not supported.') }} diff --git a/src/technote/theme/domainindex.html b/src/technote/theme/domainindex.html new file mode 100644 index 0000000..7481fb8 --- /dev/null +++ b/src/technote/theme/domainindex.html @@ -0,0 +1,58 @@ +{% extends "page.html" %} + +{% block head_title -%} +{{ indextitle|striptags|e }} - {{ docstitle|striptags|e }} +{% endblock head_title -%} + +{% block scripts -%} + {{ super() }} + {%- if not embedded and collapse_index %} + + {%- endif -%} +{%- endblock scripts %} + +{% block content %} +
+
+ +{% block content_inner %} +
+

{{ indextitle }}

+
+ {%- for (letter, entries) in content -%} + {{ letter }} + {%- if not loop.last %} | {% endif -%} + {%- endfor -%} +
+
+ +{%- set groupid = idgen() %} + + {%- for letter, entries in content %} + + + + + + + {%- for (name, grouptype, page, anchor, extra, qualifier, description) in entries %} + + + + + {%- endfor %} + {%- endfor %} +
 
{{ letter }}
{% if grouptype == 1 -%} + + {%- endif %}{% if grouptype == 2 %}   {% endif %} + {% if page %}{% endif -%} + {{ name|e }} + {%- if page %}{% endif %} + {%- if extra %} ({{ extra|e }}){% endif -%} + {% if qualifier %}{{ qualifier|e }}:{% endif %} + {{ description|e }}
+{% endblock content_inner %} + +
+{% endblock content %} diff --git a/src/technote/theme/genindex-single.html b/src/technote/theme/genindex-single.html new file mode 100644 index 0000000..c906b72 --- /dev/null +++ b/src/technote/theme/genindex-single.html @@ -0,0 +1,58 @@ +{# Module: single page index, split by a "key" #} +{% extends "page.html" %} + +{% block head_title -%} + {{ _("Index") }} - {{ docstitle|striptags|e }} +{%- endblock head_title %} + +{% macro indexentries(firstname, links) -%} + {% if links -%} + + {%- if links[0][0] %}{% endif -%} + {{ firstname|e }} + {%- if links[0][0] %}{% endif -%} + + + {%- for ismain, link in links[1:] -%} + , + {%- if ismain %}{% endif -%} + [{{ loop.index }}] + {%- if ismain %}{% endif -%} + + {%- endfor %} + {%- else %} + {{ firstname|e }} + {%- endif %} +{% endmacro %} + +{% block content %} +
+
+ +{% block content_inner %} +
+

{% trans key=key %}Index – {{ key }}{% endtrans %}

+
+ +
+ + {%- for column in entries|slice(2) if column %} + + {%- endfor %} +
    + {%- for entryname, (links, subitems, _) in column %} +
  • {{ indexentries(entryname, links) }} + {%- if subitems %} +
      + {%- for subentryname, subentrylinks in subitems %} +
    • {{ indexentries(subentryname, subentrylinks) }}
      • + {%- endfor %} +
    + {%- endif -%}
    • + {%- endfor %} +
+
+{% endblock content_inner %} + +
+{% endblock %} diff --git a/src/technote/theme/genindex-split.html b/src/technote/theme/genindex-split.html new file mode 100644 index 0000000..2a09694 --- /dev/null +++ b/src/technote/theme/genindex-split.html @@ -0,0 +1,32 @@ +{# Module: A single page of a multi-page index #} +{% extends "page.html" %} + +{% block head_title -%} + {{ _("Index") }} - {{ docstitle|striptags|e }} +{%- endblock head_title %} + +{% block content %} +
+
+{% endblock %} diff --git a/src/technote/theme/genindex.html b/src/technote/theme/genindex.html new file mode 100644 index 0000000..1cae075 --- /dev/null +++ b/src/technote/theme/genindex.html @@ -0,0 +1,66 @@ +{% extends "page.html" %} + +{% block head_title -%} + {{ _("Index") }} - {{ docstitle|striptags|e }} +{%- endblock head_title %} + +{% macro indexentries(firstname, links) -%} + {% if links -%} + + {%- if links[0][0] %}{% endif -%} + {{ firstname|e }} + {%- if links[0][0] %}{% endif -%} + + + {%- for ismain, link in links[1:] -%} + , + {%- if ismain %}{% endif -%} + [{{ loop.index }}] + {%- if ismain %}{% endif -%} + + {%- endfor %} + {%- else %} + {{ firstname|e }} + {%- endif %} +{% endmacro %} + +{% block content %} +
+
+ +{% block content_inner %} +
+

{{ _('Index') }}

+
+ {%- for key, dummy in genindexentries -%} + {{ key }} + {%- if not loop.last %} | {% endif -%} + {%- endfor -%} +
+
+ +{%- for key, entries in genindexentries %} +
+

{{ key }}

+ + {%- for column in entries|slice_index(2) if column %} + + {%- endfor %} +
    + {%- for entryname, (links, subitems, _) in column %} +
  • {{ indexentries(entryname, links) }} + {%- if subitems %} +
      + {%- for subentryname, subentrylinks in subitems %} +
    • {{ indexentries(subentryname, subentrylinks) }}
      • + {%- endfor %} +
    + {%- endif -%}
    • + {%- endfor %} +
+
+{% endfor %} +{% endblock content_inner %} + +
+{% endblock %} diff --git a/src/technote/theme/globaltoc.html b/src/technote/theme/globaltoc.html new file mode 100644 index 0000000..885374f --- /dev/null +++ b/src/technote/theme/globaltoc.html @@ -0,0 +1 @@ +{{ warning("This theme does not support globaltoc.html") }} diff --git a/src/technote/theme/layout.html b/src/technote/theme/layout.html new file mode 100644 index 0000000..d70b0b5 --- /dev/null +++ b/src/technote/theme/layout.html @@ -0,0 +1,70 @@ + + + + {% block head_meta -%} + + + + {% if not skip_ua_compatible -%} + + {%- endif -%} + + {{ metatags }} + + {% endblock head_meta -%} + + {% block head_title %}{{ title|striptags|e }}{% endblock head_title %} + + {%- block head_links -%} + + {% if favicon -%} + + {%- endif -%} + {% if hasdoc('about') -%} + + {%- endif -%} + {% if hasdoc('genindex') -%} + + {%- endif -%} + {% if hasdoc('search') -%} + + {%- endif -%} + {% if hasdoc('copyright') -%} + + {%- endif -%} + {% if next -%} + + {%- endif -%} + {% if prev -%} + + {%- endif -%} + + {% endblock head_links -%} + + {% block head_stylesheets -%} + {% if not omit_skeleton_css -%} + + {%- endif -%} + + {% for css in css_files -%} + {%- if css|attr("filename") -%} + {{ css_tag(css) }} + {%- else -%} + + {%- endif -%} + {% endfor -%} + + {%- endblock head_stylesheets -%} + + {% block head_javascript %}{% endblock %} + {% block head_extra %}{% endblock %} + + + {% block body %}{% endblock body -%} + {% block body_javascript -%} + {% for js in script_files -%} + {{ js_tag(js) }} + {% endfor -%} + {%- endblock body_javascript -%} + + diff --git a/src/technote/theme/localtoc.html b/src/technote/theme/localtoc.html new file mode 100644 index 0000000..70013e1 --- /dev/null +++ b/src/technote/theme/localtoc.html @@ -0,0 +1 @@ +{{ warning("This theme does not support localtoc.html") }} diff --git a/src/technote/theme/relations.html b/src/technote/theme/relations.html new file mode 100644 index 0000000..d6ab9ef --- /dev/null +++ b/src/technote/theme/relations.html @@ -0,0 +1 @@ +{{ warning("This theme does not support relations.html") }} diff --git a/src/technote/theme/search.html b/src/technote/theme/search.html new file mode 100644 index 0000000..eebb392 --- /dev/null +++ b/src/technote/theme/search.html @@ -0,0 +1,29 @@ +{% extends "page.html" %} + +{% block head_title %}{{ _("Search") }} - {{ docstitle }}{% endblock head_title %} + +{% block content %} +
+
+ {% block before_results -%} + + {%- endblock %} +
+ {% block after_results %}{% endblock %} +
+
+{% endblock content %} + +{% block body_javascript -%} +{{ super() }} + + + +{%- endblock body_javascript %} diff --git a/src/technote/theme/searchbox.html b/src/technote/theme/searchbox.html new file mode 100644 index 0000000..6d2f278 --- /dev/null +++ b/src/technote/theme/searchbox.html @@ -0,0 +1 @@ +{{ warning("This theme does not support searchbox.html") }} diff --git a/src/technote/theme/sourcelink.html b/src/technote/theme/sourcelink.html new file mode 100644 index 0000000..118e424 --- /dev/null +++ b/src/technote/theme/sourcelink.html @@ -0,0 +1 @@ +{{ warning("This theme does not support sourcelink.html") }} diff --git a/src/technote/theme/static/debug.css b/src/technote/theme/static/debug.css new file mode 100644 index 0000000..c813b5d --- /dev/null +++ b/src/technote/theme/static/debug.css @@ -0,0 +1,73 @@ +/* +From sphinx-basic-ng, modified for the Technote theme. + +https://github.com/pradyunsg/sphinx-basic-ng/blob/main/src/sphinx_basic_ng/theme/basic-ng/static/debug.css + +This CSS file should be overridden by the theme authors. It's +meant for debugging and developing the skeleton that this theme provides. +*/ +body { + font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji'; + background: lavender; +} +.sb-announcement { + background: rgb(131, 131, 131); +} +.sb-announcement__inner { + background: black; + color: white; +} +.sb-header { + background: lightskyblue; +} +.sb-header__inner { + background: royalblue; + color: white; +} +.sb-header-secondary { + background: lightcyan; +} +.sb-header-secondary__inner { + background: cornflowerblue; + color: white; +} +.sb-sidebar-primary { + background: lightgreen; +} +.sb-main { + background: blanchedalmond; +} +.sb-main__inner { + background: antiquewhite; +} +.sb-header-article { + background: lightsteelblue; +} +.sb-article-container { + background: snow; +} +.sb-article-main { + background: white; +} +.sb-footer-article { + background: lightpink; +} +.sb-sidebar-secondary { + background: lightgoldenrodyellow; +} +.sb-footer-content { + background: plum; +} +.sb-footer-content__inner { + background: palevioletred; +} +.sb-footer { + background: pink; +} +.sb-footer__inner { + background: salmon; +} +.sb-article { + background: white; +} diff --git a/src/technote/theme/static/skeleton.css b/src/technote/theme/static/skeleton.css new file mode 100644 index 0000000..b8ca8b1 --- /dev/null +++ b/src/technote/theme/static/skeleton.css @@ -0,0 +1,307 @@ +/* From sphinx-basic-ng, modified for the Technote theme. + +https://github.com/pradyunsg/sphinx-basic-ng/blob/main/src/sphinx_basic_ng/theme/basic-ng/static/skeleton.css +*/ + +/* Some sane resets. */ +html { + height: 100%; +} + +body { + margin: 0; + min-height: 100%; +} + +/* All the flexbox magic! */ +body, +.sb-announcement, +.sb-content, +.sb-main, +.sb-container, +.sb-container__inner, +.sb-article-container, +.sb-footer-content, +.sb-header, +.sb-header-secondary, +.sb-footer { + display: flex; +} + +/* These order things vertically */ +body, +.sb-main, +.sb-article-container { + flex-direction: column; +} + +/* Put elements in the center */ +.sb-header, +.sb-header-secondary, +.sb-container, +.sb-content, +.sb-footer, +.sb-footer-content { + justify-content: center; +} +/* Put elements at the ends */ +.sb-article-container { + justify-content: space-between; +} + +/* These elements grow. */ +.sb-main, +.sb-content, +.sb-container, +article { + flex-grow: 1; +} + +/* Because padding making this wider is not fun */ +article { + box-sizing: border-box; +} + +/* The announcements element should never be wider than the page. */ +.sb-announcement { + max-width: 100%; +} + +.sb-sidebar-primary, +.sb-sidebar-secondary { + flex-shrink: 0; + width: 17rem; +} + +.sb-announcement__inner { + justify-content: center; + + box-sizing: border-box; + height: 3rem; + + overflow-x: auto; + white-space: nowrap; +} + +/* Sidebars, with checkbox-based toggle */ +.sb-sidebar-primary, +.sb-sidebar-secondary { + position: fixed; + height: 100%; + top: 0; +} + +.sb-sidebar-primary { + left: -17rem; + transition: left 250ms ease-in-out; +} +.sb-sidebar-secondary { + right: -17rem; + transition: right 250ms ease-in-out; +} + +.sb-sidebar-toggle { + display: none; +} +.sb-sidebar-overlay { + position: fixed; + top: 0; + width: 0; + height: 0; + + transition: + width 0ms ease 250ms, + height 0ms ease 250ms, + opacity 250ms ease; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.54); +} + +#sb-sidebar-toggle--primary:checked + ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--primary'], +#sb-sidebar-toggle--secondary:checked + ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--secondary'] { + width: 100%; + height: 100%; + opacity: 1; + transition: + width 0ms ease, + height 0ms ease, + opacity 250ms ease; +} + +#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { + left: 0; +} +#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { + right: 0; +} + +/* Full-width mode */ +.drop-secondary-sidebar-for-full-width-content + .hide-when-secondary-sidebar-shown { + display: none !important; +} +.drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary { + display: none !important; +} + +/* Mobile views */ +.sb-page-width { + width: 100%; +} + +.sb-article-container, +.sb-footer-content__inner, +.drop-secondary-sidebar-for-full-width-content .sb-article, +.drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 100vw; +} + +.sb-article, +.match-content-width { + padding: 0 1rem; + box-sizing: border-box; +} + +@media (min-width: 32rem) { + .sb-article, + .match-content-width { + padding: 0 2rem; + } +} + +/* Tablet views */ +@media (min-width: 42rem) { + .sb-article-container { + width: auto; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 42rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} +@media (min-width: 46rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 46rem; + } + .sb-article, + .match-content-width { + width: 46rem; + } +} +@media (min-width: 50rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 50rem; + } + .sb-article, + .match-content-width { + width: 50rem; + } +} + +/* Tablet views */ +@media (min-width: 59rem) { + .sb-sidebar-secondary { + position: static; + } + .hide-when-secondary-sidebar-shown { + display: none !important; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 59rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} +@media (min-width: 63rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 63rem; + } + .sb-article, + .match-content-width { + width: 46rem; + } +} +@media (min-width: 67rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 67rem; + } + .sb-article, + .match-content-width { + width: 50rem; + } +} + +/* Desktop views */ +@media (min-width: 76rem) { + .sb-sidebar-primary { + position: static; + } + .hide-when-primary-sidebar-shown { + display: none !important; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 59rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} + +/* Full desktop views */ +@media (min-width: 80rem) { + .sb-article, + .match-content-width { + width: 46rem; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 63rem; + } +} + +@media (min-width: 84rem) { + .sb-article, + .match-content-width { + width: 50rem; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 67rem; + } +} + +@media (min-width: 88rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 67rem; + } + .sb-page-width { + width: 88rem; + } +} diff --git a/src/technote/theme/theme.conf b/src/technote/theme/theme.conf index 3d54ef0..f77f5b6 100644 --- a/src/technote/theme/theme.conf +++ b/src/technote/theme/theme.conf @@ -1,5 +1,5 @@ [theme] -inherit = basic-ng +inherit = basic stylesheet = styles/technote.css pygments_style = tango pygments_dark_style = monokai From b0063d0bae7397516d96deaedd281207f836308c Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 28 May 2024 12:10:38 -0400 Subject: [PATCH 03/30] Merge skeleton.css into layout scss This lets us drop the skeleton.css originally from sphinx-basic-ng and folds it into the layout.scss module that's providing out overrides of the layout styling. The next step is to consolidate the styling. Or perhaps even overhaul layout to meet our goals of a two-column layout. --- src/assets/styles/base/_layout.scss | 295 ++++++++++++++++++++++++ src/technote/theme/layout.html | 4 - src/technote/theme/static/skeleton.css | 307 ------------------------- 3 files changed, 295 insertions(+), 311 deletions(-) delete mode 100644 src/technote/theme/static/skeleton.css diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index c85b5b7..b03f268 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -2,8 +2,175 @@ * Styles that affect the overall layout. Since Technote is built on * sphinx-basic-ng as the base theme, these styles primarily work with * the base theme's sb- classes. + * + * This builds on the skeleton.css from sphinx-basic-ng. + * https://github.com/pradyunsg/sphinx-basic-ng/blob/main/src/sphinx_basic_ng/theme/basic-ng/static/skeleton.css + * */ +html { + height: 100%; +} + +body { + margin: 0; + min-height: 100%; +} + +/* All the flexbox magic! */ +body, +.sb-announcement, +.sb-content, +.sb-main, +.sb-container, +.sb-container__inner, +.sb-article-container, +.sb-footer-content, +.sb-header, +.sb-header-secondary, +.sb-footer { + display: flex; +} + +/* These order things vertically */ +body, +.sb-main, +.sb-article-container { + flex-direction: column; +} + +/* Put elements in the center */ +.sb-header, +.sb-header-secondary, +.sb-container, +.sb-content, +.sb-footer, +.sb-footer-content { + justify-content: center; +} +/* Put elements at the ends */ +.sb-article-container { + justify-content: space-between; +} + +/* These elements grow. */ +.sb-main, +.sb-content, +.sb-container, +article { + flex-grow: 1; +} + +/* Because padding making this wider is not fun */ +article { + box-sizing: border-box; +} + +/* The announcements element should never be wider than the page. */ +.sb-announcement { + max-width: 100%; +} + +.sb-sidebar-primary, +.sb-sidebar-secondary { + flex-shrink: 0; + width: 17rem; +} + +.sb-announcement__inner { + justify-content: center; + + box-sizing: border-box; + height: 3rem; + + overflow-x: auto; + white-space: nowrap; +} + +/* Sidebars, with checkbox-based toggle */ +.sb-sidebar-primary, +.sb-sidebar-secondary { + position: fixed; + height: 100%; + top: 0; +} + +.sb-sidebar-primary { + left: -17rem; + transition: left 250ms ease-in-out; +} +.sb-sidebar-secondary { + right: -17rem; + transition: right 250ms ease-in-out; +} + +.sb-sidebar-toggle { + display: none; +} +.sb-sidebar-overlay { + position: fixed; + top: 0; + width: 0; + height: 0; + + transition: + width 0ms ease 250ms, + height 0ms ease 250ms, + opacity 250ms ease; + + opacity: 0; + background-color: rgba(0, 0, 0, 0.54); +} + +#sb-sidebar-toggle--primary:checked + ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--primary'], +#sb-sidebar-toggle--secondary:checked + ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--secondary'] { + width: 100%; + height: 100%; + opacity: 1; + transition: + width 0ms ease, + height 0ms ease, + opacity 250ms ease; +} + +#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { + left: 0; +} +#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { + right: 0; +} + +/* Full-width mode */ +.drop-secondary-sidebar-for-full-width-content + .hide-when-secondary-sidebar-shown { + display: none !important; +} +.drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary { + display: none !important; +} + +.sb-article-container, +.sb-footer-content__inner, +.drop-secondary-sidebar-for-full-width-content .sb-article, +.drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 100vw; +} + +.sb-article, +.match-content-width { + padding: 0 1rem; + box-sizing: border-box; +} + +@media (min-width: 32rem) { + .sb-article, + .match-content-width { + padding: 0 2rem; + } +} + .sb-container { margin-top: var(--tn-space-md-fixed); margin-bottom: var(--tn-space-xxl-fixed); @@ -67,6 +234,21 @@ width: auto; } +@media (min-width: 42rem) { + .sb-article-container { + width: auto; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 42rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} + @media (max-width: 42em) { .sb-article-container, .sb-footer-content__inner { @@ -93,6 +275,19 @@ // content: ' 42'; // } } + +@media (min-width: 46rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 46rem; + } + .sb-article, + .match-content-width { + width: 46rem; + } +} + @media (min-width: 46em) { .sb-footer-content__inner, .drop-secondary-sidebar-for-full-width-content .sb-article, @@ -107,6 +302,19 @@ // content: ' 46'; // } } + +@media (min-width: 50rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 50rem; + } + .sb-article, + .match-content-width { + width: 50rem; + } +} + @media (min-width: 50em) { .sb-footer-content__inner, .drop-secondary-sidebar-for-full-width-content .sb-article, @@ -121,6 +329,24 @@ content: ' 50'; } */ } + +@media (min-width: 59rem) { + .sb-sidebar-secondary { + position: static; + } + .hide-when-secondary-sidebar-shown { + display: none !important; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 59rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} @media (min-width: 59em) { /* secondary sidebar appears, width is 17rem. */ .sb-footer-content__inner, @@ -136,6 +362,19 @@ content: ' 59'; } */ } + +@media (min-width: 63rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 63rem; + } + .sb-article, + .match-content-width { + width: 46rem; + } +} + @media (min-width: 63em) { .sb-footer-content__inner, .drop-secondary-sidebar-for-full-width-content .sb-article, @@ -164,6 +403,25 @@ content: ' 67'; } */ } + +@media (min-width: 76rem) { + .sb-sidebar-primary { + position: static; + } + .hide-when-primary-sidebar-shown { + display: none !important; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 59rem; + } + .sb-article, + .match-content-width { + width: 42rem; + } +} + @media (min-width: 76em) { /* The primary sidebar appears */ .sb-footer-content__inner, @@ -185,6 +443,19 @@ content: ' 76'; } */ } + +@media (min-width: 80rem) { + .sb-article, + .match-content-width { + width: 46rem; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 63rem; + } +} + @media (min-width: 80em) { .sb-article, .match-content-width { @@ -199,6 +470,19 @@ content: ' 80'; } */ } + +@media (min-width: 84rem) { + .sb-article, + .match-content-width { + width: 50rem; + } + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 67rem; + } +} + @media (min-width: 84em) { .sb-article, .match-content-width { @@ -208,6 +492,17 @@ content: ' 84'; } */ } + +@media (min-width: 88rem) { + .sb-footer-content__inner, + .drop-secondary-sidebar-for-full-width-content .sb-article, + .drop-secondary-sidebar-for-full-width-content .match-content-width { + width: 67rem; + } + .sb-page-width { + width: 88rem; + } +} @media (min-width: 88em) { .sb-footer-content__inner, .drop-secondary-sidebar-for-full-width-content .sb-article, diff --git a/src/technote/theme/layout.html b/src/technote/theme/layout.html index d70b0b5..3eca5a2 100644 --- a/src/technote/theme/layout.html +++ b/src/technote/theme/layout.html @@ -42,10 +42,6 @@ {% endblock head_links -%} {% block head_stylesheets -%} - {% if not omit_skeleton_css -%} - - {%- endif -%} - {% for css in css_files -%} {%- if css|attr("filename") -%} {{ css_tag(css) }} diff --git a/src/technote/theme/static/skeleton.css b/src/technote/theme/static/skeleton.css deleted file mode 100644 index b8ca8b1..0000000 --- a/src/technote/theme/static/skeleton.css +++ /dev/null @@ -1,307 +0,0 @@ -/* From sphinx-basic-ng, modified for the Technote theme. - -https://github.com/pradyunsg/sphinx-basic-ng/blob/main/src/sphinx_basic_ng/theme/basic-ng/static/skeleton.css -*/ - -/* Some sane resets. */ -html { - height: 100%; -} - -body { - margin: 0; - min-height: 100%; -} - -/* All the flexbox magic! */ -body, -.sb-announcement, -.sb-content, -.sb-main, -.sb-container, -.sb-container__inner, -.sb-article-container, -.sb-footer-content, -.sb-header, -.sb-header-secondary, -.sb-footer { - display: flex; -} - -/* These order things vertically */ -body, -.sb-main, -.sb-article-container { - flex-direction: column; -} - -/* Put elements in the center */ -.sb-header, -.sb-header-secondary, -.sb-container, -.sb-content, -.sb-footer, -.sb-footer-content { - justify-content: center; -} -/* Put elements at the ends */ -.sb-article-container { - justify-content: space-between; -} - -/* These elements grow. */ -.sb-main, -.sb-content, -.sb-container, -article { - flex-grow: 1; -} - -/* Because padding making this wider is not fun */ -article { - box-sizing: border-box; -} - -/* The announcements element should never be wider than the page. */ -.sb-announcement { - max-width: 100%; -} - -.sb-sidebar-primary, -.sb-sidebar-secondary { - flex-shrink: 0; - width: 17rem; -} - -.sb-announcement__inner { - justify-content: center; - - box-sizing: border-box; - height: 3rem; - - overflow-x: auto; - white-space: nowrap; -} - -/* Sidebars, with checkbox-based toggle */ -.sb-sidebar-primary, -.sb-sidebar-secondary { - position: fixed; - height: 100%; - top: 0; -} - -.sb-sidebar-primary { - left: -17rem; - transition: left 250ms ease-in-out; -} -.sb-sidebar-secondary { - right: -17rem; - transition: right 250ms ease-in-out; -} - -.sb-sidebar-toggle { - display: none; -} -.sb-sidebar-overlay { - position: fixed; - top: 0; - width: 0; - height: 0; - - transition: - width 0ms ease 250ms, - height 0ms ease 250ms, - opacity 250ms ease; - - opacity: 0; - background-color: rgba(0, 0, 0, 0.54); -} - -#sb-sidebar-toggle--primary:checked - ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--primary'], -#sb-sidebar-toggle--secondary:checked - ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--secondary'] { - width: 100%; - height: 100%; - opacity: 1; - transition: - width 0ms ease, - height 0ms ease, - opacity 250ms ease; -} - -#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { - left: 0; -} -#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { - right: 0; -} - -/* Full-width mode */ -.drop-secondary-sidebar-for-full-width-content - .hide-when-secondary-sidebar-shown { - display: none !important; -} -.drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary { - display: none !important; -} - -/* Mobile views */ -.sb-page-width { - width: 100%; -} - -.sb-article-container, -.sb-footer-content__inner, -.drop-secondary-sidebar-for-full-width-content .sb-article, -.drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 100vw; -} - -.sb-article, -.match-content-width { - padding: 0 1rem; - box-sizing: border-box; -} - -@media (min-width: 32rem) { - .sb-article, - .match-content-width { - padding: 0 2rem; - } -} - -/* Tablet views */ -@media (min-width: 42rem) { - .sb-article-container { - width: auto; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 42rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} -@media (min-width: 46rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 46rem; - } - .sb-article, - .match-content-width { - width: 46rem; - } -} -@media (min-width: 50rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 50rem; - } - .sb-article, - .match-content-width { - width: 50rem; - } -} - -/* Tablet views */ -@media (min-width: 59rem) { - .sb-sidebar-secondary { - position: static; - } - .hide-when-secondary-sidebar-shown { - display: none !important; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 59rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} -@media (min-width: 63rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 63rem; - } - .sb-article, - .match-content-width { - width: 46rem; - } -} -@media (min-width: 67rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 67rem; - } - .sb-article, - .match-content-width { - width: 50rem; - } -} - -/* Desktop views */ -@media (min-width: 76rem) { - .sb-sidebar-primary { - position: static; - } - .hide-when-primary-sidebar-shown { - display: none !important; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 59rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} - -/* Full desktop views */ -@media (min-width: 80rem) { - .sb-article, - .match-content-width { - width: 46rem; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 63rem; - } -} - -@media (min-width: 84rem) { - .sb-article, - .match-content-width { - width: 50rem; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 67rem; - } -} - -@media (min-width: 88rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 67rem; - } - .sb-page-width { - width: 88rem; - } -} From d0365faf0d04c0c9fc5acef397a7c1d327b41c45 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 28 May 2024 14:09:15 -0400 Subject: [PATCH 04/30] Delete unnecessary head links This are useful for regular sphinx sites, but will be unused for single-page technotes. --- src/technote/theme/layout.html | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/technote/theme/layout.html b/src/technote/theme/layout.html index 3eca5a2..66405f1 100644 --- a/src/technote/theme/layout.html +++ b/src/technote/theme/layout.html @@ -20,24 +20,6 @@ {% if favicon -%} {%- endif -%} - {% if hasdoc('about') -%} - - {%- endif -%} - {% if hasdoc('genindex') -%} - - {%- endif -%} - {% if hasdoc('search') -%} - - {%- endif -%} - {% if hasdoc('copyright') -%} - - {%- endif -%} - {% if next -%} - - {%- endif -%} - {% if prev -%} - - {%- endif -%} {% endblock head_links -%} From cea2c36675f4d5c707b3dda2731451061695580a Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 28 May 2024 15:03:38 -0400 Subject: [PATCH 05/30] Simplify the theming layout This dramatically pares back the complexity of the layout template and drops extraneous sections. We'll use this as a good starting point for a responsive grid layout for technote. --- src/assets/styles/base/_layout.scss | 507 ------------------ src/technote/theme/page.html | 100 ++-- ...ooter-article.html => article-footer.html} | 0 ...eader-article.html => article-header.html} | 0 ...ar-secondary.html => content-outline.html} | 0 .../theme/sections/footer-content.html | 1 - .../theme/sections/header-content.html | 1 - .../theme/sections/header-secondary.html | 1 - .../{sidebar-primary.html => logo.html} | 2 - 9 files changed, 33 insertions(+), 579 deletions(-) rename src/technote/theme/sections/{footer-article.html => article-footer.html} (100%) rename src/technote/theme/sections/{header-article.html => article-header.html} (100%) rename src/technote/theme/sections/{sidebar-secondary.html => content-outline.html} (100%) delete mode 100644 src/technote/theme/sections/footer-content.html delete mode 100644 src/technote/theme/sections/header-content.html delete mode 100644 src/technote/theme/sections/header-secondary.html rename src/technote/theme/sections/{sidebar-primary.html => logo.html} (74%) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index b03f268..3b0888c 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -16,510 +16,3 @@ body { margin: 0; min-height: 100%; } - -/* All the flexbox magic! */ -body, -.sb-announcement, -.sb-content, -.sb-main, -.sb-container, -.sb-container__inner, -.sb-article-container, -.sb-footer-content, -.sb-header, -.sb-header-secondary, -.sb-footer { - display: flex; -} - -/* These order things vertically */ -body, -.sb-main, -.sb-article-container { - flex-direction: column; -} - -/* Put elements in the center */ -.sb-header, -.sb-header-secondary, -.sb-container, -.sb-content, -.sb-footer, -.sb-footer-content { - justify-content: center; -} -/* Put elements at the ends */ -.sb-article-container { - justify-content: space-between; -} - -/* These elements grow. */ -.sb-main, -.sb-content, -.sb-container, -article { - flex-grow: 1; -} - -/* Because padding making this wider is not fun */ -article { - box-sizing: border-box; -} - -/* The announcements element should never be wider than the page. */ -.sb-announcement { - max-width: 100%; -} - -.sb-sidebar-primary, -.sb-sidebar-secondary { - flex-shrink: 0; - width: 17rem; -} - -.sb-announcement__inner { - justify-content: center; - - box-sizing: border-box; - height: 3rem; - - overflow-x: auto; - white-space: nowrap; -} - -/* Sidebars, with checkbox-based toggle */ -.sb-sidebar-primary, -.sb-sidebar-secondary { - position: fixed; - height: 100%; - top: 0; -} - -.sb-sidebar-primary { - left: -17rem; - transition: left 250ms ease-in-out; -} -.sb-sidebar-secondary { - right: -17rem; - transition: right 250ms ease-in-out; -} - -.sb-sidebar-toggle { - display: none; -} -.sb-sidebar-overlay { - position: fixed; - top: 0; - width: 0; - height: 0; - - transition: - width 0ms ease 250ms, - height 0ms ease 250ms, - opacity 250ms ease; - - opacity: 0; - background-color: rgba(0, 0, 0, 0.54); -} - -#sb-sidebar-toggle--primary:checked - ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--primary'], -#sb-sidebar-toggle--secondary:checked - ~ .sb-sidebar-overlay[for='sb-sidebar-toggle--secondary'] { - width: 100%; - height: 100%; - opacity: 1; - transition: - width 0ms ease, - height 0ms ease, - opacity 250ms ease; -} - -#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { - left: 0; -} -#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { - right: 0; -} - -/* Full-width mode */ -.drop-secondary-sidebar-for-full-width-content - .hide-when-secondary-sidebar-shown { - display: none !important; -} -.drop-secondary-sidebar-for-full-width-content .sb-sidebar-secondary { - display: none !important; -} - -.sb-article-container, -.sb-footer-content__inner, -.drop-secondary-sidebar-for-full-width-content .sb-article, -.drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 100vw; -} - -.sb-article, -.match-content-width { - padding: 0 1rem; - box-sizing: border-box; -} - -@media (min-width: 32rem) { - .sb-article, - .match-content-width { - padding: 0 2rem; - } -} - -.sb-container { - margin-top: var(--tn-space-md-fixed); - margin-bottom: var(--tn-space-xxl-fixed); -} - -/* Style the prmary sidebar when it's a popover. */ -#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { - background-color: white; - box-shadow: 10px 5px 5px rgb(161, 161, 161); - border-right: 1px solid black; -} - -#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { - background-color: white; - box-shadow: -5px 0 5px rgb(161, 161, 161); - border-left: 1px solid black; - padding-left: var(--tn-space-md-fixed); -} - -#sb-sidebar-toggle--secondary:checked ~ .sb-container .technote-toc-header { - margin-top: var(--tn-space-md-fixed); -} - -.sb-sidebar-overlay { - // Fuzz out the content slightly - backdrop-filter: blur(1.5px) opacity(0.7) brightness(150%); - background-color: rgba(0, 0, 0, 0); -} - -// The "primary" header contains the controls for the sidebars -.sb-header__inner { - display: flex; - justify-content: space-between; -} - -.sb-header__inner label { - margin: var(--tn-space-xs-fixed); -} - -/* Highlight key containers for debugging. */ -// .sb-article { -// border: 1px solid red; -// } -// .sb-sidebar-secondary { -// border: 1px solid blue; -// } -// .sb-sidebar-primary { -// border: 1px solid green; -// } - -/* - * Content container width. - * Goal is to have a content width <= 80 characters. These override - * breakpoint settings from sphinx-basic-ng's skeleton.css - */ -.sb-article-container, -.sb-footer-content__inner, -.drop-secondary-sidebar-for-full-width-content .sb-article, -.drop-secondary-sidebar-for-full-width-content .match-content-width { - /* reset skeleton.css. Using 100vw means we get horizontal scrollbars. */ - width: auto; -} - -@media (min-width: 42rem) { - .sb-article-container { - width: auto; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 42rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} - -@media (max-width: 42em) { - .sb-article-container, - .sb-footer-content__inner { - width: 100vw; - } - - body { - // experiment with using hyphens on phones - hyphens: auto; - } -} - -@media (min-width: 42em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 38em; - } - .sb-article, - .match-content-width { - width: 38em; - } - // h1::after { - // content: ' 42'; - // } -} - -@media (min-width: 46rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 46rem; - } - .sb-article, - .match-content-width { - width: 46rem; - } -} - -@media (min-width: 46em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 40em; - } - // h1::after { - // content: ' 46'; - // } -} - -@media (min-width: 50rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 50rem; - } - .sb-article, - .match-content-width { - width: 50rem; - } -} - -@media (min-width: 50em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 40em; - } - /* h1::after { - content: ' 50'; - } */ -} - -@media (min-width: 59rem) { - .sb-sidebar-secondary { - position: static; - } - .hide-when-secondary-sidebar-shown { - display: none !important; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 59rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} -@media (min-width: 59em) { - /* secondary sidebar appears, width is 17rem. */ - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 36em; - } - /* h1::after { - content: ' 59'; - } */ -} - -@media (min-width: 63rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 63rem; - } - .sb-article, - .match-content-width { - width: 46rem; - } -} - -@media (min-width: 63em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 36em; - } - /* h1::after { - content: ' 63'; - } */ -} -@media (min-width: 67em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 40em; - } - /* h1::after { - content: ' 67'; - } */ -} - -@media (min-width: 76rem) { - .sb-sidebar-primary { - position: static; - } - .hide-when-primary-sidebar-shown { - display: none !important; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 59rem; - } - .sb-article, - .match-content-width { - width: 42rem; - } -} - -@media (min-width: 76em) { - /* The primary sidebar appears */ - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-article, - .match-content-width { - width: 32em; - } - - // Reset the pop-over specific styling for the sidebar. - .sb-sidebar-primary { - box-shadow: none; - border-right: none; - } - /* h1::after { - content: ' 76'; - } */ -} - -@media (min-width: 80rem) { - .sb-article, - .match-content-width { - width: 46rem; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 63rem; - } -} - -@media (min-width: 80em) { - .sb-article, - .match-content-width { - width: 34em; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - /* h1::after { - content: ' 80'; - } */ -} - -@media (min-width: 84rem) { - .sb-article, - .match-content-width { - width: 50rem; - } - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 67rem; - } -} - -@media (min-width: 84em) { - .sb-article, - .match-content-width { - width: 40em; - } - /* h1::after { - content: ' 84'; - } */ -} - -@media (min-width: 88rem) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 67rem; - } - .sb-page-width { - width: 88rem; - } -} -@media (min-width: 88em) { - .sb-footer-content__inner, - .drop-secondary-sidebar-for-full-width-content .sb-article, - .drop-secondary-sidebar-for-full-width-content .match-content-width { - width: 40em; - } - .sb-page-width { - width: 86em; - } - /* h1::after { - content: ' 88'; - } */ -} - -/* - * Primary sidebar - */ -.sb-sidebar-primary { - padding: var(--tn-space-md-fixed); -} diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index 8181801..aada3d2 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -29,82 +29,48 @@ {% endblock icon_sprites %} {% block announcement %} -
+
+ {% endblock announcement %} + {% block header %} -
-
- {% include "sections/header.html" %} -
+
+ {% include "sections/header.html" %}
{% endblock header %} -{% block header_secondary %} -
-
- {% include "sections/header-secondary.html" %} -
-
-{% endblock header_secondary %} - - - - - {% block container %} -
-
- {% block sidebar_primary %} - - {% endblock sidebar_primary %} -
- {% block header_content %} -
-
- {% include "sections/header-content.html" %} -
-
- {% endblock header_content %} -
- {% block content %} -
-
- {% include "sections/header-article.html" %} -
-
- {% include "sections/article.html" %} -
-
- {% include "sections/footer-article.html" %} -
-
- {% endblock content %} - {% block sidebar_secondary %} - - {% endblock sidebar_secondary %} -
- {% block footer_content %} -
-
- {% include "sections/footer-content.html" %} -
-
- {% endblock footer_content %} -
-
-
+
+ +
+ {% include "sections/logo.html" %} +
+ + + +
+
+ {% include "sections/header-article.html" %} +
+ + {% include sections/article.html %} + +
+ {% include "sections/footer-article.html" %} +
+
+ +
+ {% endblock container %} + {% block footer %} -
-
- {% include "sections/footer.html" %} -
+
+ {% include "sections/footer.html" %}
{% endblock footer %} + {% endblock body %} diff --git a/src/technote/theme/sections/footer-article.html b/src/technote/theme/sections/article-footer.html similarity index 100% rename from src/technote/theme/sections/footer-article.html rename to src/technote/theme/sections/article-footer.html diff --git a/src/technote/theme/sections/header-article.html b/src/technote/theme/sections/article-header.html similarity index 100% rename from src/technote/theme/sections/header-article.html rename to src/technote/theme/sections/article-header.html diff --git a/src/technote/theme/sections/sidebar-secondary.html b/src/technote/theme/sections/content-outline.html similarity index 100% rename from src/technote/theme/sections/sidebar-secondary.html rename to src/technote/theme/sections/content-outline.html diff --git a/src/technote/theme/sections/footer-content.html b/src/technote/theme/sections/footer-content.html deleted file mode 100644 index b236d55..0000000 --- a/src/technote/theme/sections/footer-content.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/technote/theme/sections/header-content.html b/src/technote/theme/sections/header-content.html deleted file mode 100644 index 46615fd..0000000 --- a/src/technote/theme/sections/header-content.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/technote/theme/sections/header-secondary.html b/src/technote/theme/sections/header-secondary.html deleted file mode 100644 index b236d55..0000000 --- a/src/technote/theme/sections/header-secondary.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/technote/theme/sections/sidebar-primary.html b/src/technote/theme/sections/logo.html similarity index 74% rename from src/technote/theme/sections/sidebar-primary.html rename to src/technote/theme/sections/logo.html index 7af80a0..caf4e03 100644 --- a/src/technote/theme/sections/sidebar-primary.html +++ b/src/technote/theme/sections/logo.html @@ -1,7 +1,5 @@ -
{% include "components/sidebar-logo.html" %} {% include "components/sidebar-version.html" %} {% include "components/sidebar-source.html" %} -
From e7c3b470ffb94c2eaee340e8e8403e38d3293b17 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 28 May 2024 16:08:14 -0400 Subject: [PATCH 06/30] Implement a basic responsive grid layout This is a two column / two row grid so that the page outline can be in its own grid area. It's mobile first, so in a media query we assign elements to their grid areas. This is so much more elegant than the complex media queries we had before. --- src/assets/styles/base/_layout.scss | 40 +++++++++++++++++++++++++ src/assets/styles/components/_toc.scss | 22 -------------- src/technote/theme/page.html | 8 ++--- src/technote/theme/sections/header.html | 4 ++- 4 files changed, 47 insertions(+), 27 deletions(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 3b0888c..d7cead1 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -16,3 +16,43 @@ body { margin: 0; min-height: 100%; } + +/* Basic reset for the full-width banners */ +.technote-announcement-container, +.technote-banner-container, +.technote-footer-container { + width: 100%; + padding: 0; + margin: 0; +} + +.technote-container { + display: grid; + grid-template-columns: 1fr; + width: 100%; + padding: 10px; + gap: 2em 4em; +} + +/* Desktop layout */ +@media screen and (min-width: 768px) { + .technote-container { + grid-template-columns: 30ch 72ch; + grid-template-rows: auto 1fr; + } + + .technote-logo-container { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + .technote-outline-container { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + + .technote-article-container { + grid-column: 2 / 3; + grid-row: 1 / 3; + } +} diff --git a/src/assets/styles/components/_toc.scss b/src/assets/styles/components/_toc.scss index caf1d11..4b6a2cc 100644 --- a/src/assets/styles/components/_toc.scss +++ b/src/assets/styles/components/_toc.scss @@ -12,28 +12,6 @@ html[data-theme='dark'] { --tn-component-toc-level-border-color: var(--tn-color-neutral-200); } -.technote-toc { - // Ensure that the toc can scroll independently if its longer than the viewport - overflow-y: auto; - max-height: 100vh; -} - -@media (min-width: 59rem) { - // technote-toc is now a part of the page, not a slide-out - .technote-toc { - // make the toc sticky relative to the top of the page - position: sticky; - top: 1rem; - - // This makes the outline float midway down the page in a sort of useful - // position. It could definitely be engineered better. - margin-top: 20vh; - - // give the toc more margin to the content - margin-left: 2rem; - } -} - .technote-toc-header { margin: 0 0 1rem; font-size: var(--tn-component-h4-size); diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index aada3d2..bbc67e9 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -51,15 +51,15 @@ {% include "sections/content-outline.html" %} -
+
- {% include "sections/header-article.html" %} + {% include "sections/article-header.html" %}
- {% include sections/article.html %} + {% include "sections/article.html" %}
- {% include "sections/footer-article.html" %} + {% include "sections/article-footer.html" %}
diff --git a/src/technote/theme/sections/header.html b/src/technote/theme/sections/header.html index fc1a0ca..5a91f27 100644 --- a/src/technote/theme/sections/header.html +++ b/src/technote/theme/sections/header.html @@ -1 +1,3 @@ -{% include "components/toggle-sidebar-primary.html" %} {% include "components/toggle-sidebar-secondary.html" %} +{# + {% include "components/toggle-sidebar-primary.html" %} {% include "components/toggle-sidebar-secondary.html" %} +#} From 6e019ab497f2586bf15ea8975e47e61286796c34 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 29 May 2024 13:29:59 -0400 Subject: [PATCH 07/30] Add contents outline model for mobile In mobile, take the contents outline out of the grid and instead display it as a fullscreen modal. --- src/assets/scripts/technote.js | 25 +++++++++++++++ src/assets/styles/base/_layout.scss | 50 +++++++++++++++++++++++++++++ src/technote/theme/page.html | 6 ++++ 3 files changed, 81 insertions(+) diff --git a/src/assets/scripts/technote.js b/src/assets/scripts/technote.js index ad36a80..abd8a7a 100644 --- a/src/assets/scripts/technote.js +++ b/src/assets/scripts/technote.js @@ -71,3 +71,28 @@ export function documentReady(callback) { * Add handlers. */ documentReady(addThemeModeListener); + +/** + * Add listener for contents outline navigation button. + */ +function toggleContentsOutline() { + document + .querySelector('#technote-contents-toggle') + .classList.toggle('technote-contents-toggle--active'); + document + .querySelector('.technote-outline-container') + .classList.toggle('technote-outline-container--visible'); +} + +documentReady(function () { + document + .querySelector('#technote-contents-toggle') + .addEventListener('click', toggleContentsOutline); + + document.querySelectorAll('.technote-outline-container a').forEach((el) => { + el.addEventListener('click', toggleContentsOutline); + }); + console.log( + '[Technote]: Added listener for contents outline navigation button.' + ); +}); diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index d7cead1..ebb7087 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -34,6 +34,49 @@ body { gap: 2em 4em; } +/* Contents outline (mobile) */ +.technote-outline-container { + position: fixed; + background: var(--tn-component-text-background-color); + top: 0; + left: 0; + width: 100%; + height: 0%; + opacity: 0; + visibility: hidden; + + &.technote-outline-container--visible { + height: 100%; + opacity: 0.98; + visibility: visible; + backdrop-filter: blur(10px); + padding: 1em; + + display: flex; + align-items: center; /* Vertically centers the content */ + height: 100vh; + } +} + +.technote-contents-toggle-container { + --height: 3em; + position: fixed; + height: var(--height); + top: calc(100vh - var(--height)); + width: 100vw; + z-index: 100; +} + +.technote-contents-toggle { + display: block; + margin-left: auto; + margin-bottom: 10px; + margin-right: 1em; + text-align: center; + font-size: 1.4rem; + cursor: pointer; +} + /* Desktop layout */ @media screen and (min-width: 768px) { .technote-container { @@ -49,10 +92,17 @@ body { .technote-outline-container { grid-column: 1 / 2; grid-row: 2 / 3; + position: relative; + opacity: 1; + visibility: visible; } .technote-article-container { grid-column: 2 / 3; grid-row: 1 / 3; } + + .technote-contents-toggle-container { + visibility: hidden; + } } diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index bbc67e9..d3bd9c4 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -40,6 +40,12 @@
{% endblock header %} + + {% block container %}
From c3c41f1ac93fa7cd4aa986411eeefa3e8abe50bc Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 29 May 2024 14:26:12 -0400 Subject: [PATCH 08/30] Toggle label when showing contents outline --- src/assets/scripts/technote.js | 13 +++++++++++++ src/technote/theme/page.html | 4 +++- src/technote/theme/partials/octicons.html | 5 +++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/assets/scripts/technote.js b/src/assets/scripts/technote.js index abd8a7a..331d652 100644 --- a/src/assets/scripts/technote.js +++ b/src/assets/scripts/technote.js @@ -82,6 +82,19 @@ function toggleContentsOutline() { document .querySelector('.technote-outline-container') .classList.toggle('technote-outline-container--visible'); + + const showLabel = + ' Contents'; + const hideLabel = + ' Hide contents'; + + document.querySelector( + '#technote-contents-toggle.technote-contents-toggle--active' + ) + ? (document.querySelector('#technote-contents-toggle').innerHTML = + hideLabel) + : (document.querySelector('#technote-contents-toggle').innerHTML = + showLabel); } documentReady(function () { diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index d3bd9c4..d1e11c9 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -42,7 +42,9 @@ diff --git a/src/technote/theme/partials/octicons.html b/src/technote/theme/partials/octicons.html index bc3f3a5..4bc850a 100644 --- a/src/technote/theme/partials/octicons.html +++ b/src/technote/theme/partials/octicons.html @@ -128,4 +128,9 @@ + + Close + + + From bd18ccb8d90c80588220189d88d05b0d11dc3f46 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 29 May 2024 15:02:33 -0400 Subject: [PATCH 09/30] Add basic styling for the contents toggle Style the button. For drop shadows, I'm using box-shadow tokens derived from Josh Comeau's https://www.joshwcomeau.com/shadow-palette/ --- src/assets/styles/base/_layout.scss | 10 +++++++ src/assets/styles/properties/_elevations.scss | 27 +++++++++++++++++++ src/assets/styles/properties/_index.scss | 1 + 3 files changed, 38 insertions(+) create mode 100644 src/assets/styles/properties/_elevations.scss diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index ebb7087..a4a1cf4 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -68,6 +68,7 @@ body { } .technote-contents-toggle { + --border-width: 2px; display: block; margin-left: auto; margin-bottom: 10px; @@ -75,6 +76,15 @@ body { text-align: center; font-size: 1.4rem; cursor: pointer; + background-color: var(--tn-component-text-background-color); + border-radius: 0.5em; + padding: 3px 5px; + border: var(--border-width) solid transparent; + box-shadow: var(--shadow-elevation-medium); + + &:hover { + box-shadow: var(--shadow-elevation-high); + } } /* Desktop layout */ diff --git a/src/assets/styles/properties/_elevations.scss b/src/assets/styles/properties/_elevations.scss new file mode 100644 index 0000000..a2c3f0f --- /dev/null +++ b/src/assets/styles/properties/_elevations.scss @@ -0,0 +1,27 @@ +/* Shadow tokens. */ + +/* + https://www.joshwcomeau.com/shadow-palette/ + + oomph: 0.7 + crispy: 0.33 + resolution: 0.75 +*/ +:root { + --shadow-color: 0deg 0% 56%; + --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.27), + 0.5px 0.9px 1.3px -0.8px hsl(var(--shadow-color) / 0.37), + 1.1px 2.2px 3.1px -1.6px hsl(var(--shadow-color) / 0.46); + --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.29), + 1px 2.1px 2.9px -0.5px hsl(var(--shadow-color) / 0.36), + 2.4px 4.8px 6.7px -1.1px hsl(var(--shadow-color) / 0.44), + 5.5px 11px 15.4px -1.6px hsl(var(--shadow-color) / 0.51); + --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.27), + 2.2px 4.3px 6px -0.2px hsl(var(--shadow-color) / 0.3), + 4px 8px 11.2px -0.5px hsl(var(--shadow-color) / 0.34), + 6.3px 12.5px 17.5px -0.7px hsl(var(--shadow-color) / 0.37), + 9.5px 18.9px 26.5px -0.9px hsl(var(--shadow-color) / 0.4), + 14.1px 28.3px 39.6px -1.2px hsl(var(--shadow-color) / 0.44), + 20.8px 41.6px 58.3px -1.4px hsl(var(--shadow-color) / 0.47), + 30px 60px 84px -1.6px hsl(var(--shadow-color) / 0.51); +} diff --git a/src/assets/styles/properties/_index.scss b/src/assets/styles/properties/_index.scss index cd08151..d311398 100644 --- a/src/assets/styles/properties/_index.scss +++ b/src/assets/styles/properties/_index.scss @@ -1,4 +1,5 @@ @use 'colors'; +@use 'elevations'; @use 'spacing'; @use 'radii'; @use 'typography'; From a95fbad0c6b290ed34ad12b177a77065b8fa820b Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 29 May 2024 15:22:45 -0400 Subject: [PATCH 10/30] Add a subtle animation to bring in contents menu --- src/assets/styles/base/_layout.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index a4a1cf4..cceea53 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -44,6 +44,10 @@ body { height: 0%; opacity: 0; visibility: hidden; + transition: + opacity 0.3s, + visibility 0.3s, + height 0s; &.technote-outline-container--visible { height: 100%; @@ -55,6 +59,10 @@ body { display: flex; align-items: center; /* Vertically centers the content */ height: 100vh; + transition: + opacity 0s, + visibility 0s, + height 0s; } } From 15dcb06845cc5f643bfa6836876f1f771c7be430 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 4 Jun 2024 08:13:41 -0700 Subject: [PATCH 11/30] Constrain the max width of the content column The easiest way to let the content column smoothly increase in size up to a max size of 72ch is with another wrapper div so that the grid column can just take the excess space. --- src/assets/styles/base/_layout.scss | 25 ++++++++++++++-- src/assets/styles/properties/_index.scss | 1 + src/assets/styles/properties/_layout.scss | 7 +++++ src/technote/theme/page.html | 36 ++++++++++++----------- 4 files changed, 49 insertions(+), 20 deletions(-) create mode 100644 src/assets/styles/properties/_layout.scss diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index cceea53..2a99f95 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -20,18 +20,30 @@ body { /* Basic reset for the full-width banners */ .technote-announcement-container, .technote-banner-container, -.technote-footer-container { +.technote-footer-container, +.technote-container-wrapper { width: 100%; padding: 0; margin: 0; } +/* This wrapper constrains the overall width of the main.technote-container + * without the need to use extra media queries. + */ +.technote-container-wrapper { + width: 100%; + max-width: calc( + var(--tn-sidebar-width) + var(--tn-content-max-width) + + var(--tn-layout-column-gap) + ); +} + .technote-container { display: grid; grid-template-columns: 1fr; width: 100%; padding: 10px; - gap: 2em 4em; + gap: 2em 2em; } /* Contents outline (mobile) */ @@ -98,7 +110,7 @@ body { /* Desktop layout */ @media screen and (min-width: 768px) { .technote-container { - grid-template-columns: 30ch 72ch; + grid-template-columns: var(--tn-sidebar-width) 1fr; grid-template-rows: auto 1fr; } @@ -124,3 +136,10 @@ body { visibility: hidden; } } + +@media screen and (min-width: 1024px) { + .technote-container { + // grid-template-columns: 30ch 72ch; + column-gap: 4em; + } +} diff --git a/src/assets/styles/properties/_index.scss b/src/assets/styles/properties/_index.scss index d311398..81365c4 100644 --- a/src/assets/styles/properties/_index.scss +++ b/src/assets/styles/properties/_index.scss @@ -3,4 +3,5 @@ @use 'spacing'; @use 'radii'; @use 'typography'; +@use 'layout'; @use 'sphinx'; diff --git a/src/assets/styles/properties/_layout.scss b/src/assets/styles/properties/_layout.scss new file mode 100644 index 0000000..a3fc410 --- /dev/null +++ b/src/assets/styles/properties/_layout.scss @@ -0,0 +1,7 @@ +/* Properties for the layout. */ + +:root { + --tn-sidebar-width: 30ch; + --tn-content-max-width: 72ch; + --tn-layout-column-gap: 4em; +} diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index d1e11c9..d9b0b37 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -49,29 +49,31 @@ {% block container %} -
+
+
-
- {% include "sections/logo.html" %} -
+
+ {% include "sections/logo.html" %} +
- + -
-
- {% include "sections/article-header.html" %} -
+
+
+ {% include "sections/article-header.html" %} +
- {% include "sections/article.html" %} + {% include "sections/article.html" %} -
- {% include "sections/article-footer.html" %} -
-
+
+ {% include "sections/article-footer.html" %} +
+
-
+
+ {% endblock container %} From 06b08071e8d277ac9fe4ab204c858a5845150fad Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 4 Jun 2024 08:18:50 -0700 Subject: [PATCH 12/30] Fix background for contents toggle button This button background shouldn't be the text background colour because the text doesn't toggle to white in dark mode. --- src/assets/styles/base/_layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 2a99f95..f249d43 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -96,7 +96,6 @@ body { text-align: center; font-size: 1.4rem; cursor: pointer; - background-color: var(--tn-component-text-background-color); border-radius: 0.5em; padding: 3px 5px; border: var(--border-width) solid transparent; From 18aad4a70c234b3b85daeb3694ab26d53ec81ddc Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 12 Jun 2024 14:13:32 -0400 Subject: [PATCH 13/30] Try full-bleed trick with flexbox This idea is from https://www.joshwcomeau.com/css/full-bleed/ to create a grid with whitespace columns that a full-bleed element can spill into by changing their grid columns. This didn't end up working because the full-bleed blocks are embedded by Sphinx inside hierarchical section elements. This means that potential full-bleed images aren't direct children of the grid container, and therefore aren't part of the grid layout calculation. --- demo/md/index.md | 18 +++++++++++++++ src/assets/styles/base/_layout.scss | 18 +++++++++++++++ src/technote/theme/page.html | 36 ++++++++++++++--------------- 3 files changed, 53 insertions(+), 19 deletions(-) diff --git a/demo/md/index.md b/demo/md/index.md index 0bdbecb..f865763 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -14,3 +14,21 @@ Add an image with a caption: The Rubin watermark. ``` + +Wide content: + +```{rst-class} technote-wide-content +``` + +```{image} https://placehold.co/1200x400 +``` + +### A subsection + +More wide content: + +```{rst-class} technote-wide-content +``` + +```{image} https://placehold.co/1200x400 +``` diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index f249d43..f7b0d8a 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -129,8 +129,26 @@ body { .technote-article-container { grid-column: 2 / 3; grid-row: 1 / 3; + + /* Create a grid within article to constrain content but allow + full-bleed blocks. + */ + display: grid; + grid-template-columns: calc(min(100%, var(--tn-content-max-width))) 1fr; + } + + /* Constrain content to a readable column. */ + .technote-article-container > * { + grid-column: 1 / 2; + } + + /* Full-bleed blocks */ + .technote-wide-content { + max-width: 100%; + grid-column: 1 / -1; } + /* The contents toggle button isn't available on desktop. */ .technote-contents-toggle-container { visibility: hidden; } diff --git a/src/technote/theme/page.html b/src/technote/theme/page.html index d9b0b37..d1e11c9 100644 --- a/src/technote/theme/page.html +++ b/src/technote/theme/page.html @@ -49,31 +49,29 @@ {% block container %} -
-
+
-
- {% include "sections/logo.html" %} -
+
+ {% include "sections/logo.html" %} +
- + -
-
- {% include "sections/article-header.html" %} -
+
+
+ {% include "sections/article-header.html" %} +
- {% include "sections/article.html" %} + {% include "sections/article.html" %} -
- {% include "sections/article-footer.html" %} -
-
+
+ {% include "sections/article-footer.html" %} +
+
-
-
+
{% endblock container %} From 13ee53bb1811b27d19b731d38e74d237ec91cdb4 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 13 Jun 2024 16:59:00 -0400 Subject: [PATCH 14/30] Implement full-width images using negative margins Note that not only is negative margin necessary, but we also need to reset the max-width of blocks that are normally set to 100%, like img. --- src/assets/styles/base/_layout.scss | 44 ++++++++++++++--------- src/assets/styles/properties/_layout.scss | 1 + 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index f7b0d8a..804733f 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -20,29 +20,17 @@ body { /* Basic reset for the full-width banners */ .technote-announcement-container, .technote-banner-container, -.technote-footer-container, -.technote-container-wrapper { +.technote-footer-container { width: 100%; padding: 0; margin: 0; } -/* This wrapper constrains the overall width of the main.technote-container - * without the need to use extra media queries. - */ -.technote-container-wrapper { - width: 100%; - max-width: calc( - var(--tn-sidebar-width) + var(--tn-content-max-width) + - var(--tn-layout-column-gap) - ); -} - .technote-container { display: grid; grid-template-columns: 1fr; width: 100%; - padding: 10px; + padding: var(--tn-layout-container-padding); gap: 2em 2em; } @@ -134,7 +122,11 @@ body { full-bleed blocks. */ display: grid; - grid-template-columns: calc(min(100%, var(--tn-content-max-width))) 1fr; + /* The content width is re-used when calculating the negative-margin + and max-width for the full-bleed blocks. + */ + --tn-content-width: calc(min(100%, var(--tn-content-max-width))); + grid-template-columns: var(--tn-content-width) 1fr; } /* Constrain content to a readable column. */ @@ -144,8 +136,26 @@ body { /* Full-bleed blocks */ .technote-wide-content { - max-width: 100%; - grid-column: 1 / -1; + /* This negative margin extends the container for wide content out by the + width of the right whitespace. This is calculated as the viewport + width that's left over after removing the widths of the left sidebar, + the grid column gap, the main content column width, and the padding. + */ + margin-right: calc( + -100vw + var(--tn-sidebar-width) + var(--tn-layout-column-gap) + var( + --tn-content-width + ) + var(--tn-layout-container-padding) + ); + } + + /* Reset the max-width for full-bleed images. Normally they're 100% of the container. */ + .technote-wide-content img, + img.technote-wide-content { + max-width: calc( + 100vw - var(--tn-sidebar-width) - var(--tn-layout-column-gap) - var( + --tn-layout-container-padding + ) + ); } /* The contents toggle button isn't available on desktop. */ diff --git a/src/assets/styles/properties/_layout.scss b/src/assets/styles/properties/_layout.scss index a3fc410..16ba413 100644 --- a/src/assets/styles/properties/_layout.scss +++ b/src/assets/styles/properties/_layout.scss @@ -4,4 +4,5 @@ --tn-sidebar-width: 30ch; --tn-content-max-width: 72ch; --tn-layout-column-gap: 4em; + --tn-layout-container-padding: 10px; } From ee002cea471fce87878232bda115c032d4db0f2e Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Mon, 17 Jun 2024 11:38:47 -0400 Subject: [PATCH 15/30] Make full-width tables that also overflow if wide This is a checkpoint on progress towards making tables work with the .technote-wide-content class. Need to: - Check that mobile still works - Check that images/image figures still work - Check that code blocks work --- demo/md/index.md | 41 +++++++++++++++++++++++++---- src/assets/styles/base/_layout.scss | 17 ++++++++++-- src/assets/styles/base/_sphinx.scss | 20 ++++++++------ 3 files changed, 63 insertions(+), 15 deletions(-) diff --git a/demo/md/index.md b/demo/md/index.md index f865763..79bf4cc 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -10,20 +10,20 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis Add an image with a caption: -```{figure} rubin-watermark.png + Wide content: -```{rst-class} technote-wide-content + -### A subsection + + +```{rst-class} technote-wide-content ``` + +```{list-table} +:header-rows: 1 + +* - Column 1 + - Column 2 + - Column 3 + - Column 4 + - Column 5 + - Column 6 + - Column 7 +* - Row 1 + - lorem ipsum dolor sit amet consectetur adipiscing elit + - lorem ipsum dolor + - lorem ipsum dolor + - 5 + - 6 + - Lorem ipsum +* - Row 2 + - 6 + - 7 + - 8 + - 9 + - 10 + - Lorem ipsum +``` + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 804733f..da7fb9d 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -134,7 +134,14 @@ body { grid-column: 1 / 2; } - /* Full-bleed blocks */ + /* Full-bleed blocks + * + * When a table is marked with a table-wide-content rst-class, that class + * actually applies to the table inside the figure, but we need the entire + * figure to to be full bleed. The :has selector lets us select the + * figure that contains a table.technote-wide-content. + */ + figure.technote-table:has(.technote-wide-content), .technote-wide-content { /* This negative margin extends the container for wide content out by the width of the right whitespace. This is calculated as the viewport @@ -146,11 +153,17 @@ body { --tn-content-width ) + var(--tn-layout-container-padding) ); + + /* Allow tables that are wider than the viewport to scroll. */ + overflow-x: scroll; } /* Reset the max-width for full-bleed images. Normally they're 100% of the container. */ .technote-wide-content img, - img.technote-wide-content { + img.technote-wide-content, + .technote-wide-content.figure img, + .technote-table:has(.technote-wide-content), + table.technote-wide-content { max-width: calc( 100vw - var(--tn-sidebar-width) - var(--tn-layout-column-gap) - var( --tn-layout-container-padding diff --git a/src/assets/styles/base/_sphinx.scss b/src/assets/styles/base/_sphinx.scss index bf4e833..6c84bfc 100644 --- a/src/assets/styles/base/_sphinx.scss +++ b/src/assets/styles/base/_sphinx.scss @@ -203,12 +203,16 @@ img { figure { margin-left: 0; - margin-right: 0; } -figure img { - max-width: 100%; -} +// figure { +// margin-left: 0; +// margin-right: 0; +// } + +// figure img { +// max-width: 100%; +// } figcaption { width: 100%; @@ -236,10 +240,10 @@ figcaption p:last-child { // setting the display property of table itself to block, which is bad for // accessibility. // https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/ -.technote-table { - max-width: 100%; - overflow-x: auto; -} +// .technote-table { +// max-width: 100%; +// overflow-x: auto; +// } table { max-width: fit-content; From 982a90465d7b80b23fae6f1b5654769533745594 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Mon, 17 Jun 2024 11:50:37 -0400 Subject: [PATCH 16/30] Fix link to pydata-sphinx-theme The direct link to their pygments overwriting code no longer resolves, so made a more general link. --- src/technote/ext/pygmentscss.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/technote/ext/pygmentscss.py b/src/technote/ext/pygmentscss.py index 928f048..bd9bc2a 100644 --- a/src/technote/ext/pygmentscss.py +++ b/src/technote/ext/pygmentscss.py @@ -17,12 +17,12 @@ def overwrite_pygments_css( """Overwrite the pygments CSS file with a version that enables toggling between light and dark themes. - Each selector is prefixed with html[data-theme='light|dark'] to enable + Each selector is prefixed with ``html[data-theme='light|dark']`` to enable toggling between light and dark themes with JavaScript. This approach is heavily based on pydata-sphinx-theme and furo: - - https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/pygment.py + - https://github.com/pydata/pydata-sphinx-theme/ - https://github.com/pradyunsg/furo/blob/main/src/furo/__init__.py """ if exceptions: From 6a50753b316da1596a67f7b03c077f29f91090dc Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Mon, 17 Jun 2024 16:49:07 -0400 Subject: [PATCH 17/30] Get tables to work in both mobile and desktop The key for getting the mobile view to work is to set an explicit width on the table in mobile so that the overflow scrolling would work. Otherwise the table would push the entire content column to be wider than the viewport. --- src/assets/styles/base/_layout.scss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index da7fb9d..96cdcd6 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -94,6 +94,27 @@ body { } } +@media screen and (max-width: 768px) { + figure.technote-table:has(.technote-wide-content), + .technote-wide-content { + margin-right: 0; + overflow-x: auto; + max-width: 100%; + /* Getting reliable overflow scroll in the mobile view is reliable + * when a specific width is set on the container. + */ + width: calc(100vw - 2 * var(--tn-layout-container-padding)); + } + + .technote-wide-content img, + img.technote-wide-content, + .technote-wide-content.figure img, + .technote-table:has(.technote-wide-content), + table.technote-wide-content { + max-width: 100%; + } +} + /* Desktop layout */ @media screen and (min-width: 768px) { .technote-container { @@ -155,7 +176,7 @@ body { ); /* Allow tables that are wider than the viewport to scroll. */ - overflow-x: scroll; + overflow-x: auto; } /* Reset the max-width for full-bleed images. Normally they're 100% of the container. */ From 6b47d185172ffec096f3c5ec7d9daae6ea6c1744 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 18 Jun 2024 13:41:47 -0400 Subject: [PATCH 18/30] Validate that wide code blocks work --- demo/md/index.md | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/demo/md/index.md b/demo/md/index.md index 79bf4cc..5bd9c3c 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -10,20 +10,22 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis Add an image with a caption: - +``` + +## Wide content Wide content: - +``` - +``` + +### Tables ```{rst-class} technote-wide-content ``` @@ -63,3 +67,12 @@ More wide content: ``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. + +### Code blocks + +```{rst-class} technote-wide-content +``` + +```{code-block} python +print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") +``` From 550008212800ab744c4242559eb452450eebc790 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 18 Jun 2024 15:04:45 -0400 Subject: [PATCH 19/30] Make sidebar sticky Do this by making the contents area max out to 100vh so that it scrolls independently of the sidebar. --- src/assets/styles/base/_layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 96cdcd6..6824dc9 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -120,6 +120,7 @@ body { .technote-container { grid-template-columns: var(--tn-sidebar-width) 1fr; grid-template-rows: auto 1fr; + height: 100vh; /* Full height to allow for sticky sidebar */ } .technote-logo-container { @@ -139,6 +140,9 @@ body { grid-column: 2 / 3; grid-row: 1 / 3; + /* Allow overflow because .technote-container is full height */ + overflow-y: auto; + /* Create a grid within article to constrain content but allow full-bleed blocks. */ From fbc645c7f8a7fc817b5201c3592aa2e58dd93c1a Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Tue, 18 Jun 2024 15:50:12 -0400 Subject: [PATCH 20/30] Make the contents scroll independently This change makes it so that scrolling to view more of the contents outline in desktop will not cause the content to shift. The logo section is always sticky to the top of the technote. --- src/assets/styles/base/_layout.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 6824dc9..69adbfd 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -134,6 +134,9 @@ body { position: relative; opacity: 1; visibility: visible; + /* to let the outline scroll independently */ + height: 100%; + overflow-y: auto; } .technote-article-container { From 4b1b954c47e78450d86456ba355102435e8df381 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 14:24:05 -0400 Subject: [PATCH 21/30] Standardize and set left padding for block The goal here is to apply a negative margin to Sphinx block elements like code blocks and admintions so that their text content lines up with the body text. If they have a border or background, then their container needs to have padding big enough to show this overhang (this is a side-effect of needing to set the overflow property on the article to support independent scrolling). For this to work reliably, I'm creating a new custom property so capture this dimension so that it can be used reliably and consistently for both the padding on article and the negative margin on the block elements. --- src/assets/styles/base/_layout.scss | 8 ++++++++ src/assets/styles/base/_sphinx.scss | 18 +++++++++--------- src/assets/styles/properties/_sphinx.scss | 19 +++++++++++++++---- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 69adbfd..2441e32 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -143,6 +143,14 @@ body { grid-column: 2 / 3; grid-row: 1 / 3; + /* This padding to the left allows space for the block elements (e.g. + admonitions and code blocks) to have their borders extend to the left. + This allows the text content of the block to line up with the body. + */ + padding-left: calc( + var(--tn-sphinx-block-padding-x) + var(--tn-sphinx-block-border-thickness) + ); + /* Allow overflow because .technote-container is full height */ overflow-y: auto; diff --git a/src/assets/styles/base/_sphinx.scss b/src/assets/styles/base/_sphinx.scss index 6c84bfc..753f747 100644 --- a/src/assets/styles/base/_sphinx.scss +++ b/src/assets/styles/base/_sphinx.scss @@ -27,8 +27,8 @@ a.headerlink:hover { .highlight { margin: 0; - margin-left: calc(-1 * var(--tn-space-xs-fixed)); - padding: var(--tn-space-xs-fixed); + margin-left: calc(-1 * var(--tn-sphinx-block-padding-x)); + padding: var(--tn-sphinx-block-padding-x); overflow-x: auto; border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color); @@ -36,8 +36,8 @@ a.headerlink:hover { } .literal-block-wrapper { - margin-left: calc(-1 * var(--tn-space-xs-fixed)); - padding-left: var(--tn-space-xs-fixed); + margin-left: calc(-1 * var(--tn-sphinx-block-padding-x)); + padding-left: var(--tn-sphinx-block-padding-x); border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color); border-radius: var(--tn-sphinx-code-block-border-radius); @@ -55,15 +55,15 @@ a.headerlink:hover { var(--tn-sphinx-code-block-border-color); border-radius: var(--tn-sphinx-code-block-border-radius) var(--tn-sphinx-code-block-border-radius) 0 0; - padding: var(--tn-space-xxxs-fixed) var(--tn-space-xs-fixed); - margin-left: calc(-1 * var(--tn-space-xs-fixed)); + padding: var(--tn-space-xxxs-fixed) var(--tn-sphinx-block-padding-x); + margin-left: calc(-1 * var(--tn-sphinx-block-padding-x)); } .admonition { border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color); border-radius: var(--tn-sphinx-code-block-border-radius); - padding: var(--tn-space-xs-fixed); + padding: var(--tn-sphinx-block-padding-x); margin-bottom: 1rem; } @@ -73,8 +73,8 @@ a.headerlink:hover { .admonition-title { font-weight: bold; - margin: calc(-1 * var(--tn-space-xs-fixed)); - padding: var(--tn-space-xs-fixed); + margin: calc(-1 * var(--tn-sphinx-block-padding-x)); + padding: var(--tn-sphinx-block-padding-x); border-radius: var(--tn-sphinx-code-block-border-radius) var(--tn-sphinx-code-block-border-radius) 0 0; font-size: 0.9rem; diff --git a/src/assets/styles/properties/_sphinx.scss b/src/assets/styles/properties/_sphinx.scss index 1c160ee..01e8f54 100644 --- a/src/assets/styles/properties/_sphinx.scss +++ b/src/assets/styles/properties/_sphinx.scss @@ -1,10 +1,21 @@ /* Properties for Sphinx components. */ :root { - --tn-sphinx-code-block-border-color: var(--tn-color-primary); - --tn-sphinx-code-block-border-thickness: 1px; - --tn-sphinx-code-block-border-radius: var(--tn-border-radius-1); - --tn-sphinx-code-block-caption-background-color: var(--tn-color-primary-000); + --tn-sphinx-block-border-color: var(--tn-color-primary); + --tn-sphinx-block-border-thickness: 1px; + --tn-sphinx-block-border-radius: var(--tn-border-radius-1); + --tn-sphinx-block-caption-background-color: var(--tn-color-primary-000); + --tn-sphinx-block-padding-x: var(--tn-space-xs-fixed); + + --tn-sphinx-code-block-border-color: var(--tn-sphinx-block-border-thickness); + --tn-sphinx-code-block-border-thickness: var( + --tn-sphinx-block-border-thickness + ); + --tn-sphinx-code-block-border-radius: var(--tn-sphinx-block-border-radius); + --tn-sphinx-code-block-caption-background-color: var( + --tn-sphinx-block-border-radius + ); + --tn-sphinx-footnote-label-background-color: var(--tn-color-blue-000); --tn-sphinx-footnote-label-border-color: var(--tn-color-blue-100); --tn-sphinx-footnote-label-background-hover-color: var(--tn-color-blue-100); From b6b971c3b59b2b7f6a34740fb40cb97f5c8536da Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 15:32:42 -0400 Subject: [PATCH 22/30] Use container query on article for typography - Create a CSS container called technote-article on the article element - Use that container to reduce the gap between headings and their content in mobile views. --- src/assets/styles/base/_layout.scss | 6 ++++++ src/assets/styles/base/_typography.scss | 12 ++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 2441e32..876bb07 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -34,6 +34,12 @@ body { gap: 2em 2em; } +.technote-article-container { + /* Make the technote container a queryable container */ + container-type: inline-size; + container-name: technote-article; +} + /* Contents outline (mobile) */ .technote-outline-container { position: fixed; diff --git a/src/assets/styles/base/_typography.scss b/src/assets/styles/base/_typography.scss index fc68aa2..05d5b7c 100644 --- a/src/assets/styles/base/_typography.scss +++ b/src/assets/styles/base/_typography.scss @@ -51,6 +51,18 @@ h6 { font-weight: var(--tn-component-h6-weight); } +/* Tweaks to typography in mobile views */ +@container technote-article (max-width: 768px) { + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: 0.5em; + } +} + /* Handle Sphinx's built-in permalink icon. */ h1 .headerlink, h2 .headerlink, From e136c7552afc93c01f62671e034d292f41740f87 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 16:04:49 -0400 Subject: [PATCH 23/30] Fix colour of code block borders --- src/assets/styles/properties/_sphinx.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/styles/properties/_sphinx.scss b/src/assets/styles/properties/_sphinx.scss index 01e8f54..73ffe01 100644 --- a/src/assets/styles/properties/_sphinx.scss +++ b/src/assets/styles/properties/_sphinx.scss @@ -7,7 +7,7 @@ --tn-sphinx-block-caption-background-color: var(--tn-color-primary-000); --tn-sphinx-block-padding-x: var(--tn-space-xs-fixed); - --tn-sphinx-code-block-border-color: var(--tn-sphinx-block-border-thickness); + --tn-sphinx-code-block-border-color: var(--tn-sphinx-block-border-color); --tn-sphinx-code-block-border-thickness: var( --tn-sphinx-block-border-thickness ); From a5a1713258002fa42b844b093b44dba911d63b9b Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 16:18:07 -0400 Subject: [PATCH 24/30] Don't apply overflow with .technote-wide-content This was breaking code blocks that didn't have captions. It turns out that we never needed this overflow-x on .technote-wide-content because .highlight already includes it. So instead, only add the overflow specifically to tables with wide content. --- demo/md/index.md | 25 +++++++++++++++++++++++++ src/assets/styles/base/_layout.scss | 8 +++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/demo/md/index.md b/demo/md/index.md index 5bd9c3c..c60aaed 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -70,9 +70,34 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis ### Code blocks +A regular code block: + +```{code-block} python +print("Hello, world!") +``` + +And with a caption: + +```{code-block} python +:caption: A code block with a caption + +print("Hello, world!") +``` + +A wide code block: + ```{rst-class} technote-wide-content ``` ```{code-block} python print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") ``` + +A wide code block with a caption: + +```{code-block} python +:caption: A wide code block +:class: technote-wide-content + +print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") +``` diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 876bb07..728b461 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -195,8 +195,14 @@ body { --tn-content-width ) + var(--tn-layout-container-padding) ); + } + + figure.technote-table:has(.technote-wide-content) { + /* Allow tables that are wider than the viewport to scroll. - /* Allow tables that are wider than the viewport to scroll. */ + Only tables use this rule; not code-blocks. The .highlight class + already provides overflow-x. + */ overflow-x: auto; } From 15035e4b431563f9f560238d1ebe7fd9e9a794b0 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 16:35:44 -0400 Subject: [PATCH 25/30] Tweak margin-right for wide content Need to factor in the negative margin applied to code blocks and also the full padding around the page 2x tn-layout-container-padding --- src/assets/styles/base/_layout.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 728b461..46fb68e 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -193,7 +193,9 @@ body { margin-right: calc( -100vw + var(--tn-sidebar-width) + var(--tn-layout-column-gap) + var( --tn-content-width - ) + var(--tn-layout-container-padding) + ) + 2 * var(--tn-layout-container-padding) + var( + --tn-sphinx-block-padding-x + ) + var(--tn-sphinx-block-border-thickness) ); } From ccd60874d8f78640df4fe52a4ef031852c24fbc2 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Wed, 19 Jun 2024 17:26:58 -0400 Subject: [PATCH 26/30] Constrain width of caption text with padding When the code block is full width we still want the caption's text to be constrained to the width of the text block for readability. --- demo/md/index.md | 13 ++++++++++++- src/assets/styles/base/_sphinx.scss | 11 +++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/demo/md/index.md b/demo/md/index.md index c60aaed..64a11f6 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -93,7 +93,7 @@ A wide code block: print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") ``` -A wide code block with a caption: +A wide code block with a caption where the class is set internally: ```{code-block} python :caption: A wide code block @@ -101,3 +101,14 @@ A wide code block with a caption: print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") ``` + +A wide code block with a caption where the class is set externally: + +```{rst-class} technote-wide-content +``` + +```{code-block} python +:caption: A wide code block. This is a long caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. + +print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") +``` diff --git a/src/assets/styles/base/_sphinx.scss b/src/assets/styles/base/_sphinx.scss index 753f747..7979366 100644 --- a/src/assets/styles/base/_sphinx.scss +++ b/src/assets/styles/base/_sphinx.scss @@ -59,6 +59,17 @@ a.headerlink:hover { margin-left: calc(-1 * var(--tn-sphinx-block-padding-x)); } +.technote-wide-content .code-block-caption { + /* Add padding to constrain the caption to the width of the + text column. + */ + padding-right: calc( + 100vw - var(--tn-content-width) - var(--tn-sidebar-width) - var( + --tn-layout-column-gap + ) + ); +} + .admonition { border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color); From 063a9b9abd90fd4aba56bbda17a26db52d245120 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 20 Jun 2024 11:45:17 -0400 Subject: [PATCH 27/30] Test more typographic samples in demo document --- demo/md/index.md | 98 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 77 insertions(+), 21 deletions(-) diff --git a/demo/md/index.md b/demo/md/index.md index 64a11f6..33f4fee 100644 --- a/demo/md/index.md +++ b/demo/md/index.md @@ -8,34 +8,47 @@ A *technote* is a web-native single page document that enables rapid technical c Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. -Add an image with a caption: +## Images and figures + +A figure with a caption: ```{figure} rubin-watermark.png -The Rubin watermark. +The Rubin watermark. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. ``` -## Wide content +### Wide figures -Wide content: +A figure marked with the `technote-wide-content` class applied as a `figclass` option: -```{rst-class} technote-wide-content -``` +```{figure} https://placehold.co/1200x400 +:figclass: technote-wide-content -```{image} https://placehold.co/1200x400 +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. ``` -### A subsection +### Tables -More wide content: +A table: -```{rst-class} technote-wide-content -``` +```{list-table} +:header-rows: 1 -```{image} https://placehold.co/1200x400 +* - Column 1 + - Column 2 + - Column 3 +* - Row 1 + - 1 + - 1 +* - Row 2 + - 2 + - 2 +* - Row 3 + - 3 + - 3 ``` -### Tables +A table marked with the `technote-wide-content` class: ```{rst-class} technote-wide-content ``` @@ -84,16 +97,27 @@ And with a caption: print("Hello, world!") ``` -A wide code block: +A wide code block without a caption: + +```{rst-class} technote-wide-content +``` + +```{code-block} python +print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") +``` + +A wide code block with a caption where the class is set externally: ```{rst-class} technote-wide-content ``` ```{code-block} python +:caption: A wide code block. This is a long caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. + print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") ``` -A wide code block with a caption where the class is set internally: +A wide code block with a caption where the class is set internally (this will not work): ```{code-block} python :caption: A wide code block @@ -102,13 +126,45 @@ A wide code block with a caption where the class is set internally: print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") ``` -A wide code block with a caption where the class is set externally: +## Admonitions -```{rst-class} technote-wide-content -``` +An admonition: -```{code-block} python -:caption: A wide code block. This is a long caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. +```{note} +This is a note. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. -print("Hello, world! This is a code block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl.") +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. ``` + +## Lists + +A bulleted list: + +- Item 1 +- Item 2 +- Item 3 + +A numbered list: + +1. Item 1 +2. Item 2 +3. Item 3 + +A bulleted list with a nested numbered list: + +- Item 1 + 1. Item 1.1 + 2. Item 1.2 +- Item 2 +- Item 3 + +A definition list: + +term 1 + Definition 1 +term 2 + Definition 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis molestie ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc eu nisl. + +## Links + +A link to [Rubin Observatory](https://www.rubinobservatory.org). From 29c5a01468173e136c13b9a6515c8f7e57d705b4 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 20 Jun 2024 11:50:28 -0400 Subject: [PATCH 28/30] Constrain width of figcaption for wide content --- src/assets/styles/base/_sphinx.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/assets/styles/base/_sphinx.scss b/src/assets/styles/base/_sphinx.scss index 7979366..db650e6 100644 --- a/src/assets/styles/base/_sphinx.scss +++ b/src/assets/styles/base/_sphinx.scss @@ -59,7 +59,8 @@ a.headerlink:hover { margin-left: calc(-1 * var(--tn-sphinx-block-padding-x)); } -.technote-wide-content .code-block-caption { +.technote-wide-content .code-block-caption, +.technote-wide-content figcaption { /* Add padding to constrain the caption to the width of the text column. */ From bab185b7482cb786dc8ba75360d2aafc21491118 Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 20 Jun 2024 13:50:21 -0400 Subject: [PATCH 29/30] Fix mobile contents overlay with z-index With the CSS grid change this was broken, likely because of content order. The higher z-index ensures that the contents overlay appears over the content. --- src/assets/styles/base/_layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 46fb68e..437ec89 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -56,11 +56,11 @@ body { height 0s; &.technote-outline-container--visible { - height: 100%; opacity: 0.98; visibility: visible; backdrop-filter: blur(10px); padding: 1em; + z-index: 10; display: flex; align-items: center; /* Vertically centers the content */ From 6819e1caeb6dae24e5496ab21955b7456ec7774a Mon Sep 17 00:00:00 2001 From: Jonathan Sick Date: Thu, 20 Jun 2024 14:04:43 -0400 Subject: [PATCH 30/30] Add changelog entry for new technote layout --- changelog.d/20240620_135505_jsick_DM_44542.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 changelog.d/20240620_135505_jsick_DM_44542.md diff --git a/changelog.d/20240620_135505_jsick_DM_44542.md b/changelog.d/20240620_135505_jsick_DM_44542.md new file mode 100644 index 0000000..625eaae --- /dev/null +++ b/changelog.d/20240620_135505_jsick_DM_44542.md @@ -0,0 +1,19 @@ + + +### Backwards-incompatible changes + +- + +### New features + +- Technote now features a two-column layout. The left column contains the table of contents and metadata, while the right column contains the content. This layout allows for wide content to "bleed" into the whitespace to the right of the content column. With this change, we've essentially dropped the CSS patterns from the `sphinx-basic-ng` theme. The Technote layout is now built around CSS grid. + +- Wide content (such as figures, tables, and code blocks) can now extend past the content column if the author sets the `technote-wide-content` class on the content. This class is applied as a `figclass` option in figures or as a preceeding `rst-class` directive to tables and code blocks. + +### Bug fixes + +- + +### Other changes + +-