Skip to content

Commit 7a4810c

Browse files
gnhgnh
committed
Structure changes
1 parent d90c0d4 commit 7a4810c

File tree

8 files changed

+94
-46
lines changed

8 files changed

+94
-46
lines changed

‎Gemfile

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
# If you have OpenSSL installed, we recommend updating
2-
# the following line to use "https"
3-
source 'http://rubygems.org'
4-
5-
gem "middleman", "~>3.2.2"
6-
7-
# Live-reloading plugin
8-
gem "middleman-livereload", "~> 3.1.0"
1+
# If you do not have OpenSSL installed, change
2+
# the following line to use 'http://'
3+
source 'https://rubygems.org'
94

105
# For faster file watcher updates on Windows:
11-
#gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
6+
gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
7+
8+
# Windows does not come with time zone data
9+
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
1210

13-
gem 'middleman-autoprefixer'
14-
gem 'middleman-imageoptim'
11+
# Middleman Gems
12+
gem 'middleman', '>= 4.0.0'
13+
gem 'middleman-livereload'

‎config.rb

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
activate :autoprefixer
2-
activate :imageoptim
3-
4-
after_configuration do
5-
@bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
6-
sprockets.append_path File.join "#{root}", @bower_config["directory"]
7-
end
1+
#after_configuration do
2+
# @bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
3+
# sprockets.append_path File.join "#{root}", @bower_config["directory"]
4+
#end
85

96
activate :livereload
107

‎source/index.html.erb

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,6 @@
1414

1515
<header class="header">
1616
<div class="kanye__ego">
17-
<a id="clear" href="http://www.grantharr.is">
18-
<svg id="logo" class="logo" version="1.1"
19-
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
20-
x="0px" y="0px" width="62.5px" height="91.2px" viewBox="0 0 62.5 91.2" enable-background="new 0 0 62.5 91.2"
21-
xml:space="preserve">
22-
<path d="M50,0v6.2C44.8,2.3,38.3,0,31.2,0C14,0,0,14,0,31.2c0,17.3,14,31.2,31.2,31.2c7,0,13.5-2.3,18.8-6.2V60
23-
c0,10.4-8.4,18.8-18.8,18.8c-8.4,0-15.5-5.5-17.9-13.2L1.4,69.3c4,12.7,15.8,21.9,29.8,21.9c17.3,0,31.2-14,31.2-31.2V0H50z
24-
M31.2,50c-10.4,0-18.8-8.4-18.8-18.8s8.4-18.8,18.8-18.8S50,20.9,50,31.2S41.6,50,31.2,50z"/>
25-
</svg>
26-
</a>
2717
<h3>Who</h3>
2818
<h1><span>Grant Harris</span> is a <span>Designer</span> who is driven by his passion for building meaningful products. He currently works at <span>Intel</span> creating solutions to obliterate the password; changing the world's digital security standard.</h1>
2919

‎source/scripts/main.js

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
11
//= require jquery
22

3+
// $(window).scroll(function(){
4+
5+
// var scrollTop = $(window).scrollTop();
6+
7+
// if(scrollTop >= 366){
8+
// $('#logo').css('width', '2.5rem').css('height', '2.5rem').css('fill', '#74A7FF');
9+
10+
// $('#logo').mouseenter(function(){
11+
// $('#logo').css('width', '5rem').css('height', '5rem').css('fill', '#fff');
12+
// });
13+
14+
// $('#logo').mouseleave(function(){
15+
// $('#logo').css('width', '2.5rem').css('height', '2.5rem').css('fill', '#74A7FF');
16+
// });
17+
// }
18+
19+
// else{
20+
// $('#logo').css('width', '5rem').css('height', '5rem').css('fill', '#fff');
21+
22+
// $('#logo').unbind('mouseenter');
23+
24+
// $('#logo').unbind('mouseleave');
25+
// }
26+
27+
// });
28+
329
$(window).scroll(function(){
430

31+
// Scroll & Window variables
532
var scrollTop = $(window).scrollTop();
33+
var windowHeight = $(window).height();
34+
var fadeProgress = 1 - (scrollTop / (0.7 * windowHeight)); // Opacity: 0; after scroll down 50% of viewport height
35+
var slideProgress = 1 - (windowHeight * (scrollTop / windowHeight)); // Return desired percentage of distance scrolled
636

7-
if(scrollTop >= 366){
8-
$('#logo').css('width', '2.5rem').css('height', '2.5rem').css('fill', '#74A7FF');
37+
// negative scrolling zero
38+
if (scrollTop < 0) scrollTop = 0;
939

10-
$('#logo').mouseenter(function(){
11-
$('#logo').css('width', '5rem').css('height', '5rem').css('fill', '#fff');
12-
});
40+
// var pct = scrollTop / windowHeight;
41+
// if(pct > 1) pct = 1;
1342

14-
$('#logo').mouseleave(function(){
15-
$('#logo').css('width', '2.5rem').css('height', '2.5rem').css('fill', '#74A7FF');
16-
});
17-
}
18-
19-
else{
20-
$('#logo').css('width', '5rem').css('height', '5rem').css('fill', '#fff');
43+
if (slideProgress > 1) slideProgress = 1;
2144

22-
$('#logo').unbind('mouseenter');
45+
// Fade & offset position during scroll event (via xProgress variables)
46+
$('header > .kanye__ego > h3').css('opacity', fadeProgress);
47+
$('header > .kanye__ego > h1').css('opacity', fadeProgress);
2348

24-
$('#logo').unbind('mouseleave');
25-
}
49+
$('header > .kanye__ego > h3').css('transform', 'translateY(' + -0.6 * slideProgress + 'px)');
50+
$('header > .kanye__ego > h1').css('transform', 'translateY(' + -0.4 * slideProgress + 'px)');
2651

2752
});
2853

‎source/styles/_global.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
html {
44
box-sizing: border-box;
55
font-size: 62.5%;
6-
font-family: "aktiv-grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
6+
// font-family: "aktiv-grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
7+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
78
}
89

910
*, *:before, *:after {

‎source/styles/_header.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
header {
44
@include pm-clear;
5-
padding: 10rem 0;
5+
padding: 25rem 0;
66
background-color: $primary;
77
background-image: linear-gradient(45deg, #34363F 0%, #262830 100%);
88

99
h1 {
1010
display: inline;
1111
color: rgba(255,255,255,0.7);
12-
font-weight: 100;
12+
font-weight: 300;
1313
background-color: rgba(116,167,255,0.12);
1414

1515
span {

‎source/styles/_mixins.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
1+
// Media query mixin
2+
3+
@mixin mq($size) {
4+
@if $size == x-large {
5+
@media (min-width: $x-large) { @content ; }
6+
}
7+
8+
@if $size == large {
9+
@media (min-width: $large) { @content ; }
10+
}
11+
12+
@if $size == medium {
13+
@media (min-width: $medium) { @content ; }
14+
}
15+
16+
@if $size == medium-down {
17+
@media (max-width: $medium - 1) { @content ; }
18+
}
19+
20+
@if $size == small {
21+
@media (min-width: $small) { @content ; }
22+
}
23+
24+
@if $size == small-down {
25+
@media (max-width: $small - 1) { @content ; }
26+
}
27+
}
28+
29+
130
// Padding / Margin clear
231

332
@mixin pm-clear {

‎source/styles/_variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
// Media query variables
2+
3+
$small: 620px;
4+
$medium: 920px;
5+
$large: 1140px;
6+
$x-large: 1300px;
7+
18
// Colors
29

310
$primary: #34363F;

0 commit comments

Comments
 (0)