Skip to content

Commit

Permalink
Initial homepage commit
Browse files Browse the repository at this point in the history
- GitHub API requests are working
  • Loading branch information
Patrick Burtchaell committed Jun 9, 2014
1 parent f31fb4a commit fbdc7d6
Show file tree
Hide file tree
Showing 7 changed files with 188 additions and 30 deletions.
23 changes: 22 additions & 1 deletion Gruntfile.js
Expand Up @@ -118,7 +118,16 @@ module.exports = function(grunt) {
site: {
options: {theme: 'docs'},
files: {
'<%= site.dest %>/': ['<%= site.pages %>/helpers.hbs']
'<%= site.dest %>/': [
'<%= site.pages %>/helpers.hbs',
'<%= site.content %>/*.hbs'
]
}
},
// Temporary task for homepage dev
homepage: {
files: {
'<%= site.dest %>/': ['<%= site.content %>/index.hbs']
}
}
},
Expand Down Expand Up @@ -188,6 +197,10 @@ module.exports = function(grunt) {
src: ['<%= site.styles %>/index.less'],
dest: '<%= site.public %>/css/docs.css'
},
homepage: {
src: ['<%= site.styles %>/module/page-home.less'],
dest: '<%= site.public %>/css/home.css'
}
},

autoprefixer: {
Expand Down Expand Up @@ -364,6 +377,14 @@ module.exports = function(grunt) {
'<%= site.assets %>/{,*/}*.js',
'<%= site.assets %>/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
},
// Temporary task for homepage dev
homepage: {
tasks: ['assemble:homepage','less:homepage'],
files: [
'<%= site.content %>/index.hbs',
'<%= site.styles %>/module/page-home.less'
]
}
}
});
Expand Down
4 changes: 3 additions & 1 deletion bower.json
Expand Up @@ -7,6 +7,8 @@
"dependencies": {
"bootstrap": "~3.1.1",
"html5shiv": "~3.7.2",
"respond": "~1.4.2"
"respond": "~1.4.2",
"flare": "~1.0.0",
"jquery": "~2.1.1"
}
}
87 changes: 87 additions & 0 deletions content/index.hbs
@@ -0,0 +1,87 @@
---
layout: none
theme: docs
---

<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel=stylesheet type="text/css" href=/public/css/home.css>
</head>
<body{{#modifier}} class="{{.}}"{{/modifier}}>

{{> nav-main }}

<main class="page page-home">

<section id=assemble-introduction class="page-home-section">

<div class=masthead-section>
{{!--<h1 class=masthead-section-title>Build something</h1>--}}
<p class=masthead-section-subtitle><a href rel=external></a></p>
</div>

<div class=masthead-github>
<p class=commit-msg>
Latest commit <a href="" rel=source>on GitHub</a>
<span class=commit-msg-date></span>&#124;
<a href class=commit-msg-hash></a>
<script>
var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
url: "https://api.github.com/repos/assemble/assemble/commits?access_token=a68f663a562b8c67d18f3fff16411a384316818d",
dataType: 'jsonp',
success: function (json) {
var latest = json.data[0];
if (!latest) return;
var stamp = new Date(latest.commit.committer.date),
stampString = month[stamp.getMonth()] + ' ' + stamp.getDate() + ', ' + stamp.getFullYear();
//$('.commit-msg .description').text(latest.commit.message);
$('.commit-msg-date').text(stampString);
$('.commit-msg-hash').html('Commit ' + latest.sha + ' &raquo;');
$('.commit-msg-hash').attr('href', "https://github.com/assemble/assemble/commit/" + latest.sha);
}
});
$.ajax({
dataType: 'jsonp',
url: 'https://api.github.com/repos/assemble/assemble?callback=assembleGitHub&access_token=a68f663a562b8c67d18f3fff16411a384316818d',
success: function (response) {
if (response && response.data.watchers) {
var watchers = (Math.round((response.data.watchers / 100), 10) / 10).toFixed(1);
$('.masthead-section-subtitle a').html(watchers + 'k stargazers');
}
}
});
</script>
</p>
</div>

</section><!-- /#assemble-introduction -->

<section id=assemble-projects class="page-home-section">
<article date-feature=true class=asseble-project>

</article>
<article class=asseble-project>

</article>
<article class=asseble-project>

</article>
</section><!-- /#assemble-projects -->

<section class="page-home-section">

</section><!-- /# -->

</main>

