Tweak header and card grid
This commit is contained in:
committed by
Shawn Erquhart
parent
9c1a41f61d
commit
8a9370fb0c
@ -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 */
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
Reference in New Issue
Block a user