Skip to content

Commit 8833807

Browse files
JonRoweJonRowe
committed
basic page with carousel, needs content
1 parent ac9f827 commit 8833807

File tree

9 files changed

+332
-53
lines changed

9 files changed

+332
-53
lines changed

‎_layouts/default.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@
66
<meta http-equiv="X-UA-Compatible" content="chrome=1">
77
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
88
<link rel="stylesheet" href="/styles/default.css">
9+
<link rel="stylesheet" href="/styles/bootstrap.css">
910
<!--[if lt IE 9]>
1011
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1112
<![endif]-->
12-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>
13+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
14+
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
1315
</head>
1416
<body>
1517
<header>

‎_styles/_footer.sass‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
footer
2+
text-align: center
3+
background: black
4+
color: white
5+
height: 4em
6+
h1
7+
font-size: 1em
8+
p
9+
font-size: 0.8em
10+
h1, p
11+
margin: 0

‎_styles/_header.sass‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
header
2+
@include outer-container
3+
height: 10em
4+
overflow: hidden
5+
text-align: center
6+
font-size: 1.5em
7+
h1
8+
margin-left: auto
9+
margin-right: auto
10+
width: 8.5em
11+
line-height: 4em
12+
+dimensionalise-text( #333 )
13+
text-indent: -1em
14+
h1 img
15+
height: 4em
16+
float: left
17+
h1 span
18+
color: rgb(255,233,94)
19+
+dimensionalise-text( rgb(209,191,77) )

‎_styles/_page.sass‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
#page
2+
@include outer-container
3+
min-height: 100%
4+
margin-top: -15em
5+
margin-bottom: -4em
6+
padding-top: 15em
7+
padding-bottom: 4em
8+
9+
blockquote
10+
@include span-columns(12)
11+
@include omega()
12+
padding: 1em 0
13+
margin: 0
14+
text-align: center
15+
font-size: 1.2em
16+
&:before
17+
content: open-quote
18+
&:after
19+
content: close-quote
20+
&:before, &:after
21+
font-weight: bold
22+
23+
section
24+
h1
25+
border-bottom: 0.1em solid black
26+
padding-bottom: 0.3em

‎_styles/default.sass‎

Lines changed: 39 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,56 +10,47 @@ html, body
1010
background: white
1111
color: black
1212

13-
header
14-
@include outer-container
15-
height: 10em
16-
overflow: hidden
17-
text-align: center
18-
font-size: 1.5em
19-
h1
20-
margin-left: auto
21-
margin-right: auto
22-
width: 8.5em
23-
line-height: 4em
24-
+dimensionalise-text( #333 )
25-
text-indent: -1em
26-
h1 img
27-
height: 4em
28-
float: left
29-
h1 span
30-
color: rgb(255,233,94)
31-
+dimensionalise-text( rgb(209,191,77) )
13+
@import 'header'
14+
@import 'page'
15+
@import 'footer'
3216

3317
#page
34-
@include outer-container
35-
min-height: 100%
36-
margin-top: -15em
37-
margin-bottom: -4em
38-
padding-top: 15em
39-
padding-bottom: 4em
18+
section
19+
padding-top: 1em
20+
padding-bottom: 1em
4021

41-
blockquote
22+
#work, #contact
4223
@include span-columns(12)
43-
@include omega
44-
padding: 1em 0
45-
margin: 0
46-
text-align: center
47-
font-size: 1.2em
48-
&:before
49-
content: open-quote
50-
&:after
51-
content: close-quote
52-
&:before, &:after
53-
font-weight: bold
24+
#about
25+
@include shift(3)
26+
@include span-columns(6)
27+
#more, #work, #contact
28+
@include omega()
5429

55-
footer
56-
text-align: center
57-
background: black
58-
color: white
59-
height: 4em
60-
h1
61-
font-size: 1em
62-
p
63-
font-size: 0.8em
64-
h1, p
65-
margin: 0
30+
#about, #more
31+
text-align: justify
32+
padding-top: 1em
33+
font-size: 1.5em
34+
line-height: 1.1em
35+
36+
#work
37+
ul
38+
list-style: none
39+
margin: 0
40+
padding: 0
41+
li
42+
height: 560px
43+
h2
44+
background: white
45+
float: left
46+
margin: 1em
47+
padding: 0.5em
48+
font-size: 1.5em
49+
#folksy
50+
background: url('/images/folksy.png') no-repeat
51+
#summer_of_cycling
52+
background: url('/images/summer_of_cycling.png') no-repeat
53+
#helpout
54+
background: url('/images/helpout.png') no-repeat
55+
#foodhospital
56+
background: url('/images/foodhospital.png') no-repeat

‎index.html‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,43 @@
22
layout: default
33
title: Crafted Code
44
---
5-
<blockquote>
6-
Bespoke development and consultancy for the web, specalising in Test Driven Development with Ruby.
7-
</blockquote>
8-
5+
<section id="about">
6+
<p>
7+
Crafted Code creates applications with the web.
8+
<br>
9+
We build ideas, craft prototypes and polish them
10+
into products.
11+
</p>
12+
<p>
13+
We care about code, enthuse over experience and dig design.
14+
<br/>
15+
Checkout the projects we've been involved in.
16+
</p>
17+
</section>
18+
<section id="work">
19+
<ul class='carousel'>
20+
<div class='carousel-inner'>
21+
<li id='folksy' class='item active'>
22+
<h2>Folksy</h2>
23+
</li>
24+
<li id='summer_of_cycling' class='item'>
25+
<h2>Summer Of Cycling (Challenge for Change)</h2>
26+
</li>
27+
<li id='helpout' class='item'>
28+
<h2>Help Out (FutureGov)</h2>
29+
</li>
30+
<li id='foodhospital' class='item'>
31+
<h2>Food Hospital (Mudlark/Channel4)</h2>
32+
</li>
33+
</div>
34+
</ul>
35+
</section>
36+
<section id="contact">
37+
If you think you have an interesting project, and would like to hire us, drop us an email to <a href='mailto:[email protected]'>[email protected]</a>
38+
or to our founder, Jon Rowe, <a href='mailto:[email protected]'>[email protected]</a> who's always happy to talk.
39+
</section>
40+
<script type="text/javascript">
41+
$(function() {
42+
$('#work ul').carousel('cycle');
43+
});
44+
</script>

‎js/bootstrap.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles/bootstrap.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*!
2+
* Bootstrap v2.1.1
3+
*
4+
* Copyright 2012 Twitter, Inc
5+
* Licensed under the Apache License v2.0
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
* Designed and built with all the love in the world @twitter by @mdo and @fat.
9+
*/
10+
.clearfix {
11+
*zoom: 1;
12+
}
13+
.clearfix:before,
14+
.clearfix:after {
15+
display: table;
16+
content: "";
17+
line-height: 0;
18+
}
19+
.clearfix:after {
20+
clear: both;
21+
}
22+
.hide-text {
23+
font: 0/0 a;
24+
color: transparent;
25+
text-shadow: none;
26+
background-color: transparent;
27+
border: 0;
28+
}
29+
.input-block-level {
30+
display: block;
31+
width: 100%;
32+
min-height: 30px;
33+
-webkit-box-sizing: border-box;
34+
-moz-box-sizing: border-box;
35+
box-sizing: border-box;
36+
}
37+
.carousel {
38+
position: relative;
39+
margin-bottom: 20px;
40+
line-height: 1;
41+
}
42+
.carousel-inner {
43+
overflow: hidden;
44+
width: 100%;
45+
position: relative;
46+
}
47+
.carousel .item {
48+
display: none;
49+
position: relative;
50+
-webkit-transition: 0.6s ease-in-out left;
51+
-moz-transition: 0.6s ease-in-out left;
52+
-o-transition: 0.6s ease-in-out left;
53+
transition: 0.6s ease-in-out left;
54+
}
55+
.carousel .item > img {
56+
display: block;
57+
line-height: 1;
58+
}
59+
.carousel .active,
60+
.carousel .next,
61+
.carousel .prev {
62+
display: block;
63+
}
64+
.carousel .active {
65+
left: 0;
66+
}
67+
.carousel .next,
68+
.carousel .prev {
69+
position: absolute;
70+
top: 0;
71+
width: 100%;
72+
}
73+
.carousel .next {
74+
left: 100%;
75+
}
76+
.carousel .prev {
77+
left: -100%;
78+
}
79+
.carousel .next.left,
80+
.carousel .prev.right {
81+
left: 0;
82+
}
83+
.carousel .active.left {
84+
left: -100%;
85+
}
86+
.carousel .active.right {
87+
left: 100%;
88+
}
89+
.carousel-control {
90+
position: absolute;
91+
top: 40%;
92+
left: 15px;
93+
width: 40px;
94+
height: 40px;
95+
margin-top: -20px;
96+
font-size: 60px;
97+
font-weight: 100;
98+
line-height: 30px;
99+
color: #ffffff;
100+
text-align: center;
101+
background: #222222;
102+
border: 3px solid #ffffff;
103+
-webkit-border-radius: 23px;
104+
-moz-border-radius: 23px;
105+
border-radius: 23px;
106+
opacity: 0.5;
107+
filter: alpha(opacity=50);
108+
}
109+
.carousel-control.right {
110+
left: auto;
111+
right: 15px;
112+
}
113+
.carousel-control:hover {
114+
color: #ffffff;
115+
text-decoration: none;
116+
opacity: 0.9;
117+
filter: alpha(opacity=90);
118+
}
119+
.carousel-caption {
120+
position: absolute;
121+
left: 0;
122+
right: 0;
123+
bottom: 0;
124+
padding: 15px;
125+
background: #333333;
126+
background: rgba(0, 0, 0, 0.75);
127+
}
128+
.carousel-caption h4,
129+
.carousel-caption p {
130+
color: #ffffff;
131+
line-height: 20px;
132+
}
133+
.carousel-caption h4 {
134+
margin: 0 0 5px;
135+
}
136+
.carousel-caption p {
137+
margin-bottom: 0;
138+
}

0 commit comments

Comments
 (0)