diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 211d517..ebd2a85 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -77,9 +77,22 @@ Fluttering and dancing in the breeze. 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) +_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 diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss index 5043bd3..b656335 100644 --- a/assets/css/_addon/main.scss +++ b/assets/css/_addon/main.scss @@ -461,11 +461,6 @@ $sidebar-display: "sidebar-display"; #post-wrapper { min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height})!important; - .post-content { - a:hover { - @extend %link-hover; - } - } } #topbar-wrapper.row, @@ -795,7 +790,6 @@ div.post-content .table-wrapper { } - /*--- post ---*/ .pageviews .fa-spinner { @@ -832,11 +826,21 @@ div.post-content .table-wrapper { p { font-size: 1.08rem; > img { - margin-top: .5rem; - margin-bottom: 1.5rem; - @include align-center; + &:not([style]) { + margin: .5rem 0; + @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 {