asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Add styles to image caption (#144)

Browse source
This commit is contained in:
Cotes Chung 2020-10-06 20:15:19 +08:00
parent 67d962d707
commit 944d0ad724
2 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
_posts/2019-08-08-text-and-typography.md
View file

@ -77,9 +77,22 @@ Fluttering and dancing in the breeze.
Click the hook will locate the footnote[^footnote]. Click the hook will locate the footnote[^footnote].
## Image ## Images
By default, the image is centered and the image caption can be displayed at the bottom:
![Desktop View](/assets/img/sample/mockup.png) ![Desktop View](/assets/img/sample/mockup.png)
_Full screen width and center alignment_
You can change the size of the picture:
![Desktop View](/assets/img/sample/mockup.png){: width="400"}
_400px image width_
In addition, you can use custom styles to change the image position (do not use caption in this case):
![Desktop View](/assets/img/sample/mockup.png){: width="200" style="float: left; margin: .75rem 1rem 1rem 0"}
_A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space._
## Inline code ## Inline code

20
assets/css/_addon/main.scss
View file

@ -461,11 +461,6 @@ $sidebar-display: "sidebar-display";
#post-wrapper { #post-wrapper {
min-height: calc(100vh - #{$topbar-height} min-height: calc(100vh - #{$topbar-height}
- #{$footer-height} - #{$post-extend-min-height})!important; - #{$footer-height} - #{$post-extend-min-height})!important;
.post-content {
a:hover {
@extend %link-hover;
}
}
} }
#topbar-wrapper.row, #topbar-wrapper.row,
@ -795,7 +790,6 @@ div.post-content .table-wrapper {
} }
/*--- post ---*/ /*--- post ---*/
.pageviews .fa-spinner { .pageviews .fa-spinner {
@ -832,11 +826,21 @@ div.post-content .table-wrapper {
p { p {
font-size: 1.08rem; font-size: 1.08rem;
> img { > img {
margin-top: .5rem; &:not([style]) {
margin-bottom: 1.5rem; margin: .5rem 0;
@include align-center; @include align-center;
+ em {
display: block;
text-align: center;
font-style: normal;
font-size: 80%;
padding: 0;
margin-top: .7rem;
color: #6d6c6c;
} }
} }
}
}// p
} }
.tag:hover { .tag:hover {