Tweak header and card grid

This commit is contained in:
Rafael Conde
2017-04-29 15:14:57 -07:00
committed by Shawn Erquhart
parent 9c1a41f61d
commit 8a9370fb0c
5 changed files with 23 additions and 17 deletions

View File

@ -19,7 +19,7 @@
.leftIcon span { .leftIcon span {
/* stylelint-disable */ /* stylelint-disable */
color: var(--foregroundAltColor) !important; color: var(--textColor) !important;
font-size: 30px !important; font-size: 30px !important;
/* stylelint-enable */ /* stylelint-enable */

View File

@ -1,14 +1,17 @@
.card { .card {
flex-grow: 1;
flex-basis: 31%;
flex-basis: 300px;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 16px;
margin-left: 15px; margin-left: 16px;
max-height: 290px; max-height: 290px;
width: 240px;
cursor: pointer; cursor: pointer;
} }
.cardImage { .cardImage {
width: 240px; margin: -16px -24px 16px -24px;
width: calc(100% + 24px + 24px);
height: 135px; height: 135px;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
@ -18,7 +21,7 @@
.cardsGrid { .cardsGrid {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-left: -15px; margin-left: -16px;
} }
.cardList { .cardList {

View File

@ -6,6 +6,7 @@
border: 1px solid #f7f8f8; border: 1px solid #f7f8f8;
transition: all .1s ease-in-out; transition: all .1s ease-in-out;
transform: translateY(0); transform: translateY(0);
padding: 16px 24px;
} }
.card:hover { .card:hover {
@ -13,7 +14,7 @@
transform: translateY(-8px); transform: translateY(-8px);
} }
.card > *:not(iframe, video, img, header, footer) { /*.card > *:not(iframe, video, img, header, footer) {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
@ -24,20 +25,21 @@
.card > *:not(iframe, video, img, header, footer):last-child { .card > *:not(iframe, video, img, header, footer):last-child {
margin-bottom: 10px; margin-bottom: 10px;
} }*/
.card > iframe, .card > iframe,
.card > video, .card > video,
.card > img { .card > img {
max-width: 100%; margin: -16px -24px 16px -24px;
width: calc(100% + 16px + 16px);
} }
.card h1 { .card h1 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
line-height: 24px; line-height: 24px;
margin: 15px 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
color: var(--defaultColor); color: var(--defaultColor);
@ -49,6 +51,5 @@
letter-spacing: 0; letter-spacing: 0;
line-height: 24px; line-height: 24px;
padding: 0; padding: 0;
color: var(--defaultColor); color: #8c8c8c;
opacity: .5;
} }

View File

@ -14,7 +14,7 @@
--dropShadow: 0 2px 4px 0 rgba(19, 39, 48, .12); --dropShadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
--topmostZindex: 99999; --topmostZindex: 99999;
--foregroundAltColor: #fff; --foregroundAltColor: #fff;
--backgroundAltColor: #191919; --backgroundAltColor: #f8f9fa;
--textFieldBorderColor: #e7e7e7; --textFieldBorderColor: #e7e7e7;
--highlightFGColor: #fff; --highlightFGColor: #fff;
--highlightBGColor: #3ab7a5; --highlightBGColor: #3ab7a5;

View File

@ -25,11 +25,13 @@ h1, h2, h3, h4, h5, h6, p {
} }
h1 { h1 {
color: #3ab7a5;
border-bottom: 1px solid #3ab7a5;
margin: 30px auto 25px; margin: 30px auto 25px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 25px; font-size: 20px;
font-weight: 600;
color: #313D3E;
letter-spacing: 0;
line-height: 24px;
} }
img { img {