+
Sponsored by {item.name}
-
diff --git a/src/components/TopBanners.tsx b/src/components/TopBanners.tsx
index fd4e186..a477b2e 100644
--- a/src/components/TopBanners.tsx
+++ b/src/components/TopBanners.tsx
@@ -15,8 +15,7 @@ export const TopBanners = () => {
mobileImgSrc: "/ads/sponsor-banner-small-1.png",
url: "https://davewaring.com/tag/digital-brain-building/",
name: "Dave Waring",
- description:
- "Follow along as I build my own AI powered digital brain.",
+ description: "Follow along as I build my own AI powered digital brain.",
},
];
diff --git a/src/css/custom.css b/src/css/custom.css
index ca5d61f..4bb8886 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1,32 +1,37 @@
+/* stylelint-disable selector-class-pattern */
+
/**
* Any CSS included here will be global. The classic template
* 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=Archivo:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
+/* Tailwind base styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #327eff;
--ifm-color-primary-dark: #2a2978;
--ifm-color-primary-darker: #362771;
- --ifm-color-primary-darkest: #000000;
- --ifm-color-primary-light: hwb(216 27% 39%);
+ --ifm-color-primary-darkest: #000;
+ --ifm-color-primary-light: hwb(216deg 27% 39%);
--ifm-footer-background-color: #111;
--ifm-color-primary-lighter: #7062c8;
--ifm-color-primary-lightest: #6c87c5;
--ifm-link-color: #333;
--ifm-code-font-size: 95%;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+ --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
--ifm-hover-overlay: #fafafa;
--ifm-heading-color: #111;
+ --ifm-font-family-base: "Archivo";
+ --ifm-global-shadow-md: 0px; /* Remove shadow on the left */
}
[data-theme="light"] {
@@ -34,7 +39,7 @@
}
.theme-doc-sidebar-container {
- border-width: 0px !important;
+ border-width: 0 !important;
}
/* .hiring-link {
@@ -59,30 +64,35 @@
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--ifm-link-color: #ccc;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+ --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
--ifm-heading-color: #fff;
}
code {
color: #eb5757;
- border-width: 0px;
+ border-width: 0;
padding: 3px 8px;
font-size: 0.8em;
font-weight: 600;
}
+
[data-theme="light"] code {
background-color: #f0f0f0;
}
+
[data-theme="dark"] code {
background-color: #111;
}
+
.theme-code-block {
font-family: "IBM Plex Mono", monospace;
font-size: 0.9em;
}
+
.theme-code-block .token {
font-family: "IBM Plex Mono", monospace;
}
+
[data-theme="light"] .theme-code-block pre {
background-color: #fafafa;
}
@@ -98,7 +108,7 @@ code {
nav.menu {
margin-right: 1px;
- padding: 0px;
+ padding: 0;
}
nav.menu::-webkit-scrollbar {
@@ -108,10 +118,10 @@ nav.menu::-webkit-scrollbar {
.menu__link {
transition-property: none;
line-height: 1.5;
- border-radius: 0px 0px 0px 0px;
padding-left: 20px;
+
/* word-spacing: 7px; */
- margin: 0px 10px;
+ margin: 0 10px;
border-radius: 3px;
}
@@ -127,24 +137,20 @@ blockquote {
margin-left: 20px;
margin-right: 20px;
}
+
[data-theme="light"] blockquote {
background-color: #f0f0f0;
color: #000;
}
+
[data-theme="dark"] blockquote {
background-color: #111;
}
-[data-theme="light"] .pagination-nav__link:hover {
- border-color: #000;
-}
-[data-theme="dark"] .pagination-nav__link:hover {
- border-color: #fff;
-}
-
[data-theme="light"] .navbar__brand:hover {
color: #000;
}
+
[data-theme="dark"] .navbar__brand:hover {
color: #fff;
}
@@ -152,17 +158,20 @@ blockquote {
.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
display: none;
}
+
/* .navbar__items svg {
display: none;
} */
.pagination-nav__link {
- border-radius: 0px;
- border: 0px;
+ border-radius: 0;
+ border: 0;
}
+
[data-theme="light"] .pagination-nav__link {
border-top: 1px solid #ccc;
}
+
[data-theme="dark"] .pagination-nav__link {
border-top: 1px solid #ccc;
}
@@ -170,6 +179,7 @@ blockquote {
[data-theme="light"] .pagination-nav__link:hover {
border-top: 1px solid #000;
}
+
[data-theme="dark"] .pagination-nav__link:hover {
border-top: 1px solid #fff;
}
@@ -179,25 +189,31 @@ blockquote {
margin-bottom: 40px;
margin-top: 30px;
}
+
[data-theme="light"] .hero__subtitle {
color: #000;
}
+
[data-theme="dark"] .hero__subtitle {
color: #fff !important;
}
+
.btn--black {
background-color: #000;
color: #fff;
}
+
.btn--black:hover {
background-color: #000;
color: #fff;
}
+
.iconExternalLink_nPIU {
display: none;
}
+
.btn--landing {
- border-radius: 0px;
+ border-radius: 0;
margin-right: 8px;
margin-left: 8px;
border-color: #000;
@@ -206,109 +222,11 @@ blockquote {
[data-theme="light"] .hero--bg {
background-color: #fafafa;
}
+
[data-theme="dark"] .hero--bg {
background-color: #111 !important;
}
-.hero--banner {
- padding: 10px !important;
-}
-.hero--banner,
-.hero--banner a {
- margin: 0px;
-
- color: #fff;
- background-color: #000;
- width: 100%;
-}
-
-.homepage-svg svg {
- height: auto !important;
- width: 100% !important;
- padding: 20px;
- max-width: 200px;
-}
-[data-theme="light"] .homepage-svg svg {
- background-color: #fafafa;
- color: #000;
-}
-[data-theme="dark"] .homepage-svg svg {
- background-color: #111 !important;
- color: #fff !important;
-}
-[data-theme="dark"] .homepage-svg path {
- filter: invert(1);
-}
-.index-buttons {
- padding: 0px !important;
-}
-.hero--container-small img {
- max-width: 100%;
-}
-
-.footer__item .hiring-link {
- margin-top: 20px;
-}
-.hiring-link {
- background-color: #ffde2d;
- color: #000;
- font-weight: 600;
- padding: 5px 10px;
- border-radius: 1px;
-}
-
-@media screen and (min-width: 997px) {
- .hero--container {
- padding-left: 200px;
- padding-right: 200px;
- padding-top: 80px;
- padding-bottom: 80px;
- }
- .hero--container-small {
- padding-left: 200px;
- padding-right: 200px;
- padding-top: 40px;
- padding-bottom: 40px;
- }
-}
-@media screen and (max-width: 996px) {
- .hero--container {
- padding-left: 0px;
- padding-right: 0px;
- padding-top: 20px;
- padding-bottom: 0px;
- }
- .hero--container h2,
- .hero--container-small h2 {
- font-size: 1.2em;
- }
- .hero--container-small {
- padding-left: 40px;
- padding-right: 40px;
- padding-top: 20px;
- padding-bottom: 20px;
- }
- .index-buttons {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .index-buttons a {
- margin-bottom: 10px;
- }
- .hero--banner a {
- font-size: 0.8em;
- }
- .hero__subtitle {
- font-size: 1.3rem;
- margin-bottom: 25px;
- }
- .homepage-svg svg {
- max-width: 120px;
- margin-left: 15px;
- }
-}
-
article a {
/* background-color: #f6f3d2; */
text-decoration: underline;
@@ -319,19 +237,130 @@ article p a {
font-weight: 600;
text-underline-position: under;
margin-bottom: 5px;
+
/* display: block; */
}
+
+.hero--banner {
+ padding: 10px !important;
+}
+
+.hero--banner,
+.hero--banner a {
+ margin: 0;
+ color: #fff;
+ background-color: #000;
+ width: 100%;
+}
+
+.homepage-svg svg {
+ height: auto !important;
+ width: 100% !important;
+ padding: 20px;
+ max-width: 200px;
+}
+
+[data-theme="light"] .homepage-svg svg {
+ background-color: #fafafa;
+ color: #000;
+}
+
+[data-theme="dark"] .homepage-svg svg {
+ background-color: #111 !important;
+ color: #fff !important;
+}
+
+[data-theme="dark"] .homepage-svg path {
+ filter: invert(1);
+}
+
+.index-buttons {
+ padding: 0 !important;
+}
+
+.hero--container-small img {
+ max-width: 100%;
+}
+
+.hiring-link {
+ background-color: #ffde2d;
+ color: #000;
+ font-weight: 600;
+ padding: 5px 10px;
+ border-radius: 1px;
+}
+
+.footer__item .hiring-link {
+ margin-top: 20px;
+}
+
+@media screen and (width >= 997px) {
+ .hero--container {
+ padding: 80px 200px;
+ }
+
+ .hero--container-small {
+ padding: 40px 200px;
+ }
+}
+
+@media screen and (width < 997px) {
+ .hero--container {
+ padding: 20px 0 0;
+ }
+
+ .hero--container h2,
+ .hero--container-small h2 {
+ font-size: 1.2em;
+ }
+
+ .hero--container-small {
+ padding: 20px 40px;
+ }
+
+ .index-buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .index-buttons a {
+ margin-bottom: 10px;
+ }
+
+ .hero--banner a {
+ font-size: 0.8em;
+ }
+
+ .hero__subtitle {
+ font-size: 1.3rem;
+ margin-bottom: 25px;
+ }
+
+ .homepage-svg svg {
+ max-width: 120px;
+ margin-left: 15px;
+ }
+}
+
+.notbold a {
+ font-weight: 400 !important;
+}
+
[data-theme="light"] article p a {
color: #333;
text-decoration-color: #bfbfbf;
}
+
[data-theme="dark"] article p a {
color: #ccc;
text-decoration-color: #454545;
}
+
[data-theme="light"] article p a:hover {
color: #111;
}
+
[data-theme="dark"] article p a:hover {
color: #fff;
}
@@ -340,17 +369,14 @@ article p a {
font-weight: 600;
}
-.margin-bottom--sm {
- margin-top: 200px !important;
- margin-bottom: 200px !important;
-}
-
.footer__title {
color: #fff;
}
+
[data-theme="light"] a.footer__link-item {
color: #fff;
}
+
[data-theme="dark"] a.footer__link-item {
color: #fff;
}
@@ -359,45 +385,51 @@ article p a {
color: #000;
background-color: #f0f0f0;
}
+
[data-theme="dark"] .menu__link--active {
color: #fff;
background-color: #111;
}
-@media screen and (min-width: 997px) {
+@media screen and (width >= 997px) {
.menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
- padding: 0px !important;
+ padding: 0 !important;
}
+
.menu__list-item:not(:first-child) {
- margin-top: 0px;
+ margin-top: 0;
}
}
.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
- border-right-width: 0px !important;
+ border-right-width: 0 !important;
}
/* from here - https://theochu.com/docusaurus/styling/ */
-@media screen and (max-width: 996px) {
+@media screen and (width <= 996px) {
h1 {
font-size: 1.5rem !important;
font-weight: 600;
}
+
.hero .hero__title {
font-size: 2.5rem;
}
}
-@media screen and (min-width: 997px) {
+@media screen and (width >= 997px) {
h1 {
font-size: 2rem !important;
}
+
h2 {
font-size: 1.5rem !important;
}
+
h3 {
font-size: 1rem !important;
}
+
article {
max-width: 700px;
margin-left: auto;
@@ -406,32 +438,25 @@ article p a {
}
}
-:root {
- --ifm-font-family-base: "Archivo";
-}
-
/* Header Dropdown Menu */
.dropdown__link {
font-size: inherit;
}
-/* Remove shadow on the left */
-:root {
- --ifm-global-shadow-md: 0px;
-}
-
-@media screen and (min-width: 997px) {
+@media screen and (width >= 997px) {
/* Show inline table of contents on mobile only */
div[class^="tableOfContentsInline"] {
display: none;
}
}
+/*
.tabs {
}
+*/
.tabs__item {
- padding: 3px 15px 2px 15px;
+ padding: 3px 15px 2px;
font-weight: 600;
font-size: 0.9em;
border-radius: 30px;
@@ -439,15 +464,18 @@ article p a {
margin-right: 8px;
background-color: #f0f0f0;
}
+
.tabs__item:hover {
background-color: #e5e5e5;
}
+
.tabs__item--active {
- border-bottom: 0px;
+ border-bottom: 0;
background-color: rgb(50 125 255);
border-radius: 30px;
- color: #ffffff;
+ color: #fff;
}
+
.tabs__item--active:hover {
background-color: rgb(50 125 255);
}
@@ -455,9 +483,10 @@ article p a {
.tabs + .margin-top--md {
margin-top: 5px !important;
}
+
.tabs + .margin-top--md pre {
- border-top-right-radius: 0px;
- border-top-left-radius: 0px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
}
.margin-bottom--xl {
@@ -474,46 +503,49 @@ article p a {
}
.markdown hr {
- background-color: rgba(120, 120, 120, 0.2);
+ background-color: rgb(120 120 120 / 20%);
}
div.special_table + table {
border: none;
/* border-collapse: separate; */
+
/* border-spacing: 0px; */
}
div.special_table + table thead {
- background: rgba(120, 120, 120, 0.1);
+ background: rgb(120 120 120 / 10%);
border-top-right-radius: 10px;
overflow: hidden;
}
div.special_table + table thead tr {
- background: rgba(255, 255, 255, 0);
- border-top: 0px;
- border-bottom: 0px;
+ background: rgb(255 255 255 / 0%);
+ border-top: 0;
+ border-bottom: 0;
}
+
div.special_table + table tr th {
- background: rgba(255, 255, 255, 0);
+ background: rgb(255 255 255 / 0%);
color: #000;
font-weight: 600;
padding: 5px 20px;
}
+
div.special_table + table tr td {
padding: 5px 20px;
text-align: left;
}
div.special_table + table tr:nth-child(even) {
- background: rgba(255, 255, 255, 0);
+ background: rgb(255 255 255 / 0%);
}
div.special_table + table,
th,
td {
- border-width: 0px !important;
+ border-width: 0 !important;
}
.custom-tag {
@@ -523,6 +555,7 @@ td {
margin-right: 5px;
border-radius: 8px;
font-size: 0.7em;
+
/* text-transform: uppercase; */
font-weight: 900;
color: #000;
@@ -539,15 +572,11 @@ td {
}
.navbar__link:has(div.custom-tag) {
- padding: 0px;
- margin: 0px;
+ padding: 0;
+ margin: 0;
margin-left: 5px;
}
-.notbold a {
- font-weight: 400 !important;
-}
-
.small-text {
font-size: 0.8em;
}
@@ -567,14 +596,13 @@ td {
margin-top: 40px;
}
-.category-header .menu__link--sublist-caret:after {
+.category-header .menu__link--sublist-caret::after {
display: none;
}
.category-link a::after {
content: "\2192";
font-size: 20px;
- margin-left: 5px; /* for spacing */
transform: scaleX(-1) rotate(180deg);
margin-left: 9px;
position: absolute;
@@ -607,6 +635,7 @@ td {
height: 24px;
display: flex;
background-color: var(--ifm-navbar-link-color);
+
/* URL encode an svg https://yoksel.github.io/url-encoder/ */
mask-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z' %3E%3C/path%3E%3C/svg%3E");
transition: background-color var(--ifm-transition-fast)
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
deleted file mode 100644
index d7160c1..0000000
--- a/src/pages/index.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
- padding: 4rem 0;
- text-align: center;
- position: relative;
- overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
- }
-}
-
-.buttons {
- display: flex;
- align-items: center;
- justify-content: center;
-}
diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md
deleted file mode 100644
index 9756c5b..0000000
--- a/src/pages/markdown-page.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 2342407..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- corePlugins: {
- preflight: false,
- container: false,
- },
- darkMode: ["class", '[data-theme="dark"]'],
- content: ["./src/**/*.{js,jsx,tsx,html}", "./docs/**/*.{md,mdx}"],
- theme: {
- extend: {
- fontFamily: {
- sans: ['"Inter"', ...fontFamily.sans],
- jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
- mono: ['"Fira Code"', ...fontFamily.mono],
- },
- colors: {},
- },
- },
- plugins: [],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..9eb6157
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
+
+export default {
+ corePlugins: {
+ preflight: false,
+ container: false,
+ },
+ darkMode: ["class", '[data-theme="dark"]'],
+ content: ["./src/**/*.{js,jsx,tsx,html}", "./docs/**/*.{md,mdx}"],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ["Inter", ...defaultTheme.fontFamily.sans],
+ jakarta: ["Plus Jakarta Sans", ...defaultTheme.fontFamily.sans],
+ mono: ["Fira Code", ...defaultTheme.fontFamily.mono],
+ },
+ colors: {},
+ },
+ },
+ plugins: [],
+} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
index e40883c..2c51bdf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,17 @@
// https://docusaurus.io/docs/typescript-support
// This file is not used in compilation. It is here just for a nice editor experience.
{
- "extends": "@docusaurus/tsconfig",
- "compilerOptions": {
- "baseUrl": ".",
- // https://miyoon.medium.com/array-parameters-in-tsconfig-json-are-always-overwritten-11c80bb514e1
- // https://github.com/microsoft/TypeScript/issues/20110
- "types": [
- "node",
- "@docusaurus/module-type-aliases",
- "@docusaurus/theme-classic",
- "docusaurus-plugin-sass"
- ]
- },
- "exclude": ["node_modules", "build", ".docusaurus"]
+ "extends": "@docusaurus/tsconfig",
+ "compilerOptions": {
+ "baseUrl": ".",
+ // https://miyoon.medium.com/array-parameters-in-tsconfig-json-are-always-overwritten-11c80bb514e1
+ // https://github.com/microsoft/TypeScript/issues/20110
+ "types": [
+ "node",
+ "@docusaurus/module-type-aliases",
+ "@docusaurus/theme-classic",
+ "docusaurus-plugin-sass"
+ ]
+ },
+ "exclude": ["node_modules", "build", ".docusaurus"]
}