parent
31a552963f
commit
46c6f9037e
1 changed files with 178 additions and 177 deletions
@ -1,222 +1,223 @@ |
||||
.post { |
||||
width: 100%; |
||||
max-width: 1000px; |
||||
text-align: left; |
||||
padding: 20px; |
||||
margin: 20px auto; |
||||
width: 100%; |
||||
max-width: 1000px; |
||||
text-align: left; |
||||
padding: 20px; |
||||
margin: 20px auto; |
||||
position: relative; |
||||
|
||||
@media #{$media-size-tablet} { |
||||
max-width: 600px; |
||||
} |
||||
@media #{$media-size-medium} { |
||||
max-width: 800px; |
||||
} |
||||
@media #{$media-size-tablet} { |
||||
max-width: 600px; |
||||
} |
||||
@media #{$media-size-medium} { |
||||
max-width: 800px; |
||||
} |
||||
|
||||
&-date { |
||||
&:after { |
||||
content: "—"; |
||||
&-date { |
||||
&:after { |
||||
content: "—"; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-title { |
||||
font-size: 2.625rem; |
||||
margin: 0 0 20px; |
||||
&-title { |
||||
font-size: 2.625rem; |
||||
margin: 0 0 20px; |
||||
|
||||
@media #{$media-size-phone} { |
||||
font-size: 2rem; |
||||
} |
||||
@media #{$media-size-phone} { |
||||
font-size: 2rem; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-subtitle { |
||||
font-size: 1.9rem; |
||||
margin: -15px 0 20px; |
||||
&-subtitle { |
||||
font-size: 1.9rem; |
||||
margin: -15px 0 20px; |
||||
|
||||
@media #{$media-size-phone} { |
||||
font-size: 1.6rem; |
||||
@media #{$media-size-phone} { |
||||
font-size: 1.6rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-breadcrumbs { |
||||
font-size: 1.15rem; |
||||
margin: 10px 0 5px; |
||||
&-breadcrumbs { |
||||
font-size: 1.15rem; |
||||
margin: 10px 0 5px; |
||||
|
||||
@media #{$media-size-phone} { |
||||
font-size: 0.9rem; |
||||
@media #{$media-size-phone} { |
||||
font-size: 0.9rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-description { |
||||
font-size: 1.15rem; |
||||
@media #{$media-size-phone} { |
||||
font-size: 1.075rem; |
||||
&-description { |
||||
font-size: 1.15rem; |
||||
@media #{$media-size-phone} { |
||||
font-size: 1.075rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-tags { |
||||
display: block; |
||||
margin-bottom: 20px; |
||||
font-size: 1rem; |
||||
opacity: 0.5; |
||||
&-tags { |
||||
display: block; |
||||
margin-bottom: 20px; |
||||
font-size: 1rem; |
||||
opacity: 0.5; |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-content { |
||||
margin-top: 30px; |
||||
} |
||||
&-content { |
||||
margin-top: 30px; |
||||
} |
||||
|
||||
&-cover { |
||||
border-radius: 8px; |
||||
margin: 30px -5.20%; |
||||
width: 110%; |
||||
max-width: 110%; |
||||
text-decoration: none; |
||||
&-cover { |
||||
border-radius: 8px; |
||||
margin: 30px -5.2%; |
||||
width: 110%; |
||||
max-width: 110%; |
||||
text-decoration: none; |
||||
|
||||
@media #{$media-size-medium} { |
||||
max-width: 860px; |
||||
} |
||||
@media #{$media-size-medium} { |
||||
max-width: 860px; |
||||
} |
||||
|
||||
@media #{$media-size-tablet} { |
||||
margin: 20px 0; |
||||
width: 100% !important; |
||||
} |
||||
@media #{$media-size-tablet} { |
||||
margin: 20px 0; |
||||
width: 100% !important; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
img { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-info { |
||||
margin-top: 30px; |
||||
font-size: 0.8rem; |
||||
line-height: normal; |
||||
@include dimmed; |
||||
&-info { |
||||
margin-top: 30px; |
||||
font-size: 0.8rem; |
||||
line-height: normal; |
||||
@include dimmed; |
||||
|
||||
p { |
||||
margin: 0.8em 0; |
||||
} |
||||
p { |
||||
margin: 0.8em 0; |
||||
} |
||||
|
||||
a:hover { |
||||
border-bottom: 1px solid white; |
||||
} |
||||
a:hover { |
||||
border-bottom: 1px solid white; |
||||
} |
||||
|
||||
svg { |
||||
margin-right: 0.8em; |
||||
} |
||||
svg { |
||||
margin-right: 0.8em; |
||||
} |
||||
|
||||
.tag { |
||||
margin-right: 0.5em; |
||||
display: inline-block; |
||||
.tag { |
||||
margin-right: 0.5em; |
||||
display: inline-block; |
||||
|
||||
&::before { |
||||
content: "#"; |
||||
} |
||||
&::before { |
||||
content: "#"; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.flag { |
||||
border-radius: 50%; |
||||
margin: 0 5px; |
||||
} |
||||
.flag { |
||||
border-radius: 50%; |
||||
margin: 0 5px; |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
display: flex; |
||||
text-align: center; |
||||
.button { |
||||
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; |
||||
display: inline-flex; |
||||
align-items: 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 { |
||||
text-decoration: none; |
||||
font-weight: bold; |
||||
display: flex; |
||||
padding: 8px 16px; |
||||
text-decoration: none; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.button { |
||||
position: relative; |
||||
display: inline-flex; |
||||
align-items: 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 { |
||||
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; |
||||
} |
||||
&__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