Merge pull request mdn#67 from casaper/fix/layout_cookbook/breadcrumb-navigation-accessability-refinements

estelle · web-flow · commit 665b998d865c · 2022-07-27T15:09:03.000-07:00
fix(cookbook-breadcrumb-navigation): make example responsive
diff --git a/css-cookbook/breadcrumb-navigation--download.html b/css-cookbook/breadcrumb-navigation--download.html
@@ -6,7 +6,6 @@
     <meta charset="utf-8">
     <title>CSS Cookbook: Breadcrumb Navigation</title>
 
-
     <style>
         body {
             background-color: #fff;
@@ -16,25 +15,23 @@
             margin: 0;
         }
 
+        .breadcrumb {
+            padding: 0 .5rem;
+        }
+
         .breadcrumb ul {
+            display: flex;
+            flex-wrap: wrap;
             list-style: none;
             margin: 0;
             padding: 0;
-            display: flex;
         }
 
-        .breadcrumb a,
-        .breadcrumb span {
-            padding: .5em 1em;
-        }
-
-        .breadcrumb li::before {
+        .breadcrumb li:not(:last-child)::after {
+            display: inline-block;
+            margin: 0 .25rem;
             content: "→";
         }
-
-        .breadcrumb li:first-child::before {
-            content: "";
-        }
     </style>
 
 </head>
@@ -43,9 +40,10 @@
 
     <nav aria-label="Breadcrumb" class="breadcrumb">
         <ul>
-            <li><a href="">Home</a></li>
-            <li><a href="">Category</a></li>
-            <li><a href="">Sub-Category</a></li>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Category</a></li>
+            <li><a href="#">Sub Category</a></li>
+            <li><a href="#">Type</a></li>
             <li><span aria-current="page">Product</span></li>
         </ul>
     </nav>
diff --git a/css-cookbook/breadcrumb-navigation.html b/css-cookbook/breadcrumb-navigation.html
@@ -5,67 +5,67 @@
     <meta charset="utf-8">
     <title>CSS Cookbook: Breadcrumb Navigation</title>
     <link rel="stylesheet" href="styles.css">
-    <style>
-        .breadcrumb ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .breadcrumb a,
-        .breadcrumb span {
-            padding: .5em 1em;
+    <style class="editable">
+        .breadcrumb {
+            padding: 0 .5rem;
         }
 
-    </style>
-
-    <style class="editable">
         .breadcrumb ul {
             display: flex;
+            flex-wrap: wrap;
+            list-style: none;
+            margin: 0;
+            padding: 0;
         }
 
-        .breadcrumb li::before {
+        .breadcrumb li:not(:last-child)::after {
+            display: inline-block;
+            margin: 0 .25rem;
             content: "→";
         }
-
-        .breadcrumb li:first-child::before {
-            content: "";
-        }
     </style>
 </head>
 
 <body>
     <section class="preview">
         <nav aria-label="Breadcrumb" class="breadcrumb">
             <ul>
-                <li><a href="">Home</a></li>
-                <li><a href="">Category</a></li>
-                <li><a href="">Sub-Category</a></li>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Category</a></li>
+                <li><a href="#">Sub Category</a></li>
+                <li><a href="#">Type</a></li>
                 <li><span aria-current="page">Product</span></li>
             </ul>
         </nav>
     </section>
 
-    <textarea class="playable playable-css" style="height: 210px;">
+    <textarea class="playable playable-css" style="height: 300px;">
+.breadcrumb {
+    padding: 0 .5rem;
+}
+
 .breadcrumb ul {
     display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
     
-.breadcrumb li::before {
+.breadcrumb li:not(:last-child)::after {
+    display: inline-block;
+    margin: 0 .25rem;
     content: "→";
 }
-    
-.breadcrumb li:first-child::before {
-    content: "";
-}
     </textarea>
 
-    <textarea class="playable playable-html" style="height: 170px;">
+    <textarea class="playable playable-html" style="height: 160px;">
 <nav aria-label="Breadcrumb" class="breadcrumb">
     <ul>
-        <li><a href="">Home</a></li>
-        <li><a href="">Category</a></li>
-        <li><a href="">Sub-Category</a></li>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Category</a></li>
+        <li><a href="#">Sub Category</a></li>
+        <li><a href="#">Type</a></li>
         <li><span aria-current="page">Product</span></li>
     </ul>
 </nav>
