css: add styling for brand logo in the navbar.

Interesting, I added support for this into the Pelican theme at the
very beginning, but didn't actually get to styling or testing it at
all.

diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index e5d42b538ef6925ec2094761904b6179af067c8e..925a33c5ee34d2f6a33c933e0fdaf77b08b62b33 100644 (file)
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body >
 body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
   text-transform: uppercase;
 }
+body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+  width: 1.75rem;
+  height: 1.75rem;
+  vertical-align: -22.5%;
+  margin-right: 0.5rem;
+}
 body > header > nav #m-navbar-brand a {
   padding-left: 0;
   padding-right: 0;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index f10b51e0a018e14ecec845bd4f8a5fd5152c8e32..e99f9d9e869a51e481609ed6fa37c5750d9e7388 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body >
 body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
   text-transform: uppercase;
 }
+body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+  width: 1.75rem;
+  height: 1.75rem;
+  vertical-align: -22.5%;
+  margin-right: 0.5rem;
+}
 body > header > nav #m-navbar-brand a {
   padding-left: 0;
   padding-right: 0;

diff --git a/css/m-layout.css b/css/m-layout.css
index 5d22db0e0e78e0a3add323d2dd0d1382798e49e3..27931ac027fb863a4c83817bb460c4613aa103fd 100644 (file)
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -78,6 +78,14 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body >
 body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
   text-transform: var(--nav-brand-case);
 }
+body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+  /* unfortuately, with SVGs, unless the size is hardcoded like this, it will
+     cause ugly jumps during loading :( */
+  width: 1.75rem;
+  height: 1.75rem;
+  vertical-align: -22.5%;
+  margin-right: 0.5rem;
+}
 body > header > nav #m-navbar-brand a {
   padding-left: 0;
   padding-right: 0;

diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 12aa5ccc544a3f20e968918a274868f92466a07c..8e9fee55226aca236ac49443a9a1740357d9de33 100644 (file)
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body >
 body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
   text-transform: lowercase;
 }
+body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+  width: 1.75rem;
+  height: 1.75rem;
+  vertical-align: -22.5%;
+  margin-right: 0.5rem;
+}
 body > header > nav #m-navbar-brand a {
   padding-left: 0;
   padding-right: 0;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index b250c267365d4478f8370ce4b774e974d95214d8..d6f156a1a475f7c25d6bcd54062e30ab588dc15f 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body >
 body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
   text-transform: lowercase;
 }
+body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+  width: 1.75rem;
+  height: 1.75rem;
+  vertical-align: -22.5%;
+  margin-right: 0.5rem;
+}
 body > header > nav #m-navbar-brand a {
   padding-left: 0;
   padding-right: 0;

diff --git a/doc/css/page-layout-test-navbar-brand-logo.html b/doc/css/page-layout-test-navbar-brand-logo.html
new file mode 100644 (file)
index 0000000..eebca6a
--- /dev/null
+++ b/doc/css/page-layout-test-navbar-brand-logo.html
@@ -0,0 +1,74 @@
+<!--
+    This file is part of m.css.
+
+    Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz>
+
+    Permission is hereby granted, free of charge, to any person obtaining a
+    copy of this software and associated documentation files (the "Software"),
+    to deal in the Software without restriction, including without limitation
+    the rights to use, copy, modify, merge, publish, distribute, sublicense,
+    and/or sell copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included
+    in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+    DEALINGS IN THE SOFTWARE.
+-->
+
+<html>
+<head>
+  <title>Page Layout Test: navbar with a brand logo</title>
+  <meta name="css" content="
+https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sans+Pro:400,400i,600,600i&amp;subset=latin-ext
+/static/m-dark.compiled.css
+  " />
+  <meta name="template" content="passthrough" />
+  <meta name="slug" content="css/page-layout/test-navbar-brand-logo" />
+</head>
+<body>
+<header><nav id="navigation">
+  <div class="m-container">
+    <div class="m-row">
+      <a id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">
+        <img src="{static}/static/mosra.jpg" />
+        Your <span class="m-thin">Brand</span>
+      </a>
+      <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+      <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+      <div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
+        <div class="m-row">
+          <ol class="m-col-t-12 m-col-m-none">
+            <li><a href="#">More</a></li>
+            <li><a href="#">Menu</a></li>
+            <li><a href="#">Items</a></li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav></header>
+<main>
+<article>
+  <div class="m-container m-container-inflatable">
+    <div class="m-row">
+      <div class="m-col-l-10 m-push-l-1">
+        <h1>
+          <span class="m-breadcrumb">
+            <a href="{filename}/css.rst">CSS</a> &raquo;
+            <a href="{filename}/css/page-layout.rst">Page layout</a> &raquo;
+          </span>
+          Test: navbar with a brand logo
+        </h1>
+<p>Shows how a navbar with a brand logo looks.
+<a href="{filename}/css/page-layout.rst#brand-logo">Go back.</a></p>
+</article>
+</main>
+</body>
+</html>

diff --git a/doc/css/page-layout-test-navbar-subsite.html b/doc/css/page-layout-test-navbar-subsite.html
index 0d60d67cdf1e0dad77c438b7595bbf7becaedb6e..5774ced77f20f25a7a975ccf36cbf2de3f733af4 100644 (file)
--- a/doc/css/page-layout-test-navbar-subsite.html
+++ b/doc/css/page-layout-test-navbar-subsite.html
@@ -37,7 +37,10 @@ https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sa
   <div class="m-container">
     <div class="m-row">
       <span id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">
-        <a href="/">Your Brand</a>
+        <a href="/">
+          <img src="{static}/static/mosra.jpg" />
+          Your Brand
+        </a>
         <span class="m-breadcrumb">|</span>
         <a href="#" class="m-thin">subsite</a>
       </span>

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 7035779f00ebe644c705feb45e92c4c709657d2c..d547ea880707c3dc3e036cf127a59b22a3ca0151 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -249,6 +249,30 @@ items and sub-menus. Doesn't do anything on the :css:`#m-navbar-brand` element.
     page source to see how it's done here. Don't forget to try to shrink your
     browser window to see its behavior in various cases.
 
+`Brand logo`_
+-------------
+
+Add an :html:`<img>` with a logo inside the :css:`a#m-navbar-brand`. It will be
+a :css:`1.75rem` square vertically centered in the navbar. `See here how it looks <{filename}/css/page-layout-test-navbar-brand-logo.html>`__.
+
+.. code:: html
+    :hl_lines: 4 5 6 7
+    :class: m-inverted
+
+    <header><nav id="navigation">
+      <div class="m-container">
+        <div class="m-row">
+          <a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">
+            <img src="brand.png" />
+            Your Brand
+          </a>
+          <a id="m-navbar-show" href="#navigation" title="Show navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+          <a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
+          ...
+        </div>
+      </div>
+    </nav></header>
+
 `Link back to main site from a subsite`_
 ----------------------------------------
 
@@ -257,7 +281,8 @@ a forum or documentation subsite), you may want to prominently show its
 relation to the main site and link back to the main site as well as the subsite
 homepage. The markup looks like in the following snippet (note the
 :css:`#m-navbar-brand` is now a span containing two links and a "breadcrumb"
-separator), `see here how it looks <{filename}/css/page-layout-test-navbar-subsite.html>`_.
+separator), `see here how it looks <{filename}/css/page-layout-test-navbar-subsite.html>`__. The `brand logo`_ works here as well if you put it inside the
+:html:`<a>`.
 
 .. code:: html
     :hl_lines: 4 5 6 7 8