Skip to content

Commit

Permalink
Merge pull request #22 from denoland/style-update
Browse files Browse the repository at this point in the history 
Docs style updates
  • Loading branch information
@kwhinnery
kwhinnery authored Sep 2, 2023
2 parents 5d67a81 + 45a4e65 commit 0c19582
Show file tree
Hide file tree
Showing 5 changed files with 8,016 additions and 132 deletions.
256 changes: 158 additions & 98 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}

--svg: url("https://api.iconify.design/ic/baseline-data-object.svg");
}
18 changes: 10 additions & 8 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<div className="container flex flex-col-reverse md:items-center md:justify-center md:flex-row gap-0 md:gap-4">
<div className="pb-8 md:pb-0">
<h1>Deno Documentation</h1>
<p className="my-4">
Reference docs for the Deno JavaScript runtime and Deno Deploy.
</p>
<div className="flex flex-col-reverse px-8 md:mt-12 md:items-center md:justify-center md:flex-row gap-0 md:gap-16">
<div className="pb-16 align-middle md:pb-0">
<div className="mb-8 md:mb-12">
<h1 className="text-4xl md:text-5xl">Deno Documentation</h1>
<p className="my-2">
Reference docs for the Deno JavaScript runtime and Deno Deploy.
</p>
</div>
<div className="flex flex-col items-start gap-4 md:flex-row">
<a
className={ctaLinks}
Expand All @@ -30,9 +32,9 @@ export default function Home() {
</a>
</div>
</div>
<div className="text-center">
<div className="text-center align-middle">
<img
className="w-48 h-48 md:h-96 md:w-96 lg:h-[520px] lg:w-[520px]"
className="w-64 h-64 md:h-96 md:w-96 lg:h-[520px] lg:w-[520px]"
alt="Deno logo"
src="/deno-looking-up.svg"
/>
Expand Down
15 changes: 3 additions & 12 deletions static/img/logo-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0c19582

Please sign in to comment.