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

1
CHANGELOG.md
View File

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Increased hover scale of aside images. - Increased hover scale of aside images.
- Scale up the blurred article banner in article list on hover. - Scale up the blurred article banner in article list on hover.
- Simplify prev/next post nav styles.
- Use decimals instead of percents (again). - Use decimals instead of percents (again).
## [5.0.0](https://codeberg.org/daudix/duckquill/compare/v4.8.0...v5.0.0) ## [5.0.0](https://codeberg.org/daudix/duckquill/compare/v4.8.0...v5.0.0)

24
sass/_post-nav.scss
View File

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