Skip to content

Commit e7db61b

Browse files
UrdonsUrdons
committed
New Login Page, minor navbar changes and theme fixes.
1 parent 8fd3225 commit e7db61b

File tree

6 files changed

+60
-65
lines changed

6 files changed

+60
-65
lines changed

‎public/pages/login.ejs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<link rel="icon" type="images/svg" href="images/logo.svg">
88
</head>
99
<%- include("../partials/navbar.ejs") %>
10-
<body>
11-
<div class="h-[100vh] w-full flex justify-center items-center bg-zinc-50 dark:bg-zinc-900 text-center font-mono">
12-
<div>
13-
<h1 class="my-2 text-6xl font-extrabold">🔑</h1>
14-
<h2 class="m-4 text-3xl text-gray-700">Login options</h2>
15-
<a href="https://github.com/login/oauth/authorize?client_id=<%= client_id %>" class="m-4 py-3 px-4 rounded-lg text-2xl font-light bg-gray-600 text-white"><span class="fa fa-github"></span> Sign in with GitHub</a>
10+
<body class="px-8 flex h-[80dvh] justify-center items-center bg-far-light dark:bg-far-dark dark:text-white">
11+
<div class="w-96 flex flex-col h-fit m-2 p-2 bg-close-light dark:bg-close-dark border-[1px] border-close-b-light dark:border-close-b-dark rounded-md text-center">
12+
<h2 class="m-2 text-xl font-semibold dark:text-white">Login Options</h2>
13+
<div class="flex justify-center w-full flex-col">
14+
<a href="https://github.com/login/oauth/authorize?client_id=<%= client_id %>" class="py-4 px-4 my-2 w-full border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md"><span class="fa fa-github"></span> Sign in with GitHub</a>
15+
<a href="" class="py-4 px-4 w-full text-zinc-500 border-[1px] bg-far-light dark:bg-far-dark hover:bg-far-h-light hover:dark:bg-far-h-dark border-far-b-light dark:border-far-b-dark rounded-md pointer-events-none"><span class="fa fa-gitlab"></span> Sign in with GitLab (Coming Soon)</a>
1616
</div>
1717
</div>
1818
</body>

‎public/partials/navbar.ejs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
<h2 class="inline-block transition-all font-bold text-xl dark:text-white p-2 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md hover:cursor-pointer"
1919
style="font-family: 'Inter Tight';" title="home">FetchCV</h2>
2020
</a>
21-
<div class="relative inline-flex w-full justify-center items-center border-[1px] bg-far-light dark:bg-far-dark border-close-b-light dark:border-close-b-dark has-[:focus]:border-public rounded-md">
21+
<div class="relative inline-flex w-full justify-center items-center border-[1px] bg-close-light dark:bg-close-dark border-close-b-light dark:border-close-b-dark has-[:focus]:border-public rounded-md">
2222
<input class="w-full px-6 py-2 text-base bg-transparent outline-none" type="text" id="user-name"
2323
placeholder="Enter a username">
2424
<span tabindex="0" class="material-symbols-rounded text-public mr-2" onclick="getUpdatedSearchResults(this.parent.firstChild.value)">person_search</span>
25-
<div class="search-results hidden absolute top-[3rem] left-0 right-0 px-2 bg-far-light dark:bg-far-dark rounded-md border-[1px] border-far-b-light dark:border-far-b-dark"></div>
25+
<div class="search-results hidden absolute top-[3.8rem] left-0 right-0 px-2 bg-close-light dark:bg-close-dark rounded-md border-[1px] border-close-b-light dark:border-close-b-dark"></div>
2626
</div>
2727
<a href="/profile">
2828
<div class="float-right inline-flex justify-center transition-all p-2 my-0.5 border-[1px] bg-close-light dark:bg-close-dark hover:bg-close-h-light hover:dark:bg-close-h-dark border-close-b-light dark:border-close-b-dark rounded-md">

‎public/scripts-src/userSearch.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function showUpdatedSearchResults(users) {
4545
let userElement = document.createElement("div");
4646
createSearchResultElement(userElement, user.handle, user.profile.description);
4747
let divider = document.createElement("hr");
48-
divider.classList.add("dark:border-far-b-dark", "border-close-b-light");
48+
divider.classList.add("dark:border-close-b-dark", "border-close-b-light");
4949
userElement.append(divider);
5050
searchResultsElement.append(userElement);
5151
}

‎public/scripts/userSearch.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function showUpdatedSearchResults(users) {
3939
let userElement = document.createElement("div");
4040
createSearchResultElement(userElement, user.handle, user.profile.description);
4141
let divider = document.createElement("hr");
42-
divider.classList.add("dark:border-far-b-dark", "border-close-b-light");
42+
divider.classList.add("dark:border-close-b-dark", "border-close-b-light");
4343
userElement.append(divider);
4444
searchResultsElement.append(userElement);
4545
}

‎public/styles/tailwind.css

Lines changed: 48 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -554,6 +554,10 @@ video {
554554
--tw-contain-style: ;
555555
}
556556

557+
.pointer-events-none {
558+
pointer-events: none;
559+
}
560+
557561
.fixed {
558562
position: fixed;
559563
}
@@ -590,6 +594,22 @@ video {
590594
top: 3rem;
591595
}
592596

597+
.top-\[4rem\] {
598+
top: 4rem;
599+
}
600+
601+
.top-\[3\.5rem\] {
602+
top: 3.5rem;
603+
}
604+
605+
.top-\[3\.75rem\] {
606+
top: 3.75rem;
607+
}
608+
609+
.top-\[3\.8rem\] {
610+
top: 3.8rem;
611+
}
612+
593613
.-z-10 {
594614
z-index: -10;
595615
}
@@ -602,8 +622,8 @@ video {
602622
margin: 0.25rem;
603623
}
604624

605-
.m-4 {
606-
margin: 1rem;
625+
.m-2 {
626+
margin: 0.5rem;
607627
}
608628

609629
.m-6 {
@@ -670,10 +690,23 @@ video {
670690
height: 100vh;
671691
}
672692

693+
.h-\[80dvh\] {
694+
height: 80dvh;
695+
}
696+
697+
.h-fit {
698+
height: -moz-fit-content;
699+
height: fit-content;
700+
}
701+
673702
.h-full {
674703
height: 100%;
675704
}
676705

706+
.w-96 {
707+
width: 24rem;
708+
}
709+
677710
.w-\[140\%\] {
678711
width: 140%;
679712
}
@@ -698,6 +731,10 @@ video {
698731
max-width: 45vw;
699732
}
700733

734+
.flex-col {
735+
flex-direction: column;
736+
}
737+
701738
.items-center {
702739
align-items: center;
703740
}
@@ -738,10 +775,6 @@ video {
738775
border-width: 1px;
739776
}
740777

741-
.border-none {
742-
border-style: none;
743-
}
744-
745778
.border-blue-500 {
746779
--tw-border-opacity: 1;
747780
border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -822,11 +855,6 @@ video {
822855
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
823856
}
824857

825-
.bg-gray-600 {
826-
--tw-bg-opacity: 1;
827-
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
828-
}
829-
830858
.bg-green-800 {
831859
--tw-bg-opacity: 1;
832860
background-color: rgb(22 101 52 / var(--tw-bg-opacity));
@@ -841,11 +869,6 @@ video {
841869
background-color: transparent;
842870
}
843871

844-
.bg-white {
845-
--tw-bg-opacity: 1;
846-
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
847-
}
848-
849872
.bg-zinc-100 {
850873
--tw-bg-opacity: 1;
851874
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
@@ -856,10 +879,6 @@ video {
856879
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
857880
}
858881

859-
.bg-none {
860-
background-image: none;
861-
}
862-
863882
.p-2 {
864883
padding: 0.5rem;
865884
}
@@ -908,11 +927,6 @@ video {
908927
padding-bottom: 0.5rem;
909928
}
910929

911-
.py-3 {
912-
padding-top: 0.75rem;
913-
padding-bottom: 0.75rem;
914-
}
915-
916930
.py-4 {
917931
padding-top: 1rem;
918932
padding-bottom: 1rem;
@@ -1011,11 +1025,6 @@ video {
10111025
color: rgb(239 68 68 / var(--tw-text-opacity));
10121026
}
10131027

1014-
.text-white {
1015-
--tw-text-opacity: 1;
1016-
color: rgb(255 255 255 / var(--tw-text-opacity));
1017-
}
1018-
10191028
.text-zinc-500 {
10201029
--tw-text-opacity: 1;
10211030
color: rgb(113 113 122 / var(--tw-text-opacity));
@@ -1072,35 +1081,21 @@ video {
10721081
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
10731082
}
10741083

1075-
.hover\:bg-zinc-200:hover {
1084+
.hover\:bg-far-h-light:hover {
10761085
--tw-bg-opacity: 1;
1077-
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
1086+
background-color: rgb(212 212 216 / var(--tw-bg-opacity));
10781087
}
10791088

1080-
.hover\:bg-public:hover {
1089+
.hover\:bg-zinc-200:hover {
10811090
--tw-bg-opacity: 1;
1082-
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
1083-
}
1084-
1085-
.focus\:border-b-2:focus {
1086-
border-bottom-width: 2px;
1087-
}
1088-
1089-
.focus\:outline-none:focus {
1090-
outline: 2px solid transparent;
1091-
outline-offset: 2px;
1091+
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
10921092
}
10931093

10941094
.has-\[\:focus\]\:border-public:has(:focus) {
10951095
--tw-border-opacity: 1;
10961096
border-color: rgb(59 130 246 / var(--tw-border-opacity));
10971097
}
10981098

1099-
.has-\[\:hover\]\:border-public:has(:hover) {
1100-
--tw-border-opacity: 1;
1101-
border-color: rgb(59 130 246 / var(--tw-border-opacity));
1102-
}
1103-
11041099
@media (min-width: 640px) {
11051100
.sm\:px-0 {
11061101
padding-left: 0px;
@@ -1156,11 +1151,6 @@ video {
11561151
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
11571152
}
11581153

1159-
.dark\:bg-zinc-600 {
1160-
--tw-bg-opacity: 1;
1161-
background-color: rgb(82 82 91 / var(--tw-bg-opacity));
1162-
}
1163-
11641154
.dark\:bg-zinc-800 {
11651155
--tw-bg-opacity: 1;
11661156
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
@@ -1200,4 +1190,9 @@ video {
12001190
--tw-bg-opacity: 1;
12011191
background-color: rgb(63 63 70 / var(--tw-bg-opacity));
12021192
}
1193+
1194+
.hover\:dark\:bg-far-h-dark:hover {
1195+
--tw-bg-opacity: 1;
1196+
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
1197+
}
12031198
}

‎tailwind.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ module.exports = {
99
dark: "#09090b",
1010
light: "#d4d4d8",
1111
b: {
12-
dark: "18181b",
12+
dark: "#18181b",
1313
light: "#71717a",
1414
},
1515
h: {
16-
dark: "18181b",
16+
dark: "#18181b",
1717
light: "#a1a1aa",
1818
}
1919
},

0 commit comments

Comments
 (0)