.. |o| replace:: ·
:url: admire/math/
-:cover: {filename}/static/cover-math.jpg
+:cover: {static}/static/cover-math.jpg
:summary: The fastest possible math rendering for the modern web
:footer:
.. note-dim::
the code and console Pygments style, all combined in one file:
- :gh:`m-dark.compiled.css <mosra/m.css$master/css/m-dark.compiled.css>`
- (:filesize:`{filename}/../css/m-dark.compiled.css`,
- :filesize-gz:`{filename}/../css/m-dark.compiled.css` compressed)
+ (:filesize:`{static}/../css/m-dark.compiled.css`,
+ :filesize-gz:`{static}/../css/m-dark.compiled.css` compressed)
- :gh:`m-light.compiled.css <mosra/m.css$master/css/m-light.compiled.css>`
- (:filesize:`{filename}/../css/m-light.compiled.css`,
- :filesize-gz:`{filename}/../css/m-light.compiled.css` compressed)
+ (:filesize:`{static}/../css/m-light.compiled.css`,
+ :filesize-gz:`{static}/../css/m-light.compiled.css` compressed)
I recommend using the original files for development and switching to the
compiled versions when publishing the website.
.. raw:: html
<div class="m-block m-badge m-primary">
- <img src="{filename}/static/mosra.jpg" alt="The Author" />
+ <img src="{static}/static/mosra.jpg" alt="The Author" />
<h3>About the author</h3>
<p><a href="#">The Author</a> is lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean id elit posuere, consectetur magna congue,
</div>
<div class="m-block m-badge m-dim">
- <img src="{filename}/static/mosra.jpg" alt="The Author" />
+ <img src="{static}/static/mosra.jpg" alt="The Author" />
<h3>About the author</h3>
<p><a href="#">The Author</a> is lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
.. raw:: html
- <img src="{filename}/static/flowers-small.jpg" class="m-image" />
+ <img src="{static}/static/flowers-small.jpg" class="m-image" />
Image, centered, link:
.. raw:: html
<div class="m-image">
- <a href="http://blog.mosra.cz/"><img src="{filename}/static/flowers-small.jpg" /></a>
+ <a href="http://blog.mosra.cz/"><img src="{static}/static/flowers-small.jpg" /></a>
</div>
Image, fullwidth (yes, it should be pixelated):
.. raw:: html
- <img src="{filename}/static/flowers-small.jpg" class="m-image m-fullwidth" />
+ <img src="{static}/static/flowers-small.jpg" class="m-image m-fullwidth" />
Image, fullwidth, link (yes, it should be pixelated):
.. raw:: html
<div class="m-image m-fullwidth">
- <a href="http://blog.mosra.cz/"><img src="{filename}/static/flowers-small.jpg" /></a>
+ <a href="http://blog.mosra.cz/"><img src="{static}/static/flowers-small.jpg" /></a>
</div>
SVG image:
.. raw:: html
<figure class="m-figure">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>A Ship</figcaption>
<span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
</figure>
.. raw:: html
<figure class="m-figure m-flat">
- <a href="http://blog.mosra.cz/"><img src="{filename}/static/ship-small.jpg" /></a>
+ <a href="http://blog.mosra.cz/"><img src="{static}/static/ship-small.jpg" /></a>
<figcaption>A Ship</figcaption>
<span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
</figure>
.. raw:: html
<figure class="m-figure m-fullwidth">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>A Ship</figcaption>
</figure>
.. raw:: html
<figure class="m-figure m-fullwidth">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
<span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
.. raw:: html
<figure class="m-figure">
- <img src="{filename}/static/ship.jpg" />
+ <img src="{static}/static/ship.jpg" />
<figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
<span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
.. raw:: html
<figure class="m-figure">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
<span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
.. raw:: html
<figure class="m-figure">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
</figure>
<div class="m-row">
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-default">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Default figure</figcaption>
<span>Text.</span>
</figure>
</div>
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-primary">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Primary figure</figcaption>
<span>Text.</span>
</figure>
</div>
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-success">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Success figure</figcaption>
<span>Text.</span>
</figure>
</div>
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-warning">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Warning figure</figcaption>
<span>Text.</span>
</figure>
<div class="m-row">
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-danger">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Danger figure</figcaption>
<span>Text.</span>
</figure>
</div>
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-info">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Info figure</figcaption>
<span>Text.</span>
</figure>
</div>
<div class="m-col-m-3 m-col-s-6">
<figure class="m-figure m-dim">
- <img src="{filename}/static/ship-small.jpg" />
+ <img src="{static}/static/ship-small.jpg" />
<figcaption>Dim figure</figcaption>
<span>Text.</span>
</figure>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 69.127%">
- <img src="{filename}/static/ship.jpg" />
+ <img src="{static}/static/ship.jpg" />
<figcaption>F9.0, 1/250 s, ISO 100</figcaption>
</figure>
<figure style="width: 30.873%">
- <img src="{filename}/static/flowers.jpg" />
+ <img src="{static}/static/flowers.jpg" />
<figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
</figure>
</div>
<div class="m-imagegrid">
<div>
<figure style="width: 30.873%">
- <a href="{filename}/static/flowers.jpg">
- <img src="{filename}/static/flowers.jpg" />
+ <a href="{static}/static/flowers.jpg">
+ <img src="{static}/static/flowers.jpg" />
<div></div>
</a>
</figure>
<figure style="width: 69.127%">
- <a href="{filename}/static/ship.jpg">
- <img src="{filename}/static/ship.jpg" />
+ <a href="{static}/static/ship.jpg">
+ <img src="{static}/static/ship.jpg" />
<div></div>
</a>
</figure>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 69.127%">
- <img src="{filename}/static/ship.jpg" />
+ <img src="{static}/static/ship.jpg" />
<div></div>
</figure>
<figure style="width: 30.873%">
- <img src="{filename}/static/flowers.jpg" />
+ <img src="{static}/static/flowers.jpg" />
<div></div>
</figure>
</div>
.. raw:: html
<div class="m-block m-badge m-success">
- <img src="{filename}/static/mosra.jpg" alt="The Author" />
+ <img src="{static}/static/mosra.jpg" alt="The Author" />
<h3>About the author</h3>
<p><a href="http://blog.mosra.cz">The Author</a> is not really
smiling at you from this avatar. Sorry about that. He knows that and
.. raw:: html
- <img src="{filename}/static/flowers-small.jpg" alt="Flowers" class="m-image" />
+ <img src="{static}/static/flowers-small.jpg" alt="Flowers" class="m-image" />
To make the image clickable, wrap the :html:`<a>` tag in an additional
:html:`<div>` and put the :css:`.m-image` class on the :html:`<div>` element
.. raw:: html
<div class="m-image">
- <a href="{filename}/static/flowers.jpg"><img src="{filename}/static/flowers-small.jpg" /></a>
+ <a href="{static}/static/flowers.jpg"><img src="{static}/static/flowers-small.jpg" /></a>
</div>
.. note-info::
.. raw:: html
<figure class="m-figure">
- <img src="{filename}/static/ship-small.jpg" alt="Ship" />
+ <img src="{static}/static/ship-small.jpg" alt="Ship" />
<figcaption>A Ship</figcaption>
<span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
</figure>
<div class="m-imagegrid m-container-inflate">
<div>
<figure style="width: 69.127%">
- <a href="{filename}/static/ship.jpg">
- <img src="{filename}/static/ship.jpg" />
+ <a href="{static}/static/ship.jpg">
+ <img src="{static}/static/ship.jpg" />
<figcaption>F9.0, 1/250 s, ISO 100</figcaption>
</a>
</figure>
<figure style="width: 30.873%">
- <a href="{filename}/static/flowers.jpg">
- <img src="{filename}/static/flowers.jpg" />
+ <a href="{static}/static/flowers.jpg">
+ <img src="{static}/static/flowers.jpg" />
<figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
</a>
</figure>
</div>
<div>
<figure style="width: 30.873%">
- <a href="{filename}/static/flowers.jpg">
- <img src="{filename}/static/flowers.jpg" />
+ <a href="{static}/static/flowers.jpg">
+ <img src="{static}/static/flowers.jpg" />
<figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
</a>
</figure>
<figure style="width: 69.127%">
- <a href="{filename}/static/ship.jpg">
- <img src="{filename}/static/ship.jpg" />
+ <a href="{static}/static/ship.jpg">
+ <img src="{static}/static/ship.jpg" />
<figcaption>F9.0, 1/250 s, ISO 100</figcaption>
</a>
</figure>
:save_as: doxygen/test/index.html
:breadcrumb: {filename}/doxygen.rst Doxygen theme
-:css: {filename}/static/m-dark.doxygen.compiled.css
+:css: {static}/static/m-dark.doxygen.compiled.css
Lists
=====
- Search for symbols using any prefix
- Fully controllable by keyboard
-.. image:: {filename}/static/opengl-search.png
+.. image:: {static}/static/opengl-search.png
.. note-success::
An Author
#########
-:image: {filename}/static/mosra.jpg
+:image: {static}/static/mosra.jpg
:badge: Info badge for `An Author <{author}an-author>`_ provided by the
`Metadata <{filename}/plugins/metadata.rst>`_ plugin.
Examples
########
-:image: {filename}/static/site.jpg
+:image: {static}/static/site.jpg
:badge: Info badge for the `Examples <{category}examples>`_ category provided
by the `Metadata <{filename}/plugins/metadata.rst>`_ plugin.
.. role:: language-la
:class: language-la
-:cover: {filename}/static/ship.jpg
+:cover: {static}/static/ship.jpg
:date: 2017-12-06 1:00
:category: Examples
:tags: Jumbo, Special
.. role:: language-la
:class: language-la
-:cover: {filename}/static/ship.jpg
+:cover: {static}/static/ship.jpg
:date: 2017-09-08 1:00
:category: Examples
:tags: Jumbo
:save_as: index.html
:url:
-:cover: {filename}/static/cover.jpg
+:cover: {static}/static/cover.jpg
:summary: A no-nonsense, no-JavaScript CSS framework and Pelican theme for
content-oriented websites
:hide_navbar_brand: True
Get the essence
- | :filesize-gz:`{filename}/../css/m-dark.compiled.css` of gzipped CSS,
+ | :filesize-gz:`{static}/../css/m-dark.compiled.css` of gzipped CSS,
| licensed under MIT
.. container:: m-row m-container-inflate
.. block-success:: *Pure* CSS and HTML
- Everything you need is :filesize-gz:`{filename}/../css/m-dark.compiled.css`
+ Everything you need is :filesize-gz:`{static}/../css/m-dark.compiled.css`
of compressed CSS. This framework has exactly 0 bytes of JavaScript
because *nobody actually needs it*. Even for responsive websites.
########
:css:
- {filename}/static/webgl.css
- {filename}/static/canvas-controls.css
+ {static}/static/webgl.css
+ {static}/static/canvas-controls.css
:js:
- {filename}/static/showcase.js
+ {static}/static/showcase.js
:html_header:
<script>
\ function handleDrop(event) {
:save_as: index.html
:url:
- :cover: {filename}/static/cover.jpg
+ :cover: {static}/static/cover.jpg
:hide_navbar_brand: True
:landing:
.. container:: m-row
:save_as: index.html
:url:
- :cover: {filename}/static/cover.jpg
+ :cover: {static}/static/cover.jpg
:summary: This is the brand you need.
.. block-success:: Recommended sizes for cover images
An article --- a jumbo one
##########################
- :cover: {filename}/static/ship.jpg
+ :cover: {static}/static/ship.jpg
:summary: Article summary paragraph.
Article contents.
An article without explicit summary
###################################
- :cover: {filename}/static/ship.jpg
+ :cover: {static}/static/ship.jpg
:hide_summary: True
Implicit article summary paragraph.
Info block content.
- .. figure:: {filename}/static/ship-small.jpg
+ .. figure:: {static}/static/ship-small.jpg
:alt: Image alt text
Figure title
:date: 2017-06-22
:legal: This article is released under `CC0 {filename}/license.rst`_.
- :cover: {filename}/img/article-cover.jpg
+ :cover: {static}/img/article-cover.jpg
`SITEURL formatting`_
---------------------
Image with link:
-.. image:: {filename}/static/ship-small.jpg
- :target: {filename}/static/ship.jpg
+.. image:: {static}/static/ship-small.jpg
+ :target: {static}/static/ship.jpg
Image, class on top, custom alt:
-.. image:: {filename}/static/ship.jpg
+.. image:: {static}/static/ship.jpg
:class: m-fullwidth
:alt: A Ship
Image with link, class on top:
-.. image:: {filename}/static/ship.jpg
- :target: {filename}/static/ship.jpg
+.. image:: {static}/static/ship.jpg
+ :target: {static}/static/ship.jpg
:class: m-fullwidth
Figure with link and only a caption:
-.. figure:: {filename}/static/ship-small.jpg
- :target: {filename}/static/ship.jpg
+.. figure:: {static}/static/ship-small.jpg
+ :target: {static}/static/ship.jpg
A Ship
Figure with link and class on top:
-.. figure:: {filename}/static/ship-small.jpg
- :target: {filename}/static/ship.jpg
+.. figure:: {static}/static/ship-small.jpg
+ :target: {static}/static/ship.jpg
:figclass: m-fullwidth
A Ship
.. image-grid::
- {filename}/static/ship.jpg
- {filename}/static/flowers.jpg
+ {static}/static/ship.jpg
+ {static}/static/flowers.jpg
Image grid, inflated:
.. image-grid::
- {filename}/static/flowers.jpg
- {filename}/static/ship.jpg
+ {static}/static/flowers.jpg
+ {static}/static/ship.jpg
.. container:: m-col-m-6
- .. image:: {filename}/static/flowers-small.jpg
- :target: {filename}/static/flowers.jpg
+ .. image:: {static}/static/flowers-small.jpg
+ :target: {static}/static/flowers.jpg
.. container:: m-col-m-6
- .. figure:: {filename}/static/ship-small.jpg
+ .. figure:: {static}/static/ship-small.jpg
A Ship
.. image-grid::
- {filename}/ship.jpg
- {filename}/flowers.jpg
+ {static}/ship.jpg
+ {static}/flowers.jpg
- {filename}/flowers.jpg
- {filename}/ship.jpg
+ {static}/flowers.jpg
+ {static}/ship.jpg
.. image-grid::
- {filename}/static/ship.jpg
- {filename}/static/flowers.jpg
+ {static}/static/ship.jpg
+ {static}/static/flowers.jpg
- {filename}/static/flowers.jpg
- {filename}/static/ship.jpg
+ {static}/static/flowers.jpg
+ {static}/static/ship.jpg
.. note-warning::
Unlike with the image and figure directives above, Pelican *needs* to have
the images present on a filesystem to extract size information. It's
- advised to use the builtin *absolute* ``{filename}`` or ``{attach}`` syntax
+ advised to use the builtin *absolute* ``{static}`` or ``{attach}`` syntax
for `linking to internal content <http://docs.getpelican.com/en/stable/content.html#linking-to-internal-content>`_.
:class: m-text m-success
The compiled ``m-dark.compiled.css`` CSS file has
- :filesize:`{filename}/../css/m-dark.compiled.css` but only
- :filesize-yay:`{filename}/../css/m-dark.compiled.css` when the server
+ :filesize:`{static}/../css/m-dark.compiled.css` but only
+ :filesize-yay:`{static}/../css/m-dark.compiled.css` when the server
sends it compressed.
.. role:: filesize-yay(filesize-gz)
:class: m-text m-success
The compiled ``m-dark.compiled.css`` CSS file has
- :filesize:`{filename}/../css/m-dark.compiled.css` but only
- :filesize-yay:`{filename}/../css/m-dark.compiled.css` when the server
+ :filesize:`{static}/../css/m-dark.compiled.css` but only
+ :filesize-yay:`{static}/../css/m-dark.compiled.css` when the server
sends it compressed.
`Aliases`_
:twitter: @se7en
:twitter_id: 7777777
- :image: {filename}/authors/john-doe.jpg
+ :image: {static}/authors/john-doe.jpg
:description: I'm not that serial killer.
:summary: I'm really not that serial killer.
:badge: No, really, don't confuse me with that guy.
Posts by our users
##################
- :image: {filename}/categories/guest-posts.jpg
+ :image: {static}/categories/guest-posts.jpg
:description: User stories and product reviews
:summary: Stories of our users and honest reviews of our product.
:badge: This article is a guest post. Want to share your story as well? Head
Image:
-.. image:: {filename}/ship.jpg
+.. image:: {static}/ship.jpg
Image with link:
-.. image:: {filename}/ship.jpg
- :target: {filename}/ship.jpg
+.. image:: {static}/ship.jpg
+ :target: {static}/ship.jpg
Image, class on top, custom alt:
-.. image:: {filename}/ship.jpg
+.. image:: {static}/ship.jpg
:class: m-fullwidth
:alt: A Ship
Image with link, class on top:
-.. image:: {filename}/ship.jpg
- :target: {filename}/ship.jpg
+.. image:: {static}/ship.jpg
+ :target: {static}/ship.jpg
:class: m-fullwidth
Figure:
-.. figure:: {filename}/ship.jpg
+.. figure:: {static}/ship.jpg
A Ship
Figure with link and only a caption:
-.. figure:: {filename}/ship.jpg
- :target: {filename}/ship.jpg
+.. figure:: {static}/ship.jpg
+ :target: {static}/ship.jpg
A Ship
Figure with link and class on top:
-.. figure:: {filename}/ship.jpg
- :target: {filename}/ship.jpg
+.. figure:: {static}/ship.jpg
+ :target: {static}/ship.jpg
:figclass: m-fullwidth
A Ship
.. image-grid::
- {filename}/ship.jpg
- {filename}/flowers.jpg
+ {static}/ship.jpg
+ {static}/flowers.jpg
- {filename}/flowers.jpg
- {filename}/ship.jpg
+ {static}/flowers.jpg
+ {static}/ship.jpg
Image grid with a PNG file, JPEG with sparse EXIF data, JPEG with no EXIF data
and long exposure (>1 second):
.. image-grid::
- {filename}/tiny.png
- {filename}/sparseexif.jpg
- {filename}/noexif.jpg
- {filename}/longexposure.jpg
+ {static}/tiny.png
+ {static}/sparseexif.jpg
+ {static}/noexif.jpg
+ {static}/longexposure.jpg
:twitter: @czmosra
:twitter_id: 1537427036
-:image: {filename}/mosra.jpg
+:image: {static}/mosra.jpg
:description: Author description, used for a <meta name="description"> tag.
:summary: Author summary, used for the social <meta> tags.
:badge: Contents of the badge, displayed at article bottom.
A category name, displayed on top of the category badge/details
###############################################################
-:image: {filename}/category.jpg
+:image: {static}/category.jpg
:description: Category description, used for a <meta name="description"> tag.
:summary: Category summary, used for the social <meta> tags.
:badge: Contents of the badge, displayed at article bottom.
:date: 2017-12-08
:category: Another category
:tags: Fourth, First, Third
-:cover: {filename}/ship.jpg
+:cover: {static}/ship.jpg
:summary: A summary.
On multiple
lines.
A page
######
-:cover: {filename}/ship.jpg
+:cover: {static}/ship.jpg
:header: This is visible on the top and doesn't break the layout.
:footer: This is visible on the bottom.
A page
######
-:cover: {filename}/ship.jpg
+:cover: {static}/ship.jpg
:hide_navbar_brand: True
:landing:
.. container:: m-row
A page title that displays only in title
########################################
-:cover: {filename}/ship.jpg
+:cover: {static}/ship.jpg
:header: This shouldn't be visible anywhere.
:footer: This is visible on the bottom.
:landing: