diff options
author | Christoph Cullmann <cullmann@kde.org> | 2021-02-18 22:21:36 +0100 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2021-02-18 22:21:36 +0100 |
commit | 0c7cb4486a89ec6fe9680e6569ef41d4b82d557d (patch) | |
tree | 081941052bcab0caf69487b6bf5ab2df5deb3b7b /themes/CodeIT/assets/css/_page/_home.scss | |
parent | 640572ecab69291d2c266de2011b795a861e7c21 (diff) |
use maintained theme
Diffstat (limited to 'themes/CodeIT/assets/css/_page/_home.scss')
-rw-r--r-- | themes/CodeIT/assets/css/_page/_home.scss | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/themes/CodeIT/assets/css/_page/_home.scss b/themes/CodeIT/assets/css/_page/_home.scss new file mode 100644 index 0000000..c7b9021 --- /dev/null +++ b/themes/CodeIT/assets/css/_page/_home.scss @@ -0,0 +1,183 @@ +.home { + .home-profile { + @include transform(translateY(16vh)); + padding: 0 0 0.5rem; + text-align: center; + + .home-avatar { + padding: 0.5rem; + + img { + display: inline-block; + width: 8rem; + height: auto; + margin: 0 auto; + @include border-radius(100%); + @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05)); + @include transition(all 0.4s ease); + + &:hover { + position: relative; + @include transform(translateY(-0.75rem)); + } + } + } + + .home-title { + font-size: 1.25rem; + font-weight: bold; + margin: 0; + padding: 0.5rem; + } + + .home-subtitle { + font-size: 1rem; + font-weight: normal; + margin: 0; + padding: 0.5rem; + } + + .links { + padding: 0.5rem; + font-size: 1.5rem; + + a * { + vertical-align: text-bottom; + } + + img { + height: 1.5rem; + padding: 0 0.25rem; + } + } + + .home-disclaimer { + font-size: 1rem; + line-height: 1.5rem; + font-weight: normal; + margin: 0; + padding: 0.5rem; + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + } +} + +.home[posts] { + .home-profile { + @include transform(translateY(0)); + padding-top: 2rem; + } + + .home-avatar img { + width: 6rem; + } + + .summary { + padding-top: 1rem; + padding-bottom: 0.8rem; + color: $global-font-color; + border-bottom: 1px dashed $global-border-color; + + [theme="dark"] & { + color: $global-font-color-dark; + border-bottom: 1px dashed $global-border-color-dark; + } + + .featured-image-preview { + width: 100%; + padding: 30% 0 0; + position: relative; + margin: 0.6rem auto; + @include transition(transform 0.4s ease); + + img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + @include object-fit(none); + } + + img.lazyloaded { + @include object-fit(cover); + } + + &:hover { + @include transform(scale(1.01)); + } + } + + .single-title { + font-size: 1.25rem; + line-height: 140%; + margin: 0.4rem 0; + } + + .content { + @include box(vertical); + -webkit-line-clamp: 3; + margin-top: 0.3rem; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + @include overflow-wrap(break-word); + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + + h2, + h3, + h4, + h5, + h6, + p { + font-size: 1rem; + line-height: 1.5; + display: inline; + + &::after { + content: "\A"; + white-space: pre; + } + } + + h2 { + font-size: 1.125rem; + } + + @include link(false, true); + + b, + strong { + color: $global-font-secondary-color; + + [theme="dark"] & { + color: $global-font-secondary-color-dark; + } + } + } + + .post-footer { + margin-top: 0.4rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.875rem; + + @include link(false, false); + + .post-tags { + padding: 0; + + @include link(true, true); + } + } + } +} |