general css issues fixed and implemented new styles

src/_data/services.js

@@ -3,36 +3,36 @@ module.exports = [
     title: 'Customer Development',
     details:
       'Let me help you understand prospective customers and their needs that you may be able to satisfy. You cannot validate your assumptions on your own, I’ll take you through a challenging process where we talk with customers to discover if your assumptions are true.',
-    icon: 'bx-user-voice.svg',
+    icon: 'bx-users.svg',
   },
   {
     title: 'Hyper-convenient Design Thinking',
     details:
       'I like to remove things that create friction and distraction and this typically means a shorter route to a solution. Less is often more. Whilst I’m not a graphic designer I do think deeply about the lack of attention span people have when they’re confronted with new products or steps within those products.',
-    icon: 'bx-brain.svg',
+    icon: 'bx-lighting-bolt.svg',
   },
   {
     title: 'Marketplace Research',
     details:
       'Rarely is a marketplace as simple as supply and demand. And whilst the internet empowers us to remove middlemen there are always other stakeholders to consider. I can help you figure out the wider ecosystem that your product or marketplace operates in, and if, and how you could fuel adoption.',
-    icon: 'bx-line-chart.svg',
+    icon: 'bx-shopping.svg',
   },
   {
     title: 'Product Architecture',
     details:
       'The requirements are clear but there are many ways for the features and components of your product to fit into the overall system and business model. I take a user-centred approach to map the functions and features you require, to the form of your product.',
-    icon: 'bxl-codepen.svg',
+    icon: 'bx-click.svg',
   },
   {
     title: 'Crowdfunding',
     details:
       'There’s nowhere to hide if you launch a crowdfunding campaign unprepared. The eager and eagled-eyed investors will pick apart every word, picture and number in your materials. I’ve had previous success with equity crowdfunding and I can help you get your ducks in a row.',
-    icon: 'bx-coin.svg',
+    icon: 'bx-cash.svg',
   },
   {
     title: 'Pitch Deck Development',
     details:
       'You have a blank canvas to communicate your ideas but you’re struggling to connect the creative side of your brain with the logical side. I can distill your vision and convert your messaging & content into a compelling and flowing narrative.',
-    icon: 'bx-slideshow.svg',
+    icon: 'bx-presentation.svg',
   },
 ];

src/_includes/components/articleList.njk

@@ -1,31 +1,27 @@
 {%- for article in articleList -%}
-	<div class="article-width flex flex-col items-start">
-		<div class="flex items-center justify-center">
-			<img class="w-3" src="/images/icons/bxs-pencil.svg" alt="link"/>
-			<span
-            class="py-1 px-2 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest"
-          >
-				{{ article.date | displayDate }}
-			</span>
-		</div>
-		<h2
-          class="sm:text-2xl text-xl title-font font-medium text-white mt-1 mb-4"
-        >
-			<a href="{{ article.url }}">
-				{{ article.data.title }}
-			</a>
-		</h2>
-		<p class="leading-relaxed mb-5">
-			{{ article.data.banner.description }}
-		</p>
-		<div class="flex items-center flex-wrap mb-5 mt-auto w-full">
-			{% for tag in article.data.tags | displayTags %}
-				<a href="/tags/{{tag}}"
-            class="tag"
-          >
-					{{ tag }}
-				</a>
-			{% endfor %}
-		</div>
-	</div>
+    <div class="article-width flex flex-col items-start mb-9"  style="z-index:1">
+        <div class="flex items-center justify-center">
+            <span class="py-1 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">
+                {{ article.date | displayDate }}
+            </span>
+        </div>
+        <h2 class="sm:text-2xl text-xl title-font font-medium text-white mt-1 mb-4">
+            <a href="{{ article.url }}">
+                {{ article.data.title }}
+            </a>
+        </h2>
+        <p class="leading-relaxed mb-2">
+            {{ article.data.banner.description }}
+        </p>
+        <a class="pb-5 text-mygray-300 text-opacity-75 text-xs font-medium tracking-widest" href="{{article.url}}">
+                Read more
+            </a>
+        <div class="flex items-center flex-wrap mb-5 mt-auto w-full">
+            {% for tag in article.data.tags | displayTags %}
+                <a href="/tags/{{ tag }}" class="tag">
+                    {{ tag }}
+                </a>
+            {% endfor %}
+        </div>
+    </div>
 {%- endfor -%}

src/_includes/components/noteList.njk

@@ -4,9 +4,9 @@
 			<img class="w-3" src="/images/icons/bx-link.svg" alt="link"/>
 			<a
               href="{{ note.data.url }}" target="_blank"
-            class="py-1 px-2 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest"
+            class="py-1 px-2 text-mygray-300 text-opacity-75 text-xs font-medium tracking-widest"
           >
-				{{ note.data.url | displayUrl }}
+				{{ note.data.showUrl | displayUrl }}
 			</a>
 		</div>
 		<h2