Skip to content

Commit 27bbd55

Browse files
massacodesmassacodes
committed
Add hover styles
1 parent ed1ff69 commit 27bbd55

File tree

2 files changed

+102
-74
lines changed

2 files changed

+102
-74
lines changed

‎public/index.html‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -120,12 +120,12 @@
120120
</div>
121121
</button>
122122
<button
123-
class="hidden items-center justify-center rounded-md border-[1px] border-gray bg-[#161616] text-lg tracking-wide xl:ml-[36rem] xl:mr-4 xl:flex xl:px-4 xl:py-1.5"
123+
class="hidden items-center justify-center rounded-md border-[1px] border-gray bg-[#161616] text-lg tracking-wide hover:bg-white hover:text-black xl:ml-[36rem] xl:mr-4 xl:flex xl:px-4 xl:py-1.5"
124124
>
125125
Submit a request
126126
</button>
127127
<button
128-
class="hidden rounded-md bg-blue-200 text-lg xl:flex xl:items-center xl:justify-center xl:px-6 xl:py-1.5"
128+
class="hidden rounded-md bg-blue-200 text-lg hover:border-[1px] hover:border-gray hover:bg-black xl:flex xl:items-center xl:justify-center xl:px-6 xl:py-1.5"
129129
>
130130
Sign In
131131
</button>
@@ -215,7 +215,7 @@
215215
designs in one place.
216216
</p>
217217
<div
218-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
218+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
219219
>
220220
<a href="#">Learn More</a>
221221
<img
@@ -245,7 +245,7 @@
245245
details, and password.
246246
</p>
247247
<div
248-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
248+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
249249
>
250250
<a href="#">Learn More</a>
251251
<img
@@ -275,7 +275,7 @@
275275
people and your work.
276276
</p>
277277
<div
278-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
278+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
279279
>
280280
<a href="#">Learn More</a>
281281
<img
@@ -304,7 +304,7 @@
304304
Change subscriptions and payment details.
305305
</p>
306306
<div
307-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
307+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
308308
>
309309
<a href="#">Learn More</a>
310310
<img
@@ -331,7 +331,7 @@
331331
Set up and configure SSO, SCIM, and Just-in-Time provisioning.
332332
</p>
333333
<div
334-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
334+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
335335
>
336336
<a href="#">Learn More</a>
337337
<img
@@ -358,7 +358,7 @@
358358
Get in touch with a human.
359359
</p>
360360
<div
361-
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
361+
class="mt-[1.2rem] flex flex-row items-center text-base font-semibold text-blue-200 hover:underline lg:text-xl lg:font-normal xl:text-lg 2xl:text-[1.2rem] 2xl:font-medium"
362362
>
363363
<a href="#">Learn More</a>
364364
<img
@@ -384,33 +384,45 @@
384384
<p class="text-base font-semibold md:text-lg 2xl:text-2xl">
385385
Abstract
386386
</p>
387-
<a class="mt-2 md:mb-1.5 md:mt-1 xl:mt-4 2xl:mt-4" href="#"
387+
<a
388+
class="mt-2 hover:text-gray md:mb-1.5 md:mt-1 xl:mt-4 2xl:mt-4"
389+
href="#"
388390
>Branches</a
389391
>
390392
</div>
391393
<div class="mt-11 flex flex-col text-sm md:mt-10 xl:mt-11">
392394
<p class="text-2xl font-semibold sm:text-sm md:text-lg 2xl:text-2xl">
393395
Resources
394396
</p>
395-
<a class="mt-2 md:mb-1.5 md:mt-1 xl:mt-4 2xl:mt-4" href="#">Blog</a>
396-
<a class="md:mb-1.5" href="#">Help Center</a>
397-
<a class="md:mb-1.5" href="#">Release Notes</a>
398-
<a class="md:mb-1.5" href="#">Status</a>
397+
<a
398+
class="mt-2 hover:text-gray md:mb-1.5 md:mt-1 xl:mt-4 2xl:mt-4"
399+
href="#"
400+
>Blog</a
401+
>
402+
<a class="hover:text-gray md:mb-1.5" href="#">Help Center</a>
403+
<a class="hover:text-gray md:mb-1.5" href="#">Release Notes</a>
404+
<a class="hover:text-gray md:mb-1.5" href="#">Status</a>
399405
</div>
400406
<div class="mt-11 flex flex-col text-sm md:mt-10 xl:mt-11">
401407
<p class="text-2xl font-semibold sm:text-sm md:text-lg">Community</p>
402408
<a
403-
class="mt-2 md:mb-1.5 md:mt-1 lg:mt-3 lg:text-base xl:mt-4 2xl:mt-4 2xl:text-[.97rem]"
409+
class="mt-2 hover:text-gray md:mb-1.5 md:mt-1 lg:mt-3 lg:text-base xl:mt-4 2xl:mt-4 2xl:text-[.97rem]"
404410
href="#"
405411
>Twitter</a
406412
>
407-
<a class="md:mb-1.5 lg:text-base 2xl:text-[.97rem]" href="#"
413+
<a
414+
class="hover:text-gray md:mb-1.5 lg:text-base 2xl:text-[.97rem]"
415+
href="#"
408416
>LinkedIn</a
409417
>
410-
<a class="md:mb-1.5 lg:text-base 2xl:text-[.97rem]" href="#"
418+
<a
419+
class="hover:text-gray md:mb-1.5 lg:text-base 2xl:text-[.97rem]"
420+
href="#"
411421
>Facebook</a
412422
>
413-
<a class="md:mb-1.5 lg:text-base 2xl:text-[.97rem]" href="#"
423+
<a
424+
class="hover:text-gray md:mb-1.5 lg:text-base 2xl:text-[.97rem]"
425+
href="#"
414426
>Dribble</a
415427
>
416428
</div>
@@ -421,21 +433,29 @@
421433
Company
422434
</p>
423435
<a
424-
class="mt-2 md:mb-1.5 md:mt-1 lg:mt-3 lg:text-base xl:mt-4 2xl:mt-4 2xl:text-[.97rem]"
436+
class="mt-2 hover:text-gray md:mb-1.5 md:mt-1 lg:mt-3 lg:text-base xl:mt-4 2xl:mt-4 2xl:text-[.97rem]"
425437
href="#"
426438
>About Us</a
427439
>
428-
<a class="md:mb-1.5 lg:text-base 2xl:text-[.97rem]" href="#"
440+
<a
441+
class="hover:text-gray md:mb-1.5 lg:text-base 2xl:text-[.97rem]"
442+
href="#"
429443
>Careers</a
430444
>
431-
<a class="md:mb-1.5 lg:text-base 2xl:text-[.97rem]" href="#">Legal</a>
445+
<a
446+
class="hover:text-gray md:mb-1.5 lg:text-base 2xl:text-[.97rem]"
447+
href="#"
448+
>Legal</a
449+
>
432450
<div class="text-sm md:mr-10">
433451
<p
434452
class="mt-3 text-lg font-bold sm:text-sm lg:text-base xl:mt-6 2xl:text-base"
435453
>
436454
Contact Us
437455
</p>
438-
<a class="lg:text-base 2xl:text-sm" href="#">[email protected]</a>
456+
<a class="hover:text-gray lg:text-base 2xl:text-sm" href="#"
457+
>[email protected]</a
458+
>
439459
</div>
440460
</div>
441461
<div

