CSS fixes

DevMountain · Aug 4, 2022 · 5a06304 · 5a06304
1 parent 1e1eb53
commit 5a06304
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 34 deletions.
diff --git a/sphinxcontrib/specs/content.py b/sphinxcontrib/specs/content.py
@@ -34,7 +34,7 @@ def visit_specscontent(self, node: specscontent) -> None:
     self.body.append('<div class="row g-0">\n')
     self.body.append('<div class="col-1">\n')
     self.body.append(
-        '<div class="bg-secondary rounded-start specscontent-icon text-light">\n'
+        '<div class="h-100 bg-secondary rounded-start specscontent-icon text-light">\n'
     )
     self.body.append(node["icon_markup"])
     self.body.append("</div>\n")

diff --git a/sphinxcontrib/specs/theme/layout.html b/sphinxcontrib/specs/theme/layout.html
@@ -1,38 +1,48 @@
 {#
   specs/layout.html
   ~~~~~~~~~~~~~~~~~
-
-  This is a Django template, not a standard HTML page, so we don't need HTML
-  boilerplate.
 #}
 
-{%- for css in css_files %}
-  {%- if css|attr("filename") %}
-    {{ css_tag(css) }}
-  {%- else %}
-    <link rel="stylesheet" href="{{ pathto(css, 1)|e }}" type="text/css" />
-  {%- endif %}
-{%- endfor %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {%- block head %}
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>{{ title }} | {{ docstitle|e }}</title>
+
 
-{%- block content %}
-  <div class="specs specs-layout">
-    <aside class="specs-sidebar text-muted">
-      <strong class="d-none d-md-block h6 my-2">On this page</strong>
-      <hr class="d-none d-md-block my-2">
-      <nav>
-        {{ toc }}
-      </nav>
-    </aside>
+      {%- for css in css_files %}
+        {%- if css|attr("filename") %}
+          {{ css_tag(css) }}
+        {%- else %}
+          <link rel="stylesheet" href="{{ pathto(css, 1)|e }}" type="text/css" />
+        {%- endif %}
+      {%- endfor %}
+    {%- endblock %}
+  </head>
+  <body>
+    {%- block content %}
+      <div class="specs specs-layout">
+        <aside class="specs-sidebar text-muted">
+          <strong class="d-none d-md-block h6 my-2">On this page</strong>
+          <hr class="d-none d-md-block my-2">
+          <nav>
+            {{ toc }}
+          </nav>
+        </aside>
 
-    <main class="specs-main">
-      <div class="specs-resources"></div>
-      <div class="specs-content">
-        {% block body %} {% endblock %}
+        <main class="specs-main">
+          <div class="specs-resources"></div>
+          <div class="specs-content">
+            {% block body %} {% endblock %}
+          </div>
+        </main>
       </div>
-    </main>
-  </div>
 
-  {%- for js in script_files %}
-    {{ js_tag(js) }}
-  {%- endfor %}
-{%- endblock %}
+      {%- for js in script_files %}
+        {{ js_tag(js) }}
+      {%- endfor %}
+    {%- endblock %}
+  </body>
+</html>
diff --git a/sphinxcontrib/specs/theme/page.html b/sphinxcontrib/specs/theme/page.html
@@ -7,4 +7,13 @@
 {%- extends "layout.html" %}
 {% block body %}
   {{ body }}
+
+  {# Fix admonition titles :( #}
+  <script>
+    (() => {
+      document.querySelectorAll('.admonition-title + .admonition-title').forEach((el) => {
+        el.previousElementSibling.remove();
+      });
+    })();
+  </script>
 {% endblock %}
diff --git a/sphinxcontrib/specs/theme/static/layout.css b/sphinxcontrib/specs/theme/static/layout.css
@@ -7,6 +7,43 @@
   --bs-primary-rgb: 0, 154, 223;
   --bs-link-color: var(--bs-primary);
   --bs-link-hover-color: #005684;
+  --bs-card-border-radius: 0.375rem;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-border-color-translucent);
+  --bs-card-bg: var(--bs-gray-100);
+  --bs-card-spacer-y: 1rem;
+  --bs-card-spacer-x: 1rem;
+  --bs-card-inner-border-radius: calc(0.375rem - 1px);
+  --bs-card-cap-padding-y: 0.5rem;
+  --bs-card-cap-padding-x: 1rem;
+  --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
+  --specs-hll-color: #fff48f;
+  --specs-caption-color: var(--bs-gray-600);
+  --specs-text-small: 1rem;
+}
+
+.docutils.container {
+  padding: 0;
+}
+
+.docutils.container,
+.highlight pre {
+  margin: 0;
+}
+
+li p {
+  margin-bottom: 0.4rem;
+}
+
+cite {
+  font-weight: 600;
+}
+
+summary::after {
+  content: "Click to expand";
+  color: var(--specs-caption-color);
+  font-size: var(--specs-text-small);
+  font-style: italic;
 }
 
 .accordion {
@@ -166,8 +203,114 @@ a {
   font-weight: 700;
 }
 
-.highlight {
-  padding: 1rem;
-  border: 1px solid var(--bs-border-color-translucent);
-  border-radius: calc(0.375rem - 1px);
+.highlight .hll {
+  background: var(--specs-hll-color) !important;
+}
+
+.highlight,
+pre.console {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.highlight,
+pre.console,
+.admonition {
+  margin-bottom: 1rem;
+  background-color: var(--bs-card-bg);
+  background-clip: border-box;
+  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  border-radius: var(--bs-card-border-radius);
+}
+
+.admonition {
+  background-color: inherit;
+}
+
+.admonition p {
+  line-height: 1.3;
+}
+
+.admonition-title:first-child {
+  border-radius: var(--bs-card-inner-border-radius)
+    var(--bs-card-inner-border-radius) 0 0;
+}
+
+.admonition-title {
+  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
+  margin-bottom: 0;
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg);
+  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+  font-weight: bold;
+}
+
+.note {
+  --admonition-color: var(--bs-primary);
+}
+
+.warning {
+  --admonition-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1));
+}
+
+.hint {
+  --admonition-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1));
+}
+
+.note,
+.warning,
+.hint {
+  border-color: var(--admonition-color);
+}
+
+.note .admonition-title,
+.warning .admonition-title,
+.hint .admonition-title {
+  background: var(--admonition-color);
+}
+
+.note .admonition-title {
+  color: #fff !important;
+}
+
+.warning .admonition-title {
+  color: #000 !important;
+}
+
+.hint .admonition-title {
+  color: #fff !important;
+}
+
+.highlight > pre,
+pre.console,
+.admonition-body,
+.admonition-body.docutils.container {
+  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+}
+
+.admonition-body > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.code-block-caption {
+  color: var(--specs-caption-color);
+  font-size: var(--specs-text-small);
+  font-style: italic;
+}
+
+.code-block-caption + div > .highlight {
+  margin-top: 0;
+}
+
+pre.console {
+  background: var(--bs-dark);
+  color: var(--bs-light);
+}
+
+pre.console .cmd {
+  color: var(--bs-yellow);
+}
+
+pre.console .comment {
+  color: var(--bs-gray-600);
 }