Mirrorlandia_minetest/contentdb
1
0
Fork 0
mirror of https://github.com/minetest/contentdb.git synced 2024-12-23 06:22:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use flexbox for responsive package grid

Browse Source
This commit is contained in:
Sam Walker 2018-05-11 11:39:58 +01:00 committed by rubenwardy
parent 5e44f3d64c
commit 7aec5368d8
No known key found for this signature in database
GPG Key ID: A1E29D52FF81513C
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/scss/packagegrid.scss
View File

@ -1,26 +1,32 @@
.packagegrid { .packagegrid {
list-style: none; display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.packagegrid li { .packagegrid li {
list-style: none; flex: 1;
display: inline-block; display: block;
padding: 0; min-width: 246px;
margin: 8px; min-height: 164px;
padding: 1;
margin: 5px;
} }
.packagegrid a { .packagegrid a {
display: block; display: block;
width: 246px; padding-bottom: 66.66%;
height: 164px;
border-radius: 7px; border-radius: 7px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }

4
app/scss/page.scss
View File

@ -6,7 +6,7 @@ html, body {
margin: 0; margin: 0;
} }
nav, main, #alerts { nav, main, #alerts {
width: 90%; width: 90%;
max-width: 960px; max-width: 960px;
margin: auto; margin: auto;
@ -57,7 +57,7 @@ nav a:hover {
header { header {
padding: 20px; padding: 20px;
background: #113; background: #2988a4;
} }
header p { header p {