hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify post nav styles

Browse Source
This commit is contained in:
daudix
2024-09-18 20:08:25 +03:00
parent a432829499
commit 1ae5bdd329
2 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
sass/_post-nav.scss
View File

@ -1,16 +1,19 @@
#post-nav {
display: flex;
flex-direction: row;
gap: 0.25rem;
max-width: 100vw;
@media only screen and (max-width: 720px) {
flex-direction: column;
}
.post-nav-item {
flex: 1 1 0;
flex: 1;
transition: var(--transition);
border-radius: var(--rounded-corner);
padding: 1rem;
padding-block-end: 0.75rem;
width: 0;
max-width: calc(50% - 0.125rem);
min-width: 0;
text-decoration: none;
&:hover {
@ -35,7 +38,6 @@
}
&.post-nav-next {
margin-inline-start: auto;
text-align: end;
.nav-arrow::after {
@ -48,7 +50,7 @@
}
.nav-arrow {
margin-block-end: 0.5rem;
margin-block-end: 0.75rem;
color: var(--fg-muted-5);
font-weight: normal;
line-height: 1;
@ -57,19 +59,11 @@
.post-title {
display: block;
transition: var(--transition);
max-width: 90vw;
overflow: hidden;
color: var(--fg-color);
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media only screen and (max-width: 720px) {
flex-direction: column;
.post-nav-item {
width: 100%;
max-width: 100%;
}
}
}