diff --git a/source/CreatePage.html b/source/CreatePage.html index 6c9c9c4..222258a 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -15,12 +15,13 @@ + - +
logo

Food Journal

diff --git a/source/assets/images/icons/Grouppink.png b/source/assets/images/icons/Grouppink.png index 00cae3c..d4f1d14 100644 Binary files a/source/assets/images/icons/Grouppink.png and b/source/assets/images/icons/Grouppink.png differ diff --git a/source/assets/images/icons/Logo.png b/source/assets/images/icons/Logo.png index 206693c..0f5cf77 100644 Binary files a/source/assets/images/icons/Logo.png and b/source/assets/images/icons/Logo.png differ diff --git a/source/assets/images/icons/favicon.ico b/source/assets/images/icons/favicon.ico index f042014..e0dd9ea 100644 Binary files a/source/assets/images/icons/favicon.ico and b/source/assets/images/icons/favicon.ico differ diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index c402faf..38e182d 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -18,12 +18,12 @@ function init() { * @param {Array} reviews An array of reviews */ function addReviewsToDocument(reviews) { - let mainEl = document.querySelector("main"); + let box = document.getElementById("review-container"); reviews.forEach(review => { let newReview = document.createElement("review-card"); newReview.data = review; //TODO: want to append it to whatever the box is in layout - mainEl.append(newReview); + box.append(newReview); }); } diff --git a/source/index.html b/source/index.html index b8d4438..c72fe26 100644 --- a/source/index.html +++ b/source/index.html @@ -14,14 +14,39 @@ - + +
+ logo +

Food Journal

+
+ + +
+
+
+

Recent Reviews

+ CREATE + +
+
+
+
- + diff --git a/source/static/CreatePage.css b/source/static/CreatePage.css index ec7bf77..8d3a43e 100644 --- a/source/static/CreatePage.css +++ b/source/static/CreatePage.css @@ -34,4 +34,51 @@ h1 { color: #ccb3bb; border: 3px solid rgb(7, 0, 0); background-color: #b52754; +} + +.hidden, +.rating:not(:checked) > input { /* Hide radio circles while star rating */ + display: none; +} + +/* Unchecked stars */ +.rating:not(:checked) > label { + /* Make stars line up sideways and not vertically */ + float: right; + + /* Hide label text */ + width: 1em; + overflow: hidden; + white-space: nowrap; + + /* Star default color and size */ + font-size: 200%; + line-height: 1.2; + color: #b3b3cc; +} + +.rating > label:active { + position: relative; +} + +.rating:not(:checked) > label::before { + content: "★"; +} + +/* Checked star color */ +.rating > input:checked ~ label { + color: #ffbf00; +} + +.rating:not(:checked) > label:hover, +.rating:not(:checked) > label:hover ~ label { + color: orangered; +} + +.rating > input:checked + label:hover, +.rating > input:checked ~ label:hover, +.rating > input:checked + label:hover ~ label, +.rating > input:checked ~ label:hover ~ label, +.rating > label:hover ~ input:checked ~ label { + color: orangered; } \ No newline at end of file diff --git a/source/static/homepage.css b/source/static/homepage.css new file mode 100644 index 0000000..1aae749 --- /dev/null +++ b/source/static/homepage.css @@ -0,0 +1,65 @@ +/* homepage.css */ +/* Color*/ +body{ + background-color: #13323b; +} +.Top-Bar{ + margin-top: -8cm; +} +.Top-Bar > img{ + position: relative; + top: 7.5cm; +} +.Top-Bar > h1{ + position: relative; + left: 10.5cm; + top: 2.2cm; + font-size: 3cm; + color: #EAA9BC; + +} +.Top-Bar > form{ + position: relative; + left: 32cm; +} +.Review-boxes { + position: relative; +} + +.Review-boxes > h2 { + position: relative; + left: 10cm; + font-size: 1.5cm; + color: #EAA9BC; +} +.Review-boxes > input { + position: relative; + left: 20.34cm; + top: -3.5cm; +} + +.Filter-box{ + width:300px; + height:700px; + background: #8D4E62; + position: relative; + left: 29.5cm; + top: -5.5cm; +} +.review-container{ + display: flex; + position: relative; + top: -22cm; + left: 5cm; + max-width: 900px; + flex-wrap: wrap; +} +.review-container > div { + background-color: #f1f1f1; + width: 200px; + height: 200px; + margin: 10px; + text-align: center; + line-height: 75px; + font-size: 30px; + } \ No newline at end of file