Ghost_Ruby_Theme/assets/css/blog/navigation.css

78 lines
1.2 KiB
CSS
Raw Normal View History

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