Commit b181a012ece4ca0fe52601473873a8ada895963c
2014-03-17T17:51:14
Adding CSS-Tricks logo by Lea's generous request at https://twitter.com/LeaVerou/status/441696454303027201
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
diff --git a/img/logo-css-tricks.png b/img/logo-css-tricks.png
new file mode 100644
index 0000000..27cc922
Binary files /dev/null and b/img/logo-css-tricks.png differ
diff --git a/index.html b/index.html
index 70184eb..d311791 100644
--- a/index.html
+++ b/index.html
@@ -56,11 +56,15 @@
<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
index bdd21ce..c01876e 100644
--- 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;
-}
\ No newline at end of file
+.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%);
+ }
\ No newline at end of file