modified css for CreatePage and color palette for homepage

Co-authored-by: rheabhutada02
Co-authored-by: Kara Hoagland
This commit is contained in:
d7hernan 2022-11-21 00:56:54 -08:00
parent 1055f7ef26
commit 1798835807
6 changed files with 150 additions and 39 deletions

View File

@ -41,6 +41,7 @@
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
<br>
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
@ -50,7 +51,9 @@
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<label for="comments">
<br>
Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
@ -73,8 +76,10 @@
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn">Add Tag</button>
</label>

View File

@ -6,20 +6,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewDetails.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
</div>
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewDetails.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head>
<body>
<header>
<div class="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<img src ="./assets/images/icons/Logo.png" alt="logo" />
</div>
</header>
<!--- meal -->
<div class = "meal-name">
<h1 id="d-mealName"> Cucumber Salad </h1>
<h1 id="d-mealName"> Salad (default name) </h1>
<h1 id="d-restaurant"> Salad Inc. (default name) </h1>
</div>
<div class = "meal-pics-and-tags">
@ -34,7 +42,7 @@
<div class = "stars-and-comments">
<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating">
<p id = "d-comments"> The food was good </p>
<p id = "d-comments"> Default comment </p>
</div>
<main>
@ -43,7 +51,7 @@
<button type="button" id="delete-btn" class="danger">Delete</button>
</main>
<div class = journal-form id="update-form-div">
<div class = "journal-form" id="update-form-div">
<form id="update-food-entry">
<fieldset>
<legend>Pic:</legend>

View File

@ -13,7 +13,7 @@ class ReviewCard extends HTMLElement {
let styleEl = document.createElement("style");
styleEl.textContent = `
* {
font-family: sans-serif;
font-family: Century Gothic;
margin: 0;
padding: 0;
}
@ -28,7 +28,7 @@ class ReviewCard extends HTMLElement {
article {
align-items: center;
border: 1px solid rgb(223, 225, 229);
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
@ -53,9 +53,9 @@ class ReviewCard extends HTMLElement {
}
article>img {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 118px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
height: 119px;
object-fit: cover;
margin-left: -16px;
width: calc(100% + 32px);

View File

@ -1,7 +1,13 @@
/* CreatePage.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body {
background-color: #13323b;
background-color: #F8F3F1;
}
h1 {
@ -21,7 +27,8 @@ h1 {
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #eaa9bc;
color:#516754;
font-family: 'testFont';
}
.top-bar > form {
@ -31,12 +38,14 @@ h1 {
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
width: 50%;
display: block;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7 0 0);
background-color: #b52754;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
background-color: #f7dfd5;
}
.hidden,
@ -85,3 +94,32 @@ h1 {
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center;
color: white;
cursor: pointer;
}
.tag:hover::before {
color: red;
}

View File

@ -1,7 +1,12 @@
/* ReviewDetails.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body {
background-color: #13323b;
background-color: #F8F3F1;
}
h1 {
@ -9,28 +14,29 @@ h1 {
}
.top-bar {
margin-top: -8cm;
display: flex;
justify-content: center;
}
.top-bar > img {
position: relative;
top: 7.85cm;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.top-bar > h1 {
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #eaa9bc;
}
.top-bar > form {
position: relative;
left: 32cm;
text-align: center;
/*color: #e4c3d2;*/
color:#516754;
font-size: 6rem;
font-family: 'testFont';
}
.journal-form {
font-size: 120%;
font-family: 'Calibria';
width: 50%;
display: none;
margin: auto;
@ -94,3 +100,32 @@ h1 {
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}
.journal-form .tag-container{
display: flex;
flex-flow: row wrap;
}
.journal-form .tag{
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.journal-form .tag::before{
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center;
color: white;
cursor: pointer;
}
.journal-form .tag:hover::before{
color: red;
}

View File

@ -1,5 +1,6 @@
/* homepage.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
@ -8,7 +9,8 @@
/* Color*/
body{
/*background-color: #97a5bd*/
background-color: #E3E3EC;
/*background-color: #E3E3EC;*/
background-color: #F8F3F1;
}
.top-bar {
@ -26,7 +28,9 @@ body{
.top-bar > h1 {
position: relative;
text-align: center;
color: #e4c3d2;
/*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754;
font-size: 6rem;
font-family: 'testFont';
}
@ -51,8 +55,10 @@ body{
#recent-reviews-text {
text-align: center;
font-size: 4rem;
color: #e4c3d2;
font-family: 'testFont'
/* color: #e4c3d2; */
/*color: rgb(145, 124, 175);*/
color: #516754;
font-family: 'testFont';
}
img#create-btn {
@ -69,6 +75,25 @@ img#create-btn {
justify-content: center;
}
.review-container > div {
background-color: #f1f1f1;
text-align: center;
}}
img#create-btn {
position: relative;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.review-container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.review-container > div {
background-color: #f1f1f1;
text-align: center;