From a0b2ccee847a4b69c3a31f29dfe7db884dc92f77 Mon Sep 17 00:00:00 2001 From: Dean Attali Date: Tue, 1 Sep 2020 04:33:08 +0000 Subject: [PATCH] css: rearrange some of the file and add a few styles from before bootstrap upgrade; fixes #716 --- assets/css/beautifuljekyll.css | 146 ++++++++++++++++++++------------- 1 file changed, 91 insertions(+), 55 deletions(-) diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css index 21f6411..2c04cd7 100644 --- a/assets/css/beautifuljekyll.css +++ b/assets/css/beautifuljekyll.css @@ -108,6 +108,13 @@ img { max-width: 100%; } +.linked-section { + padding-top: 3.75rem; + margin-top: -1.5625rem; +} + +/* Comments */ + .disqus-comments { margin-top: 1.875rem; } @@ -118,11 +125,6 @@ img { } } -.linked-section { - padding-top: 3.75rem; - margin-top: -1.5625rem; -} - /* --- Navbar --- */ .navbar-custom { @@ -428,7 +430,7 @@ footer .footer-custom-content { } } -/* --- Post preview --- */ +/* --- Post preview (feed) --- */ .post-preview { padding: 1.25rem 0; @@ -474,53 +476,53 @@ footer .footer-custom-content { margin: 0 0 0.625rem; font-family: 'Lora', 'Times New Roman', serif; } -.post-entry { +.post-preview .post-entry { width: 100%; } -.post-image { +.post-preview .post-image { float: right; margin-left: 0.625rem; height: 12rem; width: 12rem; } -.post-image { +.post-preview .post-image { filter: grayscale(90%); } -.post-image:hover { +.post-preview .post-image:hover { filter: grayscale(0%); } -.post-image img { +.post-preview .post-image img { border-radius: 6rem; height: 100%; width: 100%; } -.post-image-short { +.post-preview .post-image-short { margin-top: -2.1875rem; } @media (max-width: 767px) { - .post-image { + .post-preview .post-image { height: 9rem; width: 9rem; } - .post-image-short { + .post-preview .post-image-short { margin-top: 0; } } -.post-image-small { +.post-preview .post-image-small { width: 100%; height: 100%; text-align: center; display: none; } -.post-image-small img { +.post-preview .post-image-small img { width: 6.25rem; height: 6.25rem; } @media (max-width: 500px) { - .post-image { + .post-preview .post-image { display: none; } - .post-image-small { + .post-preview .post-image-small { display: block; } } @@ -567,6 +569,30 @@ footer .footer-custom-content { } } +/* Tags page */ + +.tag-btn { + margin: 0.3125rem; +} + +#full-tags-list { + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +#full-tags-list .tag-entry { + margin: 0 0 0.9375rem 1.5625rem; +} + +#full-tags-list .tag-entry a { + font-size: 1.25rem; +} + +#full-tags-list .tag-entry .entry-date { + color: #808080; + font-style: italic; + font-size: 1rem; +} + /* --- Post and page headers --- */ .intro-header { @@ -709,17 +735,6 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img { } } -.caption { - text-align: center; - font-size: 0.875rem; - padding: 0.625rem; - font-style: italic; - margin: 0; - display: block; - border-bottom-right-radius: 0.3125rem; - border-bottom-left-radius: 0.3125rem; -} - #header-gh-btns { margin-bottom: 0.9375rem; } @@ -882,6 +897,16 @@ pre { background: none; } +/* Fix table border github gist snippets */ + +.gist, .gist-file table tr { + border: unset; +} + +.gist, .gist-file table tr td { + border: unset; +} + /* --- Social media sharing section --- */ #social-share-section { @@ -918,36 +943,47 @@ pre { border-left-color: #3CB371; } -/* Fix table border github gist snippets */ +/* --- Misc blog post styles --- */ -.gist, .gist-file table tr { - border: unset; +.blog-post :first-child { + margin-top: 0; } -.gist, .gist-file table tr td { - border: unset; +.blog-post img { + max-width: 100%; } -/* Tags page */ - -.tag-btn { - margin: 0.3125rem; -} - -#full-tags-list { - font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -#full-tags-list .tag-entry { - margin: 0 0 0.9375rem 1.5625rem; -} - -#full-tags-list .tag-entry a { - font-size: 1.25rem; -} - -#full-tags-list .tag-entry .entry-date { - color: #808080; +.blog-post .caption { + text-align: center; + font-size: 0.875rem; + padding: 0.625rem; font-style: italic; - font-size: 1rem; + color: #777; + margin: 0; + display: block; + border-bottom-right-radius: 0.3125rem; + border-bottom-left-radius: 0.3125rem; +} + +.blog-post hr { + max-width: 25%; + border-width: 0.25rem; + border-radius: 0.1875rem; + border-color: #808080; +} + +.blog-post blockquote { + padding: 0.625rem 1.25rem; + margin: 0 0 1.25rem; + font-size: 1.1rem; + border-left: 0.3125rem solid #eee; +} + +.blog-post blockquote p:last-child { + margin-bottom: 0; +} + +.center { + display: block; + margin: 0 auto; }