From 75e0c6b39f1e5c35a4dad6f7b58e356fdbf468bf Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Thu, 17 Oct 2019 15:23:55 +0200 Subject: [PATCH] feat: add new preview elements --- index.html | 112 +++++++++++++++--------------- preview.html | 157 +++++++++++++++++++++--------------------- scss/_commons.scss | 165 ++++++++++++++++++++++++--------------------- 3 files changed, 218 insertions(+), 216 deletions(-) diff --git a/index.html b/index.html index 42511d7..fddae2c 100644 --- a/index.html +++ b/index.html @@ -123,71 +123,71 @@ In id suscipit elit. -
+
-
- -
+ -
-
+
-

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

-

Text Exemple

-
- - +

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ -
- -
-
- -
-

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

-

Text Exemple

-
- - -
-
-
-
+
-

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

-

Text Exemple

-
- - +

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ + + +
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+
-
diff --git a/preview.html b/preview.html index 92b5afe..7a273ec 100644 --- a/preview.html +++ b/preview.html @@ -120,92 +120,85 @@
-
- -
+
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ +
-
- -
+
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ +
-
-
- -
-

Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.

+
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ +
-

Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.

-

#Inktober2017 - Day 27. Deep

-
- - -
-
- -
-
- -
-

Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.

- -

Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.

-

#Inktober2017 - Day 27. Deep

-
- - -
-
+
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ +
-
-
- -
-

Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.

- -

Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.

-

#Inktober2017 - Day 27. Deep

-
- - -
-
- +
+ +
+

Proin bibendum felis sit amet nisl iaculis, vel blandit purus dictum. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. Nulla luctus est nec arcu volutpat blandit. Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.

+
+

Exemple titre

+
+
+
video
+
3 commentaires
+
+
+
+ +
diff --git a/scss/_commons.scss b/scss/_commons.scss index 4b77fd1..223230d 100644 --- a/scss/_commons.scss +++ b/scss/_commons.scss @@ -8,16 +8,18 @@ /* ------------------ PREVIEWS ------------------- */ +$preview-height: 8*1.5rem; + .previews-section { - display: flex; - align-content: flex-start; - flex-wrap: wrap; + display: grid; + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + grid-gap: 1.5rem; } .preview-container { - margin-bottom:1em; - padding:0.4em; - width:100% + width:100%; } @media(max-width:767px){} @@ -39,8 +41,8 @@ } .card-preview { - @include border-radius(); - width:100%; + padding:0; + width:100%; margin:auto; box-shadow: $large-shadow, $inset-shadow; } @@ -50,95 +52,100 @@ } .preview-item { - - height:200px; - overflow:hidden; - font-size:0.9em; - line-height: 1.5em !important; + height: $preview-height; + font-size:0.9rem; + line-height: 1.5rem !important; padding:0.2em; text-align:justify; - background-color:rgba(0,0,0,0.05); + background-color:rgba(0,0,0,0.00); color:rgba(0,0,0,0.4); position: relative; - display: flex; -ms-flex-align: center !important; align-items: center !important; justify-content: center; + + .preview-overlay { + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + padding: 0.75rem; + backdrop-filter: none; + transition: background 0.3s; + + h1, h2, h3, h4, h5, h6 { + color: $color-light; + text-shadow: 1px 1px 0px rgba(0,0,0,0.7); + font-size: 1rem; + line-height: 1.5rem; + font-weight:200; + } + + .card-header { + font-family: Work Sans; + font-size: 1rem; + background-color: $color-primary; + @include card-header(0.75rem); + font-weight:200; + } + } + + &:hover { + .preview-overlay { + backdrop-filter: blur(2px); + background-color:rgba(0,0,0,0.4); + + .preview-metadata { + opacity: .9; + transition: opacity .5s; + } + } + } } .preview-content { - max-height:200px; + max-height: $preview-height; + overflow:hidden; + + h1, h2, h3, h4, h5, h6 { + margin-bottom:0px; + max-width:100%; + display:none; + } + + & > p { + width:100%; + margin:auto; + + & > img { + max-width:100%; + height:auto; + vertical-align:middle; + margin:auto; + text-align:center; + } + + &.p-img { + text-align:center; + margin:auto; + padding:auto; + display: block; + width:100%; + } + } } -.preview-content > p { - width:100%; - margin:auto; -} - -.preview-content > p.p-img { - text-align:center; - margin:auto; - padding:auto; - display: block; - width:100%; -} - -.preview-content > p > img { - max-width:100%; - height:auto; - vertical-align:middle; - margin:auto; - text-align:center; -} - -.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 { - margin-bottom:0px; - max-width:100%; - display:none; -} - -.preview-item h1 { - display:none; -} - -.preview-overlay { - height: 100%; - width: 100%; +.preview-metadata { opacity: 0; - top: 0; - left: 0; - position: absolute; - padding: 0; - transition: opacity .5s; - color: $color-light; - background-color: rgba(0,0,0,0.5); - text-shadow: 1px 1px 0px rgba(0,0,0,0.7); - backdrop-filter: none; -} - -.preview-overlay h1 { - max-width:100%; - padding-top:0.3em; - margin:auto; - margin-bottom:0px; - text-align:center; - display:block; - font-size:2em; + transition: opacity .3s; color: $color-light; -} - -.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 { - color: $color-light; text-shadow: 1px 1px 0px rgba(0,0,0,0.7); } -.preview-item:hover .preview-overlay { - opacity: .9; - transition: opacity .5s; - backdrop-filter: blur(2px); -} + .comment-text { margin-top:0.8em; @@ -149,6 +156,8 @@ display:block; } +// Author area + .author-area { display:flex;