Merge pull request #126 from archshift/gh-pages
Added initial, personalized, citra-y site for github pages.
This commit is contained in:
Tony Wasserka
commit
7c48442c62
BIN
images/bg_hr.png
BIN
images/bg_hr.png
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 463 B |
Binary file not shown.
|
Before Width: | Height: | Size: 216 B |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
180
index.html
180
index.html
@ -1,79 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="description" content="Citra : Nintendo 3DS emulator/debugger">
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
||||
|
||||
<title>Citra</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<a id="forkme_banner" href="https://github.com/citra-emu/citra">View on GitHub</a>
|
||||
|
||||
<h1 id="project_title">Citra</h1>
|
||||
<h2 id="project_tagline">Nintendo 3DS emulator/debugger</h2>
|
||||
|
||||
<section id="downloads">
|
||||
<a class="zip_download_link" href="https://github.com/citra-emu/citra/zipball/master">Download this project as a .zip file</a>
|
||||
<a class="tar_download_link" href="https://github.com/citra-emu/citra/tarball/master">Download this project as a tar.gz file</a>
|
||||
</section>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<h3>
|
||||
<a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
|
||||
|
||||
<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
|
||||
|
||||
<pre><code>$ cd your_repo_root/repo_name
|
||||
$ git fetch origin
|
||||
$ git checkout gh-pages
|
||||
</code></pre>
|
||||
|
||||
<p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
|
||||
|
||||
<h3>
|
||||
<a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>Designer Templates</h3>
|
||||
|
||||
<p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.</p>
|
||||
|
||||
<h3>
|
||||
<a name="rather-drive-stick" class="anchor" href="#rather-drive-stick"><span class="octicon octicon-link"></span></a>Rather Drive Stick?</h3>
|
||||
|
||||
<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
|
||||
|
||||
<h3>
|
||||
<a name="authors-and-contributors" class="anchor" href="#authors-and-contributors"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
|
||||
|
||||
<p>You can <a href="https://github.com/blog/821" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code><a></code> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
|
||||
|
||||
<h3>
|
||||
<a name="support-or-contact" class="anchor" href="#support-or-contact"><span class="octicon octicon-link"></span></a>Support or Contact</h3>
|
||||
|
||||
<p>Having trouble with Pages? Check out the documentation at <a href="http://help.github.com/pages">http://help.github.com/pages</a> or contact <a href="mailto:support@github.com">support@github.com</a> and we’ll help you sort it out.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div id="footer_wrap" class="outer">
|
||||
<footer class="inner">
|
||||
<p class="copyright">Citra maintained by <a href="https://github.com/citra-emu">citra-emu</a></p>
|
||||
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Citra - Experimental 3DS Emulator</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
|
||||
<script src="resources/smooth-scroll/dist/js/bind-polyfill.js"></script>
|
||||
<script src="resources/smooth-scroll/dist/js/smooth-scroll.js"></script>
|
||||
</head>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<body>
|
||||
|
||||
<div id="home" class="page">
|
||||
<header>
|
||||
<span id="logo"><a href="#home">Citra</a></span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a data-scroll href="#about">About</a></li>
|
||||
<li><a data-scroll href="#download">Download</a></li>
|
||||
<li><a href="https://github.com/citra-emu/citra">GitHub</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="home-image-container">
|
||||
<a data-scroll href="#about"><img src="resources/citra-icns-multicolor/citra-1024.png" /></a>
|
||||
</div>
|
||||
|
||||
<div id="home-name-headers">
|
||||
<h1 class="name-header">Citra</h1>
|
||||
<h2 class="name-header">An Experimental 3DS Emulator</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" class="page">
|
||||
<div class="content">
|
||||
<h1>About Citra</h1>
|
||||
|
||||
<h3>What is Citra?</h3>
|
||||
<p>Citra is a <b>work-in-progress</b> emulator for the Nintendo 3DS.</p>
|
||||
|
||||
<h3>What can it do?</h3>
|
||||
<p>It can currently emulate <a href="https://github.com/smealum/ctrulib">ctrulib</a>-built homebrew programs, such as <a href="https://github.com/smealum/yeti3DS">Smealum's port of Yeti3DS</a>.</p>
|
||||
|
||||
<h3>Will it run <insert retail game here>?</h3>
|
||||
<p>In nice, bold letters: <b>No! Citra is not ready yet!</b>. Citra will <b>not</b> run Pokemon, Super Mario Bros., or any of your other favorite 3DS games yet. </p>
|
||||
<p>If you check back in a year or two, this may no longer be the case.</p>
|
||||
|
||||
<h3>What platforms does Citra support?</h3>
|
||||
<p>We're pleased to say that Citra works on all three major desktop OSs!</p>
|
||||
<p>Citra is compatible with Windows, Linux, and OS X. In the far future, mobile platforms may be targeted as well.</p>
|
||||
|
||||
<h3>What kind of specs do I need to run Citra?</h3>
|
||||
<p>Citra currently uses an interpreter to emulate the 3DS's hardware. As one might imagine, this is very inefficient, so it is doubtful that most (if any!) consumer hardware would be fast enough to run at full-speed.</p>
|
||||
<p>In short, there's no real recommended hardware, but it is suffice to say that you want the fastest possible processor, and a graphics chip that supports at least OpenGL 3.</p>
|
||||
|
||||
<h3>Where can I download Citra?</h3>
|
||||
<p>At the moment, there are no stable versions of Citra for you to download. Soon, we'll make available nightly builds for users to download, but for now you'll have to compile from source. Once Citra has progressed to the point where a stable version becomes viable.</p>
|
||||
|
||||
<h3>How can I help?</h3>
|
||||
<p>Citra'a source is hosted on <a href="https://github.com/citra-emu/citra">GitHub</a>, which is a platform where developers can come together on a project, submitting pull requests with code changes.</p>
|
||||
<p>You probably want to check out the <a href="https://github.com/citra-emu/citra/blob/master/CONTRIBUTING.md">contributor's guide</a> and the <a href="https://github.com/citra-emu/citra/wiki/Developer-Information">developer information</a>. You can look to the <a href="https://github.com/citra-emu/citra/wiki/Roadmap">project roadmap</a> for ideas.</p>
|
||||
<p>You can also chat with us at #citra on <a href="webchat.freenode.net">freenode</a>. We'll take all the help we can get!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="download" class="page">
|
||||
<div class="content">
|
||||
<h1>Downloads</h1>
|
||||
|
||||
<!-- For nightly downloads once they're ready:
|
||||
<div class="dl-block">
|
||||
<h3>Latest Nightly Release</h3>
|
||||
<a href="./nightly/latest-linux"><img class="dl-icon" src="resources/platform-icons/linux-128.png"/></a>
|
||||
<a href="./releases/latest-windows"><img class="dl-icon" src="resources/platform-icons/os-windows8-128.png"/></a>
|
||||
<a href="./releases/latest-mac"><img class="dl-icon" src="resources/platform-icons/mac-os-128.png"/></a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="dl-block">
|
||||
<h3>Source Code</h3>
|
||||
<a href="https://github.com/citra-emu/citra"><img class="dl-icon" src="resources/platform-icons/github-6-128.png"/></a>
|
||||
<a href="https://github.com/citra-emu/citra/archive/master.zip"><img class="dl-icon" src="resources/platform-icons/zip-128.png"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>Copyright © 2014 - Citra Team</p>
|
||||
<p>Windows, Mac, Linux, and zip icons licensed from <a href="http://icons8.com">icons8</a> under CC BY-ND 3.0 US.</p>
|
||||
<p>This site is <a href="https://github.com/citra-emu/www">on GitHub</a>!</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
smoothScroll.init({
|
||||
speed: 400,
|
||||
updateURL: false
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
console.log('This would be the main JS file.');
|
||||
@ -1 +0,0 @@
|
||||
{"name":"Citra","tagline":"Nintendo 3DS emulator/debugger","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `<a>` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
||||
BIN
resources/citra-icns-multicolor/citra-1024.png
Normal file
BIN
resources/citra-icns-multicolor/citra-1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
resources/citra-icns-multicolor/citra-128.png
Normal file
BIN
resources/citra-icns-multicolor/citra-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
resources/citra-icns-multicolor/citra-2048.png
Normal file
BIN
resources/citra-icns-multicolor/citra-2048.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 KiB |
BIN
resources/citra-icns-multicolor/citra-256.png
Normal file
BIN
resources/citra-icns-multicolor/citra-256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
resources/citra-icns-multicolor/citra-32.png
Normal file
BIN
resources/citra-icns-multicolor/citra-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
resources/citra-icns-multicolor/citra-48.png
Normal file
BIN
resources/citra-icns-multicolor/citra-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
resources/citra-icns-multicolor/citra-512.png
Normal file
BIN
resources/citra-icns-multicolor/citra-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
resources/citra-icns-multicolor/citra-64.png
Normal file
BIN
resources/citra-icns-multicolor/citra-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
resources/citra-icns-multicolor/citra-96.png
Normal file
BIN
resources/citra-icns-multicolor/citra-96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
resources/platform-icons/github-6-128.png
Normal file
BIN
resources/platform-icons/github-6-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
resources/platform-icons/github-6-48.png
Normal file
BIN
resources/platform-icons/github-6-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
resources/platform-icons/github-6-64.png
Normal file
BIN
resources/platform-icons/github-6-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
BIN
resources/platform-icons/linux-128.png
Normal file
BIN
resources/platform-icons/linux-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
resources/platform-icons/linux-48.png
Normal file
BIN
resources/platform-icons/linux-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
resources/platform-icons/linux-64.png
Normal file
BIN
resources/platform-icons/linux-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
resources/platform-icons/mac-os-128.png
Normal file
BIN
resources/platform-icons/mac-os-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
resources/platform-icons/mac-os-48.png
Normal file
BIN
resources/platform-icons/mac-os-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
BIN
resources/platform-icons/mac-os-64.png
Normal file
BIN
resources/platform-icons/mac-os-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 996 B |
BIN
resources/platform-icons/os-windows8-128.png
Normal file
BIN
resources/platform-icons/os-windows8-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
BIN
resources/platform-icons/os-windows8-48.png
Normal file
BIN
resources/platform-icons/os-windows8-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
resources/platform-icons/os-windows8-64.png
Normal file
BIN
resources/platform-icons/os-windows8-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
BIN
resources/platform-icons/zip-128.png
Normal file
BIN
resources/platform-icons/zip-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
resources/platform-icons/zip-48.png
Normal file
BIN
resources/platform-icons/zip-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 913 B |
BIN
resources/platform-icons/zip-64.png
Normal file
BIN
resources/platform-icons/zip-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
10
resources/smooth-scroll/.gitignore
vendored
Executable file
10
resources/smooth-scroll/.gitignore
vendored
Executable file
@ -0,0 +1,10 @@
|
||||
# Node
|
||||
node_modules
|
||||
test/results
|
||||
test/coverage
|
||||
|
||||
## OS X
|
||||
.DS_Store
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
7
resources/smooth-scroll/.travis.yml
Executable file
7
resources/smooth-scroll/.travis.yml
Executable file
@ -0,0 +1,7 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.11"
|
||||
- "0.10"
|
||||
before_script:
|
||||
- npm install -g gulp
|
||||
script: gulp
|
||||
355
resources/smooth-scroll/README.md
Executable file
355
resources/smooth-scroll/README.md
Executable file
@ -0,0 +1,355 @@
|
||||
# Smooth Scroll [](https://travis-ci.org/cferdinandi/smooth-scroll)
|
||||
A lightweight script to animate scrolling to anchor links.
|
||||
|
||||
[Download Smooth Scroll](https://github.com/cferdinandi/smooth-scroll/archive/master.zip) / [View the demo](http://cferdinandi.github.io/smooth-scroll/)
|
||||
|
||||
**In This Documentation**
|
||||
|
||||
1. [Getting Started](#getting-started)
|
||||
2. [Installing with Package Managers](#installing-with-package-managers)
|
||||
3. [Options & Settings](#options-and-settings)
|
||||
4. [Browser Compatibility](#browser-compatibility)
|
||||
5. [Contributors](#contributors)
|
||||
6. [How to Contribute](#how-to-contribute)
|
||||
7. [License](#license)
|
||||
8. [Changelog](#changelog)
|
||||
9. [Older Docs](#older-docs)
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory.
|
||||
|
||||
### 1. Include Smooth Scroll on your site.
|
||||
|
||||
```html
|
||||
<script src="dist/js/bind-polyfill.js"></script>
|
||||
<script src="dist/js/smooth-scroll.js"></script>
|
||||
```
|
||||
|
||||
Smooth Scroll requires `bind-polyfill.js`, a polyfill that extends ECMAScript 5 API support to more browsers.
|
||||
|
||||
### 2. Add the markup to your HTML.
|
||||
|
||||
```html
|
||||
<a data-scroll href="#bazinga">Anchor Link</a>
|
||||
...
|
||||
<span id="bazinga">Bazinga!</span>
|
||||
```
|
||||
|
||||
Turn anchor links into Smooth Scroll links by adding the `[data-scroll]` data attribute. Give the anchor location an ID just like you normally would.
|
||||
|
||||
### 3. Initialize Smooth Scroll.
|
||||
|
||||
```html
|
||||
<script>
|
||||
smoothScroll.init();
|
||||
</script>
|
||||
```
|
||||
|
||||
In the footer of your page, after the content, initialize Smooth Scroll. And that's it, you're done. Nice work!
|
||||
|
||||
|
||||
|
||||
## Installing with Package Managers
|
||||
|
||||
You can install Smooth Scroll with your favorite package manager.
|
||||
|
||||
* **[NPM](https://www.npmjs.org/):** `npm install cferdinandi/smooth-scroll`
|
||||
* **[Bower](http://bower.io/):** `bower install https://github.com/cferdinandi/smooth-scroll.git`
|
||||
* **[Component](http://component.io/):** `component install cferdinandi/smooth-scroll`
|
||||
|
||||
|
||||
|
||||
## Options and Settings
|
||||
|
||||
Smooth Scroll includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
|
||||
|
||||
### Global Settings
|
||||
|
||||
You can pass options and callbacks into Smooth Scroll through the `init()` function:
|
||||
|
||||
```javascript
|
||||
smoothScroll.init({
|
||||
speed: 500, // Integer. How fast to complete the scroll in milliseconds
|
||||
easing: 'easeInOutCubic', // Easing pattern to use
|
||||
updateURL: true, // Boolean. Whether or not to update the URL with the anchor hash on scroll
|
||||
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
|
||||
callbackBefore: function ( toggle, anchor ) {}, // Function to run before scrolling
|
||||
callbackAfter: function ( toggle, anchor ) {} // Function to run after scrolling
|
||||
});
|
||||
```
|
||||
|
||||
#### Easing Options
|
||||
|
||||
**Linear**
|
||||
*Moves at the same speed from start to finish.*
|
||||
|
||||
* `Linear`
|
||||
|
||||
|
||||
**Ease-In**
|
||||
*Gradually increases in speed.*
|
||||
|
||||
* `easeInQuad`
|
||||
* `easeInCubic`
|
||||
* `easeInQuart`
|
||||
* `easeInQuint`
|
||||
|
||||
|
||||
**Ease-In-Out**
|
||||
*Gradually increases in speed, peaks, and then gradually slows down.*
|
||||
|
||||
* `easeInOutQuad`
|
||||
* `easeInOutCubic`
|
||||
* `easeInOutQuart`
|
||||
* `easeInOutQuint`
|
||||
|
||||
|
||||
**Ease-Out**
|
||||
*Gradually decreases in speed.*
|
||||
|
||||
* `easeOutQuad`
|
||||
* `easeOutCubic`
|
||||
* `easeOutQuart`
|
||||
* `easeOutQuint`
|
||||
|
||||
|
||||
Learn more about the different easing patterns and what they do at [easings.net](http://easings.net/).
|
||||
|
||||
### Override settings with data attributes
|
||||
|
||||
Smooth Scroll also lets you override global settings on a link-by-link basis using the `[data-options]` data attribute:
|
||||
|
||||
```html
|
||||
<a data-scroll
|
||||
data-options='{
|
||||
"speed": 500,
|
||||
"easing": "easeInOutCubic",
|
||||
"offset": 0,
|
||||
"updateURL": false
|
||||
}'
|
||||
>
|
||||
Anchor Link
|
||||
</a>
|
||||
```
|
||||
|
||||
**Note:** You must use [valid JSON](http://jsonlint.com/) in order for the `data-options` feature to work.
|
||||
|
||||
### Use Smooth Scroll events in your own scripts
|
||||
|
||||
You can also call Smooth Scroll's scroll animation events in your own scripts.
|
||||
|
||||
#### animateScroll()
|
||||
Animate scrolling to an anchor.
|
||||
|
||||
```javascript
|
||||
smoothScroll.animateScroll(
|
||||
toggle, // Node that toggles the animation. ex. document.querySelector('#toggle')
|
||||
anchor, // ID of the anchor to scroll to. ex. '#bazinga'
|
||||
options // Classes and callbacks. Same options as those passed into the init() function.
|
||||
);
|
||||
```
|
||||
|
||||
**Example 1**
|
||||
|
||||
```javascript
|
||||
smoothScroll.animateScroll( null, '#bazinga' );
|
||||
```
|
||||
|
||||
**Example 2**
|
||||
|
||||
```javascript
|
||||
var toggle = document.querySelector('#toggle');
|
||||
var options = { speed: 1000, easing: 'easeOutCubic' };
|
||||
smoothScroll.animateScroll( toggle, '#bazinga', options );
|
||||
```
|
||||
|
||||
#### destroy()
|
||||
Destroy the current `smoothScroll.init()`.
|
||||
|
||||
```javascript
|
||||
smoothScroll.destroy();
|
||||
```
|
||||
|
||||
|
||||
### Fixed Headers
|
||||
|
||||
Add a `[data-scroll-header]` data attribute to fixed headers. Smooth Scroll will automatically offset scroll distances by the header height. If you have multiple fixed headers, add `[data-scroll-header]` to the last one in the markup.
|
||||
|
||||
```html
|
||||
<nav data-scroll-header>
|
||||
...
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Smooth Scroll works in all modern browsers, and IE 9 and above.
|
||||
|
||||
Smooth Scroll is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, anchor links will jump the way they normally would. If you need to smooth scrolling for older browsers, [download the jQuery version of Smooth Scroll on GitHub](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1).
|
||||
|
||||
|
||||
|
||||
## Contributors
|
||||
|
||||
* Easing support contributed by [Willem Liu](https://github.com/willemliu).
|
||||
* Easing functions forked from [Gaëtan Renaudeau](https://gist.github.com/gre/1650294).
|
||||
* URL history support contributed by [Robert Pate](https://github.com/robertpateii).
|
||||
* Fixed header support contributed by [Arndt von Lucadou](https://github.com/a-v-l).
|
||||
* Infinite loop bugs in iOS and Chrome (when zoomed) by [Alex Guzman](https://github.com/alexguzman).
|
||||
* IE10 rounding error fixed by [Luke Siedle](https://github.com/luke-siedle).
|
||||
* Enhanced callback functions by [Constant Meiring](https://github.com/constantm).
|
||||
* Scroll-to-top bug for links at the bottom of the page by [Jonas Havers](https://github.com/JonasHavers).
|
||||
* AMD support and numerous code improvements by [Todd Motto](https://github.com/toddmotto).
|
||||
* Push State bug fix by [Yanick Witschi](https://github.com/Toflar).
|
||||
|
||||
|
||||
|
||||
## How to Contribute
|
||||
|
||||
In lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the `readme.md` file), and when applicable, the documentation.
|
||||
|
||||
|
||||
|
||||
## License
|
||||
Smooth Scroll is licensed under the [MIT License](http://gomakethings.com/mit/).
|
||||
|
||||
|
||||
|
||||
## Changelog
|
||||
|
||||
Smooth Scroll uses [semantic versioning](http://semver.org/).
|
||||
|
||||
* v5.1.2 - August 31, 2014
|
||||
* Fixed event listener filter to account for sub elements.
|
||||
* Removed unused `event` argument from `animateScroll`
|
||||
* v5.1.1 - August 21, 2014
|
||||
* Passed in `event` variable to `eventHandler` method, fixing Firefox bug.
|
||||
* v5.1.0 - August 18, 2014
|
||||
* Added `destroy` method.
|
||||
* Converted to event bubbling approach for better performance.
|
||||
* Switched to Ruby Sass.
|
||||
* v5.0.4 - August 15, 2014
|
||||
* Added fix for UMD structure.
|
||||
* v5.0.3 - August 13, 2014
|
||||
* Replaced character escaping method with [`CSS.escape`](https://github.com/mathiasbynens/CSS.escape) for more robust character escaping.
|
||||
* v5.0.2 - August 12, 2014
|
||||
* Added character escaping when first character in anchor ID is a number.
|
||||
* v5.0.1 - August 8, 2014
|
||||
* Added polyfill for `Functions.prototype.bind`.
|
||||
* Removed Sass paths from `gulpfile.js`.
|
||||
* v5.0.0 - July 21, 2014
|
||||
* Updated `data-options` functionality to JSON.
|
||||
* Fixed update URL bug.
|
||||
* Set update URL to `true` by default.
|
||||
* v4.8.2 - June 28, 2014
|
||||
* Fixed `extend()` method.
|
||||
* v4.8.1 - June 27, 2014
|
||||
* Fixed problem with `toggles` containing a URL before the fragment identifier
|
||||
* v4.8.0 - June 21, 2014
|
||||
* Converted to gulp.js workflow.
|
||||
* Added unit testing.
|
||||
* Added minified versions of files.
|
||||
* v4.7.2 - June 19, 2014
|
||||
* Fixed typo that broke scroll.
|
||||
* v4.7.1 - June 19, 2014
|
||||
* Fixed factory/root/UMD definition.
|
||||
* v4.7.0 - June 7, 2014
|
||||
* Added AMD support.
|
||||
* Moved public APIs to `exports` variable.
|
||||
* Improved feature test.
|
||||
* Replaced `Array.prototype.forEach` hack with proper `forEach` function.
|
||||
* Added a more well supported `trim` function.
|
||||
* General code optimizations for better minification and performance.
|
||||
* Updated to JSDoc documentation (sort of).
|
||||
* Updated to three number versioning system.
|
||||
* Added package manager installation info.
|
||||
* v4.6 - March 21, 2014
|
||||
* [Fixed scroll-to-top bug for links at the bottom of the page](https://github.com/cferdinandi/smooth-scroll/issues/49).
|
||||
* v4.5 - March 20, 2014
|
||||
* Added `offset` to `options`
|
||||
* v4.4 - March 15, 2014
|
||||
* [Fixed iOS scroll-to-top bug](https://github.com/cferdinandi/smooth-scroll/issues/45).
|
||||
* v4.3 - March 5, 2014
|
||||
* Added arguments to callback functions for greater versatility. [44](https://github.com/cferdinandi/smooth-scroll/pull/44)
|
||||
* v4.2 - February 27, 2014
|
||||
* Fixed error for null `toggle` argument in `animateScroll` function ([43](https://github.com/cferdinandi/smooth-scroll/issues/43)).
|
||||
* v4.1 - February 27, 2014
|
||||
* Converted `_defaults` to a literal object
|
||||
* v4.0 - February 21, 2014
|
||||
* Better public/private method namespacing.
|
||||
* Require `init()` call to run.
|
||||
* New API exposes additional methods for use in your own scripts.
|
||||
* Better documentation.
|
||||
* v3.3 - February 19, 2014
|
||||
* [Add `offsettTop` to `offsetHeigh`t for `scrollHeader`. Allows for multiple fixed headers, or a fixed header that sits slightly below the top of the page.](https://github.com/cferdinandi/smooth-scroll/pull/36)
|
||||
* v3.2 - February 10, 2014
|
||||
* [Fixes iOS infinite loop](https://github.com/cferdinandi/smooth-scroll/pull/35) and [Chrome browser zoom](https://github.com/cferdinandi/smooth-scroll/issues/31) bugs.
|
||||
* v3.1 - February 4, 2014
|
||||
* Reverted to `Array.protype.foreach` loops.
|
||||
* v3.0 - January 28, 2014
|
||||
* Switched to a data attribute for the toggle selector.
|
||||
* Added namespacing to IIFE.
|
||||
* Updated looping method and event listener.
|
||||
* v2.19 - January 23, 2014
|
||||
* [Fix back button behavior in Chrome.](https://github.com/cferdinandi/smooth-scroll/issues/26#issuecomment-33172325)
|
||||
* v2.18 - January 23, 2014
|
||||
* [Update URL before animation.](https://github.com/cferdinandi/smooth-scroll/pull/27)
|
||||
* [Fix back button behavior in Firefox.](https://github.com/cferdinandi/smooth-scroll/issues/26)
|
||||
* v2.17 - January 17, 2014
|
||||
* [Fixed back button behavior when using `data-url` feature.](https://github.com/cferdinandi/smooth-scroll/pull/18)
|
||||
* v2.16 - January 16, 2014
|
||||
* [Updated variables for more accurate easing math when scrolling to top of page.](https://github.com/cferdinandi/smooth-scroll/pull/25#issuecomment-32566729)
|
||||
* v2.15 - January 16, 2014
|
||||
* [Fixed bug that caused "scroll-to-top" animation to create endless loop.](https://github.com/cferdinandi/smooth-scroll/issues/24)
|
||||
* v2.14 - January 15, 2014
|
||||
* [Fixed bug that caused animation to stop several pixels short.](https://github.com/cferdinandi/smooth-scroll/pull/15#issuecomment-32380770)
|
||||
* v2.12 - January 7, 2014
|
||||
* [Added fixed header support.](https://github.com/cferdinandi/smooth-scroll/pull/20#issuecomment-31773547)
|
||||
* v2.11 - January 4, 2014
|
||||
* [Change `offsetHeight` to `scrollHeight` to fix fixed/absolute positioning issues.](https://github.com/cferdinandi/smooth-scroll/pull/14)
|
||||
* v2.10 - December 31, 2013
|
||||
* [Added URL history support.](https://github.com/cferdinandi/smooth-scroll/pull/17)
|
||||
* v2.9 - December 9, 2013
|
||||
* [Added fixed for infinite loop when scrolling up.](https://github.com/cferdinandi/smooth-scroll/issues/13)
|
||||
* v2.8 - December 3, 2013
|
||||
* [Fixed false distance reading.](https://github.com/cferdinandi/smooth-scroll/issues/11)
|
||||
* Added linear easing as fallback when easing pattern not recognized to prevent script from failing.
|
||||
* v2.7 - November 25, 2013
|
||||
* Converted naming conventions back to mathmatical roots (ex. `easeInCubic`) to remain consistent with development community language.
|
||||
* v2.6 - November 26, 2013
|
||||
* Missing character was causing certain easing functions to break.
|
||||
* v2.5 - November 22, 2013
|
||||
* Changed the default easing to `easeInOutNormal`.
|
||||
* v2.4 - November 21, 2013
|
||||
* Added easing support with contributions from [Willem Liu](https://github.com/willemliu) and code from [Gaëtan Renaudeau](https://gist.github.com/gre/1650294).
|
||||
* v2.3 - August 27, 2013
|
||||
* Added missing semicolons.
|
||||
* Defined `animationStop` variable once, add values later.
|
||||
* Activated strict mode.
|
||||
* Wrapped in IIFE.
|
||||
* v2.2 - August 17, 2013
|
||||
* Now you can set the animation speed with the `data-speed` attribute. (ex. `data-speed="400"`)
|
||||
* v2.1 - August 17, 2013
|
||||
* Improvement animation function interval for smoother animation.
|
||||
* Updated to allow for scrolling up the page.
|
||||
* v2.0 - August 14, 2013
|
||||
* Converted to vanilla JavaScript.
|
||||
* Removed dependency on jQuery.
|
||||
* v1.1 - June 7, 2013
|
||||
* Switched to MIT license.
|
||||
* v1.1 - May 18, 2013
|
||||
* Added jQuery noConflict mode.
|
||||
* Updated tutorial.
|
||||
* v1.0 - January 24, 2013
|
||||
* Initial release.
|
||||
|
||||
|
||||
|
||||
## Older Docs
|
||||
|
||||
* [Version 3](http://cferdinandi.github.io/smooth-scroll/archive/v3/)
|
||||
* [Version 1](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1)
|
||||
35
resources/smooth-scroll/dist/js/bind-polyfill.js
vendored
Executable file
35
resources/smooth-scroll/dist/js/bind-polyfill.js
vendored
Executable file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* smooth-scroll v5.1.2
|
||||
* Animate scrolling to anchor links, by Chris Ferdinandi.
|
||||
* http://github.com/cferdinandi/smooth-scroll
|
||||
*
|
||||
* Free to use under the MIT License.
|
||||
* http://gomakethings.com/mit/
|
||||
*/
|
||||
|
||||
/*
|
||||
* Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers
|
||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
|
||||
*/
|
||||
|
||||
if (!Function.prototype.bind) {
|
||||
Function.prototype.bind = function (oThis) {
|
||||
if (typeof this !== "function") {
|
||||
// closest thing possible to the ECMAScript 5
|
||||
// internal IsCallable function
|
||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
||||
}
|
||||
|
||||
var aArgs = Array.prototype.slice.call(arguments, 1);
|
||||
var fToBind = this;
|
||||
fNOP = function () {};
|
||||
fBound = function () {
|
||||
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
|
||||
fNOP.prototype = this.prototype;
|
||||
fBound.prototype = new fNOP();
|
||||
|
||||
return fBound;
|
||||
};
|
||||
}
|
||||
2
resources/smooth-scroll/dist/js/bind-polyfill.min.js
vendored
Executable file
2
resources/smooth-scroll/dist/js/bind-polyfill.min.js
vendored
Executable file
@ -0,0 +1,2 @@
|
||||
/** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
|
||||
Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var o=Array.prototype.slice.call(arguments,1),n=this;return fNOP=function(){},fBound=function(){return n.apply(this instanceof fNOP&&t?this:t,o.concat(Array.prototype.slice.call(arguments)))},fNOP.prototype=this.prototype,fBound.prototype=new fNOP,fBound});
|
||||
393
resources/smooth-scroll/dist/js/smooth-scroll.js
vendored
Executable file
393
resources/smooth-scroll/dist/js/smooth-scroll.js
vendored
Executable file
@ -0,0 +1,393 @@
|
||||
/**
|
||||
* smooth-scroll v5.1.2
|
||||
* Animate scrolling to anchor links, by Chris Ferdinandi.
|
||||
* http://github.com/cferdinandi/smooth-scroll
|
||||
*
|
||||
* Free to use under the MIT License.
|
||||
* http://gomakethings.com/mit/
|
||||
*/
|
||||
|
||||
(function (root, factory) {
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define('smoothScroll', factory(root));
|
||||
} else if ( typeof exports === 'object' ) {
|
||||
module.exports = factory(root);
|
||||
} else {
|
||||
root.smoothScroll = factory(root);
|
||||
}
|
||||
})(this, function (root) {
|
||||
|
||||
'use strict';
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
var smoothScroll = {}; // Object for public APIs
|
||||
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
|
||||
var settings;
|
||||
|
||||
// Default settings
|
||||
var defaults = {
|
||||
speed: 500,
|
||||
easing: 'easeInOutCubic',
|
||||
offset: 0,
|
||||
updateURL: true,
|
||||
callbackBefore: function () {},
|
||||
callbackAfter: function () {}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Methods
|
||||
//
|
||||
|
||||
/**
|
||||
* A simple forEach() implementation for Arrays, Objects and NodeLists
|
||||
* @private
|
||||
* @param {Array|Object|NodeList} collection Collection of items to iterate
|
||||
* @param {Function} callback Callback function for each iteration
|
||||
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
|
||||
*/
|
||||
var forEach = function (collection, callback, scope) {
|
||||
if (Object.prototype.toString.call(collection) === '[object Object]') {
|
||||
for (var prop in collection) {
|
||||
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
|
||||
callback.call(scope, collection[prop], prop, collection);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (var i = 0, len = collection.length; i < len; i++) {
|
||||
callback.call(scope, collection[i], i, collection);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge defaults with user options
|
||||
* @private
|
||||
* @param {Object} defaults Default settings
|
||||
* @param {Object} options User options
|
||||
* @returns {Object} Merged values of defaults and options
|
||||
*/
|
||||
var extend = function ( defaults, options ) {
|
||||
var extended = {};
|
||||
forEach(defaults, function (value, prop) {
|
||||
extended[prop] = defaults[prop];
|
||||
});
|
||||
forEach(options, function (value, prop) {
|
||||
extended[prop] = options[prop];
|
||||
});
|
||||
return extended;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the closest matching element up the DOM tree
|
||||
* @param {Element} elem Starting element
|
||||
* @param {String} selector Selector to match against (class, ID, or data attribute)
|
||||
* @return {Boolean|Element} Returns false if not match found
|
||||
*/
|
||||
var getClosest = function (elem, selector) {
|
||||
var firstChar = selector.charAt(0);
|
||||
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
||||
if ( firstChar === '.' ) {
|
||||
if ( elem.classList.contains( selector.substr(1) ) ) {
|
||||
return elem;
|
||||
}
|
||||
} else if ( firstChar === '#' ) {
|
||||
if ( elem.id === selector.substr(1) ) {
|
||||
return elem;
|
||||
}
|
||||
} else if ( firstChar === '[' ) {
|
||||
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
|
||||
return elem;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Escape special characters for use with querySelector
|
||||
* @private
|
||||
* @param {String} id The anchor ID to escape
|
||||
* @author Mathias Bynens
|
||||
* @link https://github.com/mathiasbynens/CSS.escape
|
||||
*/
|
||||
var escapeCharacters = function ( id ) {
|
||||
var string = String(id);
|
||||
var length = string.length;
|
||||
var index = -1;
|
||||
var codeUnit;
|
||||
var result = '';
|
||||
var firstCodeUnit = string.charCodeAt(0);
|
||||
while (++index < length) {
|
||||
codeUnit = string.charCodeAt(index);
|
||||
// Note: there’s no need to special-case astral symbols, surrogate
|
||||
// pairs, or lone surrogates.
|
||||
|
||||
// If the character is NULL (U+0000), then throw an
|
||||
// `InvalidCharacterError` exception and terminate these steps.
|
||||
if (codeUnit === 0x0000) {
|
||||
throw new InvalidCharacterError(
|
||||
'Invalid character: the input contains U+0000.'
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
|
||||
// U+007F, […]
|
||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
|
||||
// If the character is the first character and is in the range [0-9]
|
||||
// (U+0030 to U+0039), […]
|
||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
|
||||
// If the character is the second character and is in the range [0-9]
|
||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
|
||||
(
|
||||
index === 1 &&
|
||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
|
||||
firstCodeUnit === 0x002D
|
||||
)
|
||||
) {
|
||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
|
||||
result += '\\' + codeUnit.toString(16) + ' ';
|
||||
continue;
|
||||
}
|
||||
|
||||
// If the character is not handled by one of the above rules and is
|
||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
|
||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
|
||||
// U+005A), or [a-z] (U+0061 to U+007A), […]
|
||||
if (
|
||||
codeUnit >= 0x0080 ||
|
||||
codeUnit === 0x002D ||
|
||||
codeUnit === 0x005F ||
|
||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
|
||||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
|
||||
codeUnit >= 0x0061 && codeUnit <= 0x007A
|
||||
) {
|
||||
// the character itself
|
||||
result += string.charAt(index);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Otherwise, the escaped character.
|
||||
// http://dev.w3.org/csswg/cssom/#escape-a-character
|
||||
result += '\\' + string.charAt(index);
|
||||
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate the easing pattern
|
||||
* @private
|
||||
* @param {String} type Easing pattern
|
||||
* @param {Number} time Time animation should take to complete
|
||||
* @returns {Number}
|
||||
*/
|
||||
var easingPattern = function ( type, time ) {
|
||||
var pattern;
|
||||
if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
|
||||
return pattern || time; // no easing, no acceleration
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate how far to scroll
|
||||
* @private
|
||||
* @param {Element} anchor The anchor element to scroll to
|
||||
* @param {Number} headerHeight Height of a fixed header, if any
|
||||
* @param {Number} offset Number of pixels by which to offset scroll
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getEndLocation = function ( anchor, headerHeight, offset ) {
|
||||
var location = 0;
|
||||
if (anchor.offsetParent) {
|
||||
do {
|
||||
location += anchor.offsetTop;
|
||||
anchor = anchor.offsetParent;
|
||||
} while (anchor);
|
||||
}
|
||||
location = location - headerHeight - offset;
|
||||
return location >= 0 ? location : 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine the document's height
|
||||
* @private
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getDocumentHeight = function () {
|
||||
return Math.max(
|
||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
||||
document.body.offsetHeight, document.documentElement.offsetHeight,
|
||||
document.body.clientHeight, document.documentElement.clientHeight
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert data-options attribute into an object of key/value pairs
|
||||
* @private
|
||||
* @param {String} options Link-specific options as a data attribute string
|
||||
* @returns {Object}
|
||||
*/
|
||||
var getDataOptions = function ( options ) {
|
||||
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the URL
|
||||
* @private
|
||||
* @param {Element} anchor The element to scroll to
|
||||
* @param {Boolean} url Whether or not to update the URL history
|
||||
*/
|
||||
var updateUrl = function ( anchor, url ) {
|
||||
if ( history.pushState && (url || url === 'true') ) {
|
||||
history.pushState( {
|
||||
pos: anchor.id
|
||||
}, '', window.location.pathname + anchor );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Start/stop the scrolling animation
|
||||
* @public
|
||||
* @param {Element} toggle The element that toggled the scroll event
|
||||
* @param {Element} anchor The element to scroll to
|
||||
* @param {Object} settings
|
||||
* @param {Event} event
|
||||
*/
|
||||
smoothScroll.animateScroll = function ( toggle, anchor, options ) {
|
||||
|
||||
// Options and overrides
|
||||
var settings = extend( settings || defaults, options || {} ); // Merge user options with defaults
|
||||
var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
|
||||
settings = extend( settings, overrides );
|
||||
anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers
|
||||
|
||||
// Selectors and variables
|
||||
var fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header
|
||||
var headerHeight = fixedHeader === null ? 0 : (fixedHeader.offsetHeight + fixedHeader.offsetTop); // Get the height of a fixed header if one exists
|
||||
var startLocation = root.pageYOffset; // Current location on the page
|
||||
var endLocation = getEndLocation( document.querySelector(anchor), headerHeight, parseInt(settings.offset, 10) ); // Scroll to location
|
||||
var animationInterval; // interval timer
|
||||
var distance = endLocation - startLocation; // distance to travel
|
||||
var documentHeight = getDocumentHeight();
|
||||
var timeLapsed = 0;
|
||||
var percentage, position;
|
||||
|
||||
// Update URL
|
||||
updateUrl(anchor, settings.updateURL);
|
||||
|
||||
/**
|
||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
|
||||
* @private
|
||||
* @param {Number} position Current position on the page
|
||||
* @param {Number} endLocation Scroll to location
|
||||
* @param {Number} animationInterval How much to scroll on this loop
|
||||
*/
|
||||
var stopAnimateScroll = function (position, endLocation, animationInterval) {
|
||||
var currentLocation = root.pageYOffset;
|
||||
if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) {
|
||||
clearInterval(animationInterval);
|
||||
settings.callbackAfter( toggle, anchor ); // Run callbacks after animation complete
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Loop scrolling animation
|
||||
* @private
|
||||
*/
|
||||
var loopAnimateScroll = function () {
|
||||
timeLapsed += 16;
|
||||
percentage = ( timeLapsed / parseInt(settings.speed, 10) );
|
||||
percentage = ( percentage > 1 ) ? 1 : percentage;
|
||||
position = startLocation + ( distance * easingPattern(settings.easing, percentage) );
|
||||
root.scrollTo( 0, Math.floor(position) );
|
||||
stopAnimateScroll(position, endLocation, animationInterval);
|
||||
};
|
||||
|
||||
/**
|
||||
* Set interval timer
|
||||
* @private
|
||||
*/
|
||||
var startAnimateScroll = function () {
|
||||
settings.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll
|
||||
animationInterval = setInterval(loopAnimateScroll, 16);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset position to fix weird iOS bug
|
||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
|
||||
*/
|
||||
if ( root.pageYOffset === 0 ) {
|
||||
root.scrollTo( 0, 0 );
|
||||
}
|
||||
|
||||
// Start scrolling animation
|
||||
startAnimateScroll();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* If smooth scroll element clicked, animate scroll
|
||||
* @private
|
||||
*/
|
||||
var eventHandler = function (event) {
|
||||
var toggle = getClosest(event.target, '[data-scroll]');
|
||||
if ( toggle && toggle.tagName.toLowerCase() === 'a' ) {
|
||||
event.preventDefault(); // Prevent default click event
|
||||
smoothScroll.animateScroll( toggle, toggle.hash, settings, event ); // Animate scroll
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy the current initialization.
|
||||
* @public
|
||||
*/
|
||||
smoothScroll.destroy = function () {
|
||||
if ( !settings ) return;
|
||||
document.removeEventListener( 'click', eventHandler, false );
|
||||
settings = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize Smooth Scroll
|
||||
* @public
|
||||
* @param {Object} options User settings
|
||||
*/
|
||||
smoothScroll.init = function ( options ) {
|
||||
|
||||
// feature test
|
||||
if ( !supports ) return;
|
||||
|
||||
// Destroy any existing initializations
|
||||
smoothScroll.destroy();
|
||||
|
||||
// Selectors and variables
|
||||
settings = extend( defaults, options || {} ); // Merge user options with defaults
|
||||
|
||||
// When a toggle is clicked, run the click handler
|
||||
document.addEventListener('click', eventHandler, false);
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Public APIs
|
||||
//
|
||||
|
||||
return smoothScroll;
|
||||
|
||||
});
|
||||
2
resources/smooth-scroll/dist/js/smooth-scroll.min.js
vendored
Executable file
2
resources/smooth-scroll/dist/js/smooth-scroll.min.js
vendored
Executable file
@ -0,0 +1,2 @@
|
||||
/** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
|
||||
!function(t,e){"function"==typeof define&&define.amd?define("smoothScroll",e(t)):"object"==typeof exports?module.exports=e(t):t.smoothScroll=e(t)}(this,function(t){"use strict";var e,n={},o=!!document.querySelector&&!!t.addEventListener,r={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},a=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.call(n,t[o],o,t);else for(var r=0,a=t.length;a>r;r++)e.call(n,t[r],r,t)},c=function(t,e){var n={};return a(t,function(e,o){n[o]=t[o]}),a(e,function(t,o){n[o]=e[o]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},i=function(t){for(var e,n=String(t),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(e=n.charCodeAt(r),0===e)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=e>=1&&31>=e||127==e||0===r&&e>=48&&57>=e||1===r&&e>=48&&57>=e&&45===c?"\\"+e.toString(16)+" ":e>=128||45===e||95===e||e>=48&&57>=e||e>=65&&90>=e||e>=97&&122>=e?n.charAt(r):"\\"+n.charAt(r)}return a},s=function(t,e){var n;return"easeInQuad"===t&&(n=e*e),"easeOutQuad"===t&&(n=e*(2-e)),"easeInOutQuad"===t&&(n=.5>e?2*e*e:-1+(4-2*e)*e),"easeInCubic"===t&&(n=e*e*e),"easeOutCubic"===t&&(n=--e*e*e+1),"easeInOutCubic"===t&&(n=.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1),"easeInQuart"===t&&(n=e*e*e*e),"easeOutQuart"===t&&(n=1- --e*e*e*e),"easeInOutQuart"===t&&(n=.5>e?8*e*e*e*e:1-8*--e*e*e*e),"easeInQuint"===t&&(n=e*e*e*e*e),"easeOutQuint"===t&&(n=1+--e*e*e*e*e),"easeInOutQuint"===t&&(n=.5>e?16*e*e*e*e*e:1+16*--e*e*e*e*e),n||e},f=function(t,e,n){var o=0;if(t.offsetParent)do o+=t.offsetTop,t=t.offsetParent;while(t);return o=o-e-n,o>=0?o:0},l=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},d=function(t){return t&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(t):{}},h=function(t,e){history.pushState&&(e||"true"===e)&&history.pushState({pos:t.id},"",window.location.pathname+t)};n.animateScroll=function(e,n,o){var a=c(a||r,o||{}),u=d(e?e.getAttribute("data-options"):null);a=c(a,u),n="#"+i(n.substr(1));var p,m,b,v=document.querySelector("[data-scroll-header]"),g=null===v?0:v.offsetHeight+v.offsetTop,O=t.pageYOffset,y=f(document.querySelector(n),g,parseInt(a.offset,10)),I=y-O,S=l(),A=0;h(n,a.updateURL);var Q=function(o,r,c){var u=t.pageYOffset;(o==r||u==r||t.innerHeight+u>=S)&&(clearInterval(c),a.callbackAfter(e,n))},C=function(){A+=16,m=A/parseInt(a.speed,10),m=m>1?1:m,b=O+I*s(a.easing,m),t.scrollTo(0,Math.floor(b)),Q(b,y,p)},H=function(){a.callbackBefore(e,n),p=setInterval(C,16)};0===t.pageYOffset&&t.scrollTo(0,0),H()};var p=function(t){var o=u(t.target,"[data-scroll]");o&&"a"===o.tagName.toLowerCase()&&(t.preventDefault(),n.animateScroll(o,o.hash,e,t))};return n.destroy=function(){e&&(document.removeEventListener("click",p,!1),e=null)},n.init=function(t){o&&(n.destroy(),e=c(r,t||{}),document.addEventListener("click",p,!1))},n});
|
||||
156
resources/smooth-scroll/gulpfile.js
Executable file
156
resources/smooth-scroll/gulpfile.js
Executable file
@ -0,0 +1,156 @@
|
||||
// Gulp Packages
|
||||
var gulp = require('gulp');
|
||||
var plumber = require('gulp-plumber');
|
||||
var clean = require('gulp-clean');
|
||||
var rename = require('gulp-rename');
|
||||
var flatten = require('gulp-flatten');
|
||||
var tap = require('gulp-tap');
|
||||
var header = require('gulp-header');
|
||||
var jshint = require('gulp-jshint');
|
||||
var stylish = require('jshint-stylish');
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
var sass = require('gulp-ruby-sass');
|
||||
var prefix = require('gulp-autoprefixer');
|
||||
var minify = require('gulp-minify-css');
|
||||
var karma = require('gulp-karma');
|
||||
var package = require('./package.json');
|
||||
|
||||
// Paths to project folders
|
||||
var paths = {
|
||||
output : 'dist/',
|
||||
temp: 'src/temp/',
|
||||
scripts : {
|
||||
input : [ 'src/js/*' ],
|
||||
output : 'dist/js/'
|
||||
},
|
||||
styles : {
|
||||
input : 'src/sass/**/*.scss',
|
||||
output : 'dist/css/'
|
||||
},
|
||||
static : 'src/static/**',
|
||||
test : {
|
||||
spec : [ 'test/spec/**/*.js' ],
|
||||
coverage: 'test/coverage/',
|
||||
results: 'test/results/'
|
||||
}
|
||||
};
|
||||
|
||||
// Template for banner to add to file headers
|
||||
var banner = {
|
||||
full :
|
||||
'/**\n' +
|
||||
' * <%= package.name %> v<%= package.version %>\n' +
|
||||
' * <%= package.description %>, by <%= package.author.name %>.\n' +
|
||||
' * <%= package.repository.url %>\n' +
|
||||
' * \n' +
|
||||
' * Free to use under the MIT License.\n' +
|
||||
' * http://gomakethings.com/mit/\n' +
|
||||
' */\n\n',
|
||||
min :
|
||||
'/**' +
|
||||
' <%= package.name %> v<%= package.version %>, by Chris Ferdinandi' +
|
||||
' | <%= package.repository.url %>' +
|
||||
' | Licensed under MIT: http://gomakethings.com/mit/' +
|
||||
' */\n'
|
||||
};
|
||||
|
||||
// Concatenate scripts in subfolders
|
||||
gulp.task('concatenate', function() {
|
||||
return gulp.src(paths.scripts.input)
|
||||
.pipe(plumber())
|
||||
.pipe(flatten())
|
||||
|
||||
.pipe(tap(function (file, t) {
|
||||
if ( file.stat.isDirectory() ) {
|
||||
var name = file.relative + '.js';
|
||||
return gulp.src(file.path + '/*.js')
|
||||
.pipe(concat(name))
|
||||
.pipe(gulp.dest(paths.temp));
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// Lint and minify scripts
|
||||
gulp.task('scripts', ['clean', 'concatenate'], function() {
|
||||
return gulp.src([
|
||||
paths.scripts.input + '/../*.js',
|
||||
paths.temp + '/*.js'
|
||||
])
|
||||
.pipe(plumber())
|
||||
.pipe(flatten())
|
||||
.pipe(header(banner.full, { package : package }))
|
||||
.pipe(gulp.dest(paths.scripts.output))
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(uglify())
|
||||
.pipe(header(banner.min, { package : package }))
|
||||
.pipe(gulp.dest(paths.scripts.output));
|
||||
});
|
||||
|
||||
// Process, lint, and minify Sass files
|
||||
gulp.task('styles', ['clean'], function() {
|
||||
return gulp.src(paths.styles.input)
|
||||
.pipe(plumber())
|
||||
.pipe(sass({style: 'expanded', noCache: true}))
|
||||
.pipe(flatten())
|
||||
.pipe(prefix('last 2 version', '> 1%'))
|
||||
.pipe(header(banner.full, { package : package }))
|
||||
.pipe(gulp.dest(paths.styles.output))
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(minify())
|
||||
.pipe(header(banner.min, { package : package }))
|
||||
.pipe(gulp.dest(paths.styles.output));
|
||||
});
|
||||
|
||||
// Copy static files into output folder
|
||||
gulp.task('static', ['clean'], function() {
|
||||
return gulp.src(paths.static)
|
||||
.pipe(plumber())
|
||||
.pipe(gulp.dest(paths.output));
|
||||
});
|
||||
|
||||
// Lint scripts
|
||||
gulp.task('lint', function () {
|
||||
return gulp.src(paths.scripts.input)
|
||||
.pipe(plumber())
|
||||
.pipe(jshint())
|
||||
.pipe(jshint.reporter('jshint-stylish'));
|
||||
});
|
||||
|
||||
// Remove prexisting content from output and test folders
|
||||
gulp.task('clean', function () {
|
||||
return gulp.src([
|
||||
paths.output,
|
||||
paths.test.coverage,
|
||||
paths.test.results
|
||||
], { read: false })
|
||||
.pipe(plumber())
|
||||
.pipe(clean());
|
||||
});
|
||||
|
||||
// Remove temporary files
|
||||
gulp.task('cleanTemp', ['scripts'], function () {
|
||||
return gulp.src(paths.temp, { read: false })
|
||||
.pipe(plumber())
|
||||
.pipe(clean());
|
||||
});
|
||||
|
||||
// Run unit tests
|
||||
gulp.task('test', function() {
|
||||
return gulp.src([paths.scripts.input + '/../**/*.js'].concat(paths.test.spec))
|
||||
.pipe(plumber())
|
||||
.pipe(karma({ configFile: 'test/karma.conf.js' }))
|
||||
.on('error', function(err) { throw err; });
|
||||
});
|
||||
|
||||
// Combine tasks into runner
|
||||
gulp.task('default', [
|
||||
'lint',
|
||||
'clean',
|
||||
'static',
|
||||
'concatenate',
|
||||
'scripts',
|
||||
'styles',
|
||||
'cleanTemp',
|
||||
'test'
|
||||
]);
|
||||
86
resources/smooth-scroll/index.html
Executable file
86
resources/smooth-scroll/index.html
Executable file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Smooth Scroll</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- HTML5 Shim for IE -->
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
<section style="width: 88%; max-width: 40em; margin-left: auto; margin-right: auto;">
|
||||
|
||||
<h1 style="text-align: center; font-size: 3em; margin-bottom: 0;">Smooth Scroll</h1>
|
||||
<p style="text-align: center; font-size: 1.5em; margin: 0;">A lightweight script to animate scrolling to anchor links.</p>
|
||||
<p style="text-align: center;"><a href="https://github.com/cferdinandi/smooth-scroll#readme">Smooth Scroll on GitHub</a></p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
<strong>Linear</strong><br>
|
||||
<a data-scroll data-options='{ "easing": "linear" }' href="#bazinga">Linear (no other options)</a><br>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Ease-In</strong><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInQuad" }' href="#bazinga">Quad</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInCubic" }' href="#bazinga">Cubic</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInQuart" }' href="#bazinga">Quart</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInQuint" }' href="#bazinga">Quint</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Ease-In-Out</strong><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInOutQuad" }' href="#bazinga">Quad</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInOutCubic" }' href="#bazinga">Cubic</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInOutQuart" }' href="#bazinga">Quart</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeInOutQuint" }' href="#bazinga">Quint</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Ease-Out</strong><br>
|
||||
<a data-scroll data-options='{ "easing": "easeOutQuad" }' href="#bazinga">Quad</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeOutCubic" }' href="#bazinga">Cubic</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeOutQuart" }' href="#bazinga">Quart</a><br>
|
||||
<a data-scroll data-options='{ "easing": "easeOutQuint" }' href="#bazinga">Quint</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
|
||||
</p>
|
||||
|
||||
<p id="bazinga"><a data-scroll href="#1@#%^-bottom">Bazinga!</a></p>
|
||||
|
||||
<p>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
|
||||
</p>
|
||||
|
||||
<p id="1@#%^-bottom"><a data-scroll data-options='{ "easing": "easeOutCubic" }' href="#top">Back to the top</a></p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Javascript -->
|
||||
<script src='dist/js/bind-polyfill.js'></script>
|
||||
<script src='dist/js/smooth-scroll.js'></script>
|
||||
<script>
|
||||
smoothScroll.init({
|
||||
speed: 1000,
|
||||
easing: 'easeInOutCubic',
|
||||
offset: 0,
|
||||
updateURL: true,
|
||||
callbackBefore: function ( toggle, anchor ) {},
|
||||
callbackAfter: function ( toggle, anchor ) {}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
resources/smooth-scroll/package.json
Executable file
37
resources/smooth-scroll/package.json
Executable file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "smooth-scroll",
|
||||
"version": "5.1.2",
|
||||
"description": "Animate scrolling to anchor links",
|
||||
"author": {
|
||||
"name": "Chris Ferdinandi",
|
||||
"url": "http://gomakethings.com"
|
||||
},
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/cferdinandi/smooth-scroll"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "~3.8.0",
|
||||
"gulp-autoprefixer": "0.0.7",
|
||||
"gulp-clean": "^0.2.4",
|
||||
"gulp-concat": "~2.2.0",
|
||||
"gulp-flatten": "~0.0.2",
|
||||
"gulp-tap": "~0.1.1",
|
||||
"gulp-header": "^1.0.2",
|
||||
"gulp-jshint": "^1.6.1",
|
||||
"gulp-karma": "0.0.4",
|
||||
"gulp-minify-css": "~0.3.4",
|
||||
"gulp-plumber": "~0.6.2",
|
||||
"gulp-rename": "~1.1.0",
|
||||
"gulp-ruby-sass": "~0.7.1",
|
||||
"gulp-uglify": "~0.3.0",
|
||||
"jshint-stylish": "^0.2.0",
|
||||
"karma": "^0.12.16",
|
||||
"karma-coverage": "^0.2.4",
|
||||
"karma-jasmine": "~0.2.0",
|
||||
"karma-phantomjs-launcher": "^0.1.4",
|
||||
"karma-spec-reporter": "0.0.13",
|
||||
"karma-htmlfile-reporter": "~0.1"
|
||||
}
|
||||
}
|
||||
26
resources/smooth-scroll/src/js/bind-polyfill.js
Executable file
26
resources/smooth-scroll/src/js/bind-polyfill.js
Executable file
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers
|
||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
|
||||
*/
|
||||
|
||||
if (!Function.prototype.bind) {
|
||||
Function.prototype.bind = function (oThis) {
|
||||
if (typeof this !== "function") {
|
||||
// closest thing possible to the ECMAScript 5
|
||||
// internal IsCallable function
|
||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
||||
}
|
||||
|
||||
var aArgs = Array.prototype.slice.call(arguments, 1);
|
||||
var fToBind = this;
|
||||
fNOP = function () {};
|
||||
fBound = function () {
|
||||
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
|
||||
};
|
||||
|
||||
fNOP.prototype = this.prototype;
|
||||
fBound.prototype = new fNOP();
|
||||
|
||||
return fBound;
|
||||
};
|
||||
}
|
||||
384
resources/smooth-scroll/src/js/smooth-scroll.js
Executable file
384
resources/smooth-scroll/src/js/smooth-scroll.js
Executable file
@ -0,0 +1,384 @@
|
||||
(function (root, factory) {
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
define('smoothScroll', factory(root));
|
||||
} else if ( typeof exports === 'object' ) {
|
||||
module.exports = factory(root);
|
||||
} else {
|
||||
root.smoothScroll = factory(root);
|
||||
}
|
||||
})(this, function (root) {
|
||||
|
||||
'use strict';
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
var smoothScroll = {}; // Object for public APIs
|
||||
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
|
||||
var settings;
|
||||
|
||||
// Default settings
|
||||
var defaults = {
|
||||
speed: 500,
|
||||
easing: 'easeInOutCubic',
|
||||
offset: 0,
|
||||
updateURL: true,
|
||||
callbackBefore: function () {},
|
||||
callbackAfter: function () {}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Methods
|
||||
//
|
||||
|
||||
/**
|
||||
* A simple forEach() implementation for Arrays, Objects and NodeLists
|
||||
* @private
|
||||
* @param {Array|Object|NodeList} collection Collection of items to iterate
|
||||
* @param {Function} callback Callback function for each iteration
|
||||
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
|
||||
*/
|
||||
var forEach = function (collection, callback, scope) {
|
||||
if (Object.prototype.toString.call(collection) === '[object Object]') {
|
||||
for (var prop in collection) {
|
||||
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
|
||||
callback.call(scope, collection[prop], prop, collection);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (var i = 0, len = collection.length; i < len; i++) {
|
||||
callback.call(scope, collection[i], i, collection);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge defaults with user options
|
||||
* @private
|
||||
* @param {Object} defaults Default settings
|
||||
* @param {Object} options User options
|
||||
* @returns {Object} Merged values of defaults and options
|
||||
*/
|
||||
var extend = function ( defaults, options ) {
|
||||
var extended = {};
|
||||
forEach(defaults, function (value, prop) {
|
||||
extended[prop] = defaults[prop];
|
||||
});
|
||||
forEach(options, function (value, prop) {
|
||||
extended[prop] = options[prop];
|
||||
});
|
||||
return extended;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the closest matching element up the DOM tree
|
||||
* @param {Element} elem Starting element
|
||||
* @param {String} selector Selector to match against (class, ID, or data attribute)
|
||||
* @return {Boolean|Element} Returns false if not match found
|
||||
*/
|
||||
var getClosest = function (elem, selector) {
|
||||
var firstChar = selector.charAt(0);
|
||||
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
||||
if ( firstChar === '.' ) {
|
||||
if ( elem.classList.contains( selector.substr(1) ) ) {
|
||||
return elem;
|
||||
}
|
||||
} else if ( firstChar === '#' ) {
|
||||
if ( elem.id === selector.substr(1) ) {
|
||||
return elem;
|
||||
}
|
||||
} else if ( firstChar === '[' ) {
|
||||
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
|
||||
return elem;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Escape special characters for use with querySelector
|
||||
* @private
|
||||
* @param {String} id The anchor ID to escape
|
||||
* @author Mathias Bynens
|
||||
* @link https://github.com/mathiasbynens/CSS.escape
|
||||
*/
|
||||
var escapeCharacters = function ( id ) {
|
||||
var string = String(id);
|
||||
var length = string.length;
|
||||
var index = -1;
|
||||
var codeUnit;
|
||||
var result = '';
|
||||
var firstCodeUnit = string.charCodeAt(0);
|
||||
while (++index < length) {
|
||||
codeUnit = string.charCodeAt(index);
|
||||
// Note: there’s no need to special-case astral symbols, surrogate
|
||||
// pairs, or lone surrogates.
|
||||
|
||||
// If the character is NULL (U+0000), then throw an
|
||||
// `InvalidCharacterError` exception and terminate these steps.
|
||||
if (codeUnit === 0x0000) {
|
||||
throw new InvalidCharacterError(
|
||||
'Invalid character: the input contains U+0000.'
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
|
||||
// U+007F, […]
|
||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
|
||||
// If the character is the first character and is in the range [0-9]
|
||||
// (U+0030 to U+0039), […]
|
||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
|
||||
// If the character is the second character and is in the range [0-9]
|
||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
|
||||
(
|
||||
index === 1 &&
|
||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
|
||||
firstCodeUnit === 0x002D
|
||||
)
|
||||
) {
|
||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
|
||||
result += '\\' + codeUnit.toString(16) + ' ';
|
||||
continue;
|
||||
}
|
||||
|
||||
// If the character is not handled by one of the above rules and is
|
||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
|
||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
|
||||
// U+005A), or [a-z] (U+0061 to U+007A), […]
|
||||
if (
|
||||
codeUnit >= 0x0080 ||
|
||||
codeUnit === 0x002D ||
|
||||
codeUnit === 0x005F ||
|
||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
|
||||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
|
||||
codeUnit >= 0x0061 && codeUnit <= 0x007A
|
||||
) {
|
||||
// the character itself
|
||||
result += string.charAt(index);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Otherwise, the escaped character.
|
||||
// http://dev.w3.org/csswg/cssom/#escape-a-character
|
||||
result += '\\' + string.charAt(index);
|
||||
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate the easing pattern
|
||||
* @private
|
||||
* @param {String} type Easing pattern
|
||||
* @param {Number} time Time animation should take to complete
|
||||
* @returns {Number}
|
||||
*/
|
||||
var easingPattern = function ( type, time ) {
|
||||
var pattern;
|
||||
if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
|
||||
if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity
|
||||
if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
|
||||
if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
|
||||
return pattern || time; // no easing, no acceleration
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate how far to scroll
|
||||
* @private
|
||||
* @param {Element} anchor The anchor element to scroll to
|
||||
* @param {Number} headerHeight Height of a fixed header, if any
|
||||
* @param {Number} offset Number of pixels by which to offset scroll
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getEndLocation = function ( anchor, headerHeight, offset ) {
|
||||
var location = 0;
|
||||
if (anchor.offsetParent) {
|
||||
do {
|
||||
location += anchor.offsetTop;
|
||||
anchor = anchor.offsetParent;
|
||||
} while (anchor);
|
||||
}
|
||||
location = location - headerHeight - offset;
|
||||
return location >= 0 ? location : 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine the document's height
|
||||
* @private
|
||||
* @returns {Number}
|
||||
*/
|
||||
var getDocumentHeight = function () {
|
||||
return Math.max(
|
||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
||||
document.body.offsetHeight, document.documentElement.offsetHeight,
|
||||
document.body.clientHeight, document.documentElement.clientHeight
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert data-options attribute into an object of key/value pairs
|
||||
* @private
|
||||
* @param {String} options Link-specific options as a data attribute string
|
||||
* @returns {Object}
|
||||
*/
|
||||
var getDataOptions = function ( options ) {
|
||||
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the URL
|
||||
* @private
|
||||
* @param {Element} anchor The element to scroll to
|
||||
* @param {Boolean} url Whether or not to update the URL history
|
||||
*/
|
||||
var updateUrl = function ( anchor, url ) {
|
||||
if ( history.pushState && (url || url === 'true') ) {
|
||||
history.pushState( {
|
||||
pos: anchor.id
|
||||
}, '', window.location.pathname + anchor );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Start/stop the scrolling animation
|
||||
* @public
|
||||
* @param {Element} toggle The element that toggled the scroll event
|
||||
* @param {Element} anchor The element to scroll to
|
||||
* @param {Object} settings
|
||||
* @param {Event} event
|
||||
*/
|
||||
smoothScroll.animateScroll = function ( toggle, anchor, options ) {
|
||||
|
||||
// Options and overrides
|
||||
var settings = extend( settings || defaults, options || {} ); // Merge user options with defaults
|
||||
var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
|
||||
settings = extend( settings, overrides );
|
||||
anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers
|
||||
|
||||
// Selectors and variables
|
||||
var fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header
|
||||
var headerHeight = fixedHeader === null ? 0 : (fixedHeader.offsetHeight + fixedHeader.offsetTop); // Get the height of a fixed header if one exists
|
||||
var startLocation = root.pageYOffset; // Current location on the page
|
||||
var endLocation = getEndLocation( document.querySelector(anchor), headerHeight, parseInt(settings.offset, 10) ); // Scroll to location
|
||||
var animationInterval; // interval timer
|
||||
var distance = endLocation - startLocation; // distance to travel
|
||||
var documentHeight = getDocumentHeight();
|
||||
var timeLapsed = 0;
|
||||
var percentage, position;
|
||||
|
||||
// Update URL
|
||||
updateUrl(anchor, settings.updateURL);
|
||||
|
||||
/**
|
||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
|
||||
* @private
|
||||
* @param {Number} position Current position on the page
|
||||
* @param {Number} endLocation Scroll to location
|
||||
* @param {Number} animationInterval How much to scroll on this loop
|
||||
*/
|
||||
var stopAnimateScroll = function (position, endLocation, animationInterval) {
|
||||
var currentLocation = root.pageYOffset;
|
||||
if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) {
|
||||
clearInterval(animationInterval);
|
||||
settings.callbackAfter( toggle, anchor ); // Run callbacks after animation complete
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Loop scrolling animation
|
||||
* @private
|
||||
*/
|
||||
var loopAnimateScroll = function () {
|
||||
timeLapsed += 16;
|
||||
percentage = ( timeLapsed / parseInt(settings.speed, 10) );
|
||||
percentage = ( percentage > 1 ) ? 1 : percentage;
|
||||
position = startLocation + ( distance * easingPattern(settings.easing, percentage) );
|
||||
root.scrollTo( 0, Math.floor(position) );
|
||||
stopAnimateScroll(position, endLocation, animationInterval);
|
||||
};
|
||||
|
||||
/**
|
||||
* Set interval timer
|
||||
* @private
|
||||
*/
|
||||
var startAnimateScroll = function () {
|
||||
settings.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll
|
||||
animationInterval = setInterval(loopAnimateScroll, 16);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset position to fix weird iOS bug
|
||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
|
||||
*/
|
||||
if ( root.pageYOffset === 0 ) {
|
||||
root.scrollTo( 0, 0 );
|
||||
}
|
||||
|
||||
// Start scrolling animation
|
||||
startAnimateScroll();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* If smooth scroll element clicked, animate scroll
|
||||
* @private
|
||||
*/
|
||||
var eventHandler = function (event) {
|
||||
var toggle = getClosest(event.target, '[data-scroll]');
|
||||
if ( toggle && toggle.tagName.toLowerCase() === 'a' ) {
|
||||
event.preventDefault(); // Prevent default click event
|
||||
smoothScroll.animateScroll( toggle, toggle.hash, settings, event ); // Animate scroll
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy the current initialization.
|
||||
* @public
|
||||
*/
|
||||
smoothScroll.destroy = function () {
|
||||
if ( !settings ) return;
|
||||
document.removeEventListener( 'click', eventHandler, false );
|
||||
settings = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize Smooth Scroll
|
||||
* @public
|
||||
* @param {Object} options User settings
|
||||
*/
|
||||
smoothScroll.init = function ( options ) {
|
||||
|
||||
// feature test
|
||||
if ( !supports ) return;
|
||||
|
||||
// Destroy any existing initializations
|
||||
smoothScroll.destroy();
|
||||
|
||||
// Selectors and variables
|
||||
settings = extend( defaults, options || {} ); // Merge user options with defaults
|
||||
|
||||
// When a toggle is clicked, run the click handler
|
||||
document.addEventListener('click', eventHandler, false);
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Public APIs
|
||||
//
|
||||
|
||||
return smoothScroll;
|
||||
|
||||
});
|
||||
26
resources/smooth-scroll/test/karma.conf.js
Executable file
26
resources/smooth-scroll/test/karma.conf.js
Executable file
@ -0,0 +1,26 @@
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath : '',
|
||||
autoWatch : true,
|
||||
frameworks: ['jasmine'],
|
||||
browsers : ['PhantomJS'],
|
||||
plugins : [
|
||||
'karma-spec-reporter',
|
||||
'karma-phantomjs-launcher',
|
||||
'karma-jasmine',
|
||||
'karma-coverage',
|
||||
'karma-htmlfile-reporter'
|
||||
],
|
||||
reporters : ['spec', 'coverage', 'html'],
|
||||
preprocessors: {
|
||||
'../src/js/**/*.js': 'coverage'
|
||||
},
|
||||
coverageReporter: {
|
||||
type : 'html',
|
||||
dir : 'coverage/'
|
||||
},
|
||||
htmlReporter: {
|
||||
outputFile: 'results/unit-tests.html'
|
||||
}
|
||||
});
|
||||
};
|
||||
9
resources/smooth-scroll/test/spec/spec-smoothScroll.js
Executable file
9
resources/smooth-scroll/test/spec/spec-smoothScroll.js
Executable file
@ -0,0 +1,9 @@
|
||||
describe('Smooth Scroll', function () {
|
||||
|
||||
describe('init', function () {
|
||||
it('should include the smoothScroll module', function () {
|
||||
expect(!!smoothScroll).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
205
style.css
Normal file
205
style.css
Normal file
@ -0,0 +1,205 @@
|
||||
html, body {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** HEADER ********************************** */
|
||||
/* ********************************************* */
|
||||
|
||||
header {
|
||||
padding: 0 10px;
|
||||
font-size: 12pt;
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
header #logo {
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header a {
|
||||
color: #E0E0E0;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header a:hover {
|
||||
color: #F80;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** PAGES *********************************** */
|
||||
/* ********************************************* */
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
border-top: 5px #F80 solid;
|
||||
border-bottom: 5px #F80 solid;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 15vh 5%;
|
||||
}
|
||||
|
||||
.content h1,h2,h3 {
|
||||
margin-left: -2%;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
text-align: center;
|
||||
font-size: 32pt;
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: #F80;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14pt;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p + ul {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** HOME ************************************ */
|
||||
|
||||
#home {
|
||||
border-top: none;
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
#home #home-image-container {
|
||||
margin: auto;
|
||||
padding-top: 3vh;
|
||||
max-width: 400px;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home #home-image-container img {
|
||||
max-height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#home .name-header {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
text-shadow:
|
||||
-1px -1px 0 #FFF,
|
||||
1px -1px 0 #FFF,
|
||||
-1px 1px 0 #FFF,
|
||||
1px 1px 0 #FFF;
|
||||
}
|
||||
|
||||
#home h1.name-header {
|
||||
margin-top: 0;
|
||||
font-size: 8vw;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#home h2.name-header {
|
||||
margin-bottom: 15vh;
|
||||
font-size: 4vw;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** ABOUT *********************************** */
|
||||
|
||||
#about {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
#about .content h3,p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#about .content h3 + p {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#about .content p + p {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** DOWNLOAD ******************************** */
|
||||
|
||||
#download {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
.dl-block {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dl-block h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img.dl-icon {
|
||||
padding: 40px;
|
||||
margin: 5px;
|
||||
border: 3px black solid;
|
||||
|
||||
width: 4vw;
|
||||
max-width: 64px;
|
||||
min-width: 32px;
|
||||
|
||||
transition: background-color 0.4s ease;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
img.dl-icon:hover {
|
||||
background-color: #f80;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ********************************************* */
|
||||
/* *** FOOTER ********************************** */
|
||||
/* ********************************************* */
|
||||
|
||||
footer {
|
||||
padding: 10px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
footer .footer-content {
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 9pt;
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight { background: #f0f3f3; }
|
||||
.highlight .c { color: #0099FF; font-style: italic } /* Comment */
|
||||
.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
|
||||
.highlight .k { color: #006699; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #555555 } /* Operator */
|
||||
.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #009999 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
|
||||
.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #FF0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
|
||||
.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
|
||||
.highlight .go { color: #AAAAAA } /* Generic.Output */
|
||||
.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
|
||||
.highlight .gt { color: #99CC66 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #FF6600 } /* Literal.Number */
|
||||
.highlight .s { color: #CC3300 } /* Literal.String */
|
||||
.highlight .na { color: #330099 } /* Name.Attribute */
|
||||
.highlight .nb { color: #336666 } /* Name.Builtin */
|
||||
.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #336600 } /* Name.Constant */
|
||||
.highlight .nd { color: #9999FF } /* Name.Decorator */
|
||||
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #CC00FF } /* Name.Function */
|
||||
.highlight .nl { color: #9999FF } /* Name.Label */
|
||||
.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
|
||||
.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
|
||||
.highlight .nv { color: #003333 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
|
||||
.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #CC3300 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #003333 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #003333 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #003333 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
|
||||
|
||||
.type-csharp .highlight .k { color: #0000FF }
|
||||
.type-csharp .highlight .kt { color: #0000FF }
|
||||
.type-csharp .highlight .nf { color: #000000; font-weight: normal }
|
||||
.type-csharp .highlight .nc { color: #2B91AF }
|
||||
.type-csharp .highlight .nn { color: #000000 }
|
||||
.type-csharp .highlight .s { color: #A31515 }
|
||||
.type-csharp .highlight .sc { color: #A31515 }
|
||||
@ -1,423 +0,0 @@
|
||||
/*******************************************************************************
|
||||
Slate Theme for GitHub Pages
|
||||
by Jason Costello, @jsncostello
|
||||
*******************************************************************************/
|
||||
|
||||
@import url(pygment_trac.css);
|
||||
|
||||
/*******************************************************************************
|
||||
MeyerWeb Reset
|
||||
*******************************************************************************/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Theme Styles
|
||||
*******************************************************************************/
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
color:#373737;
|
||||
background: #212121;
|
||||
font-size: 16px;
|
||||
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 10px 0;
|
||||
font-weight: 700;
|
||||
color:#222222;
|
||||
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 10px;
|
||||
font-size: 32px;
|
||||
background: url('../images/bg_hr.png') repeat-x bottom;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 15px 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #007edf;
|
||||
text-shadow: none;
|
||||
|
||||
transition: color 0.5s ease;
|
||||
transition: text-shadow 0.5s ease;
|
||||
-webkit-transition: color 0.5s ease;
|
||||
-webkit-transition: text-shadow 0.5s ease;
|
||||
-moz-transition: color 0.5s ease;
|
||||
-moz-transition: text-shadow 0.5s ease;
|
||||
-o-transition: color 0.5s ease;
|
||||
-o-transition: text-shadow 0.5s ease;
|
||||
-ms-transition: color 0.5s ease;
|
||||
-ms-transition: text-shadow 0.5s ease;
|
||||
}
|
||||
|
||||
a:hover, a:focus {text-decoration: underline;}
|
||||
|
||||
footer a {
|
||||
color: #F2F2F2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 739px;
|
||||
padding: 5px;
|
||||
margin: 10px 0 10px 0;
|
||||
border: 1px solid #ebebeb;
|
||||
|
||||
box-shadow: 0 0 5px #ebebeb;
|
||||
-webkit-box-shadow: 0 0 5px #ebebeb;
|
||||
-moz-box-shadow: 0 0 5px #ebebeb;
|
||||
-o-box-shadow: 0 0 5px #ebebeb;
|
||||
-ms-box-shadow: 0 0 5px #ebebeb;
|
||||
}
|
||||
|
||||
p img {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
width: 100%;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
|
||||
font-size: 14px;
|
||||
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px;
|
||||
margin: 0 3px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 0 0 20px;
|
||||
border-left: 3px solid #bbb;
|
||||
}
|
||||
|
||||
|
||||
ul, ol, dl {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dl p {
|
||||
padding-left: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
margin-bottom: 5px;
|
||||
border: none;
|
||||
background: url('../images/bg_hr.png') repeat-x center;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #373737;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
padding: 10px;
|
||||
background: #373737;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
border: 1px solid #373737;
|
||||
}
|
||||
|
||||
form {
|
||||
background: #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Full-Width Styles
|
||||
*******************************************************************************/
|
||||
|
||||
.outer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
max-width: 640px;
|
||||
padding: 20px 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#forkme_banner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
padding: 10px 50px 10px 10px;
|
||||
color: #fff;
|
||||
background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
#header_wrap {
|
||||
background: #212121;
|
||||
background: -moz-linear-gradient(top, #373737, #212121);
|
||||
background: -webkit-linear-gradient(top, #373737, #212121);
|
||||
background: -ms-linear-gradient(top, #373737, #212121);
|
||||
background: -o-linear-gradient(top, #373737, #212121);
|
||||
background: linear-gradient(top, #373737, #212121);
|
||||
}
|
||||
|
||||
#header_wrap .inner {
|
||||
padding: 50px 10px 30px 10px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#project_tagline {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
text-shadow: #111 0px 0px 10px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
position: absolute;
|
||||
width: 210px;
|
||||
z-index: 10;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: url('../images/icon_download.png') no-repeat 0% 90%;
|
||||
}
|
||||
|
||||
.zip_download_link {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 90px;
|
||||
height:70px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
background: url(../images/sprite_download.png) no-repeat bottom left;
|
||||
}
|
||||
|
||||
.tar_download_link {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 90px;
|
||||
height:70px;
|
||||
text-indent: -5000px;
|
||||
overflow: hidden;
|
||||
background: url(../images/sprite_download.png) no-repeat bottom right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.zip_download_link:hover {
|
||||
background: url(../images/sprite_download.png) no-repeat top left;
|
||||
}
|
||||
|
||||
.tar_download_link:hover {
|
||||
background: url(../images/sprite_download.png) no-repeat top right;
|
||||
}
|
||||
|
||||
#main_content_wrap {
|
||||
background: #f2f2f2;
|
||||
border-top: 1px solid #111;
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
|
||||
#main_content {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#footer_wrap {
|
||||
background: #212121;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
Small Device Styles
|
||||
*******************************************************************************/
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
#downloads {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#project_title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user