docs: cosmic theme revamp for the documentation site

CLAUDE.md

@@ -8,7 +8,7 @@ Semantic Logger is a Ruby gem: a feature-rich, multi-destination logging framewo
 
 Rails users should use the sister gem `rails_semantic_logger`, not this gem directly.
 
-**Sister gem version lockstep:** `rails_semantic_logger` is locked to the same major version of this gem (its gemspec pins `semantic_logger "~> 4.16"`, i.e. v4). Major-version changes here must be mirrored there. As of this v5 work `rails_semantic_logger` is still on v4 and has **not** yet been upgraded; the internal refactors in v5 (the `QueueProcessor` extraction and the removal of `Appender::AsyncBatch`) will need to be accounted for when upgrading it. It does not reference `AsyncBatch` directly, so the removal itself is not a blocker, but the v5 bump is a coordinated follow-up. The sister gem lives at `/Users/reidmo/src/rails_semantic_logger` (when checked out locally).
+**Sister gem version lockstep:** `rails_semantic_logger` is locked to the same major version of this gem. As of v5 it has been upgraded in lockstep: it is now on v5.0.0 and its gemspec pins `semantic_logger ">= 5.0"`. Major-version changes here must continue to be mirrored there. The v5 internal refactors (the `QueueProcessor` extraction and the removal of `Appender::AsyncBatch`) have been accounted for; the sister gem does not reference `AsyncBatch` directly. The sister gem lives at `/Users/reidmo/src/rails_semantic_logger` (when checked out locally).
 
 ## Public interface
 

docs/_layouts/default.html

@@ -24,7 +24,7 @@
       <td>
       <td>
         <a href="http://rocketjob.io/">
-          <img src="images/rocket/rocket-icon-256.png" alt="Rocket Job" class="header-image">
+          <img src="images/header-rocket-256.png" alt="Rocket Job" class="header-image">
         </a>
       </td>
       <td>
@@ -33,8 +33,8 @@
         {% for item in nav_items %}{% assign pair = item | split: '=' %}
         <a href="{{ pair[0] }}" class="btn{% if pair[0] == current_page %} active{% endif %}">{{ pair[1] }}</a>{% endfor %}
         <a href="https://github.com/reidmorrison/semantic_logger" class="btn">GitHub</a>
-        <h1 class="project-name">Semantic Logger</h1>
-        <h2 class="project-tagline">Semantic Logger is a high-performance, asynchronous structured logging framework
+        <h1 class="project-name"><span class="brand-semantic">Semantic</span> <span class="brand-logger">Logger</span></h1>
+        <h2 class="project-tagline">High-performance, asynchronous structured logging framework
           for Ruby & Rails.</h2>
       </td>
       </tr>

docs/index.md

@@ -2,6 +2,8 @@
 layout: default
 ---
 
+![Semantic Logger](images/hero.jpg){:.hero-image}
+
 ## What is Semantic Logger?
 {:.no_toc}
 

docs/stylesheets/pygment_trac.css

