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 --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- 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/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewDetails.css" /> <link rel="stylesheet" href="./static/ReviewDetails.css" />
<link rel="stylesheet" href="./static/Form.css" /> <link rel="stylesheet" href="./static/Form.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script> <script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head> </head>
<body> <body>
<header> <header>
<div class="top-bar"> <div class="top-bar">
<img src ="./assets/images/Logo.png" alt="logo" /> <img src ="./assets/images/Logo.png" alt="logo" />

View File

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

View File

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

View File

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

View File

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