New design; Add light theme

Author: DarthSim

docs/intro.mdx

@@ -5,7 +5,18 @@ description: imgproxy is a fast and secure standalone server for resizing and co
 displayed_sidebar: tutorialSidebar
 ---
 
-# ![imgproxy Logo](/img/logo-full.svg)
+<h1>
+  <img
+    alt="imgproxy logo"
+    src="/img/logo-light.svg"
+    class="intro__logo intro__logo-light"
+  />
+  <img
+    alt="imgproxy logo"
+    src="/img/logo-dark.svg"
+    class="intro__logo intro__logo-dark"
+  />
+</h1>
 
 [imgproxy](https://imgproxy.net) is a fast and secure standalone server for resizing, processing, and converting images. The guiding principles behind imgproxy are security, speed, and simplicity.
 

docusaurus.config.ts

@@ -7,7 +7,7 @@ import {
 import badgeRemarkPlugin from "./src/remark/badge";
 import codeAnchorRemarkPlugin from "./src/remark/code-anchor";
 
-import prismTheme from "./src/prism/theme";
+import prismThemes from "./src/prism/themes";
 
 const defaultUrl = "https://docs.imgproxy.net";
 
@@ -21,7 +21,6 @@ const getSiteUrl = (): string => {
 const config: Config = {
   title: "imgproxy documentation",
   tagline: "Optimize images for web on the fly",
-  favicon: "/img/favicon.ico",
 
   // Set the production url of your site here
   url: getSiteUrl(),
@@ -66,7 +65,30 @@ const config: Config = {
       tagName: "link",
       attributes: {
         rel: "stylesheet",
-        href: "https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap",
+        href: "https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@75..112.5,100..800&display=swap",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "icon",
+        href: "/img/favicon.ico",
+        sizes: "32x32",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "icon",
+        href: "/img/icon.svg",
+        type: "image/svg+xml",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "apple-touch-icon",
+        href: "/img/apple-touch-icon.png",
       },
     },
   ],
@@ -103,12 +125,12 @@ const config: Config = {
         theme: {
           customCss: [
             require.resolve("./src/css/general.css"),
+            require.resolve("./src/css/intro.css"),
             require.resolve("./src/css/navbar.css"),
             require.resolve("./src/css/docsearch.css"),
             require.resolve("./src/css/menu.css"),
             require.resolve("./src/css/badge.css"),
             require.resolve("./src/css/code-anchor.css"),
-            require.resolve("./src/css/heading-pattern.css"),
             require.resolve("./src/css/iubenda.css"),
           ],
         },
@@ -123,17 +145,17 @@ const config: Config = {
   themeConfig: {
     colorMode: {
       defaultMode: "dark",
-      disableSwitch: true,
-      respectPrefersColorScheme: false,
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
     },
 
-    image: "img/social-card.jpg",
+    image: "img/social-card.png",
 
     navbar: {
-      title: "imgproxy",
       logo: {
         alt: "imgproxy Logo",
-        src: "img/logo.svg",
+        src: "img/logo-light.svg",
+        srcDark: "img/logo-dark.svg",
       },
       items: [
         {
@@ -164,7 +186,7 @@ const config: Config = {
         {
           href: "https://x.com/imgproxy_net",
           position: "right",
-          className: "navbar__link--icon navbar__link--twitter",
+          className: "navbar__link--icon navbar__link--x",
           title: "X (Twitter)",
         },
         {
@@ -183,9 +205,9 @@ const config: Config = {
     },
 
     footer: {
-      style: "dark",
       logo: {
-        src: "/img/logo-full.svg",
+        src: "/img/logo-light.svg",
+        srcDark: "/img/logo-dark.svg",
         href: "https://imgproxy.net",
         target: "_blank",
       },
@@ -267,8 +289,8 @@ const config: Config = {
 
     prism: {
       additionalLanguages: ["bash", "json"],
-      theme: prismTheme,
-      darkTheme: prismTheme,
+      theme: prismThemes.catppuccinLatte,
+      darkTheme: prismThemes.catppuccinMocha,
     },
 
     algolia: {

src/css/badge.css

@@ -2,48 +2,41 @@
 .menu__list-item--badge a::after {
   --ifm-badge-background-color: transparent;
   --ifm-badge-border-width: 1px;
+  --ifm-badge-border-radius: 0.4em;
   --ifm-badge-padding-vertical: 0.4em;
   --ifm-badge-padding-horizontal: 0.7em;
-  --ifm-badge-border-radius: 1em;
 
   background-color: var(--ifm-badge-background-color);
   border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);
   border-radius: var(--ifm-badge-border-radius);
   color: var(--ifm-badge-border-color);
-  display: inline-block;
-  font-style: var(--ifm-font-weight-bold);
-  font-weight: var(--ifm-font-weight-bold);
-  font-variation-settings: 'wght' var(--ifm-font-weight-bold);
+  font-family: var(--ifm-font-family-monospace);
+  font-variation-settings: 'wght' var(--ifm-font-weight-bold), 'wdth' 112.5;
+  font-style: normal;
   font-size: 0.6em;
-  font-stretch: normal;
   line-height: 1;
-  text-transform: uppercase;
+  text-transform: capitalize;
   padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal);
 
-  position: relative;
-  top: -0.2em;
-}
-
-a.badge:hover {
-  filter: brightness(1.2);
-  text-decoration: none;
+  transform: translateY(-0.1em);
 }
 
 h1 .badge,
 h2 .badge,
 h3 .badge {
   font-size: 0.5em;
-  top: -0.3em;
+  transform: translateY(-0.3em);
 }
 
 .badge--primary {
-  --ifm-badge-background-color: transparent;
-  --ifm-badge-border-color: var(--ifm-color-primary);
+  --ifm-badge-background-color: var(--neon-a-fg);
+  --ifm-badge-border-color: var(--neon-a-fg);
+  color: var(--ifm-background-color);
 }
 
 .badge--secondary {
   --ifm-badge-background-color: transparent;
-  --ifm-badge-border-color: var(--ifm-color-secondary);
+  --ifm-badge-border-color: var(--text-secondary);
   color: var(--ifm-badge-border-color);
 }
 
@@ -71,17 +64,16 @@ h3 .badge {
   --ifm-badge-border-color: var(--ifm-color-primary);
 }
 
+a.badge--pro:hover {
+  --ifm-badge-background-color: var(--neon-a-bg-hover);
+  text-decoration: none;
+}
+
 .menu__list-item--badge a::after {
   top: 0;
   margin-left: auto;
 }
 
-@media (max-width: 996px) {
-  .menu__list-item--badge a::after {
-    margin-left: 0.6em;
-  }
-}
-
 .menu__list-item.badge--pro a::after {
   content: "pro";
 }

src/css/code-anchor.css

@@ -3,7 +3,12 @@
 }
 
 .code-anchor code {
-  color: #ffcb6b;
+  color: oklch(0.55 0.1269 87.53);
+  font-variation-settings: 'wght' 500, 'wdth' 100;
+
+  [data-theme='dark'] & {
+    color: oklch(0.87 0.1745 87.53);
+  }
 }
 
 .code-anchor a::after {

src/css/docsearch.css

@@ -1,35 +1,46 @@
-[data-theme='dark'] .DocSearch {
-  --docsearch-text-color: var(--ifm-font-color-base);
-  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
-  --docsearch-container-background: hsla(225, 24%, 78%, 0.2);
+.DocSearch {
+  --docsearch-text-color: var(--text-primary);
+  --docsearch-muted-color: var(--text-tertiary);
+  --docsearch-container-background: var(--surface-1);
   /* Modal */
   --docsearch-modal-background: var(--ifm-background-color);
   /* Search box */
-  --docsearch-searchbox-background: rgba(255, 255, 255, 0.2);
-  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.1);
+  --docsearch-searchbox-background: var(--gray-universal-36);
+  --docsearch-searchbox-focus-background: var(--neon-a-bg-hover);
+  /* Highlight */
+  --docsearch-highlight-color: var(--ifm-color-primary-dark);
   /* Hit */
-  --docsearch-hit-color: var(--ifm-font-color-base);
-  --docsearch-hit-active-color: var(--ifm-color-white);
-  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+  --docsearch-hit-color: var(--text-primary);
+  --docsearch-hit-active-color: var(--ifm-background-color);
+  --docsearch-hit-background: var(--neon-a-bg-surface);
   /* Footer */
-  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-footer-background: var(--surface-1);
 }
 
+[data-theme='dark'] .DocSearch {
+  /* Highlight */
+  --docsearch-highlight-color: var(--ifm-color-primary-light);
+}
+
+
 .DocSearch-Button {
   min-width: 25vw;
 }
 
 @media (max-width: 996px) {
   .DocSearch-Button {
-    min-width: 0;
+    min-width: unset;
   }
 }
 
+[data-theme='light'] .DocSearch-Button-Key,
+[data-theme='light'] .DocSearch-Commands-Key,
 [data-theme='dark'] .DocSearch-Button-Key,
 [data-theme='dark'] .DocSearch-Commands-Key {
+  color: var(--text-secondary);
   background: transparent;
   box-shadow: none;
-  border: 1px solid var(--docsearch-muted-color);
+  border: 1px solid var(--text-secondary);
   top: 0;
   padding: 0;
 }