Skip to content

Commit 7853777

Browse files
zlrundefinedzlrundefined
committed
Single project light and dark colors
1 parent daf1d79 commit 7853777

File tree

4 files changed

+79
-64
lines changed

4 files changed

+79
-64
lines changed

‎src/components/project/SingleProjectHeader.vue‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
11
<template>
2-
<!-- Project heading and meta info start -->
3-
<p
4-
class="text-left text-3xl sm:text-4xl font-bold text-gray-600 mt-7 sm:mt-20 mb-7"
5-
>
6-
Kabul Project Management UI
7-
</p>
8-
<div class="flex">
9-
<div class="flex items-center mr-10">
10-
<i data-feather="clock" class="w-4 h-4 text-gray-400"></i>
11-
<span class="ml-2 leading-none text-gray-500">Jul 26, 2021</span>
12-
</div>
13-
<div class="flex items-center">
14-
<i data-feather="tag" class="w-4 h-4 text-gray-400"></i>
15-
<span class="ml-2 leading-none text-gray-500">UI / Frontend</span>
2+
<div>
3+
<!-- Project heading and meta info start -->
4+
<p
5+
class="text-left text-3xl sm:text-4xl font-bold text-primary-dark dark:text-primary-light mt-7 sm:mt-20 mb-7"
6+
>
7+
Kabul Project Management UI
8+
</p>
9+
<div class="flex">
10+
<div class="flex items-center mr-10">
11+
<i
12+
data-feather="clock"
13+
class="w-4 h-4 text-ternary-dark dark:text-ternary-light"
14+
></i>
15+
<span
16+
class="ml-2 leading-none text-primary-dark dark:text-primary-light"
17+
>Jul 26, 2021</span
18+
>
19+
</div>
20+
<div class="flex items-center">
21+
<i
22+
data-feather="tag"
23+
class="w-4 h-4 text-ternary-dark dark:text-ternary-light"
24+
></i>
25+
<span
26+
class="ml-2 leading-none text-primary-dark dark:text-primary-light"
27+
>UI / Frontend</span
28+
>
29+
</div>
1630
</div>
31+
<!-- Project heading and meta info end -->
1732
</div>
18-
<!-- Project heading and meta info end -->
1933
</template>
2034

2135
<script>

