Skip to content

Commit 951d668

Browse files
author
Dan Mall
committed
Project Hub ready
1 parent ca7a39e commit 951d668

File tree

5 files changed

+73
-60
lines changed

5 files changed

+73
-60
lines changed

‎clients3.css renamed to ‎c/project-hub.css

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
*************************************************
33
4-
SUPERFRIENDLY CLIENT SITE
4+
PROJECT HUB
55
General Screen Styles
66
77
Created by the epic SuperFriendly team.
@@ -33,15 +33,15 @@ body:after { content: 'mini'; display: none; }
3333
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
3434
}
3535
html { font-size: 62.5%; } /* for rems */
36-
body { font-family: Georgia, 'Times New Roman', serif; color: #333; }
36+
body { font-family: 'Karla', Helvetica, Arial, sans-serif; color: #333; }
3737

3838

3939
/* block level */
4040

41-
h1, .h1 { font: bold 4.2rem Georgia, 'Times New Roman', serif; margin: 0 0 0.5em; }
42-
h2, .h2 { font: bold 1.8rem Georgia, 'Times New Roman', serif; margin: 0 0 1em; }
43-
h3, .h3 { font: bold 1.5rem Georgia, 'Times New Roman', serif; margin: 0 0 1em; }
44-
h4, h5, h6, .h4, .h5, .h6 { font: bold 1.2rem Georgia, 'Times New Roman', serif; margin: 0 0 1em; }
41+
h1, .h1 { font: bold 4.2rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 0.5em; }
42+
h2, .h2 { font: bold 1.8rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; }
43+
h3, .h3 { font: bold 1.5rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; }
44+
h4, h5, h6, .h4, .h5, .h6 { font: bold 1.2rem 'Karla', Helvetica, Arial, sans-serif; margin: 0 0 1em; }
4545

4646
p, ul, dl, ol, table { font-size: 1.6rem; margin: 0 0 1.5em; color: #777; }
4747
ul { margin-left: 20px; font-size: 1.4rem; }
@@ -121,14 +121,15 @@ sub, sup { line-height: 0; }
121121
-------------------------------------------*/
122122
.page-header { border-top: 10px solid #000; padding: 2em 2.5% 1em; border-bottom: 1px solid #000; margin: 0 0 2em; }
123123
.page-header-title { margin: 0 0 0.25em; line-height: 1; }
124-
.page-header-subtitle { font: normal 16px Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; }
124+
.page-header-subtitle { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.1em; }
125125

126126
.entry { border-bottom: 1px solid #ccc; padding: 2em 0 0; position: relative; }
127127
.entry-title { font-weight: normal; font-size: 3rem; margin: 0 0 0.1em; }
128128
.entry-future .entry-title { color: #9e9e9e; }
129129
.entry-title:before { content: ''; display: block; width: 20px; height: 20px; border: 2px solid #000; border-radius: 20px; background: #000; position: absolute; left: -43px; top: 0.95em; }
130130
.entry-future .entry-title:before { border-color: #c2c2c2; background: #fff; }
131-
.entry-title:after { content: ''; background: transparent url(check.svg) no-repeat 0 0; display: block; position: absolute; top: 1.1em; left: -1.27em; width: 12px; height: 10px; }
131+
.entry-title:after { content: ''; display: block; position: absolute; top: 1.1em; left: -1.27em; width: 12px; height: 10px; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEuMzE0cHgiIGhlaWdodD0iOS4xOTJweCIgdmlld0JveD0iMCAwIDExLjMxNCA5LjE5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTEuMzE0IDkuMTkyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOS4xOTIsMCA0LjI0Myw0Ljk1IDIuMTIxLDIuODI4IDAsNC45NSAyLjEyMSw3LjA3MSA0LjI0Myw5LjE5MiA2LjM2NCw3LjA3MSAxMS4zMTQsMi4xMjEgIi8+DQo8L3N2Zz4NCg==) no-repeat 0 0;
132+
}
132133
.entry-date { font-style: italic; color: #bababa; }
133134
.entry-future .entry-date { color: #ccc; }
134135

@@ -142,14 +143,12 @@ sub, sup { line-height: 0; }
142143

143144

144145
@media screen and (min-width: 800px) {
145-
/*.wrap { max-width: 1100px; margin: 0 auto; position: relative; left: -3%; }
146-
.page-header { width: 30%; margin: 0 5%; float: left; border-bottom: none; padding: 4em 0 1em; }
147-
.main { width: 55%; float: left; margin-top: 4em; }*/
148146

149147
.wrap { width: 95%; max-width: 1100px; margin: 0 auto 0 1em; position: relative; padding: 6em 0 10em; }
150148
.page-header-wrap { width: 35%; margin: 0; float: left; position: fixed; top: 0; }
151149
.page-header { border-bottom: none; padding-top: 6em; }
152-
.main { width: 60%; margin: 0 0 0 40%; /*position: relative; top: 6em;*/ }
150+
.main { width: 60%; margin: 0 0 0 40%; }
151+
.entry-title:after { top: 1.14em; }
153152
}
154153

155154
@media screen and (min-width: 1100px) {

‎check.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎clients3.js

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎index.php renamed to ‎index.html

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,19 @@
55
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
66

77
<head>
8-
<title>SuperFriendly Client Site</title>
8+
<title>Client Name Project Hub</title>
99
<meta charset="utf-8" />
1010
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
1111
<meta name="description" content="" />
1212

1313
<!-- http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho -->
1414
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1515

16-
<link href="clients3.css" rel="stylesheet" />
17-
18-
<script src="//use.typekit.net/jsg1ari.js"></script>
19-
<script>
20-
try{
21-
Typekit.load();
22-
document.write('<link href="clients3-typekit.css" rel="stylesheet" />');
23-
}catch(e){}
24-
</script>
16+
<link href="http://fonts.googleapis.com/css?family=Karla:400,700,400italic" rel="stylesheet" type="text/css" />
17+
<link href="../c/project-hub.css" rel="stylesheet" type="text/css" />
2518

2619
</head>
20+
2721
<body>
2822

2923
<div class="wrap clearfix">
@@ -32,8 +26,8 @@
3226
<div class="page-header-wrap">
3327

3428
<header class="page-header" role="banner">
35-
<h1 class="page-header-title">Radio Free Europe</h1>
36-
<h2 class="page-header-subtitle">Client Site</h2>
29+
<h1 class="page-header-title">Client Name</h1>
30+
<h2 class="page-header-subtitle">Project Hub</h2>
3731
</header>
3832

3933
</div><!-- .page-header-wrap -->
@@ -44,71 +38,71 @@
4438

4539

4640
<article class="entry entry-future">
47-
<h1 class="entry-title">Design Round 1</h1>
41+
<h1 class="entry-title">Design Round 11</h1>
4842
<p class="entry-date">June 4, 2014</p>
4943

5044
</article><!-- .entry -->
5145

5246

5347

5448
<article class="entry entry-future">
55-
<h1 class="entry-title">Design Round 1</h1>
49+
<h1 class="entry-title">Design Round 10</h1>
5650
<p class="entry-date">June 4, 2014</p>
5751

5852
</article><!-- .entry -->
5953

6054

6155

6256
<article class="entry entry-future">
63-
<h1 class="entry-title">Design Round 1</h1>
57+
<h1 class="entry-title">Design Round 9</h1>
6458
<p class="entry-date">June 4, 2014</p>
6559

6660
</article><!-- .entry -->
6761

6862

6963

7064
<article class="entry entry-future">
71-
<h1 class="entry-title">Design Round 1</h1>
65+
<h1 class="entry-title">Design Round 8</h1>
7266
<p class="entry-date">June 4, 2014</p>
7367

7468
</article><!-- .entry -->
7569

7670

7771

7872
<article class="entry entry-future">
79-
<h1 class="entry-title">Design Round 1</h1>
73+
<h1 class="entry-title">Design Round 7</h1>
8074
<p class="entry-date">June 4, 2014</p>
8175

8276
</article><!-- .entry -->
8377

8478

8579

8680
<article class="entry entry-future">
87-
<h1 class="entry-title">Design Round 1</h1>
81+
<h1 class="entry-title">Design Round 6</h1>
8882
<p class="entry-date">June 4, 2014</p>
8983

9084
</article><!-- .entry -->
9185

9286

9387

9488
<article class="entry entry-future">
95-
<h1 class="entry-title">Design Round 1</h1>
89+
<h1 class="entry-title">Design Round 5</h1>
9690
<p class="entry-date">June 4, 2014</p>
9791

9892
</article><!-- .entry -->
9993

10094

10195

10296
<article class="entry entry-future">
103-
<h1 class="entry-title">Design Round 1</h1>
97+
<h1 class="entry-title">Design Round 4</h1>
10498
<p class="entry-date">June 4, 2014</p>
10599

106100
</article><!-- .entry -->
107101

108102

109103

110104
<article class="entry entry-latest">
111-
<h1 class="entry-title">Design Round 1</h1>
105+
<h1 class="entry-title">Design Round 3</h1>
112106
<p class="entry-date">June 4, 2014</p>
113107

114108
<p>Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.</p>
@@ -124,7 +118,7 @@
124118

125119

126120
<article class="entry">
127-
<h1 class="entry-title">Design Round 1 A long title of this entry</h1>
121+
<h1 class="entry-title">Design Round 2 A long title of this entry</h1>
128122
<p class="entry-date">June 4, 2014</p>
129123

130124
<p>Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet.</p>
@@ -160,7 +154,7 @@
160154

161155
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
162156
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
163-
<script src="clients3.js"></script>
157+
<script src="../j/project-hub.js"></script>
164158

165159

166160
</body>

‎j/project-hub.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
*************************************************
3+
4+
PROJECT HUB
5+
JavaScript Functions
6+
Requires jQuery
7+
8+
Created by the epic SuperFriendly team.
9+
http://superfriend.ly/
10+
11+
*************************************************
12+
*/
13+
14+
var Site = function(){
15+
16+
this.init = function(){
17+
18+
var _pointToScrollTo = $('.entry-latest').offset().top - 30,
19+
_viewport = $('html, body');
20+
21+
_viewport.delay(500).animate({
22+
scrollTop: _pointToScrollTo
23+
}, 2000, 'easeInOutQuint');
24+
25+
// http://stackoverflow.com/questions/8858994/let-user-scrolling-stop-jquery-animation-of-scrolltop
26+
_viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
27+
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
28+
_viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
29+
}
30+
});
31+
32+
}
33+
34+
}
35+
36+
37+
38+
/*-------------------------------------------
39+
Initial Actions
40+
-------------------------------------------*/
41+
42+
$(document).ready(function() {
43+
var projectHub = new Site();
44+
projectHub.init();
45+
});

0 commit comments

Comments
 (0)