👀📎 It looks like you're preparing to MC a conference...
🚨 GIANT DISCLAIMER: This stuff is far from authoritative. But it's what I think works for me, and what I enjoy in an MC when I'm attending a conference.
html { | |
--max-width: 1200px; | |
--columns: 6; | |
--gutter: 1.5rem; | |
} | |
* { | |
--grid: minmax(var(--gutter), 1fr) | |
repeat( | |
var(--columns), | |
minmax( |
@mixin hgrid($columns, $gap, $break, $alias) { | |
display: grid; | |
grid-template-columns: repeat($columns, 1fr); | |
gap: $gap; | |
&__u{ | |
grid-column: span $columns; |
Mute these words in your settings here: https://twitter.com/settings/muted_keywords | |
ActivityTweet | |
generic_activity_highlights | |
generic_activity_momentsbreaking | |
RankedOrganicTweet | |
suggest_activity | |
suggest_activity_feed | |
suggest_activity_highlights | |
suggest_activity_tweet |
/* eslint-env browser */ | |
/* global jq: true */ | |
const escaped = new Map([['<', '<'], ['>', '>']]); | |
const $$ = s => Array.from(document.querySelectorAll(s)); | |
const $ = s => document.querySelector(s); | |
let jqLoaded = false; | |
const scrollPositions = []; |
/* Box sizing rules */ | |
* { | |
box-sizing: border-box; | |
} | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
} |
function wrapEmojis(txt) { | |
var regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|[\ud83c[\ude50\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g; | |
return txt.replace(regex, function(emoji){ return '<span class="emoji">' + emoji + '</span>' }); | |
} |
const trackTime = timing => { | |
const now = performance.now(); | |
if (!timing.startTime) timing.startTime = now; | |
const elapsed = now - timing.startTime; | |
const {duration} = timing; | |
if (duration != null && duration <= elapsed) timing.startTime = null; | |
return elapsed; | |
}; | |
const delay = (callback, duration) => { |
<hr> | |
<div id="section-cta"> | |
<div class="section-header text-center"> | |
<h3> {{ section.settings.text-box }} </h3> | |
</div> | |
{% for block in section.blocks %} | |
<div class="btn" id="call-to-action"> | |
<a href="{{ block.settings.link }}" class="btn">{{ block.settings.linktext }}</a> | |
</div> |
/** | |
* = PRINT styles | |
* | |
* - Imported in global.css (http://www.phpied.com/delay-loading-your-print-css/) | |
* - Taken straight from: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L197 | |
* | |
* @TODO: | |
* - Add to this? | |
* | |
* ========================================================================= */ |