build

app/index.html

@@ -224,6 +224,11 @@
 							<use xlink:href="#mode-icon" />
 						</svg>
 					</a>
+					<a id="layoutBtn5" class="mode-btn">
+						<svg viewBox="0 0 100 100">
+							<use xlink:href="#vertical-mode-icon" />
+						</svg>
+					</a>
 					<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
 						<svg viewBox="0 0 100 100">
 							<rect x="0" y="0" width="100" height="100" />
@@ -515,17 +520,6 @@
 
 		<div class="modal-overlay"></div>
 
-		<svg  width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
-			<defs>
-				<g id="mode-icon">
-				  <rect x="0" y="0" width="28" height="47" />
-				  <rect x="36" y="0" width="28" height="47"/>
-				  <rect x="72" y="0" width="28" height="47"/>
-				  <rect x="0" y="53" width="100" height="47"/>
-				</g>
-			</defs>
-		</svg>
-
 		<div class="alerts-container" id="js-alerts-container"></div>
 		<form style="display:none;" action="https://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
 		  <input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
@@ -590,6 +584,22 @@
 			<symbol id="keyboard-icon" viewBox="0 0 24 24">
 				<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
 			</symbol>
+			<symbol id="mode-icon" width="30" height="30" viewBox="0 0 100 100">
+				<g>
+					<rect x="0" y="0" width="28" height="47" />
+					<rect x="36" y="0" width="28" height="47"/>
+					<rect x="72" y="0" width="28" height="47"/>
+					<rect x="0" y="53" width="100" height="47"/>
+				</g>
+			</symbol>
+			<symbol id="vertical-mode-icon" width="30" height="30" viewBox="0 0 100 100">
+				<g>
+					<rect x="0" y="0" width="20" height="100" />
+					<rect x="23" y="0" width="20" height="100"/>
+					<rect x="46" y="0" width="20" height="100"/>
+					<rect x="69" y="0" width="32" height="100"/>
+				</g>
+			</symbol>
 			<symbol id="loader-icon" viewBox="0 0 44 44">
 				<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 				<g fill="none" fill-rule="evenodd" stroke-width="10">

app/partials/changelog.html

@@ -7,17 +7,26 @@
 <h1>Whats new?</h1>
 
 <div class="notification">
-		<span class="notification__version">2.9.6</span>
-		<ul>
-			<li><strong>Bugfix</strong>: Fix close buttons not working in notifications and keyboard shortcuts modal.</li>
-			<li><strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard shortcuts :) Thanks <a href="https://github.com/ClassicOldSong" target="_blank">ClassicOldSong</a>.</li>
+	<span class="notification__version">2.9.7</span>
+	<ul>
+		<li><a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> added to popular CSS libraries list. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
+		<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
+		<li><strong>Dev</strong>: Bug fixes and code refactoring to make things simple. Thanks <a href="https://github.com/iamandrewluca" target="_blank">iamandrewluca</a>.</li>
 
-			<br>
-			<li><strong>🚀 Announcement</strong>: Web Maker has a <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby on Gitter</a> now - incase you need any help or just want to say Hi!</li>
-			<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
-			<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
-		</ul>
-	</div>
+		<br>
+		<li><strong>🚀 Announcement</strong>: Web Maker 3.0 is coming! Tweet out to <a href="https://twitter.com/webmakerapp/">@webmakerApp</a> or message in <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby</a> to get a sneak peek.</li>
+		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
+		<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
+	</ul>
+</div>
+
+<div class="notification">
+	<span class="notification__version">2.9.6</span>
+	<ul>
+		<li><strong>Bugfix</strong>: Fix close buttons not working in notifications and keyboard shortcuts modal.</li>
+		<li><strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard shortcuts :) Thanks <a href="https://github.com/ClassicOldSong" target="_blank">ClassicOldSong</a>.</li>
+	</ul>
+</div>
 
 <div class="notification">
 	<span class="notification__version">2.9.5</span>