blog/src/styles/parts/_post-page.scss

93 lines
1.7 KiB
SCSS

.post-content-box {
padding: 20px 20px 20px 260px;
}
.wrap-content {
padding: 20px;
}
.header-page {
text-align: center;
margin: 10px 0;
.page-title {
font-weight: 400;
margin: 0 0 10px;
line-height: 1.3;
}
.page-date {
color: $dark-gray;
font-weight: 300;
font-size: 12px;
text-transform: uppercase;
}
}
.page-cover-image {
position: relative;
padding: 0;
margin: 0;
max-height: 500px;
background-color: $lightgray;
overflow: hidden;
figure {
position: relative;
margin: 0;
}
figcaption {
position: absolute;
top: 20px;
right: 20px;
padding-left: 20px;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
}
.page-image {
width: 100%;
height: 100%;
}
}
.page-footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 30px;
margin: 30px 0 ;
border-bottom: 1px solid $dark-gray;
.page-share {
margin-bottom: 10px;
text-align: left;
a {
display: inline-block;
text-decoration: none;
background-color: $lightgray;
border: 1px solid $gray;
padding: 5px 10px;
margin-left: 5px;
color: $dark-blue;
font-size: 12px;
transition: background-color .3s;
&:first-child {
margin-left: 0;
}
&:hover {
background-color: $gray;
}
}
}
.page-tag {
span {
text-decoration: none;
font-size: 10px;
padding: 5px 10px;
margin-left: 5px;
color: $dark-blue;
text-transform: uppercase;
border: 1px solid $dark-blue;
}
}
}