Skip to content

Commit

Permalink
Visually interesting big picture on homepage.
Browse files Browse the repository at this point in the history
  • Loading branch information
lazyatom committed Jan 21, 2014
1 parent bb6a1f4 commit 1365b9a
Show file tree
Hide file tree
Showing 25 changed files with 334 additions and 39 deletions.
1 change: 1 addition & 0 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ source 'https://rubygems.org'
gem 'jekyll'
gem 'kramdown'
# gem 'bootstrap-sass', git: 'https://github.com/thomas-mcdonald/bootstrap-sass.git', branch: '3'
gem 'sass'
gem 'jekyll-assets'
gem 'uglifier'
gem 'rake'
Expand Down
56 changes: 37 additions & 19 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,51 +1,68 @@
GEM
remote: https://rubygems.org/
specs:
classifier (1.3.3)
blankslate (2.1.2.4)
classifier (1.3.4)
fast-stemmer (>= 1.0.0)
colorator (0.1)
commander (4.1.5)
highline (~> 1.6.11)
directory_watcher (1.4.1)
execjs (2.0.2)
fast-stemmer (1.0.2)
ffi (1.9.3)
highline (1.6.20)
hike (1.2.3)
htmlentities (4.3.1)
jekyll (1.2.1)
jekyll (1.4.3)
classifier (~> 1.3)
colorator (~> 0.1)
commander (~> 4.1.3)
directory_watcher (~> 1.4.1)
liquid (~> 2.5.2)
maruku (~> 0.5)
liquid (~> 2.5.5)
listen (~> 1.3)
maruku (~> 0.7.0)
pygments.rb (~> 0.5.0)
redcarpet (~> 2.3.0)
safe_yaml (~> 0.7.0)
jekyll-assets (0.7.3)
safe_yaml (~> 0.9.7)
toml (~> 0.1.0)
jekyll-assets (0.7.4)
jekyll (~> 1.0)
sprockets (~> 2.10)
kramdown (1.2.0)
liquid (2.5.3)
maruku (0.7.0)
multi_json (1.8.2)
posix-spawn (0.3.6)
pygments.rb (0.5.2)
json (1.8.1)
kramdown (1.3.1)
liquid (2.5.5)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
rb-kqueue (>= 0.2)
maruku (0.7.1)
multi_json (1.8.4)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.8)
pygments.rb (0.5.4)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.1.0)
rack (1.5.2)
rake (0.9.6)
rake (10.1.1)
rb-fsevent (0.9.4)
rb-inotify (0.9.3)
ffi (>= 0.5.0)
rb-kqueue (0.2.0)
ffi (>= 0.5.0)
redcarpet (2.3.0)
safe_yaml (0.7.1)
sprockets (2.10.0)
safe_yaml (0.9.7)
sass (3.2.12)
sprockets (2.10.1)
hike (~> 1.2)
multi_json (~> 1.0)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
tilt (1.4.1)
uglifier (2.2.1)
toml (0.1.0)
parslet (~> 1.5.0)
uglifier (2.4.0)
execjs (>= 0.3.0)
multi_json (~> 1.0, >= 1.0.2)
json (>= 1.8.0)
yajl-ruby (1.1.0)

