diff --git a/themes/maik-blog/assets/scss/_post.scss b/themes/maik-blog/assets/scss/_post.scss index 09aa702..a9fb40d 100644 --- a/themes/maik-blog/assets/scss/_post.scss +++ b/themes/maik-blog/assets/scss/_post.scss @@ -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; + } }