{{#isnt slug 'blog'}}
{{> footer }}
{{/isnt}}

{{> javascripts }}
</body>
</html>
16 changes: 7 additions & 9 deletions styles/README.md
@@ -1,25 +1,23 @@
# Styles

> CSS styles are organized into the following concepts
## Generalized styles

* **Components**: generic UI components that can be used with any theme. Buttons, navbars, and so on.
* **Mixins**: generalized mixins that can be used with any theme
* **Utilities**: generalized styles that are either intended to be stop-gaps for more semantic or idiomatic alternatives, or allow for special styling overrides that wouldn't make sense to add to components themselves. For example, `.pull-left` and `.pull-right` are utility classes for `float: left` and `float: right`. For the majority of use cases, some components might not need built-in floats, so the `.pull-` classes come in handy when one of these components needs a float.
* **Vendor**: Third-party styles from a framework, library or toolkit like Bootstrap or Zurb.
- **Components**: generic UI components that can be used with any theme. Buttons, navbars, and so on.
- **Mixins**: generalized mixins that can be used with any theme
- **Utilities**: generalized styles that are either intended to be stop-gaps for more semantic or idiomatic alternatives, or allow for special styling overrides that wouldn't make sense to add to components themselves. For example, `.pull-left` and `.pull-right` are utility classes for `float: left` and `float: right`. For the majority of use cases, some components might not need built-in floats, so the `.pull-` classes come in handy when one of these components needs a float.
- **Vendor**: Third-party styles from a framework, library or toolkit like Bootstrap or Zurb.

## Themes

> Themes can be thought of as **special styles**, built **on top of common styles**
**Core**

At minimum, every theme consists of the following:

* index.less
* variables.less
- index.less
- variables.less

**Components**

Whenever possible, components are generalized, but themes can have their own components when they are specific enough. For example, a [book](./themes/book) theme might have components that are book-related. It wouldn't make sense for book-specific components to be lumped in with the generic components.
Whenever possible, components are generalized, but themes can have their own components when they are specific enough. For example, a [book](./themes/book) theme might have components that are book-related. It wouldn't make sense for book-specific components to be lumped in with the generic components.
2 changes: 2 additions & 0 deletions styles/docs.less
Expand Up @@ -34,6 +34,8 @@
* Miscellaneous
*/

/* Home page code, putting here for development */
@import 'module/page-home';

/*
* Scaffolding
Expand Down
42 changes: 42 additions & 0 deletions styles/module/page-home.less
@@ -0,0 +1,42 @@
@import '../variables';

#assemble-introduction {
top: 35px;
}

.masthead-section {
display: flex;
height: 50vh;
background: @black;
}

.masthead-section-title {
flex: 1 auto;
flex-direction: column;
display: inline-flex;
align-items: center;
align-self: center;
margin: 0;
padding: 0;
color: @white;
font-family: @font-open-sans-condensed;
text-transform: uppercase;
letter-spacing: 3px;
}

.masthead-section-subtitle {
letter-spacing: 1px;
color: @white;
}

.masthead-github {
box-sizing: border-box;
text-align: center;
padding: 10px;
background: @gray-dark;
color: @white;
p {
margin: 0;
padding: 0;
}
}
44 changes: 25 additions & 19 deletions styles/variables.less
Expand Up @@ -5,26 +5,34 @@

// Palette
// ------------------------------------------------
// Grayscale and colors for use across the site.
// Values and colors for use across the site.

// Grayscale
@black: #000;
@gray-darkest: lighten(#000, 7.5%); // #111
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-medium: lighten(#000, 46.75%); // #777
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@gray-lightest: lighten(#000, 97%); // #f7f7f7
@black: #000; // as the night
@gray-darkest: lighten(#000, 7.5%); // -> #111
@gray-darker: lighten(#000, 13.5%); // -> #222
@gray-dark: lighten(#000, 20%); // -> #333
@gray: lighten(#000, 33.5%); // -> #555
@gray-medium: lighten(#000, 46.75%); // -> #777
@gray-light: lighten(#000, 60%); // -> #999
@gray-lighter: lighten(#000, 93.5%); // -> #eee
@gray-lightest: lighten(#000, 97%); // -> #f7f7f7

// Colors
@brand-primary: #33b5e5;
@brand-success: #5cb85c;
@brand-info: #00b4e0;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-inverse: #fff;
@blue-light: #33b5e5;
@blue-dark: #00b4e0;
@green: #5cb85c;
@orange: #f0ad4e;
@red: #d9534f;
@white: #fff;

// Branded Colors
@brand-primary: @blue-light;
@brand-success: @green;
@brand-info: @blue-dark;
@brand-warning: @orange;
@brand-danger: @red;
@brand-inverse: @white;

This comment has been minimized.

Copy link
@jonschlinkert

jonschlinkert Jun 9, 2014

Member

@pburtchaell my OCD would be happy if you could keep the alignment in the variables lol. that aside, I like doing this too. as long as we avoid using the actual color names in styles

This comment has been minimized.

Copy link
@pburtchaell

pburtchaell Jun 11, 2014

Okay no prob



Expand All @@ -33,7 +41,7 @@
// Settings for some of the most global styles.

// Background color for `<body>`.
@body-bg: #fff;
@body-bg: @white;
@body-padding: @navbar-height;
// Global text color on `<body>`.
@text-color: @gray-dark;
Expand Down Expand Up @@ -61,8 +69,6 @@
@font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-serif: 'Chronicle SSm A', 'Chronicle SSm B', Georgia, "Times New Roman", Times, serif;



// Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
Expand Down

0 comments on commit fbdc7d6

Please sign in to comment.