CSS Classes: Add .text-{small,smaller,medium,larger,large} classes

Author: amotl

docs/css_classes.md

@@ -0,0 +1,35 @@
+(css-classes)=
+
+# CSS Classes
+
+Additionally to [sphinx{design}](inv:sd#index)'s [](inv:sd#css_classes),
+this package provides a few more CSS classes, mostly serving as convenience
+shortcuts.
+See [`compiled/style.css`] for inspecting the whole CSS rule file.
+
+
+## Font sizes
+
+The `.text-{small,smaller,medium,larger,large}` CSS classes exclusively adjust the
+`font-size` CSS attribute. They can be used anywhere.
+
+:::{card}
+```{div} text-small
+Small text.
+```
+```{div} text-smaller
+Smaller text.
+```
+```{div} text-medium
+Medium text.
+```
+```{div} text-large
+Large text.
+```
+```{div} text-larger
+Larger text.
+```
+:::
+
+
+[`compiled/style.css`]: https://github.com/panodata/sphinx-design-elements/blob/main/sphinx_design_elements/compiled/style.css

docs/index.md

@@ -80,6 +80,13 @@ infocard
 tag
 ```
 
+```{toctree}
+:caption: Styling
+:hidden:
+
+css_classes
+```
+
 ```{toctree}
 :caption: Development
 :hidden:

sphinx_design_elements/compiled/style.css

@@ -1,6 +1,37 @@
-/* Grid table */
+/**
+ * Appearance shortcuts.
+ */
 
-/* Beautiful light-weight table outline flavor. */
+
+/* General */
+
+/* Very small text size */
+.text-small {
+  font-size: small;
+}
+
+/* Smaller text size */
+.text-smaller {
+  font-size: smaller;
+}
+
+/* Medium text size */
+.text-medium {
+  font-size: medium;
+}
+
+/* Large text size */
+.text-large {
+  font-size: large;
+}
+
+/* Very large text size */
+.text-larger {
+  font-size: larger;
+}
+
+
+/* Grid table: Light-weight table-row outline styling. */
 .top-border {
   border-top-width: thin;
   border-top-style: solid;
@@ -12,18 +43,20 @@
   border-top-color: lightgray;
 }
 
-/* Remove margins of child elements inside table items. */
+
+/**
+ * Appearance bugfixes.
+ */
+
+/* Grid table: Fix margins of child elements inside table items. */
 .sd-col > .highlight-markdown {
   margin: unset;
 }
 .sd-col > .highlight-restructuredtext {
   margin: unset;
 }
 
-
-/* Info card */
-
-/* Fix grid item formatting. */
+/* Info card: Fix grid item formatting. */
 .sd-col > div.line-block {
   margin-top: unset;
   margin-bottom: unset;