fix html linting and some css linting issues

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-21 17:27:18 -08:00
parent 63a7d5ce1f
commit 9194dd5166
5 changed files with 49 additions and 47 deletions

View File

@ -11,15 +11,15 @@
<!-- 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" />
<link rel="stylesheet" href="./static/Form.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head>
<body>
</head>
<body>
<header>
<div class="top-bar">
<img src ="./assets/images/Logo.png" alt="logo" />

View File

@ -1,13 +1,12 @@
/* CreatePage.css */
@font-face {
font-family: "testFont";
font-family: testFont;
src: url(CoveredByYourGrace-Regular.ttf);
}
body {
background-color: #F8F3F1;
background-color: #f8f3f1;
}
.top-bar {
@ -25,7 +24,7 @@ body {
.top-bar > h1 {
position: relative;
text-align: center;
color:#516754;
color: #516754;
font-size: 6rem;
font-family: 'testFont';
}
font-family: testFont;
}

View File

@ -1,15 +1,15 @@
.journal-form h1 {
font-family: 'testFont';
font-family: testFont;
text-align: center;
}
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
font-family: "Century Gothic";
width: 50%;
margin: auto;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border: 2px solid rgb(31 41 32);
border-radius: 8px;
background-color: #f7dfd5;
}
@ -18,21 +18,23 @@ fieldset {
border: none;
}
input[type=text] {
input[type="text"] {
width: 100%;
box-sizing: border-box;
background-color: #f7dfd5;
border: none;
border-bottom: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0 0 0);
}
input[type=text]:focus {
input[type="text"]:focus {
outline: none;
border-bottom: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0 0 0);
}
.rating {
display: flex; flex-wrap: nowrap; flex-direction: row-reverse;
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
}
.hidden,
@ -86,7 +88,7 @@ input[type=text]:focus {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
@ -95,7 +97,7 @@ input[type=text]:focus {
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: "x";
@ -106,7 +108,7 @@ input[type=text]:focus {
color: white;
cursor: pointer;
}
.tag:hover::before {
color: red;
}
@ -114,7 +116,7 @@ input[type=text]:focus {
#tag-add-btn {
background-color: #94da97; /* Green */
border: round;
color: rgb(206, 83, 179);
color: rgb(206 83 179);
text-align: center;
text-decoration: none;
display: inline-block;
@ -125,7 +127,7 @@ input[type=text]:focus {
}
#tag-add-btn:hover {
background-color: rgb(206, 83, 179); /* Green */
background-color: rgb(206 83 179); /* Green */
border: round;
color: #94da97;
text-align: center;
@ -144,4 +146,4 @@ input[type=text]:focus {
.tag-container * {
max-width: 100%;
overflow-wrap: anywhere;
}
}

View File

@ -1,12 +1,12 @@
/* ReviewDetails.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
font-family: testFont;
src: url(CoveredByYourGrace-Regular.ttf);
}
body {
background-color: #F8F3F1;
background-color: #f8f3f1;
}
h1 {
@ -28,10 +28,11 @@ h1 {
.top-bar > h1 {
position: relative;
text-align: center;
/*color: #e4c3d2;*/
color:#516754;
/* color: #e4c3d2; */
color: #516754;
font-size: 6rem;
font-family: 'testFont';
font-family: testFont;
}
.d-tag {
@ -40,5 +41,5 @@ h1 {
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 10px 10px 10px 10px;
}
margin: 10px;
}

View File

@ -1,16 +1,16 @@
/* homepage.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
font-family: testFont;
src: url(CoveredByYourGrace-Regular.ttf);
}
/* Color*/
body{
/*background-color: #97a5bd*/
/*background-color: #E3E3EC;*/
background-color: #F8F3F1;
/* Color */
body {
/* background-color: #97a5bd */
/* background-color: #E3E3EC; */
background-color: #f8f3f1;
}
.top-bar {
@ -28,11 +28,13 @@ body{
.top-bar > h1 {
position: relative;
text-align: center;
/*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754;
/* color: #e4c3d2; */
/* color: rgb(145, 124, 175); */
color: #516754;
font-size: 6rem;
font-family: 'testFont';
font-family: testFont;
}
.body-container {
@ -57,7 +59,7 @@ body{
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: rgb(239, 183, 183);
background: rgb(239 183 183);
font-size: 17px;
border: none;
border-radius: 12px;
@ -67,10 +69,8 @@ body{
#recent-reviews-text {
text-align: center;
font-size: 4rem;
/* color: #e4c3d2; */
/*color: rgb(145, 124, 175);*/
color: #516754;
font-family: 'testFont';
font-family: testFont;
}
img#create-btn {