LibreGaming
/
contentdb
14
0
Fork 0
Code Issues 13 Pull Requests Projects Releases Wiki Activity

Use flexbox for responsive package grid

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

4
app/scss/page.scss
View File

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