scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

center align grid while left aligning projects

Browse source 
Fixes #573
This commit is contained in:
Matthew Taylor 2016-06-15 09:34:15 -04:00
parent 55765551ae
commit 2193914650
2 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,16 +2,25 @@
.grid { .grid {
display: inline-block; display: inline-block;
width: 100%;
$project-width: 200px;
$project-height: 150px;
$gallery-width: 200px;
$gallery-height: 118px;
.flex-row {
margin: 0 auto;
padding: 12px; padding: 12px;
justify-content: space-around; width: (96px + (4 * $project-width)) / $em;
align-items: center; justify-content: flex-start;
}
.thumbnail { .thumbnail {
padding: 12px; padding: 12px;
&.project { &.project {
$project-width: 200px;
$project-height: 150px;
width: $project-width; width: $project-width;
img { img {
@ -21,8 +30,6 @@
} }
&.gallery { &.gallery {
$gallery-width: 200px;
$gallery-height: 118px;
width: $gallery-width; width: $gallery-width;
img { img {
@ -40,4 +47,12 @@
@media only screen and (max-width: $tablet - 1) { @media only screen and (max-width: $tablet - 1) {
flex-direction: column; flex-direction: column;
} }
@media only screen and (max-width: $desktop - 1) {
.flex-row {
padding: 12px 0;
width: 100%;
justify-content: space-around;
}
}
} }