Skip to content

H
Hunger Buster - Breadcrumbs
Commit f00a864f authored by Andrea Tsai's avatar Andrea Tsai
Browse files
Options

Updated mainFridgeList.css (no grid, just rows)

parent b2432564
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 26 deletions
HTML and CSS Files/mainFridgeList.css
View file @ f00a864f
...@@ -20,15 +20,17 @@ body { ...@@ -20,15 +20,17 @@ body {
width: 100vw; width: 100vw;
display: grid; display: grid;
grid-template-columns: repeat(6, 16.67vw); grid-template-columns: repeat(6, 16.67vw);
grid-template-rows: 12.5vh 87.5vh;
text-align: left; text-align: left;
background-color: rgba(196, 196, 196, 1);
} }
.sidebar { .sidebar {
height: 100%; height: 200vh;
position: fixed;
width: 265px;
background-color: rgba(196, 196, 196, 1); background-color: rgba(196, 196, 196, 1);
display: grid; display: grid;
grid-template-rows: repeat(16, 6.25vh); grid-template-rows: repeat(16, 6.25vh);
grid-template-columns: repeat(2, 8.33vw);
grid-column: 1/2; grid-column: 1/2;
z-index:1; z-index:1;
...@@ -36,52 +38,47 @@ body { ...@@ -36,52 +38,47 @@ body {
} }
.sideItem { .sideItem {
display: grid; display: grid;
grid-template-columns: repeat(4);
text-align: center;
background-color: rgba(104, 104, 104, 1); background-color: rgba(104, 104, 104, 1);
opacity: .8; opacity: 0.7;
transform: none; transform: none;
} }
.sideItem:hover {
opacity: 1;
transition: opacity .5s;
}
.sideText { .sideText {
font-family: "Roboto"; font-family: "Roboto";
font-size: 24px; font-size: 24px;
color: white; color: white;
grid-column: 6/7; grid-column: 2/3;
text-align: center; margin-right: 5px;
text-align: right;
} }
#fridgeIcon { #fridgeIcon {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 100px; height: 15vh;
grid-row: 2/6; grid-row: 1/6;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
#recipesIcon { #recipesIcon {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 100px; height: 15vh;
grid-row: 5/9; grid-row: 4/9;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
#statsIcon { #statsIcon {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 100px; height: 15vh;
grid-row: 8/12; grid-row: 7/12;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
#toBuyIcon { #toBuyIcon {
background-color: white; background-color: white;
clip-path: circle(); clip-path: circle();
height: 100px; height: 15vh;
grid-row: 11/15; grid-row: 10/15;
grid-column: 1/2; grid-column: 1/2;
margin: 10px; margin: 10px;
} }
...@@ -102,15 +99,181 @@ body { ...@@ -102,15 +99,181 @@ body {
grid-column: 1/3; grid-column: 1/3;
} }
.pageSubhead {
grid-column: 2/7;
grid-row: 1/2;
background-color: white;
display: grid;
grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
grid-template-rows: repeat(3, 6.25vh);
}
.subheader {
font-family: "Roboto Medium";
font-size: 10vh;
grid-column: 2/3;
text-align: center;
}
.addItem {
grid-column: 3/4;
grid-row: 2/3
}
.addItemButton {
margin-left: 20px;
margin-right: 20px;
background-color: rgba(175, 175, 175, 1);
border-radius: 100px;
opacity: 0.7;
transform: none;
}
.addItemText {
font-family: "Roboto Medium";
font-size: 18px;
color: white;
text-align: center;
}
.changeView {
grid-column: 5/6;
grid-row: 2/3;
}
.changeViewDropdown {
background-color: rgba(228, 228, 228, 1);
opacity: 0.7;
transform: none;
}
.changeViewText {
text-align: center;
font-family: "Roboto Medium";
font-size: 14px;
}
.listView {
grid-column: 2/7;
grid-row: 2/3;
background-color: white;
display: grid;
grid-template-columns: 3vw repeat(3, 23vw) 3vw;
grid-template-rows: repeat(4, 20vh);
grid-column-gap: 3vw;
grid-row-gap: 3vw;
}
.listItem {
background-color: rgba(237, 237, 237, 1);
display: grid;
grid-template-columns: 10vw 15vw;
grid-template-rows: repeat(5, 5vh);
opacity: 0.7;
transform: none;
}
#listIcon {
grid-column: 1/2;
grid-row: 1/5;
text-align: center;
clip-path: circle();
background-color: rgba(196, 196, 196, 1);
margin: 5px;
}
.listText {
grid-column: 2/3;
text-align: left;
margin: 10px;
}
.daysLeft {
font-family: "Roboto Black";
font-size: 24px;
}
.product {
font-family: "Roboto Regular";
font-size: 20px;
}
.category {
font-family: "Roboto Regular";
font-size: 14px;
}
.one {
grid-column: 2/5;
grid-row: 1/2;
}
/*.two {
grid-column: 2/3;
grid-row: 2/3;
}
.three {
grid-column: 2/3;
grid-row: 3/4;
}
.four {
grid-column: 2/3;
grid-row: 4/5;
}
.five {
grid-column: 3/4;
grid-row: 1/2;
}
.six {
grid-column: 3/4;
grid-row: 2/3;
}
.seven {
grid-column: 3/4;
grid-row: 3/4;
}
.eight {
grid-column: 3/4;
grid-row: 4/5;
}
.nine {
grid-column: 4/5;
grid-row: 1/2;
}
.ten {
grid-column: 4/5;
grid-row: 2/3;
}
.eleven {
grid-column: 4/5;
grid-row: 3/4;
}
.twelve {
grid-column: 4/5;
grid-row: 4/5;
} */
@font-face { @font-face {
font-family: Roboto Bold; font-family: Roboto Bold;
src: url(Roboto-Bold.ttf); src: url(Roboto-Bold.ttf);
} }
@font-face {
font-family: Roboto Black;
src: url(Roboto-Black.ttf);
}
@font-face {
font-family: Roboto Medium;
src: url(Roboto-Medium.ttf);
}
@font-face { @font-face {
font-family: Roboto; font-family: Roboto;
src: url(Roboto-Regular.ttf); src: url(Roboto-Regular.ttf);
} }
.sideItem:hover {
opacity: 1;
transition: opacity .5s;
}
.listItem:hover {
opacity: 1;
transition: opacity .5s;
}
.addItemButton:hover {
opacity: 1;
transition: opacity .5s;
}
.changeViewDropdown:hover {
opacity: 1;
transition: opacity .5s;
}
.main{ .main{
margin-left:23%; margin-left: 23%;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment