body { border: 0; margin: auto; width: 1000px; padding: 50px; font-family: 'Nimbus Sans', sans-serif; color: #000000; } /* Centre text */ h2 { text-align: center; } h3 { text-align: center; } /* Reflow with long URLs and strings of text */ .reflow { word-wrap:break-word; overflow-wrap:break-word; } /* Individual text boxes */ .box{ width: fit-content; height: fit-content; border: 1px solid #777; margin: auto; padding: 0; } /* Responsive image gallery */ div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 50%; } @media only screen and (max-width: 700px) { .responsive { width: 50%; margin: 6px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } /* Flexbox tables */ * { box-sizing: border-box; } .flex-container1 { display: flex; flex-direction: row; text-align: left; } .flex-container2 { display: flex; flex-direction: row; text-align: left; background-color: #dddddd; } .flex-item-left { padding: 8px; flex: 20%; } .flex-item-right { padding: 8px; flex: 80%; } /* Mastodon comments */ :root { --mastodon-comment-indent: 40px; } @media only screen and (max-width: 1024px) { :root { --mastodon-comment-indent: 20px; } } @media only screen and (max-width: 640px) { :root { --mastodon-comment-indent: 0px; } } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; src: local("Source Code Pro"), local("Hack Nerd Font Mono"); } @media only screen and (min-width: 1024px) { #blog article.postShorten .postShorten-wrap { width: calc(100% - 140px - 30px); } } body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-fw) { letter-spacing: 0; font-family: var(--font-family); } pre { margin-bottom: 0px; } pre, pre *, code, code * { font-family: var(--code-font-family) !important; font-size: var(--code-font-size) !important; line-height: 17px !important; border-radius: var(--block-border-radius); background-color: var(--block-background-color) !important; overflow-wrap: break-word; } pre code { border: 1px var(--block-border-color) solid; padding: var(--block-padding); } #sidebar { font-size: var(--sidebar-font-size); font-weight: 600; } #blog article.postShorten { padding: 20px 0px; } #blog .post { /* background-color: whitesmoke; */ } #blog .main-content-wrap { /* background-color: white; */ max-width: 1200px; } #error, .error { background-color: white; width: 430px; margin: 50px auto; display: block; padding: 20px; border-radius: 10px; color: red; border: 1px solid red; } #blog .post h1 { font-size: 24px; } #blog .post .post-content img, #blog .post .post-content video { margin-block-start: 2.3em; margin-block-end: 2em; } /* code highlight */ div.highlight, pre { /* max-width: 90%; */ margin-left: auto; margin-right: auto; } div.highlight pre { max-width: 100%; white-space: pre-wrap; word-break: break-word; } .mastodon-comment { background-color: var(--block-background-color); border-radius: var(--block-border-radius); border: 1px var(--block-border-color) solid; padding: 20px; margin-bottom: 1.5rem; display: flex; flex-direction: column; color: var(--font-color); font-size: var(--font-size); } .mastodon-comment p { margin-bottom: 0px; } .mastodon-comment .author { padding-top:0; display:flex; } .mastodon-comment .author a { text-decoration: none; } .mastodon-comment .author .avatar img { margin-right:1rem; min-width:60px; border-radius: 5px; } .mastodon-comment .author .details { display: flex; flex-direction: column; } .mastodon-comment .author .details .name { font-weight: bold; } .mastodon-comment .author .details .user { color: #5d686f; font-size: medium; } .mastodon-comment .author .date { margin-left: auto; font-size: small; } .mastodon-comment .content { margin: 15px 20px; } .mastodon-comment .content p:first-child { margin-top:0; margin-bottom:0; } .mastodon-comment .status > div { display: inline-block; margin-right: 15px; } .mastodon-comment .status a { color: #5d686f; text-decoration: none; } .mastodon-comment .status .replies.active a { color: #003eaa; } .mastodon-comment .status .reblogs.active a { color: #8c8dff; } .mastodon-comment .status .favourites.active a { color: #ca8f04; }