···11+<div class="github-component">
22+ <div class="position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
33+ <a href="/topics/sql" class="no-underline d-flex flex-column flex-justify-center" data-ga-click="Topics, go to sql, location:boxes">
44+ <img src="https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/react/react.png" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="react logo">
55+ <p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">React</p>
66+ <p class="f5 text-gray text-center mb-0 mt-1">React (also known as React.js or ReactJS) is a JavaScript library that makes developing interactive user interfaces simple.</p>
77+ </a>
88+ </div>
99+</div>
+54-4
_layouts/sidebar.html
···33{% assign user = site.github.organization_members[0] %}
4455<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">
66+ <div class="flex-self-stretch border-bottom border-md-none border-md-right border-gray-light col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
77 <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
88- <h1 class="mb-2">{{ site.title }}</h1>
88+ <h1 class="mb-2 lh-condensed">{{ 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>
···2828 </div>
2929 </div>
3030 </div>
3131- <div class="px-4 py-6 px-lg-6">
3232- {{ content }}
3131+3232+ <div class="bg-gray-light col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
3333+ <div class="mx-auto" style="max-width: 900px;">
3434+ <h2>My Projects</h2>
3535+ <p class="f4 mb-4 text-gray">GitHub repositories that I've contributed to</p>
3636+ <div class="d-flex flex-wrap gutter-condensed mb-4">
3737+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
3838+ {% include repo-card.html %}
3939+ </div>
4040+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
4141+ {% include repo-card.html %}
4242+ </div>
4343+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
4444+ {% include repo-card.html %}
4545+ </div>
4646+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
4747+ {% include repo-card.html %}
4848+ </div>
4949+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
5050+ {% include repo-card.html %}
5151+ </div>
5252+ </div>
5353+5454+ <h2>My Interests</h2>
5555+ <p class="f4 mb-4 text-gray">Topics that I want to learn more about</p>
5656+ <div class="d-flex flex-wrap gutter-condensed mb-4">
5757+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
5858+ {% include topic-card.html %}
5959+ </div>
6060+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
6161+ {% include topic-card.html %}
6262+ </div>
6363+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
6464+ {% include topic-card.html %}
6565+ </div>
6666+ </div>
6767+6868+ <h2>My Organizations</h2>
6969+ <p class="f4 mb-4 text-gray">Teams I belong to</p>
7070+ <div class="d-flex flex-wrap gutter-condensed mb-4">
7171+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
7272+ {% include org-card.html %}
7373+ </div>
7474+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
7575+ {% include org-card.html %}
7676+ </div>
7777+ <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
7878+ {% include org-card.html %}
7979+ </div>
8080+ </div>
8181+8282+ </div>
3383 </div>
3484</div>
3585
+1-1
_layouts/stacked.html
···4455<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>
77+ <h1 class="mb-2 lh-condensed">{{ 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>
+1-1
_site/assets/styles.css
···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; }
37723772+.github-component { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; }
···12121313<div class="container-lg py-6 p-responsive text-center">
1414 <img src="https://avatars0.githubusercontent.com/u/334891?v=4" class="circle mb-3" style="max-width: 150px;">
1515- <h1 class="mb-2">primer</h1>
1515+ <h1 class="mb-2 lh-condensed">primer</h1>
1616 <p class="col-lg-8 mx-auto mb-3 f3 text-gray">
1717 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.
1818 </p>