Skip to content

Commit 5403be5

Browse files
committed
Updated landing page styling.
1 parent af2b1e5 commit 5403be5

File tree

10 files changed

+490
-8
lines changed

10 files changed

+490
-8
lines changed

_layouts/default.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
<body>
1919
<div class="header">
2020
<div class="container centered">
21-
<h2><a href="{{site.url}}{{site.baseurl}}">GitHub.js</a></h2>
22-
{%if page.path == 'index.md' %}{%include stars.html%}{%endif%}
21+
<h1><a href="{{site.baseurl}}">GitHub.js</a></h1>
2322
</div>
2423
</div>
2524
<div class="container" style="min-height: 70vh;">

_layouts/landing.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="description" content="{{ site.description }}">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
9+
<title>{{ site.title }}</title>
10+
11+
<!-- CDN asssets -->
12+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,700,700italic">
13+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
14+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
15+
<link rel="stylesheet" href="{{site.baseurl}}/css/main.css" media="screen" title="no title" charset="utf-8">
16+
17+
</head>
18+
<body>
19+
<div class="header landing">
20+
<div class="container centered">
21+
<div class="icons">
22+
<span class="mega-octicon octicon-issue-opened"></span><span class="mega-octicon octicon-star"></span>
23+
<h1>
24+
<span class="mega-octicon octicon-git-compare"></span>
25+
<a href="{{site.baseurl}}">GitHub.js</a>
26+
<span class="mega-octicon octicon-search"></span>
27+
</h1>
28+
<span class="mega-octicon octicon-repo-forked"></span><span class="mega-octicon octicon-radio-tower"></span>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="container" style="min-height: 70vh;">
33+
{{ content }}
34+
</div>
35+
<div class="footer centered">
36+
&copy; 2013 - {{site.time | date: "%Y"}},
37+
Michael Aufreiter (<a href="//substance.io">Development Seed</a>) and
38+
<a href="//github.com/yahoo">Yahoo Inc</a>.
39+
</div>
40+
{% include scripts.html %}
41+
</body>
42+
</html>

