From ee9b5cb04d82e25e3fcf1a389324fb827d8a0621 Mon Sep 17 00:00:00 2001 From: The-EDev Date: Mon, 9 May 2022 21:04:20 +0300 Subject: [PATCH] implemented dark mode, added search, and permalinks --- docs/assets/crowlogo_main_light_color.svg | 90 +++++++++++++++++++ docs/assets/fast_light_icon.svg | 105 ++++++++++++++++++++++ docs/assets/header_light_icon.svg | 67 ++++++++++++++ docs/assets/typesafe_light_icon.svg | 67 ++++++++++++++ docs/assets/websocket_light_icon.svg | 48 ++++++++++ docs/overrides/home.html | 26 +++--- docs/stylesheets/colors.css | 61 +++++++++++-- docs/stylesheets/extra.css | 17 ++++ mkdocs.yml | 14 +++ 9 files changed, 475 insertions(+), 20 deletions(-) create mode 100644 docs/assets/crowlogo_main_light_color.svg create mode 100644 docs/assets/fast_light_icon.svg create mode 100644 docs/assets/header_light_icon.svg create mode 100644 docs/assets/typesafe_light_icon.svg create mode 100644 docs/assets/websocket_light_icon.svg diff --git a/docs/assets/crowlogo_main_light_color.svg b/docs/assets/crowlogo_main_light_color.svg new file mode 100644 index 000000000..af0760db8 --- /dev/null +++ b/docs/assets/crowlogo_main_light_color.svg @@ -0,0 +1,90 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/docs/assets/fast_light_icon.svg b/docs/assets/fast_light_icon.svg new file mode 100644 index 000000000..c1f74c88b --- /dev/null +++ b/docs/assets/fast_light_icon.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/header_light_icon.svg b/docs/assets/header_light_icon.svg new file mode 100644 index 000000000..ec7f3e1f0 --- /dev/null +++ b/docs/assets/header_light_icon.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + diff --git a/docs/assets/typesafe_light_icon.svg b/docs/assets/typesafe_light_icon.svg new file mode 100644 index 000000000..ee19340c5 --- /dev/null +++ b/docs/assets/typesafe_light_icon.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + diff --git a/docs/assets/websocket_light_icon.svg b/docs/assets/websocket_light_icon.svg new file mode 100644 index 000000000..c7f85f62f --- /dev/null +++ b/docs/assets/websocket_light_icon.svg @@ -0,0 +1,48 @@ + + + + + + + + + + diff --git a/docs/overrides/home.html b/docs/overrides/home.html index f24f46607..cd5bb0c4a 100644 --- a/docs/overrides/home.html +++ b/docs/overrides/home.html @@ -25,11 +25,11 @@ .ccard{ border-style: solid; border-width: .1rem; - border-color: #00000080; + border-color: var(--home-border-color); border-radius: 0.5rem; width: 10rem; height: 12rem; - box-shadow: 2px 5px 5px #00000040; + box-shadow: 2px 5px 5px var(--home-shadow-color); margin-inline: 1.5rem; margin-bottom: 1rem; display: inline-block; @@ -51,7 +51,7 @@ border-bottom: solid; border-width: 0.1rem; border-image-slice: 1; - border-image-source: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 0, 0) 50%, rgba(0,0,0,0) 100%); + border-image-source: var(--home-image-border); } .ccard__text{ @@ -143,7 +143,8 @@ } - + +

A Fast and Easy to use microframework for the web.

@@ -151,19 +152,23 @@

A Fast and Easy to use microframework for the web
- + +

Blazingly Fast

- + +

Header Only

- + +

Typesafe handlers

- + +

Websocket Support

@@ -176,8 +181,7 @@

A Fast and Easy to use microframework for the web

Easy to get started

- 

-#include "crow.h"
+        
#include "crow.h"
 
 int main()
 {
@@ -309,7 +313,7 @@ 
The 1000 mile journey begins with a single step.
   {
     img_url = AvatarImage(name);
   }
-  return `
${finalName}
`;
+  return `
${finalName}
`;
 }
 
 function fixLong(name)
diff --git a/docs/stylesheets/colors.css b/docs/stylesheets/colors.css
index 6a0213018..7d7e00402 100644
--- a/docs/stylesheets/colors.css
+++ b/docs/stylesheets/colors.css
@@ -1,23 +1,67 @@
- 
-:root {
+[data-md-color-scheme="crow-light"]{
+
     --md-primary-fg-color: #24404f;
-	--md-accent-fg-color:  #122027;
-	--md-typeset-a-color: var(--md-accent-fg-color) !important;
+    --md-accent-fg-color:  #122027;
+    --md-typeset-a-color: var(--md-accent-fg-color) !important;
     --md-default-bg-color: #e5f2f8;
     --md-code-bg-color: #cfcfcf !important;
     --md-code-hl-comment-color: var(--md-code-fg-color) !important;
     --md-code-hl-generic-color: var(--md-code-fg-color) !important;
     --md-code-hl-variable-color: var(--md-code-fg-color) !important;
-    --md-code-fg-color: #fff !important;
-    --md-code-hl-punctuation-color: #fff !important;
+    --md-code-fg-color: #1d1d1d !important;
+    --md-code-hl-punctuation-color: #1d1d1d !important;
+    --home-border-color: #00000080;
+    --home-shadow-color: #00000040;
+    --home-image-border: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0, 0, 0) 50%, rgba(0,0,0,0) 100%);
+
+}
+
+[data-md-color-scheme="crow-dark"]{
+
+    --md-primary-fg-color: #24404f;
+    --md-accent-fg-color:  #445e6d;
+    --md-default-fg-color: rgba(255, 255, 255, 0.87);
+    --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
+    --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
+    --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
+    --md-typeset-a-color: var(--md-accent-fg-color) !important;
+    --md-default-bg-color: #1a2124;
+    --md-code-bg-color: #2f2f2f !important;
+    --md-code-hl-comment-color: var(--md-code-fg-color) !important;
+    --md-code-hl-generic-color: var(--md-code-fg-color) !important;
+    --md-code-hl-variable-color: var(--md-code-fg-color) !important;
+    --md-code-fg-color: #adadad !important;
+    --md-code-hl-punctuation-color: #adadad !important;
+    --home-border-color: #ffffff20;
+    --home-shadow-color: #00000040;
+    --home-image-border: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
+
 }
 
 .md-typeset code {
-    background-color: #cfcfcf;
-    color: #1d1d1d;
     padding: 0.2rem;
 }
 
