client/posts: respect right side margin in original and height fit modes

Still not perfect for comment section and edit mode, but we should
really replace image resizing logic with css.
This commit is contained in:
Eva 2023-05-24 09:40:46 +02:00
parent 81416b6024
commit e2bdb5feab
2 changed files with 39 additions and 22 deletions

View file

@ -15,38 +15,53 @@
border: 0
outline: 0
nav.buttons
margin-top: 0
display: flex
flex-wrap: wrap
article
flex: 1 0 33%
a
display: inline-block
width: 100%
padding: 0.3em 0
text-align: center
vertical-align: middle
transition: background 0.2s linear, box-shadow 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
>.sidebar>nav.buttons, >.content nav.buttons
margin-top: 0
display: flex
flex-wrap: wrap
article
flex: 1 0 33%
a
display: inline-block
width: 100%
padding: 0.3em 0
text-align: center
@media (max-width: 800px)
margin-top: 2em
vertical-align: middle
transition: background 0.2s linear, box-shadow 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
text-align: center
@media (max-width: 800px)
margin-top: 0.6em
margin-bottom: 0.6em
>.content
width: 100%
&[data-fit=fit-original] .after-mobile-controls, &[data-fit=fit-height] .after-mobile-controls
width: auto
margin-right: 1.5em
@media (max-width: 1000px)
margin-right: 1em
.post-container
margin-bottom: 2em
margin-bottom: 0.6em
.post-content
margin: 0
background-size: cover
background-repeat: no-repeat
background-origin: content-box
padding-right: 1.5em
@media (max-width: 1000px)
padding-right: 1em
.after-mobile-controls
width: 100%
.darktheme .post-view
>.sidebar
>.sidebar, >.content
nav.buttons
article
a:not(.inactive):hover
@ -56,6 +71,8 @@
@media (max-width: 800px)
.post-view
flex-wrap: wrap
>.after-mobile-controls
order: 3
>.sidebar
order: 2
min-width: 100%
@ -113,7 +130,6 @@
h1
margin-bottom: 0.5em
.thumbnail
background-position: 50% 30%
width: 4em
height: 3em
li

View file

@ -175,6 +175,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
oldNode.classList.remove("active");
}
newNode.classList.add("active");
document.querySelector(".content").dataset.fit = className;
}
_evtAddToFavoritesClick(e) {