Skip to content

Commit

Permalink
Sidebar layout tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
Sophie Shepherd committed Jan 25, 2019
1 parent f7794ac commit 3a4c2e7
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 87 deletions.
89 changes: 46 additions & 43 deletions _layouts/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% assign user = site.github.organization_members[0] %}

<div class="d-md-flex">
<div class="flex-self-stretch border-md-right border-gray-light col-md-5 col-lg-4 col-xl-3 px-4 py-6 px-lg-6">
<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">
<img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
<h1 class="mb-2 lh-condensed">{{ site.title }}</h1>
<p class="mb-3 f4 text-gray">
Expand All @@ -28,55 +28,58 @@ <h1 class="mb-2 lh-condensed">{{ site.title }}</h1>
</div>
</div>
</div>

<div class="bg-gray-light col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
<h2>My Projects</h2>
<p class="f4 mb-4">GitHub repositories that I've contributed to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
<div class="mx-auto" style="max-width: 900px;">
<h2>My Projects</h2>
<p class="f4 mb-4 text-gray">GitHub repositories that I've contributed to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include repo-card.html %}
</div>
</div>

<h2>My Interests</h2>
<p class="f4 mb-4">Topics that I want to learn more about</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
<h2>My Interests</h2>
<p class="f4 mb-4 text-gray">Topics that I want to learn more about</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
</div>
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include topic-card.html %}
</div>
</div>

<h2>My Organizations</h2>
<p class="f4 mb-4">Teams I belong to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
<h2>My Organizations</h2>
<p class="f4 mb-4 text-gray">Teams I belong to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
</div>
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include org-card.html %}
</div>
</div>

</div>
</div>
</div>

Expand Down
89 changes: 46 additions & 43 deletions _site/layout-sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@


<div class="d-md-flex">
<div class="flex-self-stretch border-md-right border-gray-light col-md-5 col-lg-4 col-xl-3 px-4 py-6 px-lg-6">
<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">
<img src="https://avatars0.githubusercontent.com/u/11095731?v=4" class="circle mb-3" style="max-width: 150px;">
<h1 class="mb-2 lh-condensed">Brandon Rosage</h1>
<p class="mb-3 f4 text-gray">
Expand All @@ -36,12 +36,14 @@ <h1 class="mb-2 lh-condensed">Brandon Rosage</h1>
</div>
</div>
</div>

<div class="bg-gray-light col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7">
<h2>My Projects</h2>
<p class="f4 mb-4">GitHub repositories that I've contributed to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="mx-auto" style="max-width: 900px;">
<h2>My Projects</h2>
<p class="f4 mb-4 text-gray">GitHub repositories that I've contributed to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="height-full border border-gray-light bg-white rounded-1 p-3">
<div class="d-flex flex-justify-between flex-items-start mb-1">
<h1 class="f4 lh-condensed mb-1">
Expand All @@ -66,9 +68,9 @@ <h1 class="f4 lh-condensed mb-1">
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="height-full border border-gray-light bg-white rounded-1 p-3">
<div class="d-flex flex-justify-between flex-items-start mb-1">
<h1 class="f4 lh-condensed mb-1">
Expand All @@ -93,9 +95,9 @@ <h1 class="f4 lh-condensed mb-1">
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="height-full border border-gray-light bg-white rounded-1 p-3">
<div class="d-flex flex-justify-between flex-items-start mb-1">
<h1 class="f4 lh-condensed mb-1">
Expand All @@ -120,9 +122,9 @@ <h1 class="f4 lh-condensed mb-1">
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="height-full border border-gray-light bg-white rounded-1 p-3">
<div class="d-flex flex-justify-between flex-items-start mb-1">
<h1 class="f4 lh-condensed mb-1">
Expand All @@ -147,9 +149,9 @@ <h1 class="f4 lh-condensed mb-1">
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="height-full border border-gray-light bg-white rounded-1 p-3">
<div class="d-flex flex-justify-between flex-items-start mb-1">
<h1 class="f4 lh-condensed mb-1">
Expand All @@ -174,14 +176,14 @@ <h1 class="f4 lh-condensed mb-1">
</div>
</div>

</div>
</div>
</div>

<h2>My Interests</h2>
<p class="f4 mb-4">Topics that I want to learn more about</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<h2>My Interests</h2>
<p class="f4 mb-4 text-gray">Topics that I want to learn more about</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/topics/sql" class="no-underline d-flex flex-column flex-justify-center" data-ga-click="Topics, go to sql, location:boxes">
<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">
Expand All @@ -191,9 +193,9 @@ <h2>My Interests</h2>
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/topics/sql" class="no-underline d-flex flex-column flex-justify-center" data-ga-click="Topics, go to sql, location:boxes">
<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">
Expand All @@ -203,9 +205,9 @@ <h2>My Interests</h2>
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/topics/sql" class="no-underline d-flex flex-column flex-justify-center" data-ga-click="Topics, go to sql, location:boxes">
<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">
Expand All @@ -215,14 +217,14 @@ <h2>My Interests</h2>
</div>
</div>

</div>
</div>
</div>

<h2>My Organizations</h2>
<p class="f4 mb-4">Teams I belong to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<h2>My Organizations</h2>
<p class="f4 mb-4 text-gray">Teams I belong to</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="topic-box position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/primer" class="no-underline d-flex flex-column flex-justify-center">
<img src="https://avatars1.githubusercontent.com/u/7143434?s=200&amp;v=4" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="primer logo">
Expand All @@ -242,9 +244,9 @@ <h2>My Organizations</h2>
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="topic-box position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/primer" class="no-underline d-flex flex-column flex-justify-center">
<img src="https://avatars1.githubusercontent.com/u/7143434?s=200&amp;v=4" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="primer logo">
Expand All @@ -264,9 +266,9 @@ <h2>My Organizations</h2>
</div>
</div>

</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
</div>
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<div class="github-component">
<div class="topic-box position-relative hover-grow height-full text-center border border-gray-light rounded-1 bg-white p-5">
<a href="/primer" class="no-underline d-flex flex-column flex-justify-center">
<img src="https://avatars1.githubusercontent.com/u/7143434?s=200&amp;v=4" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="primer logo">
Expand All @@ -286,9 +288,10 @@ <h2>My Organizations</h2>
</div>
</div>

</div>
</div>
</div>

</div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion assets/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900');

body {
// font-family: 'Rubik', sans-serif;
//font-family: 'Rubik', sans-serif;
}

.github-component {
Expand Down

0 comments on commit 3a4c2e7

Please sign in to comment.