Websites
/
lektor-website
mirror of https://github.com/lektor/lektor-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[showcase-style-fixes] Fixing main container expanding in size on medium viewport, and cropping tall thumbnails on showcase page.

This commit is contained in:
Joseph Nix 2018-06-08 16:32:45 -05:00
parent 2a5abb35e4
commit b10d32fa51
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/static/styles.css
View File

File diff suppressed because one or more lines are too long

7
templates/showcase.html
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 %}

6
webpack/scss/main.scss
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 {