From 8f954ab7c662e0c507c2328d5b2683fbd4c3a391 Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Wed, 15 Jul 2026 02:57:48 +0200 Subject: Remove vendor specific CSS styles --- assets/_sass/components/_post.scss | 892 ++++++++++++++++++------------------- 1 file changed, 445 insertions(+), 447 deletions(-) (limited to 'assets/_sass/components/_post.scss') diff --git a/assets/_sass/components/_post.scss b/assets/_sass/components/_post.scss index 46a31e3..5abeb15 100644 --- a/assets/_sass/components/_post.scss +++ b/assets/_sass/components/_post.scss @@ -1,447 +1,445 @@ -.post-lists-title { - font-family: 'PT Sans', sans-serif; - font-size: 24px; - line-height: 42px; - font-weight: 700; - color: var(--grey-aaa); - margin: 0 0 40px; - text-align: center; - - span { - color: var(--grey-222); - } -} - -.post-list { - display: grid; - gap: 100px 0; -} - -.post { - position: relative; - - .post-title { - margin: 0 0 25px; - font-family: 'PT Sans', sans-serif; - font-size: 32px; - line-height: 42px; - font-weight: 700; - color: var(--grey-222); - - a { - color: var(--grey-222); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - .post-author { - position: absolute; - top: 10px; - left: -200px; - width: 150px; - text-align: right; - - .author-avatar { - display: inline-block; - width: 50px; - height: 50px; - border-radius: 50%; - fill: currentColor; - color: var(--grey-ddd); - } - .author-info { - .author-name { - display: block; - margin: 10px 0 4px; - font-family: 'PT Sans', sans-serif; - font-size: 16px; - line-height: 20px; - font-weight: 700; - color: var(--grey-222); - text-transform: uppercase; - } - .author-title { - display: block; - font-size: 12px; - line-height: 16px; - font-style: italic; - color: var(--grey-aaa); - } - } - - .post-meta { - position: relative; - margin: 15px 0 0; - padding: 15px 0 0; - line-height: 20px; - font-size: 14px; - color: var(--grey-aaa); - - &:before { - position: absolute; - top: 0; - right: 0; - width: 30px; - height: 1px; - background: var(--grey-ddd); - content: ""; - } - - .post-date { - position: relative; - margin: 0 5px 0 0; - padding: 0 10px 0 0; - - &:after { - position: absolute; - top: 50%; - right: 0; - width: 3px; - height: 3px; - border-radius: 50%; - background: var(--grey-ccc); - content: ""; - } - } - .post-categories { - position: relative; - display: flex; - @include justify-content(flex-end); - gap: 5px; - margin: 8px 0 0; - - a { - color: var(--main-color); - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - } -} - -.post-content { - abbr { - border-bottom: 1px dotted var(--grey-555); - text-decoration: none; - cursor: help; - } - code, kbd, pre { - margin: 0; - font-family: monospace; - word-wrap: break-word; - word-break: break-word; - white-space: pre-wrap; - } - address, cite, var { - font-style: italic; - } - blockquote { - margin: 40px 0; - padding: 0 0 0 20px; - border-left: 3px solid var(--grey-555); - color: var(--grey-222); - font-weight: 700; - } - em, strong { - color: var(--grey-222); - } - - h1, h2, h3, h4, h5, h6 { - font-family: 'PT Sans', sans-serif; - margin: 40px 0 25px 0; - color: var(--grey-222); - } - h4, h5, h6 { - margin: 25px 0; - } - h1 { - font-size: 28px; - } - h2 { - font-size: 26px; - } - h3 { - font-size: 22px; - } - h4 { - font-size: 20px; - } - h5 { - font-size: 18px; - } - h6 { - font-size: 16px; - } - - a { - color: var(--main-color); - - &:hover { - text-decoration: none; - } - } - img { - display: block; - max-width: 100%; - height: auto; - } - - ul { - list-style-type: disc; - list-style-position: inside; - } - - ul, ol { - margin: 15px 0; - padding: 0 0 0 20px; - - ul, ol { - padding: 0 0 0 20px; - } - li { - margin: 5px 0; - - & > code { - font-size: 14px; - padding: 3px 6px; - margin: 0 4px; - background: var(--grey-fa); - border: 1px solid var(--grey-ccc); - } - } - } - - dl { - margin: 40px 0; - - dt { - margin: 10px 0 0; - font-weight: 700; - } - dd { - margin: 5px 0; - - & > code { - font-size: 14px; - padding: 3px 6px; - margin: 0 4px; - background: var(--grey-fa); - border: 1px solid var(--grey-ccc); - } - } - } - - p { - margin: 15px 0; - - & > code { - font-size: 14px; - padding: 3px 6px; - margin: 0 4px; - background: var(--grey-fa); - border: 1px solid var(--grey-ccc); - } - } - - .alignleft { - float: left; - margin: 20px 30px 10px 0; - } - .alignright { - float: right; - margin: 20px 0 10px 20px; - } - .aligncenter { - clear: both; - margin: 0 auto 20px; - } - - figcaption { - font-size: 13px; - font-style: italic; - padding-top: 10px; - } - - .iframe-wrapper { - position: relative; - padding-top: 56.25%; - - & > iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - .read-more-button { - font-size: 16px; - color: var(--grey-555); - } -} - -.post-footer { - display: flex; - @include justify-content(space-between); - @include align-items(flex-start); - gap: 0 20px; - margin: 50px 0 0; - - .post-tags { - display: flex; - @include flex-flow(row wrap); - @include flex(9, 1, auto); - gap: 0 20px; - list-style: none; - margin: 0; - padding: 0; - - li { - a { - font-size: 14px; - font-family: 'PT Sans', sans-serif; - color: var(--grey-ccc); - text-decoration: none; - transition: all .15s ease; - &:hover { - color: var(--grey-555); - } - } - } - } - .post-share { - position: relative; - @include flex(0, 0, auto); - border: 1px solid var(--grey-ddd); - overflow: hidden; - - &:hover { - & > span { - margin-left: -100%; - } - & > ul { - left: 0; - } - } - span { - display: block; - width: 100%; - padding: 0 15px; - font-family: 'PT Sans', sans-serif; - font-size: 12px; - text-transform: uppercase; - text-align: center; - letter-spacing: .1em; - color: var(--grey-aaa); - cursor: pointer; - transition: margin .2s ease; - } - ul { - position: absolute; - top: 0; - left: 100%; - width: 100%; - height: 100%; - display: flex; - list-style: none; - margin: 0; - padding: 0; - transition: left .2s ease; - - li { - @include flex(1, 0, auto); - cursor: pointer; - - &:last-child { - border-left: 1px solid var(--grey-ddd); - } - a { - display: flex; - @include align-items(); - @include justify-content(); - height: 100%; - color: var(--grey-ccc); - &:hover { - background: var(--grey-eee); - } - svg { - fill: currentColor; - } - } - } - } - } - } - - .post-comments { - position: relative; - margin: 40px 0 0; - padding: 20px 0 0; - border-top: 1px solid var(--grey-ddd); - } -} - - -@media screen and (max-width: 960px) { - .post { - .post-title { - margin: 0 0 15px; - } - .post-author { - display: flex; - @include align-items(); - @include flex-flow(row wrap); - gap: 15px; - position: static; - width: 100%; - margin: 0 0 20px; - text-align: left; - .author-avatar { - width: 36px; - height: 36px; - } - .author-info { - .author-name { - margin: 0; - color: var(--grey-555); - text-transform: initial; - } - .author-title { display: none; } - } - .post-meta { - display: flex; - @include flex-flow(row wrap); - margin: 0; - margin-left: auto; - padding: 0; - - &:before { - content: none; - } - .post-categories { - margin: 0 0 0 5px; - padding: 0 0 0 10px; - - &:before { - position: absolute; - top: 50%; - left: 0; - width: 3px; - height: 3px; - border-radius: 50%; - background: var(--grey-ccc); - content: ""; - } - } - } - } - } -} +.post-lists-title { + font-family: 'PT Sans', sans-serif; + font-size: 24px; + line-height: 42px; + font-weight: 700; + color: var(--grey-aaa); + margin: 0 0 40px; + text-align: center; + + span { + color: var(--grey-222); + } +} + +.post-list { + display: grid; + gap: 100px 0; +} + +.post { + position: relative; + + .post-title { + margin: 0 0 25px; + font-family: 'PT Sans', sans-serif; + font-size: 32px; + line-height: 42px; + font-weight: 700; + color: var(--grey-222); + + a { + color: var(--grey-222); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + .post-author { + position: absolute; + top: 10px; + left: -200px; + width: 150px; + text-align: right; + + .author-avatar { + display: inline-block; + width: 50px; + height: 50px; + border-radius: 50%; + fill: currentColor; + color: var(--grey-ddd); + } + .author-info { + .author-name { + display: block; + margin: 10px 0 4px; + font-family: 'PT Sans', sans-serif; + font-size: 16px; + line-height: 20px; + font-weight: 700; + color: var(--grey-222); + text-transform: uppercase; + } + .author-title { + display: block; + font-size: 12px; + line-height: 16px; + font-style: italic; + color: var(--grey-aaa); + } + } + + .post-meta { + position: relative; + margin: 15px 0 0; + padding: 15px 0 0; + line-height: 20px; + font-size: 14px; + color: var(--grey-aaa); + + &:before { + position: absolute; + top: 0; + right: 0; + width: 30px; + height: 1px; + background: var(--grey-ddd); + content: ""; + } + + .post-date { + position: relative; + margin: 0 5px 0 0; + padding: 0 10px 0 0; + + &:after { + position: absolute; + top: 50%; + right: 0; + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; + } + } + .post-categories { + position: relative; + display: flex; + justify-content: flex-end; + gap: 5px; + margin: 8px 0 0; + + a { + color: var(--main-color); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + } +} + +.post-content { + abbr { + border-bottom: 1px dotted var(--grey-555); + text-decoration: none; + cursor: help; + } + code, kbd, pre { + margin: 0; + font-family: monospace; + word-wrap: break-word; + word-break: break-word; + white-space: pre-wrap; + } + address, cite, var { + font-style: italic; + } + blockquote { + margin: 40px 0; + padding: 0 0 0 20px; + border-left: 3px solid var(--grey-555); + color: var(--grey-222); + font-weight: 700; + } + em, strong { + color: var(--grey-222); + } + + h1, h2, h3, h4, h5, h6 { + font-family: 'PT Sans', sans-serif; + margin: 40px 0 25px 0; + color: var(--grey-222); + } + h4, h5, h6 { + margin: 25px 0; + } + h1 { + font-size: 28px; + } + h2 { + font-size: 26px; + } + h3 { + font-size: 22px; + } + h4 { + font-size: 20px; + } + h5 { + font-size: 18px; + } + h6 { + font-size: 16px; + } + + a { + color: var(--main-color); + + &:hover { + text-decoration: none; + } + } + img { + display: block; + max-width: 100%; + height: auto; + } + + ul { + list-style-type: disc; + list-style-position: inside; + } + + ul, ol { + margin: 15px 0; + padding: 0 0 0 20px; + + ul, ol { + padding: 0 0 0 20px; + } + li { + margin: 5px 0; + + & > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); + } + } + } + + dl { + margin: 40px 0; + + dt { + margin: 10px 0 0; + font-weight: 700; + } + dd { + margin: 5px 0; + + & > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); + } + } + } + p { + margin: 15px 0; + + & > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); + } + } + + .alignleft { + float: left; + margin: 20px 30px 10px 0; + } + .alignright { + float: right; + margin: 20px 0 10px 20px; + } + .aligncenter { + clear: both; + margin: 0 auto 20px; + } + + figcaption { + font-size: 13px; + font-style: italic; + padding-top: 10px; + } + + .iframe-wrapper { + position: relative; + padding-top: 56.25%; + + & > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + .read-more-button { + font-size: 16px; + color: var(--grey-555); + } +} + +.post-footer { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 0 20px; + margin: 50px 0 0; + + .post-tags { + display: flex; + flex-flow: row wrap; + flex: 9 1 auto; + gap: 0 20px; + list-style: none; + margin: 0; + padding: 0; + + li { + a { + font-size: 14px; + font-family: 'PT Sans', sans-serif; + color: var(--grey-ccc); + text-decoration: none; + transition: all .15s ease; + &:hover { + color: var(--grey-555); + } + } + } + } + .post-share { + position: relative; + flex: 0 0 auto; + border: 1px solid var(--grey-ddd); + overflow: hidden; + + &:hover { + & > span { + margin-left: -100%; + } + & > ul { + left: 0; + } + } + span { + display: block; + width: 100%; + padding: 0 15px; + font-family: 'PT Sans', sans-serif; + font-size: 12px; + text-transform: uppercase; + text-align: center; + letter-spacing: .1em; + color: var(--grey-aaa); + cursor: pointer; + transition: margin .2s ease; + } + ul { + position: absolute; + top: 0; + left: 100%; + width: 100%; + height: 100%; + display: flex; + list-style: none; + margin: 0; + padding: 0; + transition: left .2s ease; + + li { + flex: 1 0 auto; + cursor: pointer; + + &:last-child { + border-left: 1px solid var(--grey-ddd); + } + a { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + color: var(--grey-ccc); + &:hover { + background: var(--grey-eee); + } + svg { + fill: currentColor; + } + } + } + } + } + } + .post-comments { + position: relative; + margin: 40px 0 0; + padding: 20px 0 0; + border-top: 1px solid var(--grey-ddd); + } +} + + +@media screen and (max-width: 960px) { + .post { + .post-title { + margin: 0 0 15px; + } + .post-author { + display: flex; + align-items: center; + flex-flow: row wrap; + gap: 15px; + position: static; + width: 100%; + margin: 0 0 20px; + text-align: left; + .author-avatar { + width: 36px; + height: 36px; + } + .author-info { + .author-name { + margin: 0; + color: var(--grey-555); + text-transform: initial; + } + .author-title { display: none; } + } + .post-meta { + display: flex; + flex-flow: row wrap; + margin: 0; + margin-left: auto; + padding: 0; + + &:before { + content: none; + } + .post-categories { + margin: 0 0 0 5px; + padding: 0 0 0 10px; + + &:before { + position: absolute; + top: 50%; + left: 0; + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; + } + } + } + } + } +} -- cgit v1.2.3