Skip to content

Instantly share code, notes, and snippets.

View jamesmusgrave's full-sized avatar

James Musgrave jamesmusgrave

View GitHub Profile
countryHash: {
unicodeCountry: {
AF: "Afghanistan",
AX: "Aland Islands",
AL: "Albania",
DZ: "Algeria",
AS: "American Samoa",
AD: "Andorra",
AO: "Angola",
AI: "Anguilla",
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type Scaling</title>
<style>
html{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
}
@jamesmusgrave
jamesmusgrave / campaign-monitor-angular.html
Last active October 3, 2018 06:03
Angular method to handle Campaign Monitor's secure subscribe link signup
<form name="newsletterSignupForm" novalidate ng-submit='submitEmail()'>
<input ng-model="emailAddress" type="email" placeholder="your@email.com" required />
<div class="checkbox">
<input type="checkbox" ng-model="acceptTerms" name="acceptTerms" required />
<div class="checkbox-label">I’ve read and accept the <a href="/terms" target="_blank">TOS and Privacy Policy</a>. </div>
</div>
<button ng-disabled="!newsletterSignupForm.$valid" type="submit" ng-bind="subscribeText"></button>
</form>
@jamesmusgrave
jamesmusgrave / _smart-underline.scss
Last active September 24, 2019 17:57
Smart Underline Sass Mixin
@mixin smart-underline($background: #fff, $text: #000, $selection: #ffc, $position: 86%){
a {
color: inherit;
text-decoration: none;
background: -webkit-linear-gradient($background, $background), -webkit-linear-gradient($background, $background), -webkit-linear-gradient($text, $text);
background-size: .05em 1px, .05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 $background, -0.03em 0 $background, 0 0.03em $background, 0 -0.03em $background, 0.06em 0 $background, -0.06em 0 $background, 0.09em 0 $background, -0.09em 0 $background, 0.12em 0 $background, -0.12em 0 $background, 0.15em 0 $background, -0.15em 0 $background;
background-position-y: $position,$position, $position;
background-position-x: 0%, 100%, 0%;
<template>
<div>
<input v-model="emailAddress" type="email" placeholder="your@email.com" />
<button @click="submitForm">{{subscribeText}}</button>
</div>
</template>
<script>
export default {
data() {
return {
// Linear interpolation
const lerp = function(start, end, t){
return start * (1 - t) + end * t;
}