From: Vladimír Vondruš Date: Thu, 2 Nov 2017 20:21:50 +0000 (+0100) Subject: doc: writing m.css in a typewriter font is *ugly*. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=812ceb68616326367e4acce946b328d3411e8acc;p=blog.git doc: writing m.css in a typewriter font is *ugly*. --- diff --git a/doc/css.rst b/doc/css.rst index c2ad30e7..674e68d4 100644 --- a/doc/css.rst +++ b/doc/css.rst @@ -30,17 +30,17 @@ CSS .. role:: html(code) :language: html -The CSS style is the essence of ``m.css``. It makes use of HTML5 tags as much -as possible to avoid redundant classes. Contrary to other popular frameworks, -all custom CSS classes and IDs are prefixed with ``m-`` to avoid conflicts with -3rd party styles. All sizes, paddings and border widths are specified using -``rem`` units, relative to base page font size; :css:`box-sizing: border-box` -is applied to all elements by default. +The CSS style is the essence of m.css. It makes use of HTML5 tags as much as +possible to avoid redundant classes. Contrary to other popular frameworks, all +custom CSS classes and IDs are prefixed with ``m-`` to avoid conflicts with 3rd +party styles. All sizes, paddings and border widths are specified using ``rem`` +units, relative to base page font size; :css:`box-sizing: border-box` is +applied to all elements by default. `Quick start`_ ============== -To make full advantage of ``m.css``, you need just three files written in plain +To make full advantage of m.css, you need just three files written in plain CSS. Download them below or :gh:`grab the whole Git repository `: - :gh:`m-grid.css ` with optional @@ -51,7 +51,7 @@ CSS. Download them below or :gh:`grab the whole Git repository `: In addition to the above, if you want to present highlighted code snippets on your website, there's also a builtin style for `Pygments `_, -matching ``m.css`` themes: +matching m.css themes: - :gh:`pygments-dark.css `, generated from :gh:`pygments-dark.py ` diff --git a/doc/css/components.rst b/doc/css/components.rst index 727f1389..cc8f19aa 100644 --- a/doc/css/components.rst +++ b/doc/css/components.rst @@ -32,8 +32,8 @@ Components `« 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. +m.css provides a set of basic components for further improving the layout and +display of authored content. .. contents:: :class: m-block m-default @@ -41,9 +41,9 @@ and display of authored content. `Colors`_ ========= -Similarly to Bootstrap, ``m.css`` has a set of predefined colors that affect -how a certain component looks. This works on majority of components shown on -this page. The colors are: +Similarly to Bootstrap, m.css has a set of predefined colors that affect how a +certain component looks. This works on majority of components shown on this +page. The colors are: - :css:`.m-default` is a default style that doesn't grab attention - :css:`.m-primary` is meant to be used to highlight the primary element on a @@ -672,15 +672,15 @@ Then, percentage width :math:`p_i` of each image is calculated as: .. note-info:: The image width calculation is quite annoying to do manually, that's why - ``m.css`` provides a `Pelican plugin <{filename}/plugins/images.rst#image-grid>`_ + m.css provides a `Pelican plugin <{filename}/plugins/images.rst#image-grid>`_ that does the hard work for you. `Code`_ ======= -``m.css`` recognizes code highlighting compatible with `Pygments `_ +m.css recognizes code highlighting compatible with `Pygments `_ and provides additional styling for it. There's a set of builtin `pygments-*.css <{filename}/css.rst>`_ -styles that match the ``m.css`` themes. +styles that match the m.css themes. For example, code highlighted using: @@ -753,7 +753,7 @@ instead of :html:`
`:
 
 .. note-success::
 
-    To make your life easier, ``m.css`` provides a
+    To make your life easier, m.css provides a
     `Pelican plugin <{filename}/plugins/math-and-code.rst#code>`__
     that integrates Pygments code highlighting as a :abbr:`reST `
     directive.
@@ -895,7 +895,7 @@ the ``depth`` value returned on stderr can be taken as a base for the
 
 .. note-warning::
 
-    Producing SVG manually using command-line tools is no fun, so ``m.css``
+    Producing SVG manually using command-line tools is no fun, so m.css
     provides a `Pelican plugin <{filename}/plugins/math-and-code.rst#math>`__
     that integrates LaTeX math directly into your markup. Check it out!
 
diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 76135f9a..e8f3e351 100644
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -38,9 +38,8 @@ Page layout
 .. role:: sh(code)
     :language: sh
 
-Besides separate components, ``m.css`` provides a fully-fledged whole page
-layout, including top navigation bar, footer navigation, article styling and
-more.
+Besides separate components, m.css provides a fully-fledged whole page layout,
+including top navigation bar, footer navigation, article styling and more.
 
 .. contents::
     :class: m-block m-default
@@ -48,8 +47,8 @@ more.
 `Basic markup structure`_
 =========================
 
-A barebones HTML markup structure using ``m.css`` looks like below. There is
-the usual preamble, with :html:`` and a :html:`` tag
+A barebones HTML markup structure using m.css looks like below. There is the
+usual preamble, with :html:`` and a :html:`` tag
 specifying the file encoding, which should be the first thing in :html:``.
 Some browsers assume UTF-8 by default (as per the
 `HTML5 standard `__), but some
@@ -150,7 +149,7 @@ either ``#navigation`` or ``#`` to the page URL, which triggers the
 -----------------------------------------
 
 To save vertical space on small screens, it's possible to split the navbar
-contents into two (or more) columns using standard ``m.css``
+contents into two (or more) columns using standard m.css
 `grid functionality <{filename}/css/grid.rst>`_:
 
 .. code:: html
@@ -244,7 +243,7 @@ size and is padded from top and bottom by :css:`1rem` to make it feel less
 crowded. It's meant to be used for navigation, but besides that it gives you a
 complete freedom. As an example, you can populate it with four columns (which
 become two columns on narrow screens) of navigation and a fine print, using
-just the builtin ``m.css`` grid features:
+just the builtin m.css grid features:
 
 .. code:: html
 
@@ -299,11 +298,11 @@ just the builtin ``m.css`` grid features:
 
 The :html:`
` content is separated from the header and footer by
 :css:`1rem` padding, besides that there is no additional implicit styling. It's
-recommended to make use of ``m.css`` `grid features <{filename}/css/grid.rst>`_
-for content layout --- in particular, the :html:`
` element by itself
-doesn't even put any width restriction on the content.
+recommended to make use of m.css `grid features <{filename}/css/grid.rst>`_ for
+content layout --- in particular, the :html:`
` element by itself doesn't
+even put any width restriction on the content.
 
-To follow HTML5 semantic features, ``m.css`` expects you to put your main page
+To follow HTML5 semantic features, m.css expects you to put your main page
 content into an :html:`
` element, be it an article or not. Heading is
 always in an :html:`
` inside the article element, sub-sections are wrapped
 in nested :html:`
` elements with :html:`
` and further. Example
@@ -332,14 +331,14 @@ markup together with 10-column grid setup around the main content:
 ----------------
 
 Besides usual pages, which have the :html:`
` element filled with
-:html:`
` followed by a wall of content, ``m.css`` has first-class support
-for landing pages. The major component of a landing page is a cover image in
-the background, spanning the whole page width in a :css:`#m-landing-image`
-element. The image is covered by :css:`#m-landing-cover` element that blends
-the image into the background on the bottom. On top of it you have full freedom
-to put any layout you need, for example a logo, a short introductionary
-paragraph and a download button. Note that the grid setup has to only wrap the
-content "below the fold", *not* the cover image.
+:html:`
` followed by a wall of content, m.css has first-class support for
+landing pages. The major component of a landing page is a cover image in the
+background, spanning the whole page width in a :css:`#m-landing-image` element.
+The image is covered by :css:`#m-landing-cover` element that blends the image
+into the background on the bottom. On top of it you have full freedom to put
+any layout you need, for example a logo, a short introductionary paragraph and
+a download button. Note that the grid setup has to only wrap the content "below
+the fold", *not* the cover image.
 
 .. code:: html
 
@@ -440,8 +439,8 @@ This works for nested sections as well.
 `Articles`_
 -----------
 
-For blog-like articles, ``m.css`` provides styling for article header, summary
-and footer --- just put :html:`
` and :html:`