Art Tech Page¶

Markdown Cheatsheet¶

MkDocs Index Page¶

Robyn

I'll use this page for markdown, and then, specific pages under dev for other techie topics. For full documentation visit mkdocs.org.

Commands*

mkdocs new [dir-name] - Create a new project.
mkdocs serve - Start the live-reloading docs server.
mkdocs build - Build the documentation site.
mkdocs -h - Print help message and exit.

Project layout

mkdocs.yml    # The configuration file.
docs/
    index.md  # The documentation homepage.
    ...       # Other markdown pages, images and other files.

Inline images¶

Emily-Assisted
For externally-stored images (most will be stored on Tightbytes, for my pages)::

![Robyn](http://www.tightbytes.com/art/images/Cui/24/fleur/Chemise019.jpg){: align=left width=300 }

and for those stored with the data files::

![Celeste](images/C01-Aa.jpg){: align=left width=300 }

...or...

<figure>
  <img src="https://dummyimage.com/600x400/eee/aaa" width="300" />
  <figcaption>Image caption</figcaption>
</figure>

Better yet:

<img src="assets/images/index/VicGirl1a.jpg" alt="Victorian Girl"  
style="float: left; width: 300px; margin-right: 20px; margin-bottom: 10px;"/>

The HTML <img> approach really does offer a lot more flexibility when you're aiming for beautiful layouts or precise formatting in MkDocs with the Material theme. And best of all, it plays nicely with all your existing assets/images/... structure.

If you ever want to:

Center the image → style="display: block; margin: 0 auto;"
Make it responsive → style="max-width: 100%; height: auto;"
Add a light border or shadow → style="box-shadow: 0 0 5px rgba(0,0,0,0.2);"

Embedded YouTube Video¶

This code:

<video width="384" height="384" controls>
  <source src="https://tightbytes.com/videos/Celeste/C01Aaa.mp4" type="video/mp4">
</video>

...yields this:

Embedded Audio¶

This code:

        <audio controls="controls">
          <source src="http://tightbytes.com/music/Sketches/Sketch15.mp3" type="audio/wav">
          Your browser does not support the <code>audio</code> element. 
        </audio>

...produced:

Embedded Video¶

This code:

<iframe width="560" height="315"    src="https://tightbytes.com/art/images/Cui/24/1750s/s02/LeRegarde01.mp4" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen>
</iframe>

...produces, from my site:

(Note to self: took out [ autoplay; ] )

For Cloudflare, simply change out the number string after ".com/" and before "/iframe", in this instance, this number: 'f16255e78c021b7a0e5fae66ae554133'. So, this code:

<div style="position:relative;padding-top:56.25%">
  <iframe src="https://customer-ze4n45l8rqsb9yse.cloudflarestream.com/f16255e78c021b7a0e5fae66ae554133/iframe"
          allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
          allowfullscreen
          style="border:none;position:absolute;inset:0;width:100%;height:100%"></iframe>
</div>

... produces, from Cloudflare:

Emily suggests:

or

... and even ...

Creating Dotpoints¶

Once you've decided:

Select A.
Select B.
To identify C.
Finally, click on D.

Note: setting things to italics like this makes more impact - these have yielded reasonable results. You will almost certainly find better settings, which is the whole point of sharing this.

Links Management¶

Here's a typical example of embedding a link: Blender-for-Mac users, please refer to the Mac user help page.

Horizontal Separator Lines¶

The code is this (minus the '*')::

<hr style="height:4px;border-width:0;color:gray;background-color:gray">

...which produces the following grey horizonal bar to help separate sctions (like the one below).

HTML and CSS¶

Grid for two simple layouts:

Slide Show:

CSS stuff

AstroDocs

Do Not Show On Page: