Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active December 30, 2017 20:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/0b3a3ce471807da8e04d95f77eca8c31 to your computer and use it in GitHub Desktop.
Save nolanlawson/0b3a3ce471807da8e04d95f77eca8c31 to your computer and use it in GitHub Desktop.
Download ZIP
toot embed test
Raw
index.html
<!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