diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 344a6fb..4933232 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -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; } diff --git a/views/index.jade b/views/index.jade index 1e0d161..9ed55f6 100644 --- a/views/index.jade +++ b/views/index.jade @@ -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 (this example assumes jeb_ does not exist) + 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 (this example assumes jeb_ does not exist) + p.preview-placeholder + | Hover one the examples for a preview! .preview-background