Add top of layout
This commit is contained in:
Sophie Shepherd
parent
fd03dca160
commit
e062f803db
6 changed files with 584 additions and 13 deletions
1
Gemfile
1
Gemfile
|
|
@ -1,2 +1,3 @@
|
|||
source 'https://rubygems.org'
|
||||
gem 'github-pages', group: :jekyll_plugins
|
||||
gem 'jekyll-octicons'
|
||||
|
|
|
|||
|
|
@ -125,6 +125,9 @@ GEM
|
|||
activesupport (~> 4.0)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-octicons (8.0.0)
|
||||
jekyll (~> 3.1)
|
||||
octicons (= 8.0.0)
|
||||
jekyll-optional-front-matter (0.3.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
|
|
@ -209,6 +212,8 @@ GEM
|
|||
multipart-post (2.0.0)
|
||||
nokogiri (1.9.1)
|
||||
mini_portile2 (~> 2.4.0)
|
||||
octicons (8.0.0)
|
||||
nokogiri (>= 1.6.3.1)
|
||||
octokit (4.13.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.2)
|
||||
|
|
@ -245,6 +250,7 @@ PLATFORMS
|
|||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
jekyll-octicons
|
||||
|
||||
BUNDLED WITH
|
||||
1.16.1
|
||||
2.0.1
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
title: Brandon Rosage
|
||||
description: description XYZ
|
||||
email: brandon@github.com
|
||||
|
||||
sass:
|
||||
sass_dir: node_modules
|
||||
|
||||
gems:
|
||||
- jekyll-octicons
|
||||
|
|
|
|||
|
|
@ -3,13 +3,31 @@
|
|||
{% assign user = site.github.organization_members[0] %}
|
||||
|
||||
<div class="container-lg py-6 p-responsive text-center">
|
||||
<img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 180px;">
|
||||
<h1 class="h0 mb-2">{{ site.github.project_title }}</h1>
|
||||
<p class="f4">
|
||||
<a href="https://github.com/{{ user.login }}">
|
||||
@{{ user.login }}
|
||||
</a>
|
||||
<img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
|
||||
<h1 class="mb-2">{{ site.title }}</h1>
|
||||
<p class="col-lg-8 mx-auto mb-3 f3 text-gray">
|
||||
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.
|
||||
</p>
|
||||
<div class="f4 mb-3">
|
||||
<div class="d-inline-block mr-3">
|
||||
{% octicon mark-github height:20 class:"mr-1 v-align-middle" aria-label:GitHub %}
|
||||
<a href="https://github.com/{{ user.login }}">
|
||||
@{{ user.login }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-inline-block mr-3">
|
||||
{% octicon mail height:20 class:"mr-1 v-align-middle" aria-label:Email %}
|
||||
<a href="mailto:{{ user.email }}">
|
||||
{{ site.email }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-inline-block">
|
||||
{% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
|
||||
<a href="https://github.com/{{ user.login }}">
|
||||
Austin, TX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -3245,4 +3245,528 @@ a.tabnav-extra:hover { color: #0366d6; text-decoration: none; }
|
|||
.show-on-focus { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
|
||||
.show-on-focus:focus { z-index: 20; width: auto; height: auto; clip: auto; }
|
||||
|
||||
/*!
|
||||
* Primer-marketing
|
||||
* http://primer.github.io
|
||||
*
|
||||
* Released under MIT license. Copyright (c) 2019 GitHub Inc.
|
||||
*/
|
||||
.alt-mono-font { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
|
||||
|
||||
.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; }
|
||||
|
||||
.alt-h0 { font-size: 48px; font-weight: 300; }
|
||||
@media (min-width: 768px) { .alt-h0 { font-size: 54px; } }
|
||||
@media (min-width: 1012px) { .alt-h0 { font-size: 72px; } }
|
||||
|
||||
.alt-h1 { font-size: 36px; font-weight: 300; }
|
||||
@media (min-width: 768px) { .alt-h1 { font-size: 48px; } }
|
||||
@media (min-width: 1012px) { .alt-h1 { font-size: 54px; } }
|
||||
|
||||
.alt-h2 { font-size: 28px; font-weight: 300; }
|
||||
@media (min-width: 768px) { .alt-h2 { font-size: 34px; } }
|
||||
@media (min-width: 1012px) { .alt-h2 { font-size: 38px; } }
|
||||
|
||||
.alt-h3 { font-size: 18px; font-weight: 400; }
|
||||
@media (min-width: 768px) { .alt-h3 { font-size: 20px; } }
|
||||
@media (min-width: 1012px) { .alt-h3 { font-size: 22px; } }
|
||||
|
||||
.alt-h4 { font-size: 16px; font-weight: 500; }
|
||||
|
||||
.alt-h5 { font-size: 14px; font-weight: 500; }
|
||||
|
||||
.alt-h6 { font-size: 12px; font-weight: 500; }
|
||||
|
||||
.alt-lead { -webkit-font-smoothing: antialiased; font-size: 21px; font-weight: 300; }
|
||||
@media (min-width: 768px) { .alt-lead { font-size: 24px; } }
|
||||
@media (min-width: 1012px) { .alt-lead { font-size: 26px; } }
|
||||
|
||||
.alt-text-small { font-size: 14px !important; }
|
||||
|
||||
.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; }
|
||||
@media (min-width: 768px) { .pullquote { padding-left: 12px; margin-bottom: 32px; margin-left: -15px; font-size: 18px; line-height: 1.5; } }
|
||||
|
||||
.btn-orange { color: #fff; background-color: #d25a08; background-image: linear-gradient(-180deg, #f7802f 0%, #d25a08 90%); }
|
||||
.btn-orange:focus, .btn-orange.focus { box-shadow: 0 0 0 0.2em rgba(247, 128, 47, 0.4); }
|
||||
.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); }
|
||||
.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); }
|
||||
.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; }
|
||||
.btn-orange .Counter { color: #f46909; background-color: #fff; }
|
||||
|
||||
.btn-outline-purple { color: #6f42c1; background-color: #fff; background-image: none; }
|
||||
.btn-outline-purple .Counter { background-color: rgba(27, 31, 35, 0.07); }
|
||||
.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; }
|
||||
.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; }
|
||||
.btn-outline-purple:focus { border-color: #6f42c1; box-shadow: 0 0 0 0.2em rgba(111, 66, 193, 0.4); }
|
||||
.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; }
|
||||
|
||||
.btn-outline-orange { color: #f66a0a; background-color: #fff; background-image: none; }
|
||||
.btn-outline-orange .Counter { background-color: rgba(27, 31, 35, 0.07); }
|
||||
.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; }
|
||||
.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; }
|
||||
.btn-outline-orange:focus { border-color: #f66a0a; box-shadow: 0 0 0 0.2em rgba(246, 106, 10, 0.4); }
|
||||
.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; }
|
||||
|
||||
.btn-outline-green { color: #28a745; background-color: #fff; background-image: none; }
|
||||
.btn-outline-green .Counter { background-color: rgba(27, 31, 35, 0.07); }
|
||||
.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; }
|
||||
.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; }
|
||||
.btn-outline-green:focus { border-color: #28a745; box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.4); }
|
||||
.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; }
|
||||
|
||||
.btn-transparent { color: #fff; background-color: transparent; background-image: none; border: 1px solid rgba(255, 255, 255, 0.5); }
|
||||
.btn-transparent:hover, .btn-transparent:active { color: #2f363d; background-color: #fff; background-image: none; border-color: #fff; }
|
||||
|
||||
.jumbotron { position: relative; padding-top: 40px; padding-bottom: 40px; }
|
||||
@media (min-width: 544px) { .jumbotron { padding-top: 60px; padding-bottom: 60px; } }
|
||||
@media (min-width: 1280px) { .jumbotron { padding-top: 120px; padding-bottom: 120px; } }
|
||||
|
||||
@media (min-width: 1012px) { .jumbotron-supertron { height: 45vw; min-height: 590px; max-height: 55vh; padding-top: 80px; padding-bottom: 80px; } }
|
||||
|
||||
.jumbotron-minitron { padding-top: 24px; padding-bottom: 24px; }
|
||||
@media (min-width: 544px) { .jumbotron-minitron { padding-top: 32px; padding-bottom: 32px; } }
|
||||
|
||||
.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); }
|
||||
|
||||
.jumbotron-photo { position: relative; background-color: #24292e; background-size: cover; }
|
||||
.jumbotron-photo::before { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.25); }
|
||||
|
||||
.page-section { padding: 32px 0; margin-top: 0; }
|
||||
@media (min-width: 768px) { .page-section { padding: 56px 0; } }
|
||||
|
||||
.page-section-jumplink:target { padding-top: 112px; }
|
||||
@media (min-width: 768px) { .page-section-jumplink:target { padding-top: 80px; } }
|
||||
|
||||
.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); }
|
||||
.data-table th { font-weight: 400; text-align: left; }
|
||||
.data-table td, .data-table th { padding: 16px; border-right: 1px #e1e4e8 solid; border-bottom: 1px #e1e4e8 solid; }
|
||||
.data-table tbody th { width: 25%; }
|
||||
.data-table tbody th, .data-table tbody td { border-bottom-color: #e1e4e8; }
|
||||
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 1px #e1e4e8 solid; }
|
||||
|
||||
.grayscale { filter: grayscale(100%); }
|
||||
|
||||
/* Use with .border to turn the border rgba white 0.15 */
|
||||
.border-white-fade { border-color: rgba(255, 255, 255, 0.15) !important; }
|
||||
|
||||
@media (min-width: 544px) { /* Set position to relative */
|
||||
.position-sm-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-sm-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-sm-fixed { position: fixed !important; } }
|
||||
@media (min-width: 768px) { /* Set position to relative */
|
||||
.position-md-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-md-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-md-fixed { position: fixed !important; } }
|
||||
@media (min-width: 1012px) { /* Set position to relative */
|
||||
.position-lg-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-lg-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-lg-fixed { position: fixed !important; } }
|
||||
@media (min-width: 1280px) { /* Set position to relative */
|
||||
.position-xl-relative { position: relative !important; }
|
||||
/* Set position to absolute */
|
||||
.position-xl-absolute { position: absolute !important; }
|
||||
/* Set position to fixed */
|
||||
.position-xl-fixed { position: fixed !important; } }
|
||||
/* Set a 48px margin on the top */
|
||||
.mt-7 { margin-top: 48px !important; }
|
||||
|
||||
/* Set a 48px margin on the bottom */
|
||||
.mb-7 { margin-bottom: 48px !important; }
|
||||
|
||||
/* Set a 48px margin on the top & bottom */
|
||||
.my-7 { margin-top: 48px !important; margin-bottom: 48px !important; }
|
||||
|
||||
/* Set a 64px margin on the top */
|
||||
.mt-8 { margin-top: 64px !important; }
|
||||
|
||||
/* Set a 64px margin on the bottom */
|
||||
.mb-8 { margin-bottom: 64px !important; }
|
||||
|
||||
/* Set a 64px margin on the top & bottom */
|
||||
.my-8 { margin-top: 64px !important; margin-bottom: 64px !important; }
|
||||
|
||||
/* Set a 80px margin on the top */
|
||||
.mt-9 { margin-top: 80px !important; }
|
||||
|
||||
/* Set a 80px margin on the bottom */
|
||||
.mb-9 { margin-bottom: 80px !important; }
|
||||
|
||||
/* Set a 80px margin on the top & bottom */
|
||||
.my-9 { margin-top: 80px !important; margin-bottom: 80px !important; }
|
||||
|
||||
/* Set a 96px margin on the top */
|
||||
.mt-10 { margin-top: 96px !important; }
|
||||
|
||||
/* Set a 96px margin on the bottom */
|
||||
.mb-10 { margin-bottom: 96px !important; }
|
||||
|
||||
/* Set a 96px margin on the top & bottom */
|
||||
.my-10 { margin-top: 96px !important; margin-bottom: 96px !important; }
|
||||
|
||||
/* Set a 112px margin on the top */
|
||||
.mt-11 { margin-top: 112px !important; }
|
||||
|
||||
/* Set a 112px margin on the bottom */
|
||||
.mb-11 { margin-bottom: 112px !important; }
|
||||
|
||||
/* Set a 112px margin on the top & bottom */
|
||||
.my-11 { margin-top: 112px !important; margin-bottom: 112px !important; }
|
||||
|
||||
/* Set a 128px margin on the top */
|
||||
.mt-12 { margin-top: 128px !important; }
|
||||
|
||||
/* Set a 128px margin on the bottom */
|
||||
.mb-12 { margin-bottom: 128px !important; }
|
||||
|
||||
/* Set a 128px margin on the top & bottom */
|
||||
.my-12 { margin-top: 128px !important; margin-bottom: 128px !important; }
|
||||
|
||||
@media (min-width: 544px) { /* Set a 48px margin on the top at the breakpoint sm */
|
||||
.mt-sm-7 { margin-top: 48px !important; }
|
||||
/* Set a 48px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-7 { margin-bottom: 48px !important; }
|
||||
/* Set a 48px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 64px margin on the top at the breakpoint sm */
|
||||
.mt-sm-8 { margin-top: 64px !important; }
|
||||
/* Set a 64px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-8 { margin-bottom: 64px !important; }
|
||||
/* Set a 64px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 80px margin on the top at the breakpoint sm */
|
||||
.mt-sm-9 { margin-top: 80px !important; }
|
||||
/* Set a 80px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-9 { margin-bottom: 80px !important; }
|
||||
/* Set a 80px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 96px margin on the top at the breakpoint sm */
|
||||
.mt-sm-10 { margin-top: 96px !important; }
|
||||
/* Set a 96px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-10 { margin-bottom: 96px !important; }
|
||||
/* Set a 96px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 112px margin on the top at the breakpoint sm */
|
||||
.mt-sm-11 { margin-top: 112px !important; }
|
||||
/* Set a 112px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-11 { margin-bottom: 112px !important; }
|
||||
/* Set a 112px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 128px margin on the top at the breakpoint sm */
|
||||
.mt-sm-12 { margin-top: 128px !important; }
|
||||
/* Set a 128px margin on the bottom at the breakpoint sm */
|
||||
.mb-sm-12 { margin-bottom: 128px !important; }
|
||||
/* Set a 128px margin on the top & bottom at the breakpoint sm */
|
||||
.my-sm-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 48px margin on the top at the breakpoint md */
|
||||
.mt-md-7 { margin-top: 48px !important; }
|
||||
/* Set a 48px margin on the bottom at the breakpoint md */
|
||||
.mb-md-7 { margin-bottom: 48px !important; }
|
||||
/* Set a 48px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 64px margin on the top at the breakpoint md */
|
||||
.mt-md-8 { margin-top: 64px !important; }
|
||||
/* Set a 64px margin on the bottom at the breakpoint md */
|
||||
.mb-md-8 { margin-bottom: 64px !important; }
|
||||
/* Set a 64px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 80px margin on the top at the breakpoint md */
|
||||
.mt-md-9 { margin-top: 80px !important; }
|
||||
/* Set a 80px margin on the bottom at the breakpoint md */
|
||||
.mb-md-9 { margin-bottom: 80px !important; }
|
||||
/* Set a 80px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 96px margin on the top at the breakpoint md */
|
||||
.mt-md-10 { margin-top: 96px !important; }
|
||||
/* Set a 96px margin on the bottom at the breakpoint md */
|
||||
.mb-md-10 { margin-bottom: 96px !important; }
|
||||
/* Set a 96px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 112px margin on the top at the breakpoint md */
|
||||
.mt-md-11 { margin-top: 112px !important; }
|
||||
/* Set a 112px margin on the bottom at the breakpoint md */
|
||||
.mb-md-11 { margin-bottom: 112px !important; }
|
||||
/* Set a 112px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 128px margin on the top at the breakpoint md */
|
||||
.mt-md-12 { margin-top: 128px !important; }
|
||||
/* Set a 128px margin on the bottom at the breakpoint md */
|
||||
.mb-md-12 { margin-bottom: 128px !important; }
|
||||
/* Set a 128px margin on the top & bottom at the breakpoint md */
|
||||
.my-md-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 48px margin on the top at the breakpoint lg */
|
||||
.mt-lg-7 { margin-top: 48px !important; }
|
||||
/* Set a 48px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-7 { margin-bottom: 48px !important; }
|
||||
/* Set a 48px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 64px margin on the top at the breakpoint lg */
|
||||
.mt-lg-8 { margin-top: 64px !important; }
|
||||
/* Set a 64px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-8 { margin-bottom: 64px !important; }
|
||||
/* Set a 64px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 80px margin on the top at the breakpoint lg */
|
||||
.mt-lg-9 { margin-top: 80px !important; }
|
||||
/* Set a 80px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-9 { margin-bottom: 80px !important; }
|
||||
/* Set a 80px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 96px margin on the top at the breakpoint lg */
|
||||
.mt-lg-10 { margin-top: 96px !important; }
|
||||
/* Set a 96px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-10 { margin-bottom: 96px !important; }
|
||||
/* Set a 96px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 112px margin on the top at the breakpoint lg */
|
||||
.mt-lg-11 { margin-top: 112px !important; }
|
||||
/* Set a 112px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-11 { margin-bottom: 112px !important; }
|
||||
/* Set a 112px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 128px margin on the top at the breakpoint lg */
|
||||
.mt-lg-12 { margin-top: 128px !important; }
|
||||
/* Set a 128px margin on the bottom at the breakpoint lg */
|
||||
.mb-lg-12 { margin-bottom: 128px !important; }
|
||||
/* Set a 128px margin on the top & bottom at the breakpoint lg */
|
||||
.my-lg-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 48px margin on the top at the breakpoint xl */
|
||||
.mt-xl-7 { margin-top: 48px !important; }
|
||||
/* Set a 48px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-7 { margin-bottom: 48px !important; }
|
||||
/* Set a 48px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-7 { margin-top: 48px !important; margin-bottom: 48px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 64px margin on the top at the breakpoint xl */
|
||||
.mt-xl-8 { margin-top: 64px !important; }
|
||||
/* Set a 64px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-8 { margin-bottom: 64px !important; }
|
||||
/* Set a 64px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-8 { margin-top: 64px !important; margin-bottom: 64px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 80px margin on the top at the breakpoint xl */
|
||||
.mt-xl-9 { margin-top: 80px !important; }
|
||||
/* Set a 80px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-9 { margin-bottom: 80px !important; }
|
||||
/* Set a 80px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-9 { margin-top: 80px !important; margin-bottom: 80px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 96px margin on the top at the breakpoint xl */
|
||||
.mt-xl-10 { margin-top: 96px !important; }
|
||||
/* Set a 96px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-10 { margin-bottom: 96px !important; }
|
||||
/* Set a 96px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-10 { margin-top: 96px !important; margin-bottom: 96px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 112px margin on the top at the breakpoint xl */
|
||||
.mt-xl-11 { margin-top: 112px !important; }
|
||||
/* Set a 112px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-11 { margin-bottom: 112px !important; }
|
||||
/* Set a 112px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-11 { margin-top: 112px !important; margin-bottom: 112px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 128px margin on the top at the breakpoint xl */
|
||||
.mt-xl-12 { margin-top: 128px !important; }
|
||||
/* Set a 128px margin on the bottom at the breakpoint xl */
|
||||
.mb-xl-12 { margin-bottom: 128px !important; }
|
||||
/* Set a 128px margin on the top & bottom at the breakpoint xl */
|
||||
.my-xl-12 { margin-top: 128px !important; margin-bottom: 128px !important; } }
|
||||
/* Set a 48px padding to the top */
|
||||
.pt-7 { padding-top: 48px !important; }
|
||||
|
||||
/* Set a 48px padding to the bottom */
|
||||
.pb-7 { padding-bottom: 48px !important; }
|
||||
|
||||
/* Set a 48px padding to the top & bottom */
|
||||
.py-7 { padding-top: 48px !important; padding-bottom: 48px !important; }
|
||||
|
||||
/* Set a 64px padding to the top */
|
||||
.pt-8 { padding-top: 64px !important; }
|
||||
|
||||
/* Set a 64px padding to the bottom */
|
||||
.pb-8 { padding-bottom: 64px !important; }
|
||||
|
||||
/* Set a 64px padding to the top & bottom */
|
||||
.py-8 { padding-top: 64px !important; padding-bottom: 64px !important; }
|
||||
|
||||
/* Set a 80px padding to the top */
|
||||
.pt-9 { padding-top: 80px !important; }
|
||||
|
||||
/* Set a 80px padding to the bottom */
|
||||
.pb-9 { padding-bottom: 80px !important; }
|
||||
|
||||
/* Set a 80px padding to the top & bottom */
|
||||
.py-9 { padding-top: 80px !important; padding-bottom: 80px !important; }
|
||||
|
||||
/* Set a 96px padding to the top */
|
||||
.pt-10 { padding-top: 96px !important; }
|
||||
|
||||
/* Set a 96px padding to the bottom */
|
||||
.pb-10 { padding-bottom: 96px !important; }
|
||||
|
||||
/* Set a 96px padding to the top & bottom */
|
||||
.py-10 { padding-top: 96px !important; padding-bottom: 96px !important; }
|
||||
|
||||
/* Set a 112px padding to the top */
|
||||
.pt-11 { padding-top: 112px !important; }
|
||||
|
||||
/* Set a 112px padding to the bottom */
|
||||
.pb-11 { padding-bottom: 112px !important; }
|
||||
|
||||
/* Set a 112px padding to the top & bottom */
|
||||
.py-11 { padding-top: 112px !important; padding-bottom: 112px !important; }
|
||||
|
||||
/* Set a 128px padding to the top */
|
||||
.pt-12 { padding-top: 128px !important; }
|
||||
|
||||
/* Set a 128px padding to the bottom */
|
||||
.pb-12 { padding-bottom: 128px !important; }
|
||||
|
||||
/* Set a 128px padding to the top & bottom */
|
||||
.py-12 { padding-top: 128px !important; padding-bottom: 128px !important; }
|
||||
|
||||
@media (min-width: 544px) { /* Set a 48px padding to the top at the sm breakpoint */
|
||||
.pt-sm-7 { padding-top: 48px !important; }
|
||||
/* Set a 48px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-7 { padding-bottom: 48px !important; }
|
||||
/* Set a 48px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 64px padding to the top at the sm breakpoint */
|
||||
.pt-sm-8 { padding-top: 64px !important; }
|
||||
/* Set a 64px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-8 { padding-bottom: 64px !important; }
|
||||
/* Set a 64px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 80px padding to the top at the sm breakpoint */
|
||||
.pt-sm-9 { padding-top: 80px !important; }
|
||||
/* Set a 80px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-9 { padding-bottom: 80px !important; }
|
||||
/* Set a 80px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 96px padding to the top at the sm breakpoint */
|
||||
.pt-sm-10 { padding-top: 96px !important; }
|
||||
/* Set a 96px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-10 { padding-bottom: 96px !important; }
|
||||
/* Set a 96px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 112px padding to the top at the sm breakpoint */
|
||||
.pt-sm-11 { padding-top: 112px !important; }
|
||||
/* Set a 112px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-11 { padding-bottom: 112px !important; }
|
||||
/* Set a 112px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
|
||||
@media (min-width: 544px) { /* Set a 128px padding to the top at the sm breakpoint */
|
||||
.pt-sm-12 { padding-top: 128px !important; }
|
||||
/* Set a 128px padding to the bottom at the sm breakpoint */
|
||||
.pb-sm-12 { padding-bottom: 128px !important; }
|
||||
/* Set a 128px padding to the top & bottom at the sm breakpoint */
|
||||
.py-sm-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 48px padding to the top at the md breakpoint */
|
||||
.pt-md-7 { padding-top: 48px !important; }
|
||||
/* Set a 48px padding to the bottom at the md breakpoint */
|
||||
.pb-md-7 { padding-bottom: 48px !important; }
|
||||
/* Set a 48px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 64px padding to the top at the md breakpoint */
|
||||
.pt-md-8 { padding-top: 64px !important; }
|
||||
/* Set a 64px padding to the bottom at the md breakpoint */
|
||||
.pb-md-8 { padding-bottom: 64px !important; }
|
||||
/* Set a 64px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 80px padding to the top at the md breakpoint */
|
||||
.pt-md-9 { padding-top: 80px !important; }
|
||||
/* Set a 80px padding to the bottom at the md breakpoint */
|
||||
.pb-md-9 { padding-bottom: 80px !important; }
|
||||
/* Set a 80px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 96px padding to the top at the md breakpoint */
|
||||
.pt-md-10 { padding-top: 96px !important; }
|
||||
/* Set a 96px padding to the bottom at the md breakpoint */
|
||||
.pb-md-10 { padding-bottom: 96px !important; }
|
||||
/* Set a 96px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 112px padding to the top at the md breakpoint */
|
||||
.pt-md-11 { padding-top: 112px !important; }
|
||||
/* Set a 112px padding to the bottom at the md breakpoint */
|
||||
.pb-md-11 { padding-bottom: 112px !important; }
|
||||
/* Set a 112px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
|
||||
@media (min-width: 768px) { /* Set a 128px padding to the top at the md breakpoint */
|
||||
.pt-md-12 { padding-top: 128px !important; }
|
||||
/* Set a 128px padding to the bottom at the md breakpoint */
|
||||
.pb-md-12 { padding-bottom: 128px !important; }
|
||||
/* Set a 128px padding to the top & bottom at the md breakpoint */
|
||||
.py-md-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 48px padding to the top at the lg breakpoint */
|
||||
.pt-lg-7 { padding-top: 48px !important; }
|
||||
/* Set a 48px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-7 { padding-bottom: 48px !important; }
|
||||
/* Set a 48px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 64px padding to the top at the lg breakpoint */
|
||||
.pt-lg-8 { padding-top: 64px !important; }
|
||||
/* Set a 64px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-8 { padding-bottom: 64px !important; }
|
||||
/* Set a 64px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 80px padding to the top at the lg breakpoint */
|
||||
.pt-lg-9 { padding-top: 80px !important; }
|
||||
/* Set a 80px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-9 { padding-bottom: 80px !important; }
|
||||
/* Set a 80px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 96px padding to the top at the lg breakpoint */
|
||||
.pt-lg-10 { padding-top: 96px !important; }
|
||||
/* Set a 96px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-10 { padding-bottom: 96px !important; }
|
||||
/* Set a 96px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 112px padding to the top at the lg breakpoint */
|
||||
.pt-lg-11 { padding-top: 112px !important; }
|
||||
/* Set a 112px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-11 { padding-bottom: 112px !important; }
|
||||
/* Set a 112px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
|
||||
@media (min-width: 1012px) { /* Set a 128px padding to the top at the lg breakpoint */
|
||||
.pt-lg-12 { padding-top: 128px !important; }
|
||||
/* Set a 128px padding to the bottom at the lg breakpoint */
|
||||
.pb-lg-12 { padding-bottom: 128px !important; }
|
||||
/* Set a 128px padding to the top & bottom at the lg breakpoint */
|
||||
.py-lg-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 48px padding to the top at the xl breakpoint */
|
||||
.pt-xl-7 { padding-top: 48px !important; }
|
||||
/* Set a 48px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-7 { padding-bottom: 48px !important; }
|
||||
/* Set a 48px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-7 { padding-top: 48px !important; padding-bottom: 48px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 64px padding to the top at the xl breakpoint */
|
||||
.pt-xl-8 { padding-top: 64px !important; }
|
||||
/* Set a 64px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-8 { padding-bottom: 64px !important; }
|
||||
/* Set a 64px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-8 { padding-top: 64px !important; padding-bottom: 64px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 80px padding to the top at the xl breakpoint */
|
||||
.pt-xl-9 { padding-top: 80px !important; }
|
||||
/* Set a 80px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-9 { padding-bottom: 80px !important; }
|
||||
/* Set a 80px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-9 { padding-top: 80px !important; padding-bottom: 80px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 96px padding to the top at the xl breakpoint */
|
||||
.pt-xl-10 { padding-top: 96px !important; }
|
||||
/* Set a 96px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-10 { padding-bottom: 96px !important; }
|
||||
/* Set a 96px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-10 { padding-top: 96px !important; padding-bottom: 96px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 112px padding to the top at the xl breakpoint */
|
||||
.pt-xl-11 { padding-top: 112px !important; }
|
||||
/* Set a 112px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-11 { padding-bottom: 112px !important; }
|
||||
/* Set a 112px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-11 { padding-top: 112px !important; padding-bottom: 112px !important; } }
|
||||
@media (min-width: 1280px) { /* Set a 128px padding to the top at the xl breakpoint */
|
||||
.pt-xl-12 { padding-top: 128px !important; }
|
||||
/* Set a 128px padding to the bottom at the xl breakpoint */
|
||||
.pb-xl-12 { padding-bottom: 128px !important; }
|
||||
/* Set a 128px padding to the top & bottom at the xl breakpoint */
|
||||
.py-xl-12 { padding-top: 128px !important; padding-bottom: 128px !important; } }
|
||||
body { font-family: 'Rubik', sans-serif; }
|
||||
|
|
|
|||
|
|
@ -11,13 +11,31 @@
|
|||
|
||||
|
||||
<div class="container-lg py-6 p-responsive text-center">
|
||||
<img src="https://avatars0.githubusercontent.com/u/11095731?v=4" class="circle mb-3" style="max-width: 180px;">
|
||||
<h1 class="h0 mb-2">profile-generator</h1>
|
||||
<p class="f4">
|
||||
<a href="https://github.com/BenEmdon">
|
||||
@BenEmdon
|
||||
</a>
|
||||
<img src="https://avatars0.githubusercontent.com/u/11095731?v=4" class="circle mb-3" style="max-width: 150px;">
|
||||
<h1 class="mb-2">Brandon Rosage</h1>
|
||||
<p class="col-lg-8 mx-auto mb-3 f3 text-gray">
|
||||
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.
|
||||
</p>
|
||||
<div class="f4 mb-3">
|
||||
<div class="d-inline-block mr-3">
|
||||
<svg height="20" class="octicon octicon-mark-github mr-1 v-align-middle" aria-label="GitHub" viewBox="0 0 16 16" version="1.1" width="20" role="img"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
|
||||
<a href="https://github.com/BenEmdon">
|
||||
@BenEmdon
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-inline-block mr-3">
|
||||
<svg height="20" class="octicon octicon-mail mr-1 v-align-middle" aria-label="Email" viewBox="0 0 14 16" version="1.1" width="17" role="img"><path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"/></svg>
|
||||
<a href="mailto:">
|
||||
brandon@github.com
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-inline-block">
|
||||
<svg height="20" class="octicon octicon-location mr-1 v-align-middle" aria-label="Location" viewBox="0 0 12 16" version="1.1" width="15" role="img"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
|
||||
<a href="https://github.com/BenEmdon">
|
||||
Austin, TX
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Hello
|
||||
|
|
|
|||
Loading…
Reference in a new issue