Thumbnail grid fixed for Foundation 6

This commit is contained in:
Christoph Haas 2016-03-03 17:13:11 +01:00
parent 030d80fa30
commit 61dc736fcb
2 changed files with 54 additions and 34 deletions

View file

@ -54,8 +54,8 @@ $debian-color: #c70338;
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
//$primary-color: #2199e8;
$primary-color: $debian-color;
$primary-color: #808080;
//$primary-color: $debian-color;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
@ -378,7 +378,8 @@ $mediaobject-image-width-stacked: 100%;
$menu-margin: 0;
$menu-margin-nested: 1rem;
$menu-item-padding: 0.7rem 1rem;
//$menu-item-padding: 0.7rem 1rem;
$menu-item-padding: 1.2rem 1rem;
$menu-icon-spacing: 0.25rem;
$menu-expand-max: 6;
@ -518,7 +519,8 @@ $tab-content-padding: 1rem;
$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-shadow-hover: 0 0 6px 3px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
@ -601,6 +603,11 @@ $footer-text-color: #b3b3b3;
$menu-item-background-active: $primary-color;
header
{
background-color: $light-gray;
}
body
{
background-color: $page-background;
@ -623,7 +630,7 @@ body
// Display the site name in a larger font
font-size: 26px;
padding: 8px 5px 3px 0;
color: #babdb6;
color: $dark-gray;
// Extra space around the Linux distribution's logo
img
@ -683,28 +690,38 @@ html, body {
}
// Screenshot thumbnail image with name and description
.thumbnail
// .thumbnail
// {
// padding-top: 5px !important;
// padding-bottom: 5px !important;
// border-radius: 10px;
// margin-bottom: 10px;
// text-align: center;
// line-height: 120%;
// &:hover
// {
// background-color: #d0d0d0;
// }
// .pkgname
// {
// font-weight: 700;
// }
// .pkgdescription
// {
// font-size: 80%;
// }
// }
.grid-thumbnails .column
{
padding-top: 5px !important;
padding-bottom: 5px !important;
// border: 5px solid green;
border-radius: 10px;
margin-bottom: 10px;
// border: 2px solid $light-gray;
// height: 300px;
padding: 5px 5px 50px 5px;
text-align: center;
line-height: 120%;
&:hover
{
background-color: #d0d0d0;
}
.pkgname
{
font-weight: 700;
}
.pkgdescription
{
font-size: 80%;
}
}
// Vertical icon bar in package view
@ -751,13 +768,13 @@ html, body {
}
}
.row .gridview
{
img.screenshot
{
width: 100%;
}
}
// .row .gridview
// {
// img.screenshot
// {
// width: 100%;
// }
// }
.pkgname
{
@ -798,7 +815,8 @@ html, body {
*/
.grid-thumbnail
{
height: 125px;
// Pretend that all thumbnails are 120 pixels high to align the captions properly
height: 130px;
}
// Avoid painting links to detail packages in the primary color
@ -887,6 +905,7 @@ a.black
}
}
// .ratingbar
// {
// background-color: $progress-bar-color;
@ -921,3 +940,4 @@ a.black
margin-left: 2em;
margin-bottom: 0.5em;
}

View file

@ -12,9 +12,9 @@
.row
.small-9.large-10.columns
- if @packages.length>0
ul.small-block-grid-1.medium-block-grid-3.large-block-grid-4
.row.small-up-1.medium-up-3.large-up-4.grid-thumbnails
- @packages.all.each do |pkg|
li.thumbnail
.column
= render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
- else