103 lines
1.4 KiB
CSS
103 lines
1.4 KiB
CSS
.wrapper {
|
|
display: flex;
|
|
max-width: 64em;
|
|
flex-grow: 1;
|
|
max-width: 64em;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
header{
|
|
position: sticky;
|
|
top: 0px;
|
|
|
|
background-color: #2867af;
|
|
width: 100vw;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
header > .wrapper {
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
}
|
|
|
|
header > .wrapper > .tags{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 5px;
|
|
}
|
|
|
|
header > .wrapper > .search{
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
header > .wrapper > .title{
|
|
display: flex;
|
|
flex-grow: 2;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
body > .main > .wrapper{
|
|
background-color: white;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#@media screen and (min-width: 640em) {
|
|
body > .ad {
|
|
background-color: red;
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
#}
|
|
|
|
.main {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
article{
|
|
background-color: #37fa6c;
|
|
margin: 10px;
|
|
flex-grow: 1;
|
|
padding: 5px;
|
|
|
|
display: flex;
|
|
text-overflow: hidden;
|
|
white-space: normal;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
article > .text{
|
|
|
|
}
|
|
|
|
footer{
|
|
background-color: #99dcd9;
|
|
height: 30px;
|
|
width: 100vw;
|