Tweak header and card grid

src/components/AppHeader/AppHeader.css

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

src/components/EntryListing/EntryListing.css

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

src/components/UI/card/Card.css

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

src/components/UI/theme.css

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

src/index.css

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