kylefang/probot.github.io
1
0
Fork 0
mirror of https://github.com/zhigang1992/probot.github.io.git synced 2026-01-12 17:33:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25 from probot/responsive

Browse Source 
Minimal responsiveness
This commit is contained in:
Brandon Keepers
2017-08-16 17:18:20 -05:00
committed by GitHub
parent 7f76824f99 5637850737
commit 13b4188419
4 changed files with 68 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/nav.html
View File

@@ -2,8 +2,8 @@
<div class="{% unless homepage %}border-bottom{% endunless %}">
<div class="container-lg px-3">
<div class="py-4 d-flex d-flex-row">
<h1 class="alt-h4 col-4 lh-default v-align-middle">
<div class="py-4 d-sm-flex flex-sm-row">
<h1 class="alt-h4 col-sm-4 lh-default v-align-middle">
{% unless homepage %}
<a href="/" class="no-underline text-uppercase text-brand-blue-dark">
<img class="v-align-middle" style="margin: -20px 8px -8px 0;" src="/assets/probot-head.png" height="36" alt="">
@@ -11,7 +11,7 @@
</a>
{% endunless %}
</h1>
<nav class="text-bold col-8 text-right">
<nav class="text-bold col-sm-8 text-sm-right">
<a class="text-inherit px-2 d-inline-block" href="/#explore">Explore</a>
<a class="text-inherit px-2 d-inline-block" href="/docs/">Build</a>
<a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>

1
_layouts/default.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/index.css?d={{ site.time | date: '%s' }}">
<link rel="stylesheet" href="/assets/css/syntax.css?d={{ site.time | date: '%s' }}">
{% seo %}

64
_layouts/docs.html
View File

@@ -3,38 +3,8 @@ layout: default
---
<div class="container-lg px-3 py-6">
<div class="d-flex flex-row gutter-spacious">
<div id="toc" class="col-3 py-6">
{% for section in site.data.toc %}
<h2 class="alt-h4">{{ section[0] }}</h2>
<ul class="mt-2 mb-4 list-style-none">
{% for item in section[1] %}
<li>
{% if item.url %}
{% assign link = item %}
{% else %}
{% for doc in site.pages %}
{% if doc.path == item %}
{% assign link = doc %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if page.url == link.url %}
{% assign classes = "text-brand-red" %}
{% else %}
{% assign classes = "text-gray-light" %}
{% endif %}
<a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
<div class="col-9 markdown-body p-6">
<div class="d-md-flex flex-md-row flex-md-row-reverse gutter-md-spacious">
<div class="col-md-9 markdown-body p-md-6">
{{ content }}
{% for doc in site.pages %}
@@ -67,5 +37,35 @@ layout: default
<a href="https://github.com/{{ site.github.repository_nwo }}/edit/{{ site.branch }}/{{ page.path }}">Suggest changes on GitHub</a>
</p>
</div>
<div id="toc" class="col-md-3 py-6">
{% for section in site.data.toc %}
<h2 class="alt-h4">{{ section[0] }}</h2>
<ul class="mt-2 mb-4 list-style-none">
{% for item in section[1] %}
<li>
{% if item.url %}
{% assign link = item %}
{% else %}
{% for doc in site.pages %}
{% if doc.path == item %}
{% assign link = doc %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if page.url == link.url %}
{% assign classes = "text-brand-red" %}
{% else %}
{% assign classes = "text-gray-light" %}
{% endif %}
<a class="d-block no-underline py-1 {{classes}}" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>

66
index.html
View File

@@ -1,27 +1,26 @@
---
layout: default
---
<div class="">
<div class="container-lg px-3">
<header class="py-6">
<div class="pb-0 pt-md-4 py-lg-6">
<div class="d-flex flex-items-center flex-justify-center gutter-spacious">
<div class="col-3 offset-1 text-right">
<img src="/assets/logo.png">
</div>
<div class="flex-column col-8">
<h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
<h2 class="alt-h2 lh-condensed">
GitHub Apps to automate <br>and improve your workflow
</h2>
<p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
Use one of the pre-built open source apps that extend GitHub, or easily build and share your own.
</p>
</div>
<div class="container-lg px-3">
<header class="py-6">
<div class="pb-0 pt-md-4 py-lg-6">
<div class="d-md-flex flex-md-items-center flex-md-row-reverse flex-md-justify-center gutter-md-spacious">
<div class="col-md-8 text-center text-md-left">
<h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
<h2 class="alt-h2 lh-condensed">
GitHub Apps to automate <br>and improve your workflow
</h2>
<p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
Use the pre-built apps to extend GitHub,<br>
and easily build and share your own.
</p>
</div>
<div class="col-3 mx-auto mx-md-0 offset-md-1 text-center text-md-right">
<img src="/assets/logo.png" class="width-fit">
</div>
</div>
</header>
</div>
</div>
</header>
</div>
<div id="explore" class="bg-gray-light border-top border-gray-light">
@@ -75,10 +74,10 @@ layout: default
</p>
<div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
<div class="col-6 d-flex flex-column">
<div class="col-md-6 hide-md">
<img src="https://assets-cdn.github.com/images/modules/site/home-illo-conversation.svg" class="d-block width-fit mx-6">
</div>
<div class="col-6">
<div class="col-md-6">
<h3 class="alt-h3 mb-2">Optimized for GitHub</h3>
<p class="">
Receive webhooks and use the authenticated client to access the GitHub API. Granular permissions give each app access only to the data it needs and nothing more.
@@ -87,12 +86,12 @@ layout: default
</div>
<div class="page-section">
<div class="d-flex flex-md-row gutter flex-items-center flex-md-items-center">
<div class="col-6">
<div class="d-md-flex flex-md-row gutter-md flex-md-items-center">
<div class="col-md-6">
<h3 class="alt-h3 mb-2">Easily scriptable</h3>
<p class="">Focus on what you want to build. A simple API—built on the latest ES6 JavaScript features—hides the details you don't care about.</p>
</div>
<div class="col-6">
<div class="col-md-6">
<div class="rounded-2 overflow-hidden border" style="margin-left: 60px;">
{% highlight javascript %}
module.exports = robot => {
@@ -108,16 +107,8 @@ module.exports = robot => {
</div>
</div>
<div class="d-flex flex-md-row gutter mt-4">
<div class="col-6">
<h2 class="alt-h3 mb-2"></h2>
<p>Apps are first class actors within GitHub.</p>
<p class="mt-3">
<a href="/docs/">Get started with Probot {% octicon chevron-right %}</a>
</p>
</div>
<div class="col-6">
<div class="d-md-flex flex-md-row flex-md-row-reverse gutter mt-4">
<div class="col-md-6">
<img src="https://github.com/probot.png" height="44" width="44" class="avatar rounded-1 float-left">
<div class="timeline-comment box rounded-2 border bg-white" style="margin-left: 60px;">
<div class="bg-gray px-3 py-2 border-bottom">
@@ -126,6 +117,13 @@ module.exports = robot => {
<p class="m-0 p-3">Hello World!</p>
</div>
</div>
<div class="col-md-6">
<h2 class="alt-h3 mb-2"></h2>
<p>Apps are first class actors within GitHub.</p>
<p class="mt-3">
<a href="/docs/">Get started with Probot {% octicon chevron-right %}</a>
</p>
</div>
</div>
</div>
</div>