Poko Demo Pico CSS

components:
  h1: h2
  h2: h3
  h3: h4
  h4: h5
  h5: h6
metadata:
  lang: en
  siteName: Poko Demo Pico CSS

<aside> 🗨️ Have questions? Want to share ideas or cool tips? Need some inspiration for your next project? Come and discuss about anything Poko related.

</aside>

<aside> ❗ This is the actual Notion Space used for the Poko Website. Things will move! I may even be working on it as you read this so if a sentence is incomplete for example, you know why. 😉

</aside>

<aside> ‼️ Poko is in early Alpha. What it means is that it is incomplete and things may break unexpectedly. We will try and document changes from version to version though. Moreover you keep control on your update cycle since only you can update your github fork.

</aside>

Exports

export const wrapper = ({ children, components, ...props }) => {
export const img = (props) ⇒ <props.components.ImgLazy {...props} />
export const nav = ({ index, pages }) => {
export const Brand = ({ cap }) ⇒ <em>{cap ? ‘P’ : ‘p’}oko</em>

<aside> 📌 As you can see, you can write export functions in a Toggle. This is the most convenient way I have found so far to avoid clutter.

</aside>

<aside> ⚠️ Be mindful of how you write exports. The export keyword cannot be nested under another block for example. If MDX refuses to process your export, look at the build log, we provide a dozen lines of Markdown. The (first) mistake MDX encounters should be in the middle of the printed output.

</aside>

Global Styles

This will be written to a user-styles.css file and imported in the main layout.

/* Pico CSS customization: <https://picocss.com/docs/customization.html> */

/* Teal Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #00897b;
  --primary-hover: #00796b;
  --primary-focus: rgba(0, 137, 123, 0.125);
  --primary-inverse: #FFF;
}

/* Teal Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #00897b;
    --primary-hover: #009688;
    --primary-focus: rgba(0, 137, 123, 0.25);
    --primary-inverse: #FFF;
  }
}

/* Teal Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #00897b;
  --primary-hover: #009688;
  --primary-focus: rgba(0, 137, 123, 0.25);
  --primary-inverse: #FFF;
}

/* Teal (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

Head

Anything to put in the <head> of every page?

Favicon: you can use realfavicongenerator.net for example to generate the html code and files you need. Simply copy/paste the html bellow and place your zip