diff options
Diffstat (limited to 'assets/scss/_single.scss')
| -rw-r--r-- | assets/scss/_single.scss | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss new file mode 100644 index 0000000..f593086 --- /dev/null +++ b/assets/scss/_single.scss @@ -0,0 +1,188 @@ +.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: 860px; + max-width: 860px; + @media #{$media-size-tablet} { + margin: 20px 0; + width: 100%; + } + } + + &-info { + margin-top: 30px; + font-size: 0.8rem; + line-height: normal; + @include dimmed; + + p { + margin: 0.8em 0; + } + + a:hover { + border-bottom: 1px solid white; + } + + svg { + margin-right: 0.8em; + } + + .tag { + margin-right: 0.5em; + + &::before { + content: "#"; + } + } + + .feather { + display: inline-block; + vertical-align: -.125em; + width: 1em; + height: 1em; + } + } + + .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; + 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; + } + } +} + +.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; + } +}
\ No newline at end of file |