add preview placeholder

This commit is contained in:
jomo 2015-01-03 05:14:50 +01:00
parent a81c3c9de4
commit 756ede7d83
2 changed files with 20 additions and 1 deletions

View File

@ -108,7 +108,7 @@ h4 {
height: 220px;
}
.code .example-wrapper .preview {
.code .example-wrapper .preview, .code .preview-placeholder {
display: none;
width: 100%;
position: absolute;
@ -122,6 +122,19 @@ h4 {
color: #666;
}
.code .preview-placeholder {
display: block;
}
.code .preview-placeholder:hover {
/* fixes glitchy blinking */
display: block !important;
}
.code:hover .preview-placeholder {
display: none;
}
.code .example-wrapper .preview i {
color: #aaa;
}

View File

@ -101,6 +101,8 @@ block content
.example #{domain}/avatars/jeb_?default=https://i.imgur.com/ocJVWAc.png
p.preview
| Jeb's avatar, or fall back to a custom image <i>(this example assumes jeb_ does not exist)</i>
p.preview-placeholder
| Hover one the examples for a preview!
.preview-background
@ -157,6 +159,8 @@ block content
#render-example-2.example-wrapper
.example #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8
p.preview Jeb's head, by UUID, scale 8
p.preview-placeholder
| Hover one the examples for a preview!
.preview-background
@ -212,6 +216,8 @@ block content
#skin-example-2.example-wrapper
.example #{domain}/skins/jeb_?default=alex
p.preview Jeb's skin, or fall back to alex <i>(this example assumes jeb_ does not exist)</i>
p.preview-placeholder
| Hover one the examples for a preview!
.preview-background