Adding CSS-Tricks logo

by Lea's generous request at https://twitter.com/LeaVerou/status/441696454303027201
PrismJS · Mar 17, 2014 · b181a01 · b181a01
1 parent 45eddb4
commit b181a01
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/img/logo-css-tricks.png b/img/logo-css-tricks.png
diff --git a/index.html b/index.html
@@ -56,11 +56,15 @@ <h1>Used By</h1>
 
 	<p>Prism is used on several websites, small and large. Some of them are:</p>
 
-	<a href="http://smashingmagazine.com" target="_blank"><img src="img/logo-smashing.png" alt="Smashing Magazine" /></a>
-	<a href="http://alistapart.com" target="_blank"><img src="img/logo-ala.png" alt="A List Apart" /></a>
-	<a href="http://webplatform.org" target="_blank"><img src="img/logo-wpd.png" alt="WebPlatform.org" /></a>
-	<a href="https://developer.mozilla.org/" target="_blank"><img src="img/logo-mdn.png" alt="Mozilla Developer Network (MDN)" style="max-height: 100px;" /></a>
-	<a href="http://typeplate.com" target="_blank"><img src="img/logo-typeplate.png" alt="Typeplate" style="max-width: 100px;" /></a>
+	<div class="used-by-logos">
+		<a href="http://smashingmagazine.com" target="_blank"><img src="img/logo-smashing.png" alt="Smashing Magazine" /></a>
+		<a href="http://webplatform.org" target="_blank"><img src="img/logo-wpd.png" alt="WebPlatform.org" /></a>
+		<a href="http://alistapart.com" target="_blank"><img src="img/logo-ala.png" alt="A List Apart" /></a>
+
+		<a href="https://developer.mozilla.org/" target="_blank"><img src="img/logo-mdn.png" alt="Mozilla Developer Network (MDN)" /></a>
+		<a href="http://css-tricks.com" target="_blank"><img src="img/logo-css-tricks.png" alt="CSS-Tricks" /></a>
+		<a href="http://typeplate.com" target="_blank"><img src="img/logo-typeplate.png" alt="Typeplate" /></a>
+	</div>
 
 	<p>It’s also used on <a href="https://brendaneich.com/2012/10/harmony-of-dreams-come-true/" target="_blank">the personal blog of Brendan Eich</a>, creator of JavaScript itself!</p>
 </section>

diff --git a/style.css b/style.css
@@ -359,8 +359,24 @@ footer {
 	font: 100px/1.6 LeaVerou;
 }
 
-#used-by img {
-	max-width: 200px;
-	margin-right: 20px;
-	vertical-align: middle;
-}
+.used-by-logos {
+	overflow: hidden;
+}
+	.used-by-logos > a {
+		float: left;
+		width: 33.33%;
+		height: 100px;
+		text-align: center;
+		background: #F5F2F0;
+		box-sizing: border-box;
+		border: 5px solid white;
+		position: relative;
+	}
+		.used-by-logos > a > img {
+			max-height: 100%;
+			max-width: 100%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}