Ver código fonte

Demo page: add svg icon and fix position of header

master
Lokesh Dhakar 6 anos atrás
pai
commit
a5349559d5
4 arquivos alterados com 314 adições e 251 exclusões
  1. +1
    -1
      css/screen.css
  2. +36
    -0
      img/demopage/picture.svg
  3. +120
    -114
      index.html
  4. +157
    -136
      sass/screen.sass

+ 1
- 1
css/screen.css
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 36
- 0
img/demopage/picture.svg Ver arquivo

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_1">
<g id="picture">
<g>
<g>
<path fill="#F5F5F5" d="M42,48H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36c3.3,0,6,2.7,6,6v36C48,45.3,45.3,48,42,48z"/>
</g>
<rect x="2.9" y="2.9" display="none" fill="#CCCCCC" width="42.8" height="33.4"/>
<g>
<path d="M42,48H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36c3.3,0,6,2.7,6,6v36C48,45.3,45.3,48,42,48z M6.9,43.9h34.3
c1.5,0,2.7-1.2,2.7-2.7V6.9c0-1.5-1.2-2.7-2.7-2.7H6.9c-1.5,0-2.7,1.2-2.7,2.7v34.3C4.1,42.6,5.4,43.9,6.9,43.9z"/>
</g>
<g>
<rect x="1" y="34.6" width="46" height="3.7"/>
</g>
<polygon fill="#FFFFFF" points="11.6,16.1 21.4,16.1 24,12 19.1,7.1 15.5,8.4 13.8,10.8 10.9,11.6 "/>
<g>
<path d="M19,18h-6c-2.2,0-4-1.8-4-4c0-2.3,2-4.2,4.4-4c0.8-2.4,3.1-4,5.6-4c3.3,0,6,2.7,6,6S22.3,18,19,18z M13.6,12
c-0.9,0-1.7,0.8-1.7,1.7s0.8,1.7,1.7,1.7h5.1c1.9,0,3.4-1.5,3.4-3.4s-1.5-3.4-3.4-3.4c-1.7,0-3.1,1.2-3.4,2.9l-0.3,1.1l-0.9-0.4
C14,12,13.8,12,13.6,12z"/>
</g>
<g>
<path d="M42.2,36.3l-6.6-12.7c-0.4-0.8-1.1-2.1-2-2.1c-0.8,0-1.5,1.3-1.9,2l-5.3,9.6c-0.2,0.3-0.5,0.5-0.8,0.5
c-0.3,0-0.6-0.1-0.8-0.4c0-0.1-4.4-5.2-8.6-5.2c-3.4,0-6.1,5.5-7.1,8l-2.9-1.4C6.5,33.5,10.5,24,16,24c4,0,7.3,3.3,8.9,5.2
l5.3-9c0.8-1.3,2.2-2.2,3.8-2.2c1.7,0,3.2,0.9,3.9,2.4l7.1,14.1L42.2,36.3z"/>
</g>
</g>
</g>
</g>
<g id="Layer_2">
</g>
</svg>

+ 120
- 114
index.html Ver arquivo

@@ -16,126 +16,132 @@
</head>
<body>

<header>
<div class="container">
<h1 class="logo">Lightbox</h1>
<p class="lead">
The original lightbox script.<br />Eight years later &mdash; still going strong!
</p>

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

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

</div>
</header>

<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/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 class="backdrop">
<header>
<div class="container">
<h1 class="logo">
<img src="img/demopage/picture.svg" class="picture-icon" />Lightbox
</h1>
<p class="lead">
The original lightbox script.<br />Eight years later &mdash; still going strong!
</p>
<div class="primary-actions">
<a href="releases/lightbox-2.7.1.zip" class="button">
Download
</a>
<a href="https://github.com/lokesh/lightbox2/" class="button">
View on Github
</a>
</div>
<div class="credits">
<p>
Created by Lokesh Dhakar<br />
<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
</p>
</div>
</div>
</header>

</div><!-- .backdrop -->

<div class="content">
<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/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>

<hr />
<hr />

<h3 style="clear: both;">Four image set</h3>
<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" 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 class="image-row">
<div class="image-set">
<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>
</div>
</section>

<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.</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.
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
</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>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; 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>
</li>
</ul>
</div>
</section>


<section id="help" class="questions-section">
<div class="container">
<h2>Help</h2>

<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>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>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="donate-section">
<div class="container">
<h2>Donate</h2>
<p>
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>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
<input type="hidden" name="item_name" value="Donation for Lightbox">
<input type="hidden" name="no_note" value="1">
<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="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>

<footer>
<div class="container">
<p>
Created by Lokesh Dhakar<br />
<a href="https://twitter.com/lokesh" class="button button-minor">Follow me on Twitter</a>
</p>
</div>
</footer>
</section>

<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.</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.
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
</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>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; 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>
</li>
</ul>
</div>
</section>


