Make the tiles a bit smaller

This commit is contained in:
KodeStar 2018-02-04 15:40:01 +00:00
parent 3a3014ff8c
commit ad1b669d27
3 changed files with 22 additions and 22 deletions

22
public/css/app.css vendored
View file

@ -483,17 +483,17 @@ body {
} }
.item { .item {
width: 300px; width: 280px;
height: 130px; height: 90px;
margin: 20px; margin: 20px;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 300px; -ms-flex: 0 0 280px;
flex: 0 0 300px; flex: 0 0 280px;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25))); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
border-radius: 6px; border-radius: 6px;
padding: 20px; padding: 15px;
padding-right: 80px; padding-right: 55px;
-webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
color: white; color: white;
@ -513,12 +513,12 @@ body {
.item:after { .item:after {
content: ""; content: "";
position: absolute; position: absolute;
width: 130px; width: 90px;
height: 134px; height: 90px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
right: -78px; right: -48px;
top: -2px; top: 0px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2); box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
@ -531,7 +531,7 @@ body {
height: 100%; height: 100%;
width: 52px; width: 52px;
text-align: center; text-align: center;
line-height: 134px; line-height: 90px;
color: white; color: white;
font-size: 24px; font-size: 24px;
z-index: 1; z-index: 1;

View file

@ -1,4 +1,4 @@
{ {
"/css/app.css": "/css/app.css?id=c964ba5defde2ec4a157", "/css/app.css": "/css/app.css?id=2edca3a26209c37ea9d2",
"/js/app.js": "/js/app.js?id=aa9e426dc7b92d42d3b2" "/js/app.js": "/js/app.js?id=aa9e426dc7b92d42d3b2"
} }

View file

@ -203,14 +203,14 @@ body {
} }
} }
.item { .item {
width: 300px; width: 280px;
height: 130px; height: 90px;
margin: 20px; margin: 20px;
flex: 0 0 300px; flex: 0 0 280px;
background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25)); background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25));
border-radius: 6px; border-radius: 6px;
padding: 20px; padding: 15px;
padding-right: 80px; padding-right: 55px;
//border: 2px solid rgba(0,0,0,0.4); //border: 2px solid rgba(0,0,0,0.4);
box-shadow: 0 0 20px 2px rgba(0,0,0,0.3); box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
color: white; color: white;
@ -223,12 +223,12 @@ body {
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
width: 130px; width: 90px;
height: 134px; height: 90px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
right: -78px; right: -48px;
top: -2px; top: 0px;
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
box-shadow: 0 0 40px 0px rgba(0,0,0,0.2); box-shadow: 0 0 40px 0px rgba(0,0,0,0.2);
} }
@ -239,7 +239,7 @@ body {
height: 100%; height: 100%;
width: 52px; width: 52px;
text-align: center; text-align: center;
line-height: 134px; line-height: 90px;
color: white; color: white;
font-size: 24px; font-size: 24px;
z-index: 1; z-index: 1;