blog/themes/hello-friend-ng/assets/scss/_single.scss

231 lines
3.6 KiB
SCSS

.post {
width: 100%;
max-width: 800px;
text-align: left;
padding: 20px;
margin: 20px auto;
@media #{$media-size-tablet} {
max-width: 600px;
}
&-date {
&:after {
content: '';
}
}
&-title {
font-size: 2.625rem;
margin: 0 0 20px;
@media #{$media-size-phone} {
font-size: 2rem;
}
a {
text-decoration: none;
}
}
&-tags {
display: block;
margin-bottom: 20px;
font-size: 1rem;
opacity: 0.5;
a {
text-decoration: none;
}
}
&-content {
margin-top: 30px;
}
&-cover {
border-radius: 8px;
margin: 40px -50px;
width: $max-width;
max-width: $max-width;
@media #{$media-size-tablet} {
margin: 20px 0;
width: 100%;
}
}
&-excerpt {
font-style: italic;
}
&-info {
margin-top: 30px;
font-size: 0.9rem;
line-height: normal;
p {
margin: 0.8em 0;
}
svg {
margin-right: 0.8em;
}
.tag {
margin-right: 0.5em;
&::before {
content: "#";
}
}
.feather {
display: inline-block;
vertical-align: -.125em;
width: 1em;
height: 1em;
}
}
&-audio {
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
audio {
width: 90%;
}
}
.flag {
border-radius: 50%;
margin: 0 5px;
}
}
.pagination {
margin-top: 20px;
&__title {
display: flex;
text-align: center;
position: relative;
margin: 20px 0;
&-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
font-size: 0.8rem;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
z-index: 1;
// Default
background: $light-background;
color: $light-color-secondary;
@media (prefers-color-scheme: dark) {
background: $dark-background;
color: $dark-color-secondary;
}
@media (prefers-color-scheme: light) {
background: $light-background;
color: $light-color-secondary;
}
[data-theme=dark] & {
background: $dark-background;
color: $dark-color-secondary;
}
[data-theme=light] & {
background: $light-background;
color: $light-color-secondary;
}
}
hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0;
}
}
&__buttons {
display: flex;
align-items: center;
justify-content: center;
a {
font-weight: bold;
}
}
}
.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
max-width: 40%;
padding: 0;
cursor: pointer;
appearance: none;
// Default
background: $light-background-secondary;
@media (prefers-color-scheme: dark) {
background: $dark-background-header;
}
@media (prefers-color-scheme: light) {
background: $light-background-secondary;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-secondary;
}
&:hover {
color: #f2203a;
}
+ .button {
margin-left: 10px;
}
a {
display: flex;
padding: 8px 16px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&__text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.next .button__icon {
margin-left: 8px;
}
&.previous .button__icon {
margin-right: 8px;
}
}