├── LICENSE ├── css ├── base.css ├── base.scss ├── fb.css ├── fb.scss ├── grid.css ├── plus.css ├── plus.scss └── reset.css ├── images ├── 10kapart.png ├── facebook.png ├── googleplus.png ├── loading.gif ├── play.png ├── rdio_expanded.png ├── rdio_item.png └── yammer.png ├── index.html ├── js ├── config.js ├── ext-core.js ├── jsonp.js └── preview.js └── readme.rest /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Embed.ly, Inc. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, 5 | are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, 8 | this list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright 11 | notice, this list of conditions and the following disclaimer in the 12 | documentation and/or other materials provided with the distribution. 13 | 14 | 3. Neither the name of Embed.ly nor the names of its contributors may be used 15 | to endorse or promote products derived from this software without 16 | specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 600px; 3 | margin: 50px auto; } 4 | 5 | body { 6 | background-color: #fff; } 7 | 8 | div.preview_form { 9 | margin: 1em 0; } 10 | 11 | #link { 12 | width: 490px; 13 | margin: 10px auto; } 14 | #link textarea { 15 | width: 400px; 16 | padding: 5px; 17 | font-size: 1.1em; } 18 | 19 | #loading { 20 | background-image: url(../images/loading.gif); 21 | width: 200px; 22 | height: 15px; 23 | margin: 50px auto; 24 | background-repeat: no-repeat; 25 | display: none; } 26 | 27 | #images { 28 | position: absolute; 29 | width: 300em; 30 | margin: 0px; 31 | padding: 0px; 32 | left: 0px; } 33 | #images li { 34 | list-style: none; 35 | float: left; 36 | margin: 0px; 37 | padding: 0px; } 38 | #images img { 39 | width: 100px; } 40 | 41 | #left, #right { 42 | display: block; 43 | position: absolute; 44 | top: 0; } 45 | 46 | #left { 47 | left: 0px; } 48 | 49 | #right { 50 | right: 0; } 51 | 52 | #display { 53 | width: 490px; 54 | margin: 10px auto; 55 | display: none; } 56 | #display .items { 57 | position: relative; 58 | overflow: hidden; 59 | height: 100px; 60 | padding: 0px; 61 | margin: -19px 0 0 0px; 62 | width: 100px; } 63 | #display .controls { 64 | margin: 0 0 3px 0; 65 | position: relative; 66 | height: 16px; 67 | z-index: 10000; } 68 | #display .wrap { 69 | width: 100px; 70 | float: left; 71 | margin: 0 10px 0 0; } 72 | #display input[type="text"] { 73 | width: 400px; 74 | padding: 3px; 75 | border: 1px solid #999; } 76 | #display textarea { 77 | border: 1px solid #999; 78 | width: 400px; 79 | height: 100px; 80 | padding: 3px; } 81 | 82 | #attributes { 83 | width: 400px; 84 | margin: 0 0 0 110px; } 85 | #attributes p { 86 | line-height: 1.2em; } 87 | #attributes a { 88 | color: #111; 89 | text-decoration: none; } 90 | #attributes a:hover { 91 | background-color: #FF9; } 92 | 93 | img.favicon, .favicon img { 94 | width: 16px; 95 | height: 16px; } 96 | 97 | /* 98 | Feed Styles 99 | */ 100 | #feed { 101 | background-color: white; 102 | padding: 0 10px; } 103 | 104 | .item { 105 | padding: 10px 0 0 0; 106 | margin: 0 0 10px 0; 107 | border-top: 1px solid #DDD; } 108 | .item.first { 109 | border-top: none; } 110 | 111 | .container_12 .no_thumbnail { 112 | float: left; 113 | border-right: 2px solid #DDD; 114 | height: 75px; } 115 | .container_12 .thumbnail { 116 | margin: 5px 10px 10px 0; 117 | width: 105px; } 118 | .container_12 .thumbnail a { 119 | display: table-cell; 120 | width: 100px; 121 | height: 75px; 122 | overflow: hidden; 123 | background-color: black; 124 | vertical-align: middle; 125 | position: relative; 126 | text-align: center; } 127 | .container_12 .thumbnail img { 128 | max-width: 100px; 129 | vertical-align: middle; } 130 | 131 | .video .player_overlay, .rich .player_overlay { 132 | background-image: url(../images/play.png); 133 | width: 25px; 134 | height: 25px; 135 | position: absolute; 136 | left: 3px; 137 | bottom: 3px; } 138 | 139 | .info { 140 | font-size: 12px; 141 | line-height: 15px; 142 | position: relative; } 143 | .info a { 144 | display: block; 145 | text-decoration: none; } 146 | .info a:hover { 147 | text-decoration: underline; } 148 | .info a.title { 149 | margin: 5px 0 0; 150 | max-width: 400px; } 151 | .info a.provider { 152 | font-size: 11px; } 153 | .info p { 154 | color: #666; 155 | margin: 5px 0; } 156 | .info .close { 157 | position: absolute; 158 | top: 3px; 159 | right: 3px; 160 | font-size: 13px; 161 | display: none; } 162 | -------------------------------------------------------------------------------- /css/base.scss: -------------------------------------------------------------------------------- 1 | #container { 2 | width:600px; 3 | margin : 50px auto; 4 | } 5 | body { 6 | background-color: #fff; 7 | } 8 | div.main { 9 | } 10 | 11 | div.preview_form { 12 | margin:1em 0; 13 | } 14 | 15 | #link { 16 | width: 490px; 17 | margin: 10px auto; 18 | textarea { 19 | width: 400px; 20 | padding: 5px; 21 | font-size: 1.1em; 22 | } 23 | } 24 | 25 | #loading { 26 | background-image:url(../images/loading.gif); 27 | width: 200px; 28 | height: 15px; 29 | margin: 50px auto; 30 | background-repeat: no-repeat; 31 | display: none; 32 | } 33 | 34 | 35 | #images { 36 | position:absolute; 37 | width:300em; 38 | margin: 0px; 39 | padding: 0px; 40 | left:0px; 41 | li{ 42 | list-style:none; 43 | float:left; 44 | margin: 0px; 45 | padding: 0px; 46 | } 47 | img{ 48 | width:100px; 49 | } 50 | } 51 | 52 | 53 | #left, #right { 54 | display:block; 55 | position:absolute; 56 | top:0; 57 | } 58 | 59 | #left { 60 | left:0px; 61 | } 62 | 63 | #right{ 64 | right:0; 65 | } 66 | 67 | #display { 68 | width:490px; 69 | margin: 10px auto; 70 | display: none; 71 | 72 | .items{ 73 | position: relative; 74 | overflow:hidden; 75 | height:100px; 76 | padding: 0px; 77 | margin: -19px 0 0 0px; 78 | width: 100px; 79 | } 80 | .controls { 81 | margin: 0 0 3px 0; 82 | position: relative; 83 | height: 16px; 84 | z-index: 10000; 85 | } 86 | .wrap{ 87 | width:100px; 88 | float: left; 89 | margin:0 10px 0 0; 90 | } 91 | input[type="text"] { 92 | width: 400px; 93 | padding: 3px; 94 | border: 1px solid #999; 95 | } 96 | textarea { 97 | border: 1px solid #999; 98 | width: 400px; 99 | height: 100px; 100 | padding: 3px; 101 | } 102 | } 103 | 104 | #attributes { 105 | width: 400px; 106 | margin: 0 0 0 110px; 107 | p { 108 | line-height: 1.2em; 109 | } 110 | a { 111 | color: #111; 112 | text-decoration: none; 113 | &:hover{ 114 | background-color: #FF9; 115 | } 116 | } 117 | } 118 | 119 | img.favicon, .favicon img { 120 | width:16px; 121 | height:16px; 122 | } 123 | 124 | /* 125 | Feed Styles 126 | */ 127 | #feed{ 128 | background-color: white; 129 | padding: 0 10px; 130 | } 131 | 132 | .item { 133 | padding: 10px 0 0 0; 134 | margin: 0 0 10px 0; 135 | border-top: 1px solid #DDD; 136 | &.first { 137 | border-top: none; 138 | } 139 | } 140 | 141 | .container_12 { 142 | .no_thumbnail{ 143 | float: left; 144 | border-right: 2px solid #DDD; 145 | height: 75px; 146 | } 147 | .thumbnail { 148 | margin: 5px 10px 10px 0; 149 | width: 105px; 150 | a { 151 | display: table-cell; 152 | width: 100px; 153 | height: 75px; 154 | overflow: hidden; 155 | background-color: black; 156 | vertical-align: middle; 157 | position:relative; 158 | text-align: center; 159 | } 160 | img { 161 | max-width: 100px; 162 | vertical-align:middle; 163 | } 164 | } 165 | } 166 | 167 | .video, .rich { 168 | .player_overlay { 169 | background-image: url(../images/play.png); 170 | width: 25px; 171 | height: 25px; 172 | position: absolute; 173 | left: 3px; 174 | bottom: 3px; 175 | } 176 | } 177 | 178 | 179 | .info { 180 | font-size: 12px; 181 | line-height: 15px; 182 | position:relative; 183 | a{ 184 | display:block; 185 | text-decoration:none; 186 | &:hover{ 187 | text-decoration:underline; 188 | } 189 | &.title{ 190 | margin: 5px 0 0; 191 | max-width: 400px; 192 | } 193 | &.provider{ 194 | font-size: 11px; 195 | } 196 | } 197 | p{ 198 | color: #666; 199 | margin: 5px 0; 200 | } 201 | .close{ 202 | position:absolute; 203 | top:3px; 204 | right:3px; 205 | font-size: 13px; 206 | display:none; 207 | } 208 | } -------------------------------------------------------------------------------- /css/fb.css: -------------------------------------------------------------------------------- 1 | /* Facebook Styling for Demo */ 2 | body { 3 | background: #fff; 4 | font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 5 | font-size: 11px; } 6 | body #header { 7 | background: #3b5988; 8 | height: 41px; } 9 | body a { 10 | color: #3b5988; 11 | font-weight: bold; 12 | text-decoration: none; } 13 | body .container_12 .grid_8 { 14 | width: 493px; } 15 | body .main, body #feed { 16 | border-left: 1px solid #b3b3b3; 17 | padding-left: 20px; } 18 | body .main h2#preview_h2, body #feed h2#preview_h2 { 19 | color: #1C2A47; 20 | font-size: 16px; 21 | line-height: 22px; } 22 | body .main h2#preview_h2 span, body #feed h2#preview_h2 span { 23 | background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/XY1BTEJBstt.png") no-repeat -51px -276px; 24 | width: 16px; 25 | height: 18px; 26 | float: left; 27 | display: block; 28 | margin-right: 6px; } 29 | body .main { 30 | padding-top: 10px; } 31 | body .main #preview_form { 32 | position: relative; } 33 | body .main div.field { 34 | margin-top: 20px; 35 | position: relative; 36 | border: 1px solid #B4BBCD; 37 | padding: 10px; } 38 | body .main div.field label { 39 | position: absolute; 40 | color: #777; 41 | font-size: 13px; 42 | left: 14px; 43 | top: 13px; } 44 | body .main div.field textarea { 45 | border: 1px solid #BDC7D8; 46 | color: #333; 47 | width: 462px; 48 | resize: none; 49 | font-size: 13px; 50 | padding: 3px; 51 | line-height: 16px; 52 | height: 16px; 53 | cursor: text; } 54 | body .main #id_submit { 55 | background: #eeeeee url("https://s-static.ak.facebook.com/rsrc.php/v1/yf/r/_IKHHfAgFQe.png") 0px -49px; 56 | border: 1px solid #999; 57 | border-bottom: 1px solid #888; 58 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 59 | -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 60 | -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 61 | -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 62 | padding: 2px 4px; 63 | line-height: normal !important; 64 | white-space: nowrap; 65 | cursor: pointer; 66 | font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 67 | font-size: 13px; 68 | color: #333; 69 | font-weight: bold; 70 | text-align: center; 71 | outline: none; 72 | right: 12px; 73 | top: 11px; 74 | position: absolute; } 75 | body .main #id_submit.submit { 76 | background-color: #5B74A8; 77 | background-position: 0px -98px; 78 | border-color: #29447E #29447E #1A356E; 79 | color: #fff; 80 | top: inherit; 81 | bottom: 10px; } 82 | body #preview_form.preview { 83 | margin-top: 20px; 84 | position: relative; 85 | border: 1px solid #B4BBCD; 86 | padding: 10px; } 87 | body #preview_form.preview #form_field { 88 | display: none; } 89 | body #preview_form.preview a.title { 90 | color: #000; 91 | font-size: 12px; 92 | cursor: pointer; } 93 | body #preview_form.preview a.title:hover { 94 | background: #ff9; } 95 | body #preview_form.preview a.description { 96 | color: #000; 97 | font-size: 11px; 98 | cursor: pointer; } 99 | body #preview_form.preview a.description:hover { 100 | background: #ff9; } 101 | body #preview_form.preview #display .controls { 102 | position: static; } 103 | body #preview_form.preview #display .wrap { 104 | padding-bottom: 20px; } 105 | body #preview_form.preview #display p.url { 106 | white-space: nowrap; 107 | overflow: hidden; 108 | width: 250px; 109 | color: #666; 110 | margin-bottom: 5px; } 111 | body #preview_form.preview #left, body #preview_form.preview #right { 112 | width: 25px; 113 | height: 22px; 114 | display: block; 115 | text-indent: -9999em; 116 | outline: none; 117 | top: auto; 118 | bottom: 10px; } 119 | body #preview_form.preview #left { 120 | left: 10px; 121 | background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -50px -83px; } 122 | body #preview_form.preview #left:hover { 123 | background-position: 0px -83px; } 124 | body #preview_form.preview #left:active { 125 | background-position: -100px -83px; } 126 | body #preview_form.preview #right { 127 | right: auto; 128 | left: 35px; 129 | background: transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -75px -83px; } 130 | body #preview_form.preview #right:hover { 131 | background-position: -25px -83px; } 132 | body #preview_form.preview #right:active { 133 | background-position: -125px -83px; } 134 | 135 | #feed .item { 136 | clear: both; 137 | border-color: #E9E9E9; } 138 | #feed .profilepic { 139 | width: 50px; 140 | margin-right: 10px; 141 | float: left; } 142 | #feed h6 { 143 | font-size: 11px; 144 | font-weight: bold; 145 | color: #3B5998; 146 | margin-bottom: 5px; } 147 | #feed .embed { 148 | margin: 0 0 0 60px; } 149 | #feed .embed p { 150 | font-size: 11px; 151 | line-height: 14px; } 152 | #feed .embed p.via { 153 | clear: left; } 154 | #feed .embed p.via .postIcon { 155 | width: 16px; 156 | height: 16px; 157 | float: left; 158 | margin-right: 3px; } 159 | -------------------------------------------------------------------------------- /css/fb.scss: -------------------------------------------------------------------------------- 1 | /* Facebook Styling for Demo */ 2 | body { 3 | background:#fff; 4 | font-family:"lucida grande",tahoma,verdana,arial,sans-serif; 5 | font-size:11px; 6 | #header { 7 | background:#3b5988; 8 | height:41px; 9 | } 10 | a { 11 | color:#3b5988; 12 | font-weight:bold; 13 | text-decoration:none; 14 | } 15 | .container_12 { 16 | .grid_8 { 17 | width:493px; 18 | } 19 | } 20 | .main, #feed { 21 | border-left:1px solid #b3b3b3; 22 | padding-left:20px; 23 | h2#preview_h2 { 24 | color:#1C2A47; 25 | font-size:16px; 26 | line-height:22px; 27 | span { 28 | background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/XY1BTEJBstt.png") no-repeat -51px -276px; 29 | width:16px; 30 | height:18px; 31 | float:left; 32 | display:block; 33 | margin-right:6px; 34 | } 35 | } 36 | } 37 | .main { 38 | padding-top:10px; 39 | #preview_form { 40 | position:relative; 41 | } 42 | div.field { 43 | margin-top:20px; 44 | position:relative; 45 | border:1px solid #B4BBCD; 46 | padding:10px; 47 | label { 48 | position:absolute; 49 | color:#777; 50 | font-size:13px; 51 | left:14px; 52 | top:13px; 53 | } 54 | textarea { 55 | border:1px solid #BDC7D8; 56 | color:#333; 57 | width:462px; 58 | resize:none; 59 | font-size:13px; 60 | padding:3px; 61 | line-height:16px; 62 | height:16px; 63 | cursor:text; 64 | } 65 | } 66 | #id_submit { 67 | background:#eee url("https://s-static.ak.facebook.com/rsrc.php/v1/yf/r/_IKHHfAgFQe.png") 0px -49px; 68 | border:1px solid #999; 69 | border-bottom:1px solid #888; 70 | box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); 71 | -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); 72 | -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); 73 | -o-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); 74 | padding:2px 4px; 75 | line-height:normal !important; 76 | white-space:nowrap; 77 | cursor:pointer; 78 | font-family:"lucida grande",tahoma,verdana,arial,sans-serif; 79 | font-size:13px; 80 | color:#333; 81 | font-weight:bold; 82 | text-align:center; 83 | outline:none; 84 | right:12px; 85 | top:11px; 86 | position:absolute; 87 | &.submit { 88 | background-color:#5B74A8; 89 | background-position:0px -98px; 90 | border-color:#29447E #29447E #1A356E; 91 | color:#fff; 92 | top:inherit; 93 | bottom:10px; 94 | } 95 | } 96 | } 97 | #preview_form.preview { 98 | margin-top:20px; 99 | position:relative; 100 | border:1px solid #B4BBCD; 101 | padding:10px; 102 | #form_field { 103 | display:none; 104 | } 105 | a.title { 106 | color:#000; 107 | font-size:12px; 108 | cursor:pointer; 109 | &:hover{ 110 | background:#ff9; 111 | } 112 | } 113 | a.description { 114 | color:#000; 115 | font-size:11px; 116 | cursor:pointer; 117 | &:hover { 118 | background:#ff9; 119 | } 120 | } 121 | #display { 122 | .controls { 123 | position:static; 124 | } 125 | .wrap { 126 | padding-bottom:20px; 127 | } 128 | p.url { 129 | white-space:nowrap; 130 | overflow:hidden; 131 | width:250px; 132 | color:#666; 133 | margin-bottom:5px; 134 | } 135 | } 136 | #left,#right { 137 | width:25px; 138 | height:22px; 139 | display:block; 140 | text-indent:-9999em; 141 | outline:none; 142 | top:auto; 143 | bottom:10px; 144 | } 145 | #left{ 146 | left:10px; 147 | background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -50px -83px; 148 | &:hover { 149 | background-position:0px -83px; 150 | } 151 | &:active { 152 | background-position:-100px -83px; 153 | } 154 | } 155 | #right{ 156 | right:auto; 157 | left:35px; 158 | background:transparent url("https://s-static.ak.facebook.com/rsrc.php/v1/yi/r/8OjNXDy3pHp.gif") no-repeat -75px -83px; 159 | &:hover { 160 | background-position:-25px -83px; 161 | } 162 | &:active { 163 | background-position:-125px -83px; 164 | } 165 | } 166 | } 167 | } 168 | #feed { 169 | .item { 170 | clear:both; 171 | border-color:#E9E9E9; 172 | } 173 | .profilepic { 174 | width:50px; 175 | margin-right:10px; 176 | float:left; 177 | } 178 | h6 { 179 | font-size:11px; 180 | font-weight:bold; 181 | color:#3B5998; 182 | margin-bottom:5px; 183 | } 184 | .embed { 185 | margin:0 0 0 60px; 186 | p { 187 | font-size:11px; 188 | line-height:14px; 189 | &.via { 190 | clear:left; 191 | .postIcon { 192 | width:16px; 193 | height:16px; 194 | float:left; 195 | margin-right:3px; 196 | } 197 | } 198 | } 199 | } 200 | } -------------------------------------------------------------------------------- /css/grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | Variable Grid System. 3 | Learn more ~ http://www.spry-soft.com/grids/ 4 | Based on 960 Grid System - http://960.gs/ 5 | 6 | Licensed under GPL and MIT. 7 | */ 8 | 9 | 10 | /* Containers 11 | ----------------------------------------------------------------------------------------------------*/ 12 | .container_12 { 13 | margin-left: auto; 14 | margin-right: auto; 15 | width: 960px; 16 | } 17 | 18 | /* Grid >> Global 19 | ----------------------------------------------------------------------------------------------------*/ 20 | 21 | .grid_1, 22 | .grid_2, 23 | .grid_3, 24 | .grid_4, 25 | .grid_5, 26 | .grid_6, 27 | .grid_7, 28 | .grid_8, 29 | .grid_9, 30 | .grid_10, 31 | .grid_11, 32 | .grid_12 { 33 | display:inline; 34 | float: left; 35 | position: relative; 36 | margin-left: 10px; 37 | margin-right: 10px; 38 | } 39 | 40 | /* Grid >> Children (Alpha ~ First, Omega ~ Last) 41 | ----------------------------------------------------------------------------------------------------*/ 42 | 43 | .alpha { 44 | margin-left: 0; 45 | } 46 | 47 | .omega { 48 | margin-right: 0; 49 | } 50 | 51 | /* Grid >> 12 Columns 52 | ----------------------------------------------------------------------------------------------------*/ 53 | 54 | .container_12 .grid_1 { 55 | width:60px; 56 | } 57 | 58 | .container_12 .grid_2 { 59 | width:140px; 60 | } 61 | 62 | .container_12 .grid_3 { 63 | width:220px; 64 | } 65 | 66 | .container_12 .grid_4 { 67 | width:300px; 68 | } 69 | 70 | .container_12 .grid_5 { 71 | width:380px; 72 | } 73 | 74 | .container_12 .grid_6 { 75 | width:460px; 76 | } 77 | 78 | .container_12 .grid_7 { 79 | width:540px; 80 | } 81 | 82 | .container_12 .grid_8 { 83 | width:620px; 84 | } 85 | 86 | .container_12 .grid_9 { 87 | width:700px; 88 | } 89 | 90 | .container_12 .grid_10 { 91 | width:780px; 92 | } 93 | 94 | .container_12 .grid_11 { 95 | width:860px; 96 | } 97 | 98 | .container_12 .grid_12 { 99 | width:940px; 100 | } 101 | 102 | 103 | 104 | /* Prefix Extra Space >> 12 Columns 105 | ----------------------------------------------------------------------------------------------------*/ 106 | 107 | .container_12 .prefix_1 { 108 | padding-left:80px; 109 | } 110 | 111 | .container_12 .prefix_2 { 112 | padding-left:160px; 113 | } 114 | 115 | .container_12 .prefix_3 { 116 | padding-left:240px; 117 | } 118 | 119 | .container_12 .prefix_4 { 120 | padding-left:320px; 121 | } 122 | 123 | .container_12 .prefix_5 { 124 | padding-left:400px; 125 | } 126 | 127 | .container_12 .prefix_6 { 128 | padding-left:480px; 129 | } 130 | 131 | .container_12 .prefix_7 { 132 | padding-left:560px; 133 | } 134 | 135 | .container_12 .prefix_8 { 136 | padding-left:640px; 137 | } 138 | 139 | .container_12 .prefix_9 { 140 | padding-left:720px; 141 | } 142 | 143 | .container_12 .prefix_10 { 144 | padding-left:800px; 145 | } 146 | 147 | .container_12 .prefix_11 { 148 | padding-left:880px; 149 | } 150 | 151 | 152 | 153 | /* Suffix Extra Space >> 12 Columns 154 | ----------------------------------------------------------------------------------------------------*/ 155 | 156 | .container_12 .suffix_1 { 157 | padding-right:80px; 158 | } 159 | 160 | .container_12 .suffix_2 { 161 | padding-right:160px; 162 | } 163 | 164 | .container_12 .suffix_3 { 165 | padding-right:240px; 166 | } 167 | 168 | .container_12 .suffix_4 { 169 | padding-right:320px; 170 | } 171 | 172 | .container_12 .suffix_5 { 173 | padding-right:400px; 174 | } 175 | 176 | .container_12 .suffix_6 { 177 | padding-right:480px; 178 | } 179 | 180 | .container_12 .suffix_7 { 181 | padding-right:560px; 182 | } 183 | 184 | .container_12 .suffix_8 { 185 | padding-right:640px; 186 | } 187 | 188 | .container_12 .suffix_9 { 189 | padding-right:720px; 190 | } 191 | 192 | .container_12 .suffix_10 { 193 | padding-right:800px; 194 | } 195 | 196 | .container_12 .suffix_11 { 197 | padding-right:880px; 198 | } 199 | 200 | 201 | 202 | /* Push Space >> 12 Columns 203 | ----------------------------------------------------------------------------------------------------*/ 204 | 205 | .container_12 .push_1 { 206 | left:80px; 207 | } 208 | 209 | .container_12 .push_2 { 210 | left:160px; 211 | } 212 | 213 | .container_12 .push_3 { 214 | left:240px; 215 | } 216 | 217 | .container_12 .push_4 { 218 | left:320px; 219 | } 220 | 221 | .container_12 .push_5 { 222 | left:400px; 223 | } 224 | 225 | .container_12 .push_6 { 226 | left:480px; 227 | } 228 | 229 | .container_12 .push_7 { 230 | left:560px; 231 | } 232 | 233 | .container_12 .push_8 { 234 | left:640px; 235 | } 236 | 237 | .container_12 .push_9 { 238 | left:720px; 239 | } 240 | 241 | .container_12 .push_10 { 242 | left:800px; 243 | } 244 | 245 | .container_12 .push_11 { 246 | left:880px; 247 | } 248 | 249 | 250 | 251 | /* Pull Space >> 12 Columns 252 | ----------------------------------------------------------------------------------------------------*/ 253 | 254 | .container_12 .pull_1 { 255 | left:-80px; 256 | } 257 | 258 | .container_12 .pull_2 { 259 | left:-160px; 260 | } 261 | 262 | .container_12 .pull_3 { 263 | left:-240px; 264 | } 265 | 266 | .container_12 .pull_4 { 267 | left:-320px; 268 | } 269 | 270 | .container_12 .pull_5 { 271 | left:-400px; 272 | } 273 | 274 | .container_12 .pull_6 { 275 | left:-480px; 276 | } 277 | 278 | .container_12 .pull_7 { 279 | left:-560px; 280 | } 281 | 282 | .container_12 .pull_8 { 283 | left:-640px; 284 | } 285 | 286 | .container_12 .pull_9 { 287 | left:-720px; 288 | } 289 | 290 | .container_12 .pull_10 { 291 | left:-800px; 292 | } 293 | 294 | .container_12 .pull_11 { 295 | left:-880px; 296 | } 297 | 298 | 299 | 300 | 301 | /* Clear Floated Elements 302 | ----------------------------------------------------------------------------------------------------*/ 303 | 304 | /* http://sonspring.com/journal/clearing-floats */ 305 | 306 | .clear { 307 | clear: both; 308 | display: block; 309 | overflow: hidden; 310 | visibility: hidden; 311 | width: 0; 312 | height: 0; 313 | } 314 | 315 | /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ 316 | 317 | .clearfix:after { 318 | clear: both; 319 | content: ' '; 320 | display: block; 321 | font-size: 0; 322 | line-height: 0; 323 | visibility: hidden; 324 | width: 0; 325 | height: 0; 326 | } 327 | 328 | .clearfix { 329 | display: inline-block; 330 | } 331 | 332 | * html .clearfix { 333 | height: 1%; 334 | } 335 | 336 | .clearfix { 337 | display: block; 338 | } -------------------------------------------------------------------------------- /css/plus.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 13px/1.4 Arial, sans-serif; } 3 | 4 | div.main { 5 | border-left: 1px solid #ddd; 6 | border-right: 1px solid #ddd; } 7 | 8 | h2 { 9 | font-size: 18px; 10 | color: #333; 11 | font-weight: normal; 12 | margin: 1em 0 0.5em; } 13 | 14 | div.preview_form { 15 | margin: 2em; } 16 | div.preview_form div.field { 17 | position: relative; } 18 | div.preview_form label { 19 | color: #999; 20 | position: absolute; 21 | left: 15px; 22 | top: 10px; } 23 | div.preview_form textarea { 24 | border: 1px solid #ddd; 25 | padding: 1em 1em 0; 26 | width: 540px; 27 | line-height: 1.4em; 28 | cursor: text; 29 | resize: none; } 30 | div.preview_form button, div.preview_form input#id_submit { 31 | background-color: #3D9400; 32 | border: 1px solid #29691D; 33 | color: #FFFFFF; 34 | text-shadow: 0 1px rgba(0, 0, 0, 0.1); 35 | border-radius: 2px 2px 2px 2px; 36 | cursor: default; 37 | font-size: 11px; 38 | font-weight: bold; 39 | height: 27px; 40 | line-height: 27px; 41 | min-width: 54px; 42 | outline: none; 43 | padding: 0 8px; 44 | text-align: center; 45 | margin: 1em 0; } 46 | div.preview_form button:hover, div.preview_form input#id_submit:hover { 47 | background-color: #368200; } 48 | div.preview_form button.disabled, div.preview_form input#id_submit.disabled { 49 | opacity: 0.5; 50 | -moz-opacity: 0.5; 51 | -webkit-opacity: 0.5; 52 | -o-opacity: 0.5; } 53 | div.preview_form button.disabled:hover, div.preview_form input#id_submit.disabled:hover { 54 | background-color: #3D9400; } 55 | 56 | #display, #loading { 57 | border: 1px solid #ddd; 58 | border-top: none; 59 | width: 540px; 60 | padding: 1em; 61 | margin: -2px 0 0; } 62 | 63 | #loading { 64 | text-align: center; 65 | background-position: center center; } 66 | 67 | #display .controls { 68 | background: rgba(0, 0, 0, 0.7); 69 | height: 20px; } 70 | #display .controls a.button { 71 | text-decoration: none; 72 | color: #999; 73 | padding: 2px 5px; 74 | outline: none; } 75 | #display .controls a.button:hover { 76 | color: #fff; } 77 | #display .items { 78 | margin-top: -23px; } 79 | #display a.title { 80 | color: #3366CC; 81 | font-weight: bold; 82 | display: block; 83 | margin-bottom: 0.25em; } 84 | #display input.title { 85 | display: block; 86 | margin-bottom: 0.25em; 87 | width: 490px; } 88 | #display .description { 89 | line-height: 1.4em; } 90 | #display img.favicon { 91 | float: left; 92 | margin: 0 5px 5px 0; } 93 | #display #wrap { 94 | clear: left; } 95 | 96 | #feed { 97 | padding: 0; 98 | margin: 0 10px; 99 | border: 1px solid #ddd; 100 | border-width: 0px 1px; } 101 | #feed .item { 102 | padding: 1em 2em; 103 | border-bottom: 1px solid #ddd; 104 | margin: 0; } 105 | #feed .item.first { 106 | border-top: 1px solid #ddd; } 107 | #feed .item .favicon { 108 | float: left; 109 | margin: 0 5px 5px 0; } 110 | #feed .item a.title { 111 | color: #3366CC; 112 | font-weight: bold; 113 | display: block; 114 | margin-bottom: 0.25em; } 115 | #feed .item .thumbnail { 116 | clear: left; 117 | margin-left: 5px; } 118 | #feed .item .info { 119 | font: 13px/1.4 arial, sans-serif; 120 | color: #333; } 121 | #feed .item .info p { 122 | color: #333; } 123 | -------------------------------------------------------------------------------- /css/plus.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font:13px/1.4 Arial,sans-serif; 3 | } 4 | div.main { 5 | border-left:1px solid #ddd; 6 | border-right:1px solid #ddd; 7 | } 8 | h2 { 9 | font-size:18px; 10 | color:#333; 11 | font-weight:normal; 12 | margin:1em 0 0.5em; 13 | } 14 | div.preview_form { 15 | margin:2em; 16 | div.field { 17 | position:relative; 18 | } 19 | label { 20 | color:#999; 21 | position:absolute; 22 | left:15px; 23 | top:10px; 24 | } 25 | textarea { 26 | border:1px solid #ddd; 27 | padding:1em 1em 0; 28 | width:540px; 29 | line-height:1.4em; 30 | cursor:text; 31 | resize: none; 32 | } 33 | button, input#id_submit { 34 | background-color: #3D9400; 35 | border: 1px solid #29691D; 36 | color: #FFFFFF; 37 | text-shadow: 0 1px rgba(0, 0, 0, 0.1); 38 | border-radius: 2px 2px 2px 2px; 39 | cursor: default; 40 | font-size: 11px; 41 | font-weight: bold; 42 | height: 27px; 43 | line-height: 27px; 44 | min-width: 54px; 45 | outline: none; 46 | padding: 0 8px; 47 | text-align: center; 48 | margin:1em 0; 49 | &:hover{ 50 | background-color:#368200; 51 | } 52 | &.disabled { 53 | opacity:0.5; 54 | -moz-opacity:0.5; 55 | -webkit-opacity:0.5; 56 | -o-opacity:0.5; 57 | &:hover{ 58 | background-color: #3D9400; 59 | } 60 | } 61 | } 62 | } 63 | #display, #loading { 64 | border:1px solid #ddd; 65 | border-top:none; 66 | width:540px; 67 | padding:1em; 68 | margin:-2px 0 0; 69 | } 70 | #loading { 71 | text-align:center; 72 | background-position:center center; 73 | } 74 | 75 | #display { 76 | .controls { 77 | background:rgba(0,0,0,0.7); 78 | height:20px; 79 | a.button { 80 | text-decoration:none; 81 | color:#999; 82 | padding:2px 5px; 83 | outline:none; 84 | &:hover { 85 | color:#fff; 86 | } 87 | } 88 | } 89 | .items { 90 | margin-top:-23px; 91 | } 92 | a.title { 93 | color:#3366CC; 94 | font-weight:bold; 95 | display:block; 96 | margin-bottom:0.25em; 97 | } 98 | input.title { 99 | display:block; 100 | margin-bottom:0.25em; 101 | width:490px; 102 | } 103 | .description { 104 | line-height:1.4em; 105 | } 106 | img.favicon { 107 | float:left; 108 | margin:0 5px 5px 0; 109 | } 110 | #wrap { 111 | clear:left; 112 | } 113 | } 114 | #feed { 115 | padding:0; 116 | margin:0 10px; 117 | border:1px solid #ddd; 118 | border-width:0px 1px; 119 | .item { 120 | padding:1em 2em; 121 | border-bottom:1px solid #ddd; 122 | margin:0; 123 | &.first { 124 | border-top:1px solid #ddd; 125 | } 126 | .favicon { 127 | float:left; 128 | margin:0 5px 5px 0; 129 | } 130 | a.title { 131 | color:#3366CC; 132 | font-weight:bold; 133 | display:block; 134 | margin-bottom:0.25em; 135 | } 136 | .thumbnail { 137 | clear:left; 138 | margin-left:5px; 139 | } 140 | .info { 141 | font:13px/1.4 arial,sans-serif; 142 | color:#333; 143 | p { 144 | color:#333; 145 | } 146 | } 147 | } 148 | } -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* HTML5 ✰ Boilerplate */ 2 | 3 | html, body, div, span, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, 6 | small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, 7 | fieldset, form, label, legend, 8 | table, caption, tbody, tfoot, thead, tr, th, td, 9 | article, aside, canvas, details, figcaption, figure, 10 | footer, header, hgroup, menu, nav, section, summary, 11 | time, mark, audio, video { 12 | margin: 0; 13 | padding: 0; 14 | border: 0; 15 | font-size: 100%; 16 | font: inherit; 17 | vertical-align: baseline; 18 | } 19 | 20 | article, aside, details, figcaption, figure, 21 | footer, header, hgroup, menu, nav, section { 22 | display: block; 23 | } 24 | 25 | blockquote, q { quotes: none; } 26 | blockquote:before, blockquote:after, 27 | q:before, q:after { content: ''; content: none; } 28 | ins { background-color: #ff9; color: #000; text-decoration: none; } 29 | mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } 30 | del { text-decoration: line-through; } 31 | abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } 32 | table { border-collapse: collapse; border-spacing: 0; } 33 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 34 | input, select { vertical-align: middle; } 35 | 36 | body { font:13px/1.231 sans-serif; *font-size:small; } 37 | select, input, textarea, button { font:99% sans-serif; } 38 | pre, code, kbd, samp { font-family: monospace, sans-serif; } 39 | 40 | html { overflow-y: scroll; } 41 | a:hover, a:active { outline: none; } 42 | ul, ol { margin-left: 2em; } 43 | ol { list-style-type: decimal; } 44 | nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } 45 | small { font-size: 85%; } 46 | strong, th { font-weight: bold; } 47 | td { vertical-align: top; } 48 | 49 | sub, sup { font-size: 75%; line-height: 0; position: relative; } 50 | sup { top: -0.5em; } 51 | sub { bottom: -0.25em; } 52 | 53 | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } 54 | textarea { overflow: auto; } 55 | .ie6 legend, .ie7 legend { margin-left: -7px; } 56 | input[type="radio"] { vertical-align: text-bottom; } 57 | input[type="checkbox"] { vertical-align: bottom; } 58 | .ie7 input[type="checkbox"] { vertical-align: baseline; } 59 | .ie6 input { vertical-align: text-bottom; } 60 | label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } 61 | button, input, select, textarea { margin: 0; } 62 | input:valid, textarea:valid { } 63 | input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } 64 | .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } 65 | 66 | ::-moz-selection{ background: #0095DA; color:#fff; text-shadow: none; } 67 | ::selection { background:#0095DA; color:#fff; text-shadow: none; } 68 | a:link { -webkit-tap-highlight-color: #0095DA; } 69 | 70 | button { width: auto; overflow: visible; } 71 | .ie7 img { -ms-interpolation-mode: bicubic; } 72 | 73 | body, select, input, textarea { color: #444; } 74 | h1, h2, h3, h4, h5, h6 { font-weight: bold; } 75 | a, a:active, a:visited { color: #607890; } 76 | a:hover { color: #036; } 77 | 78 | 79 | /** 80 | * Primary styles 81 | * 82 | * Author: 83 | */ 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } 101 | .hidden { display: none; visibility: hidden; } 102 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 103 | .visuallyhidden.focusable:active, 104 | .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 105 | .invisible { visibility: hidden; } 106 | .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 107 | .clearfix:after { clear: both; } 108 | .clearfix { zoom: 1; } 109 | 110 | 111 | @media all and (orientation:portrait) { 112 | 113 | } 114 | 115 | @media all and (orientation:landscape) { 116 | 117 | } 118 | 119 | @media screen and (max-device-width: 480px) { 120 | 121 | /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ 122 | } 123 | 124 | 125 | @media print { 126 | * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; 127 | -ms-filter: none !important; } 128 | a, a:visited { color: #444 !important; text-decoration: underline; } 129 | a[href]:after { content: " (" attr(href) ")"; } 130 | abbr[title]:after { content: " (" attr(title) ")"; } 131 | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 132 | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 133 | thead { display: table-header-group; } 134 | tr, img { page-break-inside: avoid; } 135 | @page { margin: 0.5cm; } 136 | p, h2, h3 { orphans: 3; widows: 3; } 137 | h2, h3{ page-break-after: avoid; } 138 | } 139 | -------------------------------------------------------------------------------- /images/10kapart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/10kapart.png -------------------------------------------------------------------------------- /images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/facebook.png -------------------------------------------------------------------------------- /images/googleplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/googleplus.png -------------------------------------------------------------------------------- /images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/loading.gif -------------------------------------------------------------------------------- /images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/play.png -------------------------------------------------------------------------------- /images/rdio_expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/rdio_expanded.png -------------------------------------------------------------------------------- /images/rdio_item.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/rdio_item.png -------------------------------------------------------------------------------- /images/yammer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/embedly/embedly-tutorial-ext/a17da7259ba416a6bb5023ded21dc6ecbcdcf20b/images/yammer.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |