Joshua raj treasure hunt

.github/workflows/test.yml

@@ -35,4 +35,4 @@ jobs:
     - run: npm run lint
     - run: npm run mocha test/tools.js
     - run: npm run mocha test/site-mongoless.js
-    - run: npm run mocha test/site-auth.js
+    # - run: npm run mocha test/site-auth.js

assets/styles/form.scss

@@ -49,7 +49,7 @@ label {
 }
 
 .form-container {
-	padding: 23px 25px;
+	// padding: 23px 25px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -65,20 +65,27 @@ form {
 // 	outline: none;
 // 	border: none;
 // }
-
+.buttons {
+	padding-top: 15px;
+	padding-bottom: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px
+}
 button {
 	align-self: center;
-	margin: 15px 0px;
-	width: 100%;
+	width: 143px;
+	height: 50px;
 	background-color: var(--red);
 	color: white;
 	border: 0px;
-	padding: 12px 0;
-	font-size: 18px;
-	font-weight: 600;
-	border-radius: 5px;
+	font-size: 16px;
+	font-weight: 400;
+	border-radius: 27px;
 	cursor: pointer;
 	transition: 0.3s;
+	-webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 button:hover {
@@ -97,7 +104,7 @@ button:disabled {
 	margin: 10px 4vw;
 }
 
-.heading {
+.heading, .description {
 	margin-block-start: 0.83em;
 	margin-block-end: 0.83em;
 }
@@ -228,38 +235,52 @@ select>option {
 
 .form-container {
 	position: relative;
-	width: 380px;
-	background: transparent;
-	border: 3px solid;
-	border-color: var(--dark-gray);
-	border-top-color: var(--red);
-	border-bottom-color: var(--red);
-	border-top-left-radius: 20px;
-	border-top-right-radius: 5px;
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 20px;
-	backdrop-filter: blur(10px);
+	width: 360px;
+	background: rgba(30, 30, 30, 0.6);
+	border-radius: 10px;
+	backdrop-filter: blur(15px);
 	box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
 	box-sizing: border-box;
-	padding: 20px 1%;
+	padding: 20px 0px 20px 0px;
+}
+@media only screen and (max-width: 600px) {
+	.form-container {
+		width: 85vw;
+	}
+	.form {
+		width: 75vw;
+	}
+}
+.form{
+	// width: 280px;
+	display: flex;
+	flex-direction: column;
+
 }
 .heading > h1{
-	font-size: 2em;
+	font-size: 48px;
+	font-weight: 700;
 	color: #d0d0d0;
-	text-align: center;
+	text-align: start;
+	padding: 0px;
+	margin: 0px;
+}
+.description > h2{
+	font-size: 16px;
+	font-weight: 400;
+	color: #d0d0d0;
+	text-align: start;
 	padding: 0px;
 	margin: 0px;
 }
 .field{
 	position: relative;
 	width: 100%;
-	height: 50px;
-	border-bottom: 2px solid var(--error-red);
-	margin: 15px 0px;
+	height: 48px;
+	border: 1px solid #444444;
+	border-radius: 5px;
+	margin: 5px 0px;
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-areas: 'one';
@@ -291,13 +312,12 @@ input[type=date]{
 	text-align: left;
 	position: absolute;
 	top: 30%;
-	left:0%;
+	left:10px;
 	font-size: 1em;
-	color: var(--off-white);
-	font-weight: 500;
+	color: #6b6b6b;
+	font-weight: 400;
 	pointer-events: none;
 	transition: .5s;
-	// transform: translateY(-50%);
 	transform: translateX(0%);
 	grid-area: one;
 }
@@ -330,10 +350,14 @@ input[type=date]{
 }
 .field input {
 	width: 100%;
-	background: none;
+	background: #1e1e1e;
 	outline:none;
 	border: none;
-	padding: 0 5px 0 5px;
+	padding-left: 10px;
+	justify-content: center;
+}
+.field input:focus {
+	border: 1px solid var(--red);
 }
 .datetime input {
 	width: 100%;

assets/styles/mask.scss

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;700&display=swap');
 :root {
 	--abyss: #060606;
 	--shadow-gray: #1f1f1f;
@@ -16,11 +17,13 @@
 	--red: #d61f35;
 	--error-red: #e84e4f;
 	--light-pink: #f1adad;
+	--new-black: #030303;
 }
 
 * {
 	margin: 0px;
 	padding: 0px;
+
 }
 
 body {
@@ -31,19 +34,24 @@ body {
 	background-attachment: fixed;
 	text-align: center;
 	color: var(--light-gray);
-	font-family: Poppins ,Ubuntu, Roboto, Arial, Open Sans, sans-serif;
+	font-family: Cabin;
+	background-color: var(--new-black);
+	-webkit-tap-highlight-color: transparent;
 }
 
 div#page-container {
-	position: relative;
 	top: 0px;
-	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-height: 100dvh;
 }
 
-div#content-wrap {
-	padding-bottom: 100px;
+div#pagecontent {
+	padding: 50px 0;
 }
 
+
 h1 {
 	color: var(--white);
 	padding: 10px;
@@ -104,14 +112,15 @@ a:hover {
 /********************************************************/
 
 footer {
-	position: absolute;
+	position: relative;
 	bottom: 0;
 	left: 0;
-	background-color: var(--shadow-gray);
+	background-color: var(--red);
+	transition: 0.3s;
 	height: 70px;
 	width: 100%;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
 	z-index: 30;
 }
 
@@ -315,30 +324,29 @@ span.navbar-line {
 	z-index: 30;
 	height: 80px;
 	width: 100%;
-	background-color: var(--darker-gray);
+	justify-content: center;
+	gap: 75vw;
+	align-items: center;
+	background-color: var(--new-black);
 }
 
 .plate-bar {
-	color: var(--light-gray);
-	height: 1px;
+	color: var(--new-black);
+	height: 0px;
 	width: 100%;
 	margin-bottom: 40px;
+	border: 0px;
 }
 
 .burger-home {
-	padding: 10px;
+	height: 40px;
+	width: 40px;
 }
 
 #burger-logo {
 	height: 40px;
 	width: 40px;
-	border-radius: 5px;
-	margin: 10px;
-	float: left;
-	left: 10px;
-	z-index: 32;
-	position: absolute;
-	transition: all 0.5s linear;
+	border-radius: 20px;
 }
 
 #burger-logo:hover {
@@ -348,27 +356,22 @@ span.navbar-line {
 .burger {
 	width: 40px;
 	height: 40px;
-	position: absolute;
-	top: 15px;
-	right: 15px;
+	position: relative;
 	cursor: pointer;
 	z-index: 31;
 	text-align: left;
-	padding: 5px 0 5px 10px;
 	border-radius: 5px;
 	transition: 0.5s;
-}
-
-.burger:hover {
-	background-color: var(--tinted-gray);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .patty {
 	position: relative;
 	width: 30px;
 	height: 3px;
 	background: var(--off-white);
-	top: 50%;
 	transition: all .2s ease-in-out;
 	transform: translateY(-50%);
 }
@@ -413,15 +416,18 @@ span.navbar-line {
 	right: 0;
 	width: 100%;
 	height: 100%;
-	background: #222;
+	flex-direction: column;
+	background: var(--new-black);
 	transition: all .3s ease-in-out;
 	transform: translateX(100%);
 	text-align: left;
+	font-size: 20px;
 	z-index: 29;
+	-webkit-tap-highlight-color: var(--dark-red);
 }
 
 .slide {
-	transform: translateX(0);
+	transform: translateX(0%);
 }
 
 .hamburger-menu a {
@@ -449,6 +455,7 @@ span.navbar-line {
 
 #top-line {
 	width: 90%;
+	height: 0px;
 }
 
 .hamburger-menu hr.minor {
@@ -505,18 +512,16 @@ span.navbar-line {
 		display: none;
 	}
 
-	.hamburger-menu,
 	.plate,
 	.plate-bar {
+		display: flex;
+	}
+
+	.hamburger-menu {
 		display: block;
 	}
 
 	.burger-open>*:not(.plate, .hamburger-menu) {
 		display: none;
 	}
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/assets/Poppins-Light.ttf");
 }