mine.css

https://mine-css.neocities.org
Admin
mine.css is a classless stylesheet designed to make plain HTML pages look good and readable with...
Tokens:7,842
Snippets:60
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### HTML Input Type Time Examples

Source: https://mine-css.neocities.org/guide

Illustrates the HTML `<input type="time">` element, designed for easy entry of hours and minutes. The example shows how to set minimum and maximum time constraints (e.g., office hours) and make the input required.

```html
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt" id="appt" min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
```

--------------------------------

### HTML Textarea Element Examples

Source: https://mine-css.neocities.org/guide

Demonstrates the use of the HTML `<textarea>` element for multi-line text input. It includes examples of a standard textarea with pre-filled content and a disabled textarea, showing how to allow users to enter sizeable amounts of free-form text.

```html
<label style="display: block;">
  Tell us your story:
  <textarea style="display: block;" id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
  </textarea>
</label>
<label style="display: block;">
  Don't tell us your story:
  <textarea style="display: block;" disabled id="story" name="story" rows="5" cols="33">
It wasn't a dark and stormy night...
  </textarea>
</label>
```

--------------------------------

### HTML Input Type Week Examples

Source: https://mine-css.neocities.org/guide

Presents the HTML `<input type="week">` element, which allows easy entry of a year and its ISO 8601 week number. The example includes setting a placeholder, an initial value, and defining minimum and maximum week ranges.

```html
<label class="block" for="week-example">Week:</label>
<input class="block" placeholder="2018-W18" value="2017-W01" type="week" for="week-example" id="week-example" min="2018-W18" max="2018-W26" required>
```

--------------------------------

### HTML Input Type URL Examples

Source: https://mine-css.neocities.org/guide

Shows the HTML `<input type="url">` element, used for letting users enter and edit URLs. The example demonstrates attributes like `placeholder`, `pattern` for validation (ensuring HTTPS), `size`, and `required` for robust URL input.

```html
<label for="url">Enter an https:// URL:</label>
<input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required>
```

--------------------------------

### Markdown Code Block Examples

Source: https://mine-css.neocities.org/guide

Illustrates different methods for displaying code in Markdown, including inline code, indented code blocks, and fenced code blocks with and without syntax highlighting. Examples include generic text and JavaScript.

```Markdown
Indented code

line 3 of code
line 4 of code
line 5 of code

line 7 of code
```

```Markdown
Fenced code blocks
```

```JavaScript
// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

```Markdown
`Inline code`

    Indented code

    line 3 of code
    line 4 of code
    line 5 of code

    line 7 of code

```
Fenced code blocks
```

```JavaScript
// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

```JavaScript
// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5)); console.log(foo(5)); console.log(foo(5)); console.log(foo(5));
```

--------------------------------

### Create Definition Lists in Markdown

Source: https://mine-css.neocities.org/guide

Illustrates the creation of definition lists in Markdown using `markdown-it-deflist` syntax. Examples include multi-paragraph definitions, inline markup within terms, and a compact style for definitions.

```Markdown
Term 1

:   Definition 1
    with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b