‎public/output.css‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,10 @@ video {
643643
margin-top: 0.75rem;
644644
}
645645

646+
.mt-4 {
647+
margin-top: 1rem;
648+
}
649+
646650
.mt-5 {
647651
margin-top: 1.25rem;
648652
}
@@ -663,10 +667,6 @@ video {
663667
margin-top: 3.3rem;
664668
}
665669

666-
.mt-4 {
667-
margin-top: 1rem;
668-
}
669-
670670
.inline-block {
671671
display: inline-block;
672672
}
@@ -693,11 +693,6 @@ video {
693693
height: 2rem;
694694
}
695695

696-
.size-6 {
697-
width: 1.5rem;
698-
height: 1.5rem;
699-
}
700-
701696
.h-3 {
702697
height: 0.75rem;
703698
}
@@ -746,10 +741,6 @@ video {
746741
grid-template-columns: repeat(2, minmax(0, 1fr));
747742
}
748743

749-
.grid-rows-5 {
750-
grid-template-rows: repeat(5, minmax(0, 1fr));
751-
}
752-
753744
.grid-rows-\[auto\2c auto\] {
754745
grid-template-rows: auto auto;
755746
}
@@ -913,10 +904,6 @@ video {
913904
text-align: center;
914905
}
915906

916-
.text-right {
917-
text-align: right;
918-
}
919-
920907
.font-GT-America {
921908
font-family: GT America Trial, sans-serif;
922909
}
@@ -1030,10 +1017,56 @@ video {
10301017
format("woff2");
10311018
}
10321019

1020+
.hover\:border-spacing-1:hover {
1021+
--tw-border-spacing-x: 0.25rem;
1022+
--tw-border-spacing-y: 0.25rem;
1023+
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
1024+
}
1025+
10331026
.hover\:cursor-pointer:hover {
10341027
cursor: pointer;
10351028
}
10361029

1030+
.hover\:border-2:hover {
1031+
border-width: 2px;
1032+
}
1033+
1034+
.hover\:border-\[1px\]:hover {
1035+
border-width: 1px;
1036+
}
1037+
1038+
.hover\:border-gray:hover {
1039+
border-color: #FFFFFF70;
1040+
}
1041+
1042+
.hover\:border-white:hover {
1043+
--tw-border-opacity: 1;
1044+
border-color: rgb(255 255 255 / var(--tw-border-opacity));
1045+
}
1046+
1047+
.hover\:bg-white:hover {
1048+
--tw-bg-opacity: 1;
1049+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1050+
}
1051+
1052+
.hover\:bg-black:hover {
1053+
--tw-bg-opacity: 1;
1054+
background-color: rgb(25 26 27 / var(--tw-bg-opacity));
1055+
}
1056+
1057+
.hover\:text-gray:hover {
1058+
color: #FFFFFF70;
1059+
}
1060+
1061+
.hover\:text-black:hover {
1062+
--tw-text-opacity: 1;
1063+
color: rgb(25 26 27 / var(--tw-text-opacity));
1064+
}
1065+
1066+
.hover\:underline:hover {
1067+
text-decoration-line: underline;
1068+
}
1069+
10371070
@media (min-width: 432px) {
10381071
.sm\:mt-5 {
10391072
margin-top: 1.25rem;
@@ -1078,6 +1111,10 @@ video {
10781111
margin-top: 9rem;
10791112
}
10801113

1114+
.md\:mt-5 {
1115+
margin-top: 1.25rem;
1116+
}
1117+
10811118
.md\:mt-7 {
10821119
margin-top: 1.75rem;
10831120
}
@@ -1086,14 +1123,6 @@ video {
10861123
margin-top: 2rem;
10871124
}
10881125

1089-
.md\:mt-5 {
1090-
margin-top: 1.25rem;
1091-
}
1092-
1093-
.md\:inline-block {
1094-
display: inline-block;
1095-
}
1096-
10971126
.md\:grid {
10981127
display: grid;
10991128
}
@@ -1131,10 +1160,6 @@ video {
11311160
grid-template-columns: repeat(4, 11rem);
11321161
}
11331162

1134-
.md\:flex-col {
1135-
flex-direction: column;
1136-
}
1137-
11381163
.md\:items-end {
11391164
align-items: flex-end;
11401165
}
@@ -1180,11 +1205,6 @@ video {
11801205
line-height: 1.75rem;
11811206
}
11821207

1183-
.md\:text-base {
1184-
font-size: 1rem;
1185-
line-height: 1.5rem;
1186-
}
1187-
11881208
.md\:text-xs {
11891209
font-size: 0.75rem;
11901210
line-height: 1rem;
@@ -1295,8 +1315,8 @@ video {
12951315
margin-left: 16rem;
12961316
}
12971317

1298-
.xl\:ml-\[37\.5rem\] {
1299-
margin-left: 37.5rem;
1318+
.xl\:ml-\[36rem\] {
1319+
margin-left: 36rem;
13001320
}
13011321

13021322
.xl\:mr-4 {
@@ -1307,10 +1327,6 @@ video {
13071327
margin-top: 0px;
13081328
}
13091329

1310-
.xl\:mt-1 {
1311-
margin-top: 0.25rem;
1312-
}
1313-
13141330
.xl\:mt-11 {
13151331
margin-top: 2.75rem;
13161332
}
@@ -1327,14 +1343,6 @@ video {
13271343
margin-top: 1.5rem;
13281344
}
13291345

1330-
.xl\:ml-\[37rem\] {
1331-
margin-left: 37rem;
1332-
}
1333-
1334-
.xl\:ml-\[36rem\] {
1335-
margin-left: 36rem;
1336-
}
1337-
13381346
.xl\:flex {
13391347
display: flex;
13401348
}
@@ -1472,6 +1480,11 @@ video {
14721480
text-align: left;
14731481
}
14741482

1483+
.xl\:text-2xl {
1484+
font-size: 1.5rem;
1485+
line-height: 2rem;
1486+
}
1487+
14751488
.xl\:text-6xl {
14761489
font-size: 3.75rem;
14771490
line-height: 1;
@@ -1492,11 +1505,6 @@ video {
14921505
line-height: 1.75rem;
14931506
}
14941507

1495-
.xl\:text-2xl {
1496-
font-size: 1.5rem;
1497-
line-height: 2rem;
1498-
}
1499-
15001508
.xl\:font-medium {
15011509
font-weight: 500;
15021510
}

0 commit comments

Comments
 (0)