doc styling

JuliaGraphics · Sep 17, 2023 · 267cdc4 · 267cdc4
1 parent 81f3c86
commit 267cdc4
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 68 deletions.
diff --git a/docs/Project.toml b/docs/Project.toml
@@ -6,6 +6,6 @@ MathTeXEngine = "0a4f8689-d25c-4efe-a92b-7142dfc1aa53"
 Images = "916415d5-f1e6-5110-898d-aaa5f9f070e0"
 
 [compat]
-Documenter = "0.27"
+Documenter = "1"
 MathTeXEngine = "0.5"
-Images = "0.25"
+Images = "0.25, 0.26"
diff --git a/docs/make.jl b/docs/make.jl
@@ -3,55 +3,56 @@ using Documenter, Luxor
 makedocs(
     modules  = [Luxor],
     sitename = "Luxor",
+    warnonly = true,
     format   = Documenter.HTML(
-    prettyurls = get(ENV, "CI", nothing) == "true",
-    assets = ["assets/luxor-docs.css"],
-    warn_outdated = true,
-    collapselevel = 1
+        size_threshold = nothing,
+        prettyurls = get(ENV, "CI", nothing) == "true",
+        assets = ["assets/luxor-docs.css"],
+        collapselevel = 1,
     ),
-    pages    = [
-    "Introduction to Luxor" => "index.md",
-    "Tutorials" => [
-    "Hello World" => "tutorial/helloworld.md",
-    "Basic path building" => "tutorial/basicpath.md",
-    "Design a logo"       => "tutorial/quickstart.md",
-    "Geometry tutorial"   => "tutorial/basictutorial.md",
-    "Playing with pixels" => "tutorial/pixels.md",
-    "Simple animation"    => "tutorial/simple-animation.md"
-    ],
-    "Examples" => [
-    "Simple examples" => "example/examples.md",
-    "More examples"   => "example/moreexamples.md"
-    ],
-    "How to guides" => [
-    "Create drawings" => "howto/createdrawings.md",
-    "Draw simple shapes" => "howto/simplegraphics.md",
-    "Use geometry tools" => "howto/geometrytools.md",
-    "Work with tables and grids" => "howto/tables-grids.md",
-    "Use colors and styles" => "howto/colors-styles.md",
-    "Work with polygons" => "howto/polygons.md",
-    "Add text" => "howto/text.md",
-    "Clip graphics" => "howto/clipping.md",
-    "Placing images" => "howto/images.md",
-    "Turtle graphics" => "howto/turtle.md",
-    "Make animations" => "howto/animation.md",
-    "Snapshots" => "howto/snapshots.md",
-    "Interactive graphics and Threads" => "howto/livegraphics.md"
-    ],
-    "Explanations" => [
-    "Basic concepts" => "explanation/basics.md",
-    "Paths vs Polygon" => "explanation/pathspolygons.md",
-    "Perfect pixels and antialising" => "explanation/perfectpixels.md",
-    "Transforms and matrices" => "explanation/transforms.md",
-    "Image matrix" => "explanation/imagematrix.md",
-    "Luxor and Cairo" => "explanation/luxorcairo.md",
-    "Customize strokepath/fillpath" => "explanation/strokepathdispatch.md",
-    "Contributing" => "explanation/contributing.md"
-    ],
-    "Reference" => [
-    "Alphabetical function list" => "reference/functionindex.md"
-    "Function reference"         => "reference/api.md"
-    ]
+    pages = [
+        "Introduction to Luxor" => "index.md",
+        "Tutorials" => [
+        "Hello World" => "tutorial/helloworld.md",
+        "Basic path building" => "tutorial/basicpath.md",
+        "Design a logo"       => "tutorial/quickstart.md",
+        "Geometry tutorial"   => "tutorial/basictutorial.md",
+        "Playing with pixels" => "tutorial/pixels.md",
+        "Simple animation"    => "tutorial/simple-animation.md"
+        ],
+        "Examples" => [
+        "Simple examples" => "example/examples.md",
+        "More examples"   => "example/moreexamples.md"
+        ],
+        "How to guides" => [
+        "Create drawings" => "howto/createdrawings.md",
+        "Draw simple shapes" => "howto/simplegraphics.md",
+        "Use geometry tools" => "howto/geometrytools.md",
+        "Work with tables and grids" => "howto/tables-grids.md",
+        "Use colors and styles" => "howto/colors-styles.md",
+        "Work with polygons" => "howto/polygons.md",
+        "Add text" => "howto/text.md",
+        "Clip graphics" => "howto/clipping.md",
+        "Placing images" => "howto/images.md",
+        "Turtle graphics" => "howto/turtle.md",
+        "Make animations" => "howto/animation.md",
+        "Snapshots" => "howto/snapshots.md",
+        "Interactive graphics and Threads" => "howto/livegraphics.md"
+        ],
+        "Explanations" => [
+        "Basic concepts" => "explanation/basics.md",
+        "Paths vs Polygon" => "explanation/pathspolygons.md",
+        "Perfect pixels and antialising" => "explanation/perfectpixels.md",
+        "Transforms and matrices" => "explanation/transforms.md",
+        "Image matrix" => "explanation/imagematrix.md",
+        "Luxor and Cairo" => "explanation/luxorcairo.md",
+        "Customize strokepath/fillpath" => "explanation/strokepathdispatch.md",
+        "Contributing" => "explanation/contributing.md"
+        ],
+        "Reference" => [
+        "Alphabetical function list" => "reference/functionindex.md"
+        "Function reference"         => "reference/api.md"
+        ]
     ],
 )
 

diff --git a/docs/src/_headers b/docs/src/_headers
@@ -1,2 +1 @@
-/*
-  Access-Control-Allow-Origin: *
+Access-Control-Allow-Origin: *
diff --git a/docs/src/assets/luxor-docs.css b/docs/src/assets/luxor-docs.css
@@ -1,41 +1,119 @@
-@font-face {
-    font-family: JuliaMono;
-    src:
-        local('JuliaMono'),
-        url("https://cdn.jsdelivr.net/gh/cormullion/juliamono/webfonts/JuliaMono-Regular.woff2");
+/* change Bulma Dark styles  */
+
+/* disclaimer - I hate CSS */
+
+:root {
+    --signage: hsl(193, 46%, 60%);
+    --verydark: hsl(237, 20%, 10%);
+    --quitedark: hsl(237, 20%, 13%);
+    --lessdark: hsl(237, 20%, 16%);
 }
 
-pre, code {
-    font-family: JuliaMono !important;
-    font-feature-settings: "calt" 1;
+html.theme--documenter-dark body {
+    background-color: var(--verydark);
+    color: #eff;
+    font-size: 1.1em;
+    font-weight: 400;
+    line-height: 1.8rem;
 }
 
-p > a:after {
-    content: "→";
-    font-size: 50%;
+html.theme--documenter-dark a {
+    color: var(--signage);
 }
 
-.schemename {
-    font-family: "JuliaMono";
+.has-text-left,
+html.theme--documenter-dark body,
+html.theme--documenter-dark #documenter .docs-sidebar,
+html.theme--documenter-dark .documenter-example-output,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu .tocitem:hover,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active .tocitem,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active .tocitem:hover,
+html.theme--documenter-dark #documenter .docs-main header.docs-navbar {
+    background-color: var(--verydark);
+    border: 0.5px solid hsla(237, 20%, 10%, 0.3) !important;
 }
 
-.swatch {
+html.theme--documenter-dark .modal-card-body,
+html.theme--documenter-dark .modal-card-head,
+html.theme--documenter-dark .modal-card-foot,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu,
+html.theme--documenter-dark #documenter .docs-sidebar ul.docs-menu li.is-active {
+    background-color: var(--verydark);
+}
+
+html.theme--documenter-dark .docstring,
+html.theme--documenter-dark .docstring>header {
+    background-color: var(--lessdark);
+}
 
+html.theme--documenter-dark .content pre,
+html.theme--documenter-dark pre {
+    background-color: var(--lessdark);
+    border: 0.5px solid hsla(237, 20%, 10%, 0.3) !important;
 }
 
+html.theme--documenter-dark a {
+    color: var(--signage);
+}
+
+html.theme--documenter-dark .modal-card-head {
+    border: none;
+}
+
+p>a:after {
+    padding-left: 0.2rem;
+    font-family: "JuliaMono";
+    content: "⮻";
+    color: var(--signage);
+    background-color: var(--lessdark);
+    font-size: 120%;
+}
+
+.schemename {
+    font-family: "JuliaMono";
+}
+
+.swatch {}
+
 .category {
+    font-family: "JuliaMono";
     font-size: 0.8em;
 }
 
-html.theme--documenter-dark p > code {
+html.theme--documenter-dark p>code {
     color: #eff !important;
 }
 
-html.theme--documenter-dark li > code {
+
+html.theme--documenter-dark li>code {
     color: #eff !important;
 }
 
 
-html.theme--documenter-dark a > code {
+html.theme--documenter-dark a>code {
+    color: #eff !important;
+}
+
+html.theme--documenter-dark p>a {
     color: #eff !important;
 }
+
+html.theme--documenter-dark .select select:focus,
+html.theme--documenter-dark .textarea:focus,
+html.theme--documenter-dark .input:focus,
+html.theme--documenter-dark #documenter .docs-sidebar form.docs-search>input:focus,
+html.theme--documenter-dark .select select.is-focused,
+html.theme--documenter-dark .is-focused.textarea,
+html.theme--documenter-dark .is-focused.input,
+html.theme--documenter-dark #documenter .docs-sidebar form.docs-search>input.is-focused,
+html.theme--documenter-dark .select select:active,
+html.theme--documenter-dark .textarea:active,
+html.theme--documenter-dark .input:active,
+html.theme--documenter-dark #documenter .docs-sidebar form.docs-search>input:active,
+html.theme--documenter-dark .select select.is-active,
+html.theme--documenter-dark .is-active.textarea,
+html.theme--documenter-dark .is-active.input,
+html.theme--documenter-dark #documenter .docs-sidebar form.docs-search>input.is-active {
+    border-color: var(--signage);
+}