‎src/components/project/SingleProjectInfo.vue‎

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,96 +3,95 @@
33
<div class="block sm:flex gap-0 sm:gap-10 mt-14">
44
<div class="w-full sm:w-1/3 text-left">
55
<div class="mb-7">
6-
<p class="text-2xl font-semibold text-gray-600 mb-2">
6+
<p
7+
class="text-2xl font-semibold text-secondary-dark dark:text-secondary-light mb-2"
8+
>
79
About Client
810
</p>
911
<ul class="leading-loose">
10-
<li>
11-
<span class="text-gray-600">Name: </span> Kabul Company
12-
Ltd
12+
<li class="text-ternary-dark dark:text-ternary-light">
13+
<span>Name: </span>
14+
Kabul Company Ltd
1315
</li>
14-
<li>
15-
<span class="text-gray-600">Services: </span> UI Design
16-
& Frontend Development
16+
<li class="text-ternary-dark dark:text-ternary-light">
17+
<span>Services: </span>
18+
UI Design & Frontend Development
1719
</li>
18-
<li>
19-
<span class="text-gray-600">Website: </span>
20+
<li class="text-ternary-dark dark:text-ternary-light">
21+
<span>Website: </span>
2022
<a href="#">https://kabul.com</a>
2123
</li>
22-
<li>
23-
<span class="text-gray-600">Phone: </span> +93 7888 888
24-
88
24+
<li class="text-ternary-dark dark:text-ternary-light">
25+
<span>Phone: </span>
26+
+93 7888 888 88
2527
</li>
2628
</ul>
2729
</div>
2830
<div class="mb-7">
29-
<p class="text-2xl font-semibold text-gray-600 mb-2">
31+
<p
32+
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
33+
>
3034
Objective
3135
</p>
32-
<p>
36+
<p class="text-primary-dark dark:text-ternary-light">
3337
Lorem ipsum dolor sit amet consectetur adipisicing elit.
3438
Optio, natus! Quibusdam enim quod in esse, mollitia
3539
molestias incidunt quas ipsa accusamus veniam, quis odit
3640
cumque vero voluptate, reiciendis amet non!
3741
</p>
3842
</div>
3943
<div class="mb-7">
40-
<p class="text-2xl font-semibold text-gray-600 mb-2">
44+
<p
45+
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
46+
>
4147
Tools & Technologies
4248
</p>
43-
<p>HTML, CSS, JavaScript, Vue.js, TailwindCSS, AdobeXD</p>
49+
<p class="text-primary-dark dark:text-ternary-light">
50+
HTML, CSS, JavaScript, Vue.js, TailwindCSS, AdobeXD
51+
</p>
4452
</div>
4553
<div>
46-
<p class="text-2xl font-semibold text-gray-600 mb-2">
54+
<p
55+
class="text-2xl font-semibold text-ternary-dark dark:text-ternary-light mb-2"
56+
>
4757
Share This
4858
</p>
4959
<div class="flex items-center gap-3 mt-5">
5060
<a
5161
href="#"
52-
class="bg-gray-100 hover:bg-blue-400 hover:text-white p-2 rounded-lg shadow-sm"
53-
><i
54-
data-feather="twitter"
55-
class="w-5 h-5 text-gray-500 hover:text-white"
56-
></i
62+
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
63+
><i data-feather="twitter" class="w-5 h-5"></i
5764
></a>
5865
<a
5966
href="#"
60-
class="bg-gray-100 hover:bg-blue-700 hover:text-white p-2 rounded-lg shadow-sm"
61-
><i
62-
data-feather="facebook"
63-
class="w-5 h-5 text-gray-500 hover:text-white"
64-
></i
67+
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
68+
><i data-feather="facebook" class="w-5 h-5"></i
6569
></a>
6670
<a
6771
href="#"
68-
class="bg-gray-100 hover:bg-red-400 hover:text-white p-2 rounded-lg shadow-sm"
69-
><i
70-
data-feather="instagram"
71-
class="w-5 h-5 text-gray-500 hover:text-white"
72-
></i
72+
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
73+
><i data-feather="instagram" class="w-5 h-5"></i
7374
></a>
7475
<a
7576
href="#"
76-
class="bg-gray-100 hover:bg-blue-500 hover:text-white p-2 rounded-lg shadow-sm"
77-
><i
78-
data-feather="linkedin"
79-
class="w-5 h-5 text-gray-500 hover:text-white"
80-
></i
77+
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
78+
><i data-feather="linkedin" class="w-5 h-5"></i
8179
></a>
8280
<a
8381
href="#"
84-
class="bg-gray-100 hover:bg-red-700 hover:text-white p-2 rounded-lg shadow-sm"
85-
><i
86-
data-feather="youtube"
87-
class="w-5 h-5 text-gray-500 hover:text-white"
88-
></i
82+
class="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
83+
><i data-feather="youtube" class="w-5 h-5"></i
8984
></a>
9085
</div>
9186
</div>
9287
</div>
9388
<div class="w-full sm:w-2/3 text-left mt-10 sm:mt-0">
94-
<p class="text-gray-600 text-2xl font-bold mb-7">Challenge</p>
95-
<p class="mb-5 text-lg text-gray-600">
89+
<p
90+
class="text-primary-dark dark:text-primary-light text-2xl font-bold mb-7"
91+
>
92+
Challenge
93+
</p>
94+
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
9695
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
9796
ipsa, ullam modi esse ea molestiae, non quidem expedita
9897
perspiciatis nihil eligendi maxime eum eos exercitationem.
@@ -102,7 +101,7 @@
102101
provident at autem omnis odio, atque dicta minima alias
103102
voluptatum ullam animi.
104103
</p>
105-
<p class="mb-5 text-lg text-gray-600">
104+
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
106105
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
107106
ipsa, ullam modi esse ea molestiae, non quidem expedita
108107
perspiciatis nihil eligendi maxime eum eos exercitationem.
@@ -112,7 +111,7 @@
112111
provident at autem omnis odio, atque dicta minima alias
113112
voluptatum ullam animi.
114113
</p>
115-
<p class="mb-5 text-lg text-gray-600">
114+
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
116115
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
117116
ipsa, ullam modi esse ea molestiae, non quidem expedita
118117
perspiciatis nihil eligendi maxime eum eos exercitationem.
@@ -122,7 +121,7 @@
122121
provident at autem omnis odio, atque dicta minima alias
123122
voluptatum ullam animi.
124123
</p>
125-
<p class="mb-5 text-lg text-gray-600">
124+
<p class="mb-5 text-lg text-ternary-dark dark:text-ternary-light">
126125
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
127126
ipsa, ullam modi esse ea molestiae, non quidem expedita
128127
perspiciatis nihil eligendi maxime eum eos exercitationem.

‎src/components/project/SingleProjectRelatedProjects.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<template>
22
<!-- Related projects start -->
33
<div class="mt-10 sm:mt-20">
4-
<p class="text-gray-600 text-3xl font-bold mb-10 sm:mb-14">
4+
<p
5+
class="text-primary-dark dark:text-primary-light text-3xl font-bold mb-10 sm:mb-14"
6+
>
57
Related Projects
68
</p>
79
<div class="grid grid-cols-1 sm:grid-cols-4 gap-10">

‎src/views/SingleProject.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<SingleProjectInfo />
1313
<!-- Projects end -->
1414

15-
<hr class="mt-10 sm:mt-20" />
15+
<hr class="mt-10 sm:mt-20 text-ternary-dark dark:text-ternary-dark" />
1616

1717
<!-- Projects start -->
1818
<SingleProjectRelatedProjects />

0 commit comments

Comments
 (0)