Commit 5596c812 authored by Andrea Tsai's avatar Andrea Tsai

Updated sidebar to include image icons

parent c5e6282c
......@@ -24,8 +24,8 @@ body {
}
.sidebar {
height: 100%;
position:fixed;
width:265px;
position: fixed;
width: 265px;
background-color: rgba(196, 196, 196, 1);
display: grid;
grid-template-rows: repeat(16, 6.25vh);
......@@ -35,35 +35,71 @@ body {
left:0;
}
.sideItem {
grid-template-columns: repeat(2, 12.5vw);
display: grid;
grid-template-columns: repeat(4);
text-align: center;
background-color: rgba(104, 104, 104, 1);
opacity: .8;
transform: none;
}
.sideItem:hover {
opacity: 1;
transition: opacity .5s;
}
.text {
.sideText {
font-family: "Roboto";
font-size: 24px;
color: white;
grid-column: 2/3;
grid-column: 6/7;
text-align: center;
}
#fridgeIcon {
background-color: white;
clip-path: circle();
height: 100px;
grid-row: 2/6;
grid-column: 1/2;
margin: 10px;
}
.icon {
#recipesIcon {
background-color: white;
clip-path: circle();
height: 100px;
grid-row: 5/9;
grid-column: 1/2;
margin: 10px;
}
.circle {
margin: 5px;
#statsIcon {
background-color: white;
clip-path: circle();
height: 100px;
grid-row: 8/12;
grid-column: 1/2;
margin: 10px;
}
#toBuyIcon {
background-color: white;
clip-path: circle();
height: 100px;
grid-row: 11/15;
grid-column: 1/2;
margin: 10px;
}
.fridge {
grid-row: 3/4;
grid-column: 1/3;
}
.recipes {
grid-row: 6/7;
grid-column: 1/3;
}
.stats {
grid-row: 9/10;
grid-column: 1/3;
}
.toBuy {
grid-row: 12/13;
grid-column: 1/3;
}
@font-face {
......
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