Dash Marshall

Dolluh

Hi!

This website’s content is written in plain text. But you can format and structure the text with Markdown + YAML syntax. Additional options custom to dashmarshall.com are detailed below.

The content of the header can be modified per page with several optional YAML properties:

  • title overrides the default page title (derived from the filename) for SEO and sharing.
  • description same as the above, overriding default copy for the description.
  • featured sets the text in the upper left corner. It may be formatted with Markdown.
  • image adds a header background, scaled/cropped to fit. Also used for Facebook/Twitter.
  • video swaps an image for automatically playing video — muted. details
  • nav takes pairs of text and URLs that will override the nav links.
  • style takes a space separated list of CSS class names details

Randomization

The header’s content can also be randomized per page, by defining a header property that lists sets of properties to set at random on page load.

header:

  - image: /spaces/mss/IMG_2614.jpg
    featured: Reconfigurable coworking<br>in Brooklyn

  - image: /spaces/fla/Dash Marshall_FLA_kitchen2-3000.jpg
    featured: Building a wormhole<br>above Bond St.

  - image: /spaces/mgn/dash marshall-6624.jpg
    featured: Living with a Monolith

Text

Add {.center} to an element to center any text or inline images therein.

Body text is set in 1.2em Arial Black by default. Use any of the following options to go bigger with Berlingske Serif Heavy at 2.4em.

  • Use h1 and h2 headings
  • Emphasize paragraph content with **
  • Add style: heavy-serif to the YAML to scale up everything on a page

+++ sidebar

Sidebars are pulled out of the main flow content, appearing to the left of any following elements. To keep everything perfectly flush, add a --- dashed rule before the sidebar to neutralize any preceding spacing.

+++ sidebar nav

Suppresses default list formatting for adding a menu of links. Heading text is converted to # anchors for in-page navigation.

Layouts

Wrap content in a block demarcated with +++ and any of these options.

+++ grid two

Dolluh Dolluh


+++ grid three

Dolluh Dolluh Dolluh


+++ grid four

Dolluh Dolluh Dolluh Dolluh


+++ grid six

Dolluh Dolluh Dolluh Dolluh Dolluh Dolluh


+++ full

Dolluh

+++ item

Groups content together and adjusts default spacing such that everything inside is closer together while keeping each group evenly spaced apart.

Dolluh

An item

Dolluh

Another item


Dolluh Caption images by simply writing text below.

Images

Any images (JPG, PNG, SVG) found within the content folder are automatically copied into the website and resized as needed. The structure of any parent folders will also be carried over. Reference images with absolute paths like this:

![Alt text](/folder/file.jpg]

PDF files can be similarly linked to offer for download, just remove the ! prefix.

High-DPI Images

The pixel density of images can be increased for Apple Retina displays and similar devices by adding {.hidpi} on a line following one or more images.

Auto-sized images

Add {.auto} for any images that should always be displayed at their native size.

+++ slideshow

Dolluh Dolluh Dolluh Dolluh

This will gather up all images therein into a slideshow. Speed it up or slow it down by specifying the desired milliseconds between slides like so: +++ slideshow slideshow--3000

Videos

Link to a vimeo.com-hosted video and a player will be automatically embedded in place.

Salon Eva Michelle video

Video Backgrounds

Videos can also be placed in the header as a background. Vimeo players won’t work, link to raw MPEG-4 video instead. Vimeo provides the direct URL to hosted videos as a Plus feature, but any host will work. Encode video with H.264 if IE 9 support is a concern and be sure to remove the audio track — it will be muted anyway.

Page Styles

The style property in each page’s YAML is a way to apply CSS classes to the header and main block elements. This is useful primarily for applying color palettes but can also be used for setting type differently or any other custom CSS. Styles are prefixed with header-- and --main respectively and should be defined in /browser/styles.css.