add example
This commit is contained in:
Laurent Peuch
parent
dae6852fb0
commit
b122a276b4
121
example/build/first_gallery/index.html
Normal file
121
example/build/first_gallery/index.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>my first gallery | Example gallery</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
<div class="picture-text">
|
||||
<div class="picture-text-column">
|
||||
<h1>Beautiful Title</h1>
|
||||
<h2>pouet pouet</h2>
|
||||
<div class="datetime">08 December 2015</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bordered-picture baguette">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="text">
|
||||
« voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
|
||||
</section>
|
||||
|
||||
<section class="pictures-group baguette">
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-small.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-small.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-small.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-small.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff-small.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<div class="back-to-home">
|
||||
<hr>
|
||||
<a href="../index.html">
|
||||
<div id="logo" src="./../static/img/logo.svg"/>
|
||||
HOME
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
baguetteBox.run(".baguette", {});
|
||||
</script>
|
||||
<footer>
|
||||
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
example/build/first_gallery/stuff-small.png
Normal file
BIN
example/build/first_gallery/stuff-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
example/build/first_gallery/stuff.png
Normal file
BIN
example/build/first_gallery/stuff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
46
example/build/index.html
Normal file
46
example/build/index.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="static/css/style.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Example gallery</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="gallery-header">
|
||||
<img id="logo" src="static/img/logo.svg" />
|
||||
<h1>Example gallery</h1>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="galleries-grid">
|
||||
|
||||
<div class="galleries-line covers-1">
|
||||
<!-- comment tricks against space between inline-block
|
||||
--><div class="gallery-square">
|
||||
<a href="first_gallery/index.html">
|
||||
<div class="gallery-title">
|
||||
<h2>my first gallery</h2>
|
||||
<h3>some subtitle</h3>
|
||||
<div class="gallery-datetime">08 December 2015</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="gallery-cover" style="background-image: url('first_gallery/stuff.png');"></div>
|
||||
</div><!-- comment tricks against space between inline-block
|
||||
-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p style="visibility: hidden">.</p>
|
||||
|
||||
<footer>
|
||||
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
137
example/build/second_gallery/index.html
Normal file
137
example/build/second_gallery/index.html
Normal file
@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>my first gallery | Example gallery</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
<div class="picture-text">
|
||||
<div class="picture-text-column">
|
||||
<h1>Beautiful Title</h1>
|
||||
<h2>pouet pouet</h2>
|
||||
<div class="datetime">08 December 2015</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bordered-picture baguette">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="pictures-group baguette">
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<div class="back-to-home">
|
||||
<hr>
|
||||
<a href="../index.html">
|
||||
<div id="logo" src="./../static/img/logo.svg"/>
|
||||
HOME
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
baguetteBox.run(".baguette", {});
|
||||
</script>
|
||||
<footer>
|
||||
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
example/build/second_gallery/stuff.png
Normal file
BIN
example/build/second_gallery/stuff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
21
example/build/static/LICENSE
Normal file
21
example/build/static/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014-2015 Materialize
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
70
example/build/static/README.md
Executable file
70
example/build/static/README.md
Executable file
@ -0,0 +1,70 @@
|
||||
|
||||
===========
|
||||
|
||||
[](https://gitter.im/Dogfalo/materialize?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
Materialize, a CSS Framework based on material design
|
||||
|
||||
### Current Version : v0.97.2
|
||||
|
||||
## Sass Requirements:
|
||||
- Ruby Sass 3.3+, LibSass 0.6+
|
||||
|
||||
## Supported Browsers:
|
||||
Chrome 35+, Firefox 31+, Safari 7+, IE 10+
|
||||
|
||||
## Changelog
|
||||
- v0.97.2 (Nov 8, 2015)
|
||||
- Image support inside select
|
||||
- Optgroup supported in select
|
||||
- Multiple select added
|
||||
- Card styling fixes
|
||||
- Breadcrumbs added
|
||||
- Scrollable tabs
|
||||
- Tooltips and dropdowns position themselves more intelligently inside the window
|
||||
- FAB menu is click-toggleable
|
||||
- Horizontal FAB support added
|
||||
- v0.97.1 (Sep 13, 2015)
|
||||
- Added new range slider with uses noUiSlider to provide powerful options
|
||||
- Added CSS for Chips
|
||||
- Toasts support adding of html elements
|
||||
- Fixed select destroy/creation bug
|
||||
- Bugfixes for dropdown, badges, collections, scrollfire
|
||||
- Added default preloader color variable
|
||||
- File input now supports multiple files and dynamically loaded elements
|
||||
- v0.97.0 (June 21, 2015)
|
||||
- **Documentation changed to use Official Google Icon web font**
|
||||
- **Input errors added**
|
||||
- Flicker on Firefox on dropdowns fixed
|
||||
- Pagination made more responsive
|
||||
- Modal now prevents scrolling
|
||||
- Modal animation added
|
||||
- Support for multiple modals added
|
||||
- Programmatic control of FAB to open/close added
|
||||
- Programmatic control of slider to play/pause added
|
||||
- Plus many more bug fixes
|
||||
- v0.96.1 (April 6, 2015)
|
||||
- Dropdown Fixes
|
||||
- Materialize functions fixed for Meteor
|
||||
- v0.96.0 (April 1, 2015)
|
||||
- **Toasts, transitions, scrollfire added under Materialize namespace**
|
||||
- **Dropdown is now created as a child of its parent**
|
||||
- Collapsibles supports nesting
|
||||
- Modal Bottom Sheet added
|
||||
- Indeterminate Checkboxes added
|
||||
- New Checkbox Style Added
|
||||
- Text Inputs supports placeholder/readonly
|
||||
- Google Inbox-like Collapsible added
|
||||
- Text Character Counter added
|
||||
- Waves no longer breaks on SVG's
|
||||
|
||||
- v0.95.3 (Feb 25, 2015)
|
||||
- Parallax image loading / responsiveness fixes
|
||||
- Date picker supports month/year as dropdown
|
||||
- Dismissable collection items
|
||||
- Avatar collection items
|
||||
- Pagination Added
|
||||
- ScrollFire fixes
|
||||
|
||||
|
||||
## Contributing
|
||||
[Please read CONTRIBUTING.md for more information](CONTRIBUTING.md)
|
||||
6
example/build/static/css/baguetteBox.min.css
vendored
Normal file
6
example/build/static/css/baguetteBox.min.css
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* baguetteBox.js
|
||||
* @author feimosi
|
||||
* @version 1.4.2
|
||||
* @url https://github.com/feimosi/baguetteBox.js
|
||||
*/#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-moz-transform .4s ease;transition:left .4s ease,transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.double-bounce1,.double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}
|
||||
164
example/build/static/css/style-page.css
Normal file
164
example/build/static/css/style-page.css
Normal file
@ -0,0 +1,164 @@
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #FBFBFB;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
|
||||
.full-picture {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.full-picture > .picture-text {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 555;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.full-picture > .picture-text > .picture-text-colum {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.full-picture h1 {
|
||||
text-transform: uppercase;
|
||||
font-size: 5.5vw;
|
||||
letter-spacing: 4px;
|
||||
font-family: sans-serif;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.full-picture h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 2.2vw;
|
||||
font-family: serif;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.full-picture .datetime {
|
||||
text-transform: uppercase;
|
||||
font-family: serif;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.bordered-picture img {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.pictures-line {
|
||||
min-width: 80%;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pictures-line .picture img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pictures-line .separator {
|
||||
min-width: 15px;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
color: #333;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 7em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-family: serif;
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
background-color: #EEE;
|
||||
border-top: solid 2px #DDD;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.back-to-home {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-to-home hr {
|
||||
width: 14%;
|
||||
margin-top: 8em;
|
||||
color: #DDD;
|
||||
}
|
||||
|
||||
.back-to-home #logo {
|
||||
background: transparent url("../img/logo.svg") no-repeat scroll center top / cover;
|
||||
border-radius: 100em;
|
||||
border: 7px solid black;
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.back-to-home a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.back-to-home #logo:hover {
|
||||
background-color: black;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
168
example/build/static/css/style.css
Normal file
168
example/build/static/css/style.css
Normal file
@ -0,0 +1,168 @@
|
||||
body {
|
||||
color: #222;
|
||||
font-family: sans-serif;
|
||||
background-color: #FBFBFB;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.galleries-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.galleries-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.covers-1 .gallery-square {
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
padding-bottom: 47%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.covers-2 .gallery-square {
|
||||
width: 47%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin: 0 1.5% 3%;
|
||||
padding-bottom: 47%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.covers-3 .gallery-square {
|
||||
width: 33.333333333%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 47%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.gallery-square > a {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 555;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes darken {
|
||||
from {background-color: rgba(0, 0, 0, 0);}
|
||||
to {background-color: rgba(0, 0, 0, 0.3);}
|
||||
}
|
||||
|
||||
.gallery-square > a:hover {
|
||||
animation-name: darken;
|
||||
animation-duration: 0.15s;
|
||||
animation-iteration-count: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.gallery-cover {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.gallery-title {
|
||||
color: white;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: initial;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
|
||||
padding: 20% 0 0;
|
||||
}
|
||||
|
||||
.gallery-header {
|
||||
text-align: center;
|
||||
margin-top: 8em;
|
||||
margin-bottom: 6.5em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.gallery-header > h1 {
|
||||
font-size: 2.6vw;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gallery-header > h4 {
|
||||
font-size: 1.4vw;
|
||||
color: #444;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-family: serif;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.gallery-header > hr {
|
||||
width: 14%;
|
||||
margin-top: 3.5em;
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
.gallery-title > h2 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .2em;
|
||||
letter-spacing: 2px;
|
||||
font-size: 1.7vw;
|
||||
}
|
||||
|
||||
.gallery-title > h3 {
|
||||
font-style: italic;
|
||||
margin-top: 0;
|
||||
margin-bottom: .7em;
|
||||
font-family: serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.gallery-datetime {
|
||||
margin-bottom: 1em;
|
||||
font-family: serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 7em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-family: serif;
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
background-color: #EEE;
|
||||
border-top: solid 2px #DDD;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
57
example/build/static/img/logo.svg
Normal file
57
example/build/static/img/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.7 KiB |
7
example/build/static/js/baguetteBox.min.js
vendored
Normal file
7
example/build/static/js/baguetteBox.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
137
example/build/third_gallery/index.html
Normal file
137
example/build/third_gallery/index.html
Normal file
@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>my first gallery | Example gallery</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
<div class="picture-text">
|
||||
<div class="picture-text-column">
|
||||
<h1>Beautiful Title</h1>
|
||||
<h2>pouet pouet</h2>
|
||||
<div class="datetime">08 December 2015</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bordered-picture baguette">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="pictures-group baguette">
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pictures-line">
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
|
||||
|
||||
<div class="picture">
|
||||
<a href="stuff.png">
|
||||
<img src="stuff.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<div class="back-to-home">
|
||||
<hr>
|
||||
<a href="../index.html">
|
||||
<div id="logo" src="./../static/img/logo.svg"/>
|
||||
HOME
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
baguetteBox.run(".baguette", {});
|
||||
</script>
|
||||
<footer>
|
||||
<p>Generate using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="CC-BY-SA">CC-BY-SA</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
example/build/third_gallery/stuff.png
Normal file
BIN
example/build/third_gallery/stuff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
26
example/first_gallery/settings.yaml
Normal file
26
example/first_gallery/settings.yaml
Normal file
@ -0,0 +1,26 @@
|
||||
title: my first gallery
|
||||
sub_title: some subtitle
|
||||
date: 2015-12-08
|
||||
cover: stuff.png
|
||||
sections:
|
||||
- type: full-picture
|
||||
image: stuff.png
|
||||
text:
|
||||
title: Beautiful Title
|
||||
sub_title: pouet pouet
|
||||
date: 2015-12-08
|
||||
- type: bordered-picture
|
||||
image: stuff.png
|
||||
- type: text
|
||||
text: « voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
|
||||
- type: pictures-group
|
||||
images:
|
||||
-
|
||||
- stuff.png
|
||||
- stuff.png
|
||||
- stuff.png
|
||||
-
|
||||
- stuff.png
|
||||
- stuff.png
|
||||
- type: full-picture
|
||||
image: stuff.png
|
||||
BIN
example/first_gallery/stuff.png
Normal file
BIN
example/first_gallery/stuff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
example/settings.yaml
Normal file
1
example/settings.yaml
Normal file
@ -0,0 +1 @@
|
||||
title: "Example gallery"
|
||||
Loading…
x
Reference in New Issue
Block a user