body { font-family: "Liberation Sans", "Nimbus Sans", "Arial", "Helvetica", sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } #thing-that-makes-the-footer-be-at-the-bottom-of-the-page { flex: 1 1; } h1 { font-family: serif; text-align: center; font-size: 3em; } h1#logo { font-family: "Playfair Display", serif; } #subheading { text-align: center; font-family: serif; font-size: 1.3em; margin-top: -20px; } header, footer { font-family: sans-serif; background: #fafafa; padding: 0 20px; } footer { margin-top: 20px; text-align: center; padding: 10px 20px; } nav { display: inline-block; } nav a, #header-home-link { padding: 0 10px; display: inline-block; } #header-container { width: 90%; margin: 0 auto; } header h1 { display: inline-block; text-align: left; font-size: 1.2em; } #header-logo { height: 32px; width: 32px; display: inline-block; vertical-align: middle; } #pagination { display: flex; justify-content: space-between; } main { max-width: 800px; 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 h2 a { opacity: 0.2; transition: 0.2s all; } #post-body h2:hover a { opacity: 1; } #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; flex-direction: column; } .related-post { flex: 1; margin: 5px 0; padding: 10px; } .related-title { text-align: center; font-family: serif; font-size: 1.3em; } /* share post */ .post-share { display: inline-block; height: 32px; width: 32px; background: center / contain no-repeat; } .post-share.mastodon { background-image: url('/assets/mastodon.svg'); } .post-share.email { background-image: url('/assets/email.svg'); } /* mastodon share popup */ /* 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; } .plyr__menu__container .plyr__control > span::-moz-focus-inner { border: 0; /* removes the dotted outline firefox places on some of the playr elements */ }