public/font/icon.svg

@@ -34,6 +34,8 @@
 
 <glyph glyph-name="moon" unicode="&#xf186;" d="M704 123q-30-5-61-5-102 0-188 50t-137 137-50 188q0 107 58 199-112-33-183-128t-72-214q0-72 29-139t76-113 114-77 139-28q80 0 152 34t123 96z m114 47q-53-113-159-181t-230-68q-87 0-167 34t-136 92-92 137-34 166q0 85 32 163t87 135 132 92 161 38q25 1 34-22 11-23-8-40-48-43-73-101t-26-122q0-83 41-152t111-111 152-41q66 0 127 29 23 10 40-7 8-8 10-19t-2-22z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="share" unicode="&#xf1e0;" d="M679 279q74 0 126-53t52-126-52-126-126-53-127 53-52 126q0 7 1 19l-201 100q-51-48-121-48-75 0-127 53t-52 126 52 126 127 53q70 0 121-48l201 100q-1 12-1 19 0 74 52 126t127 53 126-53 52-126-52-126-126-53q-71 0-122 48l-201-100q1-12 1-19t-1-19l201-100q51 48 122 48z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
 
 <glyph glyph-name="blind" unicode="&#xf29d;" d="M204 677q-35 0-61 25t-26 62q0 35 26 61t61 25 61-25 26-61q0-37-26-62t-61-25z m308-359q0-28-17-37t-35-4-27 19l-205 244q-4 7-8 9t-6 1l-1-2q-4-4 2-12l68-77 1-198-90-255q-38-107-52-130-8-15-15-18-28-15-58-1-16 7-23 24t-5 32q1 9 110 345l3 232-48-91 20-124q2-14-1-24t-8-15-10-9-10-4l-4-1q-10-2-19 1t-13 9-8 13-4 10-2 6l-25 167 118 212q12 19 63 19 41 0 59-22l237-291q4-3 8-9l1-2 0-1q4-7 4-16z m-225-83q24-64 49-126t39-94l13-31q21-51 24-69 6-39-20-54-20-13-37-9t-28 12-17 19h0q-4 9-5 14l-69 196z m460-331q17-27 17-32 0-3-2-4-5-2-8 1t-8 14-9 17q-64 96-236 369 1 0 4 1t3 2l2 1q6 5 6 10z" horiz-adv-x="785.7" />

sass/colors.scss

@@ -52,6 +52,23 @@ $pagination-hover-color: rgb(115, 151, 186);
     --box-shadow-color: #{rgba($nord4, 0.35)};
 
     --border-color: #{$nord4};
+
+    --nord0: #{$nord0};
+    --nord1: #{$nord1};
+    --nord2: #{$nord2};
+    --nord3: #{$nord3};
+    --nord4: #{$nord4};
+    --nord5: #{$nord5};
+    --nord6: #{$nord6};
+    --nord7: #{$nord7};
+    --nord8: #{$nord8};
+    --nord9: #{$nord9};
+    --nord10: #{$nord10};
+    --nord11: #{$nord11};
+    --nord12: #{$nord12};
+    --nord13: #{$nord13};
+    --nord14: #{$nord14};
+    --nord15: #{$nord15};
 }
 
 [data-theme="dark"] {

sass/composants.scss

@@ -0,0 +1,13 @@
+.composants {
+  .couleur {
+    margin-bottom: 1rem;
+    text-align: center;
+
+    border: 1px solid var(--input-active-color);
+    box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
+
+    div {
+      height: 56px;
+    }
+  } 
+}

sass/icons.scss

@@ -46,6 +46,7 @@
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-sun:before { content: '\f185'; } /* '' */
 .icon-moon:before { content: '\f186'; } /* '' */
+.icon-share:before { content: '\f1e0'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
 .icon-blind:before { content: '\f29d'; } /* '' */
 

sass/index.scss

@@ -45,3 +45,4 @@
 @import './ajouter-un-album';
 @import './ma-collection';
 @import './ma-collection-details';
+@import './composants';

views/pages/composants.ejs

@@ -1,8 +1,9 @@
-<main class="layout-maxed" id="app">
+<main class="layout-maxed composants" id="app">
     <h1>Les composants</h1>
 
     <ul>
         <li><a href="#titres">Les titres</a></li>
+        <li><a href="#couleurs">Les couleurs</a></li>
         <li><a href="#grilles">Les grilles</a></li>
         <li><a href="#boutons">Les boutons</a></li>
         <li><a href="#formulaires">Les formulaires</a></li>
@@ -24,6 +25,87 @@
     <h5>Titre de niveau 5</h5>
     <h6>Titre de niveau 6</h6>
 
+    <h2 id="couleurs">Les couleurs</h2>
+    <h3>Polar Night</h3>
+    <div class="grid grid-cols-5 gap-5">
+        <div class="couleur">
+            <div style="background-color: var(--nord0);">&nbsp;</div>
+            nord0
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord1);">&nbsp;</div>
+            nord1
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord2);">&nbsp;</div>
+            nord2
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord3);">&nbsp;</div>
+            nord3
+        </div>
+    </div>
+    <h3>Snow Storm</h3>
+    <div class="grid grid-cols-5 gap-5">
+        <div class="couleur">
+            <div style="background-color: var(--nord4);">&nbsp;</div>
+            nord4
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord5);">&nbsp;</div>
+            nord5
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord6);">&nbsp;</div>
+            nord6
+        </div>
+    </div>
+    <h3>Frost</h3>
+    <div class="grid grid-cols-5 gap-5">
+        <div class="couleur">
+            <div style="background-color: var(--nord7);">&nbsp;</div>
+            nord7
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord8);">&nbsp;</div>
+            nord8
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord9);">&nbsp;</div>
+            nord9
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord10);">&nbsp;</div>
+            nord10
+        </div>
+    </div>
+    <h3>Aurora</h3>
+    <div class="grid grid-cols-5 gap-5">
+        <div class="couleur">
+            <div style="background-color: var(--nord11);">&nbsp;</div>
+            nord11
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord12);">&nbsp;</div>
+            nord12
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord13);">&nbsp;</div>
+            nord13
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord14);">&nbsp;</div>
+            nord14
+        </div>
+        <div class="couleur">
+            <div style="background-color: var(--nord15);">&nbsp;</div>
+            nord15
+        </div>
+    </div>
+    <p>
+        Vous pourrez trouver plus d'informations sur le <a href="https://www.nordtheme.com/" target="_blank" rel="noopener noreferrer">site offciel</a> du projet nord.
+    </p>
+
     <h2 id="grilles">Les grilles</h2>
     <p>
         Se référer à la documentation de <a href="https://www.knacss.com/doc.html#grid" target="_blank" rel="noopener noreferrer">Knacss</a>.
@@ -225,13 +307,15 @@
     <i class="icon-link-ext">.icon-link-ext</i>
     <i class="icon-heart">.icon-heart</i>
     <i class="icon-eye">.icon-eye</i>
+    <i class="icon-left-open">.icon-left-open</i>
+    <i class="icon-right-open">.icon-right-open</i>
+    <i class="icon-export">.icon-export</i>
+    <i class="icon-share">.icon-share</i>
     <i class="icon-spin">.icon-spin</i>
     <i class="icon-sun">.icon-sun</i>
     <i class="icon-moon">.icon-moon</i>
     <i class="icon-trash">.icon-trash</i>
     <i class="icon-blind">.icon-blind</i>
-    <i class="icon-left-open">.icon-left-open</i>
-    <i class="icon-right-open">.icon-right-open</i>
 
     <h2 id="listes">Les listes</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 list">