Update docs style

docs/assets/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#77b33a" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>

docs/assets/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#e65855" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>

docs/assets/docsify-init.js

@@ -35,7 +35,7 @@ const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
 
   const versionAliases = {};
 
-  const versionSelect = ['<select id="version-selector" name="version" class="sidebar-version-select">'];
+  const versionSelect = ['<div class="sidebar-version-select"><select id="version-selector" name="version">'];
   versions.forEach(([version, tag]) => {
     const value = version == latestVersion ? "" : version;
     versionSelect.push(`<option value="${value}">${version}</value>`);
@@ -47,7 +47,7 @@ const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
         `https://raw.githubusercontent.com/imgproxy/imgproxy/${tag}/docs/README.md`;
     }
   });
-  versionSelect.push('</select>');
+  versionSelect.push('</select></div>');
 
   if (latestTag === "latest") latestTag = "master";
 
@@ -124,8 +124,15 @@ const configureDocsify = (additionalVersions, latestVersion, latestTag) => {
         })
 
         hook.beforeEach((content, next) => {
-          content = content.replaceAll(proBadgeRegex, proLink);
-          content = content.replaceAll(oldProBadge, proLink);
+          content = content
+            .replaceAll(proBadgeRegex, proLink)
+            .replaceAll(oldProBadge, proLink);
+
+          content = content
+            .replaceAll("📝", '<i class="icon icon-note"></i>')
+            .replaceAll("⚠️", '<i class="icon icon-warn"></i>')
+            .replaceAll("✅", '<i class="icon icon-check"></i>')
+            .replaceAll("❌", '<i class="icon icon-cross"></i>');
 
           if (vm.route.path.endsWith('/configuration'))
             content = content.replaceAll(configRegex, '* <code id="$1">$1</code>:');

docs/assets/note.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#5da4f7" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

docs/assets/pro.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="27" viewBox="0 0 64 27">
     <svg fill="none" fill-rule="evenodd" x="5">
-        <rect width="53" height="26" x=".5" y=".5" stroke="#177BD3" rx="13"/>
-        <path fill="#177BD3" fill-rule="nonzero" d="M15.15 15.243V19h-2.198V8.336h4.16c.801 0 1.505.146 2.113.44.608.292 1.076.709 1.403 1.248.327.54.49 1.154.49 1.842 0 1.045-.357 1.87-1.072 2.472-.716.603-1.706.905-2.97.905h-1.927zm0-1.78h1.962c.581 0 1.024-.137 1.33-.41.305-.274.457-.664.457-1.172 0-.523-.153-.945-.461-1.267-.308-.322-.732-.489-1.274-.498h-2.015v3.347zm11.425 1.633h-1.75V19h-2.198V8.336h3.963c1.26 0 2.231.28 2.915.842.683.562 1.025 1.355 1.025 2.38 0 .728-.157 1.335-.472 1.82-.315.487-.792.873-1.432 1.162l2.307 4.357V19h-2.358l-2-3.904zm-1.75-1.78h1.772c.552 0 .98-.14 1.282-.42.303-.281.454-.668.454-1.162 0-.503-.143-.898-.428-1.186-.286-.288-.724-.432-1.315-.432h-1.765v3.2zm16.135.594c0 1.05-.186 1.97-.557 2.76-.37.792-.902 1.402-1.593 1.832-.69.43-1.483.644-2.376.644-.884 0-1.673-.212-2.366-.637-.693-.425-1.23-1.031-1.611-1.82-.381-.788-.574-1.695-.58-2.72v-.528c0-1.05.19-1.974.569-2.772.378-.799.913-1.411 1.604-1.839.69-.427 1.48-.64 2.369-.64.889 0 1.678.213 2.37.64.69.428 1.225 1.04 1.603 1.839.379.798.568 1.72.568 2.765v.476zm-2.227-.484c0-1.118-.2-1.968-.6-2.549-.4-.58-.972-.871-1.714-.871-.737 0-1.306.287-1.707.86-.4.574-.603 1.415-.608 2.524v.52c0 1.089.2 1.933.601 2.534.4.6.977.9 1.729.9.737 0 1.303-.289 1.699-.867.395-.579.596-1.422.6-2.53v-.52z"/>
+        <rect width="53" height="26" x=".5" y=".5" stroke="#40a6ff" rx="13"/>
+        <path fill="#40a6ff" fill-rule="nonzero" d="M15.15 15.243V19h-2.198V8.336h4.16c.801 0 1.505.146 2.113.44.608.292 1.076.709 1.403 1.248.327.54.49 1.154.49 1.842 0 1.045-.357 1.87-1.072 2.472-.716.603-1.706.905-2.97.905h-1.927zm0-1.78h1.962c.581 0 1.024-.137 1.33-.41.305-.274.457-.664.457-1.172 0-.523-.153-.945-.461-1.267-.308-.322-.732-.489-1.274-.498h-2.015v3.347zm11.425 1.633h-1.75V19h-2.198V8.336h3.963c1.26 0 2.231.28 2.915.842.683.562 1.025 1.355 1.025 2.38 0 .728-.157 1.335-.472 1.82-.315.487-.792.873-1.432 1.162l2.307 4.357V19h-2.358l-2-3.904zm-1.75-1.78h1.772c.552 0 .98-.14 1.282-.42.303-.281.454-.668.454-1.162 0-.503-.143-.898-.428-1.186-.286-.288-.724-.432-1.315-.432h-1.765v3.2zm16.135.594c0 1.05-.186 1.97-.557 2.76-.37.792-.902 1.402-1.593 1.832-.69.43-1.483.644-2.376.644-.884 0-1.673-.212-2.366-.637-.693-.425-1.23-1.031-1.611-1.82-.381-.788-.574-1.695-.58-2.72v-.528c0-1.05.19-1.974.569-2.772.378-.799.913-1.411 1.604-1.839.69-.427 1.48-.64 2.369-.64.889 0 1.678.213 2.37.64.69.428 1.225 1.04 1.603 1.839.379.798.568 1.72.568 2.765v.476zm-2.227-.484c0-1.118-.2-1.968-.6-2.549-.4-.58-.972-.871-1.714-.871-.737 0-1.306.287-1.707.86-.4.574-.603 1.415-.608 2.524v.52c0 1.089.2 1.933.601 2.534.4.6.977.9 1.729.9.737 0 1.303-.289 1.699-.867.395-.579.596-1.422.6-2.53v-.52z"/>
     </svg>
 </svg>

docs/assets/style.css

@@ -1,4 +1,7 @@
 :root {
+  --white-5: #ffffff0d;
+  --white-20: #fff3;
+
   --base-color: rgb(255, 255, 255);
 
   --mono-hue: var(--theme-hue);
@@ -7,8 +10,8 @@
   --mono-shade4: hsl(var(--mono-hue), var(--mono-saturation), 10%);
 
   --theme-hue       : 208;
-  --theme-saturation: 80.3%;
-  --theme-lightness : 45.9%;
+  --theme-saturation: 100%;
+  --theme-lightness : 63%;
 
   --base-background-color: rgb(13, 15, 21);
   --base-background-color-trans: rgba(13, 15, 21, 0);
@@ -16,7 +19,9 @@
 
   --code-font-family: 'Martian Mono',monospace;
   --code-font-weight: 300;
-  --code-inline-background: var(--mono-tint1);
+  --code-block-border-radius: 0;
+  --code-theme-background: var(--white-5);
+  --code-inline-background: var(--white-20);
 
   --heading-font-family: 'Roboto Condensed',sans-serif;
   --heading-h1-font-weight: 700;
@@ -27,33 +32,41 @@
 
   --link-color: var(--theme-color);
 
-  --sidebar-background: var(--mono-shade4);
-  --sidebar-border-color: hsla(0,0%,100%,.4);
+  --sidebar-background: var(--white-5);
+  --sidebar-border-color: var(--white-20);
+  --sidebar-border-width: 0 2px 0 0;
+  --sidebar-width: 20rem;
+  --sidebar-nav-link-before-content-l3: "";
 
-  --copycode-background: var(--link-color);
+  --copycode-background: linear-gradient(0deg, #1d40b2, #1680d6);
 
   --table-row-even-background: var(--base-background-color);
 
   --selection-color: rgba(255, 255, 255, 0.3);
 
-  --sidebar-width: 20rem;
-  --sidebar-nav-link-before-content-l3: "";
+  --search-input-background-color: var(--white-5);
+  --search-input-border-color: var(--white-20);
+  --search-input-border-width: 2px 0;
 }
 
 .app-name-link img {
   width: 90%
 }
 
-body::before {
+.content::before {
   content: "";
-  position: fixed;
-  width: 100%;
-  height: 500px;
-  background: linear-gradient(
-    180deg,
-    var(--base-background-color-trans),
-    var(--base-background-color) 500px
-  ), url('/assets/pattern.svg');
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 390px;
+  height: 300px;
+  background: url('/assets/pattern.svg');
+}
+
+@media (max-width: 768px) {
+  .content::before {
+    display: none;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -74,6 +87,32 @@ body::before {
   overflow-wrap: break-word;
 }
 
+.markdown-section pre[data-lang] {
+  border: 2px solid var(--white-20);
+}
+.markdown-section pre[data-lang]:hover {
+  border: 2px solid var(--theme-color);
+}
+
+body .docsify-copy-code-button {
+  transition: none;
+}
+body .docsify-copy-code-button,
+body .docsify-copy-code-button::after {
+  border-radius: 0;
+}
+body .docsify-copy-code-button span {
+  background: none;
+}
+body .docsify-copy-code-button .success {
+  color: #77b33a;
+  font-weight: bold;
+}
+body .docsify-copy-code-button .error {
+  color: #e65855;
+  font-weight: bold;
+}
+
 .loading {
   margin: 150px auto 0;
   position: relative;
@@ -122,7 +161,7 @@ body::before {
 }
 
 .badge img:hover {
-  filter: brightness(1.5);
+  filter: brightness(1.2);
 }
 
 h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
@@ -131,17 +170,40 @@ h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
   margin-left: .1em;
 }
 
+i.icon::after {
+  content: "";
+  display: inline-block;
+  position: relative;
+  top: .125em;
+  width: 1em;
+  height: 1em;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+i.icon-note::after {
+  background-image: url(/assets/note.svg);
+}
+i.icon-warn::after {
+  background-image: url(/assets/warning.svg);
+}
+i.icon-check::after {
+  background-image: url(/assets/check.svg);
+}
+i.icon-cross::after {
+  background-image: url(/assets/cross.svg);
+}
+
 .github-edit-btn {
   display: block;
   position: fixed;
   bottom: 0;
-  right: 10px;
-  border-radius: 10px 10px 0 0;
-  background-color: var(--link-color);
+  right: 1em;
+  background: var(--copycode-background);
   color: var(--base-color) !important;
   text-decoration: none !important;
   font-size: .8em;
-  padding: 0.2em 1em;
+  padding: 0.3em 1em;
   opacity: 0.75;
   z-index: 999;
 }
@@ -156,10 +218,6 @@ h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
   }
 }
 
-.github-corner {
-  position: fixed;
-}
-
 .links-menu {
   width: 100%;
   text-align: center;
@@ -174,6 +232,37 @@ h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
 }
 
 .sidebar-version-select {
-  width: 100%;
+  position: relative;
   margin: var(--sidebar-nav-margin);
+  width: 100%;
+}
+
+.sidebar-version-select > select {
+  appearance: none;
+  cursor: pointer;
+  margin: 0;
+  width: 100%;
+  background: var(--white-5);
+  border: 2px solid var(--white-20);
+  border-radius: 0;
+  padding: 0.35em 0.7em;
+  color: var(--base-color);
+  font-family: var(--base-font-family);
+}
+
+.sidebar-version-select>select:hover {
+  border: 2px solid var(--theme-color);
+}
+
+.sidebar-version-select::after {
+  content: "▼";
+  color: var(--base-color);
+  position: absolute;
+  top: 50%;
+  right: 1em;
+  font-size: 16px;
+  line-height: 16px;
+  height: 16px;
+  transform: translateY(-8px);
+  pointer-events: none;
 }

docs/assets/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#f6c744" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>