Merge pull request #86 from WordPress/add/prototype-nav-bar

Add navigation between prototypes to the top of the page.
WordPress · Feb 17, 2017 · 68f2805 · 68f2805
2 parents 5941a0f + ef02dd7
commit 68f2805
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,10 @@
 		<link href="style.css" rel="stylesheet" type="text/css" media="all">
 	</head>
 	<body>
+		<div class="prototypes">
+			<a href="https://wordpress.github.io/gutenberg/" title="UI Prototype" class="is-current">1</a>
+			<a href="https://wordpress.github.io/gutenberg/tinymce-per-block/" title="TinyMCE per text block prototype">2</a>
+		</div>
 		<div class="block-switcher">
 			<svg width="18" height="18" class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2 11l7-7 7 7-1.4 1.4L9 6.8l-5.6 5.6"/></svg>
 			<svg width="18" height="18" class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16 6.414l-7 7-7-7 1.4-1.4 5.6 5.6 5.6-5.6"/></svg>

diff --git a/style.css b/style.css
@@ -531,3 +531,29 @@ p a {
 	position: relative;
 	left: 5px;
 }
+
+.prototypes {
+	display: flex;
+	position: absolute;
+		top: 24px;
+		left: 24px;
+}
+
+.prototypes a {
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	font-size: 12px;
+	border: 1px solid #b4b9be;
+	line-height: 28px;
+	border-radius: 50%;
+	text-decoration: none;
+	text-align: center;
+	margin-right: 8px;
+}
+
+.prototypes a.is-current {
+	background: #008ec2;
+	border-color: #008ec2;
+	color: #fff;
+}