scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Re-structure grid styling a bit

Browse source 
combine stylings where possible, re-name some of the variables to be used more often
This commit is contained in:
Matthew Taylor 2016-08-24 10:24:01 -04:00
parent 28f96a1d0d
commit fb5d9788f8
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/grid/grid.scss
View file

@ -5,11 +5,11 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
$project-width: 220px; $thumbnail-width: 220px;
$project-height: 208px; $thumbnail-inner-width: 204px;
$gallery-width: 200px; $project-height: 208px;
$gallery-height: 118px; $gallery-height: 164px;
.flex-row { .flex-row {
margin: 0 auto; margin: 0 auto;
@ -22,46 +22,46 @@
margin: 6px; margin: 6px;
padding: 0; padding: 0;
&.gallery,
&.project { &.project {
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray; box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white; background-color: $ui-white;
width: $project-width; width: $thumbnail-width;
height: $project-height;
.thumbnail-image { .thumbnail-image {
margin: 8px auto; margin: 8px auto;
width: 204px; width: $thumbnail-inner-width;
}
}
&.project {
height: $project-height;
.thumbnail-image {
height: 152px; height: 152px;
img { img {
margin: 0 auto; margin: 0 auto;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
width: 204px; width: $thumbnail-inner-width;
height: 152px; height: 152px;
} }
} }
} }
&.gallery { &.gallery {
margin-bottom: 16px; height: $gallery-height;
border-radius: 4px;
box-shadow: 0 0 3px $box-shadow-gray;
background-color: $ui-white;
width: $project-width;
height: 164px;
.thumbnail-image { .thumbnail-image {
margin: 8px auto;
width: 204px;
height: 120px; height: 120px;
img { img {
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
width: 204px; width: $thumbnail-inner-width;
height: 120px; height: 120px;
} }
} }
@ -69,7 +69,7 @@
.thumbnail-info { .thumbnail-info {
margin: 0 auto; margin: 0 auto;
width: 204px; width: $thumbnail-inner-width;
.creator-image { .creator-image {
float: left; float: left;