_sass/_octicons.scss

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
$octicons-font-path: "octicons" !default;
2+
$octicons-version: "c5a1d52cb40008f6d4ed65bf3f12d508b2fe8c88";
3+
4+
@font-face {
5+
font-family: 'octicons';
6+
src: url("#{$octicons-font-path}/octicons.eot?#iefix&v=#{$octicons-version}") format("embedded-opentype"),
7+
url("#{$octicons-font-path}/octicons.woff?v=#{$octicons-version}") format("woff"),
8+
url("#{$octicons-font-path}/octicons.ttf?v=#{$octicons-version}") format("truetype"),
9+
url("#{$octicons-font-path}/octicons.svg?v=#{$octicons-version}#octicons") format("svg");
10+
11+
font-weight: normal;
12+
font-style: normal;
13+
}
14+
15+
// .octicon is optimized for 16px.
16+
// .mega-octicon is optimized for 32px but can be used larger.
17+
.octicon, .mega-octicon {
18+
font: normal normal normal 16px/1 octicons;
19+
display: inline-block;
20+
text-decoration: none;
21+
text-rendering: auto;
22+
-webkit-font-smoothing: antialiased;
23+
-moz-osx-font-smoothing: grayscale;
24+
-webkit-user-select: none;
25+
-moz-user-select: none;
26+
-ms-user-select: none;
27+
user-select: none;
28+
}
29+
.mega-octicon { font-size: 32px; }
30+
31+
.octicon-alert:before { content: '\f02d'} /**/
32+
.octicon-arrow-down:before { content: '\f03f'} /**/
33+
.octicon-arrow-left:before { content: '\f040'} /**/
34+
.octicon-arrow-right:before { content: '\f03e'} /**/
35+
.octicon-arrow-small-down:before { content: '\f0a0'} /**/
36+
.octicon-arrow-small-left:before { content: '\f0a1'} /**/
37+
.octicon-arrow-small-right:before { content: '\f071'} /**/
38+
.octicon-arrow-small-up:before { content: '\f09f'} /**/
39+
.octicon-arrow-up:before { content: '\f03d'} /**/
40+
.octicon-microscope:before,
41+
.octicon-beaker:before { content: '\f0dd'} /**/
42+
.octicon-bell:before { content: '\f0de'} /**/
43+
.octicon-bold:before { content: '\f0e2'} /**/
44+
.octicon-book:before { content: '\f007'} /**/
45+
.octicon-bookmark:before { content: '\f07b'} /**/
46+
.octicon-briefcase:before { content: '\f0d3'} /**/
47+
.octicon-broadcast:before { content: '\f048'} /**/
48+
.octicon-browser:before { content: '\f0c5'} /**/
49+
.octicon-bug:before { content: '\f091'} /**/
50+
.octicon-calendar:before { content: '\f068'} /**/
51+
.octicon-check:before { content: '\f03a'} /**/
52+
.octicon-checklist:before { content: '\f076'} /**/
53+
.octicon-chevron-down:before { content: '\f0a3'} /**/
54+
.octicon-chevron-left:before { content: '\f0a4'} /**/
55+
.octicon-chevron-right:before { content: '\f078'} /**/
56+
.octicon-chevron-up:before { content: '\f0a2'} /**/
57+
.octicon-circle-slash:before { content: '\f084'} /**/
58+
.octicon-circuit-board:before { content: '\f0d6'} /**/
59+
.octicon-clippy:before { content: '\f035'} /**/
60+
.octicon-clock:before { content: '\f046'} /**/
61+
.octicon-cloud-download:before { content: '\f00b'} /**/
62+
.octicon-cloud-upload:before { content: '\f00c'} /**/
63+
.octicon-code:before { content: '\f05f'} /**/
64+
.octicon-comment-add:before,
65+
.octicon-comment:before { content: '\f02b'} /**/
66+
.octicon-comment-discussion:before { content: '\f04f'} /**/
67+
.octicon-credit-card:before { content: '\f045'} /**/
68+
.octicon-dash:before { content: '\f0ca'} /**/
69+
.octicon-dashboard:before { content: '\f07d'} /**/
70+
.octicon-database:before { content: '\f096'} /**/
71+
.octicon-clone:before,
72+
.octicon-desktop-download:before { content: '\f0dc'} /**/
73+
.octicon-device-camera:before { content: '\f056'} /**/
74+
.octicon-device-camera-video:before { content: '\f057'} /**/
75+
.octicon-device-desktop:before { content: '\f27c'} /**/
76+
.octicon-device-mobile:before { content: '\f038'} /**/
77+
.octicon-diff:before { content: '\f04d'} /**/
78+
.octicon-diff-added:before { content: '\f06b'} /**/
79+
.octicon-diff-ignored:before { content: '\f099'} /**/
80+
.octicon-diff-modified:before { content: '\f06d'} /**/
81+
.octicon-diff-removed:before { content: '\f06c'} /**/
82+
.octicon-diff-renamed:before { content: '\f06e'} /**/
83+
.octicon-ellipsis:before { content: '\f09a'} /**/
84+
.octicon-eye-unwatch:before,
85+
.octicon-eye-watch:before,
86+
.octicon-eye:before { content: '\f04e'} /**/
87+
.octicon-file-binary:before { content: '\f094'} /**/
88+
.octicon-file-code:before { content: '\f010'} /**/
89+
.octicon-file-directory:before { content: '\f016'} /**/
90+
.octicon-file-media:before { content: '\f012'} /**/
91+
.octicon-file-pdf:before { content: '\f014'} /**/
92+
.octicon-file-submodule:before { content: '\f017'} /**/
93+
.octicon-file-symlink-directory:before { content: '\f0b1'} /**/
94+
.octicon-file-symlink-file:before { content: '\f0b0'} /**/
95+
.octicon-file-text:before { content: '\f011'} /**/
96+
.octicon-file-zip:before { content: '\f013'} /**/
97+
.octicon-flame:before { content: '\f0d2'} /**/
98+
.octicon-fold:before { content: '\f0cc'} /**/
99+
.octicon-gear:before { content: '\f02f'} /**/
100+
.octicon-gift:before { content: '\f042'} /**/
101+
.octicon-gist:before { content: '\f00e'} /**/
102+
.octicon-gist-secret:before { content: '\f08c'} /**/
103+
.octicon-git-branch-create:before,
104+
.octicon-git-branch-delete:before,
105+
.octicon-git-branch:before { content: '\f020'} /**/
106+
.octicon-git-commit:before { content: '\f01f'} /**/
107+
.octicon-git-compare:before { content: '\f0ac'} /**/
108+
.octicon-git-merge:before { content: '\f023'} /**/
109+
.octicon-git-pull-request-abandoned:before,
110+
.octicon-git-pull-request:before { content: '\f009'} /**/
111+
.octicon-globe:before { content: '\f0b6'} /**/
112+
.octicon-graph:before { content: '\f043'} /**/
113+
.octicon-heart:before { content: '\2665'} /**/
114+
.octicon-history:before { content: '\f07e'} /**/
115+
.octicon-home:before { content: '\f08d'} /**/
116+
.octicon-horizontal-rule:before { content: '\f070'} /**/
117+
.octicon-hubot:before { content: '\f09d'} /**/
118+
.octicon-inbox:before { content: '\f0cf'} /**/
119+
.octicon-info:before { content: '\f059'} /**/
120+
.octicon-issue-closed:before { content: '\f028'} /**/
121+
.octicon-issue-opened:before { content: '\f026'} /**/
122+
.octicon-issue-reopened:before { content: '\f027'} /**/
123+
.octicon-italic:before { content: '\f0e4'} /**/
124+
.octicon-jersey:before { content: '\f019'} /**/
125+
.octicon-key:before { content: '\f049'} /**/
126+
.octicon-keyboard:before { content: '\f00d'} /**/
127+
.octicon-law:before { content: '\f0d8'} /**/
128+
.octicon-light-bulb:before { content: '\f000'} /**/
129+
.octicon-link:before { content: '\f05c'} /**/
130+
.octicon-link-external:before { content: '\f07f'} /**/
131+
.octicon-list-ordered:before { content: '\f062'} /**/
132+
.octicon-list-unordered:before { content: '\f061'} /**/
133+
.octicon-location:before { content: '\f060'} /**/
134+
.octicon-gist-private:before,
135+
.octicon-mirror-private:before,
136+
.octicon-git-fork-private:before,
137+
.octicon-lock:before { content: '\f06a'} /**/
138+
.octicon-logo-gist:before { content: '\f0ad'} /**/
139+
.octicon-logo-github:before { content: '\f092'} /**/
140+
.octicon-mail:before { content: '\f03b'} /**/
141+
.octicon-mail-read:before { content: '\f03c'} /**/
142+
.octicon-mail-reply:before { content: '\f051'} /**/
143+
.octicon-mark-github:before { content: '\f00a'} /**/
144+
.octicon-markdown:before { content: '\f0c9'} /**/
145+
.octicon-megaphone:before { content: '\f077'} /**/
146+
.octicon-mention:before { content: '\f0be'} /**/
147+
.octicon-milestone:before { content: '\f075'} /**/
148+
.octicon-mirror-public:before,
149+
.octicon-mirror:before { content: '\f024'} /**/
150+
.octicon-mortar-board:before { content: '\f0d7'} /**/
151+
.octicon-mute:before { content: '\f080'} /**/
152+
.octicon-no-newline:before { content: '\f09c'} /**/
153+
.octicon-octoface:before { content: '\f008'} /**/
154+
.octicon-organization:before { content: '\f037'} /**/
155+
.octicon-package:before { content: '\f0c4'} /**/
156+
.octicon-paintcan:before { content: '\f0d1'} /**/
157+
.octicon-pencil:before { content: '\f058'} /**/
158+
.octicon-person-add:before,
159+
.octicon-person-follow:before,
160+
.octicon-person:before { content: '\f018'} /**/
161+
.octicon-pin:before { content: '\f041'} /**/
162+
.octicon-plug:before { content: '\f0d4'} /**/
163+
.octicon-repo-create:before,
164+
.octicon-gist-new:before,
165+
.octicon-file-directory-create:before,
166+
.octicon-file-add:before,
167+
.octicon-plus:before { content: '\f05d'} /**/
168+
.octicon-primitive-dot:before { content: '\f052'} /**/
169+
.octicon-primitive-square:before { content: '\f053'} /**/
170+
.octicon-pulse:before { content: '\f085'} /**/
171+
.octicon-question:before { content: '\f02c'} /**/
172+
.octicon-quote:before { content: '\f063'} /**/
173+
.octicon-radio-tower:before { content: '\f030'} /**/
174+
.octicon-repo-delete:before,
175+
.octicon-repo:before { content: '\f001'} /**/
176+
.octicon-repo-clone:before { content: '\f04c'} /**/
177+
.octicon-repo-force-push:before { content: '\f04a'} /**/
178+
.octicon-gist-fork:before,
179+
.octicon-repo-forked:before { content: '\f002'} /**/
180+
.octicon-repo-pull:before { content: '\f006'} /**/
181+
.octicon-repo-push:before { content: '\f005'} /**/
182+
.octicon-rocket:before { content: '\f033'} /**/
183+
.octicon-rss:before { content: '\f034'} /**/
184+
.octicon-ruby:before { content: '\f047'} /**/
185+
.octicon-search-save:before,
186+
.octicon-search:before { content: '\f02e'} /**/
187+
.octicon-server:before { content: '\f097'} /**/
188+
.octicon-settings:before { content: '\f07c'} /**/
189+
.octicon-shield:before { content: '\f0e1'} /**/
190+
.octicon-log-in:before,
191+
.octicon-sign-in:before { content: '\f036'} /**/
192+
.octicon-log-out:before,
193+
.octicon-sign-out:before { content: '\f032'} /**/
194+
.octicon-smiley:before { content: '\f0e7'} /**/
195+
.octicon-squirrel:before { content: '\f0b2'} /**/
196+
.octicon-star-add:before,
197+
.octicon-star-delete:before,
198+
.octicon-star:before { content: '\f02a'} /**/
199+
.octicon-stop:before { content: '\f08f'} /**/
200+
.octicon-repo-sync:before,
201+
.octicon-sync:before { content: '\f087'} /**/
202+
.octicon-tag-remove:before,
203+
.octicon-tag-add:before,
204+
.octicon-tag:before { content: '\f015'} /**/
205+
.octicon-tasklist:before { content: '\f0e5'} /**/
206+
.octicon-telescope:before { content: '\f088'} /**/
207+
.octicon-terminal:before { content: '\f0c8'} /**/
208+
.octicon-text-size:before { content: '\f0e3'} /**/
209+
.octicon-three-bars:before { content: '\f05e'} /**/
210+
.octicon-thumbsdown:before { content: '\f0db'} /**/
211+
.octicon-thumbsup:before { content: '\f0da'} /**/
212+
.octicon-tools:before { content: '\f031'} /**/
213+
.octicon-trashcan:before { content: '\f0d0'} /**/
214+
.octicon-triangle-down:before { content: '\f05b'} /**/
215+
.octicon-triangle-left:before { content: '\f044'} /**/
216+
.octicon-triangle-right:before { content: '\f05a'} /**/
217+
.octicon-triangle-up:before { content: '\f0aa'} /**/
218+
.octicon-unfold:before { content: '\f039'} /**/
219+
.octicon-unmute:before { content: '\f0ba'} /**/
220+
.octicon-unverified:before { content: '\f0e8'} /**/
221+
.octicon-verified:before { content: '\f0e6'} /**/
222+
.octicon-versions:before { content: '\f064'} /**/
223+
.octicon-watch:before { content: '\f0e0'} /**/
224+
.octicon-remove-close:before,
225+
.octicon-x:before { content: '\f081'} /**/
226+
.octicon-zap:before { content: '\26A1'} /**/

