diff --git a/src/css/custom.css b/src/css/custom.css
index 324c4ca21..91a56c5c4 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -3,112 +3,172 @@
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,700;0,800;1,700&display=swap');
-
- /* You can override the default Infima variables here. */
- :root {
- --ifm-color-primary: #2e8555;
- --ifm-color-primary-dark: #29784c;
- --ifm-color-primary-darker: #277148;
- --ifm-color-primary-darkest: #205d3b;
- --ifm-color-primary-light: #33925d;
- --ifm-color-primary-lighter: #359962;
- --ifm-color-primary-lightest: #3cad6e;
- --ifm-code-font-size: 95%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
- --ifm-heading-font-family: 'Public Sans', Helvetica, sans-serif;
- }
-
- /* For readability concerns, you should choose a lighter palette in dark mode. */
- [data-theme='dark'] {
- --ifm-color-primary: #25c2a0;
- --ifm-color-primary-dark: #21af90;
- --ifm-color-primary-darker: #1fa588;
- --ifm-color-primary-darkest: #1a8870;
- --ifm-color-primary-light: #29d5b0;
- --ifm-color-primary-lighter: #32d8b4;
- --ifm-color-primary-lightest: #4fddbf;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
- }
-
- html, body {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- }
-
- h1, h2, h3, h4 {
- font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- }
-
- .container {
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap");
+
+/* You can override the default Infima variables here. */
+:root {
+ --ifm-color-primary: #2e8555;
+ --ifm-color-primary-dark: #29784c;
+ --ifm-color-primary-darker: #277148;
+ --ifm-color-primary-darkest: #205d3b;
+ --ifm-color-primary-light: #33925d;
+ --ifm-color-primary-lighter: #359962;
+ --ifm-color-primary-lightest: #3cad6e;
+ --ifm-code-font-size: 95%;
+ --ifm-code-padding-horizontal: 0.5em;
+ --ifm-code-padding-vertical: 0.25em;
+ --ifm-navbar-search-input-background-color: #fff;
+ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+ --ifm-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system,
+ "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+ sans-serif;
+ --ifm-font-family-monospace: Menlo, Monaco, "Lucida Console", Consolas,
+ "Liberation Mono", "Courier New", monospace, Menlo, Monaco, "Lucida Console",
+ Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+ --ifm-color-primary: #25c2a0;
+ --ifm-color-primary-dark: #21af90;
+ --ifm-color-primary-darker: #1fa588;
+ --ifm-color-primary-darkest: #1a8870;
+ --ifm-color-primary-light: #29d5b0;
+ --ifm-color-primary-lighter: #32d8b4;
+ --ifm-color-primary-lightest: #4fddbf;
+ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+html,
+body {
+ font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+article {
+ max-width: 75ch;
+}
+
+h1 {
+ font-size: 2rem;
+ line-height: 1.2;
+}
+
+h2 {
+ font-size: 1.5rem;
+ line-height: 1.2;
+}
+
+h3 {
+ font-size: 1.125rem;
+ line-height: 1.2;
+}
+
+.container {
max-width: 1140px !important;
- }
-
- /* Hide breadcrumbs */
- .theme-doc-breadcrumbs {
- display: none;
- }
-
- .section-header {
- padding: 5px 0;
- margin: 10px var(--ifm-menu-link-padding-horizontal);
- border-bottom: 1px solid;
- color: #aaa;
- font-size: 0.8rem;
- }
-
- .menu__list-item {
- margin: 0 var(--ifm-menu-link-padding-horizontal);
- }
-
- .menu__link {
- font-size: 0.8rem;
- }
-
- .navbar__link--active {
- font-weight: bold;
- }
-
- .__no-external a svg {
- display: none;
- }
-
- .icon-menu-option .menu__link {
- position: relative;
- }
-
- .icon-menu-option .menu__link::before {
- content: '';
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 5px;
- background-color: currentColor;
- --svg: url('https://api.iconify.design/ic/baseline-electric-bolt.svg');
- -webkit-mask-image: var(--svg);
- mask-image: var(--svg);
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-size: 100% 100%;
- mask-size: 100% 100%;
- }
-
+}
+
+@media screen and (min-width: 768px) {
+ .container {
+ margin-top: 1.5rem;
+ margin-left: 3rem;
+ }
+
+ footer>.container {
+ margin-top: 2rem;
+ margin-left: auto;
+ }
+}
+
+/* Hide breadcrumbs */
+.theme-doc-breadcrumbs {
+ display: none;
+}
+
+.section-header {
+ padding: 5px 0;
+ margin: 10px var(--ifm-menu-link-padding-horizontal);
+ border-bottom: 1px solid #aaa;
+ color: var(--ifm-navbar-link-color);
+ font-size: 1rem;
+}
+
+.menu__list-item {
+ margin: 0 var(--ifm-menu-link-padding-horizontal);
+}
+
+.menu__link {
+ font-size: 0.8rem;
+}
+
+.navbar__link--active {
+ font-weight: bold;
+}
+
+.navbar__logo {
+ height: 1.7rem;
+ margin-right: 0.7rem;
+}
+
+.navbar__title {
+ font-size: 1.2rem;
+}
+
+.navbar__brand {
+ margin-right: 1.5rem;
+}
+
+.__no-external a svg {
+ display: none;
+}
+
+.icon-menu-user-guide,
+.icon-menu-tutorials,
+.icon-menu-api {
+ margin-left: 0;
+}
+
+.icon-menu-user-guide>a,
+.icon-menu-tutorials>a,
+.icon-menu-api>a {
+ font-size: 0.9rem;
+}
+
+.icon-menu-option .menu__link {
+ position: relative;
+}
+
+.icon-menu-option .menu__link::before {
+ content: "";
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ background-color: currentColor;
+ --svg: url("https://api.iconify.design/ic/baseline-electric-bolt.svg");
+ -webkit-mask-image: var(--svg);
+ mask-image: var(--svg);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-size: 100% 100%;
+ mask-size: 100% 100%;
+}
+
.icon-menu-quick-start .menu__link::before {
- --svg: url('https://api.iconify.design/ic/baseline-electric-bolt.svg');
+ --svg: url("https://api.iconify.design/ic/baseline-electric-bolt.svg");
}
.icon-menu-user-guide .menu__link::before {
- --svg: url('https://api.iconify.design/ic/sharp-menu-book.svg');
+ --svg: url("https://api.iconify.design/ic/sharp-menu-book.svg");
}
.icon-menu-tutorials .menu__link::before {
- --svg: url('https://api.iconify.design/ic/baseline-integration-instructions.svg');
+ --svg: url("https://api.iconify.design/ic/baseline-integration-instructions.svg");
}
.icon-menu-api .menu__link::before {
- --svg: url('https://api.iconify.design/ic/baseline-data-object.svg');
-}
-
\ No newline at end of file
+ --svg: url("https://api.iconify.design/ic/baseline-data-object.svg");
+}
\ No newline at end of file
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index bcc33989f..6be05f9d5 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -9,12 +9,14 @@ export default function Home() {
title={`Deno: the easiest, most secure JavaScript runtime`}
description="Reference documentation for the Deno runtime and Deno Deploy"
>
-
-
-
Deno Documentation
-
- Reference docs for the Deno JavaScript runtime and Deno Deploy.
-
+
+
+
+
Deno Documentation
+
+ Reference docs for the Deno JavaScript runtime and Deno Deploy.
+
+
-
+
diff --git a/static/img/logo-dark.svg b/static/img/logo-dark.svg
index 39345cc31..0a9c343f0 100644
--- a/static/img/logo-dark.svg
+++ b/static/img/logo-dark.svg
@@ -1,13 +1,4 @@
-