@media screen and (orientation: portrait){ @media screen and (max-width: 1400px){ body{ background:rgb(0, 27, 45); } .button{ padding: 3px 0; } .mobileMenuSelector{ color:rgb(240, 252, 255); z-index: 10; } .strandTitle{ color: white; position: fixed; top: 15px; left: 0; right: 0; margin: 0; text-align: center; font-size: 20px; } .choosable{ background:rgb(201, 201, 201); color: black; } /* HOME */ #inventoryCheckCard{ display: none; } #graphCard{ display: none; } .card{ background: white; } /* INGREDIENT INVENTORY */ #categoryList{ width: 95%; } .categoryDiv{ margin: 5px; } .categoryDiv > div:first-of-type p{ padding: 10px; margin-right: 15px; } .categoryDiv > div:first-of-type button{ padding: 10px; height: initial; width: initial; display: flex; } .ingredientsDiv{ width: 90%; } /* RECIPE BOOK */ #recipeList{ width: 90%; } /* ANALYTICS */ #analyticsStrand .strandHead{ height: 23vh; flex-direction: column; } #analyticsStrand .strandTitle{ position: static; } .switch{ margin-top: 0; } .analDateRange{ display: none; } .analContent{ flex-direction: column; justify-content: space-between; padding: 0; height: 70vh; } .itemsList{ width: 90%; height: 47%; margin-bottom: 10px; } .analData{ height: 47%; } .dataRow{ flex-direction: column; } #itemUseGraph{ display: none; } #analDailyAverages{ display: none; } #recipeSalesGraph{ display: none; } /* ORDERS */ #ordersStrand .strandHead{ justify-content: center; } #newOrderBtn{ display: none; } #orderList{ width: 90%; } #orderList > div p:nth-child(2){ display: none; } /* TRANSACTIONS */ #transactionsStrand .strandHead{ justify-content: center; } .transactionsList{ width: 90%; } @media screen and (min-width: 601px){ .strandTitle{ font-size: 40px; } .mobileMenuSelector{ left: 40px; top: 20px; } /* HOME */ #graphCard{ display: flex; } /* RECIPE BOOK */ #recipeList{ width: 75%; } /* ORDERS */ #ordersStrand .strandHead{ margin-top: 25px; } /* TRANSACTIONS */ #transactionsStrand .strandHead{ margin-top: 25px; } } } } @media screen and (orientation: landscape){ @media screen and (max-width: 1200px){ body{ background: rgb(0, 27, 45); } .contentBlock{ padding: 0; } .button{ padding: 3px 0; } .mobileMenuSelector{ display: flex; color: rgb(240, 252, 255); z-index: 10; } .strandHead{ color: white; position: fixed; top: 5px; left: 25px; right: 0; margin: 0; text-align: center; font-size: 20px; } .strandTitle{ margin: 0; } .choosable{ background: rgb(201, 201, 201); color: black; } /* HOME */ #homeStrand{ flex-direction: row; padding: 0; align-items: flex-end; } #graphCard{ display: none; } #inventoryCheckCard{ display: none; } .flexRow{ height: 80%; } .flexRow:nth-child(3){ flex-grow: 2; } .card{ background: white; } #popularIngredientsCard{ max-height: 100%; padding-bottom: 5px; } /* INGREDIENTS */ #ingredientsStrand{ padding-bottom: 10px; justify-content: flex-end; } #categoryList{ height: 70%; } .categoryDiv{ margin: 3px; } .categoryDiv > div:first-of-type p{ padding: 5px 10px; } .categoryDiv > div:first-of-type button{ padding: 0; height: initial; width: initial; display: flex; align-items: center; } .ingredientsDiv{ width: 90%; } /* RECIPE BOOK */ #recipeBookStrand{ padding-bottom: 10px; justify-content: flex-end; } #recipeList{ height: 70%; } /* ANALYTICS */ #analyticsStrand{ padding-bottom: 10px; justify-content: space-between; } #analyticsStrand .strandHead{ position: static; height: unset; flex-wrap: wrap; } #analyticsStrand .strandTitle{ width: 100%; margin-top: -13px; margin-left: 10px; } .switch{ margin-top: -15px; font-size: 15px; } #analyticsStrand .dateRange{ margin-top: -55px; } .analDateRange{ display: none; } .analContent{ padding: 0; height: 70%; } .itemsList{ width: 23%; } .analData{ width: 73% } .dataRow{ display: none; } .modebar-container{ display: none; } #analRecipeContent{ height: 70%; } #newOrderBtn{ display: none; } /* ORDERS */ #ordersStrand{ justify-content: flex-end; } #ordersStrand .buttonBox{ margin: 0; } #orderList{ height: 70%; } /* TRANSACTIONS */ #transactionsStrand{ justify-content: flex-end; } #transactionsStrand .buttonBox{ margin: 0; } #transactionsList{ height: 70%; } @media screen and (min-width: 1000px){ .mobileMenuSelector{ top: 20px; left: 40px; } .strandTitle{ margin: 15px; } /* HOME */ #homeStrand{ flex-direction: column; justify-content: flex-end; } #graphCard{ display: flex; } .flexRow{ max-height: 40vh; } .flexRow:nth-child(2){ flex-grow: 2; } .flexRow:nth-child(3){ flex-grow: 1; } /* INGREDIENTS */ #categoryList{ height: 80%; } /* RECIPE BOOK */ #recipeList{ height: 80%; } /* ANALYTICS */ #analyticsStrand .strandTitle{ margin-top: 8px; margin-left: 30px; } .analDateRange{ display: block; } #analRecipeContent, .analContent{ height: 80%; } /* ORDERS */ #orderList{ height: 80%; } /* TRANSACTIONS */ #transactionsList{ height: 80%; } } } }