Add default example thumbnail as fallback and apply style to overflow example text
MODIFY
examples/build-website.js
examples/build-website.js
@@ -46,4 +46,7 @@ exampleJs: ${JSON.stringify(json.exampleJs)}
fs.writeFileSync(path.resolve(json.output, 'index.html'), html);
});
+// copy common files
+fs.copySync('examples/common', 'website/source/examples/common');
+
buildUtils.writeYamlList(path.resolve('website', 'source', '_data'), 'examples.yml', examples);

ADD
examples/common/thumb.jpg
examples/common/thumb.jpg
Binary files /dev/null and b/examples/common/thumb.jpg differ

MODIFY
website/themes/agency/layout/examples.ejs
website/themes/agency/layout/examples.ejs
<a href="<%- example.name %>">
<div class="thumbnail-hover">
</div>
- <img src="<%- example.name %>/thumb.jpg">
+ <img src="<%
+ if(fileExists(`source/examples/${example.name}/thumb.jpg`)){
+ %><%- `${example.name}/thumb.jpg` %><%
+ }
+ else {
+ %><%- 'common/thumb.jpg' %><%
+ } %>">
</a>
</div>
<div class="col-xs-7 word-container">

MODIFY
website/themes/agency/source/css/main.scss
website/themes/agency/source/css/main.scss
// overwrites
-
.jumbotron {
background-color: inherit;
}
.navbar-custom .nav li a {
text-transform: none;
}
+
// @media (min-width: 768px) {
// .navbar-nav>li>a {
// padding: 12px 10px;
// }
// }
-
p {
font-size: 16px;
}
@@ -114,7 +113,6 @@ footer{
width: 1.4em;
}
}
-
}
// examples page
@@ -125,7 +123,23 @@ footer{
padding-bottom: 25px;
border-bottom: 1px solid #eee;
+ >.row {
+ position: relative;
+ overflow-y: hidden;
+
+ &::after {
+ content: ' ';
+ width: 54.16666%;
+ position: absolute;
+ height: 50px;
+ background: linear-gradient(rgba(255, 0, 0, 0), white);
+ right: 0;
+ bottom: 0;
+ }
+ }
+
.thumbnail-container {
+ float: left;
padding-right: 0;
width: 45.83333%;
@@ -157,6 +171,7 @@ footer{
}
.word-container {
+ float: left;
width: 54.16666%;
padding-right: 5px;
}
@@ -166,6 +181,7 @@ footer{
}
.description {
+ height: 0;
margin-top: 20px;
}
}

Add default example thumbnail as fallback and apply style to overflow example text