parent
31a552963f
commit
46c6f9037e
1 changed files with 178 additions and 177 deletions
@ -1,222 +1,223 @@ |
|||||||
.post { |
.post { |
||||||
width: 100%; |
width: 100%; |
||||||
max-width: 1000px; |
max-width: 1000px; |
||||||
text-align: left; |
text-align: left; |
||||||
padding: 20px; |
padding: 20px; |
||||||
margin: 20px auto; |
margin: 20px auto; |
||||||
|
position: relative; |
||||||
|
|
||||||
@media #{$media-size-tablet} { |
@media #{$media-size-tablet} { |
||||||
max-width: 600px; |
max-width: 600px; |
||||||
} |
} |
||||||
@media #{$media-size-medium} { |
@media #{$media-size-medium} { |
||||||
max-width: 800px; |
max-width: 800px; |
||||||
} |
} |
||||||
|
|
||||||
&-date { |
&-date { |
||||||
&:after { |
&:after { |
||||||
content: "—"; |
content: "—"; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-title { |
&-title { |
||||||
font-size: 2.625rem; |
font-size: 2.625rem; |
||||||
margin: 0 0 20px; |
margin: 0 0 20px; |
||||||
|
|
||||||
@media #{$media-size-phone} { |
@media #{$media-size-phone} { |
||||||
font-size: 2rem; |
font-size: 2rem; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-subtitle { |
&-subtitle { |
||||||
font-size: 1.9rem; |
font-size: 1.9rem; |
||||||
margin: -15px 0 20px; |
margin: -15px 0 20px; |
||||||
|
|
||||||
@media #{$media-size-phone} { |
@media #{$media-size-phone} { |
||||||
font-size: 1.6rem; |
font-size: 1.6rem; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-breadcrumbs { |
&-breadcrumbs { |
||||||
font-size: 1.15rem; |
font-size: 1.15rem; |
||||||
margin: 10px 0 5px; |
margin: 10px 0 5px; |
||||||
|
|
||||||
@media #{$media-size-phone} { |
@media #{$media-size-phone} { |
||||||
font-size: 0.9rem; |
font-size: 0.9rem; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-description { |
&-description { |
||||||
font-size: 1.15rem; |
font-size: 1.15rem; |
||||||
@media #{$media-size-phone} { |
@media #{$media-size-phone} { |
||||||
font-size: 1.075rem; |
font-size: 1.075rem; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-tags { |
&-tags { |
||||||
display: block; |
display: block; |
||||||
margin-bottom: 20px; |
margin-bottom: 20px; |
||||||
font-size: 1rem; |
font-size: 1rem; |
||||||
opacity: 0.5; |
opacity: 0.5; |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-content { |
&-content { |
||||||
margin-top: 30px; |
margin-top: 30px; |
||||||
} |
} |
||||||
|
|
||||||
&-cover { |
&-cover { |
||||||
border-radius: 8px; |
border-radius: 8px; |
||||||
margin: 30px -5.20%; |
margin: 30px -5.2%; |
||||||
width: 110%; |
width: 110%; |
||||||
max-width: 110%; |
max-width: 110%; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
|
|
||||||
@media #{$media-size-medium} { |
@media #{$media-size-medium} { |
||||||
max-width: 860px; |
max-width: 860px; |
||||||
} |
} |
||||||
|
|
||||||
@media #{$media-size-tablet} { |
@media #{$media-size-tablet} { |
||||||
margin: 20px 0; |
margin: 20px 0; |
||||||
width: 100% !important; |
width: 100% !important; |
||||||
} |
} |
||||||
|
|
||||||
img { |
img { |
||||||
width: 100%; |
width: 100%; |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
&-info { |
&-info { |
||||||
margin-top: 30px; |
margin-top: 30px; |
||||||
font-size: 0.8rem; |
font-size: 0.8rem; |
||||||
line-height: normal; |
line-height: normal; |
||||||
@include dimmed; |
@include dimmed; |
||||||
|
|
||||||
p { |
p { |
||||||
margin: 0.8em 0; |
margin: 0.8em 0; |
||||||
} |
} |
||||||
|
|
||||||
a:hover { |
a:hover { |
||||||
border-bottom: 1px solid white; |
border-bottom: 1px solid white; |
||||||
} |
} |
||||||
|
|
||||||
svg { |
svg { |
||||||
margin-right: 0.8em; |
margin-right: 0.8em; |
||||||
} |
} |
||||||
|
|
||||||
.tag { |
.tag { |
||||||
margin-right: 0.5em; |
margin-right: 0.5em; |
||||||
display: inline-block; |
display: inline-block; |
||||||
|
|
||||||
&::before { |
&::before { |
||||||
content: "#"; |
content: "#"; |
||||||
} |
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
.flag { |
.flag { |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
margin: 0 5px; |
margin: 0 5px; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.pagination { |
.pagination { |
||||||
margin-top: 20px; |
margin-top: 20px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
display: flex; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
margin: 20px 0; |
||||||
|
|
||||||
|
&-h { |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
padding: 5px 10px; |
||||||
|
background: $light-background; |
||||||
|
color: $light-color-secondary; |
||||||
|
font-size: 0.8rem; |
||||||
|
text-transform: uppercase; |
||||||
|
text-decoration: none; |
||||||
|
letter-spacing: 0.1em; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
.dark-theme & { |
||||||
|
background: $dark-background; |
||||||
|
color: $dark-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 { |
||||||
|
text-decoration: none; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
&__title { |
.button { |
||||||
display: flex; |
|
||||||
text-align: center; |
|
||||||
position: relative; |
position: relative; |
||||||
margin: 20px 0; |
display: inline-flex; |
||||||
|
|
||||||
&-h { |
|
||||||
text-align: center; |
|
||||||
margin: 0 auto; |
|
||||||
padding: 5px 10px; |
|
||||||
background: $light-background; |
|
||||||
color: $light-color-secondary; |
|
||||||
font-size: 0.8rem; |
|
||||||
text-transform: uppercase; |
|
||||||
text-decoration: none; |
|
||||||
letter-spacing: 0.1em; |
|
||||||
z-index: 1; |
|
||||||
|
|
||||||
.dark-theme & { |
|
||||||
background: $dark-background; |
|
||||||
color: $dark-color-secondary; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
hr { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
width: 100%; |
|
||||||
margin-top: 15px; |
|
||||||
z-index: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&__buttons { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: center; |
justify-content: center; |
||||||
|
background: $light-background-secondary; |
||||||
|
font-size: 1rem; |
||||||
|
font-weight: 600; |
||||||
|
border-radius: 8px; |
||||||
|
max-width: 40%; |
||||||
|
padding: 0; |
||||||
|
cursor: pointer; |
||||||
|
appearance: none; |
||||||
|
|
||||||
|
.dark-theme & { |
||||||
|
background: $dark-background-secondary; |
||||||
|
} |
||||||
|
|
||||||
|
+ .button { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: none; |
display: flex; |
||||||
font-weight: bold; |
padding: 8px 16px; |
||||||
|
text-decoration: none; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
} |
} |
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.button { |
&__text { |
||||||
position: relative; |
text-overflow: ellipsis; |
||||||
display: inline-flex; |
white-space: nowrap; |
||||||
align-items: center; |
overflow: hidden; |
||||||
justify-content: center; |
} |
||||||
background: $light-background-secondary; |
|
||||||
font-size: 1rem; |
&.next .button__icon { |
||||||
font-weight: 600; |
margin-left: 8px; |
||||||
border-radius: 8px; |
} |
||||||
max-width: 40%; |
|
||||||
padding: 0; |
&.previous .button__icon { |
||||||
cursor: pointer; |
margin-right: 8px; |
||||||
appearance: none; |
} |
||||||
|
|
||||||
.dark-theme & { |
|
||||||
background: $dark-background-secondary; |
|
||||||
} |
|
||||||
|
|
||||||
+ .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; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
Loading…
Reference in new issue