Merge branch 'main' of github.com:erikpersson0884/heap-recipes

Author: Hanna Adenholm

client/src/App.css

@@ -16,6 +16,7 @@
   --color-offwhite: rgb(255, 251, 240);
   --color-lightgrey: #f5f5f5;
   --color-rederror: #c56161;
+  --color-gray1: #3a3a3a;
 }
 
 button {

client/src/components/recipeCard/RecipeCard.css

@@ -3,9 +3,12 @@
     background-color: #F0FFD9;
     border-radius: 1rem;
     width: auto;
+    max-width: 24rem;
     transition: 0.5s ease-in-out;
     text-decoration: none;
     color: rgb(27, 26, 26);
+    position: relative;
+    padding-bottom: 2rem;
 }
 
 .recipe-card img {
@@ -34,6 +37,9 @@
     margin-bottom: 1.2rem;
     color: rgb(88, 87, 87);
     font-weight: 500;
+    margin-top: auto;
+    position: absolute;
+    bottom: 0;
 }
 
 .recipe-card:hover {

client/src/layout/header/Header.css

@@ -85,4 +85,13 @@
     width: 1.5rem;
     margin-right: 0.5rem;
     background-color: transparent;
+}
+
+@media (max-width: 768px)  {
+    .page-header h1{
+        font-size: 1.5rem;
+    }
+    .page-header {
+        padding: 1rem;
+    }
 }

client/src/pages/recipepage/RecipePage.css

@@ -3,12 +3,12 @@
     background-color: var(--color-offwhite);
     display: flex;
     flex-direction: row;
-    gap: 2rem;
+    gap: 1rem;
 
     position: relative;
 
     width: fit-content;
-    max-width: 80%;
+    max-width: 70%;
     margin-inline: auto;
     padding: 2rem;
     border-radius: 1rem;
@@ -25,59 +25,171 @@
     left: 2rem;
 
     color: #ffffff;
-    height: fit-content;
+    height: 2rem;
+    width: 2rem;
+
 }
 
 .recipe-page .recipe-details {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
     gap: 1rem;
 }
 
 .recipe-header {
     display: grid;
-    grid-template-columns: 1fr 2em 2em;
+    grid-template-columns: 1fr 4rem;
     gap: 1rem;
     align-items: center;
+    margin-bottom: -1rem;
 }
 
-.recipe-header img {
-    width: 2em;
-    height: 2em;
-    cursor: pointer;
-    padding: 0.25em;
-    border-radius: 0.5em;
+.recipe-page ol li {
+   padding: 0.7rem 0.7rem;
+    font-weight: 350;
 }
 
-.recipe-page ol li {
-    margin-bottom: 1rem;
+.recipe-page ol {
+    padding:  1rem 0.5rem;
+    padding-left: 2rem;
+    background-color: #fffefb;
+    border-radius: 0.25rem;
+    border:#f8f0e0 1px solid;
+}
+
+.recipe-page ul{
+    padding: 0;
+    margin: 0;
+    background-color: #fffefb;
+    border-radius: 0.25rem;
+    border:#f8f0e0 1px solid;
+}
+
+.recipe-page ul li {
+    margin: 0.5rem 0;
+    list-style-type: none;
+    padding: 0.25rem 1rem;
+    display: grid;
+    grid-template-columns: 3rem 1fr;
+    gap: 1rem;
+}
+
+.recipe-page ul li p {
+    margin: 0;
+    align-self: center;
+}
+
+.recipe-description {
+    font-style: italic;
+    color: var(--color-gray1);
     font-weight: 350;
 }
 
-.icon {
-        background-color: var(--color-green1);
+.edit-buttons {
+    background-color: var(--color-green1);
+    position: absolute;
+    border-radius: 0.5em;
+    top: 2rem;
+    right: 4.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    padding: 0.25rem;
 }
 
 .delete-button {
     background-color: var(--color-rederror);
+    right: 2rem;
+}
+
+.ingredients-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+}
+
+.ingredients-header button {
+    width: 1.7rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 1rem;
+    background-color: #fff;
+    color: var(--color-gray1);
+    margin-inline: 0.25rem;
+    border:#f8f0e0 1px solid;
+    border-radius: 50rem;
 }
 
 @media (max-width: 768px) {
     .recipe-container {
         flex-direction: column;
         align-items: center;
-        max-width: 90%;
-        padding: 1rem;
+        width: calc(100% - 2rem);
+        max-width: calc(100% - 2rem);
+        margin-inline: 0;
+        padding: 2rem 1rem;
+        border-radius: 0rem;
+    }
+
+    .recipe-header {
+        align-items: center;
+        text-align: center;
+        display: block;
+        margin-top: 3rem;
+    }
+
+    .recipe-details {
+        justify-content: center;
+        align-self: center;
     }
 
     .recipe-page .recipe-image {
-        width: 100%;
-        max-width: 300px;
+        width: 100vw;
+        height: auto;
+        max-width: 600px;
+        border-radius: .25rem;
+        margin-bottom: 1rem;
     }
 
-    .recipe-header {
-        grid-template-columns: 1fr 2em 2em;
-        gap: 0.5rem;
+    .recipe-description {
+        max-width: 600px;
+    }
+
+    .recipe-page h3 {
+        margin-inline: 1rem;
+    }
+
+    .recipe-page aside ul {
+        padding-inline: 0.75rem;
     }
+
+    .recipe-page .back-arrow {
+        color: #535353;
+        left: 1rem;
+    }
+
+    .edit-buttons {
+        right: 3.5rem;
+    }
+    .delete-button {
+        right: 1rem;
+    }
+
+    .recipe-page ul li {
+        padding: 0.4rem 1rem;
+    }
+
+    .recipe-page ol{
+    padding:  1rem 0rem;
+    padding-left: 2rem;
+    background-color: #fffefb;
+    border-radius: 0.25rem;
+    border:#f8f0e0 1px solid;
+    max-width: 560px;
+    width: calc(100vw - 2rem);
+    }
+
+    .ingredients-header {
+        margin-right: 1rem;
+    }
+
 }