static-blog/style.css

103 lines
1.5 KiB
CSS
Raw Permalink Normal View History

2024-05-22 15:58:12 +02:00
body{
background-color: #171717;
2024-05-22 16:54:19 +02:00
}
.badge{
2024-05-22 23:32:38 +02:00
display: flex;
2024-05-22 16:54:19 +02:00
color: #a3a3a3;
font: 18px 'Roboto', sans-serif;
}
2024-05-22 23:32:38 +02:00
/* body{
display: flex;
/* justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
} */
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
2024-05-22 16:54:19 +02:00
.container{
display: flex;
2024-05-22 23:32:38 +02:00
max-width: 800px;
padding: 20px;
flex-direction: column;
justify-content: space-between;
/* align-items: center; */
2024-05-22 16:54:19 +02:00
}
.left-span{
flex: 1;
}
.right-span{
flex: 1;
text-align: right;
2024-05-22 23:32:38 +02:00
gap: 50px;
2024-05-22 16:54:19 +02:00
}
.link{
color: #a3a3a3;
text-decoration: none;
2024-05-22 23:32:38 +02:00
}
h1{
color: #fff;
font: ui-sans-serif;
font-size: 8rem;
margin: 0px 0px 16px;
}
.leader{
color:#a3a3a3;
}
.custom-svg{
width: auto;
height: 1rem;
}
.custom-svg path{
fill: #a3a3a3;
}
.custom-svg:hover path{
fill: #fff;
}
.blog-list{
/* max-width: 800px; */
margin: 0 auto;
padding: 20px;
}
.blog-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #aaa;
}
.blog-item:hover .blog-date{
color: #fff;
transition: color 0.3s ease;
}
.blog-item:last-child{
border-bottom: none;
}
.blog-title{
flex: 1 1 70%;
font-size: 1.2rem;
color: #fff;
}
.blog-date{
flex: 0 0 30%;
text-align: right;
color: #aaa;
font-size: 1rem;
}
.blog-date:hover{
color: #fff;
}
.feet{
color: #a3a3a3;
text-align: center;
padding: 20px;
2024-05-22 15:58:12 +02:00
}