Skip to content

Commit

Permalink
updated style
Browse files Browse the repository at this point in the history
  • Loading branch information
@katemat
katemat committed Jul 16, 2020
1 parent baf77e2 commit 455b198
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 64 deletions.
131 changes: 104 additions & 27 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,20 @@
box-sizing: border-box;
}

:root {
--border: 1px solid rgb(5, 180, 180);
--bg-btn: radial-gradient(rgb(5, 180, 180), rgb(150, 238, 209));
--bg-btn-hov: radial-gradient(rgb(150, 238, 209), rgb(5, 180, 180));
--bx-sh: 1px 0px 20px 0px rgba(78, 108, 246, 0.99);
--clr-light: rgb(241, 237, 237);
--clr-dark: rgb(91, 88, 88);
}

#map {
height: 500px;
border: 5px solid #87a8a0;
border: var(--border);
border-radius: 3px;
margin-top: 50px;
}
.item-map {
height: 500px;
Expand All @@ -13,20 +24,20 @@

body {
background-color: #b8f5e5;
width: 70%;
width: 80%;
margin: 20px auto;
font-family: 'Livvic', sans-serif;
font-size: 12pt;
font-size: 1.25rem;
}

header {
display: grid;
grid-template-rows: 1fr 1fr;
/* grid-template-rows: 1fr 1fr; */
}

.header-title {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-columns: 1.5fr 1fr;
font-weight: 600;
font-size: 2em;
}
Expand All @@ -40,6 +51,7 @@ nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-weight: 500;
height: 100px;
}

.nav-item {
Expand All @@ -48,7 +60,7 @@ nav {
}

.page-nav {
margin: 40px auto;
margin: 30px auto;
}

a {
Expand All @@ -57,21 +69,39 @@ a {
}

button {
background-color: #f1d0f5;
border-radius: 5px;
border: 2px solid #a47ea8;
color: black;
margin: 20px;
border: var(--border);
background: var(--bg-btn);
border-radius: 3px;
color: rgb(4, 61, 46);
margin: 10px;
font-size: 1rem;
width: 100px;
}

button:hover {
background: var(--bg-btn-hov);
cursor: pointer;
color: var(--clr-dark);
}

.greeting,
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
}

/* Item Details Display Box */
.description-of-item {
margin: 30px 0px;
border: 5px solid #87a8a0;
/* border: 5px solid #87a8a0; */
border: none;
border-radius: 8px;
width: 100%;
display: grid;
grid-template-columns: 1fr 2fr;
background-color: #f5e5b8;
background-color: var(--clr-light);
box-shadow: var(--bx-sh);
}
.description-of-item div {
margin: 10px;
Expand All @@ -89,7 +119,7 @@ button {

/* sign-up.ejs css */
.signup-box {
background-color: white;
background-color: var(--clr-light);
width: 50%;
border: solid 1px grey;
border-radius: 10px;
Expand Down Expand Up @@ -154,21 +184,24 @@ input {
}
/* log-in.ejs css */

/* log-in.ejs css */
.login-box {
width: 40%;
border: 1px solid grey;
margin: 30px auto;
background-color: white;
width: 70%;
border: none;
border-radius: 8px;
margin: 20% auto;
background-color: var(--clr-light);
box-shadow: var(--bx-sh);
}

.login-box h1 {
margin: 30px;
padding-top: 20px;
text-align: center;
}

.login-input-box form {
display: grid;
width: 70%;
width: 80%;
grid-gap: 5px;
margin: 0 auto;
}
Expand All @@ -180,27 +213,57 @@ input {
.login-input-box button {
width: 50%;
padding: 5px;
margin: 0 auto 10px;
border: 1px solid black;
margin: 10px auto 10px;
border: var(--border);
background: var(--bg-btn);
font-size: 1.25rem;
}

.login-input-box button:hover {
background: var(--bg-btn-hov);
cursor: pointer;
color: var(--clr-dark);
}

.not-signup {
text-align: center;
}

.not-signup a {
color: rgb(72, 7, 194);
font-weight: bold;
}

/* view-my-items.ejs css */
.my-items-box {
border: 1px solid grey;
width: 80%;
margin: 10px auto;
width: 100%;
margin: 15px auto;
box-shadow: var(--bx-sh);
border-radius: 8px;
border: none;
background-color: var(--clr-light);
display: flex;
flex-direction: row;
}

.my-items-box img {
width: 30%;
width: 250px;
float: left;
margin: 3rem;
transition: transform 0.6s ease-in-out;
box-shadow: 3px 2px 5px rgb(162, 161, 161);
}

.my-items-box img:hover {
transform: scale(1.3);
}

.item-box-text {
width: 40%;
display: inline;
float: left;
margin-left: 40px;
padding: 10px;
margin: 10px;
}

.my-items-box::after {
Expand All @@ -217,3 +280,17 @@ input {
background-color: aqua;
}
/* login signup logout button */

@media (max-width: 768px) {
.my-items-box {
flex-direction: column;
}
.item-box-text {
width: 90%;
}
.my-items-box img {
width: 150px;
float: left;
margin: 3rem;
}
}
14 changes: 8 additions & 6 deletions public/style2.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.create-form-div,
.update-form-div {
background-color: rgb(241, 237, 237);
box-shadow: 1px 0px 40px 0px rgba(78, 108, 246, 0.99);
min-width: 700px;
background-color: var(--clr-light);
box-shadow: var(--bx-sh);
width: 100%;
margin: 0 auto;
}

.create-form-div input,
Expand All @@ -25,16 +26,17 @@
width: 30%;
margin: 10px auto;
padding: 5px;
border: 1px solid black;
border: var(--border);
border-radius: 3px;
font-size: 1.25em;
background-color: aquamarine;
background: var(--bg-btn);
}

.create-btn:hover,
.update-btn:hover {
background-color: rgb(82, 199, 160);
background: var(--bg-btn-hov);
cursor: pointer;
color: var(--clr-dark);
}

.selection {
Expand Down
2 changes: 1 addition & 1 deletion public/trashure-client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function convertDate(date) {
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;

return [year, month, day].join('-');
return [day, month, year].join('-');
}

var map, searchManager, address;
Expand Down
8 changes: 5 additions & 3 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,20 @@

<% if (!user) { %>
<div class = "buttons">
<form action="/signup">
<button>SIGN UP</button>
</form>
<form action="/login">
<button>LOG IN</button>
</form>
<form action="/signup">
<button>SIGN UP</button>
</form>
</div>
<% } else { %>
<div class="greeting">
<p class="user-name">Hello, <%= user.username %></p>
<form action="/logout">
<button>LOG OUT</button>
</form>
</div>
<% } %>

</section>
Expand Down
64 changes: 39 additions & 25 deletions views/log-in.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class ="login-box">
<h1>log in</h1>

<div class = "login-input-box">
<form action="/login" method="post">
<label for="username">Username</label>
<input type="text" placeholder="Enter Username" name="username" required>

<label for="password">Password</label>
<input type="password" placeholder="Enter Password" name="password" required>

<button type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>
<link
href="https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="login-box">
<h1>log in</h1>

<div class="login-input-box">
<form action="/login" method="post">
<label for="username">Username</label>
<input
type="text"
placeholder="Enter Username"
name="username"
required
/>

<label for="password">Password</label>
<input
type="password"
placeholder="Enter Password"
name="password"
required
/>

<button type="submit">Login</button>
<p class="not-signup">
Not registered yet? <a href="/signup">Sign up</a>
</p>
</form>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 455b198

Please sign in to comment.