Merge pull request #223 from lektor/showcase-style-fixes

[showcase-style-fixes] and setting cropped height on tall showcase images
This commit is contained in:
Joseph Nix 2018-06-08 16:40:11 -05:00 committed by GitHub
commit 29dbf9f779
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@ -38,8 +38,11 @@
<small>You want your own website on here? <a <small>You want your own website on here? <a
href="https://github.com/lektor/lektor-website/tree/master/content/showcase">Fork href="https://github.com/lektor/lektor-website/tree/master/content/showcase">Fork
the Lektor Website Repository on GitHub</a> to add your own project. the Lektor Website Repository on GitHub</a> to add your own project.
Make sure to add screenshots (aspect ratio ~ 1.6:1) and a description Make sure to add screenshots and a description about the project.
about the project. We encourage you to add a link to your source code The primary screenshot is thumbnailed on this page to 415px wide, and cropped to
260px tall, and on your site's individual page the larger images are 870px wide.
We encourage you to add a link to your source code
so that others can learn from your example. so that others can learn from your example.
</small> </small>
{% endblock %} {% endblock %}

View File

@ -13,6 +13,7 @@ $font-size-h5: $font-size-base;
$font-size-h6: ceil(($font-size-base * 0.85)); $font-size-h6: ceil(($font-size-base * 0.85));
$container-large-desktop: 900px; $container-large-desktop: 900px;
$container-desktop: $container-large-desktop; // md is the same.
$border-radius-base: 0; $border-radius-base: 0;
$border-radius-large: 0; $border-radius-large: 0;
@ -781,6 +782,11 @@ div.showcase {
.frame { .frame {
background: white; background: white;
@media (min-width: $screen-sm-max) {
max-height: 260px; // Taller thumbnails get cropped.
overflow: hidden;
}
} }
&:hover { &:hover {