@@ -1,69 +1,73 @@
-.highlight  { background: #ffffff; }
-.highlight .c { color: #999988; font-style: italic } /* Comment */
-.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.highlight .k { font-weight: bold } /* Keyword */
-.highlight .o { font-weight: bold } /* Operator */
-.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+/* Dark "cosmic" syntax highlighting, tuned for the #0d1330 code surface.
+   Token classes are emitted by Rouge (GitHub Pages) / Pygments and reuse the
+   site palette: orange keywords, green strings, sky-blue builtins, gold numbers,
+   violet names. */
+.highlight  { background: transparent; }
+.highlight .c { color: #7d86b8; font-style: italic } /* Comment */
+.highlight .err { color: #ff6b6b } /* Error */
+.highlight .k { color: #ff9e3d; font-weight: bold } /* Keyword */
+.highlight .o { color: #cdd6f4; font-weight: bold } /* Operator */
+.highlight .cm { color: #7d86b8; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #7d86b8; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #7d86b8; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #7d86b8; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #ffb4b4; background-color: #3a1820 } /* Generic.Deleted */
+.highlight .gd .x { color: #ffb4b4; background-color: #4a1c26 } /* Generic.Deleted.Specific */
 .highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #aa0000 } /* Generic.Error */
-.highlight .gh { color: #999999 } /* Generic.Heading */
-.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gr { color: #ff6b6b } /* Generic.Error */
+.highlight .gh { color: #aeb8c2 } /* Generic.Heading */
+.highlight .gi { color: #b6f0a8; background-color: #16301c } /* Generic.Inserted */
+.highlight .gi .x { color: #b6f0a8; background-color: #1c3c24 } /* Generic.Inserted.Specific */
+.highlight .go { color: #aeb8c2 } /* Generic.Output */
+.highlight .gp { color: #aeb8c2 } /* Generic.Prompt */
 .highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
-.highlight .gt { color: #aa0000 } /* Generic.Traceback */
-.highlight .kc { font-weight: bold } /* Keyword.Constant */
-.highlight .kd { font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #009999 } /* Literal.Number */
-.highlight .s { color: #d14 } /* Literal.String */
-.highlight .na { color: #008080 } /* Name.Attribute */
-.highlight .nb { color: #0086B3 } /* Name.Builtin */
-.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-.highlight .no { color: #008080 } /* Name.Constant */
-.highlight .ni { color: #800080 } /* Name.Entity */
-.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-.highlight .nn { color: #555555 } /* Name.Namespace */
-.highlight .nt { color: #000080 } /* Name.Tag */
-.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .gu { color: #c9a3ff; font-weight: bold; } /* Generic.Subheading */
+.highlight .gt { color: #ff6b6b } /* Generic.Traceback */
+.highlight .kc { color: #ff9e3d; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #ff9e3d; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #ff9e3d; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #ff9e3d; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #ff9e3d; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #7ec8ff; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #ffd27a } /* Literal.Number */
+.highlight .s { color: #9ad48b } /* Literal.String */
+.highlight .na { color: #7ec8ff } /* Name.Attribute */
+.highlight .nb { color: #7ec8ff } /* Name.Builtin */
+.highlight .nc { color: #c9a3ff; font-weight: bold } /* Name.Class */
+.highlight .no { color: #7ec8ff } /* Name.Constant */
+.highlight .ni { color: #c9a3ff } /* Name.Entity */
+.highlight .ne { color: #c9a3ff; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #c9a3ff; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #aeb8c2 } /* Name.Namespace */
+.highlight .nt { color: #ff9e3d } /* Name.Tag */
+.highlight .nv { color: #ff9e3d } /* Name.Variable */
 .highlight .ow { font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mf { color: #009999 } /* Literal.Number.Float */
-.highlight .mh { color: #009999 } /* Literal.Number.Hex */
-.highlight .mi { color: #009999 } /* Literal.Number.Integer */
-.highlight .mo { color: #009999 } /* Literal.Number.Oct */
-.highlight .sb { color: #d14 } /* Literal.String.Backtick */
-.highlight .sc { color: #d14 } /* Literal.String.Char */
-.highlight .sd { color: #d14 } /* Literal.String.Doc */
-.highlight .s2 { color: #d14 } /* Literal.String.Double */
-.highlight .se { color: #d14 } /* Literal.String.Escape */
-.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
-.highlight .si { color: #d14 } /* Literal.String.Interpol */
-.highlight .sx { color: #d14 } /* Literal.String.Other */
-.highlight .sr { color: #009926 } /* Literal.String.Regex */
-.highlight .s1 { color: #d14 } /* Literal.String.Single */
-.highlight .ss { color: #990073 } /* Literal.String.Symbol */
-.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #008080 } /* Name.Variable.Class */
-.highlight .vg { color: #008080 } /* Name.Variable.Global */
-.highlight .vi { color: #008080 } /* Name.Variable.Instance */
-.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+.highlight .w { color: #3a4060 } /* Text.Whitespace */
+.highlight .mf { color: #ffd27a } /* Literal.Number.Float */
+.highlight .mh { color: #ffd27a } /* Literal.Number.Hex */
+.highlight .mi { color: #ffd27a } /* Literal.Number.Integer */
+.highlight .mo { color: #ffd27a } /* Literal.Number.Oct */
+.highlight .sb { color: #9ad48b } /* Literal.String.Backtick */
+.highlight .sc { color: #9ad48b } /* Literal.String.Char */
+.highlight .sd { color: #9ad48b } /* Literal.String.Doc */
+.highlight .s2 { color: #9ad48b } /* Literal.String.Double */
+.highlight .se { color: #9ad48b } /* Literal.String.Escape */
+.highlight .sh { color: #9ad48b } /* Literal.String.Heredoc */
+.highlight .si { color: #9ad48b } /* Literal.String.Interpol */
+.highlight .sx { color: #9ad48b } /* Literal.String.Other */
+.highlight .sr { color: #9ad48b } /* Literal.String.Regex */
+.highlight .s1 { color: #9ad48b } /* Literal.String.Single */
+.highlight .ss { color: #7ec8ff } /* Literal.String.Symbol */
+.highlight .bp { color: #7ec8ff } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #ff9e3d } /* Name.Variable.Class */
+.highlight .vg { color: #ff9e3d } /* Name.Variable.Global */
+.highlight .vi { color: #ff9e3d } /* Name.Variable.Instance */
+.highlight .il { color: #ffd27a } /* Literal.Number.Integer.Long */
 
-.type-csharp .highlight .k { color: #0000FF }
-.type-csharp .highlight .kt { color: #0000FF }
-.type-csharp .highlight .nf { color: #000000; font-weight: normal }
-.type-csharp .highlight .nc { color: #2B91AF }
-.type-csharp .highlight .nn { color: #000000 }
-.type-csharp .highlight .s { color: #A31515 }
-.type-csharp .highlight .sc { color: #A31515 }
+.type-csharp .highlight .k { color: #7ec8ff }
+.type-csharp .highlight .kt { color: #7ec8ff }
+.type-csharp .highlight .nf { color: #e6e6f0; font-weight: normal }
+.type-csharp .highlight .nc { color: #9ad4ff }
+.type-csharp .highlight .nn { color: #e6e6f0 }
+.type-csharp .highlight .s { color: #9ad48b }
+.type-csharp .highlight .sc { color: #9ad48b }

docs/stylesheets/stylesheet.css

@@ -10,9 +10,10 @@ body {
   color: #606c71; }
 
 a {
-  color: #1e6bb8;
+  color: #1565d8;
   text-decoration: none; }
   a:hover {
+    color: #0d47a1;
     text-decoration: underline; }
 
 .btn {
@@ -29,16 +30,16 @@ a {
     margin-left: 0.2rem; }
 
 .btn:hover {
-  color: rgba(255, 255, 255, 0.8);
+  color: #fff;
   text-decoration: none;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3); }
+  background-color: rgba(255, 106, 24, 0.35);
+  border-color: rgba(255, 138, 42, 0.6); }
 
 .btn.active {
   color: #fff;
   font-weight: bold;
-  background-color: rgba(255, 255, 255, 0.28);
-  border-color: rgba(255, 255, 255, 0.55); }
+  background-color: rgba(255, 106, 24, 0.85);
+  border-color: #ff8a2a; }
 
 @media screen and (min-width: 64em) {
   .btn {
@@ -73,8 +74,10 @@ html {
   z-index: 1000;
   color: #fff;
   text-align: center;
-  background-color: #363899;
-  background-image: linear-gradient(90deg, #000000, #99120f); }
+  background-color: #05060f;
+  background-image: linear-gradient(rgba(5, 8, 24, 0.78), rgba(5, 8, 24, 0.86)), url("../images/header-banner.jpg");
+  background-size: cover;
+  background-position: center; }
 
 .header-image {
   align: middle;
@@ -95,7 +98,27 @@ html {
 
 .project-name {
   margin-top: 0;
-  margin-bottom: 0.1rem; }
+  margin-bottom: 0.1rem;
+  font-weight: bold;
+  letter-spacing: 0.01em;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
+
+/* Two-tone glossy title echoing the key art: blue "Semantic", orange "Logger".
+   Falls back to solid white where background-clip:text is unsupported. */
+.brand-semantic, .brand-logger {
+  color: #fff;
+  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.12); }
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .brand-semantic, .brand-logger {
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent; }
+  .brand-semantic {
+    background-image: linear-gradient(180deg, #9ad4ff 0%, #3a9bff 55%, #0d5ad6 100%); }
+  .brand-logger {
+    background-image: linear-gradient(180deg, #ffd27a 0%, #ff9e3d 55%, #f3700f 100%); } }
 
 @media screen and (min-width: 64em) {
   .project-name {
@@ -130,11 +153,18 @@ html {
   margin-top: 0; }
 .main-content img {
   max-width: 100%; }
+.main-content img.hero-image {
+  display: block;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 6px 28px rgba(13, 19, 48, 0.45); }
 .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
   margin-top: 2rem;
   margin-bottom: 1rem;
   font-weight: normal;
-  color: #159957; }
+  color: #1565d8; }
 .main-content p {
   margin-bottom: 1em; }
 .main-content code {
@@ -149,16 +179,16 @@ html {
   margin-top: 0;
   margin-bottom: 1rem;
   font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  color: #567482;
+  color: #e6e6f0;
   word-wrap: normal;
-  background-color: #f3f6fa;
-  border: solid 1px #dce6f0;
+  background-color: #0d1330;
+  border: solid 1px #232a4d;
   border-radius: 0.3rem; }
   .main-content pre > code {
     padding: 0;
     margin: 0;
     font-size: 0.9rem;
-    color: #567482;
+    color: #e6e6f0;
     word-break: normal;
     white-space: pre;
     background: transparent;