Merge pull request github#1 from github/static-layout

Layouts
Remicck · Jan 25, 2019 · 9d192eb · 9d192eb
2 parents a7899d8 + b153674
commit 9d192eb
Show file tree

Hide file tree

Showing 87 changed files with 2,804 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/_site
diff --git a/Gemfile b/Gemfile
@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins
+gem 'jekyll-octicons'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -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
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,9 @@
 title: Brandon Rosage
 description: description XYZ
+email: brandon@github.com
 
 sass:
   sass_dir: node_modules
+
+gems:
+  - jekyll-octicons
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,2 @@
+  </body>
+</html>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>{{ site.github.project_title }}</title>
+    <link href="/assets/styles.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
diff --git a/_layouts/sidebar.html b/_layouts/sidebar.html
@@ -0,0 +1,36 @@
+{% include header.html %}
+
+{% assign user = site.github.organization_members[0] %}
+
+<div class="d-md-flex">
+  <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">
+    <img src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 150px;">
+    <h1 class="mb-2">{{ site.title }}</h1>
+    <p class="mb-3 f4 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-6">
+      <div class="mb-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="mb-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="">
+        {% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
+        Austin, TX
+      </div>
+    </div>
+  </div>
+  <div class="px-4 py-6 px-lg-6">
+    {{ content }}
+  </div>
+</div>
+
+{% include footer.html %}
diff --git a/_layouts/stacked.html b/_layouts/stacked.html
@@ -0,0 +1,36 @@
+{% include header.html %}
+
+{% 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: 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-6">
+    <div class="d-md-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-md-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-md-inline-block">
+      {% octicon location height:20 class:"mr-1 v-align-middle" aria-label:Location %}
+      Austin, TX
+    </div>
+  </div>
+
+  {{ content }}
+
+</div>
+
+
+
+{% include footer.html %}
diff --git a/_site/assets/styles.css b/_site/assets/styles.css
diff --git a/_site/layout-sidebar.html b/_site/layout-sidebar.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>profile-generator</title>
+    <link href="/assets/styles.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+
+
+
+
+<div class="d-md-flex">
+  <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">
+    <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="mb-3 f4 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-6">
+      <div class="mb-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="mb-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="">
+        <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>
+        Austin, TX
+      </div>
+    </div>
+  </div>
+  <div class="px-4 py-6 px-lg-6">
+    Hello! This is where the content for the sidebar layout will be.
+
+  </div>
+</div>
+
+  </body>
+</html>
+
diff --git a/_site/layout-stacked.html b/_site/layout-stacked.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>profile-generator</title>
+    <link href="/assets/styles.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+
+
+
+
+<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: 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-6">
+    <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>
+      Austin, TX
+    </div>
+  </div>
+
+  Hello! This is where the content will be.
+
+
+</div>
+
+
+
+  </body>
+</html>
+
diff --git a/_site/package-lock.json b/_site/package-lock.json
diff --git a/_site/package.json b/_site/package.json
@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/github/profile-generator#readme",
   "dependencies": {
-    "primer-core": "^6.10.9"
+    "primer-core": "^6.10.9",
+    "primer-marketing": "^6.3.3"
   }
 }
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -1,3 +1,9 @@
 ---
 ---
 @import "primer-core/index";
+@import "primer-marketing/index";
+@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700,900');
+
+body {
+  font-family: 'Rubik', sans-serif;
+}
diff --git a/layout-sidebar.html b/layout-sidebar.html
@@ -0,0 +1,5 @@
+---
+layout: sidebar
+---
+
+Hello! This is where the content for the sidebar layout will be.
diff --git a/layout-stacked.html b/layout-stacked.html
@@ -0,0 +1,5 @@
+---
+layout: stacked
+---
+
+Hello! This is where the content will be.
diff --git a/node_modules/primer-marketing-buttons/LICENSE b/node_modules/primer-marketing-buttons/LICENSE