134 lines
2.2 KiB
SCSS
134 lines
2.2 KiB
SCSS
/* todo: define and import fonts */
|
|
|
|
/* color variables */
|
|
$lightblue-1: rgb(81, 144, 147);
|
|
$midblue-1: rgb(65, 65, 159);
|
|
$darkblue-1: rgb(51, 53, 66);
|
|
|
|
/* universal styles */
|
|
.page {
|
|
display: flex;
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 4rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 7;
|
|
background-color: $midblue-1;
|
|
}
|
|
|
|
.light-page {
|
|
background-color: $lightblue-1;
|
|
}
|
|
|
|
/* navbar styles */
|
|
nav {
|
|
display: flex;
|
|
position: absolute;
|
|
background-color: rgb(12, 6, 6);
|
|
color: white;
|
|
top: 0;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 4rem;
|
|
border-bottom: 1px solid white;
|
|
z-index: 9;
|
|
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* landing page styles */
|
|
|
|
.landing {
|
|
* {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
header {
|
|
margin-top: 4rem;
|
|
width: 45vw;
|
|
}
|
|
section {
|
|
width: 60vw;
|
|
}
|
|
|
|
header, section {
|
|
background-color: $lightblue-1;
|
|
padding: 1.2rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
header, section, .shop-buttons {
|
|
box-shadow: 4px 4px white;
|
|
transition: box-shadow ease 1s;
|
|
}
|
|
|
|
header:hover, section:hover, .shop-buttons:hover {
|
|
box-shadow: 12px 12px white;
|
|
transition: box-shadow ease 600ms;
|
|
}
|
|
|
|
button {
|
|
background-color: $midblue-1;
|
|
color: white;
|
|
border-radius: 12px;
|
|
border-style: outset;
|
|
border-color: $lightblue-1;
|
|
width: 8rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: $lightblue-1;
|
|
border-color: $midblue-1;
|
|
box-shadow: 0 0 4px 4px red;
|
|
}
|
|
|
|
button:active {
|
|
background-color: black;
|
|
border-style: inset;
|
|
border-color: white;
|
|
}
|
|
|
|
.shop-buttons {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
width: 45vw;
|
|
height: 8rem;
|
|
justify-content: space-around;
|
|
background-color: $darkblue-1
|
|
}
|
|
}
|
|
|
|
// Login page styles
|
|
.login {
|
|
display: flex;
|
|
}
|
|
|
|
// products styles
|
|
.products-results {
|
|
display: flex;
|
|
}
|
|
|
|
.product-card {
|
|
background-color: white;
|
|
padding: 0.8rem;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
// cart styles
|
|
.cart-item-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 2rem;
|
|
background-color: white;
|
|
width: 75vw;
|
|
} |