first commit

css/cnt/cnt-home.css

@@ -0,0 +1,121 @@
+/** Background image **/
+.cnt-home {background-image: url('/img/bg/background.svg')}
+
+main > section {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: row;
+    max-width: 900px}
+
+main > section > article {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;    
+    align-items: flex-start;
+    align-self: flex-start;
+    flex-wrap: wrap;    
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 450px;
+    max-width: 450px}
+
+main > section > article > a {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    align-self: flex-start;
+    text-decoration: none;
+    color: #000;
+    flex-wrap: wrap;
+    width: 450px;
+    max-width: 450px}    
+
+main > section > article > a > h2 {
+    background: black;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 1;
+    width: 375px;
+    height: 35px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;    
+    max-height: 35px;
+    margin: 0;
+    padding: 0;
+    padding-top: 7px;
+    margin-left: 73px;
+    margin-top: 10px;
+    margin-bottom: 2px;
+    color: white;
+    font-size: 25px;
+    font-family: 'silkscreen'}
+
+main > section > article > a > svg {
+    display: flex;
+    box-sizing: border-box;  
+    position: relative;
+    margin-left: 3px;
+    margin-top: -78px}
+
+main > section > article > a > svg > g > image {filter: url(#pixelate)}
+main > section > article > a:hover > svg > g > image {filter: none}
+
+main > section > article > a > p {
+    display: flex;
+    box-sizing: border-box;
+    margin-left: 10px;
+    margin-top: 50px;
+    max-width: 230px;
+    font-family: 'Menlo', Monaco, monospace;
+    text-align: right}
+
+main > section > article > a > i {
+    font-family: 'silkscreen';
+    color: #ccc;
+    box-sizing: border-box;
+    align-self: flex-end;
+    margin-left: 270px;
+    max-width: 100px;     
+    display: flex}
+
+main > section > article > a > time {
+    font-family: 'silkscreen';
+    color: #ccc;
+    box-sizing: border-box;
+    align-self: flex-end;
+    margin-left: 365px;
+    margin-top: -30px;
+    max-width: 100px;     
+    display: flex}
+
+main > section > article > a > ul {
+    box-sizing: border-box;
+    list-style-type: none;
+    font-family: 'silkscreen';
+    align-self: flex-start;
+    margin: 0;
+    padding: 0;
+    margin-left: 215px;
+    margin-top: -60px;
+    max-width: 375px;
+    align-items: flex-end;
+    justify-content: flex-end;
+    text-align: right;
+    flex-wrap: wrap;       
+    display: flex}
+
+main > section > article > a > ul > li {
+    display: flex;
+    background-color: #000;
+    max-width: 375px;    
+    margin-left: 20px;
+    margin-bottom: 3px;
+    text-align: right}
+
+main > section > article > a > ul > li:nth-child(1) {color: #5BC0EB}
+main > section > article > a > ul > li:nth-child(2) {color: #FDE74C}
+main > section > article > a > ul > li:nth-child(3) {color: #9BC53D}
+main > section > article > a > ul > li:nth-child(4) {color: #E55934}
+main > section > article > a > ul > li:nth-child(5) {color: #FA7921}