<section id="help" class="questions-section">
<div class="container">
<h2>Help</h2>

<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>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>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="donate-section">
<div class="container">
<h2>Donate</h2>
<p>
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>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
<input type="hidden" name="item_name" value="Donation for Lightbox">
<input type="hidden" name="no_note" value="1">
<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="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>

</div><!-- .section-container -->

<div id="sharing" class="sharing-section">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>


+ 157
- 136
sass/screen.sass Ver arquivo

@@ -3,7 +3,10 @@

@import "normalize"

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

// VARIABLES -------------------------------------------------------------------

// == COLORS & BACKGROUNDS

$yellow: #fdf485
$orange: #e67e39
@@ -14,30 +17,36 @@ $gray: #777
$light-gray: #f3f3f3
$dark-gray: #222

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

// TYPE --------------------------------------------------------
$backdrop-bg-color: darken($bg-color, 4%)
$header-color: $color
$footer-color: $color


//== TYPE

$body-font-family: "Karla", "lucida grande", sans-serif
$heading-font-family: "Montserrat", "Helvetica", sans-serif
$code-font-family: "Karla", "lucida grande", sans-serif

// LAYOUT --------------------------------------------------------
//== LAYOUT

$gutter: 30px
$max-column-width: 600px

$sharing-section-z-index: 10
$backdrop-z-index: 5
$content-z-index: 10
$sharing-z-index: 20

// UI COMPONENTS --------------------------------------------------------
//== UI COMPONENTS

$radius: 6px

@@ -68,8 +77,8 @@ h1, h2, h3, h4, h5
font-weight: 700

h1
font-size: 4rem
margin: 0 0 0.2em 0
font-size: 3.5rem
margin: 0 0 0.1em 0

@media (min-width: 40rem)
h1
@@ -110,7 +119,7 @@ p

.lead
max-width: 45rem
margin-bottom: 1.25rem
margin-bottom: 1.1rem
font-size: 1.25rem

@@ -156,6 +165,87 @@ a
font-size: 0.75rem




/* 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)
padding: 0 0.5rem 0.1rem 0.5rem
code
padding: 0
font-size: 0.8rem
border: none


/* 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.1rem
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.3rem 1rem
border: 2px solid $link-color
color: $link-color
background-color: transparent
font-size: 0.8rem
&:hover
color: white
background: $link-color


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

hr
border: 0
border-top: 2px solid $border-color
margin: 1rem auto 1.5rem auto
width: 3rem
/* -- Layout ------------------------------------------------------------------ */

*, *:before, *:after
@@ -186,19 +276,66 @@ section
+pie-clearfix


/* -- Header -- */
//== Header

.backdrop
position: fixed
z-index: $backdrop-z-index
width: 100%
height: 100%
background-color: $backdrop-bg-color

.picture-icon
width: 2.7rem
height: 2.7rem
margin-right: 0.5rem
+transition(transform .4s cubic-bezier(0.510, 1.285, 0.855, 1.185))
&:hover
+scale(3)

@media (min-width: 40rem)
.picture-icon
width: 3.4rem
height: 3.4rem

@media (min-width: 64rem)
.picture-icon
width: 3.75rem
height: 3.75rem

header
padding: 4rem 0 2rem 0
background-color: $header-bg-color
padding-top: 5rem
text-align: center
color: $header-color
p
text-align: center

@media (min-width: 40rem)
header
padding: 3rem 0
padding-top: 6.5rem

.primary-actions
margin-bottom: 1.5rem

.credits
p
text-align: center
.button
margin-top: 0.5rem

//== Content

.content
position: absolute
z-index: $content-z-index
top: 28rem
width: 100%
border-top: 1px solid darken($border-color, 5%)
background-color: $bg-color

@media (min-width: 40rem)
.content
top: 34rem

/* -- Examples -- */

@@ -208,10 +345,11 @@ header
margin: 0 0.5rem 1rem 0.5rem
background-color: $bg-color
line-height: 0
+transition(background-color .1s ease-out)
+border-radius($radius)
+transition(background-color .5s ease-out)
&:hover
background-color: $link-color
+transition(background-color 0)

.example-image
width: 7rem
@@ -239,129 +377,12 @@ fieldset
.donate-button
width: auto

/* -- Credits -- */

footer
padding: 2rem 0
background-color: $header-bg-color
text-align: center
p
text-align: center
.button
margin-top: 0.5rem

/* -- Sharing -- */

.sharing-section
position: fixed
z-index: $sharing-section-z-index
z-index: $sharing-z-index
top: 20px
right: 0



/* 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)
padding: 0 0.5rem 0.1rem 0.5rem
code
padding: 0
font-size: 0.8rem
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.1rem
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: 1rem auto 1.5rem auto
width: 3rem

Carregando…
Cancelar
Salvar