:url: admire/math/
:cover: {filename}/static/cover-math.jpg
:summary: The fastest possible math rendering for the modern web
+:footer:
+ .. note-dim::
+
+ *Wondering what m.css is all about?* Visit the `main page <{filename}/index.rst>`_
+ to see what else it can offer to you.
:landing:
.. container:: m-row
.. class:: m-text m-text-right m-dim m-em
--- `Discrete Fourier transform § Shift theorem <https://en.wikipedia.org/wiki/Discrete_Fourier_transform#Shift_theorem>`_, Wikipedia
-
-.. note-dim::
-
- *Wondering what m.css is all about?* Visit the `main page <{filename}/index.rst>`_
- to see what else it can offer to you.
##########
:breadcrumb: {filename}/css.rst CSS
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Typography <{filename}/css/typography.rst>`_ | `CSS <{filename}/css.rst>`_ | `Page layout » <{filename}/css/page-layout.rst>`_
``m.css`` provides a set of basic components for further improving the layout
and display of authored content.
There's also :css:`.m-fullwidth` that will make your element always occupy 100%
of the parent element width. Useful for tables or images.
-
-.. note-dim::
- :class: m-text-center
-
- `« Typography <{filename}/css/typography.rst>`_ | `CSS <{filename}/css.rst>`_ | `Page layout » <{filename}/css/page-layout.rst>`_
###########
:breadcrumb: {filename}/css.rst CSS
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `CSS <{filename}/css.rst>`_ | `Typography » <{filename}/css/typography.rst>`_
.. role:: css(code)
:language: css
Other than highlighting problems, this file doesn't alter your website
appearance in any way. To save unnecessary requests and bandwidth, I recommend
that you remove the reference again when publishing the website.
-
-.. note-dim::
- :class: m-text-center
-
- `CSS <{filename}/css.rst>`_ | `Typography » <{filename}/css/typography.rst>`_
###########
:breadcrumb: {filename}/css.rst CSS
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Components <{filename}/css/components.rst>`_ | `CSS <{filename}/css.rst>`_ | `Themes » <{filename}/css/themes.rst>`_
.. role:: raw-html(raw)
:format: html
</ul>
</div>
</nav>
-
-.. note-dim::
- :class: m-text-center
-
- `« Components <{filename}/css/components.rst>`_ | `CSS <{filename}/css.rst>`_ | `Themes » <{filename}/css/themes.rst>`_
######
:breadcrumb: {filename}/css.rst CSS
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Page layout <{filename}/css/page-layout.rst>`_ | `CSS <{filename}/css.rst>`_
.. role:: css(code)
:language: css
Made a theme and want to share it with the world? I'm happy to
:gh:`incorporate your contributions <mosra/m.css/pulls/new>`.
-
-.. note-dim::
- :class: m-text-center
-
- `« Page layout <{filename}/css/page-layout.rst>`_ | `CSS <{filename}/css.rst>`_
##########
:breadcrumb: {filename}/css.rst CSS
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Grid <{filename}/css/grid.rst>`_ | `CSS <{filename}/css.rst>`_ | `Components » <{filename}/css/components.rst>`_
.. role:: css(code)
:language: css
Block elements :html:`<p>`, :html:`<ol>`, :html:`<ul>`, :html:`<dl>`,
:html:`<blockqote>`, :html:`<pre>` and :html:`<hr>` by default have :css:`1rem`
padding after, except when they are the last child, to avoid excessive spacing.
-
-.. note-dim::
- :class: m-text-center
-
- `« Grid <{filename}/css/grid.rst>`_ | `CSS <{filename}/css.rst>`_ | `Components » <{filename}/css/components.rst>`_
:css: {filename}/static/dummy.css
{filename}/static/dummy.css
:summary: um
+:header:
+ .. note-warning::
-This page should have a breadcrumb and also two additional links to
-``/static/dummy.css``.
+ This is a page header with an `internal link <{filename}/pelican.rst>`_.
+ This shouldn't be wrapped in a ``<p>``.
+:footer:
+ .. note-danger::
+
+ This is a page footer with an `internal link <{filename}/pelican.rst>`_.
+ This shouldn't be wrapped in a ``<p>``.
+
+This page should have a breadcrumb, summary in a meta tag, header and a footer
+and also two additional links to ``/static/dummy.css``.
#####
:breadcrumb: {filename}/pelican.rst Pelican
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Writing content <{filename}/pelican/writing-content.rst>`_ | `Pelican <{filename}/pelican.rst>`_
.. role:: rst(code)
:language: rst
Page content is simply put into :html:`<main>`, wrapped in an :html:`<article>`,
in the center 10 columns on large screens and spanning the full 12 columns
-elsewhere. Page title is rendered in an :html:`<h1>` and there's nothing else
-apart from the page content.
+elsewhere; the container is marked as `inflatable <{filename}/css/grid.rst#inflatable-nested-grid>`_.
+Page title is rendered in an :html:`<h1>` and there's nothing else apart from
+the page content.
`Extra CSS`_
------------
You can see the landing page in action on the `main project page <{filename}/index.rst>`_.
+`Page header and footer`_
+-------------------------
+
+It's possible to add extra :abbr:`reST <reStructuredText>`-processed content
+(such as page-specific navigation) before and after the page contents by
+putting it into :rst:`:header:` / :rst:`:footer:` fields. Compared to having
+these directly in page content, these will be put semantically outside the page
+:html:`<article>` element (so even before the :html:`<h1>` heading and after
+the last :html:`<section>` ends). The header / footer is put, equivalently to
+page content, in the center 10 columns on large screens and spanning the full
+12 columns elsewhere; the container is marked as `inflatable`_. Example of a
+page-specific footer navigation, extending the breadcrumb navigation from
+above:
+
+.. code:: rst
+
+ Steam engine
+ ############
+
+ :breadcrumb: {filename}/help.rst Help
+ {filename}/help/components.rst Components
+ :footer:
+ `« Water tank <{filename}/help/components/water-tank.rst>`_ |
+ `Components <{filename}/help/components.rst>`_ |
+ `Chimney » <{filename}/help/components/chimney.rst>`_
+
+.. block-warning:: Configuration
+
+ Similarly to landing page content, in order to have the :rst:`:header:` /
+ :rst:`:footer:` fields properly parsed, you need to explicitly list them in
+ :py:`FORMATTED_FIELDS`. Don't forget that :py:`'summary'` is already listed
+ there.
+
+ .. code:: py
+
+ FORMATTED_FIELDS += ['header', 'footer']
+
`(Social) meta tags for pages`_
-------------------------------
This is one of the main goals of this project. Please
:gh:`report a bug <mosra/m.css/issues/new>` if it's not like that.
-
-.. note-dim::
- :class: m-text-center
-
- `« Writing content <{filename}/pelican/writing-content.rst>`_ | `Pelican <{filename}/pelican.rst>`_
###############
:breadcrumb: {filename}/pelican.rst Pelican
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `Pelican <{filename}/pelican.rst>`_ | `Theme » <{filename}/pelican/theme.rst>`_
While the official `reStructuredText <http://docutils.sourceforge.net/rst.html>`_
documentation provides an extensive syntax guide, the info is scattered across
code, math, GitHub and Doxygen links and much more. Head over to the official
:abbr:`reST <reStructuredText>` documentation for
`more info about builtin roles <http://docutils.sourceforge.net/docs/ref/rst/roles.html>`_.
-
-.. note-dim::
- :class: m-text-center
-
- `Pelican <{filename}/pelican.rst>`_ | `Theme » <{filename}/pelican/theme.rst>`_
##########
:breadcrumb: {filename}/plugins.rst Pelican plugins
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« HTML sanity <{filename}/plugins/htmlsanity.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Images » <{filename}/plugins/images.rst>`_
.. role:: rst(code)
:language: rst
.. container:: m-col-m-4 m-text-center
Right column content.
-
-.. note-dim::
- :class: m-text-center
-
- `« HTML sanity <{filename}/plugins/htmlsanity.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Images » <{filename}/plugins/images.rst>`_
###########
:breadcrumb: {filename}/plugins.rst Pelican plugins
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `Pelican plugins <{filename}/plugins.rst>`_ | `Components » <{filename}/plugins/components.rst>`_
.. role:: html(code)
:language: html
that try to do similar things, but they *attempt* to fix it using BeautifulSoup
on top of the generated HTML. That's a horrendous thing to do, so why not just
prevent the horror from happening?
-
-.. note-dim::
- :class: m-text-center
-
- `Pelican plugins <{filename}/plugins.rst>`_ | `Components » <{filename}/plugins/components.rst>`_
######
:breadcrumb: {filename}/plugins.rst Pelican plugins
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Components <{filename}/plugins/components.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Math and code » <{filename}/plugins/math-and-code.rst>`_
Gives sane defaults to images and figures and provides a way to present
beautiful image galleries.
the images present on a filesystem to extract size information. It's
advised to use the builtin *absolute* ``{filename}`` or ``{attach}`` syntax
for `linking to internal content <http://docs.getpelican.com/en/stable/content.html#linking-to-internal-content>`_.
-
-.. note-dim::
- :class: m-text-center
-
- `« Components <{filename}/plugins/components.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Math and code » <{filename}/plugins/math-and-code.rst>`_
#####
:breadcrumb: {filename}/plugins.rst Pelican plugins
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Math and code <{filename}/plugins/math-and-code.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_
.. role:: py(code)
:language: py
:filesize:`{filename}/../css/m-dark.compiled.css` but only
:filesize-gz:`{filename}/../css/m-dark.compiled.css` when the server
sends it compressed.
-
-.. note-dim::
- :class: m-text-center
-
- `« Math and code <{filename}/plugins/math-and-code.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_
#############
:breadcrumb: {filename}/plugins.rst Pelican plugins
+:footer:
+ .. note-dim::
+ :class: m-text-center
+
+ `« Images <{filename}/plugins/images.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Links » <{filename}/plugins/links.rst>`_
.. role:: css(code)
:language: css
With the :cmake:`add_executable(foo bar.cpp)` CMake command you can create
an executable from a file that contains just :cpp:`int main() { return 666; }`
and nothing else.
-
-.. note-dim::
- :class: m-text-center
-
- `« Images <{filename}/plugins/images.rst>`_ | `Pelican plugins <{filename}/plugins.rst>`_ | `Links » <{filename}/plugins/links.rst>`_
{% endblock %}
{% block main %}
+{% if page.header %}
+<div class="m-container m-container-inflatable">
+ <div class="m-row">
+ <div class="m-col-l-10 m-push-l-1 m-nopadb">
+<!-- header -->
+{{ page.header|expand_links(page) -}}
+<!-- /header -->
+ </div>
+ </div>
+</div>
+{% endif %}
<article>
{% if page.landing %}
<div id="m-landing-image"{% if page.cover %} style="background-image: url('{{ page.cover|expand_link(page) }}');"{% endif %}>
</div>
</div>
</article>
+{% if page.footer %}
+<div class="m-container m-container-inflatable">
+ <div class="m-row">
+ <div class="m-col-l-10 m-push-l-1 m-nopadt">
+<!-- footer -->
+{{ page.footer|expand_links(page) -}}
+<!-- /footer -->
+ </div>
+ </div>
+</div>
+{% endif %}
{% endblock %}
#CSS_FILES = ['https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700%7CSource+Code+Pro:400,400i,600',
#'/static/m-light.css']
-FORMATTED_FIELDS = ['summary', 'landing']
+FORMATTED_FIELDS = ['summary', 'landing', 'header', 'footer']
M_HTMLSANITY_SMART_QUOTES = True
M_HTMLSANITY_HYPHENATION = True
~cjwatson / blog.git / commitdiff