From e844a70479915d1fba0336800b35c8c1022b61c6 Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Fri, 17 Jul 2026 14:26:52 +0200 Subject: Convert preprocesser files to plain CSS --- assets/css/components/post.css | 413 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 413 insertions(+) create mode 100644 assets/css/components/post.css (limited to 'assets/css/components/post.css') diff --git a/assets/css/components/post.css b/assets/css/components/post.css new file mode 100644 index 0000000..916ec29 --- /dev/null +++ b/assets/css/components/post.css @@ -0,0 +1,413 @@ +.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; +} + +.post-lists-title span { + color: var(--grey-222); +} + +.post-list { + display: grid; + gap: 100px 0; +} + +.post { + position: relative; +} + +.post .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); +} + +.post .post-title a { + color: var(--grey-222); + text-decoration: none; +} + +.post .post-title a:hover { + text-decoration: underline; +} + +.post .post-author { + position: absolute; + top: 10px; + left: -200px; + width: 150px; + text-align: right; +} + +.post .post-author .author-avatar { + display: inline-block; + width: 50px; + height: 50px; + border-radius: 50%; + fill: currentColor; + color: var(--grey-ddd); +} + +.post .post-author .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; +} + +.post .post-author .author-info .author-title { + display: block; + font-size: 12px; + line-height: 16px; + font-style: italic; + color: var(--grey-aaa); +} + +.post .post-author .post-meta { + position: relative; + margin: 15px 0 0; + padding: 15px 0 0; + line-height: 20px; + font-size: 14px; + color: var(--grey-aaa); +} + +.post .post-author .post-meta:before { + position: absolute; + top: 0; + right: 0; + width: 30px; + height: 1px; + background: var(--grey-ddd); + content: ""; +} + +.post .post-author .post-meta .post-date { + position: relative; + margin: 0 5px 0 0; + padding: 0 10px 0 0; +} + +.post .post-author .post-meta .post-date:after { + position: absolute; + top: 50%; + right: 0; + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; +} + +.post .post-author .post-meta .post-categories { + position: relative; + display: flex; + justify-content: flex-end; + gap: 5px; + margin: 8px 0 0; +} + +.post .post-author .post-meta .post-categories a { + color: var(--main-color); + text-decoration: none; +} + +.post .post-author .post-meta .post-categories a:hover { + text-decoration: underline; +} + +.post .post-content abbr { + border-bottom: 1px dotted var(--grey-555); + text-decoration: none; + cursor: help; +} + +.post .post-content code, +.post .post-content kbd, +.post .post-content pre { + margin: 0; + font-family: monospace; + word-wrap: break-word; + word-break: break-word; + white-space: pre-wrap; +} + +.post .post-content address, +.post .post-content cite, +.post .post-content var { + font-style: italic; +} + +.post .post-content blockquote { + margin: 40px 0; + padding: 0 0 0 20px; + border-left: 3px solid var(--grey-555); + color: var(--grey-222); + font-weight: 700; +} + +.post .post-content em, +.post .post-content strong { + color: var(--grey-222); +} + +.post .post-content h1, +.post .post-content h2, +.post .post-content h3, +.post .post-content h4, +.post .post-content h5, +.post .post-content h6 { + font-family: 'PT Sans', sans-serif; + margin: 40px 0 25px 0; + color: var(--grey-222); +} + +.post .post-content h4, +.post .post-content h5, +.post .post-content h6 { + margin: 25px 0; +} + +.post .post-content h1 { + font-size: 28px; +} + +.post .post-content h2 { + font-size: 26px; +} + +.post .post-content h3 { + font-size: 22px; +} + +.post .post-content h4 { + font-size: 20px; +} + +.post .post-content h5 { + font-size: 18px; +} + +.post .post-content h6 { + font-size: 16px; +} + +.post .post-content a { + color: var(--main-color); +} + +.post .post-content a:hover { + text-decoration: none; +} + +.post .post-content img { + display: block; + max-width: 100%; + height: auto; +} + +.post .post-content ul { + list-style-type: disc; + list-style-position: inside; +} + +.post .post-content ul, +.post .post-content ol { + margin: 15px 0; + padding: 0 0 0 20px; +} + +.post .post-content ul ul, +.post .post-content ul ol, +.post .post-content ol ul, +.post .post-content ol ol { + padding: 0 0 0 20px; +} + +.post .post-content ul li, +.post .post-content ol li { + margin: 5px 0; +} + +.post .post-content ul li > code, +.post .post-content ol li > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); +} + +.post .post-content dl { + margin: 40px 0; +} + +.post .post-content dl dt { + margin: 10px 0 0; + font-weight: 700; +} + +.post .post-content dl dd { + margin: 5px 0; +} + +.post .post-content dl dd > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); +} + +.post .post-content p { + margin: 15px 0; +} + +.post .post-content p > code { + font-size: 14px; + padding: 3px 6px; + margin: 0 4px; + background: var(--grey-fa); + border: 1px solid var(--grey-ccc); +} + +.post .post-content .alignleft { + float: left; + margin: 20px 30px 10px 0; +} + +.post .post-content .alignright { + float: right; + margin: 20px 0 10px 20px; +} + +.post .post-content .aligncenter { + clear: both; + margin: 0 auto 20px; +} + +.post .post-content figcaption { + font-size: 13px; + font-style: italic; + padding-top: 10px; +} + +.post .post-content .iframe-wrapper { + position: relative; + padding-top: 56.25%; +} + +.post .post-content .iframe-wrapper > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.post .post-content .read-more-button { + font-size: 16px; + color: var(--grey-555); +} + +.post .post-footer { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 0 20px; + margin: 50px 0 0; +} + +.post .post-footer .post-tags { + display: flex; + flex-flow: row wrap; + flex: 9 1 auto; + gap: 0 20px; + list-style: none; + margin: 0; + padding: 0; +} + +.post .post-footer .post-tags li a { + font-size: 14px; + font-family: 'PT Sans', sans-serif; + color: var(--grey-ccc); + text-decoration: none; + transition: all .15s ease; +} + +.post .post-footer .post-tags li a:hover { + color: var(--grey-555); +} + +@media screen and (max-width: 960px) { + .post .post-title { + margin: 0 0 15px; + } + + .post .post-author { + display: flex; + align-items: center; + flex-flow: row wrap; + gap: 15px; + position: static; + width: 100%; + margin: 0 0 20px; + text-align: left; + } + + .post .post-author .author-avatar { + width: 36px; + height: 36px; + } + + .post .post-author .author-info .author-name { + margin: 0; + color: var(--grey-555); + text-transform: initial; + } + + .post .post-author .author-info .author-title { + display: none; + } + + .post .post-author .post-meta { + display: flex; + flex-flow: row wrap; + margin: 0; + margin-left: auto; + padding: 0; + } + + .post .post-author .post-meta:before { + content: none; + } + + .post .post-author .post-meta .post-categories { + margin: 0 0 0 5px; + padding: 0 0 0 10px; + } + + .post .post-author .post-meta .post-categories:before { + position: absolute; + top: 50%; + left: 0; + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--grey-ccc); + content: ""; + } +} -- cgit v1.2.3