···11+{% include header.html %}
22+33+{% assign user = site.github.organization_members[0] %}
44+55+<div class="d-md-flex">
66+ <div class="flex-self-stretch border-bottom border-md-bottom-0 border-md-right col-md-5 col-lg-4 col-xl-3 px-4 py-6 px-lg-6">
77+ <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
88+ <h1 class="mb-2">{{ site.title }}</h1>
99+ <p class="mb-3 f4 text-gray">
1010+ Hi! I'm Ben. I love two things: bridges and smiling. I'm an aspiring developer who is learning how to use GitHub to build the stuff I wish existed. I'm looking to meet other developers who can help to contribute to the projects I have started.
1111+ </p>
1212+ <div class="f4 mb-6">
1313+ <div class="mb-3">
1414+ {% octicon mark-github height:20 class:"mr-1 v-align-middle" aria-label:GitHub %}
1515+ <a href="https://github.com/{{ user.login }}">
1616+ @{{ user.login }}
1717+ </a>
1818+ </div>
1919+ <div class="mb-3">
2020+ {% octicon mail height:20 class:"mr-1 v-align-middle" aria-label:Email %}
2121+ <a href="mailto:{{ user.email }}">
2222+ {{ site.email }}
2323+ </a>
2424+ </div>
2525+ <div class="">
2626+ {% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
2727+ Austin, TX
2828+ </div>
2929+ </div>
3030+ </div>
3131+ <div class="px-4 py-6 px-lg-6">
3232+ {{ content }}
3333+ </div>
3434+</div>
3535+3636+{% include footer.html %}
+36
_layouts/stacked.html
···11+{% include header.html %}
22+33+{% assign user = site.github.organization_members[0] %}
44+55+<div class="container-lg py-6 p-responsive text-center">
66+ <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
77+ <h1 class="mb-2">{{ site.title }}</h1>
88+ <p class="col-lg-8 mx-auto mb-3 f3 text-gray">
99+ Hi! I'm Ben. I love two things: bridges and smiling. I'm an aspiring developer who is learning how to use GitHub to build the stuff I wish existed. I'm looking to meet other developers who can help to contribute to the projects I have started.
1010+ </p>
1111+ <div class="f4 mb-6">
1212+ <div class="d-md-inline-block mr-3">
1313+ {% octicon mark-github height:20 class:"mr-1 v-align-middle" aria-label:GitHub %}
1414+ <a href="https://github.com/{{ user.login }}">
1515+ @{{ user.login }}
1616+ </a>
1717+ </div>
1818+ <div class="d-md-inline-block mr-3">
1919+ {% octicon mail height:20 class:"mr-1 v-align-middle" aria-label:Email %}
2020+ <a href="mailto:{{ user.email }}">
2121+ {{ site.email }}
2222+ </a>
2323+ </div>
2424+ <div class="d-md-inline-block">
2525+ {% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
2626+ Austin, TX
2727+ </div>
2828+ </div>
2929+3030+ {{ content }}
3131+3232+</div>
3333+3434+3535+3636+{% include footer.html %}
+527
_site/assets/styles.css
···66 */
77/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
88/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
99+@import url("https://fonts.googleapis.com/css?family=Rubik:400,500,700,900");
910html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
10111112/** Remove the margin in all browsers (opinionated). */
···3243324432443245.show-on-focus { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
32453246.show-on-focus:focus { z-index: 20; width: auto; height: auto; clip: auto; }
32473247+32483248+/*!
32493249+ * Primer-marketing
32503250+ * http://primer.github.io
32513251+ *
32523252+ * Released under MIT license. Copyright (c) 2019 GitHub Inc.
32533253+ */
32543254+.alt-mono-font { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
32553255+32563256+.alt-h0, .alt-h1, .alt-h2, .alt-h3, .alt-h4, .alt-h5, .alt-h6, .alt-lead { -webkit-font-smoothing: antialiased; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; }
32573257+32583258+.alt-h0 { font-size: 48px; font-weight: 300; }
32593259+@media (min-width: 768px) { .alt-h0 { font-size: 54px; } }
32603260+@media (min-width: 1012px) { .alt-h0 { font-size: 72px; } }
32613261+32623262+.alt-h1 { font-size: 36px; font-weight: 300; }
32633263+@media (min-width: 768px) { .alt-h1 { font-size: 48px; } }
32643264+@media (min-width: 1012px) { .alt-h1 { font-size: 54px; } }
32653265+32663266+.alt-h2 { font-size: 28px; font-weight: 300; }
32673267+@media (min-width: 768px) { .alt-h2 { font-size: 34px; } }
32683268+@media (min-width: 1012px) { .alt-h2 { font-size: 38px; } }
32693269+32703270+.alt-h3 { font-size: 18px; font-weight: 400; }
32713271+@media (min-width: 768px) { .alt-h3 { font-size: 20px; } }
32723272+@media (min-width: 1012px) { .alt-h3 { font-size: 22px; } }
32733273+32743274+.alt-h4 { font-size: 16px; font-weight: 500; }
32753275+32763276+.alt-h5 { font-size: 14px; font-weight: 500; }
32773277+32783278+.alt-h6 { font-size: 12px; font-weight: 500; }
32793279+32803280+.alt-lead { -webkit-font-smoothing: antialiased; font-size: 21px; font-weight: 300; }
32813281+@media (min-width: 768px) { .alt-lead { font-size: 24px; } }
32823282+@media (min-width: 1012px) { .alt-lead { font-size: 26px; } }
32833283+32843284+.alt-text-small { font-size: 14px !important; }
32853285+32863286+.pullquote { padding-top: 0; padding-bottom: 0; padding-left: 8px; margin-bottom: 24px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 16px; line-height: 1.4; color: #586069; border-left: 3px solid #e1e4e8; }
32873287+@media (min-width: 768px) { .pullquote { padding-left: 12px; margin-bottom: 32px; margin-left: -15px; font-size: 18px; line-height: 1.5; } }
32883288+32893289+.btn-orange { color: #fff; background-color: #d25a08; background-image: linear-gradient(-180deg, #f7802f 0%, #d25a08 90%); }
32903290+.btn-orange:focus, .btn-orange.focus { box-shadow: 0 0 0 0.2em rgba(247, 128, 47, 0.4); }
32913291+.btn-orange:hover, .btn-orange.hover { background-color: #c85607; background-image: linear-gradient(-180deg, #f77a25 0%, #c85607 90%); background-position: -0.5em; border-color: rgba(27, 31, 35, 0.5); }
32923292+.btn-orange:active, .btn-orange.selected, [open] > .btn-orange { background-color: #c75e17; background-image: none; border-color: rgba(27, 31, 35, 0.5); box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); }
32933293+.btn-orange:disabled, .btn-orange.disabled { color: rgba(255, 255, 255, 0.75); background-color: #e9ad84; background-image: none; border-color: rgba(27, 31, 35, 0.2); box-shadow: none; }
32943294+.btn-orange .Counter { color: #f46909; background-color: #fff; }
32953295+32963296+.btn-outline-purple { color: #6f42c1; background-color: #fff; background-image: none; }
32973297+.btn-outline-purple .Counter { background-color: rgba(27, 31, 35, 0.07); }
32983298+.btn-outline-purple:hover, .btn-outline-purple:active, .btn-outline-purple.selected, [open] > .btn-outline-purple { color: #fff; background-color: #6f42c1; background-image: none; border-color: #6f42c1; }
32993299+.btn-outline-purple:hover .Counter, .btn-outline-purple:active .Counter, .btn-outline-purple.selected .Counter, [open] > .btn-outline-purple .Counter { color: #6f42c1; background-color: #fff; }
33003300+.btn-outline-purple:focus { border-color: #6f42c1; box-shadow: 0 0 0 0.2em rgba(111, 66, 193, 0.4); }
33013301+.btn-outline-purple:disabled, .btn-outline-purple.disabled { color: rgba(27, 31, 35, 0.3); background-color: #fff; border-color: rgba(27, 31, 35, 0.15); box-shadow: none; }
33023302+33033303+.btn-outline-orange { color: #f66a0a; background-color: #fff; background-image: none; }
33043304+.btn-outline-orange .Counter { background-color: rgba(27, 31, 35, 0.07); }
33053305+.btn-outline-orange:hover, .btn-outline-orange:active, .btn-outline-orange.selected, [open] > .btn-outline-orange { color: #fff; background-color: #f66a0a; background-image: none; border-color: #f66a0a; }
33063306+.btn-outline-orange:hover .Counter, .btn-outline-orange:active .Counter, .btn-outline-orange.selected .Counter, [open] > .btn-outline-orange .Counter { color: #f66a0a; background-color: #fff; }
33073307+.btn-outline-orange:focus { border-color: #f66a0a; box-shadow: 0 0 0 0.2em rgba(246, 106, 10, 0.4); }
33083308+.btn-outline-orange:disabled, .btn-outline-orange.disabled { color: rgba(27, 31, 35, 0.3); background-color: #fff; border-color: rgba(27, 31, 35, 0.15); box-shadow: none; }
33093309+33103310+.btn-outline-green { color: #28a745; background-color: #fff; background-image: none; }
33113311+.btn-outline-green .Counter { background-color: rgba(27, 31, 35, 0.07); }
33123312+.btn-outline-green:hover, .btn-outline-green:active, .btn-outline-green.selected, [open] > .btn-outline-green { color: #fff; background-color: #28a745; background-image: none; border-color: #28a745; }
33133313+.btn-outline-green:hover .Counter, .btn-outline-green:active .Counter, .btn-outline-green.selected .Counter, [open] > .btn-outline-green .Counter { color: #28a745; background-color: #fff; }
33143314+.btn-outline-green:focus { border-color: #28a745; box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.4); }
33153315+.btn-outline-green:disabled, .btn-outline-green.disabled { color: rgba(27, 31, 35, 0.3); background-color: #fff; border-color: rgba(27, 31, 35, 0.15); box-shadow: none; }
33163316+33173317+.btn-transparent { color: #fff; background-color: transparent; background-image: none; border: 1px solid rgba(255, 255, 255, 0.5); }
33183318+.btn-transparent:hover, .btn-transparent:active { color: #2f363d; background-color: #fff; background-image: none; border-color: #fff; }
33193319+33203320+.jumbotron { position: relative; padding-top: 40px; padding-bottom: 40px; }
33213321+@media (min-width: 544px) { .jumbotron { padding-top: 60px; padding-bottom: 60px; } }
33223322+@media (min-width: 1280px) { .jumbotron { padding-top: 120px; padding-bottom: 120px; } }
33233323+33243324+@media (min-width: 1012px) { .jumbotron-supertron { height: 45vw; min-height: 590px; max-height: 55vh; padding-top: 80px; padding-bottom: 80px; } }
33253325+33263326+.jumbotron-minitron { padding-top: 24px; padding-bottom: 24px; }
33273327+@media (min-width: 544px) { .jumbotron-minitron { padding-top: 32px; padding-bottom: 32px; } }
33283328+33293329+.jumbotron-shadow::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; content: " "; background-color: transparent; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); background-repeat: repeat-x; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); }
33303330+33313331+.jumbotron-photo { position: relative; background-color: #24292e; background-size: cover; }
33323332+.jumbotron-photo::before { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.25); }
33333333+33343334+.page-section { padding: 32px 0; margin-top: 0; }
33353335+@media (min-width: 768px) { .page-section { padding: 56px 0; } }
33363336+33373337+.page-section-jumplink:target { padding-top: 112px; }
33383338+@media (min-width: 768px) { .page-section-jumplink:target { padding-top: 80px; } }
33393339+33403340+.data-table { width: 100%; margin-top: 16px; border-collapse: collapse; border: 1px #e1e4e8 solid; box-shadow: 0 1px 1px rgba(27, 31, 35, 0.05); }
33413341+.data-table th { font-weight: 400; text-align: left; }
33423342+.data-table td, .data-table th { padding: 16px; border-right: 1px #e1e4e8 solid; border-bottom: 1px #e1e4e8 solid; }
33433343+.data-table tbody th { width: 25%; }
33443344+.data-table tbody th, .data-table tbody td { border-bottom-color: #e1e4e8; }
33453345+.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 1px #e1e4e8 solid; }
33463346+33473347+.grayscale { filter: grayscale(100%); }
33483348+33493349+/* Use with .border to turn the border rgba white 0.15 */
33503350+.border-white-fade { border-color: rgba(255, 255, 255, 0.15) !important; }
33513351+33523352+@media (min-width: 544px) { /* Set position to relative */
33533353+ .position-sm-relative { position: relative !important; }
33543354+ /* Set position to absolute */
33553355+ .position-sm-absolute { position: absolute !important; }
33563356+ /* Set position to fixed */
33573357+ .position-sm-fixed { position: fixed !important; } }
33583358+@media (min-width: 768px) { /* Set position to relative */
33593359+ .position-md-relative { position: relative !important; }
33603360+ /* Set position to absolute */
33613361+ .position-md-absolute { position: absolute !important; }
33623362+ /* Set position to fixed */
33633363+ .position-md-fixed { position: fixed !important; } }
33643364+@media (min-width: 1012px) { /* Set position to relative */
33653365+ .position-lg-relative { position: relative !important; }
33663366+ /* Set position to absolute */
33673367+ .position-lg-absolute { position: absolute !important; }
33683368+ /* Set position to fixed */
33693369+ .position-lg-fixed { position: fixed !important; } }
33703370+@media (min-width: 1280px) { /* Set position to relative */
33713371+ .position-xl-relative { position: relative !important; }
33723372+ /* Set position to absolute */
33733373+ .position-xl-absolute { position: absolute !important; }
33743374+ /* Set position to fixed */
33753375+ .position-xl-fixed { position: fixed !important; } }
33763376+/* Set a 48px margin on the top */
33773377+.mt-7 { margin-top: 48px !important; }
33783378+33793379+/* Set a 48px margin on the bottom */
33803380+.mb-7 { margin-bottom: 48px !important; }
33813381+33823382+/* Set a 48px margin on the top & bottom */
33833383+.my-7 { margin-top: 48px !important; margin-bottom: 48px !important; }
33843384+33853385+/* Set a 64px margin on the top */
33863386+.mt-8 { margin-top: 64px !important; }
33873387+33883388+/* Set a 64px margin on the bottom */
33893389+.mb-8 { margin-bottom: 64px !important; }
33903390+33913391+/* Set a 64px margin on the top & bottom */
33923392+.my-8 { margin-top: 64px !important; margin-bottom: 64px !important; }
33933393+33943394+/* Set a 80px margin on the top */
33953395+.mt-9 { margin-top: 80px !important; }
33963396+33973397+/* Set a 80px margin on the bottom */
33983398+.mb-9 { margin-bottom: 80px !important; }
33993399+34003400+/* Set a 80px margin on the top & bottom */
34013401+.my-9 { margin-top: 80px !important; margin-bottom: 80px !important; }
34023402+34033403+/* Set a 96px margin on the top */
34043404+.mt-10 { margin-top: 96px !important; }
34053405+34063406+/* Set a 96px margin on the bottom */
34073407+.mb-10 { margin-bottom: 96px !important; }
34083408+34093409+/* Set a 96px margin on the top & bottom */
34103410+.my-10 { margin-top: 96px !important; margin-bottom: 96px !important; }
34113411+34123412+/* Set a 112px margin on the top */
34133413+.mt-11 { margin-top: 112px !important; }
34143414+34153415+/* Set a 112px margin on the bottom */
34163416+.mb-11 { margin-bottom: 112px !important; }
34173417+34183418+/* Set a 112px margin on the top & bottom */
34193419+.my-11 { margin-top: 112px !important; margin-bottom: 112px !important; }
34203420+34213421+/* Set a 128px margin on the top */
34223422+.mt-12 { margin-top: 128px !important; }
34233423+34243424+/* Set a 128px margin on the bottom */
34253425+.mb-12 { margin-bottom: 128px !important; }
34263426+34273427+/* Set a 128px margin on the top & bottom */
34283428+.my-12 { margin-top: 128px !important; margin-bottom: 128px !important; }
34293429+34303430+@media (min-width: 544px) { /* Set a 48px margin on the top at the breakpoint sm */
34313431+ .mt-sm-7 { margin-top: 48px !important; }
34323432+ /* Set a 48px margin on the bottom at the breakpoint sm */
34333433+ .mb-sm-7 { margin-bottom: 48px !important; }
34343434+ /* Set a 48px margin on the top & bottom at the breakpoint sm */
34353435+ .my-sm-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
34363436+@media (min-width: 544px) { /* Set a 64px margin on the top at the breakpoint sm */
34373437+ .mt-sm-8 { margin-top: 64px !important; }
34383438+ /* Set a 64px margin on the bottom at the breakpoint sm */
34393439+ .mb-sm-8 { margin-bottom: 64px !important; }
34403440+ /* Set a 64px margin on the top & bottom at the breakpoint sm */
34413441+ .my-sm-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
34423442+@media (min-width: 544px) { /* Set a 80px margin on the top at the breakpoint sm */
34433443+ .mt-sm-9 { margin-top: 80px !important; }
34443444+ /* Set a 80px margin on the bottom at the breakpoint sm */
34453445+ .mb-sm-9 { margin-bottom: 80px !important; }
34463446+ /* Set a 80px margin on the top & bottom at the breakpoint sm */
34473447+ .my-sm-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
34483448+@media (min-width: 544px) { /* Set a 96px margin on the top at the breakpoint sm */
34493449+ .mt-sm-10 { margin-top: 96px !important; }
34503450+ /* Set a 96px margin on the bottom at the breakpoint sm */
34513451+ .mb-sm-10 { margin-bottom: 96px !important; }
34523452+ /* Set a 96px margin on the top & bottom at the breakpoint sm */
34533453+ .my-sm-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
34543454+@media (min-width: 544px) { /* Set a 112px margin on the top at the breakpoint sm */
34553455+ .mt-sm-11 { margin-top: 112px !important; }
34563456+ /* Set a 112px margin on the bottom at the breakpoint sm */
34573457+ .mb-sm-11 { margin-bottom: 112px !important; }
34583458+ /* Set a 112px margin on the top & bottom at the breakpoint sm */
34593459+ .my-sm-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
34603460+@media (min-width: 544px) { /* Set a 128px margin on the top at the breakpoint sm */
34613461+ .mt-sm-12 { margin-top: 128px !important; }
34623462+ /* Set a 128px margin on the bottom at the breakpoint sm */
34633463+ .mb-sm-12 { margin-bottom: 128px !important; }
34643464+ /* Set a 128px margin on the top & bottom at the breakpoint sm */
34653465+ .my-sm-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
34663466+@media (min-width: 768px) { /* Set a 48px margin on the top at the breakpoint md */
34673467+ .mt-md-7 { margin-top: 48px !important; }
34683468+ /* Set a 48px margin on the bottom at the breakpoint md */
34693469+ .mb-md-7 { margin-bottom: 48px !important; }
34703470+ /* Set a 48px margin on the top & bottom at the breakpoint md */
34713471+ .my-md-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
34723472+@media (min-width: 768px) { /* Set a 64px margin on the top at the breakpoint md */
34733473+ .mt-md-8 { margin-top: 64px !important; }
34743474+ /* Set a 64px margin on the bottom at the breakpoint md */
34753475+ .mb-md-8 { margin-bottom: 64px !important; }
34763476+ /* Set a 64px margin on the top & bottom at the breakpoint md */
34773477+ .my-md-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
34783478+@media (min-width: 768px) { /* Set a 80px margin on the top at the breakpoint md */
34793479+ .mt-md-9 { margin-top: 80px !important; }
34803480+ /* Set a 80px margin on the bottom at the breakpoint md */
34813481+ .mb-md-9 { margin-bottom: 80px !important; }
34823482+ /* Set a 80px margin on the top & bottom at the breakpoint md */
34833483+ .my-md-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
34843484+@media (min-width: 768px) { /* Set a 96px margin on the top at the breakpoint md */
34853485+ .mt-md-10 { margin-top: 96px !important; }
34863486+ /* Set a 96px margin on the bottom at the breakpoint md */
34873487+ .mb-md-10 { margin-bottom: 96px !important; }
34883488+ /* Set a 96px margin on the top & bottom at the breakpoint md */
34893489+ .my-md-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
34903490+@media (min-width: 768px) { /* Set a 112px margin on the top at the breakpoint md */
34913491+ .mt-md-11 { margin-top: 112px !important; }
34923492+ /* Set a 112px margin on the bottom at the breakpoint md */
34933493+ .mb-md-11 { margin-bottom: 112px !important; }
34943494+ /* Set a 112px margin on the top & bottom at the breakpoint md */
34953495+ .my-md-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
34963496+@media (min-width: 768px) { /* Set a 128px margin on the top at the breakpoint md */
34973497+ .mt-md-12 { margin-top: 128px !important; }
34983498+ /* Set a 128px margin on the bottom at the breakpoint md */
34993499+ .mb-md-12 { margin-bottom: 128px !important; }
35003500+ /* Set a 128px margin on the top & bottom at the breakpoint md */
35013501+ .my-md-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
35023502+@media (min-width: 1012px) { /* Set a 48px margin on the top at the breakpoint lg */
35033503+ .mt-lg-7 { margin-top: 48px !important; }
35043504+ /* Set a 48px margin on the bottom at the breakpoint lg */
35053505+ .mb-lg-7 { margin-bottom: 48px !important; }
35063506+ /* Set a 48px margin on the top & bottom at the breakpoint lg */
35073507+ .my-lg-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
35083508+@media (min-width: 1012px) { /* Set a 64px margin on the top at the breakpoint lg */
35093509+ .mt-lg-8 { margin-top: 64px !important; }
35103510+ /* Set a 64px margin on the bottom at the breakpoint lg */
35113511+ .mb-lg-8 { margin-bottom: 64px !important; }
35123512+ /* Set a 64px margin on the top & bottom at the breakpoint lg */
35133513+ .my-lg-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
35143514+@media (min-width: 1012px) { /* Set a 80px margin on the top at the breakpoint lg */
35153515+ .mt-lg-9 { margin-top: 80px !important; }
35163516+ /* Set a 80px margin on the bottom at the breakpoint lg */
35173517+ .mb-lg-9 { margin-bottom: 80px !important; }
35183518+ /* Set a 80px margin on the top & bottom at the breakpoint lg */
35193519+ .my-lg-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
35203520+@media (min-width: 1012px) { /* Set a 96px margin on the top at the breakpoint lg */
35213521+ .mt-lg-10 { margin-top: 96px !important; }
35223522+ /* Set a 96px margin on the bottom at the breakpoint lg */
35233523+ .mb-lg-10 { margin-bottom: 96px !important; }
35243524+ /* Set a 96px margin on the top & bottom at the breakpoint lg */
35253525+ .my-lg-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
35263526+@media (min-width: 1012px) { /* Set a 112px margin on the top at the breakpoint lg */
35273527+ .mt-lg-11 { margin-top: 112px !important; }
35283528+ /* Set a 112px margin on the bottom at the breakpoint lg */
35293529+ .mb-lg-11 { margin-bottom: 112px !important; }
35303530+ /* Set a 112px margin on the top & bottom at the breakpoint lg */
35313531+ .my-lg-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
35323532+@media (min-width: 1012px) { /* Set a 128px margin on the top at the breakpoint lg */
35333533+ .mt-lg-12 { margin-top: 128px !important; }
35343534+ /* Set a 128px margin on the bottom at the breakpoint lg */
35353535+ .mb-lg-12 { margin-bottom: 128px !important; }
35363536+ /* Set a 128px margin on the top & bottom at the breakpoint lg */
35373537+ .my-lg-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
35383538+@media (min-width: 1280px) { /* Set a 48px margin on the top at the breakpoint xl */
35393539+ .mt-xl-7 { margin-top: 48px !important; }
35403540+ /* Set a 48px margin on the bottom at the breakpoint xl */
35413541+ .mb-xl-7 { margin-bottom: 48px !important; }
35423542+ /* Set a 48px margin on the top & bottom at the breakpoint xl */
35433543+ .my-xl-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
35443544+@media (min-width: 1280px) { /* Set a 64px margin on the top at the breakpoint xl */
35453545+ .mt-xl-8 { margin-top: 64px !important; }
35463546+ /* Set a 64px margin on the bottom at the breakpoint xl */
35473547+ .mb-xl-8 { margin-bottom: 64px !important; }
35483548+ /* Set a 64px margin on the top & bottom at the breakpoint xl */
35493549+ .my-xl-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
35503550+@media (min-width: 1280px) { /* Set a 80px margin on the top at the breakpoint xl */
35513551+ .mt-xl-9 { margin-top: 80px !important; }
35523552+ /* Set a 80px margin on the bottom at the breakpoint xl */
35533553+ .mb-xl-9 { margin-bottom: 80px !important; }
35543554+ /* Set a 80px margin on the top & bottom at the breakpoint xl */
35553555+ .my-xl-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
35563556+@media (min-width: 1280px) { /* Set a 96px margin on the top at the breakpoint xl */
35573557+ .mt-xl-10 { margin-top: 96px !important; }
35583558+ /* Set a 96px margin on the bottom at the breakpoint xl */
35593559+ .mb-xl-10 { margin-bottom: 96px !important; }
35603560+ /* Set a 96px margin on the top & bottom at the breakpoint xl */
35613561+ .my-xl-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
35623562+@media (min-width: 1280px) { /* Set a 112px margin on the top at the breakpoint xl */
35633563+ .mt-xl-11 { margin-top: 112px !important; }
35643564+ /* Set a 112px margin on the bottom at the breakpoint xl */
35653565+ .mb-xl-11 { margin-bottom: 112px !important; }
35663566+ /* Set a 112px margin on the top & bottom at the breakpoint xl */
35673567+ .my-xl-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
35683568+@media (min-width: 1280px) { /* Set a 128px margin on the top at the breakpoint xl */
35693569+ .mt-xl-12 { margin-top: 128px !important; }
35703570+ /* Set a 128px margin on the bottom at the breakpoint xl */
35713571+ .mb-xl-12 { margin-bottom: 128px !important; }
35723572+ /* Set a 128px margin on the top & bottom at the breakpoint xl */
35733573+ .my-xl-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
35743574+/* Set a 48px padding to the top */
35753575+.pt-7 { padding-top: 48px !important; }
35763576+35773577+/* Set a 48px padding to the bottom */
35783578+.pb-7 { padding-bottom: 48px !important; }
35793579+35803580+/* Set a 48px padding to the top & bottom */
35813581+.py-7 { padding-top: 48px !important; padding-bottom: 48px !important; }
35823582+35833583+/* Set a 64px padding to the top */
35843584+.pt-8 { padding-top: 64px !important; }
35853585+35863586+/* Set a 64px padding to the bottom */
35873587+.pb-8 { padding-bottom: 64px !important; }
35883588+35893589+/* Set a 64px padding to the top & bottom */
35903590+.py-8 { padding-top: 64px !important; padding-bottom: 64px !important; }
35913591+35923592+/* Set a 80px padding to the top */
35933593+.pt-9 { padding-top: 80px !important; }
35943594+35953595+/* Set a 80px padding to the bottom */
35963596+.pb-9 { padding-bottom: 80px !important; }
35973597+35983598+/* Set a 80px padding to the top & bottom */
35993599+.py-9 { padding-top: 80px !important; padding-bottom: 80px !important; }
36003600+36013601+/* Set a 96px padding to the top */
36023602+.pt-10 { padding-top: 96px !important; }
36033603+36043604+/* Set a 96px padding to the bottom */
36053605+.pb-10 { padding-bottom: 96px !important; }
36063606+36073607+/* Set a 96px padding to the top & bottom */
36083608+.py-10 { padding-top: 96px !important; padding-bottom: 96px !important; }
36093609+36103610+/* Set a 112px padding to the top */
36113611+.pt-11 { padding-top: 112px !important; }
36123612+36133613+/* Set a 112px padding to the bottom */
36143614+.pb-11 { padding-bottom: 112px !important; }
36153615+36163616+/* Set a 112px padding to the top & bottom */
36173617+.py-11 { padding-top: 112px !important; padding-bottom: 112px !important; }
36183618+36193619+/* Set a 128px padding to the top */
36203620+.pt-12 { padding-top: 128px !important; }
36213621+36223622+/* Set a 128px padding to the bottom */
36233623+.pb-12 { padding-bottom: 128px !important; }
36243624+36253625+/* Set a 128px padding to the top & bottom */
36263626+.py-12 { padding-top: 128px !important; padding-bottom: 128px !important; }
36273627+36283628+@media (min-width: 544px) { /* Set a 48px padding to the top at the sm breakpoint */
36293629+ .pt-sm-7 { padding-top: 48px !important; }
36303630+ /* Set a 48px padding to the bottom at the sm breakpoint */
36313631+ .pb-sm-7 { padding-bottom: 48px !important; }
36323632+ /* Set a 48px padding to the top & bottom at the sm breakpoint */
36333633+ .py-sm-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
36343634+@media (min-width: 544px) { /* Set a 64px padding to the top at the sm breakpoint */
36353635+ .pt-sm-8 { padding-top: 64px !important; }
36363636+ /* Set a 64px padding to the bottom at the sm breakpoint */
36373637+ .pb-sm-8 { padding-bottom: 64px !important; }
36383638+ /* Set a 64px padding to the top & bottom at the sm breakpoint */
36393639+ .py-sm-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
36403640+@media (min-width: 544px) { /* Set a 80px padding to the top at the sm breakpoint */
36413641+ .pt-sm-9 { padding-top: 80px !important; }
36423642+ /* Set a 80px padding to the bottom at the sm breakpoint */
36433643+ .pb-sm-9 { padding-bottom: 80px !important; }
36443644+ /* Set a 80px padding to the top & bottom at the sm breakpoint */
36453645+ .py-sm-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
36463646+@media (min-width: 544px) { /* Set a 96px padding to the top at the sm breakpoint */
36473647+ .pt-sm-10 { padding-top: 96px !important; }
36483648+ /* Set a 96px padding to the bottom at the sm breakpoint */
36493649+ .pb-sm-10 { padding-bottom: 96px !important; }
36503650+ /* Set a 96px padding to the top & bottom at the sm breakpoint */
36513651+ .py-sm-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
36523652+@media (min-width: 544px) { /* Set a 112px padding to the top at the sm breakpoint */
36533653+ .pt-sm-11 { padding-top: 112px !important; }
36543654+ /* Set a 112px padding to the bottom at the sm breakpoint */
36553655+ .pb-sm-11 { padding-bottom: 112px !important; }
36563656+ /* Set a 112px padding to the top & bottom at the sm breakpoint */
36573657+ .py-sm-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
36583658+@media (min-width: 544px) { /* Set a 128px padding to the top at the sm breakpoint */
36593659+ .pt-sm-12 { padding-top: 128px !important; }
36603660+ /* Set a 128px padding to the bottom at the sm breakpoint */
36613661+ .pb-sm-12 { padding-bottom: 128px !important; }
36623662+ /* Set a 128px padding to the top & bottom at the sm breakpoint */
36633663+ .py-sm-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
36643664+@media (min-width: 768px) { /* Set a 48px padding to the top at the md breakpoint */
36653665+ .pt-md-7 { padding-top: 48px !important; }
36663666+ /* Set a 48px padding to the bottom at the md breakpoint */
36673667+ .pb-md-7 { padding-bottom: 48px !important; }
36683668+ /* Set a 48px padding to the top & bottom at the md breakpoint */
36693669+ .py-md-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
36703670+@media (min-width: 768px) { /* Set a 64px padding to the top at the md breakpoint */
36713671+ .pt-md-8 { padding-top: 64px !important; }
36723672+ /* Set a 64px padding to the bottom at the md breakpoint */
36733673+ .pb-md-8 { padding-bottom: 64px !important; }
36743674+ /* Set a 64px padding to the top & bottom at the md breakpoint */
36753675+ .py-md-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
36763676+@media (min-width: 768px) { /* Set a 80px padding to the top at the md breakpoint */
36773677+ .pt-md-9 { padding-top: 80px !important; }
36783678+ /* Set a 80px padding to the bottom at the md breakpoint */
36793679+ .pb-md-9 { padding-bottom: 80px !important; }
36803680+ /* Set a 80px padding to the top & bottom at the md breakpoint */
36813681+ .py-md-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
36823682+@media (min-width: 768px) { /* Set a 96px padding to the top at the md breakpoint */
36833683+ .pt-md-10 { padding-top: 96px !important; }
36843684+ /* Set a 96px padding to the bottom at the md breakpoint */
36853685+ .pb-md-10 { padding-bottom: 96px !important; }
36863686+ /* Set a 96px padding to the top & bottom at the md breakpoint */
36873687+ .py-md-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
36883688+@media (min-width: 768px) { /* Set a 112px padding to the top at the md breakpoint */
36893689+ .pt-md-11 { padding-top: 112px !important; }
36903690+ /* Set a 112px padding to the bottom at the md breakpoint */
36913691+ .pb-md-11 { padding-bottom: 112px !important; }
36923692+ /* Set a 112px padding to the top & bottom at the md breakpoint */
36933693+ .py-md-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
36943694+@media (min-width: 768px) { /* Set a 128px padding to the top at the md breakpoint */
36953695+ .pt-md-12 { padding-top: 128px !important; }
36963696+ /* Set a 128px padding to the bottom at the md breakpoint */
36973697+ .pb-md-12 { padding-bottom: 128px !important; }
36983698+ /* Set a 128px padding to the top & bottom at the md breakpoint */
36993699+ .py-md-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
37003700+@media (min-width: 1012px) { /* Set a 48px padding to the top at the lg breakpoint */
37013701+ .pt-lg-7 { padding-top: 48px !important; }
37023702+ /* Set a 48px padding to the bottom at the lg breakpoint */
37033703+ .pb-lg-7 { padding-bottom: 48px !important; }
37043704+ /* Set a 48px padding to the top & bottom at the lg breakpoint */
37053705+ .py-lg-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
37063706+@media (min-width: 1012px) { /* Set a 64px padding to the top at the lg breakpoint */
37073707+ .pt-lg-8 { padding-top: 64px !important; }
37083708+ /* Set a 64px padding to the bottom at the lg breakpoint */
37093709+ .pb-lg-8 { padding-bottom: 64px !important; }
37103710+ /* Set a 64px padding to the top & bottom at the lg breakpoint */
37113711+ .py-lg-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
37123712+@media (min-width: 1012px) { /* Set a 80px padding to the top at the lg breakpoint */
37133713+ .pt-lg-9 { padding-top: 80px !important; }
37143714+ /* Set a 80px padding to the bottom at the lg breakpoint */
37153715+ .pb-lg-9 { padding-bottom: 80px !important; }
37163716+ /* Set a 80px padding to the top & bottom at the lg breakpoint */
37173717+ .py-lg-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
37183718+@media (min-width: 1012px) { /* Set a 96px padding to the top at the lg breakpoint */
37193719+ .pt-lg-10 { padding-top: 96px !important; }
37203720+ /* Set a 96px padding to the bottom at the lg breakpoint */
37213721+ .pb-lg-10 { padding-bottom: 96px !important; }
37223722+ /* Set a 96px padding to the top & bottom at the lg breakpoint */
37233723+ .py-lg-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
37243724+@media (min-width: 1012px) { /* Set a 112px padding to the top at the lg breakpoint */
37253725+ .pt-lg-11 { padding-top: 112px !important; }
37263726+ /* Set a 112px padding to the bottom at the lg breakpoint */
37273727+ .pb-lg-11 { padding-bottom: 112px !important; }
37283728+ /* Set a 112px padding to the top & bottom at the lg breakpoint */
37293729+ .py-lg-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
37303730+@media (min-width: 1012px) { /* Set a 128px padding to the top at the lg breakpoint */
37313731+ .pt-lg-12 { padding-top: 128px !important; }
37323732+ /* Set a 128px padding to the bottom at the lg breakpoint */
37333733+ .pb-lg-12 { padding-bottom: 128px !important; }
37343734+ /* Set a 128px padding to the top & bottom at the lg breakpoint */
37353735+ .py-lg-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
37363736+@media (min-width: 1280px) { /* Set a 48px padding to the top at the xl breakpoint */
37373737+ .pt-xl-7 { padding-top: 48px !important; }
37383738+ /* Set a 48px padding to the bottom at the xl breakpoint */
37393739+ .pb-xl-7 { padding-bottom: 48px !important; }
37403740+ /* Set a 48px padding to the top & bottom at the xl breakpoint */
37413741+ .py-xl-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
37423742+@media (min-width: 1280px) { /* Set a 64px padding to the top at the xl breakpoint */
37433743+ .pt-xl-8 { padding-top: 64px !important; }
37443744+ /* Set a 64px padding to the bottom at the xl breakpoint */
37453745+ .pb-xl-8 { padding-bottom: 64px !important; }
37463746+ /* Set a 64px padding to the top & bottom at the xl breakpoint */
37473747+ .py-xl-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
37483748+@media (min-width: 1280px) { /* Set a 80px padding to the top at the xl breakpoint */
37493749+ .pt-xl-9 { padding-top: 80px !important; }
37503750+ /* Set a 80px padding to the bottom at the xl breakpoint */
37513751+ .pb-xl-9 { padding-bottom: 80px !important; }
37523752+ /* Set a 80px padding to the top & bottom at the xl breakpoint */
37533753+ .py-xl-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
37543754+@media (min-width: 1280px) { /* Set a 96px padding to the top at the xl breakpoint */
37553755+ .pt-xl-10 { padding-top: 96px !important; }
37563756+ /* Set a 96px padding to the bottom at the xl breakpoint */
37573757+ .pb-xl-10 { padding-bottom: 96px !important; }
37583758+ /* Set a 96px padding to the top & bottom at the xl breakpoint */
37593759+ .py-xl-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
37603760+@media (min-width: 1280px) { /* Set a 112px padding to the top at the xl breakpoint */
37613761+ .pt-xl-11 { padding-top: 112px !important; }
37623762+ /* Set a 112px padding to the bottom at the xl breakpoint */
37633763+ .pb-xl-11 { padding-bottom: 112px !important; }
37643764+ /* Set a 112px padding to the top & bottom at the xl breakpoint */
37653765+ .py-xl-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
37663766+@media (min-width: 1280px) { /* Set a 128px padding to the top at the xl breakpoint */
37673767+ .pt-xl-12 { padding-top: 128px !important; }
37683768+ /* Set a 128px padding to the bottom at the xl breakpoint */
37693769+ .pb-xl-12 { padding-bottom: 128px !important; }
37703770+ /* Set a 128px padding to the top & bottom at the xl breakpoint */
37713771+ .py-xl-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
37723772+body { font-family: 'Rubik', sans-serif; }
···11+---
22+layout: sidebar
33+---
44+55+Hello! This is where the content for the sidebar layout will be.
+5
layout-stacked.html
···11+---
22+layout: stacked
33+---
44+55+Hello! This is where the content will be.
+21
node_modules/primer-marketing-buttons/LICENSE
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+---
22+title: Marketing Borders
33+sort_title: Borders Marketing
44+path: utilities/marketing-borders
55+status: Stable
66+---
77+88+The following border utilities are meant to used in addition to those within primer-core.
99+1010+{:toc}
1111+1212+## Border Colors
1313+1414+### White border with alpha transparency
1515+1616+Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/css/utilities/borders#border-colors).
1717+1818+```html
1919+<div class="bg-gray-dark text-white p-3 mb-2">
2020+ <span class="border border-white-fade p-2">
2121+ .border-white-fade .bg-gray-dark
2222+ </span>
2323+</div>
2424+<div class="bg-blue text-white p-3">
2525+ <span class="border border-white-fade p-2">
2626+ .border-white-fade .bg-blue
2727+ </span>
2828+</div>
2929+```
···11+---
22+title: Marketing Filters
33+path: utilities/marketing-filters
44+status: Stable
55+status_issue: https://github.com/github/design-systems/issues/302
66+---
77+88+Filter utility classes can be applied to divs or images to apply visual effects.
99+1010+<div class="flash flash-warn">
1111+ Note: CSS filters are <a href="http://caniuse.com/#feat=css-filters">not supported by IE</a>
1212+</div>
1313+1414+## Grayscale
1515+1616+Applying `.grayscale` to an element will remove all of its colors, and make it render in black and white.
1717+1818+```html
1919+<img src="https://github.com/probot.png" class="img-responsive grayscale" alt="">
2020+```
···11+---
22+title: Marketing Margin
33+sort_title: Margin Marketing
44+path: utilities/marketing-margin
55+status: Stable
66+status_issue: https://github.com/github/design-systems/issues/378
77+---
88+99+Marketing margin utilities extend [core margin utilities](/css/support/spacing) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
1010+1111+1212+## Y-axis margin utilities
1313+1414+Use marketing margin utilities to apply margin to top, bottom, or both y-axis of an element. These utilities can change or override default margins, and can be used with a spacing scale of 7-12.
1515+1616+```html
1717+<div class="margin-orange d-inline-block">
1818+ <div class="d-inline-block block-blue mt-7">.mt-7</div>
1919+</div>
2020+<div class="margin-orange d-inline-block">
2121+ <div class="d-inline-block block-blue mb-7">.mb-7</div>
2222+</div>
2323+<div class="margin-orange d-inline-block">
2424+ <div class="d-inline-block block-blue my-7">.my-7</div>
2525+</div>
2626+```
2727+2828+## Responsive y-axis margin utilities
2929+3030+All marketing margin utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
3131+3232+```html
3333+<div class="d-inline-block margin-orange">
3434+ <div class="my-sm-7 mb-lg-9 d-inline-block block-blue">
3535+ .my-sm-7 .mb-lg-9
3636+ </div>
3737+</div>
3838+```
···11+---
22+title: Marketing Padding
33+sort_title: Padding Marketing
44+path: utilities/marketing-padding
55+status: Stable
66+status_issue: https://github.com/github/design-systems/issues/378
77+---
88+99+Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
1010+1111+## Y-axis padding utilities
1212+1313+Use marketing padding utilities to apply padding to top, bottom, or both y-axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
1414+1515+```html
1616+<div class="margin-orange d-inline-block">
1717+ <div class="d-inline-block block-blue pt-7">.pt-7</div>
1818+</div>
1919+<div class="margin-orange d-inline-block">
2020+ <div class="d-inline-block block-blue pb-7">.pb-7</div>
2121+</div>
2222+<div class="margin-orange d-inline-block">
2323+ <div class="d-inline-block block-blue py-7">.py-7</div>
2424+</div>
2525+```
2626+2727+## Responsive y-axis padding utilities
2828+2929+All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
3030+3131+```html
3232+<div class="d-inline-block margin-orange">
3333+ <div class="py-sm-7 pb-lg-9 d-inline-block block-blue">
3434+ .py-sm-7 .pb-lg-9
3535+ </div>
3636+</div>
3737+```
···11+// Border utilities
22+33+// XXX If you're looking for responsive border utilities, they've moved to
44+// ../../primer-utilities/lib/borders.scss
55+66+/* Use with .border to turn the border rgba white 0.15 */
77+.border-white-fade {
88+ border-color: $white-fade-15 !important;
99+}
···11+// Layout utilities
22+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
33+44+@warn "Responsive position utilities will be moved from primer-marketing-utilities to primer-utilities in primer v11.0.0.";
55+66+// Responsive position utilities
77+88+@each $breakpoint in map-keys($breakpoints) {
99+ @include breakpoint($breakpoint) {
1010+ /* Set position to relative */
1111+ .position-#{$breakpoint}-relative { position: relative !important; }
1212+ /* Set position to absolute */
1313+ .position-#{$breakpoint}-absolute { position: absolute !important; }
1414+ /* Set position to fixed */
1515+ .position-#{$breakpoint}-fixed { position: fixed !important; }
1616+ }
1717+}
···11+// Margin spacer utilities for marketing
22+// Utilities only added for y-direction margin (i.e. top & bottom)
33+// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
44+@for $i from 1 through length($marketingSpacers) {
55+ $size: #{nth($marketingSpacers, $i)};
66+ $scale: #{$i + 6}; // 7, 8, 9, 10, 11
77+88+ /* Set a #{$size} margin on the top */
99+ .mt-#{$scale} { margin-top : #{$size} !important; }
1010+ /* Set a #{$size} margin on the bottom */
1111+ .mb-#{$scale} { margin-bottom: #{$size} !important; }
1212+1313+ /* Set a #{$size} margin on the top & bottom */
1414+ .my-#{$scale} {
1515+ margin-top : #{$size} !important;
1616+ margin-bottom: #{$size} !important;
1717+ }
1818+}
1919+2020+// Loop through the breakpoint values
2121+@each $breakpoint in map-keys($breakpoints) {
2222+2323+ // Loop through the spacer values
2424+ @for $i from 1 through length($marketingSpacers) {
2525+ @include breakpoint($breakpoint) {
2626+ $size: #{nth($marketingSpacers, $i)}; // sm, md, lg, xl
2727+ $scale: #{$i + 6}; // 7, 8, 9, 10, 11
2828+2929+ /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
3030+ .mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
3131+ /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
3232+ .mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
3333+3434+ /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
3535+ .my-#{$breakpoint}-#{$scale} {
3636+ margin-top: #{$size} !important;
3737+ margin-bottom: #{$size} !important;
3838+ }
3939+ }
4040+ }
4141+}
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+/*!
22+ * Primer-marketing
33+ * http://primer.github.io
44+ *
55+ * Released under MIT license. Copyright (c) 2019 GitHub Inc.
66+ */
77+88+// Primer master file
99+//
1010+// Imports all Primer files in their intended order for easy mass-inclusion.
1111+// Should you need specific files, you can easily use separate `@import`s.
1212+1313+// Global requirements
1414+@import "primer-support/index.scss";
1515+@import "primer-marketing-support/index.scss";
1616+1717+// marketing specific css modules
1818+@import "primer-marketing-type/index.scss";
1919+@import "primer-marketing-buttons/index.scss";
2020+@import "primer-page-headers/index.scss";
2121+@import "primer-page-sections/index.scss";
2222+@import "primer-tables/index.scss";
2323+@import "primer-marketing-utilities/index.scss";
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+@warn "The entire primer-page-headers package will be removed in primer v11.0.0.";
22+33+// support files
44+@import "primer-support/index.scss";
55+@import "primer-marketing-support/index.scss";
66+@import "./lib/headers.scss";
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+@warn "The entire primer-page-sections package will be removed in primer v11.0.0.";
22+33+// support files
44+@import "primer-support/index.scss";
55+@import "primer-marketing-support/index.scss";
66+@import "./lib/page-section.scss";
···11+The MIT License (MIT)
22+33+Copyright (c) 2019 GitHub Inc.
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
···11+@warn "The entire primer-tables package will be removed in primer v11.0.0.";
22+33+// support files
44+@import "primer-support/index.scss";
55+@import "primer-marketing-support/index.scss";
66+@import "./lib/tables.scss";