Merge pull request #227 from LuxDL/la/css_family

css family and source code css improvements.

Author: lazarusA

docs/src/.vitepress/theme/style.css

@@ -23,17 +23,17 @@
 /* Disable contextual alternates (kind of like ligatures but different) in monospace, 
    which turns `/>` to an up arrow and `|>` (the Julia pipe symbol) to an up arrow as well. */
 .mono-no-substitutions {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-feature-settings: "calt" off;
 }
 
 .mono-no-substitutions-alt {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-variant-ligatures: none;
 }
 
 pre, code {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-feature-settings: "calt" off;
 }
 
@@ -69,12 +69,14 @@ pre, code {
   /* Text Colors */
   --vp-dark-text: #e5e5e5; /* Primary text color */
   --vp-dark-subtext: #c1c1c1; /* Subtle text */
+  --vp-source-text: #e5e5e5;
 
   /* Backgrounds */
   --vp-dark-bg: #121212; /* Main background */
   --vp-dark-bg-alt: #1a1a1a; /* Alternative background */
   --vp-dark-bg-dimm: #101010;
-  
+  --vp-source-bg: #414040;
+
     /* Borders */
   --vp-dark-border: #3b8a65;
     /* custom tip */
@@ -90,6 +92,7 @@ pre, code {
 }
 
 :root.dark {
+  --vp-source-bg: rgb(224, 223, 223);
   /* custom tip */
   --vp-custom-block-tip-border: var(--vp-dark-green-dark);
   --vp-custom-block-tip-text: var(--vp-dark-subtext);
@@ -113,6 +116,7 @@ pre, code {
 :root.dark {
   --vp-dark-link: var(--vp-dark-green-lighter);
   --vp-dark-link-hover: var(--vp-dark-green-light);
+  --vp-source-text: #595c5f;
 }
 
 /* Hero Section */
@@ -203,6 +207,7 @@ mjx-container > svg {
 .jldocstring.custom-block {
     border: 1px solid var(--vp-c-gray-2);
     color: var(--vp-c-text-1);
+    overflow: hidden;
 }
 
 .jldocstring.custom-block summary {
@@ -213,4 +218,31 @@ mjx-container > svg {
 }
 .jldocstring.custom-block summary a {
   pointer-events: none;
+  text-decoration: none;
+}
+
+.jldocstring.custom-block .source-link {
+  border-radius: 4px;
+  text-decoration: none;
+  background-color: var(--vp-source-bg);
+  float: right;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-5px);
+  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.jldocstring.custom-block .source-link a {
+  text-decoration: none;
+  color: var(--vp-source-text);
+}
+
+.jldocstring.custom-block .source-link a:hover {
+  text-decoration: underline;
+}
+
+.jldocstring.custom-block:hover .source-link {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }

src/writer.jl

@@ -374,10 +374,7 @@ function renderdoc(io::IO, mime::MIME"text/plain", node::Documenter.MarkdownAST.
         if url !== nothing
             # This is how Documenter does it:
             # push!(ret.nodes, a[".docs-sourcelink", :target=>"_blank", :href=>url]("source"))
-            # so clearly we should be inserting some form of HTML tag here, 
-            # and defining its rendering in CSS?
-            # TODO: switch to Documenter style here
-            println(io, "\n", "[source]($url)", "\n")
+            println(io, "\n", """<Badge type="info" class="source-link" text="source"><a href="$url" target="_blank" rel="noreferrer">source</a></Badge>""", "\n")
         end
     end
 end

template/src/.vitepress/theme/style.css

@@ -1,6 +1,6 @@
 .VPHero .clip {
   white-space: pre;
-  max-width: 500px;
+  max-width: 600px;
 }
 
 /* Fonts */
@@ -23,17 +23,17 @@
 /* Disable contextual alternates (kind of like ligatures but different) in monospace, 
    which turns `/>` to an up arrow and `|>` (the Julia pipe symbol) to an up arrow as well. */
 .mono-no-substitutions {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-feature-settings: "calt" off;
 }
 
 .mono-no-substitutions-alt {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-variant-ligatures: none;
 }
 
 pre, code {
-  font-family: "JuliaMono-Light", monospace;
+  font-family: "JuliaMono-Regular", monospace;
   font-feature-settings: "calt" off;
 }
 
@@ -69,12 +69,14 @@ pre, code {
   /* Text Colors */
   --vp-dark-text: #e5e5e5; /* Primary text color */
   --vp-dark-subtext: #c1c1c1; /* Subtle text */
+  --vp-source-text: #e5e5e5;
 
   /* Backgrounds */
   --vp-dark-bg: #121212; /* Main background */
   --vp-dark-bg-alt: #1a1a1a; /* Alternative background */
   --vp-dark-bg-dimm: #101010;
-  
+  --vp-source-bg: #414040;
+
     /* Borders */
   --vp-dark-border: #3b8a65;
     /* custom tip */
@@ -90,6 +92,7 @@ pre, code {
 }
 
 :root.dark {
+  --vp-source-bg: rgb(224, 223, 223);
   /* custom tip */
   --vp-custom-block-tip-border: var(--vp-dark-green-dark);
   --vp-custom-block-tip-text: var(--vp-dark-subtext);
@@ -113,6 +116,7 @@ pre, code {
 :root.dark {
   --vp-dark-link: var(--vp-dark-green-lighter);
   --vp-dark-link-hover: var(--vp-dark-green-light);
+  --vp-source-text: #595c5f;
 }
 
 /* Hero Section */
@@ -203,6 +207,7 @@ mjx-container > svg {
 .jldocstring.custom-block {
     border: 1px solid var(--vp-c-gray-2);
     color: var(--vp-c-text-1);
+    overflow: hidden;
 }
 
 .jldocstring.custom-block summary {
@@ -213,4 +218,31 @@ mjx-container > svg {
 }
 .jldocstring.custom-block summary a {
   pointer-events: none;
+  text-decoration: none;
+}
+
+.jldocstring.custom-block .source-link {
+  border-radius: 4px;
+  text-decoration: none;
+  background-color: var(--vp-source-bg);
+  float: right;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-5px);
+  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.jldocstring.custom-block .source-link a {
+  text-decoration: none;
+  color: var(--vp-source-text);
+}
+
+.jldocstring.custom-block .source-link a:hover {
+  text-decoration: underline;
+}
+
+.jldocstring.custom-block:hover .source-link {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }