improvement: amelioration des preview

Fixes #4
feat: add angled edges
2020-12-27 19:17:18 +01:00 · 2020-12-27 18:42:33 +01:00 · 2020-12-27 18:34:45 +01:00 · 2020-12-27 18:23:13 +01:00 · 2020-12-27 17:42:46 +01:00 · 2020-12-27 17:42:26 +01:00
11 changed files with 231 additions and 62 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1271,9 +1271,9 @@
      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
    },
    "get-intrinsic": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.1.tgz",
-      "integrity": "sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
+      "integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
      "requires": {
        "function-bind": "^1.1.1",
        "has": "^1.0.3",
@ -1752,9 +1752,9 @@
      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
    },
    "is-core-module": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
-      "integrity": "sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
      "requires": {
        "has": "^1.0.3"
      }
@ -2360,6 +2360,14 @@
            "which": "^2.0.1"
          }
        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
        "node-gyp": {
          "version": "7.1.2",
          "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz",
@ -2394,9 +2402,12 @@
          }
        },
        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
        },
        "supports-color": {
          "version": "2.0.0",
@ -2993,11 +3004,11 @@
      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
    },
    "resolve": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
-      "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
      "requires": {
-        "is-core-module": "^2.0.0",
+        "is-core-module": "^2.1.0",
        "path-parse": "^1.0.6"
      }
    },
@ -3142,9 +3153,9 @@
          }
        },
        "y18n": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+          "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
        },
        "yargs": {
          "version": "13.3.2",
@ -3398,9 +3409,9 @@
      }
    },
    "spdx-license-ids": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz",
-      "integrity": "sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ=="
    },
    "split": {
      "version": "1.0.1",
--- a/src/scss/_angled-edges.scss
+++ b/src/scss/_angled-edges.scss
@ -0,0 +1,143 @@
+//-------------------------------------------------------------------------------------
+// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
+// Copyright 2017 Joseph Fusco
+// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
+//-------------------------------------------------------------------------------------
+
+/// Replace `$search` with `$replace` in `$string`.
+///
+/// @author Hugo Giraudel
+/// @link   http://www.sassmeister.com/gist/1b4f2da5527830088e4d
+///
+/// @param  {String}  $string - Initial string
+/// @param  {String}  $search - Substring to replace
+/// @param  {String}  $replace ('') - New value
+/// @return {String}  Updated string
+///
+@function ae-str-replace($string, $search, $replace: '') {
+	$index: str-index($string, $search);
+
+	@if $index {
+		@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+	}
+
+	@return $string;
+}
+
+/// Encode SVG to use as background.
+///
+/// @param  {String}  $string
+/// @return {String}  Encoded svg data
+///
+@function ae-svg-encode($string){
+	$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+	$result: ae-str-replace($result, '%', '%25');
+	$result: ae-str-replace($result, '"', '\'');
+	$result: ae-str-replace($result, '<', '%3C');
+	$result: ae-str-replace($result, '>', '%3E');
+
+	@return 'data:image/svg+xml,' + $result;
+}
+
+/// Outputs pseudo content for main mixin.
+///
+/// @author Joseph Fusco
+///
+/// @param  {String}  $location
+/// @param  {Number}  $height
+/// @output psuedo content
+///
+@mixin ae-pseudo($wedge, $height, $width) {
+	background-image: url($wedge);
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
+	@if ($width == null) {
+		background-size: 100% 100%;
+	}
+
+	content: '';
+	height: $height * 1px;
+	left: 0;
+	position: absolute;
+	right: 0;
+	width: 100%;
+	z-index: 1;
+}
+
+/// Attatches an svg wedge shape to an element.
+///
+/// @author Joseph Fusco
+///
+/// @param  {String}  $location   - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
+/// @param  {String}  $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
+/// @param  {Color}   $fill
+/// @param  {Number}  $height
+/// @param  {Number}  $width
+/// @output '::before' and/or '::after' with svg background image
+///
+@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {
+
+	position: relative;
+
+	$points: (
+		'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
+		'upper right': '0,#{$height} #{$width},#{$height} 0,0',
+		'lower left': '0,0 #{$width},#{$height} #{$width},0',
+		'lower right': '0,0 #{$width},0 0,#{$height}'
+	);
+
+	// full width wedge
+	@if ($width == null) {
+		$points: (
+			'upper left': '0,#{$height} 100,#{$height} 100,0',
+			'upper right': '0,#{$height} 100,#{$height} 0,0',
+			'lower left': '0,0 100,#{$height} 100,0',
+			'lower right': '0,0 100,0 0,#{$height}'
+		);
+	}
+
+	// ensure $fill color is using rgb()
+	$fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';
+
+	// capture alpha component of $fill to use with fill-opacity
+	$fill-alpha: alpha($fill);
+
+	$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
+
+	// full width wedge
+	@if ($width == null) {
+		$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
+	}
+
+	$encoded-wedge: ae-svg-encode($wedge);
+
+	@if ($location == 'inside top') {
+		&::before {
+			@include ae-pseudo($encoded-wedge, $height, $width);
+			top: 0;
+		}
+	} @else if ($location == 'outside top') {
+		&::before {
+			@include ae-pseudo($encoded-wedge, $height, $width);
+			top: -$height * 1px;
+		}
+	} @else if ($location == 'inside bottom') {
+		&::after {
+			@include ae-pseudo($encoded-wedge, $height, $width);
+			bottom: 0;
+		}
+	} @else if ($location == 'outside bottom') {
+		&::after {
+			@include ae-pseudo($encoded-wedge, $height, $width);
+			bottom: -$height * 1px;
+		}
+	} @else {
+		@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
+	}
+
+	@if (map-has-key($points, $hypotenuse) == false) {
+		@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
+	}
+}
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@ -12,23 +12,10 @@
 }

@mixin container-big() {
-    padding-left: $lineheight/2;
-    padding-right: $lineheight/2;
-
-    @include sm() {
-        padding-left: $lineheight;
-        padding-right: $lineheight;
-    }
-
-    @include lg() {
-        padding-left: $lineheight*2;
-        padding-right: $lineheight*2;
-    }
-
-    @include xxl() {
-        padding-left: $lineheight*3;
-        padding-right: $lineheight*3;
-    }
+    padding-left: $lineheight;
+    padding-right: $lineheight;
+    max-width: 1600px;
+    margin:auto;
 }

 .no-pills {
@ -46,10 +33,10 @@
 #page-header {
    background: $color-turquoise url('img/background.png') center bottom repeat-x;
    border-top: 6px solid $color-dark2;
-    @include container-big();
    padding-bottom:3rem;

    .header-collumns {
+      @include container-big();
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
@ -225,13 +212,14 @@ body {
 }

 footer {
+    @include angled-edge('outside top', 'upper left', $color-footer-back, 32);
    color: $color-footer-text;
-    margin-top:1.5rem;
-    @include container-big();
+    padding-top:1.5rem;
    font-size: 0.8rem!important;
    padding-bottom:1.5rem;

    .footer-collumns {
+      @include container-big();
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
--- a/src/scss/components/_previews.scss
+++ b/src/scss/components/_previews.scss
@ -11,7 +11,7 @@ $preview-height: 8*$lineheight;
  grid-template-rows: auto;
  grid-gap: $lineheight;
  padding-bottom: $lineheight;
-  
+
  @include xl() {
    grid-template-columns: 1fr 1fr;
  }
@ -58,7 +58,6 @@ $preview-height: 8*$lineheight;
  height: $preview-height;
  font-size:0.9rem;
 	line-height: $lineheight !important;
-  padding:0.2em;
  text-align:justify;
  background-color:rgba(0,0,0,0.00);
  color:rgba(0,0,0,0.4);
@ -75,9 +74,9 @@ $preview-height: 8*$lineheight;
    top: 0;
    left: 0;
    position: absolute;
-    padding: $lineheight_half;
+    padding-top: $lineheight_half;
    backdrop-filter: none;
-    transition: background 0.3s;
+    transition: background-color 0.3s;

    h1, h2, h3, h4, h5, h6 {
      color: $color-light;
@ -100,9 +99,10 @@ $preview-height: 8*$lineheight;
      backdrop-filter: blur(2px);
      background-color:rgba(0,0,0,0.4);

-      .preview-metadata {
+      .metadata-pills {
        opacity: .9;
-        transition: opacity .5s;
+        transition: opacity .5s, height .5s;
+        height:135px;
      }
    }
  }
@ -141,13 +141,26 @@ $preview-height: 8*$lineheight;
 }

 .preview-metadata {
-	opacity: 0;
-	transition: opacity .3s;
  color: $color-light;
+  height:165px;
+  overflow: hidden;
+
+  .metadata-pills {
+    height:165px;
+  	opacity: 0;
+    transition: opacity .3s, height .3s;
+    display:flex;
+    justify-content:space-between;
+    padding-left: $lineheight/2;
+    padding-right: $lineheight/2;
+  }
 }

 .comment-text {
-  margin-top:0.8em;
+  @include angled-edge('outside top', 'upper left', $color-violet, 16);
+  color: $color-light;
+  background-color:$color-violet;
+  text-align: center;
 }

 .card-preview time {
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -12,6 +12,8 @@
    CC BY-SA Kazhnuz
 ------------------------------------------------- */

+@import 'angled-edges';
+
@import 'palette';

@import 'definitions';
--- a/src/static/crea-category.html
+++ b/src/static/crea-category.html
@ -17,7 +17,7 @@

    <!--=include includes/_header.html -->

-<div class="container-preview">
+<div class="container-blog">
  <main class="mainpane">
    <!--=include includes/components/_breadcrumb.html -->

--- a/src/static/crea.html
+++ b/src/static/crea.html
@ -17,7 +17,7 @@

    <!--=include includes/_header.html -->

-<div class="container-preview">
+<div class="container-blog">
  <main class="mainpane">
    <!--=include includes/components/_breadcrumb.html -->

--- a/src/static/includes/components/_preview-image.html
+++ b/src/static/includes/components/_preview-image.html
@ -5,9 +5,11 @@
        <div class="preview-overlay">
          <h1 class="card-header">Exemple titre</h1>
          <div class="preview-metadata">
-            <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
-            <div class="align-left"><span class="chip chip-primary">video</span></div>
-            <div class="align-center comment-text">3 commentaires</div>
+            <div class="metadata-pills">
+              <div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
+              <div class="align-left"><span class="chip chip-primary">video</span></div>
+            </div>
+            <div class="comment-text">3 commentaires</div>
          </div>
        </div>
      </div>
--- a/src/static/includes/components/_preview-text.html
+++ b/src/static/includes/components/_preview-text.html
@ -5,9 +5,11 @@
        <div class="preview-overlay">
          <h1 class="card-header">Exemple titre</h1>
          <div class="preview-metadata">
-            <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
-            <div class="align-left"><span class="chip chip-primary">video</span></div>
-            <div class="align-center comment-text">3 commentaires</div>
+            <div class="metadata-pills">
+              <div><span class="chip chip-primary">video</span></div>
+              <div><time><span class="chip chip-primary">27/02/2017</span></time></div>
+            </div>
+            <div class="comment-text">3 commentaires</div>
          </div>
        </div>
      </div>
--- a/src/static/includes/components/_sidebar.html
+++ b/src/static/includes/components/_sidebar.html
@ -18,9 +18,6 @@
      <a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
      <a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
      <a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
-      <div class="menu-divider">FICHES</div>
-      <a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
-      <a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
      <div class="menu-divider">BLOG</div>
      <a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
      <a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
@ -40,3 +37,14 @@
      <a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
    </div>
  </div>
+
+  <div class="card card-primary">
+      <div class="card-header"><i class="fa fa-link"></i> Liens</div>
+      <div class="card-menu">
+        <a href="#" class="menu-element">Kobold City</a>
+        <a href="#" class="menu-element">Mes JDR</a>
+        <a href="#" class="menu-element">Mes Univers</a>
+        <a href="#" class="menu-element">Mon Gitea</a>
+        <a href="#" class="menu-element">Vault</a>
+      </div>
+    </div>
--- a/src/static/index.html
+++ b/src/static/index.html
@ -50,9 +50,9 @@

  </main>
 	<section class="sidebar">
-		<div class="card card-primary">
-		  <div class="card-header">Cémwha</div>
-		  <p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
+		<div class="card card-info">
+		  <div class="card-header"><i class="fa fa-info"></i> Cémwha</div>
+		  <p class="mwarea"><img src="/img/avatar.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
 		  <table style="width:100%" class="table-primary">
 		      <tr>
 		        <th>PSEUDO</th>
Author	SHA1	Message	Date
Kazhnuz	95dc3b05fe	improvement: amelioration des preview Fixes #4	2020-12-27 19:17:18 +01:00
Kazhnuz	1c94a221db	feat: add angled edges Fixes #8	2020-12-27 18:42:33 +01:00
Kazhnuz	76fa87095c	improvement: amelioration style info perso Fixes #9	2020-12-27 18:34:45 +01:00
Kazhnuz	3e0cbb6370	improvement: replace universe category by a link list Fixes #5	2020-12-27 18:23:13 +01:00
Kazhnuz	94d5f977ff	improvement: always use the "blog" structures Fixes #2	2020-12-27 17:42:46 +01:00
Kazhnuz	ca2cca3e1b	improvement: limit max size Fixes #1	2020-12-27 17:42:26 +01:00