PLATFORMS
Expand All @@ -57,4 +74,5 @@ DEPENDENCIES
jekyll-assets
kramdown
rake
sass
uglifier
11 changes: 11 additions & 0 deletions _assets/stylesheets/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $spread $color;
-moz-box-shadow:inset $top $left $blur $spread $color;
box-shadow:inset $top $left $blur $spread $color;
} @else {
-webkit-box-shadow: $top $left $blur $spread $color;
-moz-box-shadow: $top $left $blur $spread $color;
box-shadow: $top $left $blur $spread $color;
}
}
27 changes: 26 additions & 1 deletion _assets/stylesheets/home.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,25 @@
#home {
.hero, .content {
.hero, .content, .strapline-row {
@include make-row();
}

.strapline-row {
.strapline {
@include make-sm-column(12);
@include make-md-column(10);
@include make-lg-column(8);
@include make-md-column-offset(1);
@include make-lg-column-offset(2);
}

.strapline {
@include font-body-italic;
color: $gray;
opacity: 0.7;
margin-bottom: 0;
}
}

.hero {
.product-image {
@include make-sm-column(6);
Expand All @@ -11,6 +28,8 @@
@include make-md-column-push(5);
@include make-lg-column(4);
@include make-lg-column-push(4);
@include make-md-column-offset(1);
@include make-lg-column-offset(2);
}

.product-body {
Expand All @@ -27,6 +46,8 @@
@include make-sm-column(12);
@include make-md-column(10);
@include make-lg-column(8);
@include make-md-column-offset(1);
@include make-lg-column-offset(2);
}

.content {
Expand All @@ -35,6 +56,10 @@
@include make-md-column(5);
@include make-lg-column(4);
}
.work {
@include make-md-column-offset(1);
@include make-lg-column-offset(2);
}
}

a.more {
Expand Down
18 changes: 2 additions & 16 deletions _assets/stylesheets/main.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$font-size-base: 20px;

@import 'bootstrap';
@import '_mixins.scss';
@import 'colours';
@import 'typography';
@import 'title';
Expand All @@ -10,6 +11,7 @@ $font-size-base: 20px;
@import 'projects';
@import 'home';
@import 'blog';
@import 'wide';

body {
@include font-body;
Expand Down Expand Up @@ -101,22 +103,6 @@ section {
}
}

.strapline-row {
@include make-row();

.strapline {
@include make-md-column(10);
@include make-lg-column(8);
}

.strapline {
@include font-body-italic;
color: $gray;
opacity: 0.7;
margin-bottom: 0;
}
}

.btn-primary {
background-color: $link-active-colour;
}
Expand Down
168 changes: 168 additions & 0 deletions _assets/stylesheets/wide.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
body.wide {
height: 100%;
padding: 0;
margin: 0;

.outer-container {
height: 100%;
padding-bottom: 0;
}

footer {
display: block;
position: relative;
margin-top: 2em;
}

header {
width: 100%;
height: 85%;
position: relative;
background-image: url(/images/backgrounds/millenium-bridge.jpg);
background-repeat: no-repeat;
@media (max-width: ($screen-sm - 1)) {
background-size: auto $screen-sm;
}
@media (min-width: $screen-md) {
background-position: 50% 100%;
}
background-attachment: fixed;
background-size: cover;

nav {
height: 100%;
width: 100%;
text-align: center;
color: white;
margin-left: 0;
margin-right: 0;

.title {
position: absolute;
top: 30%;
left: 50%;
margin-top: -0.7em;
margin-left: -1.5em !important;

@media (min-height: 500px) {
top: 50%;
}

font-size: $font-size-base * 4;

@media (min-width: $screen-xs) and (min-height: 500px) {
font-size: $font-size-base * 8;
}

float: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.3em;
background-color: transparent;

a {
background-color: rgba(0, 0, 0, 0.8);

&:hover {
background-color: $link-hover-colour;
}
}
}

.subtitle {
position: absolute;
bottom: 3em;
padding: 0 1em;
@media (min-width: $screen-xs) {
bottom: 4em;
}
z-index: 100;
width: 100%;
text-align: center;
text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
font-weight: bold;
}
}

ul.navigation {
margin: 0 auto;
float: none;
position: absolute;
bottom: 0;
padding: ($line-height-computed * 2) 0 $line-height-computed 0;
width: 100%;
text-shadow: 0px 0px 10px 10px rgba(0,0,0,0.8);
font-weight: bold;
background-image: url(/images/blur.png);

li {
float: none;
display: inline-block;
padding-right: $grid-gutter-width;
&:last-child {
padding-right: 0;
}

a {
border-bottom: 1px solid white;
color: white;

&:hover {
background-color: $link-hover-colour;
text-decoration: none;
}
}
}
}
}

#home {
margin-top: $line-height-computed;
}

header.bokeh {
background-image: url(/images/backgrounds/bokeh.jpg)
}
header.bricks {
background-image: url(/images/backgrounds/bricks.jpg);
}
header.bridge-at-night {
background-image: url(/images/backgrounds/bridge-at-night.jpg);
}
header.bridge-from-below {
background-image: url(/images/backgrounds/bridge-from-below.jpg);
}
header.buildings {
background-image: url(/images/backgrounds/buildings.jpg);
}
header.doors {
background-image: url(/images/backgrounds/doors.jpg);
}
header.forest {
background-image: url(/images/backgrounds/forest.jpg);
}
header.hiker {
background-image: url(/images/backgrounds/hiker.jpg);
}
header.millenium-bridge {
background-image: url(/images/backgrounds/millenium-bridge.jpg);
}
header.mist {
background-image: url(/images/backgrounds/mist.jpg);
}
header.mountains {
background-image: url(/images/backgrounds/mountains.jpg);
}
header.phones-and-coffee {
background-image: url(/images/backgrounds/phones-and-coffee.jpg);
}
header.rail-bridge {
background-image: url(/images/backgrounds/rail-bridge.jpg);
}
header.shoes-in-field {
background-image: url(/images/backgrounds/shoes-in-field.jpg);
}
header.window-raindrops {
background-image: url(/images/backgrounds/window-raindrops.jpg);
}
}
2 changes: 1 addition & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

<footer>
<div class="container">
<p>&copy; 2013 <a href="/">Exciting</a>.</p>
<p>&copy; 2014 <a href="/">Exciting</a>.</p>
</div>
</footer>
</div>
Expand Down
Loading

0 comments on commit 1365b9a

Please sign in to comment.