Skip to content

Commit daef5b4

Browse files
dominicdominic
committed
basic homepage markup
1 parent 1c206ac commit daef5b4

10 files changed

Lines changed: 96 additions & 41 deletions

File tree

‎app/assets/images/logo-star.png‎

1.86 KB
Loading

‎app/assets/images/rubyplusshoes.png‎

26.5 KB
Loading

‎app/assets/images/screenshots/lesson.png‎

92.3 KB
Loading

‎app/assets/images/screenshots/new_program.png‎

42.5 KB
Loading

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
44
* the top of the compiled file, but it's generally better to create a new file per style scope.
55
*
6-
*= require "lib/bootstrap/bootstrap"
76
*= require_self
87
*/
98

109
/* We're doing our manifest file a little differently to work with bootstrap... */
10+
@import "lib/bootstrap/bootstrap.scss";
1111
@import "lib/shared.css.scss";
1212
@import "layout.css.scss";
1313
@import "forms.css.scss";

‎app/assets/stylesheets/content.css.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.home {
2+
section {
3+
@include clearfix;
4+
margin: 0 36px 36px;
5+
padding-bottom: 36px;
6+
border-bottom: 6px dotted $linkColor;
7+
8+
font-size: 1.7em;
9+
10+
h1 {
11+
font-size: 1.6em;
12+
/* text-transform: uppercase;*/
13+
}
14+
p {
15+
font-size: 1em;
16+
line-height: 1.5em;
17+
margin-bottom: 1em;
18+
}
19+
20+
img.new_program {
21+
float: left;
22+
@include columns(5);
23+
margin-right: $gridGutterWidth*2;
24+
}
25+
img.lesson {
26+
float: right;
27+
@include columns(8);
28+
margin-left: $gridGutterWidth*2;
29+
30+
}
31+
}
32+
33+
section.last {
34+
border: none;
35+
margin-bottom: 0;
36+
}
37+
}

‎app/assets/stylesheets/layout.css.scss‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,35 @@
1-
body {
2-
padding-top: 105px;
3-
}
4-
5-
header .topbar-inner {
6-
padding: 1em 0;
1+
header .topbar-inner {
2+
.container {
3+
padding: 0.75em 0;
4+
}
5+
76
li a {
87
border-radius: 8px;
8+
font-size: 14px;
9+
padding: 11px 11px 10px;
910
}
10-
}
1111

12-
#logo {
13-
float: left;
14-
width: 97px;
15-
height: 40px;
12+
#logo {
13+
float: left;
14+
margin-left: -40px;
15+
width: 185px;
16+
height: 40px;
17+
18+
a {
19+
position: absolute;
20+
top: -2px;
21+
height: 75px;
22+
padding: 0;
23+
width: 100%;
24+
display: block;
25+
background: url('/assets/logo-star.png') no-repeat;
26+
text-indent: -9999px;
27+
}
28+
}
1629
}
1730

18-
#logo a {
19-
position: absolute;
20-
padding: 0;
21-
top: -7px;
22-
width: 97px;
23-
height: 90px;
24-
display: block;
25-
background: url('/assets/logo-star.png') no-repeat;
26-
text-indent: -9999px;
31+
#content-wrap {
32+
padding-top: 105px;
33+
width: 980px;
34+
margin: auto;
2735
}

‎app/assets/stylesheets/lib/bootstrap/preboot.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// ---------
88

99
// Links
10-
$linkColor: #0069d6;
10+
$linkColor: #04BFBF;
1111
$linkColorHover: darken($linkColor, 10);
1212

1313
// Grays
@@ -19,8 +19,8 @@ $grayLighter: lighten($black, 90%);
1919
$white: #fff;
2020

2121
// Accent Colors
22-
$blue: #049CDB;
23-
$blueDark: #0064CD;
22+
$blue: #04BFBF;
23+
$blueDark: #008a8a;
2424
$green: #46a546;
2525
$red: #9d261d;
2626
$yellow: #ffc40d;
@@ -258,7 +258,7 @@ $analog2: spin($baseColor, -22);
258258
}
259259
// Success appears as green
260260
&.success {
261-
@include gradient-bar(#62c462, #57a957);
261+
@include gradient-bar(#C0D966 - #111, #C0D966 - #222);
262262
}
263263
// Info appears as a neutral blue
264264
&.info {

‎app/views/layouts/application.html.haml‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@
1313
%header.topbar
1414
.topbar-inner
1515
.container
16-
%h3#logo
16+
#logo
1717
= link_to "Hackety Hack", root_path
1818
= render "shared/menu/main"
1919
= render "shared/menu/user"
2020

21-
.container
22-
- if flash[:notice]
23-
.alert-message.success
24-
#{flash[:notice]}
25-
= link_to "x", "#", :class => "close"
21+
#content-wrap{:class => @page_class}
22+
#content.container
23+
- if flash[:notice]
24+
.alert-message.success
25+
#{flash[:notice]}
26+
= link_to "x", "#", :class => "close"
2627

27-
- title = yield :title
28-
- unless title.empty?
29-
%h1.title
30-
= title
31-
32-
= yield :links
33-
= yield
28+
- title = yield :title
29+
- unless title.empty?
30+
%h1.title
31+
= title
3432

33+
= yield :links
34+
= yield
3535

3636
%footer
3737
.container

‎app/views/static/root.html.haml‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
%h1 Want to learn to program?
2-
%p Hackety Hack will teach you the absolute basics of programming from the ground up. No previous programming experience is needed!
3-
%p With Hackety Hack, you'll learn the #{link_to "Ruby programming language", "http://www.ruby-lang.org/"}. Ruby is used for all kinds of programs, including desktop applications and websites.
1+
- @page_class = "home"
2+
%section
3+
%img.left.new_program{:src => "assets/screenshots/new_program.png"}
44

5+
%h1 Want to learn programming?
6+
%p Hackety Hack will teach you the absolute basics of programming from the ground up. No previous programming experience is needed!
7+
%p With Hackety Hack, you'll learn the #{link_to "Ruby programming language", "http://www.ruby-lang.org/"}. Ruby is used for all kinds of programs, including desktop applications and websites.
8+
= link_to "Download Now - Version 1.0", "/", :class => "btn primary large"
9+
10+
%section.last
11+
%img.right.lesson{:src => "assets/screenshots/lesson.png"}
12+
%p Hackety Hack uses the #{link_to "Shoes", "http://shoesrb.com/"} toolkit to make it really easy and fun to build graphical interfaces.
13+
%p Several lessons and example programs are provided, showing you how to make all kinds of fun things!
14+
%img{:src => "assets/rubyplusshoes.png"}

0 commit comments

Comments
 (0)