Ghost_Ruby_Theme/assets/css/blog/navigation.css
2020-10-19 09:07:40 +08:00

78 lines
1.3 KiB
CSS

.navigation {
display: flex;
margin-top: 30px;
}
.navigation-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: 0 20px;
min-height: 100px;
width: 50%;
border-radius: 5px;
}
.navigation-item::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: var(--black-color);
opacity: 0.4;
transition: opacity 0.2s var(--animation-base);
}
.navigation-item:hover::before {
opacity: 0.6;
}
.navigation-previous {
margin-right: 7px;
}
.navigation-next {
align-items: flex-end;
margin-left: auto;
text-align: right;
}
.navigation-label {
position: relative;
z-index: 2;
padding-top: 25px;
color: var(--white-color);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.8;
}
.navigation-title {
position: relative;
z-index: 2;
margin: 5px 0 0;
padding-bottom: 25px;
color: var(--white-color);
font-size: 17px;
}
@media (max-width: 767px) {
.navigation {
display: block;
}
.navigation-item {
width: 100%;
}
.navigation-next {
margin-top: 7px;
}
}