body { font-family: "Liberation Sans", "Nimbus Sans", "Arial", "Helvetica", sans-serif; margin: 0; margin-bottom: 20px; } h1 { font-family: "Playfair Display"; text-align: center; font-size: 3em; } header { font-family: sans-serif; background: #fafafa; padding: 0 20px; } #header-container { width: 90%; margin: 0 auto; } header h1 { display: inline-block; text-align: left; font-size: 1.2em; } nav { display: inline-block; } #header-logo { height: 32px; width: 32px; display: inline-block; vertical-align: middle; } main { width: 90%; margin: 0 auto; } /* post listings */ .post { padding: 5px; margin: 10px 0; border-bottom: thin #aaa solid; } a { color: #222; text-decoration-thickness: 3px; text-decoration-skip-ink: none; text-decoration-color: #9fc; } h1 a, h2 a, nav a { text-decoration: none; } .post h2 { margin-bottom: 5px; } .post-excerpt h2 { display: none; } p, li { line-height: 1.6em; } /* post view */ #post-title { font-family: serif; margin-bottom: 1rem; } #post-content h2 { background: linear-gradient(to right, #9fc 0px 5px, transparent 5px 100%); padding-left: 7px; margin-left: -7px; } #post-content #post-info { text-align: center; display: block; color: #333; } .post-nav-link { margin-left: 5px; } /* the content of the posts */ #post-body > p { text-align: justify; } #post-body img { margin: 5px auto; display: block; /* box-shadow: 0 0 10px grey; */ } #post-body img, #post-body video { max-width: 800px; } #post-body figure.video { text-align: center; margin: 0 auto; padding: 10px; width: 80%; } #post-body figure.video video { max-width: 100%; } #post-body figure.video figcaption { font-style: italic; padding: 10px; } #post-body aside { background: #404248; color: white; padding: 20px; margin: 5px 0; text-align: right; } #post-body blockquote { border-top: thin black solid; border-bottom: thin black solid; padding: 10px; text-align: center; } #post-body blockquote::before { content: "Quote"; color: #666; display: block; } #post-body blockquote p:first-of-type { font-size: 1.3em; text-align: center; font-family: serif; } #post-body iframe.mastodon-embed { margin: 0 auto; display: block; border: none; } /* related posts */ .related-post { border: thin black solid; border-radius: 2px; } #post-related-posts { display: flex; justify-content: space-between; } .related-post { flex: 1; margin: 5px; padding: 10px; } .related-title { text-align: center; font-family: serif; font-size: 1.3em; } /* material icons */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; text-rendering: optimizeLegibility; /* Support for IE. */ font-feature-settings: 'liga'; /* my own changes */ vertical-align: bottom; }