style: move themed below base declarations; add whitespace
| | |
| | | @include desktop { |
| | | @content; |
| | | } |
| | | |
| | | @include print { |
| | | @content; |
| | | } |
| | |
| | | font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif; |
| | | font-size: 1.6rem; |
| | | } |
| | | |
| | | @include rtl { |
| | | font-family: 'Tajawal', sans-serif; |
| | | font-size: 1.5rem; |
| | |
| | | a { |
| | | text-decoration: none; |
| | | |
| | | @include themed() { |
| | | color: t('primary'); |
| | | } |
| | |
| | | } |
| | | |
| | | blockquote { |
| | | padding: 0 1em; |
| | | |
| | | @include themed() { |
| | | color: t('primary'); |
| | | |
| | | @include ltr { |
| | | border-left: t('border'); |
| | | } |
| | | |
| | | @include rtl { |
| | | border-right: t('border'); |
| | | } |
| | | } |
| | | padding: 0 1em; |
| | | } |
| | | |
| | | p { |
| | |
| | | .alert { |
| | | @include themed() { |
| | | border-color: t('alert'); |
| | | } |
| | | padding: 1rem; |
| | | border-style: solid; |
| | | border-radius: 0.25rem; |
| | | border-width: 2px; |
| | | margin-top: 1rem; |
| | | |
| | | @include themed() { |
| | | border-color: t('alert'); |
| | | } |
| | | |
| | | &__indicator { |
| | | @include themed() { |
| | | color: t('accent'); |
| | | background-color: t('alert'); |
| | | } |
| | | display: inline-block; |
| | | border-radius: 9999px; |
| | | padding: 0.5rem; |
| | |
| | | text-align: center; |
| | | font-weight: 800; |
| | | margin-right: 0.75rem; |
| | | |
| | | @include themed() { |
| | | color: t('accent'); |
| | | background-color: t('alert'); |
| | | } |
| | | } |
| | | } |
| | |
| | | .category { |
| | | @include themed() { |
| | | border: t('border'); |
| | | background-color: t('primary-lighter'); |
| | | color: t('primary') !important; |
| | | } |
| | | padding: 4px 6px; |
| | | border-radius: 3px; |
| | | display: inline-block; |
| | | font-size: 1.5rem; |
| | | line-height: 1; |
| | | |
| | | @include themed() { |
| | | border: t('border'); |
| | | background-color: t('primary-lighter'); |
| | | color: t('primary') !important; |
| | | } |
| | | |
| | | @include ltr { |
| | | margin: 5px 8px 5px 0; |
| | | } |
| | | |
| | | @include rtl { |
| | | margin: 5px 0 5px 8px; |
| | | } |
| | |
| | | |
| | | &__sidebar { |
| | | display: none; |
| | | |
| | | @include desktop_and_print { |
| | | display: inline-block; |
| | | } |
| | |
| | | |
| | | &__icon { |
| | | opacity: 0.5; |
| | | |
| | | @include ltr { |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | @include rtl { |
| | | margin-left: 4px; |
| | | } |
| | |
| | | @include ltr { |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | @include rtl { |
| | | margin-left: 4px; |
| | | } |
| | |
| | | margin-left: auto; |
| | | |
| | | &__line { |
| | | @include themed() { |
| | | background-color: t('primary'); |
| | | } |
| | | display: block; |
| | | height: 1px; |
| | | left: calc(50% - 8px); |
| | |
| | | transition-timing-function: ease-out; |
| | | width: 16px; |
| | | |
| | | @include themed() { |
| | | background-color: t('primary'); |
| | | } |
| | | |
| | | &:nth-child(1) { |
| | | top: calc(50% - 6px); |
| | | } |
| | |
| | | top: calc(50% + 4px); |
| | | } |
| | | } |
| | | |
| | | @include desktop { |
| | | display: none; |
| | | } |
| | |
| | | padding: 0; |
| | | height: 13px; |
| | | &-item { |
| | | @include themed() { |
| | | color: t('primary'); |
| | | } |
| | | margin: 0 2px 0 2px; |
| | | display: inline; |
| | | line-height: 1; |
| | | text-decoration: none; |
| | | |
| | | @include themed() { |
| | | color: t('primary'); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | .post { |
| | | margin: 30px; |
| | | |
| | | @include themed() { |
| | | background-color: t('accent'); |
| | | } |
| | | margin: 30px; |
| | | |
| | | &__more { |
| | | font-size: 1.4rem; |
| | |
| | | display: block; |
| | | |
| | | &-wrapper { |
| | | @include themed() { |
| | | box-shadow: t('shadow'); |
| | | } |
| | | border-radius: 0.5em; |
| | | width: 100%; |
| | | margin-bottom: 1em; |
| | | overflow: hidden; |
| | | transition: box-shadow 0.3s ease; |
| | | |
| | | @include themed() { |
| | | box-shadow: t('shadow'); |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | &.right { |
| | | @include desktop { |
| | | max-width: 50%; |
| | | |
| | | @include ltr { |
| | | float: right; |
| | | margin-left: 1.5em; |
| | |
| | | &.left { |
| | | @include desktop { |
| | | max-width: 50%; |
| | | |
| | | @include ltr { |
| | | float: left; |
| | | margin-right: 1.5em; |
| | |
| | | } |
| | | |
| | | &__footer { |
| | | font-size: 1.2rem; |
| | | padding: 12px 0; |
| | | |
| | | @include themed() { |
| | | border-bottom: t('border'); |
| | | } |
| | | font-size: 1.2rem; |
| | | padding: 12px 0; |
| | | |
| | | &-date { |
| | | @include ltr { |
| | |
| | | @include desktop_and_print { |
| | | width: $content-width; |
| | | } |
| | | |
| | | @include widescreen { |
| | | width: calc(#{$content-ratio} * 80%); |
| | | } |