@@ -1,5 +1,3 @@
|
|||||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;400;600&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap");
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
|
|||||||
@@ -1,10 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="space-y-2 m-5">
|
<div class="space-y-2 my-5 group">
|
||||||
<h3 class="text-xl text-slate-800 font-semibold">This is a blog title</h3>
|
<h3 class="text-xl text-slate-800 font-semibold group-hover:text-sky-500">
|
||||||
|
This is a blog title
|
||||||
|
</h3>
|
||||||
<p class="text-slate-700">
|
<p class="text-slate-700">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
|
||||||
esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
|
esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
|
||||||
</p>
|
</p>
|
||||||
<p class="font-semibold">Read more</p>
|
<p class="font-semibold group-hover:text-sky-500">
|
||||||
|
Read more
|
||||||
|
<span class="hidden group-hover:inline"> ->> </span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -15,7 +15,13 @@ const activeNavbar = computed(() => {
|
|||||||
<div class="container px-4 mx-auto max-w-6xl flex justify-between">
|
<div class="container px-4 mx-auto max-w-6xl flex justify-between">
|
||||||
<ul class="flex space-x-8 items-end justify-start">
|
<ul class="flex space-x-8 items-end justify-start">
|
||||||
<li class="align">
|
<li class="align">
|
||||||
<nuxt-link to="/"> Rafkhata </nuxt-link>
|
<nuxt-link
|
||||||
|
class="font-semibold text-xl text-slate-800"
|
||||||
|
:class="{ underline: activeNavbar === '' }"
|
||||||
|
to="/"
|
||||||
|
>
|
||||||
|
RafKhata
|
||||||
|
</nuxt-link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<nuxt-link
|
<nuxt-link
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="group font-semibold antialiased text-slate-800 font-ibmmono">
|
||||||
class="font-semibold antialiased text-slate-800 font-ibmmono hover:underline"
|
|
||||||
>
|
|
||||||
<nuxt-link class="flex items-baseline space-x-3" to="/">
|
<nuxt-link class="flex items-baseline space-x-3" to="/">
|
||||||
<div class="hover:scale-125 transition">
|
<div class="group-hover:scale-125 transition">
|
||||||
<icon name="ant-design:arrow-right-outlined" />
|
<icon name="ant-design:arrow-right-outlined" />
|
||||||
</div>
|
</div>
|
||||||
<h4>How to use vite in your nuxt 3 project a a a riyad</h4>
|
<h4 class="group-hover:underline">
|
||||||
|
How to use vite in your nuxt 3 project a a a riyad
|
||||||
|
</h4>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user