* { margin: 0; padding: 0; box-sizing: border-box; } :root { --cream: #F7F1E8; --castIron: #2E261C; --cacao: #A8570C; --paper: #FFF9F1; --ash: #888; --oak: #8B5E34; --pureWhite: #FFF; } html { font-family: Nunito, Arial, sans-serif; background-color: var(--cream); font-size: 18px; /*Ensure that you set the font-size to 18px on the element.*/ display: flex; /* Use flex-box */ justify-content: center; /* Center the page content */ row-gap: 3rem; /*Add a 3rem gap between the page header (including the menu) and the main area of the page (containing, like, the recipe).*/ } body { flex-shrink: 1; /* On pages narrower than 700 pixels make sure that the page content gets narrower*/ flex-grow: 1; /*Experimental to match picture spec*/ max-width: 700px; /* Write CSS so that the page content is at most 700px wide */ color: var(--castIron); padding-left: 0.5rem; padding-right: 0.5rem; /* Add a .5rem gap between the left and right edges of the browser window and the page content itself*/ } main section h1 { padding-bottom: 2rem; /* Inside that main area, add a 2rem gap between the heading area and the rest of it.*/ } #search-bar, #login-form, .step-container, .step-ingredient-container { display: flex; flex-direction: column; /*Now, switch to the login page. Make each label / text box combination one row*/ } #login-form { gap: 1rem; } #login-form div { display: flex; flex-direction: row; align-items: baseline; /*Set the align-items of each label/text box combination to baseline*/ gap: 1rem; /*with a 1rem gap in between*/ justify-content: space-between; } #login-form #password-checkbox-container { align-items: end; justify-content: start; } .user-login { width: 80%; /*Make each text box 80% the width*/ padding: 0.25rem; /*Give each text box 0.25rem of padding*/ font-size: 1.25em; flex-shrink: 0; } #search-bar form input { min-width: 100%; /*On the search page, make the actual search box as wide as it can be*/ } #search-bar form { padding: 0.25rem; /*with .25rem of padding inside so that search text isn't cramped*/ } #profile-metadata-wrapper { display: flex; justify-content: space-between; /*On the profile page, make the user logo appear to the right of the page title / metadata*/ align-items: end; /* align it to the right of the main content area */ column-gap: 1rem; /* Keep a 1rem gap in between. */ } #profile-metadata-wrapper img { width: 5rem; height: 5rem; /*Make it 5rem wide and tall*/ } #title-and-metadata { display: flex; flex-direction: column; } #recipe-article { display: flex; flex-direction: column; border-style: none; box-shadow: none; row-gap: 2rem; /* On the recipe page, also add a 2rem gap between the recipe description and the recipe ingredients.*/ } article header { display: flex; flex-direction: column; } article header .metadata { display: flex; flex-wrap: wrap; /* Make the metadata blocks lay out horizontally*/ column-gap: 1.5rem; /* With 1.5rem gaps in between.*/ row-gap: 0px; /*don't have any gap between lines */ } article header ul { display: flex; /* The list of tags should also be horizontal*/ column-gap: 0.5rem; /*with an .5rem gap between tags.*/ } article section ul { padding-left: 1rem; /*Give the ingredients list a left-padding of 1rem*/ text-indent: -1rem; /*and a text-indent of -1rem;*/ } #steps ol { padding-left: 1em; /*Give the list of steps a left-padding of 1em to line up the step numbers with the edge of the "Steps" label*/ } #featured-recipe-picture { max-width: 100%; /*Make the photo on the recipe page no wider than the sidebar*/ padding-bottom: 0.5rem; /*Add .5rem of whitespace below it*/ } dl { display: flex; flex-direction: row; /* Each "Label: value" should be on one row,*/ justify-content: space-between; gap: 0.5rem; } dl div { display:flex; flex-direction: column; row-gap: 0.25rem; /*and .25rem gap between rows.;*/ } dl #label, dl #time-and-servings { display: flex; } dl #label { flex-grow: 1; } dl #time-and-servings { flex-grow: 3; } #pseudo-button-container { display: flex; flex-direction: row; justify-content: center; column-gap: 1rem; margin-top: 1rem; /*Let's take a look at the buttons on the index page. Those should (of course) be centered and horizontally adjacent, with a 1rem gap between them and also a 1rem gap between the previous paragraph and the buttons.*/ margin-bottom: 1rem; /*Experimental to match picture spec*/ } .card-layout { display: flex; /*The cards go in a grid,*/ flex-wrap: wrap; flex-direction: row; gap: 1rem; /*and 1rem gaps in between*/ /*and also 1rem gaps along the left and right (but not top and bottom) edges*/ padding-left: 1rem; padding-right: 1rem; width: 100%; } .card-layout li { align-items: start; /*in which case each row should be aligned at the top but different rows can have different sizes.*/ flex: 0 0 calc((100%/3) - 1rem); /*with three cards per row. (TA victoria helped here) */ } .card-layout li article h1,.card-layout li article h2, .card-layout li article h3, .card-layout li article h4, .card-layout li article h5, .card-layout li article h6 { font-size: 0.75rem; /*Experimental to match picture spec*/ } .card-layout li article { border-radius: 20px; padding: 0.5rem; /*inside each card, there should be a .5rem gap between the card edge and the content*/ } .card-layout li article img { max-width: 100%; /*The photo on the card (if any) should be no wider than the card.*/ } .hashtags-wrapper { display: flex; flex-wrap: wrap; /*Cards have tags inside. Since cards are narrow, we have to allow the tags to wrap onto multiple lines;*/ } .hashtag-link { text-wrap: nowrap; /*Don't allow the tag name itself to wrap by setting its text-wrap to nowrap.*/ padding-right: 0.5rem; /*keep the gap between tags at 0.5rem.*/ } #recipe-blurb-container, #ingredients-and-steps { display: flex; /*On the recipe page, set up the layout where the photo/metadata is side-by-side with the recipe description and the ingredients are side-by-side with the recipe steps.*/ column-gap: 1rem; /*In each pair of side-by-side elements, have a 1rem gap between them*/ max-width: 100%; } #recipe-picture-and-prep-time, #recipe-section { width: calc(100%/3); /*The left sidebar is a third*/ } #my-recipe-description, #steps { display:flex; flex-direction: column; width: calc(200%/3); /*The right side is two thirds of the remaining width*/ } header { display: flex; flex-direction: column; } .row-one, .row-two { display: flex; justify-content: space-between; } .row-one, #sign-in-wrapper { border-color: var(--oak); border-width: 0px 0px 4px 0px; border-style: solid; align-items: end; /*Make sure that the "View Profile" link and the "Dishbook" title line up at the bottom of the text. */ } .row-two form { margin-top: 0.25rem; /* Add a .25rem gap between the search bar and the horizontal line above it*/ } .row-two ul { display: flex; /*make sure that the "Home" and "My Cookbook" links are placed horizontally*/ gap: 1rem; /*add a gap of 1rem between links*/ } .row-two form { padding: 0.25rem; /* add .25rem of padding inside the search bar and search button.*/ } h1, h2, h3, h4, h5, h6,#recipe-title { font-family: Playwrite US Trad, Nunito, Arial, cursive; font-size: 1.25rem; color: var(--cacao); /* Make the recipe title input box have really big text in the correct font (Playwrite US Trad).*/ } h1,#recipe-title { font-size: 1.8rem; /* Make the recipe title input box have really big text in the correct font (Playwrite US Trad).*/ } .nav-home-text { font-family: Playwrite US Trad, Nunito, Arial, cursive; font-weight: bold; color: var(--oak); } p, label, dt, dd,ol li, .ingredients { color: var(--castIron); } a { color: var(--oak); text-decoration: none; } a:hover { color: var(--cacao); text-decoration: underline; } dt { font-weight: 600; } #recipe-section * , #steps * { line-height: 1.25; } ul li, .hashtags-wrapper { list-style-type: none; } .hashtag:before { content: '#'; /*https://stackoverflow.com/questions/3203252/unicode-character-as-bullet-for-list-item-in-css*/ color: var(--ash); } .pseudo-button { background-color: var(--oak); color: var(--cream); padding: .5em 1em; border-radius: 20px; } .pseudo-button:hover { background-color: var(--cacao); color: var(--paper); } #featured-recipe-picture { transform: rotate(2deg); border-width: 5px; border-color: var(--pureWhite); border-style: solid; } main, #recipe-wrapper { background-color: var(--paper); border-top-left-radius: 20px; border-top-right-radius: 20px; border-width: 2px; border-style: solid; border-color: var(--ash); padding: 1rem; /*Add a 1rem gap between the border of the main area and the content inside.*/ border-bottom: none; max-width: 100%; } article { background-color: var(--paper); border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 0 10px 2px var(--castIron); /*https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow*/ margin: 5px; } .visually-hidden { display: none; } #recipe-section h2, #steps h2, #featured-biline, #search-bar { padding-bottom: 1rem; /*Experimental to match picture spec*/ } #profile-biography { padding-bottom: 3rem; /*Experimental to match picture spec*/ } #dishbook-sign-in { margin-top: 2rem; /*Experimental to match picture spec*/ } #search-recipes-heading { padding: 0; /*Experimental to match picture spec*/ margin: 0; /*Experimental to match picture spec*/ } #sign-in-button { width: 50%; /*button 50% of the width of the page*/ margin: auto; /*and center it*/ min-width: 200px; /* But make sure that it never goes below 200px wide, even on very narrow screens, like below 400 pixels.*/ } #user-login-button-wrapper { display: flex; justify-content: center; } @media (max-width: 400px) /*below 400px*/ { .card-layout li { min-width: 100%; /* one card per row */ } } @media (max-width: 500px) /* if the screen width is 500px or narrower*/ { #recipe-blurb-container, #ingredients-and-steps { flex-direction: column; /*The order of page elements should be photo & metadata, description, ingredients, and then steps*/ gap: 2rem; /*There should be a 2rem gap between each*/ } body { padding-left: 0; padding-right: 0; /*Make that padding disappear below 500 pixels*/ } main, #recipe-wrapper { border-top-left-radius: 0; border-top-right-radius: 0; border-width: 2px 0px 0px 0px; /*Also remove the left and right border*/ } .row-one, .row-two { padding: 0.5rem; /*Add back 0.5rem of padding inside the page header instead Make sure the horizontal line inside the page header goes edge-to-edge.*/ } } @media (max-width: 600px) /*below 600px*/ { .card-layout li { flex: 0 0 calc((100%/2) - 1rem); /* Let's do two cards per row */ } } @media (max-width: 700px) /* So for pages less than 700px wide */ { #login-form div { flex-direction: column; /* put the label and the text box on separate lines*/ gap: 0; /*with no gap between them*/ } #login-form { column-gap: 1rem; } #login-form #password-checkbox-container { flex-direction: row; gap: 1rem; } } #recipe-title-wrapper { /* In the page title, make the Edit/Save button appear in the top right corner of the page */ display: flex; flex-direction: row; align-items: start; justify-content: space-between; } textarea { resize: vertical; /* Use the resize property to make it resizable only vertically.*/ width: 100%; } .step-ingredient-row { display:flex; flex-direction: row; gap: 0.25rem; padding: 0.25rem; } .step-ingredient-element-number { width: calc((100%/4)); } .step-ingredient-element-number { width: calc((100%/4)); } .time-and-yield-input { width: calc(100%/3) } .step-ingredient-element-text { width: calc((100% * ((3/4)/2))); } .step-ingredient-container li { list-style-type: circle; } .step-description { vertical-align:top; width:100%; } .numbered-step { padding-bottom: 1rem; } .errors { background-color: red; }