Skip to content

Instantly share code, notes, and snippets.

View allanwhite's full-sized avatar

Allan White allanwhite

View GitHub Profile
@allanwhite
allanwhite / social-icons-symbol.svg
Created December 5, 2020 02:40
Social Media Icons as an SVG symbol. Optimized with SVOMG.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@allanwhite
allanwhite / social-share-images.js
Last active December 5, 2020 02:55
Comprehensive social share image properties - based on Sprout Social's guide.
[
{
"platform": "Facebook Image Sizes",
"id": "facebook",
"brandColor": "3b5998",
"sizes": [
{
"title": "Profile Picture",
"face": true,
"width": 180,
@allanwhite
allanwhite / hubspot-form-example-min.js
Last active May 6, 2024 05:19
An example Hubspot form embed - top won't work in Statamic, bottom will. Seems like it must be minified.
hbspt.forms.create({portalId:"1695915",formId:"c5cbd91e-27da-4cb2-8bee-7ef37300c145",goToWebinarWebinarKey:"7245946950768380939",target:"#hsFormContainer",onFormSubmit:function(e){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"GAEvent",eventCategory:"Webinar - See CCMS Live",eventAction:"Form Submission",eventLabel:"Registration",eventValue:"2"})},css:""});
// functions includes mixins for now
/// Return black or white with alpha
/// @access public
/// @param {Opacity} $opacity, 0-1
/// @return - black or white with alpha, like rgba(0,0,0,0.4);
@function black($opacity) {
@return rgba(0,0,0,$opacity);
}
@function white($opacity) {
/* as of Dec 2017 */
@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro:400");@media print, screen and (min-width: 40em){.reveal,.reveal.tiny,.reveal.small,.reveal.large{right:auto;left:auto;margin:0 auto}}/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}main{display:block}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#f
@allanwhite
allanwhite / image_helpers.rb
Last active December 7, 2017 16:53 — forked from raybrownco/image_helpers.rb
Inline SVG in Middleman
# Middleman - Inline SVG Helper
# ------------------------------------------------------------------------------
# 1. Save this file at `[project_root]/helpers/image_helpers.rb`
# 2. Restart your local Middleman server if it's running
# 3. Embed SVG files into your template files like so:
#
# <%= inline_svg("logo"); %> assuming logo.svg is stored at source/assets/icons/inlined/logo.svg
#
# The helper also allows for CSS classes to be added:
#
// Helpers
$font_backup: -apple-system, BlinkMacSystemFont, "Roboto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font_sans: "GT America", $font_backup;
$font_serif: "Source Serif Pro", Georgia, serif;
// Font Weights // GT America Mapping; omitting ones that aren't loaded. Can be restored and loaded in fonts.scss.
$font-weight-xlight: 100; // ultra light
$font-weight-thin: 200; // thin
$font-weight-light: 300; // light
@allanwhite
allanwhite / echo-one-base.scss
Created September 21, 2016 19:40
A SASS variable & Mixin boilerplate for codepen work.
$c_brand: #2098CA;
$c_brand-alt: #1055ff; // stratum blue
// key gray scale colors used with microcopy
$c_primary: #111;
$c_secondary: #848484;
$c_lightest_gray: #ddd;
$c_light_gray: #aaa;
$c_mid_gray: #777;
$c_dark_gray: #444;
@allanwhite
allanwhite / SassMeister-input-HTML.html
Created February 18, 2016 01:35
Generated by SassMeister.com.
<div class="flex flex-center">
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
<img class="client" src="https://catalyze.io/assets/img/customer-logos/zipnosis-logo.png" alt="logo"/>
</div>
@allanwhite
allanwhite / boilerplate-proof.scss
Last active February 18, 2016 18:37
Basic SASS variables & functions for a page mockup (Proof).
$gray-1: hsl(248, 3%, 8%);
$gray-2: hsl(248, 3%, 16%);
$gray-3: hsl(248, 3%, 25%);
$gray-4: hsl(248, 3%, 33%);
$gray-5: hsl(248, 3%, 41%);
$gray-6: hsl(248, 3%, 50%);
$gray-7: hsl(248, 3%, 58%);
$gray-8: hsl(248, 3%, 66%);
$gray-9: hsl(248, 3%, 75%);
$gray-10: hsl(248, 3%, 83%);