css: make it possible to have a main/subsite link in the navbar.

diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 7a09c8434ddaa6629e7d8551e8f8943854c212af..c949230d3d741fe444cdc306f97ab6eecc86f3f4 100644 (file)
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1622,10 +1622,10 @@ body> header > nav.m-navbar-cover:target {
   background-color: #22272e;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {
@@ -1641,16 +1641,25 @@ body > header > nav a {
   line-height: 2.75rem;
   color: #ffffff;
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  text-transform: uppercase;
+body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   font-weight: 600;
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand .m-thin {
+body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+  text-transform: uppercase;
+}
+body > header > nav #m-navbar-brand a {
+  padding-left: 0;
+  padding-right: 0;
+}
+body > header > nav #m-navbar-brand .m-thin {
   font-weight: normal;
 }
+body > header > nav #m-navbar-brand .m-breadcrumb {
+  color: #747474;
+}
 body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
   content:'\2630';
 }

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index fd1a7c0a9e64bb13429ff45d8c79bd47c21732e1..4a29693662c32faf7cc8ffe63fcb3af57a17021e 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1622,10 +1622,10 @@ body> header > nav.m-navbar-cover:target {
   background-color: #22272e;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {
@@ -1641,16 +1641,25 @@ body > header > nav a {
   line-height: 2.75rem;
   color: #ffffff;
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  text-transform: uppercase;
+body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   font-weight: 600;
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand .m-thin {
+body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+  text-transform: uppercase;
+}
+body > header > nav #m-navbar-brand a {
+  padding-left: 0;
+  padding-right: 0;
+}
+body > header > nav #m-navbar-brand .m-thin {
   font-weight: normal;
 }
+body > header > nav #m-navbar-brand .m-breadcrumb {
+  color: #747474;
+}
 body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
   content:'\2630';
 }

diff --git a/css/m-layout.css b/css/m-layout.css
index 29b98a1cd3a4e31c344930d61b6a3f23c552fe45..9d10f769f4d8a58574b5da72ef42a023af69bab9 100644 (file)
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -50,10 +50,10 @@ body> header > nav.m-navbar-cover:target {
   background-color: var(--header-background-color);
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {
@@ -69,16 +69,25 @@ body > header > nav a {
   line-height: 2.75rem;
   color: var(--header-link-color);
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  text-transform: var(--nav-brand-case);
+body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   font-weight: var(--heading-font-weight);
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand .m-thin {
+body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+  text-transform: var(--nav-brand-case);
+}
+body > header > nav #m-navbar-brand a {
+  padding-left: 0;
+  padding-right: 0;
+}
+body > header > nav #m-navbar-brand .m-thin {
   font-weight: normal;
 }
+body > header > nav #m-navbar-brand .m-breadcrumb {
+  color: var(--dim-color);
+}
 body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
   content:'\2630';
 }

diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index e1dd3c2110a7f11705d2735487d945db14bf9f99..879cb38cba02878b7a97ade40989c1ce286e0038 100644 (file)
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1622,10 +1622,10 @@ body> header > nav.m-navbar-cover:target {
   background-color: #ffffff;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {
@@ -1641,16 +1641,25 @@ body > header > nav a {
   line-height: 2.75rem;
   color: #000000;
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  text-transform: lowercase;
+body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   font-weight: normal;
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand .m-thin {
+body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+  text-transform: lowercase;
+}
+body > header > nav #m-navbar-brand a {
+  padding-left: 0;
+  padding-right: 0;
+}
+body > header > nav #m-navbar-brand .m-thin {
   font-weight: normal;
 }
+body > header > nav #m-navbar-brand .m-breadcrumb {
+  color: #bdbdbd;
+}
 body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
   content:'\2630';
 }

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index e04079b1d90e9f5fdc71feaba4f083b3442c3aed..d8e6d417c378a21801b74dafc91b39042fde3f29 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1622,10 +1622,10 @@ body> header > nav.m-navbar-cover:target {
   background-color: #ffffff;
   opacity: 1;
 }
-body > header > nav.m-navbar-landing a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing #m-navbar-brand.m-navbar-brand-hidden {
   visibility: hidden;
 }
-body > header > nav.m-navbar-landing:target a#m-navbar-brand.m-navbar-brand-hidden {
+body > header > nav.m-navbar-landing:target #m-navbar-brand.m-navbar-brand-hidden {
   visibility: visible;
 }
 body > header > nav {
@@ -1641,16 +1641,25 @@ body > header > nav a {
   line-height: 2.75rem;
   color: #000000;
 }
-body > header > nav a#m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
-  text-transform: lowercase;
+body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
   font-weight: normal;
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand .m-thin {
+body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+  text-transform: lowercase;
+}
+body > header > nav #m-navbar-brand a {
+  padding-left: 0;
+  padding-right: 0;
+}
+body > header > nav #m-navbar-brand .m-thin {
   font-weight: normal;
 }
+body > header > nav #m-navbar-brand .m-breadcrumb {
+  color: #bdbdbd;
+}
 body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
   content:'\2630';
 }

diff --git a/doc/css/page-layout-test-navbar-subsite.html b/doc/css/page-layout-test-navbar-subsite.html
new file mode 100644 (file)
index 0000000..5af7a27
--- /dev/null
+++ b/doc/css/page-layout-test-navbar-subsite.html
@@ -0,0 +1,76 @@
+<!--
+    This file is part of m.css.
+
+    Copyright © 2017, 2018 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 for a subsite</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-subsite" />
+</head>
+<body>
+<header><nav id="navigation">
+  <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>
+        <span class="m-breadcrumb">|</span>
+        <a href="#" class="m-thin">subsite</a>
+      </span>
+      <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 for a subsite
+        </h1>
+<p>Shows how a navbar with a link to both the top-level site and the subsite
+mainpage looks. See the brand link on top left.
+<a href="{filename}/css/page-layout.rst#link-back-to-main-site-from-a-subsite">Go back.</a></p>
+</article>
+</main>
+</body>
+</html>

diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index b4d5905f838097716463018b60eede16e03987b6..531f78c30272430a8fab1074d319759ffd09ac05 100644 (file)
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -249,6 +249,34 @@ 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.
 
+`Link back to main site from a subsite`_
+----------------------------------------
+
+If you have a subsite with independent top navbar (for example a main site and
+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>`_.
+
+.. code:: html
+    :hl_lines: 4 5 6 7 8
+    :class: m-inverted
+
+    <header><nav id="navigation">
+      <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>
+            <span class="m-breadcrumb">|</span>
+            <a href="#" class="m-thin">subsite</a>
+          </span>
+          <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>
+
 `Footer navigation`_
 ====================