121 lines
3.0 KiB
CSS
121 lines
3.0 KiB
CSS
/** 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} |