From d81fec847eeb6325a29eab45bdbcb8d2fc1e124e Mon Sep 17 00:00:00 2001 From: Laurent Peuch Date: Mon, 18 Apr 2016 19:45:06 +0200 Subject: [PATCH] [mod] update example --- example/build/first_gallery/index.html | 262 +++++++++++++++--------- example/build/index.html | 43 ++-- example/build/static/css/style-page.css | 147 ++++++++++++- 3 files changed, 328 insertions(+), 124 deletions(-) diff --git a/example/build/first_gallery/index.html b/example/build/first_gallery/index.html index 8061da2..151eb18 100644 --- a/example/build/first_gallery/index.html +++ b/example/build/first_gallery/index.html @@ -1,142 +1,204 @@ - - - - - - - + + + + + + + - - - my first gallery · Example gallery - + + + my first gallery · Example gallery + - - - + + +
-
-
-

Beautiful Title

-

pouet pouet

-
08 December 2015
-
+
+
+

Beautiful Title

+

pouet pouet

+ + +
08 December 2015
+
+
- - + + + +
- - - +
+ + + +
+
- -
+ + + + + + + +
+
+ + + +
+
plop
+
+ +
+ +
+ + + + +
« voici plein de blabla à rajouter et ceci est du gras 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 »
- -
+ + + +
- - -
- - - -
- -
- - -
- - - -
-
+
+ + + +
+
test
+
+ + +
+ +
- - -
- - - -
+ + + +
+ + + +
+
test
+
+ + +
+ +
+ + + + + +
+ + + +
+
test
+
+ + +
- +
- - -
- - - -
- -
- - -
- - - -
+ +
+ + + + +
+ +
+ + + + + +
+ + + + +
- +
- - + + +
- + -
-
- - - -
+ - - - - + + + - - +}); + + + + + + + + \ No newline at end of file diff --git a/example/build/index.html b/example/build/index.html index 63ee36c..200e345 100644 --- a/example/build/index.html +++ b/example/build/index.html @@ -1,29 +1,28 @@ - - - + + + + + + Example gallery + - - - Example gallery - + - - -
- +
+ -

Example gallery

-

The subtitle

-
+

Example gallery

+

The subtitle

+
- +
@@ -33,7 +32,7 @@

my first gallery

some subtitle

- +
08 December 2015
@@ -48,8 +47,12 @@

.

- - + + + + + + \ No newline at end of file diff --git a/example/build/static/css/style-page.css b/example/build/static/css/style-page.css index 60470c5..cedb963 100644 --- a/example/build/static/css/style-page.css +++ b/example/build/static/css/style-page.css @@ -8,6 +8,7 @@ body { height: 100%; width: 100%; background-color: #FBFBFB; + color: black; margin: 0; } @@ -103,7 +104,6 @@ a { line-height: 1.8em; margin-left: 21%; margin-right: 21%; - color: black; } .paragraph { @@ -112,7 +112,6 @@ a { font-size: 1em; margin-left: 21%; margin-right: 21%; - color: #333; } .paragraph h2 { @@ -120,7 +119,6 @@ a { font-weight: normal; font-size: 2.5em; text-transform: uppercase; - color: black; line-height: 1.4em; } @@ -148,7 +146,6 @@ footer { .back-to-home hr { width: 14%; - margin-top: 8em; color: #DDD; } @@ -197,3 +194,145 @@ footer a { .gallery-header { margin-bottom: 0; } + + + +.caption { + position: relative; + overflow: hidden; +} + +.caption__media { + display: block; + min-width: 100%; + max-width: 100%; + height: auto; +} + +.caption__overlay { + height: 20px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 20px 0 30px 0; + color: white; + transform: translateY(-100%); + transition: transform .35s ease-out; + background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.85)), color-stop(100%, transparent)); + background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%); + background: -o-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%); + background: -ms-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%); +} + +.caption:hover .caption__overlay { + transform: translateY(0); +} + +.caption h5 { + position: relative; + width: auto; + display: inline-block; + margin: 0 auto 10px auto; + font-size: 20px; + font-family: "adobe-garamond-pro", serif; + font-weight: normal; + font-style: italic; + padding: 2px 20px; + width: 100%; + text-align: center; +} + +.bordered-picture .caption__overlay { + margin-left: 11.5%; + margin-right: 11.5%; +} + +.center, .center-align { + text-align: center; +} + + +.share, .author { + text-align: center; + height: auto; + position: relative; + bottom: 0; + padding: 0 0 10px 0; + font-family: 'crimson', serif; +} + + +ul.icon { + padding: 0; + margin: 10px 0 0 0; +} + +ul.icon li { + padding: 0; + list-style-type: none; + display:inline-block; +} + +ul.icon a { + display: block; + float: left; + background: url(../img/social-share.png) no-repeat; + background-size: 196px 23px; + border: none; +} + +ul.icon li, ul.icon a { + width: 32px; + height: 32px; + text-indent: -999999em; + overflow: hidden; + list-style-type: none; + display: inline-block; +} + +a.twitter { + background-position: 5px 0 !important; +} + +a.facebook { + background-position: -57px 0 !important; +} + +a.pinterest { + background-position: -114px 0 !important; +} + +a.google { + background-position: -172px 0 !important; +} + +.author img.circle { + border-radius: 50%; + width: 80px; +} + +.author { + padding-bottom: 7em; +} + +.author-meta { + color: #ccc; + font-style: italic; + font-size: 19px; +} + +.author h4 { + text-transform: uppercase; +} +.author .desc { + width: 350px; + margin: auto; + padding-bottom: 10px; + font-style: normal; + font-size: 14px; + line-height: normal; + color: #333; +}