float: left;
width: 9.091%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
.grid-2 {
float: left;
width: 21.591%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
.grid-3 {
float: left;
width: 34.091%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
-.grid-4, #g-logo, #nav-main, #intro-text, #intro-schools {
+.grid-4, #g-logo, #nav-main, #intro-text, #intro-video {
float: left;
width: 46.591%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
.grid-5 {
float: left;
width: 59.091%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
.grid-6 {
float: left;
width: 71.591%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
.grid-7 {
float: left;
width: 84.091%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
-.grid-8, #nav-user, .subheader, #intro-video {
+.grid-8, #nav-user, .subheader, #g-footer, #intro-schools {
float: left;
width: 96.591%;
padding: 0;
- margin: 0 1.705%; }
+ margin-left: 1.705%;
+ margin-right: 1.705%; }
-.futura, .futura-italic, .futura-light, .subheader h2, .futura-bold, h1, h2, h3, h4, h5, h6, p, #g-masthead {
+.futura, .futura-oblique, .futura-light, .subheader h2, .futura-bold, h1, h2, h3, h4, h5, h6, p, #g-masthead {
font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: 500;
-webkit-font-smoothing: antialiased; }
-.futura-italic {
+.futura-oblique {
font-style: italic; }
.futura-light, .subheader h2 {
font-size: 1em;
line-height: 1.5em; }
-.small, #nav-user {
+.tiny, #g-nav-footer li, #g-footer-copyright, #intro-schools li {
+ /* 14px / 18px */
+ font-size: 0.75em;
+ line-height: 1.091em; }
+
+.small, #nav-user, .link-bar a {
/* 14px / 18px */
font-size: 0.875em;
line-height: 1.286em; }
line-height: 1.5em;
/* 24 */ }
-.big, p, #nav-main a {
+.big, h4, p, #nav-main a {
/* 18px / 24px */
font-size: 1.125em;
line-height: 1.333em; }
margin: 0;
margin-bottom: 0.375em; }
+a {
+ color: #e8a200; }
+
p {
margin: 0;
margin-bottom: 0.75em;
color: #444; }
+img {
+ max-width: 100%; }
+
::-moz-selection {
background: #44a1dd;
color: #fff;
margin: 0; }
body {
- background-color: #262626;
background-position: 20% 0;
border-top: 3px solid #1f1e1c; }
/* a.`header
-------------------------- */
+#g-masthead {
+ background-color: #262626; }
+ #g-masthead .wrapper {
+ background-color: #262626; }
+
#g-logo a {
display: block; }
-------------------------- */
#g-page {
border-top: 1px solid #333;
- background-color: #fff; }
+ background-color: #fff;
+ margin-bottom: 3em; }
.page {
color: #333; }
/* c.`footer
-------------------------- */
+#g-footer {
+ text-align: center; }
+
+#g-nav-footer {
+ text-align: center; }
+ #g-nav-footer li {
+ display: inline;
+ text-align: center; }
+ #g-nav-footer a {
+ padding: 0 0.75em; }
+
+#g-footer-copyright img {
+ margin: 0 auto; }
+
.footer {
color: #444;
padding-top: 24px; }
1.Layout
----------------------------------------------------------------*/
-.section-home h3 {
- padding-bottom: 0.375em;
- margin-bottom: 0.375em; }
-
+.page {
+ display: none;
+ -webkit-transition: all 0.25s ease-in-out;
+ -moz-transition: all 0.25s ease-in-out;
+ -o-transition: all 0.25s ease-in-out;
+ -ms-transition: all 0.25s ease-in-out;
+ transition: all 0.25s ease-in-out; }
+
+.section-home {
+ margin-bottom: 1.5em; }
+
+#intro-schools h4 {
+ padding-bottom: 0.75em;
+ border-bottom: 1px solid #e5e5e5; }
#intro-schools li {
- float: left;
- width: 33.333%;
- min-height: 50px;
- margin: 0.75em 0; }
- #intro-schools li .sprite {
- margin: 0 auto; }
+ display: inline;
+ padding: 0.5em; }
-.button {
- background-color: #e5e5e5;
- color: #0ca6ff; }
+.link-bar {
+ margin-left: -0.375em; }
+ .link-bar li {
+ display: inline; }
+ .link-bar li.last a {
+ border: 0; }
+ .link-bar a {
+ padding: 0 0.375em;
+ border-right: 1px solid #ffcd58;
+ color: #e8a200; }
.video-wrapper {
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
background-color: #f5f5f5;
- text-align: center; }
+ text-align: center;
+ line-height: 0; }
.schools li {
float: left;
float: left;
width: ( ($col_width * $i / $layout-margin-width) - 2 * $percent-margin) * 100%;
padding: 0;
- margin: 0 $percent-margin * 100%;
+ margin-left: $percent-margin * 100%;
+ margin-right: $percent-margin * 100%;
}
}
-.button {
- background-color: #e5e5e5;
- color: $blue;
+.link-bar {
+ margin-left: $base/-4;
+
+ li {
+ display: inline;
+
+ &.last {
+ a {
+ border: 0;
+
+ }
+ }
+ }
+
+ a {
+ padding: 0 $base/4;
+ border-right: 1px solid $gold;
+ color: $mustard;
+ @extend .small;
+ }
}
.video-wrapper {
padding: 5px;
background-color: #f5f5f5;
text-align: center;
+ line-height: 0;
}
.schools {
----------------------------------------------------------------*/
-.section-home {
-
- h3 {
- padding-bottom: $base/4;
- margin-bottom: $base/4;
- }
+.page {
+ display: none;
+ @include transition( all );
+}
+.section-home {
+ margin-bottom: $base;
}
+
#intro-text {
@extend .grid-4;
}
-#intro-schools {
+#intro-video {
@extend .grid-4;
-
- li {
- float: left;
- width: 100/3*1%;
- min-height: 50px;
- margin: $base/2 0;
-
- .sprite {
- margin: 0 auto;
- }
- }
}
-#intro-video {
+#intro-schools {
@extend .grid-8;
+
+ h4 {
+ padding-bottom: $base/2;
+ border-bottom: 1px solid #e5e5e5;
+ }
+
+ li {
+ display: inline;
+ padding: $base/3;
+ @extend .tiny;
+ }
}
-webkit-font-smoothing: antialiased;
}
-.futura-italic {
+.futura-oblique {
@extend .futura;
font-style: italic;
}
line-height: #{$line / $em}em;
}
+.tiny {
+ /* 14px / 18px */
+ font-size: #{($font-size*0.75) / $em}em;
+ line-height: ($line*0.5) / ($font-size*0.6875) * 1em;
+}
+
.small {
/* 14px / 18px */
font-size: #{($font-size*0.875) / $em}em;
$blue: #0ca6ff;
$dark: #1f1e1c;
$gold: #ffcd58;
+$mustard: #e8a200;
@import "partials/mixins";
@import "partials/grid";
@extend .large;
}
+h4 {
+ @extend .big;
+}
+
+a {
+ color: $mustard;
+}
+
p {
@extend .futura;
@extend .big;
color: #444;
}
+img {
+ max-width: 100%;
+}
+
::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
::selection { background: #44a1dd; color: #fff; text-shadow: none; }
}
body {
- background-color: #262626;
+ // background-color: #262626;
background-position: 20% 0;
border-top: 3px solid $dark;
}
#g-masthead {
@extend .futura;
+ background-color: #262626;
+
+ .wrapper {
+ background-color: #262626;
+ }
}
#g-logo {
#g-page {
border-top: 1px solid #333;
background-color: #fff;
+ margin-bottom: $base*2;
}
.page {
/* c.`footer
-------------------------- */
+
+#g-footer {
+ @extend .grid-8;
+ text-align: center;
+}
+
+#g-nav-footer {
+ text-align: center;
+
+ li {
+ display: inline;
+ text-align: center;
+ @extend .tiny;
+ }
+
+ a {
+ padding: 0 $base/2;
+ }
+}
+
+#g-footer-copyright {
+ @extend .tiny;
+
+ img {
+ margin: 0 auto;
+ }
+
+}
.footer {
color: #444;
padding-top: 24px;
$(function() {
- // Remember to minimize JavaScripts before going into production
+ $loader = $('.loader');
- function include(file) {
-
- }
-
-});
\ No newline at end of file
+});
<link rel="stylesheet" href="/assets/css/include.css" type="text/css" media="screen" />
<script type="text/javascript" src="/assets/js/modernizr.custom.js"></script>
- <!-- <script type="text/javascript" src="http://use.typekit.com/cbx6gxx.js"></script>-->
- <!-- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
<script type='text/javascript' src='/javascripts/jquery.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.tmpl.js'></script>
- <!--<script type='text/javascript' src='/javascripts/jquery.min.js'></script> -->
- <!--<script type="text/javascript" src="/assets/js/load.js"></script>-->
+ <script type="text/javascript" src="/assets/js/init.js"></script>
<script type='text/javascript' src='/javascripts/es5-shim.min.js'></script>
<script type='text/javascript' src='/javascripts/protodiv.js'></script>
<script type='text/javascript' src='/javascripts/main.js'></script>
- <script type="text/javascript">
- TypekitConfig = {
- kitId: 'cbx6gxx',
- scriptTimeout: 3000
- };
- (function() {
- var h = document.getElementsByTagName('html')[0];
- h.className += ' wf-loading';
- var t = setTimeout(function() {
- h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, '');
- h.className += ' wf-inactive';
- }, TypekitConfig.scriptTimeout);
- var tk = document.createElement('script');
- tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
- tk.type = 'text/javascript';
- tk.async = 'true';
- tk.onload = tk.onreadystatechange = function() {
- var rs = this.readyState;
- if (rs && rs != 'complete' && rs != 'loaded') return;
- clearTimeout(t);
- try { Typekit.load(TypekitConfig); } catch (e) {}
+ <script type='text/javascript'>
+ TypekitConfig = {
+ kitId: 'cbx6gxx',
+ scriptTimeout: 3000
};
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(tk, s);
- })();
+
+ (function() {
+ var h = document.getElementsByTagName('html')[0];
+ h.className += ' wf-loading';
+
+ var t = setTimeout(function() {
+ h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, '');
+ h.className += ' wf-inactive';
+ }, TypekitConfig.scriptTimeout);
+
+ var tk = document.createElement('script');
+ tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
+ tk.type = 'text/javascript';
+ tk.async = 'true';
+
+ tk.onload = tk.onreadystatechange = function() {
+ var rs = this.readyState;
+
+ if (rs && rs != 'complete' && rs != 'loaded') return;
+ clearTimeout(t);
+ try { Typekit.load(TypekitConfig); } catch (e) {}
+ };
+
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(tk, s);
+ })();
</script>
+
</head>
<!--================================================================= -->
<body>
</div>
<div class="wrapper">
<div id="intro">
+
+ <section class="section-home" id="intro-video">
+ <h3 class="heading">Our Screencasts</h3>
+ <div class="video-wrapper">
+ <!-- video loaded in main.js -->
+ </div>
+ </section>
+
<section class="section-home" id="intro-text">
<h3>Our Mission</h3>
<p>
- To provide tools that help college students collaborate on during and after class, with peers and with instructers. and lecture, and to ask questions to their professors, when they have them.
- </p>
+ To provide tools that make it dead simple for college students to collaborate during and after class, with peers and with instructers. You can begin taking lecture notes online, and allow anyone to contribute.</p>
<p>
- A single user can begin lecture notes on FinalsClub, but the best results occur when everyone contributes to common knowledge. Working together we can transform higher education, one classroom at a time.
+ You can also post questions that will be seen by the entire class, and get a response from your peers or instructor immediately. Sign up, or just have a look around. Let us know what you think. We need your feedback to make Finals Club the best that it can be.
</p>
- <a href="#" class="button" id="signup">Sign Up</a>
- <a href="#" class="button" id="learnsomething">Learn Something</a>
+ <nav class="link-bar">
+ <ul>
+ <li><a href="#">Sign Up</a></li>
+ <li class="last"><a href="#">Learn Something</a></li>
+ </ul>
+ </nav>
</section>
+
+
<section class="section-home" id="intro-schools">
- <h3>Who we support</h3>
+ <h4>Schools we support</h4>
<ul>
- <li><div class="sprite logo-brown">Brown Logo</div></li>
- <li><div class="sprite logo-columbia">Columbia Logo</div></li>
- <li><div class="sprite logo-cornell">Cornell Logo</div></li>
- <li><div class="sprite logo-dartmouth">Dartmouth Logo</div></li>
- <li><div class="sprite logo-shield">School Logo</div></li>
- <li><div class="sprite logo-mit">MIT Logo</div></li>
- <li><div class="sprite logo-lock_haven">Lock Haven Logo</div></li>
- <li><div class="sprite logo-california">Cal Tech Logo</div></li>
- <li><div class="sprite logo-texas">University of Texas Logo</div></li>
- <li><div class="sprite logo-yale">Yale Logo</div></li>
- <li><div class="sprite logo-penn">Penn Logo</div></li>
- <li><div class="sprite logo-harvard">Harvad Logo</div></li>
+ <li><span class="school-name">Brown</span></li>
+ <li><span class="school-name">Columbia</span></li>
+ <li><span class="school-name">Cornell</span></li>
+ <li><span class="school-name">Dartmouth</span></li>
+ <li><span class="school-name">Harvard</span></li>
+ <li><span class="school-name">Lock Haven</span></li>
+ <li><span class="school-name">MIT</span></li>
+ <li><span class="school-name">University of California</span></li>
+ <li><span class="school-name">University of Pennsylvania</span></li>
+ <li><span class="school-name">University of Texas</span></li>
+ <li><span class="school-name">Yale</span></li>
</ul>
</section>
-
- <section class="section-home" id="intro-video">
- <h3 class="heading">Check out our Screencasts</h3>
- <div class="video-wrapper">
- <iframe src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="460" height="259" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
- </div>
- </section>
</div>
</div>
</div>
<!--================================================================= -->
+
<div class="page" id="pg_schools">
<h1>Universities</h1>
</div>
<script id="course" type="text/x-jquery-tmpl">
<li>${dept}: ${name} (${number})</li>
</script>
+
<!--================================================================= -->
<div class=page id=pg_courses>
<h1>Courses for <span id=school_name></span></h1>
</div>
</div>
- <div id="g-footer">
- <div class="wrapper">
- <nav id="nav-footer">
+ <div class="wrapper">
+ <div id="g-footer">
+ <nav id="g-nav-footer">
<ul>
<li><a href="/conduct">Conduct</a></li>
<li><a href="https://github.com/finalsclubdev/FinalsClub/">Code</a></li>
<li><a href="http://blog.finalsclub.org/team.html">Team</a></li>
</ul>
</nav>
- </div>
-
- <p>Finals Club is a 501\(c\)(3) non-profit organization.</p>
- <div class="creative_commons">
- <div class="section">
+ <div id="g-footer-copyright">
+ <p>Finals Club is a 501c3 non-profit organization.</p>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
</a>
- <br />
- </div>
- <div class="section">
This site is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
</div>
/* Convert an object to a JSON string (just easier to type than "JSON.stringify" */
function o2j(obj) { return JSON.stringify(obj); }
-var user = {};
-
-var router = {
- routes: {},
- add: function(name, useAjax, cb) {
- if (typeof useAjax === 'function') {
- cb = useAjax;
- useAjax = true;
- }
- this.routes[name] = {
- fn: cb,
- useAjax: useAjax
- }
- },
- run: function(name, path) {
- $('.nav').removeClass('active');
- checkUser(function() {
- if (router.routes[name].useAjax) {
- $.get(path, {cache: false}, function(data) {
- if (data.status === 'not_found' || (typeof data === 'string')) {
- return router.run('404');
- }
- router.routes[name].fn(data, render);
+var
+user = {},
+
+router = {
+
+ routes: {},
+
+ add: function(name, useAjax, cb) {
+ if (typeof useAjax === 'function') {
+ cb = useAjax;
+ useAjax = true;
+ }
+
+ this.routes[name] = {
+ fn: cb,
+ useAjax: useAjax
+ }
+ },
+
+ run: function(name, path) {
+
+ $('.nav').removeClass('active');
+
+ checkUser( function() {
+
+ if (router.routes[name].useAjax) {
+
+ $.get(
+ path,
+ {cache: false},
+ function(data) {
+
+ if (data.status === 'not_found' || (typeof data === 'string')) {
+ return router.run('404');
+ }
+ router.routes[name].fn(data, render);
+ }
+ );
+ } else {
+ router.routes[name].fn(render);
+ }
});
- } else {
- router.routes[name].fn(render);
- }
- });
- }
+ }
}
function render(pageId, response) {
})
});
if ($('#vimeo-screencast').length === 0) {
- $('.video-wrapper').html('<iframe id="vimeo-screencast" src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="460" height="259" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
+ $('.video-wrapper').html('<iframe id="vimeo-screencast" src="http://player.vimeo.com/video/30647271?title=0&byline=0&portrait=0&color=367da9" width="400" height="225" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>');
}
});
-
// go to the page that lists the schools
router.add('schools', function(data, cb) {
- console.log(data);
+
$('#school_link').addClass('active');
+
var response = {
id: 'school',
data: data.schools
}
- //$('#pg_schools').html('');
+
$('#pg_schools').css('display', 'block');
$('#schoolTmpl').tmpl( data.schools ).appendTo("#pg_schools");
});
-
// go to the page that lists the courses for a specific school
router.add('school', function(data, cb) {
$('#school_link').addClass('active');
/* Do and show the appropriate thing, based on the pages current URL */
function showPage(y) {
- $(".page").hide(); //(100); // hide all pseudo pages
-
- var path = document.location.pathname
- var routes = router.routes;
+ $('.page').hide(); //(100);// hide all pseudo pages
- var slugs = path.split('/');
+ var
+ path = document.location.pathname,
+ routes = router.routes,
+ slugs = path.split('/');
- slugs.shift();
+ slugs.shift();
- mainSlug = slugs[0].toLowerCase() || 'home';
+ var mainSlug = slugs[0].toLowerCase() || 'home';
- if (mainSlug === 'archive') {
- if (slugs[1]) {
- mainSlug = mainSlug + slugs[1];
+ if (mainSlug === 'archive') {
+ if (slugs[1]) {
+ mainSlug = mainSlug + slugs[1];
+ }
}
- }
-
- if (routes[mainSlug]) {
- router.run(mainSlug, path)
- } else {
- router.run('404')
- }
+ if (routes[mainSlug]) {
+ router.run(mainSlug, path)
+ } else {
+ router.run('404')
+ }
}
}
}
-
/* Simulates a "back" browser navigation. */
var popped = false;
function goBack(event) {
}
})
- // xxx older FF browsers don't fire a page load/reload - deal with it somehow.
+ // xxx older FF browsers don't fire a page load/reload - deal with it somehow.
+ // I've increased the timeout, we need to avoid calling showPage twice. It causes page flicker.
setTimeout(function() {
console.timeEnd('no-pop')
if (!popped) {
- showPage( 0 ); // needed for some older browsers, redundant for chrome
+ showPage( 0 ); // needed for some older browsers, redundant for chrome
}
- }, 200)
+ }, 1200)
})
<h1>Universities</h1>
-
<div class="school" id=PROTO_school>
<div class=name>
<a href="courses.html?school=__name__">__name__</a>
<script>
- var schools = []
+ var schools = []
- // this is what will really happen when we're done
- $.get("/schools", {}, function(r) {
+ // this is what will really happen when we're done
+ $.get("/schools", {}, function(r) {
- //XXX schools = JSON.parse(r)
- schools = [
- { name: "Berkeley", numCourses: 2 },
- { name: "Brown", numCourses: 5 },
- { name: "Columbia", numCourses: 0 },
- ];
-
- ProtoDiv.replicate("PROTO_school", schools);
- });
+ //XXX schools = JSON.parse(r)
+ schools = [
+ { name: "Berkeley", numCourses: 2 },
+ { name: "Brown", numCourses: 5 },
+ { name: "Columbia", numCourses: 0 },
+ ];
+ ProtoDiv.replicate("PROTO_school", schools);
+ });
</script>
</div>
projects / oweals / finalsclub.git / commitdiff
