display leaf icon for menu items and projects when DTL is enable

close #103

src/assets/css/src/0.2.variables.css

@@ -42,6 +42,9 @@
   --color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
   --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
   --color-brand: var(--color-brand-100); /* Brand */
+  --color-dtl-15: hsla(127, 47%, 58%, 0.15);
+  --color-dtl-100: hsla(157, 100%, 29%, 1);
+  --color-dtl: var(--color-dtl-100);
   --color-background: var(--color-white);
   --color-text: var(--color-black);
   --color-focus-ring: var(--color-primary-50);

src/assets/css/src/2.blocks.design-to-light.css

@@ -1,5 +1,26 @@
 /* DESIGN TO LIGHT BLOCK */
 
+/* Menu */
+#menu [data-dtl="true"]::after,
+.project-item[data-dtl="true"] h3::after {
+  --icon-color: var(--color-dtl);
+  --icon-size: 1rem;
+  --icon: var(--icon-leaf);
+  content: "";
+  display: inline-block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background: var(--icon-color);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size);
+  mask-image: var(--icon, var(--icon-circle));
+  margin-left: var(--space-8);
+}
+.project-item [data-dtl="true"]::after {
+  --icon-size: 1.25rem;
+}
+
 /* Button */
 #dtl-btn {
   position: fixed;

src/assets/css/src/2.blocks.project.css

@@ -11,6 +11,8 @@
   min-width: 20rem;
 }
 .project-item h3 {
+  display: flex;
+  align-items: center;
   font-family: var(--font-serif);
   font-size: var(--text-lg);
   margin-bottom: var(--space-8);

src/components/Menu.vue

@@ -71,6 +71,7 @@
                   : project.uri
               "
               :class="hasUnreadNotification(project) ? 'new' : undefined"
+              :data-dtl="project.isDTLEnabled ? 'true' : undefined"
               @click="collapse()"
               >{{ project.title }}</router-link
             >
@@ -344,6 +345,10 @@ button[aria-controls="menu"][aria-expanded="false"]
   margin-left: auto;
 }
 
+#menu a {
+  display: flex;
+  align-items: center;
+}
 #menu li a::before {
   content: "";
   position: absolute;