Skip to content

Commit

Permalink
docs upd
Browse files Browse the repository at this point in the history
  • Loading branch information
dimsemenov committed Dec 12, 2014
1 parent f5c57af commit 886f9ba
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 12 deletions.
2 changes: 1 addition & 1 deletion website/_includes/examples.html
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ <h3>Single image lightbox</h3>

<div class="example gc3">
<h3>Lightbox gallery</h3>
<p>You may put any HTML content in each gallery item and <a href="http://codepen.io/dimsemenov/pen/vKrqs">mix content types</a>. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check <a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">my article</a> on the Smashing Magazine.</p>
<p>You may put any HTML content in each gallery item and <a href="http://codepen.io/dimsemenov/pen/vKrqs">mix content types</a>. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check <a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">my article</a> on the Smashing Magazine, or <a href="http://photoswipe.com">new PhotoSwipe</a> script.</p>
<div class="html-code grid-of-images">
<div class="popup-gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a>
Expand Down
16 changes: 16 additions & 0 deletions website/documentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ Here you can find the guide on how to use Magnific Popup. Besides this docs page

Please ask general questions through <a href="http://stackoverflow.com/questions/ask?tags=magnific-popup">StackOverflow</a> tagged with `magnific-popup`.

If you're looking for touch-friendly popup just for images, <a href="http://photoswipe.com">PhotoSwipe</a> might be a better choice.


# magnific popup docs

* This will become a table of contents (this text will be scraped).
Expand Down Expand Up @@ -1195,3 +1198,16 @@ Improve this documentation page (simply submit commit <a href="https://github.co
<div>
<iframe src="http://ghbtns.com/github-btn.html?user=dimsemenov&amp;repo=magnific-popup&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30">&nbsp;</iframe>
</div>

<h2>Keep updated</h2>
<div id="mc_embed_signup" class="embed-form">
<form action="http://dimsemenov.us1.list-manage.com/subscribe/post?u=ef6026d946a7b5d41d92c02e4&amp;id=54fae727da" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<p>Get notified about important update or new release.</p>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" placeholder="Your email" class="required email" id="mce-EMAIL">
<input type="hidden" id="group_2" name="group[2065][2]" value="true">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<p style="font-size: 12px; margin: 4px 0 0 0;">Newsletter is sent 3 times a year at max. Powered by Mailchimp.</p>
</form>
</div>
77 changes: 66 additions & 11 deletions website/site-assets/site.css
Original file line number Diff line number Diff line change
Expand Up @@ -186,45 +186,46 @@ h2.intro {
}*/


#magnific_popup_docs {
display: none;
}
.maruku_toc {
#markdown-toc {
position: fixed;
left: 0;
top: 50px;
padding: 20px 20px;
background: rgba(255, 255, 255, 0.71);
-webkit-backface-visibility:hidden;
list-style: none;
}
.maruku_toc ul {
#markdown-toc a[href="#magnific-popup-docs"] {
display: none;
}
#markdown-toc ul {
list-style: none;
}
.maruku_toc ul ul {
#markdown-toc ul ul {
display: none;
}
.maruku_toc:before {
#markdown-toc:before {
content: 'Table of contents';
font-weight: bold;
display: block;
margin-bottom: 10px;
}
@media all and (max-width: 75em) {
.maruku_toc {
#markdown-toc {
position: static;
padding: 0;
background: none;
}
}
.maruku_toc a {
#markdown-toc a {
text-decoration: none;
border-bottom: 1px dotted;
}
.maruku_toc ul {
#markdown-toc ul {
margin: 0;
padding: 0;
}
.maruku_toc .active a{
#markdown-toc .active a{
text-decoration: none;
color: #666;
}
Expand Down Expand Up @@ -299,6 +300,60 @@ content: 'CSS';
}


#mc_embed_signup {
max-width: 350px;
padding: 32px;
background: #EEE;
}
#mc_embed_signup input[type="email"] {
border: 1px solid #CCC;
border-top: 1px solid #999;
padding: 5px;
font-size: 18px;
width: 200px;
margin-right: 10px;
height: 25px;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#mc_embed_signup input[type="email"]:focus {
background-color: #FFF;
border: 1px solid #3169B3;
box-shadow: #3169B3 0px 0px 5px;
-moz-box-shadow: #3169B3 0px 0px 5px;
-webkit-box-shadow: #3169B3 0px 0px 5px;
outline: none;
}
#mc_embed_signup input[type="submit"] {
border: 1px solid #3169B3;
font-size: 13px;
font-weight: bold;
color: #FFF;
height: auto;
padding: 8px 13px;
cursor: pointer;
background-color: #3169B3;
display: inline-block;
width: auto;
-webkit-appearance: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
vertical-align: top;
}
.embed-form {
position: relative;
}
#mc_embed_signup p {
font-size: 15px;
color: #4F4F4F;
}



#main-wrapper {

Expand Down

0 comments on commit 886f9ba

Please sign in to comment.