Last active
December 30, 2017 20:47
-
-
Save nolanlawson/0b3a3ce471807da8e04d95f77eca8c31 to your computer and use it in GitHub Desktop.
toot embed test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title></title> | |
<style> | |
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
body { | |
line-height: 1; | |
} | |
body { | |
font-family: "mastodon-font-sans-serif",sans-serif; | |
background: #282c37; | |
background-size: cover; | |
background-attachment: fixed; | |
font-size: 13px; | |
line-height: 18px; | |
font-weight: 400; | |
color: #fff; | |
padding-bottom: 20px; | |
text-rendering: optimizelegibility; | |
-webkit-font-feature-settings: "kern"; | |
font-feature-settings: "kern" 1; | |
-webkit-text-size-adjust: none; | |
-moz-text-size-adjust: none; | |
-ms-text-size-adjust: none; | |
text-size-adjust: none; | |
-webkit-tap-highlight-color: transparent; | |
} | |
.embed { | |
background: transparent; | |
margin: 0; | |
padding-bottom: 0px; | |
} | |
.activity-stream { | |
clear: both; | |
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.2); | |
box-shadow: 0px 0px 15px rgba(0,0,0,0.2); | |
} | |
.embed .activity-stream { | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.activity-stream .entry { | |
background: #fff; | |
} | |
.activity-stream .entry .detailed-status.light, .activity-stream .entry .status.light { | |
border-bottom: 1px solid #d9e1e8; | |
-webkit-animation: none; | |
animation: none; | |
} | |
.activity-stream :last-child.entry, .activity-stream :last-child.entry .detailed-status.light, .activity-stream :last-child.entry .status.light { | |
border-bottom: 0; | |
border-radius: 0 0 4px 4px; | |
} | |
.activity-stream :first-child.entry, .activity-stream :first-child.entry .detailed-status.light, .activity-stream :first-child.entry .status.light { | |
border-radius: 4px 4px 0 0; | |
} | |
.embed .activity-stream .entry .detailed-status.light { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
-webkit-box-align: start; | |
-ms-flex-align: start; | |
align-items: flex-start; | |
} | |
.activity-stream :first-child:last-child.entry, .activity-stream :first-child:last-child.entry .detailed-status.light, .activity-stream :first-child:last-child.entry .status.light { | |
border-radius: 4px; | |
} | |
.detailed-status { | |
background: #313543; | |
padding: 14px 10px; | |
} | |
.activity-stream .detailed-status.light { | |
padding: 14px; | |
background: #fff; | |
cursor: default; | |
} | |
.account__display-name, .detailed-status__application, .detailed-status__datetime, .detailed-status__display-name, .status__display-name, .status__relative-time { | |
text-decoration: none; | |
} | |
.detailed-status__display-name { | |
color: #d9e1e8; | |
display: block; | |
line-height: 24px; | |
margin-bottom: 15px; | |
overflow: hidden; | |
} | |
.activity-stream .detailed-status.light .detailed-status__display-name { | |
display: block; | |
overflow: hidden; | |
margin-bottom: 15px; | |
} | |
.embed .activity-stream .entry .detailed-status.light .detailed-status__display-name { | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
margin: 0 5px 15px 0; | |
} | |
.button { | |
background-color: #2588d0; | |
border: 10px none; | |
border-radius: 4px; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
color: #fff; | |
cursor: pointer; | |
display: inline-block; | |
font-family: inherit; | |
font-size: 14px; | |
font-weight: 500; | |
height: 36px; | |
letter-spacing: 0px; | |
line-height: 36px; | |
overflow: hidden; | |
padding: 0 16px; | |
position: relative; | |
text-align: center; | |
text-transform: uppercase; | |
text-decoration: none; | |
text-overflow: ellipsis; | |
-webkit-transition: all .1s ease-in; | |
transition: all .1s ease-in; | |
white-space: nowrap; | |
width: auto; | |
} | |
.button.button-secondary { | |
font-size: 16px; | |
line-height: 36px; | |
height: auto; | |
color: #9baec8; | |
text-transform: none; | |
background: transparent; | |
padding: 3px 15px; | |
border-radius: 4px; | |
border: 1px solid #9baec8; | |
} | |
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 auto; | |
flex: 0 auto; | |
font-size: 14px; | |
} | |
.reply-indicator__content, .status__content { | |
font-size: 15px; | |
line-height: 20px; | |
word-wrap: break-word; | |
font-weight: 400; | |
overflow: hidden; | |
white-space: pre-wrap; | |
} | |
.detailed-status .status__content { | |
font-size: 19px; | |
line-height: 24px; | |
} | |
.activity-stream .detailed-status.light .status__content { | |
color: #282c37; | |
} | |
.activity-stream .detailed-status.light .detailed-status__meta { | |
margin-top: 15px; | |
color: #9baec8; | |
font-size: 14px; | |
line-height: 18px; | |
} | |
.embed .activity-stream .entry .detailed-status.light .detailed-status__meta, .embed .activity-stream .entry .detailed-status.light .status__content { | |
-webkit-box-flex: 100%; | |
-ms-flex: 100%; | |
flex: 100%; | |
} | |
.detailed-status__meta { | |
margin-top: 15px; | |
color: #606984; | |
font-size: 14px; | |
line-height: 18px; | |
} | |
.detailed-status__application, .detailed-status__datetime { | |
color: inherit; | |
} | |
.activity-stream .open-in-web-link { | |
text-decoration: none; | |
} | |
.activity-stream .detailed-status.light .detailed-status__meta a { | |
color: inherit; | |
} | |
.fa { | |
display: inline-block; | |
font: normal normal normal 14px/1 FontAwesome; | |
font-size: inherit; | |
text-rendering: auto; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.activity-stream .detailed-status.light .detailed-status__meta span > span { | |
font-weight: 500; | |
font-size: 12px; | |
margin-left: 6px; | |
display: inline-block; | |
} | |
.reply-indicator__content p, .status__content p { | |
margin-bottom: 20px; | |
} | |
.reply-indicator__content p:last-child, .status__content p:last-child { | |
margin-bottom: 0px; | |
} | |
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg { | |
width: 20px; | |
height: auto; | |
vertical-align: middle; | |
margin-right: 5px; | |
} | |
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg path:first-child { | |
fill: #9baec8; | |
} | |
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button svg path:last-child { | |
fill: #fff; | |
} | |
.activity-stream .detailed-status.light .detailed-status__display-name > div { | |
float: left; | |
margin-right: 10px; | |
} | |
.display-name { | |
display: block; | |
max-width: 100%; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.detailed-status__display-name span, .detailed-status__display-name strong { | |
display: block; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
} | |
.activity-stream .detailed-status.light .detailed-status__display-name .display-name { | |
display: block; | |
max-width: 100%; | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} | |
.detailed-status__display-name strong { | |
font-size: 16px; | |
color: #fff; | |
} | |
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong { | |
font-weight: 500; | |
color: #282c37; | |
} | |
.activity-stream .detailed-status.light .detailed-status__display-name .display-name span { | |
font-size: 14px; | |
color: #9baec8; | |
} | |
.activity-stream .detailed-status.light .avatar { | |
width: 48px; | |
height: 48px; | |
} | |
.activity-stream .detailed-status.light .avatar img { | |
display: block; | |
border-radius: 4px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="embed"> | |
<div class="activity-stream activity-stream-headless"> | |
<div class="entry h-entry"> | |
<div class="detailed-status light"> | |
<a class="detailed-status__display-name p-author h-card" href="https://mastodon.social/@nolan" target="_blank" rel="noopener"><div> | |
<div class="avatar"> | |
<img width="48" height="48" class="u-photo" alt="" src="https://files.mastodon.social/accounts/avatars/000/028/811/original/ae00f925a171e0c8.png"> | |
</div> | |
</div> | |
<span class="display-name"> | |
<strong class="p-name emojify">Nolan</strong> | |
<span>@nolan@mastodon.social</span> | |
</span> | |
</a><a class="button button-secondary logo-button" href="web+mastodon://follow?uri=nolan@mastodon.social" target="_new"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.414 232.01"><path fill="#3088d4" d="M 211.807 139.087 c -3.18125 16.3662 -28.4925 34.2775 -57.5625 37.7487 c -15.1587 1.80875 -30.0837 3.47125 -45.9987 2.74125 c -26.0275 -1.1925 -46.565 -6.2125 -46.565 -6.2125 c 0 2.53375 0.15625 4.94625 0.46875 7.2025 c 3.38375 25.6863 25.47 27.225 46.3913 27.9425 c 21.1162 0.7225 39.9188 -5.20625 39.9188 -5.20625 l 0.8675 19.09 s -14.77 7.93125 -41.0812 9.39 c -14.5087 0.7975 -32.5238 -0.365 -53.5062 -5.91875 C 9.23234 213.82 1.40609 165.311 0.20859 116.091 c -0.365 -14.6138 -0.14 -28.3937 -0.14 -39.9188 c 0 -50.33 32.9762 -65.0825 32.9762 -65.0825 C 49.6723 3.45375 78.2036 0.2425 107.865 0 h 0.72875 c 29.6612 0.2425 58.2113 3.45375 74.8375 11.09 c 0 0 32.975 14.7525 32.975 65.0825 c 0 0 0.41375 37.1338 -4.59875 62.915" /><path fill="#fff" d="M 177.51 80.077 v 60.9412 h -24.1437 v -59.15 c 0 -12.4688 -5.24625 -18.7975 -15.74 -18.7975 c -11.6025 0 -17.4175 7.5075 -17.4175 22.3525 v 32.3763 H 96.2073 V 85.4232 c 0 -14.845 -5.81625 -22.3525 -17.4188 -22.3525 c -10.4937 0 -15.74 6.32875 -15.74 18.7975 v 59.15 H 38.9048 V 80.077 c 0 -12.455 3.17125 -22.3525 9.54125 -29.675 c 6.56875 -7.3225 15.1713 -11.0763 25.85 -11.0763 c 12.355 0 21.7113 4.74875 27.8975 14.2475 l 6.01375 10.0813 l 6.015 -10.0813 c 6.185 -9.49875 15.5413 -14.2475 27.8975 -14.2475 c 10.6775 0 19.28 3.75375 25.85 11.0763 c 6.36875 7.3225 9.54 17.22 9.54 29.675" /></svg> | |
Follow | |
</a><div class="status__content p-name emojify"><div class="e-content" lang="en" style="display: block; direction: ltr"><p>mom: hey son I joined this new Mastodon thing<br>me: oh shit mom, I coulda helped you find a server, which one did you choose?<br>mom: well I liked the privacy policy on satanic.bikerladi.es but then communist.blaze.party had the shortest ping latency so</p></div></div> | |
<div class="detailed-status__meta"> | |
<data class="dt-published" value="2017-04-07T16:37:22+00:00"></data> | |
<a class="detailed-status__datetime u-url u-uid" href="https://mastodon.social/@nolan/1903743" target="_blank" rel="noopener"><time title="April 7, 2017 9:37 AM" class="formatted" datetime="2017-04-07T16:37:22Z">April 7, 2017 9:37 AM</time> | |
</a>· | |
<strong class="detailed-status__application">Web</strong> | |
· | |
<span><i class="fa fa-retweet"></i><span>241</span></span> | |
· | |
<span><i class="fa fa-star"></i><span>415</span></span> | |
· | |
<a class="open-in-web-link" href="https://mastodon.social/web/statuses/1903743" target="_blank">Open in web</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment