You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1023 B
SCSS
79 lines
1023 B
SCSS
html {
|
|
background: #eee;
|
|
}
|
|
|
|
body {
|
|
max-width: 1024px;
|
|
margin: 1rem auto;
|
|
background: white;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.delete-button {
|
|
height: 1rem;
|
|
padding: 0;
|
|
line-height: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@import "includes.scss";
|
|
|
|
#app {
|
|
grid-template-areas:
|
|
"navbar navbar"
|
|
"sidebar content"
|
|
"footer footer";
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
.navbar {
|
|
grid-area: navbar;
|
|
.logo {
|
|
font-size: 60px;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
|
|
@keyframes enter {
|
|
from {
|
|
opacity: 0%;
|
|
}
|
|
to {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
.items {
|
|
display: grid;
|
|
grid-gap: 20px;
|
|
grid-template-columns: repeat(auto-fit, minmax(161px, 241px));
|
|
|
|
li {
|
|
background-color: white;
|
|
box-shadow: 1px 1px 5px 0px #00000059;
|
|
list-style: none;
|
|
padding: 0 20px;
|
|
|
|
// animation: enter 200ms;
|
|
// animation-fill-mode: both;
|
|
// @for $i from 1 through 20 {
|
|
// &:nth-child(#{$i}) {
|
|
// animation-delay: #{$i * 50}ms;
|
|
// }
|
|
// }
|
|
}
|
|
}
|