gallery update

_tools/templates/gallery.ejs

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1><%= title %></h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

azure-docs/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Azure Docs</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

azure-icons/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Official Azure Icon Set</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

azure-patterns/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Azure Patterns Collection</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

cloud-old/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Old MS Cloud Icon Set</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

logos/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Logos &amp; Brands</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">

other/index.html

@@ -33,30 +33,33 @@
       background-color: #e0e0e0;
     }
     h1 {
-      font-size: 2.6rem;
+      font-size: 1.8rem;
     }
     .find, .find input {
-      font-size: 1.5rem;
+      font-size: 1.1rem;
     }
     .top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
-      background-color: #aaa;
-      padding: 1rem;
+      background-color: rgb(211, 211, 211);
+      padding: 0.2rem;
+      padding-top: 0;
       box-shadow: 0px 5px 18px 3px rgba(0,0,0,0.59);
     }
     .top button {
       float: right; 
-      position: relative; 
-      top: -2rem; 
-      font-size: 1.5rem;
+      position: absolute; 
+      top: 0.2rem; 
+      right: 0.2rem;
+      font-size: 1rem;
+      border-radius: 4px;
     }
     .pngbox {
       position: absolute; 
       top: 2rem; 
       right: 1rem;
-      font-size: 1.5rem;
+      font-size: 0.9rem;
     }
     input[type="checkbox"] {
       width: 1.6em;
@@ -77,8 +80,9 @@
       display:inline;
     }
     .home {
-      font-size: 3rem;
-      text-decoration: none
+      font-size: 2rem;
+      text-decoration: none;
+      color:rgb(99, 99, 99);
     }
   </style>  
 </head>
@@ -87,10 +91,10 @@
 
   <div class="top">
     <a href=".." class="home">&#129093;</a> &nbsp; <h1>Other Icons</h1>
-    <br/><br/>
-    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span><br> </span> 
+    <br/>
+    <span class="find">Finder: <input onkeyup="search()" id="finder">&nbsp; Icons: <span id="count">...</span></span> 
     <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div>
-    <button onclick="toggleBg()">Change Background</button>
+    <button onclick="toggleBg()">Toggle Background</button>
   </div>
 
   <div class="grid">