Use more specific selectors

Author: jgthms

_includes/lists/main-list.html

@@ -28,8 +28,8 @@
   <header class="menu-header">
     <a id="logo" class="menu-logo" href="{{site.url}}">
       <figure>
-        <img src="{{site.url}}/images/css-reference-icon.png" alt="CSS Reference icon">
-        <img src="{{site.url}}/images/css-reference-type.png" alt="CSS Reference type">
+        <img class="menu-logo-icon" src="{{site.url}}/images/css-reference-icon.png" alt="CSS Reference icon">
+        <img class="menu-logo-type" src="{{site.url}}/images/css-reference-type.png" alt="CSS Reference type">
       </figure>
     </a>
     <p class="menu-title">

_includes/lists/menu-list.html

@@ -1,145 +1 @@
----
-layout: single
-property_name: align-items
----
-
-<section id="align-items" class="property">
-  <header class="property-header">
-    <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a>
-      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
-      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
-    </nav>
-    <h2 class="property-name">
-      <a href="{{site.url}}/#align-items"><span>#</span>align-items</a>
-    </h2>
-    <div class="property-description">
-      <p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p>
-
-    </div>
-
-  </header>
-
-    <style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>
-
-
-    <style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style>
-
-
-    <section class="example">
-      <header class="example-header">
-        <p class="example-name">
-
-
-          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code>
-        </p>
-        <div class="example-description">
-          <p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>
-
-        </div>
-      </header>
-
-      <aside class="example-preview">
-        <div class="example-browser"><i></i><i></i><i></i></div>
-        <div class="example-output">
-          <div class="example-output-div align-items " id="align-items-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
-        </div>
-      </aside>
-          <style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style>
-        <style type="text/css">#align-items-flex-start .line { top: 0; }</style>
-    </section>
-    <section class="example">
-      <header class="example-header">
-        <p class="example-name">
-
-
-          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code>
-        </p>
-        <div class="example-description">
-          <p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>
-
-        </div>
-      </header>
-
-      <aside class="example-preview">
-        <div class="example-browser"><i></i><i></i><i></i></div>
-        <div class="example-output">
-          <div class="example-output-div align-items " id="align-items-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
-        </div>
-      </aside>
-          <style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style>
-        <style type="text/css">#align-items-flex-end .line { bottom: 0; }</style>
-    </section>
-    <section class="example">
-      <header class="example-header">
-        <p class="example-name">
-
-
-          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code>
-        </p>
-        <div class="example-description">
-          <p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>
-
-        </div>
-      </header>
-
-      <aside class="example-preview">
-        <div class="example-browser"><i></i><i></i><i></i></div>
-        <div class="example-output">
-          <div class="example-output-div align-items " id="align-items-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
-        </div>
-      </aside>
-          <style type="text/css">#align-items-center{ align-items:center;}</style>
-        <style type="text/css">#align-items-center .line { top: 50%; }</style>
-    </section>
-    <section class="example">
-      <header class="example-header">
-        <p class="example-name">
-
-
-          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code>
-        </p>
-        <div class="example-description">
-          <p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p>
-
-        </div>
-      </header>
-
-      <aside class="example-preview">
-        <div class="example-browser"><i></i><i></i><i></i></div>
-        <div class="example-output">
-          <div class="example-output-div align-items " id="align-items-baseline"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
-        </div>
-      </aside>
-          <style type="text/css">#align-items-baseline{ align-items:baseline;}</style>
-        <style type="text/css">#align-items-baseline .line { top: 55px; }</style>
-    </section>
-    <section class="example">
-      <header class="example-header">
-        <p class="example-name">
-
-
-          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code>
-        </p>
-        <div class="example-description">
-          <p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p>
-
-        </div>
-      </header>
-
-      <aside class="example-preview">
-        <div class="example-browser"><i></i><i></i><i></i></div>
-        <div class="example-output">
-          <div class="example-output-div align-items " id="align-items-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
-        </div>
-      </aside>
-          <style type="text/css">#align-items-stretch{ align-items:stretch;}</style>
-        <style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style>
-    </section>
-
-</section>
+--- layout: single property_name: align-items ---<section id="align-items" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#align-items"><span>#</span>align-items</a></h2><div class="property-description"><p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p></div></header><style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style><style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-flex-start"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style><style type="text/css">#align-items-flex-start .line { top: 0; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-flex-end"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style><style type="text/css">#align-items-flex-end .line { bottom: 0; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-center"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-center{ align-items:center;}</style><style type="text/css">#align-items-center .line { top: 50%; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code></p><div class="example-description"><p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-baseline"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-baseline{ align-items:baseline;}</style><style type="text/css">#align-items-baseline .line { top: 55px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code></p><div class="example-description"><p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p><p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div align-items" id="align-items-stretch"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div></div></aside><style type="text/css">#align-items-stretch{ align-items:stretch;}</style><style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style></section></section>