.additional-container{
display: flex; align-items: baseline; flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; width: $size-additional-container-width; @media screen and (max-width: 479px) { align-content: center; align-items: center; flex-direction: column; justify-content: center; width: 100%; }
}
.post {
&__title { margin-bottom: 1rem; width: 100%; font-size: 2.125rem; @media screen and (max-width: 479px) { font-size: 1.75rem; line-height: 2.125rem; } } &__date { margin-bottom: 0 !important; width: 15%; color: $color-font-sub; font-size: 1rem; @media screen and (max-width: 479px) { margin-bottom: .75rem !important; width: 100%; font-size: 0.875rem; } }
}
.post-container {
box-sizing: border-box; padding: 2rem 0 0; width: 50rem; @media screen and (max-width: 479px) { margin-left: 0; padding: 0; width: 90%; }
}
.post-header {
display: flex; flex-wrap: wrap; width: 100%;
}
.post-meta {
display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; width: 100%; height: 1.5rem; @media screen and (max-width: 479px) { margin-bottom: 1rem; height: auto; }
}
.post-tags {
display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: right; width: 85%; height: 100%; @media screen and (max-width: 479px) { width: 100%; height: auto; }
}
.post-tag {
display: flex; align-items: center; justify-content: center; margin-right: 0.375rem; margin-bottom: 0.375rem; height: 100%; border: 1px solid $color-border; border-radius: 0.75rem; @media screen and (max-width: 479px) { height: 1.5rem; } &__icon { margin-right: 0.25rem; } &__link { display: flex; align-items: center; flex-direction: row; margin-right: 0.25rem; padding: 0.25rem 0.5rem; height: 100%; color: $color-font-sub; text-decoration: none; font-size: 0.75rem; }
}
.page-content, .post-content, .posts-content, .profile-content {
flex-direction: column; padding: 0 0 5rem; color: $color-font-sub; line-height: 1.875rem; @include container(); @media screen and (max-width: 479px) { padding: 0 0 0rem; width: 100%; height: auto; line-height: 1.5rem; } h1 { font-size: 1.75rem; @media screen and (max-width: 479px) { font-size: 1.625rem; line-height: 1.75rem; } } h2 { font-size: 1.675rem; @media screen and (max-width: 479px) { font-size: 1.5rem; line-height: 1.75rem; } } h3 { font-size: 1.5rem; @media screen and (max-width: 479px) { font-size: 1.375rem; line-height: 1.675rem; } } h4 { font-size: 1.375rem; @media screen and (max-width: 479px) { font-size: 1.25rem; line-height: 1.5rem; } } h5 { font-size: 1.25rem; @media screen and (max-width: 479px) { font-size: 1.125rem; line-height: 1.375rem; } } h6 { font-size: 1.125rem; @media screen and (max-width: 479px) { font-size: 1rem; line-height: 1.5rem; } } h1 { margin-bottom: 0.25rem; } h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; } h1, h2, h3, h4, h5, h6 { color: $color-font-main; } >ul, >ol, img, p, table, blockquote { margin-bottom: 1.5rem; } ul, ol { padding-left: 1rem; } img { max-width: 100%; } pre { padding: 0.5rem; line-height: 1.375rem; } a { color: $color-font-sub; &:hover { opacity: 0.6; } } table { width: 100%; border-spacing: 0; border-collapse: collapse; } table th, table td { padding: 10px 0; text-align: center; } table tbody tr:nth-child(odd) { background-color: #eee; } blockquote { padding: 0.25rem 0 0.25rem 0.5rem; border-left: 0.25rem solid $color-border; >p { margin-bottom: 0; } } .highlighter-rouge { margin-bottom: 1rem; border: 1px solid $color-border; border-radius: 0.25rem; background-color: rgba($color-border, 0.25); }
}
.post-content {
width: $size-post-container-width !important; @media screen and (max-width: 479px) { width: 100% !important; }
}
.posts-content {
padding-bottom: 2rem !important; width: $size-post-container-width !important; @media screen and (max-width: 479px) { padding-bottom: 0.5rem !important; width: 100% !important; }
}