From 819732997096befc3e8408002c2811b5dbb34cfa Mon Sep 17 00:00:00 2001 From: Sahat Yalkabov Date: Thu, 5 Jun 2014 14:18:51 -0400 Subject: [PATCH] Updated the API examples page --- public/css/styles.less | 44 ++++------------- views/api/index.jade | 104 ++++++++++++++++++++--------------------- 2 files changed, 61 insertions(+), 87 deletions(-) diff --git a/public/css/styles.less b/public/css/styles.less index 5cdc95c609..2ae600aa66 100644 --- a/public/css/styles.less +++ b/public/css/styles.less @@ -46,44 +46,18 @@ footer { margin-top: 20px; } +// Thumbnails +// ------------------------- + +.thumbnail { + padding: 0; + border-radius: 0; + box-shadow: 0 0 5px #ccc, inset 0 0 0 #000; +} + // Font Awesome // ------------------------- .fa { margin-right: 5px; -} - -// API Examples -// ------------------------- - -.thumb { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.thumb img { - margin-bottom: 5px; - margin-right: 5px; - opacity: 0.2; - transition: opacity 0.2s; -} - -.thumb:hover img { - opacity: 1; - box-shadow: 0 0 3px 1px @brand-primary; -} - -.facebook-caption { - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - font-size: 12px; - color: #fff; - padding: 3px; - bottom: 25px; -} - -.api-examples { - img { - padding-right: 10px; - } } \ No newline at end of file diff --git a/views/api/index.jade b/views/api/index.jade index 7eaffe770d..da45bde45b 100644 --- a/views/api/index.jade +++ b/views/api/index.jade @@ -4,89 +4,89 @@ block content h2 API Examples hr - .row.api-examples + .row .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #000') .panel-body - img(src='http://3.bp.blogspot.com/-a4mVBZ4LY-A/UvzcbDjKY7I/AAAAAAAAI-Q/V12lKmntZf8/s1600/photo_editor_by_aviary_app_icon.png', height=40) - a(href='/api/aviary') Aviary + img(src='http://i.imgur.com/2AaBlpf.png', height=40) + a(href='/api/github', style='color: #fff') GitHub .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #00abf0') .panel-body - img(src='https://pbs.twimg.com/profile_images/2409381044/exk4ubq6skod7svla5az.jpeg', height=40) - a(href='/api/clockwork') Clockwork SMS + img(src='http://i.imgur.com/EYA2FO1.png', height=40) + a(href='/api/twitter', style='color: #fff') Twitter .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #3b5998') .panel-body - img(src='http://choosenonviolence.org/sites/default/files/Facebook_logo_(square).png', height=40) - a(href='/api/facebook') Facebook + img(src='http://i.imgur.com/jiztYCH.png', height=40) + a(href='/api/facebook', style='color: #fff') Facebook .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #1cafec') .panel-body - img(src='https://playfoursquare.s3.amazonaws.com/press/logo/icon-512x512.png', height=40) - a(href='/api/foursquare') Foursquare + img(src='http://i.imgur.com/PixH9li.png', height=40) + a(href='/api/foursquare', style='color: #fff') Foursquare .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #517fa4') .panel-body - img(src='https://github.global.ssl.fastly.net/images/modules/logos_page/Octocat.png', height=40) - a(href='/api/github') GitHub + img(src='http://i.imgur.com/aRc6LUJ.png', height=40) + a(href='/api/instagram', style='color: #fff') Instagram .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #d21309') .panel-body - img(src='http://aweebitirish.com/wp-content/uploads/2014/03/instagram-app-icon-vector.png', height=40) - a(href='/api/instagram') Instagram + img(src='http://i.imgur.com/KfZY876.png', height=40) + a(href='/api/lastfm', style='color: #fff') Last.fm .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #007bb6') .panel-body - img(src='http://fontslogo.com/wp-content/uploads/2013/02/Lastfm-Logo-Font.jpg', height=40) - a(href='/api/lastfm') Last.fm + img(src='http://i.imgur.com/sYmVWAw.png', height=40) + a(href='/api/linkedin', style='color: #fff') LinkedIn .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #454442') .panel-body - img(src='http://kellycpas.com/wp-content/uploads/2014/01/linkedin.png', height=40) - a(href='/api/linkedin') LinkedIn + img(src='http://i.imgur.com/e3sjmYj.png', height=40) + a(href='/api/nyt', style='color: #fff') New York Times .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #000') .panel-body - img(src='http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Web-The-New-York-Times-alt-Metro-icon.png', height=40) - a(href='/api/nyt') New York Times + img(src='http://i.imgur.com/1xGmKBX.jpg', height=40) + a(href='/api/steam', style='color: #fff') Steam .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #3da8e5') .panel-body - img(src='http://th08.deviantart.net/fs4/200H/i/2004/242/4/7/Steam_Icon.png', height=40) - a(href='/api/steam') Steam + img(src='http://i.imgur.com/w3s2RvW.png', height=40) + a(href='/api/stripe', style='color: #fff') Stripe .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #fd0404') .panel-body - img(src='https://stripe.com/img/open-graph/logo.png', height=40) - a(href='/api/stripe') Stripe + img(src='http://i.imgur.com/mEUd6zM.png', height=40) + a(href='/api/twilio', style='color: #fff') Twilio .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #304e6c') .panel-body - img(src='http://status.twilio.com/images/logo.png', height=40) - a(href='/api/twilio') Twilio + img(src='http://i.imgur.com/rZGQShS.png', height=40) + a(href='/api/tumblr', style='color: #fff') Tumblr .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #ff6500') .panel-body - img(src='https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Tumblr_alt.png', height=40) - a(href='/api/tumblr') Tumblr + img(src='http://i.imgur.com/RGCVvyR.png', height=40) + a(href='/api/scraping', style='color: #fff') Web Scraping .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #1f93cf') .panel-body - img(src='https://g.twimg.com/Twitter_logo_blue.png', height=40) - a(href='/api/twitter') Twitter + img(src='http://i.imgur.com/90tl9C8.gif', height=40) + a(href='/api/venmo', style='color: #fff') Venmo .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #3d048b') .panel-body - img(src='http://37prime.net/link_icons/hackernews.png', height=40) - a(href='/api/scraping') Web Scraping + img(src='http://i.imgur.com/Cl6WJAu.png', height=40) + a(href='/api/yahoo', style='color: #fff') Yahoo .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #000') .panel-body - img(src='http://www.mevvy.com/wp-content/uploads/2013/09/Venmo-Logo-on-Mevvy.com_.png', height=40) - a(href='/api/venmo') Venmo + img(src='http://i.imgur.com/YcdxZ5F.png', height=40) + a(href='/api/clockwork', style='color: #fff') Clockwork SMS .col-sm-4 - .panel.panel-default + .panel.panel-default(style='background-color: #fff') .panel-body - img(src='http://i.imgur.com/Gbl1F3k.png', height=40) - a(href='/api/yahoo') Yahoo + img(src='http://i.imgur.com/npBRwMI.png', height=40) + a(href='/api/aviary', style='color: #000') Aviary