Better code block titles

Author: jpsca

docs/assets/css/base.css

@@ -361,12 +361,14 @@ code {
   background: var(--rgb-highlight-background, var(--color-base-dark));
 
   .filename {
-    background-color: rgba(var(--rgb-black), 0.08);
+    border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
     font-family: monospace;
-    padding: 0.6em 1.2em;
+    padding: 0.6em 1.2em 0.4em;
+    margin-bottom: 0.4em;
     display: block;
     font-size: 0.8em;
     border-radius: 0.3em 0.3em 0 0;
+    width: fit-content;
   }
   [data-linenos]::before {
     color: rgba(var(--rgb-grey-light), 0.8);
@@ -460,9 +462,6 @@ code {
     --rgb-highlight-color: #E6E1DC !important;
     --rgb-highlight-background: var(--color-base) !important;
 
-    .filename {
-      background-color: rgba(var(--rgb-black), 0.6) !important;
-    }
     .hll { --rgb-hll: 66, 135, 255 !important; }
     .c { color: #BC9458 !important; font-style: italic !important; } /* Comment */
     .err { color: #E6E1DC !important; } /* Error */
@@ -539,9 +538,6 @@ html.cs-dark .highlight {
   --rgb-highlight-color: #E6E1DC !important;
   --rgb-highlight-background: var(--color-base) !important;
 
-  .filename {
-    background-color: rgba(var(--rgb-black), 0.6) !important;
-  }
   .hll { --rgb-hll: 66, 135, 255 !important; }
   .c { color: #BC9458 !important; font-style: italic !important; } /* Comment */
   .err { color: #E6E1DC !important; } /* Error */

docs/content/markdown/code.md

@@ -9,11 +9,10 @@ Leave one blank line before and after the block for easier reading.
 /// example | Code block
 
 ````md
-
 ```javascript
 console.log("Hello world");
 ```
-`````
+````
 
 ```javascript
 console.log("Hello world");
@@ -53,13 +52,11 @@ To make your code block clearer, specify the language right after the first thre
 /// example | Syntax highlighting
 
 ````md
-
 ```python
 print("Hello, world!")
 for i in range(10):
     print(i)
 ```
-
 ````
 
 renders as:
@@ -84,14 +81,12 @@ The number _must_ be quoted, and it is the number of the first line (it must be
 /// example | Line Numbers
 
 ````md
-
 ```python {linenums="1"}
 import foo.bar
 
 a = "lorem"
 b = "ipsum"
 ```
-
 ````
 
 renders as:
@@ -110,15 +105,13 @@ If you want to start with a different line number, simply specify a number other
 /// example | Line Numbers
 
 ````md
-
 ```python {linenums="42"}
 def foobar():
     a = "lorem"
     b = "ipsum"
 
 foobar()
 ```
-
 ````
 
 renders as:
@@ -138,14 +131,12 @@ Pygments also has a few additional options regarding line numbers. One is "line
 /// example | N^th^ line
 
 ````md
-
 ``` {linenums="1 2"}
 """Some file."""
 import foo.bar
 import boo.baz
 import foo.bar.baz
 ```
-
 ````
 
 renders as:
@@ -167,14 +158,12 @@ You can specify certain lines for highlighting by using the `hl_lines` setting d
 /// example | Highlight Lines
 
 ````md
-
 ```python {hl_lines="1 3"}
 """Some file."""
 import foo.bar
 import boo.baz
 import foo.bar.baz
 ```
-
 ````
 
 renders as:
@@ -193,15 +182,13 @@ Line numbers are always referenced starting at 1, regardless of what the line nu
 /// example | Highlight Lines with Line Numbers
 
 ````md
-
 ```python {linenums="42" hl_lines="2"}
 def foobar():
     a = "lorem"
     b = "ipsum"
 
 foobar()
 ```
-
 ````
 
 renders as:
@@ -221,7 +208,6 @@ If you'd like to highlight a range of lines, you can use the notation x-y, where
 /// example | Highlight Lines with Line Numbers
 
 ````md
-
 ```python {hl_lines="1-2 5 7-8"}
 import foo
 import boo.baz
@@ -233,7 +219,6 @@ class Foo:
        self.bar = None
        self.baz = None
 ```
-
 ````
 
 renders as:
@@ -253,14 +238,13 @@ class Foo:
 ///
 
 
-## Code Block Title Headers
+## Title Headers
 
 A header with a title can be applied to a code block using the title option. Typically, you use it to show a filename, but it can be anything.
 
 /// example | Code block with a header
 
 ````md
-
 ```python {title="cool_file.py"}
 import foo
 import boo.baz
@@ -272,7 +256,6 @@ class Foo:
        self.bar = None
        self.baz = None
 ```
-
 ````
 
 renders as:

src/writeadoc/blueprint/assets/css/base.css

@@ -361,12 +361,14 @@ code {
   background: var(--rgb-highlight-background, var(--color-base-dark));
 
   .filename {
-    background-color: rgba(var(--rgb-black), 0.08);
+    border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
     font-family: monospace;
-    padding: 0.6em 1.2em;
+    padding: 0.6em 1.2em 0.4em;
+    margin-bottom: 0.4em;
     display: block;
     font-size: 0.8em;
     border-radius: 0.3em 0.3em 0 0;
+    width: fit-content;
   }
   [data-linenos]::before {
     color: rgba(var(--rgb-grey-light), 0.8);
@@ -460,9 +462,6 @@ code {
     --rgb-highlight-color: #E6E1DC !important;
     --rgb-highlight-background: var(--color-base) !important;
 
-    .filename {
-      background-color: rgba(var(--rgb-black), 0.6) !important;
-    }
     .hll { --rgb-hll: 66, 135, 255 !important; }
     .c { color: #BC9458 !important; font-style: italic !important; } /* Comment */
     .err { color: #E6E1DC !important; } /* Error */
@@ -539,9 +538,6 @@ html.cs-dark .highlight {
   --rgb-highlight-color: #E6E1DC !important;
   --rgb-highlight-background: var(--color-base) !important;
 
-  .filename {
-    background-color: rgba(var(--rgb-black), 0.6) !important;
-  }
   .hll { --rgb-hll: 66, 135, 255 !important; }
   .c { color: #BC9458 !important; font-style: italic !important; } /* Comment */
   .err { color: #E6E1DC !important; } /* Error */