+.md-typeset .md-button {
+    color: var(--md-default-fg-color--light);
+    border-radius: 0.5rem;
+}
+
+/*
+:root{
+    --md-default-fg-color: rgba(255, 255, 255, 0.87);
+    --md-default-fg-color--light: rgba(255, 255, 255, 0.54);
+    --md-default-fg-color--lighter: rgba(255, 255, 255, 0.32);
+    --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
+    --md-default-bg-color: #1a2124;
+	--md-typeset-a-color: var(--md-accent-fg-color) !important;
+}
+
+.md-typeset code {
+    background-color: #2f2f2f;
+}
+
+
 .highlight .c, .highlight .c1, .highlight .ch, .highlight .cm, .highlight .cs, .highlight .sd {
     color: #606060 !important;
 }
@@ -43,4 +87,3 @@
 .highlight .n {
     color: #1d1d1d;
 }
-
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index bb9c440a6..bf771fb40 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -6,3 +6,20 @@
 .code {
     border-radius: 5px;
 }
+
+[data-md-color-scheme="crow-dark"] img[src$="#only-dark"]
+{
+	display: block;
+}
+[data-md-color-scheme="crow-light"] img[src$="#only-light"]
+{
+	display: block;
+}
+[data-md-color-scheme="crow-light"] img[src$="#only-dark"]
+{
+	display: none;
+}
+[data-md-color-scheme="crow-dark"] img[src$="#only-light"]
+{
+	display: none;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 654b92f53..6a2598da4 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -18,9 +18,22 @@ theme:
         repo: fontawesome/brands/github-square
     static_templates:
         - privacy_policy.html
+    palette:
+      - media: "(prefers-color-scheme: light)"
+        scheme: crow-light
+        toggle:
+          icon: fontawesome/solid/sun
+          name: Using Light Theme
+      - media: "(prefers-color-scheme: dark)"
+        scheme: crow-dark
+        toggle:
+          icon: fontawesome/solid/moon
+          name: Using Dark Theme
     custom_dir: docs/overrides
 
 markdown_extensions:
+    - toc:
+        permalink: true
     - admonition
     - pymdownx.highlight
     - pymdownx.tabbed
@@ -78,6 +91,7 @@ plugins:
         redirect_maps:
             'getting_started/setup/': 'getting_started/setup/linux.md'
     - meta-descriptions
+    - search
 
 extra_css:
     - 'stylesheets/colors.css'