Skip to content

Instantly share code, notes, and snippets.

@kylegach
Created May 1, 2016 21:25
Show Gist options
  • Save kylegach/841d32145faff74b8162d03b4517d1bd to your computer and use it in GitHub Desktop.
Save kylegach/841d32145faff74b8162d03b4517d1bd to your computer and use it in GitHub Desktop.
#deviceFrame, hr {
box-sizing: content-box
}
.footnotes, .markdown pre, .markdown table {
font-size: .875rem
}
a:link, abbr[title] {
text-decoration: none
}
#deviceFrame {
background-color: #111;
border-radius: 8px;
left: 50%;
padding: 3%;
position: absolute;
top: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
ol>li, sup, ul>li {
position: relative
}
#deviceFrame>svg {
border: 1px solid #000
}
.white {
fill: #fff
}
.black {
fill: #333
}
.accent {
fill: #dae4f0
}
.border {
fill: #b0c0d0
}
.blue {
fill: #0b5486
}
.darkBlue {
fill: #003a5d
}
.red {
fill: #e7243c
}
.text {
opacity: .2
}
.text.heading {
opacity: .5
}
.text.input-label, .text.input-label--filled {
opacity: .2
}
.button {
fill: #a7c6e4
}
.buttonBorder {
fill: #8ea8c2
}
.green {
fill: #d3d657
}
.greenBorder {
fill: #b3b64a
}
.overlay {
fill: #000;
opacity: 0
}
.input {
fill: #fff;
stroke: #b0c0d0
}
.input.filled {
fill: #fafbfc
}
.icon {
fill: none;
stroke: #777
}
.icon--blue {
fill: none;
stroke: #0b5486
}
.icon--white {
fill: none;
stroke: #fff
}
.container, .layout, .widget {
fill: none;
stroke-width: 4
}
.layout {
stroke: #146a90
}
.container {
stroke: #eec13a
}
.widget {
stroke: #7dc577;
stroke-width: 16
}
.markdown h2, .markdown h3, .markdown ol, .markdown p, .markdown table, .markdown ul {
margin: 1.5rem 0
}
.markdown h2, .markdown h3 {
margin-top: 0
}
.markdown h2:not(:first-child), .markdown h3:not(:first-child) {
margin-top: 2.5rem
}
@media (min-width:40em) {
.markdown ol, .markdown ul {
padding-left: 0
}
.markdown .left\@sm {
margin-right: 1.5rem
}
.markdown .right\@sm {
margin-left: 1.5rem
}
.markdown .pull\@sm {
margin-left: -8rem
}
.markdown .push\@sm {
margin-right: -8rem
}
}
.markdown ol>li, .markdown ul>li {
margin-bottom: .75rem
}
.markdown figure, .markdown>img {
background-color: hsla(0, 0%, 100%, .5);
display: block;
margin: 0 auto 1.5rem;
padding: .5rem
}
.markdown table {
border-collapse: collapse;
min-width: 100%
}
.markdown td, .markdown th {
border-bottom: 1px solid rgba(29, 54, 83, .25);
padding: .5rem 2rem .5rem 0;
text-align: left
}
.markdown th {
font-weight: 700
}
.markdown figcaption, .markdown table>caption {
font-size: .875rem;
font-style: italic
}
.markdown table>caption {
caption-side: bottom;
text-align: center;
margin-top: .5rem
}
.markdown figcaption {
display: inline-block;
margin: .5rem auto 0;
text-align: left
}
.markdown figure>img, article, aside, figcaption, figure, footer, header, main, nav, section, summary {
display: block
}
.markdown figure, .textCenter {
text-align: center
}
.markdown figure {
margin-bottom: 1.5rem
}
.markdown figure>* {
margin: 0 auto
}
.markdown pre {
background: rgba(0, 0, 0, .0625);
overflow: auto;
padding: 1rem;
margin: 1.5rem 0
}
button, hr, input {
overflow: visible
}
.pr-0, .px-0 {
padding-right: 0
}
.pt-0, .py-0 {
padding-top: 0
}
.pb-0, .py-0 {
padding-bottom: 0
}
.markdown .left {
margin-right: 1.5rem
}
.markdown .right {
margin-left: 1.5rem
}
.footnotes-list, .footnotes-list p {
margin: 0
}
.footnotes-sep {
border: none;
border-top: 1px solid rgba(29, 54, 83, .25);
margin: 1.5rem 0
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
audio, video {
display: inline-block
}
.listReset>li:before, [hidden] {
display: none
}
audio:not([controls]) {
display: none;
height: 0
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active, a:hover {
outline-width: 0
}
b, strong {
font-weight: inherit;
font-weight: bolder
}
h1 {
font-size: 2em;
margin: .67em 0
}
.mt-0, .my-0, figure, h1, h2, h3, h4, h5, h6, ol, p, ul {
margin-top: 0
}
small {
font-size: 80%
}
sup {
font-size: 75%;
line-height: 0;
vertical-align: baseline;
top: -.5em
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code, pre {
font-family: monospace;
font-size: 1em
}
hr {
height: 0
}
button, input {
font: inherit;
margin: 0
}
.hide, .overflow-hidden {
overflow: hidden
}
button {
text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
outline: ButtonText dotted 1px
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
html {
box-sizing: border-box;
font-size: 100%
}
*, :after, :before {
box-sizing: inherit
}
@media (min-width:72em) {
html {
font-size: 120%
}
}
img, svg {
height: auto;
max-width: 100%
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
line-height: 1.5
}
ol, ul {
counter-reset: a;
list-style: none
}
ol>li:before, ul>li:before {
color: rgba(29, 54, 83, .5);
position: absolute;
top: 0;
right: 100%;
margin-right: .5rem
}
.mr-0, .mx-0 {
margin-right: 0
}
ol {
padding-left: 1.5em
}
ol>li:before {
content: counter(a) ".";
counter-increment: a
}
ul {
padding-left: .9em
}
.listReset, .pl-0, .px-0 {
padding-left: 0
}
ul>li:before {
content: "\2022"
}
abbr[title] {
border-bottom: 1px dotted
}
figure {
margin: 0
}
:last-child:not(:first-child) {
margin-bottom: 0!important
}
.mb-0, .my-0 {
margin-bottom: 0
}
a:link {
border-bottom: 1px solid rgba(20, 106, 144, .5);
color: #146a90
}
a:visited {
color: #24404c;
border-bottom-color: rgba(36, 64, 76, .5)
}
a:focus, a:hover {
border-bottom-color: #146a90;
color: #146a90
}
.camoLink:link, .camoLink:visited {
border-bottom: 0;
color: inherit!important
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: league_spartanregular;
font-weight: 400;
letter-spacing: .05em
}
.fontSize-inherit {
font-size: inherit
}
.color-inherit {
color: inherit
}
.bold {
font-weight: 700
}
.regular {
font-weight: 400
}
.italic {
font-style: italic
}
.normal {
font-style: normal
}
.caps {
text-transform: uppercase;
letter-spacing: .1em
}
.textRight {
text-align: right
}
.lineHeight-1 {
line-height: 1
}
.lineHeight-2 {
line-height: 1.125
}
.lineHeight-3 {
line-height: 1.25
}
.lineHeight-4 {
line-height: 1.5
}
.lineHeight-44 {
line-height: 44px
}
.fs-1, .h1 {
font-size: 2rem
}
.fs-2, .h2 {
font-size: 1.5rem
}
.fs-3, .h3 {
font-size: 1.25rem
}
.fs-4, .h4 {
font-size: 1rem
}
.fs-5, .h5 {
font-size: .875rem
}
.fs-6, .h6 {
font-size: .75rem
}
.hide {
position: absolute!important;
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px)
}
.display-none {
display: none!important
}
@media (max-width:39.999em) {
.hide\@xs {
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px)
}
.display-none\@xs {
display: none!important
}
}
@media (min-width:40em) and (max-width:59.999em) {
.hide\@sm-md {
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px)
}
.display-none\@sm-md {
display: none!important
}
}
.inline {
display: inline
}
.block {
display: block
}
.inlineBlock {
display: inline-block
}
.table {
display: table
}
.overflow-auto {
overflow: auto
}
.cf:after, .cf:before {
content: " ";
display: table
}
.cf:after {
clear: both
}
.left {
float: left
}
.right {
float: right
}
.float-none {
float: none
}
.w-25 {
width: 25%
}
.w-33 {
width: 33.333333333%
}
.w-50 {
width: 50%
}
.w-66 {
width: 66.666666666%
}
.w-75 {
width: 75%
}
.w-100 {
width: 100%
}
.maxW-1 {
max-width: 25rem
}
.maxW-2 {
max-width: 30rem
}
.maxW-3 {
max-width: 40rem
}
.maxW-4 {
max-width: 60rem
}
.maxW-25 {
max-width: 25%
}
.maxW-33 {
max-width: 33.333333333%
}
.maxW-50 {
max-width: 50%
}
.maxW-66 {
max-width: 66.666666666%
}
.maxW-75 {
max-width: 75%
}
.maxW-100 {
max-width: 100%
}
.relative {
position: relative
}
.absolute {
position: absolute
}
.fixed {
position: fixed
}
.t-0 {
top: 0
}
.r-0 {
right: 0
}
.b-0 {
bottom: 0
}
.l-0 {
left: 0
}
.center {
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%)
}
.m-0 {
margin: 0
}
.ml-0, .mx-0 {
margin-left: 0
}
.mr-1, .mx-1 {
margin-right: .5rem
}
.mt-1, .my-1 {
margin-top: .5rem
}
.mb-1, .my-1 {
margin-bottom: .5rem
}
.m-1 {
margin: .5rem
}
.ml-1, .mx-1 {
margin-left: .5rem
}
.mr-2, .mx-2 {
margin-right: 1rem
}
.mt-2, .my-2 {
margin-top: 1rem
}
.mb-2, .my-2 {
margin-bottom: 1rem
}
.m-2 {
margin: 1rem
}
.ml-2, .mx-2 {
margin-left: 1rem
}
.mr-3, .mx-3 {
margin-right: 2rem
}
.mt-3, .my-3 {
margin-top: 2rem
}
.mb-3, .my-3 {
margin-bottom: 2rem
}
.m-3 {
margin: 2rem
}
.ml-3, .mx-3 {
margin-left: 2rem
}
.mr-4, .mx-4 {
margin-right: 4rem
}
.mt-4, .my-4 {
margin-top: 4rem
}
.mb-4, .my-4 {
margin-bottom: 4rem
}
.m-4 {
margin: 4rem
}
.ml-4, .mx-4 {
margin-left: 4rem
}
.mx-n1 {
margin-left: -.5rem;
margin-right: -.5rem
}
.mx-n2 {
margin-left: -1rem;
margin-right: -1rem
}
.mx-n3 {
margin-left: -2rem;
margin-right: -2rem
}
.mx-n4 {
margin-left: -4rem;
margin-right: -4rem
}
.mr-n1 {
margin-right: -.5rem
}
.mr-n2 {
margin-right: -1rem
}
.mr-n3 {
margin-right: -2rem
}
.mr-n4 {
margin-right: -4rem
}
.ml-n1 {
margin-left: -.5rem
}
.ml-n2 {
margin-left: -1rem
}
.ml-n3 {
margin-left: -2rem
}
.ml-n4 {
margin-left: -4rem
}
.ml-auto, .mx-auto {
margin-left: auto
}
.mr-auto, .mx-auto {
margin-right: auto
}
.p-0 {
padding: 0
}
.pr-1, .px-1 {
padding-right: .5rem
}
.pt-1, .py-1 {
padding-top: .5rem
}
.pb-1, .py-1 {
padding-bottom: .5rem
}
.p-1 {
padding: .5rem
}
.pl-1, .px-1 {
padding-left: .5rem
}
.pr-2, .px-2 {
padding-right: 1rem
}
.pt-2, .py-2 {
padding-top: 1rem
}
.pb-2, .py-2 {
padding-bottom: 1rem
}
.p-2 {
padding: 1rem
}
.pl-2, .px-2 {
padding-left: 1rem
}
.pr-3, .px-3 {
padding-right: 2rem
}
.pt-3, .py-3 {
padding-top: 2rem
}
.pb-3, .py-3 {
padding-bottom: 2rem
}
.p-3 {
padding: 2rem
}
.pl-3, .px-3 {
padding-left: 2rem
}
.pr-4, .px-4 {
padding-right: 4rem
}
.pt-4, .py-4 {
padding-top: 4rem
}
.pb-4, .py-4 {
padding-bottom: 4rem
}
.p-4 {
padding: 4rem
}
.pl-4, .px-4 {
padding-left: 4rem
}
.flex {
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
@media (min-width:40em) {
.hide\@sm {
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px)
}
.display-none\@sm {
display: none!important
}
.left\@sm {
float: left
}
.right\@sm {
float: right
}
.float-none\@sm {
float: none
}
.w-25\@sm {
width: 25%
}
.w-33\@sm {
width: 33.333333333%
}
.w-50\@sm {
width: 50%
}
.w-66\@sm {
width: 66.666666666%
}
.w-75\@sm {
width: 75%
}
.w-100\@sm {
width: 100%
}
.m-0\@sm {
margin: 0
}
.mt-0\@sm {
margin-top: 0
}
.mr-0\@sm {
margin-right: 0
}
.mb-0\@sm {
margin-bottom: 0
}
.ml-0\@sm, .mx-0\@sm {
margin-left: 0
}
.mx-0\@sm {
margin-right: 0
}
.my-0\@sm {
margin-top: 0;
margin-bottom: 0
}
.m-1\@sm {
margin: .5rem
}
.mt-1\@sm {
margin-top: .5rem
}
.mr-1\@sm {
margin-right: .5rem
}
.mb-1\@sm {
margin-bottom: .5rem
}
.ml-1\@sm, .mx-1\@sm {
margin-left: .5rem
}
.mx-1\@sm {
margin-right: .5rem
}
.my-1\@sm {
margin-top: .5rem;
margin-bottom: .5rem
}
.m-2\@sm {
margin: 1rem
}
.mt-2\@sm {
margin-top: 1rem
}
.mr-2\@sm {
margin-right: 1rem
}
.mb-2\@sm {
margin-bottom: 1rem
}
.ml-2\@sm, .mx-2\@sm {
margin-left: 1rem
}
.mx-2\@sm {
margin-right: 1rem
}
.my-2\@sm {
margin-top: 1rem;
margin-bottom: 1rem
}
.m-3\@sm {
margin: 2rem
}
.mt-3\@sm {
margin-top: 2rem
}
.mr-3\@sm {
margin-right: 2rem
}
.mb-3\@sm {
margin-bottom: 2rem
}
.ml-3\@sm, .mx-3\@sm {
margin-left: 2rem
}
.mx-3\@sm {
margin-right: 2rem
}
.my-3\@sm {
margin-top: 2rem;
margin-bottom: 2rem
}
.m-4\@sm {
margin: 4rem
}
.mt-4\@sm {
margin-top: 4rem
}
.mr-4\@sm {
margin-right: 4rem
}
.mb-4\@sm {
margin-bottom: 4rem
}
.ml-4\@sm, .mx-4\@sm {
margin-left: 4rem
}
.mx-4\@sm {
margin-right: 4rem
}
.my-4\@sm {
margin-top: 4rem;
margin-bottom: 4rem
}
.mx-n1\@sm {
margin-left: -.5rem;
margin-right: -.5rem
}
.mx-n2\@sm {
margin-left: -1rem;
margin-right: -1rem
}
.mx-n3\@sm {
margin-left: -2rem;
margin-right: -2rem
}
.mx-n4\@sm {
margin-left: -4rem;
margin-right: -4rem
}
.mr-n1\@sm {
margin-right: -.5rem
}
.mr-n2\@sm {
margin-right: -1rem
}
.mr-n3\@sm {
margin-right: -2rem
}
.mr-n4\@sm {
margin-right: -4rem
}
.ml-n1\@sm {
margin-left: -.5rem
}
.ml-n2\@sm {
margin-left: -1rem
}
.ml-n3\@sm {
margin-left: -2rem
}
.ml-n4\@sm {
margin-left: -4rem
}
.ml-auto\@sm {
margin-left: auto
}
.mr-auto\@sm, .mx-auto\@sm {
margin-right: auto
}
.mx-auto\@sm {
margin-left: auto
}
.p-0\@sm {
padding: 0
}
.pt-0\@sm {
padding-top: 0
}
.pr-0\@sm {
padding-right: 0
}
.pb-0\@sm {
padding-bottom: 0
}
.pl-0\@sm, .px-0\@sm {
padding-left: 0
}
.px-0\@sm {
padding-right: 0
}
.py-0\@sm {
padding-top: 0;
padding-bottom: 0
}
.p-1\@sm {
padding: .5rem
}
.pt-1\@sm {
padding-top: .5rem
}
.pr-1\@sm {
padding-right: .5rem
}
.pb-1\@sm {
padding-bottom: .5rem
}
.pl-1\@sm, .px-1\@sm {
padding-left: .5rem
}
.px-1\@sm {
padding-right: .5rem
}
.py-1\@sm {
padding-top: .5rem;
padding-bottom: .5rem
}
.p-2\@sm {
padding: 1rem
}
.pt-2\@sm {
padding-top: 1rem
}
.pr-2\@sm {
padding-right: 1rem
}
.pb-2\@sm {
padding-bottom: 1rem
}
.pl-2\@sm, .px-2\@sm {
padding-left: 1rem
}
.px-2\@sm {
padding-right: 1rem
}
.py-2\@sm {
padding-top: 1rem;
padding-bottom: 1rem
}
.p-3\@sm {
padding: 2rem
}
.pt-3\@sm {
padding-top: 2rem
}
.pr-3\@sm {
padding-right: 2rem
}
.pb-3\@sm {
padding-bottom: 2rem
}
.pl-3\@sm, .px-3\@sm {
padding-left: 2rem
}
.px-3\@sm {
padding-right: 2rem
}
.py-3\@sm {
padding-top: 2rem;
padding-bottom: 2rem
}
.p-4\@sm {
padding: 4rem
}
.pt-4\@sm {
padding-top: 4rem
}
.pr-4\@sm {
padding-right: 4rem
}
.pb-4\@sm {
padding-bottom: 4rem
}
.pl-4\@sm, .px-4\@sm {
padding-left: 4rem
}
.px-4\@sm {
padding-right: 4rem
}
.py-4\@sm {
padding-top: 4rem;
padding-bottom: 4rem
}
.flex\@sm {
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
}
.flex-column {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.items-start {
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start
}
.items-end {
-webkit-align-items: flex-end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end
}
.items-center {
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center
}
.items-baseline {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
-ms-grid-row-align: baseline;
align-items: baseline
}
.justify-start {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start
}
.justify-end {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end
}
.justify-center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.justify-between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.content-start {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start
}
.content-end {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end
}
.content-center {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center
}
.content-between {
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between
}
.flexItem-25 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%
}
.flexItem-33 {
-webkit-flex: 0 0 33.333333333%;
-ms-flex: 0 0 33.333333333%;
flex: 0 0 33.333333333%
}
.flexItem-50 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%
}
.flexItem-66 {
-webkit-flex: 0 0 66.666666666%;
-ms-flex: 0 0 66.666666666%;
flex: 0 0 66.666666666%
}
.flexItem-75 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%
}
.flexItem-100 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%
}
.flexItem-auto {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
min-height: 0
}
.flexItem-none {
-webkit-flex: none;
-ms-flex: none;
flex: none
}
.order-0 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0
}
.order-1 {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.order-2 {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2
}
.order-3 {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3
}
.order-last {
-webkit-order: 99999;
-ms-flex-order: 99999;
order: 99999
}
.border {
border-style: solid;
border-width: 1px
}
.border-top {
border-top-style: solid;
border-top-width: 1px
}
.border-right {
border-right-style: solid;
border-right-width: 1px
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px
}
.border-left {
border-left-style: solid;
border-left-width: 1px
}
.border-none {
border: 0
}
.borderColor-light {
border-color: rgba(29, 54, 83, .25)
}
.circle {
border-radius: 50%
}
.bgDarker-1 {
background-color: rgba(0, 0, 0, .0625)
}
.bgDarker-2 {
background-color: rgba(0, 0, 0, .125)
}
.bgDarker-3 {
background-color: rgba(0, 0, 0, .25)
}
.bgDarker-4 {
background-color: rgba(0, 0, 0, .5)
}
.wrap {
color: #1d3653;
background-color: #f6f5f3;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh
}
.skipLink {
top: 0;
left: 0
}
.skipLink:focus {
clip: auto;
clip: initial;
height: auto;
width: auto;
overflow: visible
}
.svgHolder {
padding-bottom: 75%;
position: relative
}
.svgHolder>svg {
left: 50%;
position: absolute;
top: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
@media (min-width:60em) {
.markdown .left\@md {
margin-right: 1.5rem
}
.markdown .right\@md {
margin-left: 1.5rem
}
.markdown .pull\@md {
margin-left: -8rem
}
.markdown .push\@md {
margin-right: -8rem
}
.hide\@md {
position: absolute!important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px)
}
.display-none\@md {
display: none!important
}
.left\@md {
float: left
}
.right\@md {
float: right
}
.float-none\@md {
float: none
}
.w-25\@md {
width: 25%
}
.w-33\@md {
width: 33.333333333%
}
.w-50\@md {
width: 50%
}
.w-66\@md {
width: 66.666666666%
}
.w-75\@md {
width: 75%
}
.w-100\@md {
width: 100%
}
.m-0\@md {
margin: 0
}
.mt-0\@md {
margin-top: 0
}
.mr-0\@md {
margin-right: 0
}
.mb-0\@md {
margin-bottom: 0
}
.ml-0\@md, .mx-0\@md {
margin-left: 0
}
.mx-0\@md {
margin-right: 0
}
.my-0\@md {
margin-top: 0;
margin-bottom: 0
}
.m-1\@md {
margin: .5rem
}
.mt-1\@md {
margin-top: .5rem
}
.mr-1\@md {
margin-right: .5rem
}
.mb-1\@md {
margin-bottom: .5rem
}
.ml-1\@md, .mx-1\@md {
margin-left: .5rem
}
.mx-1\@md {
margin-right: .5rem
}
.my-1\@md {
margin-top: .5rem;
margin-bottom: .5rem
}
.m-2\@md {
margin: 1rem
}
.mt-2\@md {
margin-top: 1rem
}
.mr-2\@md {
margin-right: 1rem
}
.mb-2\@md {
margin-bottom: 1rem
}
.ml-2\@md, .mx-2\@md {
margin-left: 1rem
}
.mx-2\@md {
margin-right: 1rem
}
.my-2\@md {
margin-top: 1rem;
margin-bottom: 1rem
}
.m-3\@md {
margin: 2rem
}
.mt-3\@md {
margin-top: 2rem
}
.mr-3\@md {
margin-right: 2rem
}
.mb-3\@md {
margin-bottom: 2rem
}
.ml-3\@md, .mx-3\@md {
margin-left: 2rem
}
.mx-3\@md {
margin-right: 2rem
}
.my-3\@md {
margin-top: 2rem;
margin-bottom: 2rem
}
.m-4\@md {
margin: 4rem
}
.mt-4\@md {
margin-top: 4rem
}
.mr-4\@md {
margin-right: 4rem
}
.mb-4\@md {
margin-bottom: 4rem
}
.ml-4\@md, .mx-4\@md {
margin-left: 4rem
}
.mx-4\@md {
margin-right: 4rem
}
.my-4\@md {
margin-top: 4rem;
margin-bottom: 4rem
}
.mx-n1\@md {
margin-left: -.5rem;
margin-right: -.5rem
}
.mx-n2\@md {
margin-left: -1rem;
margin-right: -1rem
}
.mx-n3\@md {
margin-left: -2rem;
margin-right: -2rem
}
.mx-n4\@md {
margin-left: -4rem;
margin-right: -4rem
}
.mr-n1\@md {
margin-right: -.5rem
}
.mr-n2\@md {
margin-right: -1rem
}
.mr-n3\@md {
margin-right: -2rem
}
.mr-n4\@md {
margin-right: -4rem
}
.ml-n1\@md {
margin-left: -.5rem
}
.ml-n2\@md {
margin-left: -1rem
}
.ml-n3\@md {
margin-left: -2rem
}
.ml-n4\@md {
margin-left: -4rem
}
.ml-auto\@md {
margin-left: auto
}
.mr-auto\@md, .mx-auto\@md {
margin-right: auto
}
.mx-auto\@md {
margin-left: auto
}
.p-0\@md {
padding: 0
}
.pt-0\@md {
padding-top: 0
}
.pr-0\@md {
padding-right: 0
}
.pb-0\@md {
padding-bottom: 0
}
.pl-0\@md, .px-0\@md {
padding-left: 0
}
.px-0\@md {
padding-right: 0
}
.py-0\@md {
padding-top: 0;
padding-bottom: 0
}
.p-1\@md {
padding: .5rem
}
.pt-1\@md {
padding-top: .5rem
}
.pr-1\@md {
padding-right: .5rem
}
.pb-1\@md {
padding-bottom: .5rem
}
.pl-1\@md, .px-1\@md {
padding-left: .5rem
}
.px-1\@md {
padding-right: .5rem
}
.py-1\@md {
padding-top: .5rem;
padding-bottom: .5rem
}
.p-2\@md {
padding: 1rem
}
.pt-2\@md {
padding-top: 1rem
}
.pr-2\@md {
padding-right: 1rem
}
.pb-2\@md {
padding-bottom: 1rem
}
.pl-2\@md, .px-2\@md {
padding-left: 1rem
}
.px-2\@md {
padding-right: 1rem
}
.py-2\@md {
padding-top: 1rem;
padding-bottom: 1rem
}
.p-3\@md {
padding: 2rem
}
.pt-3\@md {
padding-top: 2rem
}
.pr-3\@md {
padding-right: 2rem
}
.pb-3\@md {
padding-bottom: 2rem
}
.pl-3\@md, .px-3\@md {
padding-left: 2rem
}
.px-3\@md {
padding-right: 2rem
}
.py-3\@md {
padding-top: 2rem;
padding-bottom: 2rem
}
.p-4\@md {
padding: 4rem
}
.pt-4\@md {
padding-top: 4rem
}
.pr-4\@md {
padding-right: 4rem
}
.pb-4\@md {
padding-bottom: 4rem
}
.pl-4\@md, .px-4\@md {
padding-left: 4rem
}
.px-4\@md {
padding-right: 4rem
}
.py-4\@md {
padding-top: 4rem;
padding-bottom: 4rem
}
.flex\@md {
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.border-none\@md {
border: 0
}
.avatar {
left: 0;
position: absolute;
top: 3rem;
width: 150px
}
}
.content {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 100%
}
.footer {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
@font-face {
font-family: league_spartanregular;
src: url(c7ed5423a751311725c098072f075cec.eot);
src: url(c7ed5423a751311725c098072f075cec.eot?#iefix) format('embedded-opentype'), url(19dc6d97d05409cdd8b0a14136dd847e.woff2) format('woff2'), url(06552bb686814884b603fac22402cae0.woff) format('woff'), url(f5ce8148de8219eca39ed30ec434fb42.ttf) format('truetype');
font-weight: 400;
font-style: normal
}
.sectionBlock--kyleGach:before {
background-color: #1885b4
}
[class*=sectionBlock]:before {
bottom: 0;
content: "";
display: block;
left: -8px;
left: -.5rem;
position: absolute;
top: 0;
width: 4px
}
@media (min-width:60em) {
[class*=sectionBlock]:before {
left: calc(25% - 2px)
}
}
.sectionBlock--work:before {
background-color: #c74e43
}
.sectionBlock--writing:before {
background-color: #eec13a
}
.sectionBlock--about:before {
background-color: #7dc577
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment