mirror of
https://github.com/msfjarvis/msfjarvis.dev.git
synced 2024-06-03 04:18:56 +05:30
Stylize images with borders and captions
Taken from https://css-tricks.com/give-your-images-space-and-captions-for-better-layout/ and adapted to be a Hugo render hook. Signed-off-by: Harsh Shandilya <msfjarvis@gmail.com>
This commit is contained in:
parent
e9335a187a
commit
155aecc274
4
layouts/_default/_markup/render-image.html
Normal file
4
layouts/_default/_markup/render-image.html
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="image_caption">
|
||||||
|
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
|
||||||
|
<p>{{ .Text }}</p>
|
||||||
|
</div>
|
|
@ -82,6 +82,16 @@ a:focus {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.image_caption {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border: 2px solid #cccccc;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
color: #757575;
|
color: #757575;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user