Add fullheight hero with navbar documentation

diff --git a/docs/_includes/examples/navbar-basic.html b/docs/_includes/examples/navbar-basic.html
new file mode 100644 (file)
index 0000000..97261e4
--- /dev/null
+++ b/docs/_includes/examples/navbar-basic.html
@@ -0,0 +1,23 @@
+<nav class="navbar">
+  <div class="container">
+    <div id="navMenu" class="navbar-menu">
+      <div class="navbar-start">
+        <a class="navbar-item">
+          Home
+        </a>
+        <a class="navbar-item">
+          Documentation
+        </a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-dark">Github</a>
+            <a class="button is-link">Download</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
\ No newline at end of file

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 6f48d20e7604b67a43d0835c1441184e85ccc25f..e9abdc79af22001023af2cea4dfba6ab316de63d 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -10131,12 +10131,12 @@ label.panel-block:hover {
   }
 }
 
-.hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body {
+.hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body {
   align-items: center;
   display: flex;
 }
 
-.hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container {
+.hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container {
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -10149,6 +10149,10 @@ label.panel-block:hover {
   min-height: 100vh;
 }
 
+.hero.is-fullheight-with-navbar {
+  min-height: calc(100vh - 3.25rem);
+}
+
 .hero-video {
   overflow: hidden;
 }

diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index 8c363d21766689b27711a0bde54c8993d809a0b8..16552bfd726f8400882ef1484b4814b80ac15c50 100644 (file)
--- a/docs/documentation/layout/hero.html
+++ b/docs/documentation/layout/hero.html
@@ -13,7 +13,7 @@ breadcrumb:
 meta:
   colors: true
   sizes: true
-  variables: true
+  variables: false
 ---
 
 <div class="content">
@@ -76,9 +76,9 @@ meta:
 <section class="section">
   <div class="container">
     {% include elements/anchor.html name="Colors" %}
-    <h4 class="subtitle">
-        As with buttons, you can choose one of the <strong>7 different colors</strong>:
-    </h4>
+    <div class="content">
+      As with buttons, you can choose one of the <strong>7 different colors</strong>:
+    </div>
   </div>
 </section>
 
@@ -207,9 +207,9 @@ meta:
 <section class="section">
   <div class="container">
     {% include elements/anchor.html name="Gradients" %}
-    <h4 class="subtitle">
+    <div class="content">
       By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
-    </h4>
+    </div>
   </div>
 </section>
 
@@ -331,9 +331,22 @@ meta:
 <section class="section">
   <div class="container">
     {% include elements/anchor.html name="Sizes" %}
-    <h4 class="subtitle">
-      You can have even more imposing banners by using one of <strong>3 different sizes</strong>
-    </h4>
+    <div class="content">
+      <p>
+        You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
+      </p>
+      <ul>
+        <li>
+          medium
+        </li>
+        <li>
+          large
+        </li>
+        <li>
+          fullheight
+        </li>
+      </ul>
+    </div>
   </div>
 </section>
 
@@ -403,10 +416,10 @@ meta:
       <div class="hero-body">
         <div class="container">
           <p class="title">
-            Full Height title
+            Fullheight title
           </p>
           <p class="subtitle">
-            Full Height subtitle
+            Fullheight subtitle
           </p>
         </div>
       </div>
@@ -418,10 +431,10 @@ meta:
   <div class="hero-body">
     <div class="container">
       <h1 class="title">
-        Full Height title
+        Fullheight title
       </h1>
       <h2 class="subtitle">
-        Full Height subtitle
+        Fullheight subtitle
       </h2>
     </div>
   </div>
@@ -429,12 +442,56 @@ meta:
 {% endhighlight %}
 </section>
 
+<!-- Fullheight with navbar -->
+<section class="section">
+  <div class="container">
+    {% include elements/anchor.html name="Fullheight with navbar" %}
+    {% include elements/new-tag.html version="0.7.2" %}
+    <div class="content">
+      <p>
+        If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
+      </p>
+    </div>
+  </div>
+</section>
+
+  <div class="bd-example is-fullwidth">
+    {% include examples/navbar-basic.html %}
+    <section class="hero is-success is-fullheight-with-navbar">
+      <div class="hero-body">
+        <div class="container">
+          <p class="title">
+            Fullheight title
+          </p>
+          <p class="subtitle">
+            Fullheight subtitle
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+{% highlight html %}
+<section class="hero is-success is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+        Fullheight title
+      </h1>
+      <h2 class="subtitle">
+        Fullheight subtitle
+      </h2>
+    </div>
+  </div>
+</section>
+{% endhighlight %}
+
+<!-- Fullheight with 3 parts -->
 <section class="section">
   <div class="container">
-    {% include elements/anchor.html name="Full height hero" %}
-    <h4 class="subtitle">And vertically centered</h4>
+    {% include elements/anchor.html name="Fullheight hero in 3 parts" %}
     <div class="content">
-      <p>You can split the hero in <strong>3 vertical parts</strong>:</p>
+      <p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
       <ul>
         <li>
           <code>hero</code>
@@ -679,4 +736,4 @@ meta:
 
 {% include layout/main-open.html %}
 
-{% include elements/variables.html type='component' %}
+{% include elements/variables.html type='component' hide_content=true %}