lbry.tech/content/.vuepress/scss/partials/_footer.scss

65 lines
1.1 KiB
SCSS
Raw Normal View History

2018-05-03 23:55:34 +02:00
.footer {
background-color: $black;
2018-05-08 22:55:33 +02:00
color: rgba($white, 0.15);
2018-05-03 23:55:34 +02:00
font-size: 1rem;
2018-05-11 16:07:16 +02:00
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
2018-05-10 21:13:25 +02:00
> div:first-of-type {
2018-05-17 21:09:18 +02:00
@media (max-width: 980px) {
2018-05-10 21:13:25 +02:00
overflow: auto;
overflow-scrolling: touch;
white-space: nowrap;
2018-05-11 16:07:16 +02:00
width: 100%;
2018-05-10 21:13:25 +02:00
}
}
2018-05-03 23:55:34 +02:00
ul {
list-style-type: none;
2018-05-10 21:13:25 +02:00
padding-top: 2rem;
padding-bottom: 2rem;
2018-05-17 21:09:18 +02:00
@media (min-width: 981px) {
2018-05-10 21:13:25 +02:00
align-items: stretch;
display: flex;
flex-flow: row wrap;
}
2018-05-03 23:55:34 +02:00
li {
padding-right: 0.5rem;
padding-left: 0.5rem;
2018-05-10 21:13:25 +02:00
vertical-align: bottom;
2018-05-17 21:09:18 +02:00
@media (max-width: 980px) {
2018-05-10 21:13:25 +02:00
display: inline-block;
transform: translate3d(0, 0, 0);
transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
&:last-of-type {
margin-right: 3rem;
}
}
2018-05-03 23:55:34 +02:00
&:first-of-type {
flex: 1;
}
&:last-of-type {
cursor: default;
}
}
}
a {
transition: color 0.2s;
&:not(:hover) {
color: $white;
2018-05-03 23:55:34 +02:00
}
&:hover {
2018-05-11 20:01:39 +02:00
color: $teal;
2018-05-03 23:55:34 +02:00
}
}
}