blockquote style added

assets/css/reftag.css

@@ -1,13 +1,14 @@
-span.rnav {
+nav.big span.rnav {
     display: inline-block;
     padding: 10px;
     font-size: 2rem;
     border: 5px solid;
-    margin: 20px;
+    margin: 10px;
+    margin-left: 20px;
     cursor: pointer;
 }
 
-span.rnav.tagged {
+nav.big span.rnav.tagged {
     display: inline-block;
     background-color: var(--fg);
     color: black;
@@ -15,10 +16,91 @@ span.rnav.tagged {
     border: 5px solid;
     opacity: 1;
     padding: 15px;
-    margin: 15px;
+    margin: 5px;
+    margin-left: 15px;
+}
+
+nav.big {
+    margin-bottom: -10px;
 }
 
 section.ritem {
     margin-left: 20px;
     font-size: 1.3rem;
-}
+}
+
+nav.second span.rnav {
+    display: inline-block;
+    padding: 5px;
+    font-size: 1.3rem;
+    border: 5px solid;
+    margin-left: 20px;
+    margin-right: 0px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+nav.second span.rnav.tagged {
+    display: inline-block;
+    background-color: var(--fg);
+    color: black;
+    mix-blend-mode:lighten;
+    border: 5px solid;
+    opacity: 1;
+    padding: 10px;
+    margin-left: 15px;
+    margin-right: -5px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+span.rnav {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+a {
+        color: inherit;
+}
+
+section.ritem blockquote {
+    border-left: 5px solid;
+    padding-left: 10px;
+    margin-left: 0px;
+    margin-top: 10px;
+    font-weight: 200;
+    font-size: 1rem;
+}
+
+section.refresult a:after {
+    font-family: byl-iconfont;
+    font-size-adjust: 0.5;
+    content: "\e9cb";
+    padding-left: 5px;
+}
+
+section.refresult {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 30px;
+}
+
+section.ritem {
+    margin-top: 20px;
+}
+
+main.ref-result-page {
+    margin: 0px;
+    padding: 0px;
+}
+
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  main.ref-result-page {
+    padding-left: 20vw;
+    padding-right: 20vw;
+  }
+}
+

assets/js/ed.brz9.js

@@ -136,30 +136,27 @@ let vm = new Vue({
       isFresh: true,
       tags: {
         arts: { isTrue: false },
-        tech: { name: "", isTrue: false },
-        css: { name: "CSS", isTrue: false },
-        code: { name: "Code", isTrue: false },
-        typo: { name: "Typographie", isTrue: false },
-        selfhost: { name: "Self-hosting", isTrue: false },
-        music: { name: "", isTrue: false },
-        xenharm: { name: "", isTrue: false },
-        compo: { name: "", isTrue: false },
-        selfhelp: { name: "", isTrue: false },
-        economy: { name: "", isTrue: false },
-        muscu: { name: "", isTrue: false },
-        ai: { name: "", isTrue: false },
-        golang: { name: "", isTrue: false },
-        python: { name: "", isTrue: false },
-        linux: { name: "", isTrue: false },
-        foss: { name: "", isTrue: false },
-        jardin: { name: "", isTrue: false },
-        health: { name: "", isTrue: false },
-        general: { name: "", isTrue: false },
-        photo: { name: "", isTrue: false },
-        cinema: { name: "", isTrue: false },
-        wood: { name: "", isTrue: false },
-        afk: { name: "", isTrue: false },
-        design: { name: "", isTrue: false}
+        tech: { isTrue: false },
+        afk: { isTrue: false },
+        science: { isTrue: false },
+
+        zet: { isTrue: false },
+
+        cinema: { isTrue: false },
+
+        music: { isTrue: false },
+        compo: { isTrue: false },
+        writing: { isTrue: false },
+
+        creativity: { isTrue: false },
+
+        selfhost: { isTrue: false },
+        web: { isTrue: false },
+        privacy: { isTrue: false },
+
+        mental: { isTrue: false },
+
+        general: { isTrue: false }
       } 
     }
   }

ressources/index.html

@@ -12,21 +12,54 @@
 
 
 
-<main id="root">
+<main id="root" class="ref-result-page">
 
 <nav class="big">
     <rnav v-bind:tag="tags.arts">Arts</rnav>
     <rnav v-bind:tag="tags.tech">Tech</rnav>
+    <rnav v-bind:tag="tags.afk">AFK</rnav>
+    <rnav v-bind:tag="tags.science">Science</rnav>
 </nav>
 <nav class="second">
     <rnav v-bind:tag="tags.selfhost">Auto-hébergement</rnav>
-    <rnav v-bind:tag="tags.css">CSS</rnav>
+    <rnav v-bind:tag="tags.music">Musique</rnav>
+    <rnav v-bind:tag="tags.creativity">Créativité</rnav>
+    <rnav v-bind:tag="tags.mental">Santée Mentale</rnav>
+    <rnav v-bind:tag="tags.web">Web</rnav>
+    <rnav v-bind:tag="tags.privacy">Données Personnelles</rnav>
+    <rnav v-bind:tag="tags.zet">Esprit Critique</rnav>
+    <rnav v-bind:tag="tags.music">Musique</rnav>
+    <rnav v-bind:tag="tags.music">Musique</rnav>
+    <rnav v-bind:tag="tags.music">Musique</rnav>
+
 </nav>
 
+<section class="refresult">
 
     <ritem v-bind:tags="[tags.code, tags.css]" v-bind:fresh="isFresh" ref="ritems">CSS Reffs</ritem>
 
     <ritem v-bind:tags="[tags.arts, tags.cinema]" v-bind:fresh="isFresh" ref="ritems">Idées sur le cinéma</ritem>
+
+    <ritem v-bind:tags="[tags.arts, tags.cinema]" v-bind:fresh="isFresh" ref="ritems">QI</ritem>
+
+    <ritem v-bind:tags="[tags.tech, tags.web, tags.privacy]" v-bind:fresh="isFresh" ref="ritems">Le problème avec les CDN</ritem>
+
+    <ritem v-bind:tags="[
+        tags.arts, 
+        tags.cinema, 
+        tags.music,
+        tags.creativity,
+        tags.tech
+    ]" v-bind:fresh="isFresh" ref="ritems">
+    
+        <a href="">Everything is a Remix</a> 
+        <blockquote>
+            Une super série en trois parties qui parle aussi bien de cinéma, de musique que de technologie.
+        </blockquote>
+
+    </ritem>
+</section>
+
 </main>