```

--------------------------------

### Markdown Table Syntax

Source: https://mine-css.neocities.org/guide

Provides examples of creating tables in Markdown, demonstrating both standard and right-aligned column formatting. Tables are a structured way to present data.

```Markdown
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
```

```Markdown
| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
```

--------------------------------

### Markdown Link Syntax Examples

Source: https://mine-css.neocities.org/guide

Shows various ways to define links in Markdown, including basic inline links, links with titles, and reference-style links with footnotes.

```markdown
[link text](http://dev.nodeca.com)
```

```markdown
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
```

```markdown
[link with footnote style syntax][footnote style]

[footnote style]: https://en.wikipedia.org/wiki/Note_(typography)
```

--------------------------------

### Install mine.css as a dev dependency

Source: https://mine-css.neocities.org/index

Instructions to install mine.css as a development dependency using npm.

```shell
npm install mine.css --save-dev
```

--------------------------------

### Markdown Offset Ordered List Syntax

Source: https://mine-css.neocities.org/guide

Shows how ordered lists in Markdown can start with an arbitrary number, demonstrating the flexibility of list numbering.

```markdown
57. foo
1. bar
```

--------------------------------

### Install mine.css via npm

Source: https://mine-css.neocities.org/index

Instructions to install the mine.css package using npm, making it available for project use.

```shell
npm install mine.css
```

--------------------------------

### Basic HTML Structure with mine.css

Source: https://mine-css.neocities.org/index

A complete HTML document demonstrating the basic setup to include mine.css using a <link> tag from a CDN.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0">
  </head>
  <body>
    <h1>Hooray!</h1>
  </body>
</html>
```

--------------------------------

### Markdown and HTML Paragraph Styling

Source: https://mine-css.neocities.org/guide

Illustrates how standard paragraph text is structured in Markdown and rendered, including multi-paragraph blocks and quoted text examples.

```markdown
At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab's front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.

"There it is again—under the hatches—don't you hear it—a cough—it sounded like a cough."
```

--------------------------------

### HTML Text Input Type

Source: https://mine-css.neocities.org/guide

Presents an example of the basic single-line text field using `<input type="text">`. It includes attributes for minimum and maximum length, and size, demonstrating common constraints for text input.

```HTML
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">
```

--------------------------------

### Install mine.css via CDN (Development)

Source: https://mine-css.neocities.org/index

Include the latest development version of mine.css directly from a Content Delivery Network (CDN). This link always points to the most recent release and is suitable for quick prototyping and development environments where the absolute latest features or bug fixes are desired.

```HTML
<!-- CDN Development (always latest) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css">
```

--------------------------------

### Markdown Ordered List Syntax

Source: https://mine-css.neocities.org/guide

Illustrates the creation of ordered lists in Markdown, showing both sequential numbering and the common practice of using `1.` for all items.

```markdown
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
```

--------------------------------

### HTML Search Input Type

Source: https://mine-css.neocities.org/guide

Provides an example of the `<input type="search">` element, designed for user input of search queries. Functionally similar to a text input, it may receive distinct styling from user agents.

```HTML
<input placeholder="Search..." type="search" name="search">
```

--------------------------------

### HTML Button Input Type Example

Source: https://mine-css.neocities.org/guide

HTML <input> elements of type 'button' are rendered as simple push buttons. They can be programmed to control custom functionality anywhere on a webpage when assigned an event handler function, typically for the 'click' event.

```HTML
<input type="button" value="Button">
<input type="button" value="Button">
<input type="button" value="Button">
<button>Hey Hi</button>
<input disabled type="button" value="Disabled Button">
```

--------------------------------

### Add Footnotes in Markdown

Source: https://mine-css.neocities.org/guide

Demonstrates how to add footnotes in Markdown using `markdown-it-footnote` syntax. Examples include standard footnotes, inline footnotes, and duplicated references, showing that footnotes can contain markup and multiple paragraphs.

```Markdown
Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.
```

--------------------------------

### HTML Datetime Local Input Type Example

Source: https://mine-css.neocities.org/guide

HTML <input> elements of type 'datetime-local' create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.

```HTML
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2020-08-15">
```

--------------------------------

### HTML Color Input Type Example

Source: https://mine-css.neocities.org/guide

HTML <input> elements of type 'color' provide a user interface element that lets a user specify a color, either by using a visual color picker or by entering the color in #rrggbb hexadecimal format. Only simple colors without an alpha channel are allowed.

```HTML
<div>
  <input type="color" name="head" id="color-head" value="#e66465">
  <label for="color-head">Head</label>
</div>

<div>
  <input type="color" name="body" id="color-body" value="#f6b73c">
  <label for="color-body">Body</label>
</div>
<div>
  <input disabled type="color" name="foot" id="color-foot" value="#0083f5">
  <label for="color-foot">Footer (Disabled)</label>
</div>
```

--------------------------------

### Markdown User Input Display

Source: https://mine-css.neocities.org/guide

Shows how to represent user input or keyboard key presses using Markdown, often rendered with `<kbd>` HTML tags for visual distinction. This is useful for documentation and tutorials.

```HTML
<kbd>ctrl</kbd><kbd>alt</kbd><kbd>delete</kbd>

<kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

<kbd>a</kbd><kbd>z</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>
```

--------------------------------

### Markdown and HTML Headings Styling

Source: https://mine-css.neocities.org/guide

Demonstrates the Markdown and corresponding HTML structure for headings (h1-h6) and how they are rendered with `mine.css`, including inline code and small text elements.

```markdown
# h1 Heading `with code` <small>and small text</small>
## h2 Heading `with code` <small>and small text</small>
### h3 Heading `with code` <small>and small text</small>
#### h4 Heading `with code` <small>and small text</small>
##### h5 Heading `with code` <small>and small text</small>
###### h6 Heading `with code` <small>and small text</small>
```

--------------------------------

### Markdown Unordered List Syntax

Source: https://mine-css.neocities.org/guide

Demonstrates the creation of unordered lists in Markdown using different markers (`+`, `-`, `*`) and nested list structures with indentation.

```markdown
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!
```

--------------------------------

### Install mine.css via CDN (Production)

Source: https://mine-css.neocities.org/index

Include a specific production release of mine.css from a Content Delivery Network (CDN). It is highly recommended to pin to a specific version (e.g., ^4.0.0) for production environments to ensure stability, prevent unexpected breaking changes, and maintain consistent styling across deployments.

```HTML
<!-- CDN Production (specific release) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0">
```

--------------------------------

### HTML Checkbox Input Type Example

Source: https://mine-css.neocities.org/guide

HTML <input> elements of type 'checkbox' are rendered as boxes that are checked (ticked) when activated. They allow users to select single values for submission in a form. The exact appearance depends on the operating system configuration.

```HTML
<div>
  <input type="checkbox" name="scales" id="scales" checked>
  <label for="scales">Scales</label>
</div>

<div>
  <input type="checkbox" name="horns" id="horns">
  <label for="horns">Horns</label>
</div>

<div>
  <input disabled type="checkbox" name="teeth" id="teeth">
  <label for="teeth">Teeth (Disabled)</label>
</div>
```

--------------------------------

### HTML Range Input Type

Source: https://mine-css.neocities.org/guide

Demonstrates the use of `<input type="range">` elements, which allow users to select a numeric value within a specified range using a slider. It includes examples of both enabled and disabled range inputs.

```HTML
<div>
  <input type="range" name="volume" id="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input disabled type="range" name="cowbell" id="cowbell" min="0" max="100" value="90" step="10">
  <label for="cowbell">Cowbell (Disabled)</label>
</div>
```

--------------------------------

### Markdown Blockquote Syntax

Source: https://mine-css.neocities.org/guide

Demonstrates the syntax for blockquotes in Markdown, including single-level and nested blockquotes using multiple `>` characters.

```markdown
This is a paragraph preceding a blockquote.

> `<blockquote>` can also be nested...
>> ...by using additional greater-than (`'>'`) signs right next to each other...
> > > ...or with spaces between arrows.

This is a paragraph following a blockquote.
```

--------------------------------

### HTML Reset Input Type

Source: https://mine-css.neocities.org/guide

Illustrates the `<input type="reset">` element, which functions as a button to clear all form inputs to their initial values. The example shows both an active and a disabled reset button within a form context.

```HTML
<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" name="id" id="id" />
    <input type="reset" value="Reset">
    <input disabled type="reset" value="Reset (Disabled)">
  </div>
</form>
```

--------------------------------

### HTML Fieldset and Legend for Grouping Form Elements

Source: https://mine-css.neocities.org/guide

Demonstrates the use of the HTML `<fieldset>` element to group related form controls, such as email and password inputs, under a common `<legend>`. This improves the semantic structure and accessibility of forms, as shown in a login form example.

```html
<form style="display: inline-block;">
  <fieldset>
    <legend>Log into your account:</legend>
    <div>
      <label class="block" for="username">Email:</label>
      <input type="email" name="username" id="username">
    </div>
    <div>
      <label class="block" for="password-fieldset">Password:</label>
      <input type="password" name="password" id="password-fieldset">
    </div>
    <input style="width:100%" type="submit" value="Login">
  </fieldset>
</form>
```

--------------------------------

### HTML Date Input Type Example

Source: https://mine-css.neocities.org/guide

HTML <input> elements of type 'date' create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.

```HTML
<label class="block" for="trip-start">Date:</label>
<input type="date" name="trip-start" id="trip-start" value="2020-08-15">
<label class="block" for="placeholder-date">Date (Placeholder):</label>
<input type="date" name="placeholder-date" id="placeholder-date" placeholder="2020-08-25">
<label class="block" for="trip-end">Date (Disabled):</label>
<input disabled type="date" name="trip-end" id="trip-end" value="2020-08-25">
```

--------------------------------

### Swapping Images for Dark Mode using `<picture>` and `<source>` (HTML)

Source: https://mine-css.neocities.org/index

This HTML example demonstrates how to use the `<picture>` element with a `<source>` tag to display different images based on the user's preferred color scheme. The `media="(prefers-color-scheme: dark)"` attribute ensures the `srcset` image is loaded in dark mode.

```HTML
<picture>
    <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
    <img src="mojave-day.jpg">
</picture>
```

--------------------------------

### Markdown Text Emphasis and Strikethrough

Source: https://mine-css.neocities.org/guide

Demonstrates various ways to apply emphasis (bold, italic) and strikethrough formatting to text using Markdown syntax. It shows both standard Markdown and common variations.

```Markdown
- **This is bold text**
- __This is also bold text__
- *This is italic text*
- _This is also italic text_
- ~~This is deleted text~~
```

--------------------------------

### HTML Submit Input Type

Source: https://mine-css.neocities.org/guide

Shows the `<input type="submit">` element, which renders as a button. Clicking this button triggers the form submission process to the server.

```HTML
<input type="submit" value="Submit">
```

--------------------------------

### Display Images with Figure and Picture Tags

Source: https://mine-css.neocities.org/guide

Demonstrates how to use `<figure>` for semantic image captions and `<picture>` for responsive images, including light/dark mode support. It highlights the use of `srcset` for different color schemes, noting a potential limitation where `srcset` is only honored when the system mode changes.

```HTML
<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Helsinki_z00.jpg/1920px-Helsinki_z00.jpg" alt="Helsinki">
  <figcaption>Panoramic view of <a href="//commons.wikimedia.org/wiki/Helsinki" title="Helsinki">Helsinki</a>, Finland from the Ateljee bar of <a href="https://en.wikipedia.org/wiki/Hotel_Torni" title="en:Hotel Torni">Hotel Torni</a>.</figcaption>
</figure>

<figure class="borderless">
  <picture>
    <source srcset="/img/fork-dark.png" media="(prefers-color-scheme: dark)">
    <img src="/img/fork-light.png" alt="Screenshot of Fork.app">
  </picture>
  <figcaption>Light and dark mode images with the <code>&lt;picture&gt;</code> tag.</figcaption>
</figure>
```

--------------------------------

### Markdown Image Embedding

Source: https://mine-css.neocities.org/guide

Demonstrates various ways to embed images in Markdown documents, including direct URL linking and reference-style linking. It shows how to specify alt text and optional titles for images.

```Markdown
![Finn and Jake](http://38.media.tumblr.com/tumblr_mdo6z0KBpf1rwy00jo1_400.gif "One style is all that is needed.")
```

```Markdown
![Captain Story-Martense House](https://upload.wikimedia.org/wikipedia/commons/6/66/1996.164.1-65_IMLS_SL2.jpg "Captain Story-Martense House, Front Door, Church Avenue and East 38th Street, Flatbush, Brooklyn, ca. 1899-1909.")
```

```Markdown
Like links, images also have a footnote style syntax.

![Alt text][id]

The reference defining the URL location can be later in the document.

[id]: https://upload.wikimedia.org/wikipedia/commons/1/1f/Ries.PNG  "1550 Woodcut of 58-year-old Adam Ries, inscription: ANNO 1550 ADAM RIES SEINS ALTERS IM LVIII"
```

--------------------------------

### Markdown Horizontal Rule Syntax

Source: https://mine-css.neocities.org/guide

Illustrates different Markdown syntaxes for creating horizontal rules, which are used to visually separate content sections. Common characters include hyphens, asterisks, and underscores.

```Markdown
___

---

***
```

--------------------------------

### Override mine.css Font Size

Source: https://mine-css.neocities.org/index

Example of overriding a default CSS variable, specifically the body font size, after importing mine.css.

```css
@import 'mine.css';

:root {
  --font-size-body: 14px;
}
```

--------------------------------

### Override mine.css Font Family

Source: https://mine-css.neocities.org/index

Example of overriding the default body font family in mine.css using a CSS variable.

```css
@import 'mine.css';

:root {
  --font-body: var(--system-serif);
}
```

--------------------------------

### Define Abbreviations in Markdown

Source: https://mine-css.neocities.org/guide

Shows how to define abbreviations in Markdown using the `markdown-it-abbr` syntax. This allows for automatic expansion of terms like 'HTML' while preserving partial matches within other words.

```Markdown
This is a HTML abbreviation example.

It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.

*[HTML]: Hyper Text Markup Language
```

--------------------------------

### HTML Input Type: File Upload

Source: https://mine-css.neocities.org/guide

Explains the `<input>` element with `type="file"`, which allows users to select one or more files from their device storage. These files can then be uploaded to a server using form submission or manipulated client-side using JavaScript's File API.

```HTML
<input type="file" id="avatar" name="avatar" id="avatar" accept="image/png, image/jpeg">

```

--------------------------------

### HTML Input Type: Month and Year Selector

Source: https://mine-css.neocities.org/guide

Covers the `<input>` element with `type="month"`, designed for selecting a specific month and year. The input value is automatically formatted as 'YYYY-MM', providing a standardized and user-friendly way to capture month-year data.

```HTML
<label for="start">Month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2020-08">

```

--------------------------------

### HTML Input Type: Email

Source: https://mine-css.neocities.org/guide

Documents the `<input>` element with `type="email"`, used for entering single or multiple email addresses. It leverages built-in browser validation for email format, ensuring the entered value adheres to standard email patterns.

```HTML
<label for="email">Email:</label>
<input type="email" name="email" id="email">

```

--------------------------------

### HTML Tel Input Type

Source: https://mine-css.neocities.org/guide

Demonstrates the `<input type="tel">` element, used for entering telephone numbers. This input type does not automatically validate the format due to global variations, but can be combined with a `pattern` attribute for client-side validation.

```HTML
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<small>Format: 123-456-7890</small>
```

--------------------------------

### HTML Input Type: Secure Password Entry

Source: https://mine-css.neocities.org/guide

Explains the `<input>` element with `type="password"`, providing a secure way for users to enter passwords. The input text is obscured, typically with asterisks or dots, to prevent casual viewing and enhance security.

```HTML
<label class="block" for="pass">Password:</label>
<input placeholder="••••••••" type="password" name="pass" id="pass" minlength="8">

```

--------------------------------

### Apply Special Text Emphasis in Markdown

Source: https://mine-css.neocities.org/guide

Shows various special text emphasis options available through `markdown-it` plugins, including superscript (`^th^`), subscript (`~2~`), inserted text (`++text++`), and marked text (`==text==`). These extensions enhance standard Markdown formatting.

```Markdown
- Superscript: 19^th^ (via [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup))
- Subscript: H~2~O (via [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub))
- ++Inserted text++ (via [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins))
- ==Marked text== (via [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))
```

--------------------------------

### HTML Input Type: Image Submit Button

Source: https://mine-css.neocities.org/guide

Describes the `<input>` element with `type="image"`, which functions as a graphical submit button. Instead of displaying text, it uses an image specified by the `src` attribute, making it suitable for visually driven form submissions.

```HTML
<input class="dark-icon" type="image" id="image" alt="Login" src="/light-dark.svg">

```

--------------------------------

### HTML Input Type: Number Input with Validation

Source: https://mine-css.neocities.org/guide

Details the `<input>` element with `type="number"`, which allows users to enter numerical values. It includes built-in validation to reject non-numeric entries and may offer stepper arrows for convenient value adjustment within specified ranges.

```HTML
<label class="block" for="number">Number (10-100):</label>
<input type="number" name="number" id="number" min="10" max="100" placeholder="12">

```

--------------------------------

### HTML Input Type: Radio Button Group

Source: https://mine-css.neocities.org/guide

Describes the `<input>` element with `type="radio"`, commonly used in radio groups where only one option can be selected at a time. Radio buttons are typically rendered as small circles that are filled or highlighted when selected, indicating the user's choice.

```HTML
<div>
  <input type="radio" name="drone" value="huey" id="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" name="drone" value="dewey" id="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input disabled type="radio" name="drone" value="louie" id="louie">
  <label for="louie">Louie</label>
</div>

```

--------------------------------

### Importing and Exposing `toggleTheme` for Theme Switching (JavaScript/HTML)

Source: https://mine-css.neocities.org/index

This snippet demonstrates how to import the `toggleTheme` function from the `mine.css` module via a CDN and attach it to the global `window` object. This allows users to programmatically switch between light and dark themes, overriding system preferences.

```HTML
<script type="module">
  import { toggleTheme } from 'https://unpkg.com/bcomnes/mine.css@^4.0.0?module';

  window.toggleTheme = toggleTheme
</script>
```

--------------------------------

### Import mine.css for esbuild (JavaScript)

Source: https://mine-css.neocities.org/index

Shows how to import JavaScript modules from mine.css, specifically the `toggleTheme` function, for esbuild bundler.

```javascript
import { toggleTheme } from 'mine.css/dist/theme-switcher.js';
/* or */
import { toggleTheme } from 'mine.css';
```

--------------------------------

### Import mine.css for esbuild (CSS)

Source: https://mine-css.neocities.org/index

Demonstrates how to import mine.css specifically for esbuild bundler when using package.json `exports` resolution for CSS.

```css
@import 'mine.css/dist/mine.css';
```

--------------------------------

### Import mine.css via CDN

Source: https://mine-css.neocities.org/index

How to include mine.css in a CSS file by importing it directly from the unpkg CDN.

```css
@import url('https://unpkg.com/mine.css');
```

--------------------------------

### Including `mine.css` Layout Styles via CDN (HTML)

Source: https://mine-css.neocities.org/index

This HTML snippet provides the `<link>` tag necessary to include the `mine.css` layout stylesheet from a CDN. This stylesheet offers basic page layout and supports `safe-area` for mobile notches.

```HTML
<!-- CDN Production (specific release) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0/dist/layout.css">
```

--------------------------------

### Defining Dark Mode Styles with `@media (prefers-color-scheme: dark)` (CSS)

Source: https://mine-css.neocities.org/index

This CSS snippet shows how to apply styles based on the user's system preference for dark mode using a media query. This approach is necessary if `theme-switcher.js` is not used, requiring duplication of dark mode rules.

```CSS
@media (prefers-color-scheme: dark) {
  :root {
    /* duplicate your dark mode styles here if not using theme-switcher.js */
  }
}
```

--------------------------------

### Apply Theme Agnostic Colors in mine.css

Source: https://mine-css.neocities.org/index

Shows how to use theme-agnostic CSS variables provided by mine.css to ensure styles adapt automatically to light or dark mode.

```css
.some-class {
  color: var(--accent-foreground)
}
```

--------------------------------

### Default CSS Variables in mine.css

Source: https://mine-css.neocities.org/index

Lists the default CSS custom properties (--var) used by mine.css for font, spacing, and color settings, providing a reference for customization.

```css
:root {
  /* font family */
  --font-body: var(--system-sans);
  --font-code: var(--system-mono);

  /* font size and spacing */
  --font-size-body: 14px;
  --font-size-scale: 0.25vw;

  /* note: use unitless line heights
   https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0 */
  --line-height-body: 1.75;
  --line-height-pre: 1.45;

  /* light colors */
  --light-text: hsla(0, 0%, 7%, 1); /* #111 */
  --light-background: white;
  --light-layer-background: hsla(0, 0%, 100%, 0); /* #fff */
  --light-accent-background: hsla(0, 0%, 95%, 1); /* #f2f2f2 */
  --light-accent-midground: hsla(0, 0%, 84%, 1); /* #d6d6d6 */
  --light-accent-foreground: hsla(0, 0%, 49%, 1); /* #7d7d7d */
  --light-link-text: hsla(208, 100%, 50%, 1); /* #08f */
  --light-mark-background: hsla(60, 100%, 50%, 1); /* #ff0 */
  --light-code-text: var(--light-text);
  --light-code-background: var(--light-accent-background);
  --light-code-border: var(--light-accent-midground);

  /* dark colors */
  --dark-text: white;
  --dark-background: hsla(0, 0%, 12%, 1); /* #1f1f1f from safari */
  --dark-layer-background: var(--transparent);
  --dark-accent-background: hsla(0, 0%, 20%, 1); /* #333 */
  --dark-accent-midground: hsla(0, 0%, 30%, 1); /* #4d4d4d */
  --dark-accent-foreground: hsla(0, 0%, 60%, 1); /* #999 */
  --dark-link-text: hsl(206, 100%, 70%); /* #66bdff */
  --dark-mark-background: hsla(58, 66%, 30%, 1); /* #7f7c1a */
  --dark-code-text: var(--dark-text);
  --dark-code-background: var(--dark-accent-background);
  --dark-code-border: var(--dark-accent-midground);
}
```

--------------------------------

### mine.css Theme Agnostic Variable Definitions

Source: https://mine-css.neocities.org/index

Defines the theme-agnostic CSS variables used by mine.css, mapping them to light and dark mode specific variables based on the active theme or prefers-color-scheme media query.

```css
:root,
.light-mode {
  /* main colors */
  --text: var(--light-text);
  --background: var(--light-background);
  --layer-background: var(--light-layer-background);
  --accent-background: var(--light-accent-background);
  --accent-midground: var(--light-accent-midground);
  --accent-foreground: var(--light-accent-foreground);

  /* misc colors */
  --link-text: var(--light-link-text);
  --mark-background: var(--light-mark-background);
  --code-text: var(--light-code-text);
  --code-background: var(--light-code-background);
  --code-border: var(--light-code-border);
}

.dark-mode {
  /* main colors */
  --text: var(--dark-text);
  --background: var(--dark-background);
  --layer-background: var(--dark-layer-background);
  --accent-background: var(--dark-accent-background);
  --accent-midground: var(--dark-accent-midground);
  --accent-foreground: var(--dark-accent-foreground);

  /* misc colors */
  --link-text: var(--dark-link-text);
  --mark-background: var(--dark-mark-background);
  --code-text: var(--dark-code-text);
  --code-background: var(--dark-accent-background);
  --code-border: var(--dark-accent-midground);
}

@media (prefers-color-scheme: dark) {
  :root {
    @extend .dark-mode; /* stylelint-disable-line at-rule-no-unknown */
  }
}
```

--------------------------------

### Customize mine.css Light/Dark Mode Colors

Source: https://mine-css.neocities.org/index

Demonstrates how to override the default light and dark mode text and background colors in mine.css using CSS variables.

```css
:root{
  --light-text: red
  --light-background: blue;

  --dark-text: blue;
  --dark-background: red;
}
```

--------------------------------

### Applying Styles for Dark Mode with `theme-switcher.js` (CSS)

Source: https://mine-css.neocities.org/index

When using `theme-switcher.js`, this CSS selector targets elements specifically when the dark mode class is applied to the body and the light mode class is not. This allows for conditional styling based on the active theme.

```CSS
.dark-mode:not(.light-mode) {
  /* additional dark mode styles go here */
}
```
Tokens:
Raw