_sass/_variables.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@ $orange: #F2AE72;
44
$salmon: #D96459;
55
$red: #8C4646;
66

7-
$textcolor: #222;
7+
8+
$white: darken(white, 2.5%);
9+
$light-gray: darken(white, 5%);
10+
$upper-mid-gray: darken(white, 15%);
11+
$gray: darken(white, 30%);
12+
$lower-mid-gray: darken(white, 50%);
13+
$dark-gray: darken(white, 70%);
14+
$black: darken(white, 95%);
15+
16+
$textcolor: $black;

css/main.scss

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,32 @@
55

66
@import "syntax";
77
@import "variables";
8+
@import "octicons";
89

10+
11+
$icon-width: 10rem;
912
.header {
1013
background-color: $green;
11-
padding-bottom: 1rem;
14+
15+
h1 {
16+
padding: 2rem;
17+
}
18+
19+
&.landing {
20+
padding: 12rem 0 20rem 0;
21+
22+
div.icons {
23+
& span.mega-octicon {
24+
width: $icon-width;
25+
font-size: $icon-width * 0.7;
26+
color: $white;
27+
}
28+
}
29+
}
1230

1331
a,
1432
a:visited {
15-
color: white;
33+
color: $white;
1634
}
1735
}
1836

css/octicons/octicons.eot

30.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy