瀏覽代碼

v2.7.0 Release

master
Lokesh Dhakar 6 年之前
父節點
當前提交
0c405adf2d
共有 27 個文件被更改,包括 568 次插入315 次删除
  1. +21
    -6
      Gruntfile.js
  2. +4
    -4
      README.markdown
  3. +1
    -1
      css/lightbox.css
  4. +1
    -1
      css/screen.css
  5. 二進制
      img/demopage/donate.png
  6. 二進制
      img/demopage/favicon.ico
  7. 二進制
      img/demopage/favicon.png
  8. 二進制
      img/demopage/image-1.jpg
  9. 二進制
      img/demopage/image-2.jpg
  10. 二進制
      img/demopage/image-3.jpg
  11. 二進制
      img/demopage/image-4.jpg
  12. 二進制
      img/demopage/image-5.jpg
  13. 二進制
      img/demopage/image-6.jpg
  14. 二進制
      img/demopage/thumb-1.jpg
  15. 二進制
      img/demopage/thumb-2.jpg
  16. 二進制
      img/demopage/thumb-3.jpg
  17. 二進制
      img/demopage/thumb-4.jpg
  18. 二進制
      img/demopage/thumb-5.jpg
  19. 二進制
      img/demopage/thumb-6.jpg
  20. +69
    -91
      index.html
  21. +0
    -1
      js/lightbox-2.6.min.js
  22. +1
    -2
      js/lightbox.js
  23. +1
    -1
      js/lightbox.min.js
  24. +1
    -1
      js/lightbox.min.map
  25. 二進制
      releases/lightbox-2.7.0.zip
  26. +224
    -0
      sass/_normalize.sass
  27. +245
    -207
      sass/screen.sass

+ 21
- 6
Gruntfile.js 查看文件

@@ -19,8 +19,20 @@ module.exports = function(grunt) {
}
},
exec: {
list: {
cmd: ['ls', 'ls -l'].join('&&')
zip: {
cmd: function(version) {
return ['rm -rf lightbox',
'mkdir lightbox',
'cp index.html lightbox',
'cp README.markdown lightbox',
'cp -r css lightbox',
'cp -r js lightbox',
'cp -r img lightbox',
'zip -r lightbox-' + version + '.zip lightbox',
'mv lightbox-' + version + '.zip releases',
'rm -rf lightbox'
].join('&&');
}
},
},
'ftp-deploy': {
@@ -40,7 +52,8 @@ module.exports = function(grunt) {
'node_modules',
'sass',
'Gruntfile.js',
'package.json'
'package.json',
'README.markdown'
]
}
},
@@ -84,7 +97,9 @@ module.exports = function(grunt) {


grunt.registerTask('default', ['compass', 'connect', 'watch']);
grunt.registerTask('test', ['compass', 'jshint']);
grunt.registerTask('zip', ['uglify','exec:list']);
// grunt.registerTask('deploy', ['compass', 'jshint', 'ftp-deploy']);
grunt.registerTask('zip', '', function(version) {
grunt.task.run('jshint');
grunt.task.run('uglify');
grunt.task.run('exec:zip:' + version);
});
};

+ 4
- 4
README.markdown 查看文件

@@ -1,12 +1,12 @@
# Lightbox2

Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
The original lightbox script. Eight years later — still going strong!

## Demo and instructions
## Demo and basic instructions
[Goto the Lightbox2 page](http://lokeshdhakar.com/projects/lightbox2/)


## Credits and license
## Credits

### Author
by Lokesh Dhakar
@@ -24,7 +24,7 @@ by Lokesh Dhakar
* careilly - [(https://github.com/careilly)](https://github.com/careilly)
* and many others. Thanks!!!

###License
##License
Licensed under the [Creative Commons Attribution 2.5 License](http://creativecommons.org/licenses/by/2.5/)

* Free for use in both personal and commercial projects.

+ 1
- 1
css/lightbox.css 查看文件

@@ -163,7 +163,7 @@ body:after {

.lb-data {
padding: 0 4px;
color: #bbbbbb;
color: #ccc;
}

.lb-data .lb-details {


+ 1
- 1
css/screen.css
文件差異過大導致無法顯示
查看文件


二進制
img/demopage/donate.png 查看文件

Before After
Width: 259  |  Height: 97  |  Size: 2.2KB

二進制
img/demopage/favicon.ico 查看文件

Before After

二進制
img/demopage/favicon.png 查看文件

Before After
Width: 32  |  Height: 32  |  Size: 986B

二進制
img/demopage/image-1.jpg 查看文件

Before After
Width: 605  |  Height: 500  |  Size: 86KB Width: 1250  |  Height: 784  |  Size: 245KB

二進制
img/demopage/image-2.jpg 查看文件

Before After
Width: 500  |  Height: 500  |  Size: 100KB Width: 640  |  Height: 640  |  Size: 165KB

二進制
img/demopage/image-3.jpg 查看文件

Before After
Width: 500  |  Height: 500  |  Size: 87KB Width: 1250  |  Height: 1250  |  Size: 276KB

二進制
img/demopage/image-4.jpg 查看文件

Before After
Width: 500  |  Height: 500  |  Size: 117KB Width: 1250  |  Height: 1250  |  Size: 242KB

二進制
img/demopage/image-5.jpg 查看文件

Before After
Width: 521  |  Height: 400  |  Size: 104KB Width: 885  |  Height: 1250  |  Size: 217KB

二進制
img/demopage/image-6.jpg 查看文件

Before After
Width: 500  |  Height: 500  |  Size: 72KB Width: 1250  |  Height: 1250  |  Size: 250KB

二進制
img/demopage/thumb-1.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 15KB Width: 250  |  Height: 157  |  Size: 13KB

二進制
img/demopage/thumb-2.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 20KB Width: 250  |  Height: 250  |  Size: 32KB

二進制
img/demopage/thumb-3.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 22KB Width: 250  |  Height: 250  |  Size: 15KB

二進制
img/demopage/thumb-4.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 18KB Width: 250  |  Height: 250  |  Size: 12KB

二進制
img/demopage/thumb-5.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 18KB Width: 177  |  Height: 250  |  Size: 10KB

二進制
img/demopage/thumb-6.jpg 查看文件

Before After
Width: 150  |  Height: 150  |  Size: 11KB Width: 250  |  Height: 250  |  Size: 11KB

+ 69
- 91
index.html 查看文件

@@ -7,86 +7,65 @@

<meta name="description" lang="en" content="Lightbox 2 is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="img/demopage/favicon.ico">
<link rel="shortcut icon" href="img/demopage/favicon.png">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>

<section id="intro" class="section intro-section">
<header>
<h1 class="logo">Lightbox<em class="version">2</em></h1>
</header>
<div class="section-content">
<p class="author">
by Lokesh Dhakar<br />
<span class="author-links">
<a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="https://github.com/lokesh">Github</a>
</span>
</p>
<header>
<div class="container">
<h1 class="logo">Lightbox</h1>
<p class="lead">
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
The original lightbox script.<br />Eight years later &mdash; still going strong!
</p>

<a href="releases/lightbox-2.7.0.zip" class="button">
Download
</a>

<a href="https://github.com/lokesh/lightbox2/" class="button">
View on Github
</a>

</div>
</section>
</header>

<section id="examples" class="section examples-section">
<header>
<h2 class="section-header"><span class="line-cover">Examples</span></h2>
</header>
<div class="section-content">
<h3>Single images</h3>
<section id="examples" class="examples-section">
<div class="container">
<h2>Examples</h2>
<h3>Two individual images</h3>
<div class="image-row">
<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
<a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a>
</div>

<h3 style="clear: both;">An image set</h3>
<hr />

<h3 style="clear: both;">Four image set</h3>

<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
</div>
</section>

<section id="download" class="section download-section">
<header>
<h2 class="section-header"><span class="line-cover">Download</span></h2>
</header>
<div class="section-content">
<a href="releases/lightbox2.7.zip" class="download-button">
<div class="file">
Lightbox
<div class="version">
v2.7
</div>
</div>
</a>

<p>
Lightbox2 is open-source.<br/>View and fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.
</p>
</div>
</section>

<section id="how-to-use" class="section how-to-use-section">
<header>
<h2 class="section-header"><span class="line-cover">How to use</span></h2>
</header>
<div class="section-content">
<h3>Part 1 - Get setup</h3>
<section id="how-to-use" class="how-to-use-section">
<div class="container">
<h2>How to use</h2>
<h3>Step 1 - Load the Javascript and CSS</h3>
<ol>
<li>Download and unzip the latest version of Lightbox from above.</li>
<li>Look inside the <code>js</code> folder to find <code>jquery-1.10.2.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
<pre><code>&lt;script src=&quot;js/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
<li>Download and unzip the latest version of Lightbox.</li>
<li>Look inside the <code>js</code> folder to find <code>jquery-1.11.0.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
<pre><code>&lt;script src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;</code></pre>
</li>
<li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
@@ -94,48 +73,45 @@
</li>
<li>Look inside the <code>img</code> folder to find <code>close.png</code>, <code>loading.gif</code>, <code>prev.png</code>, and <code>next.png</code>. These files are used in <code>lightbox.css</code>. By default, <code>lightbox.css</code> will look for these images in a folder called <code>img</code>.</li>
</ol>
<h3>Part 2 - Turn it on</h3>
<h3>Step 2 - Turn it on</h3>
<ul>
<li>Add a <code>data-lightbox</code> attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; title=&quot;My caption&quot;&gt;image #1&lt;/a&gt;</code></pre>
<div class="sub-point"><em>Optional:</em> Set the <code>title</code> attribute if you want to show a caption.</div> </li>
<pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; data-title=&quot;My caption&quot;&gt;Image #1&lt;/a&gt;</code></pre>
<em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
</li>
<li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
<pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #3&lt;/a&gt;
&lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #4&lt;/a&gt;</code></pre>
<pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #2&lt;/a&gt;
&lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #3&lt;/a&gt;
&lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #4&lt;/a&gt;</code></pre>
</li>
<li class="last-list-item"><div class="sub-point">For you long time Lightbox users, don't fret, you can still enable Lightbox by using <code>rel="lightbox"</code>. The new <code>data-lightbox</code> approach is preferred though as it is valid html.</div></li>
</ul>
</div>
</section>


<section id="help" class="section questions-section">
<header>
<h2 class="section-header"><span class="line-cover">Help</span></h2>
</header>
<div class="section-content">
<h3>Bugs</h3>
<p>If you find a bug, create an <a href="https://github.com/lokesh/lightbox2/issues">issue on Github</a>. Include your operating system and browser version along with detailed steps to reproduce the bug.</p>
<section id="help" class="questions-section">
<div class="container">
<h2>Help</h2>

<h3>Feature requests</h3>
<p>If you want a feature added, please create an <a href="https://github.com/lokesh/lightbox2/issues">issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>
<h3>Have a feature request?</h3>
<p>If you want a feature added, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>

<h3>Support questions</h3>
<p>If you have a question that is not a bug or a feature request, your best chance of getting an answer is by posting it on <a href="http://stackoverflow.com/">Stackoverflow</a>.</p>
<h3>Found a bug?</h3>
<p>If you find a bug, <a href="https://github.com/lokesh/lightbox2/issues">create an issue on Github</a>. Include your operating system and browser version along with detailed steps on how to reproduce the bug.</p>

<h3>Older versions</h3>
<p>See a change log and access older versions on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>
<h3>Can't get Lightbox working?</h3>
<p>If you followed the instructions, but still can't get Lightbox working, <a href="http://stackoverflow.com/">search Stackoverflow</a> to see if other people have run into the same issue as you. If not, post a new question.</p>

<h3>Looking for older versions?</h3>
<p>You can access older versions and see a changelog on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>
</div>
</section>

<section id="donate" class="section donate-section">
<header>
<h2 class="section-header"><span class="line-cover">Donate</span></h2>
</header>
<div class="section-content">
<section id="donate" class="donate-section">
<div class="container">
<h2>Donate</h2>
<p>
Lightbox is completely free to use. If you're using Lightbox on a commercial project and are feeling generous, consider a donation. Thanks!
Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks!
</p>
<form class="donate-button-form" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<fieldset>
@@ -146,23 +122,25 @@
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="image" src="img/demopage/donate.png" name="submit" class="donate-button" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="submit" name="submit" class="button donate-button" value="Donate using Paypal" alt="Make payments with PayPal - it's fast, free and secure!">
</fieldset>
</form>
</div>
</section>

<section id="credits" class="credits-section last">
<div class="section-content">
<p>Lightbox2 created by Lokesh Dhakar<br />
<a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a></p>
<footer>
<div class="container">
<p>
Lightbox is created by Lokesh Dhakar<br />
<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
</p>
</div>
</section>
</footer>

<section id="sharing" class="sharing-section">
<div id="sharing" class="sharing-section">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</section>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>


+ 0
- 1
js/lightbox-2.6.min.js
文件差異過大導致無法顯示
查看文件


+ 1
- 2
js/lightbox.js 查看文件

@@ -210,7 +210,7 @@
windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 110;
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

// Is there a fitting issue?
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
@@ -364,7 +364,6 @@

var keycode = event.keyCode;
var key = String.fromCharCode(keycode).toLowerCase();

if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {


+ 1
- 1
js/lightbox.min.js
文件差異過大導致無法顯示
查看文件


+ 1
- 1
js/lightbox.min.map
文件差異過大導致無法顯示
查看文件


二進制
releases/lightbox-2.7.0.zip 查看文件


+ 224
- 0
sass/_normalize.sass 查看文件

@@ -0,0 +1,224 @@
/**! normalize.css v2.1.1 | MIT License | git.io/normalize

// HTML5 display definitions

// Correct `block` display not defined in IE 8/9.
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
display: block

// Correct `inline-block` display not defined in IE 8/9.
audio, canvas, video
display: inline-block

audio:not([controls])
// Prevent modern browsers from displaying `audio` without controls.
display: none

// Remove excess height in iOS 5 devices.
height: 0

// Address styling not present in IE 8/9.
[hidden]
display: none


// Base

html
// Prevent system color scheme's background color being used in Firefox, IE, and Opera.
background: #fff

// Prevent system color scheme's text color being used in Firefox, IE, and Opera.
color: #000

// Set default font family to sans-serif.
font-family: sans-serif

// Prevent iOS text size adjust after orientation change, without disabling user zoom.
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%

// Remove default margin.
body
margin: 0


// Links

a
// Address `outline` inconsistency between Chrome and other browsers.
&:focus
outline: thin dotted

// Improve readability when focused and also mouse hovered in all browsers.
&:active, &:hover
outline: 0


// Typography

// Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome.
h1
font-size: 2em
margin: 0.67em 0

// Address styling not present in IE 8/9, Safari 5, and Chrome.
abbr[title]
border-bottom: 1px dotted

// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
b, strong
font-weight: bold

// Address styling not present in Safari 5 and Chrome.
dfn
font-style: italic

// Address differences between Firefox and other browsers.
hr
-moz-box-sizing: content-box
box-sizing: content-box
height: 0

// Address styling not present in IE 8/9.
mark
background: #ff0
color: #000

// Correct font family set oddly in Safari 5 and Chrome.
code, kbd, pre, samp
font-family: monospace, serif
font-size: 1em

// Improve readability of pre-formatted text in all browsers.
pre
white-space: pre-wrap

// Set consistent quote types.
q
quotes: '\201C' '\201D' '\2018' '\2019'

// Address inconsistent and variable font size in all browsers.
small
font-size: 80%

// Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub, sup
font-size: 75%
line-height: 0
position: relative
vertical-align: baseline

sup
top: -0.5em

sub
bottom: -0.25em


// Embedded content

// Remove border when inside `a` element in IE 8/9.
img
border: 0

// Correct overflow displayed oddly in IE 9.
svg:not(:root)
overflow: hidden


// Figures

// Address margin not present in IE 8/9 and Safari 5.
figure
margin: 0


// Forms

// Define consistent border, margin, and padding.
fieldset
border: 1px solid #c0c0c0
margin: 0 2px
padding: 0.35em 0.625em 0.75em

legend
// Correct `color` not being inherited in IE 8/9.
border: 0

// Remove padding so people aren't caught out if they zero out fieldsets.
padding: 0

button, input, select, textarea
// Correct font family not being inherited in all browsers.
font-family: inherit

// Correct font size not being inherited in all browsers.
font-size: 100%

// Address margins set differently in Firefox 4+, Safari 5, and Chrome.
margin: 0

// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
button, input
line-height: normal

// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
button, select
text-transform: none

button, html input[type='button'], input[type='reset'], input[type='submit']
// Avoid the WebKit bug in Android 4.0.* where `html input[type='button'] { -webkit-appearance: button }` destroys native `audio` and `video` controls.
// Correct inability to style clickable `input` types in iOS.
-webkit-appearance: button

// Improve usability and consistency of cursor style between image-type `input` and others.
cursor: pointer

// Re-set default cursor for disabled elements.
button[disabled], html input[disabled]
cursor: default

input
&[type='checkbox'], &[type='radio']
// Address box sizing set to `content-box` in IE 8/9.
box-sizing: border-box

// Remove excess padding in IE 8/9.
padding: 0

&[type='search']
// Address `appearance` set to `searchfield` in Safari 5 and Chrome.
-webkit-appearance: textfield

// Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).
-moz-box-sizing: content-box
-webkit-box-sizing: content-box
box-sizing: content-box

// Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.
&::-webkit-search-cancel-button, &::-webkit-search-decoration
-webkit-appearance: none

// Remove inner padding and border in Firefox 4+.
button::-moz-focus-inner, input::-moz-focus-inner
border: 0
padding: 0

textarea
// Remove default vertical scrollbar in IE 8/9.
overflow: auto

// Improve readability and alignment in all browsers.
vertical-align: top


// Tables

// Remove most spacing between table cells.
table
border-collapse: collapse
border-spacing: 0

+ 245
- 207
sass/screen.sass 查看文件

@@ -1,22 +1,28 @@
@import "compass/css3"
@import "compass/utilities/general/clearfix"

@import "normalize"

// COLORS & BACKGROUNDS --------------------------------------------------------

$yellow: #fdf485
$orange: #ff8000
$orange: #e67e39
$red: #ff4040
$blue: #4ae
$green: #61c227
$gray: #aaa
$light-gray: #ddd
$dark-gray: #444

$color: white
$bg-color: $dark-gray
$heading-color: $yellow
$link-color: $green
$gray: #777
$light-gray: #f3f3f3
$dark-gray: #222

$color: $gray
$bg-color: #fff
$border-color: darken($bg-color, 5%)
$header-bg-color: #f7f7f7
$section-heading-color: $orange
$heading-color: $dark-gray
$link-color: $blue
$code-color: $color
$code-bg-color: darken($bg-color, 5%)

// TYPE --------------------------------------------------------

@@ -24,15 +30,13 @@ $body-font-family: "Karla", "lucida grande", sans-serif
$heading-font-family: "Montserrat", "Helvetica", sans-serif
$code-font-family: "Karla", "lucida grande", sans-serif

$font-size: 18px
$font-size: 16px

// LAYOUT --------------------------------------------------------

$gutter: 40px
$base-line-height: 1.7em
$max-column-width: 800px
$gutter: 30px
$max-column-width: 600px

$section-header-z-index: 5
$sharing-section-z-index: 10


@@ -45,48 +49,73 @@ $radius: 6px
/* Typography
*----------------------------------------------- */

body,
input,
textarea
html
font: 100% / 1.5 $body-font-family, sans-serif
font-weight: 400

@media (min-width: 40rem)
html
font-size: 112%

@media (min-width: 64rem)
html
font-size: 120%

body
color: $color
font-size: $font-size
font-family: $body-font-family

h1,
h2,
h3,
h4,
h5,
h6
line-height: 1.2em
background-color: $bg-color


h1, h2, h3, h4, h5
color: $heading-color
line-height: 1.2em
font-family: $heading-font-family
font-weight: normal
font-weight: 600

h1
font-size: 72px
line-height: 1em
font-size: 3.5rem
margin: 0 0 0.2em 0

@media (min-width: 40rem)
h1
font-size: 4.5rem

@media (min-width: 64rem)
h1
font-size: 5rem

h2
font-size: 36px
line-height: 1.2em
margin-bottom: 0.3em
color: $section-heading-color
margin-bottom: 1.5rem
font-size: 1.5rem
text-transform: uppercase

@media (min-width: 40rem)
h2
font-size: 2rem

h3
color: $heading-color
margin-bottom: 0.5em
font-size: 24px
letter-spacing: 1px
text-align: center
text-transform: uppercase
font-size: 1.2rem
margin-bottom: .5rem

blockquote
margin: 0
p
color: #bbb
font-style: italic
margin-bottom: 1.5rem

h4
font-size: $font-size
cite
color: #bbb

p
line-height: $base-line-height
margin-bottom: $base-line-height
margin: 0 auto 2em auto
max-width: 35rem

.lead
max-width: 45rem
font-size: 1.25rem

ol
list-style-type: decimal
@@ -96,7 +125,6 @@ ul, ol

li
margin-bottom: 2em
line-height: $base-line-height - 0.2
&.last-list-item
border-bottom: none

@@ -115,37 +143,11 @@ i
em
font-style: normal

pre
padding: $gutter/4
margin-top: $gutter/8
margin-bottom: $gutter/4
background-color: darken($bg-color, 3%)
font-family: $code-font-family
line-height: 1.5em
+border-radius($radius)
overflow-x: auto

code, kbd
padding: 2px 4px
color: desaturate($orange, 25%)
background-color: darken($bg-color, 3%)
font-family: $code-font-family
+border-radius($radius)

code
position: relative
top: -1px

pre code
top: 0
padding: 0
background: transparent

a
color: $link-color
text-decoration: none
&:hover
color: lighten($link-color, 30%)
text-decoration: underline

::-moz-selection,
::selection
@@ -154,149 +156,95 @@ a

.sub-point
display: block
font-size: $font-size - 4
code
font-size: $font-size - 6
padding: $gutter/20
font-size: 0.75rem


/* -- Layout ------------------------------------------------------------------ */

*, *:before, *:after
+box-sizing("border-box")

body
margin: 0
padding: 0
background: $bg-color

.section
padding: 0 0 40px 0
+pie-clearfix
&.last
border-bottom: none

.section-header
position: relative
z-index: $section-header-z-index
margin-top: 0
margin-bottom: $gutter * 2
color: lighten($bg-color, 12%)
section
border-top: 2px solid $border-color
text-align: center
font-size: 72px

&:before
border-top: 2px solid lighten($bg-color, 12%)
content: ""
margin: 0 auto // this centers the line to the full width specified
position: absolute // positioning must be absolute here, and relative positioning must be applied to the parent
top: 50%
left: 0
right: 0
bottom: 0
z-index: -1
.line-cover
/* to hide the lines from behind the text, you have to set the background color the same as the container */
background: $bg-color
padding: 0 15px
padding: 2rem 0
&:first-of-type
border-top: none

@media (min-width: 40rem)
section
padding: 4rem 0

.section-content
.container
margin: 0 auto
padding: 0 $gutter $gutter $gutter
max-width: $max-column-width
max-width: 53rem
width: 90%

.row
+pie-clearfix

/* -- Sections ------------------------------------------------------------------ */

/* -- Intro -- */
/* -- Header -- */

.intro-section
header
padding: 2rem 0
background-color: $header-bg-color
text-align: center

.logo
color: white
margin-bottom: 0.07em
.version
color: $heading-color

.author
margin-top: -9px
padding-left: 23px
line-height: 1.2em

.author-links
font-size: $font-size - 2

.lead
font-size: $font-size + 4

/* -- Examples -- */
.examples-section
text-align: center

.image-row
+pie-clearfix
margin-bottom: $gutter/2

.example-image-link
display: inline-block
margin: 0 $gutter/4 $gutter/2 $gutter/4
padding: 4px
margin: 0 0.5rem 1rem 0.5rem
background-color: $bg-color
line-height: 0
+transition(background-color .1s ease-out)
+border-radius($radius)
border: 4px solid transparent
+transition(all .1s ease-out)
&:hover
border: 4px solid $link-color
background-color: $link-color

.example-image
+border-radius(2px)
width: 7rem
+border-radius($radius - 1)

/* -- Download -- */

.download-section
text-align: center
/* -- How to use -- */

.download-button
display: block
max-width: 300px
margin: 0 auto $gutter/2 auto
padding-top: $gutter/4 + 10
padding-bottom: $gutter/4
background-color: darken($bg-color, 10%)
border: 4px solid $bg-color
+border-radius($radius)
+transition(all .1s ease-out)
+pie-clearfix
&:hover
border-color: $link-color
background-color: #444
.file
font-size: 36px
color: white
line-height: 1em
.version
font-size: 24px
color: $link-color
.how-to-use-section
p,
ol,
ul,
pre
text-align: left

/* -- Donate -- */

fieldset
border: none
.donate-button-form
text-align: center

.donate-button
border: 4px solid rgba(0, 0, 0, 0)
+border-radius($radius)
+transition(all .1s ease-out)
&:hover
background-color: #444
border-color: $link-color
width: 100%

@media (min-width: 40rem)
.donate-button
width: auto

/* -- Credits -- */

.credits-section
footer
padding: 2rem 0
background-color: $header-bg-color
text-align: center

.button
margin-top: 0.5rem

/* -- Sharing -- */

.sharing-section
@@ -306,42 +254,132 @@ fieldset
right: 0


/* -- Responsive design -------------------------------------------------------------- */

@media only screen and (max-width : 640px)
body
font-size: $font-size - 4
h1
font-size: 48px
h2
font-size: 26px
h3
font-size: 16px
ol
list-style-position: inside
code,
kbd,
pre,
pre code
font-size: $font-size - 7
.sub-point
font-size: $font-size - 6
code
font-size: $font-size - 9
.lead
font-size: $font-size - 2
.section
padding-bottom: $gutter/2
margin-bottom: $gutter/2
.section-content
padding: 0 ($gutter / 2) ($gutter / 2) ($gutter / 2)
.section-header
margin-bottom: $gutter / 2
font-size: 48px
.author
margin-top: -5px
padding-left: 30px
.author-links
font-size: $font-size - 6
/* Code
* ========================================================================== */

code
color: $code-color
background-color: $code-bg-color
+border-radius($radius)
font-family: Consolas, Courier, monospace
font-size: 0.9rem
padding: 0.1rem 0.3rem
position: relative
top: -1px

pre
background-color: $code-bg-color
+border-radius($radius)

code
font-size: 0.7rem
border: none


/* Mobile First Grid
* ========================================================================== */

.column
margin-bottom: 1.5rem

@media (min-width: 40rem)
.column
float: left
margin: 0
padding-left: 1rem
padding-right: 1rem
&.full
width: 100%
&.two-thirds
width: 66.7%
&.half
width: 50%
&.third
width: 33.3%
&.fourth
width: 24.95%
&.flow-opposite
float: right



/* Lists
* ========================================================================== */

ul
margin: 0
text-align: left

@media (min-width: 40rem)
ul
display: inline-block


/* Buttons
* ========================================================================== */

.button
display: block
padding: 0.7rem 2rem
margin-bottom: 0.5rem
border: none
color: #fff
background-color: $link-color
font-size: 1.2rem
font-weight: bold
text-transform: uppercase
+border-radius($radius)
vertical-align: middle
white-space: nowrap
&:hover
background: darken($link-color, 10%)
text-decoration: none

@media (min-width: 40rem)
.button
display: inline-block
margin: 0 0.25rem

.button-minor
padding: 0.35rem 1rem
border: 2px solid $link-color
color: $link-color
background-color: transparent
font-size: 0.8rem
&:hover
color: white


/* Elements
* ========================================================================== */

hr
border: 0
border-top: 2px solid $border-color
margin: 2rem auto
width: 3rem

@media (min-width: 40rem)
hr
margin: 2.5rem auto


/* Gist Overrides
* ========================================================================== */

.gist .gist-file
font-size: .9rem !important
margin: 0 auto
max-width: 39rem
overflow: hidden !important
text-align: left
.gist-data
background: #f8f8f8 !important
border-bottom: none !important
.gist-meta
display: none !important

.gist-syntax .k
color: #555 !important
font-weight: normal !important

Loading…
取消
儲存