:root { --cast-iron: #2E261C; --paper: #FFF9F1; --cream: #F7F1E8; --oak: #8B5E34; --ash: #888; --cacao: #A8570C; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 18px; /* Set the font-size to 18px on the element */ font-family: "Nunito", sans-serif; background-color: var(--cream); display: flex; /* Center the page content. */ flex-direction: row; /* Center the page content. */ justify-content: center;/* Center the page content. */ } body { color: var(--cast-iron); display: flex; flex-direction: column; width: 100%; max-width: 700px; /* Write CSS so that the page content is at most 700px wide. */ min-width: 0px; /* On pages narrower than 700 pixels, make sure that the page content gets narrower. */ flex-shrink: 1; /* On pages narrower than 700 pixels, make sure that the page content gets narrower. */ padding: 0rem 0.5rem 0rem 0.5rem; /* Add a .5 rem gap between the left and right edges of the browser window and the page content itself. */ } header { padding: 0rem 0rem 3rem 0rem; /* Add a 3rem gap between the page header (including the menu) and the main area of the page. */ display: flex; flex-direction: column; } .header-first-row, .header-second-row { display: flex; flex-direction: row; /* The page header should consist of two rows. */ justify-content: space-between; /* Make the profile information and search form right-aligned. */ } .header-first-row { align-items: end; /* Make sure that the "View Profile" link and the "Dishbook" title line up at the bottom of the text." */ } .header-second-row { margin: 0.25rem 0rem 0rem 0rem; /* Add a .25rem gap between the search bar and the horizontal line above it. */ } .header-horizontal-border { border-bottom: solid 2px; border-color: var(--oak); } .header-second-row form input, .header-second-row form button { padding: 0.25rem; /* Add 0.25rem of padding inside the search bar and search button. */ } header nav ul { display: flex; flex-direction: row; /* Make sure that the "Home" and "My Cookbook" links are placed horizontally; */ gap: 0rem 1rem; /* add a gap of 1rem between links. */ } main { background-color: var(--paper); border: solid; border-width: 1px 1px 0px 1px; border-color: var(--ash); border-radius: 40px; padding: 1rem; /* Add a 1rem gap between the border of the main area and the content inside. */ } .content-header { padding: 0rem 0rem 2rem 0rem; /* Inside [the] main area, add a 2rem gap between the heading area and the rest of it. */ } .recipe-card h3 { font-size: 95%; } ul li.recipe-card { list-style-type: none; background-color: white; border-radius: 10px; box-shadow: 0px 2px 4px var(--ash); padding: 0.5rem; /* Inside each card, there should be a .5rem gap between the card edge and the content. */ width: calc((100% - 2rem) / 3); /* Three cards per row (accounting for 1rem gap between) */ } ul li { list-style-type: none; } ul.tags { display: flex; flex-direction: row; gap: 0rem 0.5rem; flex-wrap: wrap; justify-content: start; } ul.tags li { text-wrap: nowrap; } ul.tags li:before { color: var(--cacao); content: "#"; } ul.recipe-cards-grid { display: flex; flex-direction: row; /* The cards go in a grid... */ flex-wrap: wrap; justify-content: start; gap: 1rem; /* 1rem gaps in between */ align-items: start; /* The cards can have different heights...in which case each row should be aligned at the top but different rows can have different sizes. */ margin: 1rem 0rem 1rem 0rem; /* 1rem gaps along the top and bottom (but not left and right) edges [of the grid] */ } .recipe-card img { width: 100%; /* The photo on the card should be no wider than the card. */ } a { color: var(--oak); text-decoration: none; } a:hover { color: var(--cacao); text-decoration: underline; } .link-buttons { display: flex; flex-direction: row; /* Buttons on the index page should be horizontally-adjacent... */ justify-content: center; /* ...centered... */ gap: 1rem; /* ...with a 1rem gap between them... */ padding: 1rem 0rem 0rem 0rem; /* ...and also a 1rem gap between the previous paragraph and the buttons. */ } .link-buttons a { background-color: var(--oak); color: var(--cream); padding: 0.5em 1em; border-radius: 18px; } .link-buttons a:hover { background-color: var(--cacao); color: var(--paper); } h1 { font-family: "Playwrite US Trad", serif; font-size: 180%; color: var(--cacao); } h2, h3, h4, h5, h6 { font-family: "Playwrite US Trad", serif; font-size: 125%; color: var(--cacao); } #login_form { font-size: 125%; display: flex; flex-direction: column; gap: 1rem; /* 1rem gap in between [each label/text combination]. */ align-items: center; /* Center the login button. */ } #login_form .login_field { display: flex; flex-direction: row; /* Make each label/text box combination one row. */ width: 100%; justify-content: space-between; /* Make [each text box] right-aligned */ align-items: baseline; /* Set the align-items of each label/text box combination to baseline. */ } #login_form .login_field input { width: 80%; /* Make each text box 80% of the width. */ padding: 0.25rem; /* Give each text box 0.25rem padding. */ font-size: 120%; } #show_pwd_label { display: flex; flex-direction: row; justify-content: start; width: 100%; } #login_form button { width: 50%; /* Make the login button 50% of the width of the page. */ min-width: 200px; /* But make sure it never goes below 200px wide. */ font-size: 100%; } dl { display: flex; flex-direction: row; flex-wrap: wrap; /* Each "Label: value" should be on one row... */ gap: 0.25rem 0rem; /* ... with a .25rem gap between rows. */ } dl div { display: flex; flex-direction: row; width: 100%; gap: 0.5rem; /* Each "Label: value" should be one one row...with .5rem gap between them. */ } dt { font-weight: 600; width: 25%; /* The label should always take up a quarter of the remaining space... */ } dd { width: 75%; /* ...while the label takes up the other three quarters. */ } #edit-page textarea { width: 100%; resize: vertical; vertical-align: top; } .recipe-title-area { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; align-items: start; } .recipe-title-area input { font-family: "Playwrite US Trad", serif; font-size: 120%; color: var(--cacao); width: 100%; } .recipe-title-area button { padding: 0.25rem; } .recipe-title-area div { display: flex; flex-direction: row; gap: 0.5rem; } #edit-page input, textarea { padding: 0.2rem; } input[type=number][size] { width: calc(attr(size type()) * 1ch + 2rem); } .errors { color: red; } .errors ul li { list-style-type: "✘"; } #recipe-metadata { display: flex; flex-direction: row; /* Make the metadata blocks lay out horizontally... */ gap: 0rem 1.5rem; /* ...with 1.5rem gaps between. Don't have any gap between lines. */ flex-wrap: wrap; /* If there are too many to fit on one line, make them wrap to two lines. */ } #recipe-metadata ul { display: flex; flex-direction: row; /* The list of tags should also be horizontal, */ gap: 0.5rem; /* with a 0.5rem gap between tags. */ } .recipe-section { line-height: 1.25; } .recipe-section h2 { padding: 0rem 0rem 0.5rem 0rem; } .recipe-ingredients { text-indent: -1rem; /* Give the ingredients list a left-padding of 1rem and a text-indent of -1rem */ width: calc((100% - 1rem) / 3); padding: 0rem 0rem 0rem 1rem; } .recipe-steps { width: calc(2 * (100% - 1rem) / 3); } .recipe-steps ol { padding: 0em 0em 0em 1em; /* Give the list of steps a left-padding of 1em to line up the step numbers with the edge of the "Steps" label. */ } #recipe-img { transform: rotate(2deg); border: solid 5px; border-radius: 3px; border-color: white; width: 100%; /* Make the photo on the recipe page no wider than the sidebar. */ object-fit: contain; } .sidebar dl { padding: 0.5rem 0rem 0rem 0rem; /* Correction from Assignment #2; add 0.5rem padding between photo and cook times. */ } #recipe-search { width: 100%; /* Make the actual search box as wide as it can be. */ padding: 0.25rem; /* With 0.25rem of padding inside so that the search text isn't cramped. */ font-size: 125%; } #recipe-sidebar-and-description { display: flex; flex-direction: row; padding: 0rem 0rem 2rem 0rem; /* Add a 2rem gap between the recipe description and the recipe ingredients. */ gap: 1rem; } #recipe-ingredients-and-steps { display: flex; flex-direction: row; gap: 1rem; } .recipe-steps ul { padding: 0rem 0rem 1rem 0rem; padding-inline-start: 1rem; } .recipe-steps ul li { list-style-type: circle; padding: 0.25rem 0rem 0rem 0rem; } #recipe-sidebar-and-description .sidebar { width: calc((100% - 1rem) / 3); } .recipe-description { width: calc(2 * (100% - 1rem) / 3); } #profile-header { display: flex; flex-direction: row; justify-content: space-between; align-items: end; padding: 0rem 0rem 2rem 0rem; } #profile-header img { width: 5rem; height: 5rem; } #profile-title-metadata { display:flex; flex-direction: column; } #profile-metadata { display: flex; flex-direction: row; justify-content: start; gap: 0rem 2rem; } .visually-hidden { display: none; } @media (max-width: 700px) { #login_form .login_field { flex-direction: column; } #login_form .login_field input { width: 100%; } } @media (max-width: 600px) { ul li.recipe-card { width: calc((100% - 1rem) / 2); /* Two cards per row (accounting for 1rem gap between) */ } } @media (max-width: 500px) { body { padding: 0rem; /* Make the padding [around the edges of the screen] disappear below 500 pixels */ } .header-first-row, .header-second-row { padding: 0rem 0.5rem 0rem 0.5rem; /* Add back 0.5rem of padding inside the page header instead. */ } main { border-left: none; /* Also remove the left and right border, which would look weird right up against the screen edge. */ border-right: none; } #recipe-sidebar-and-description { flex-direction: column; /* Add CSS that does away with sidebars when the page is too narrow. */ gap: 2rem 0rem; /* There should be a 2rem gap between each. */ } #recipe-ingredients-and-steps { flex-direction: column; /* Add CSS that does away with sidebars when the page is too narrow. */ gap: 2rem 0rem; /* There should be a 2rem gap between each. */ } #recipe-sidebar-and-description .sidebar, .recipe-description, .recipe-ingredients, .recipe-steps { width: 100%; } } @media (max-width: 400px) { ul li.recipe-card { width: 100%; /* One card per row (accounting for 1rem gap between) */ } }