From 28a046713518419c43570bdfd1da1cae2364d5c5 Mon Sep 17 00:00:00 2001 From: Ben Charlton Date: Sun, 14 Apr 2024 13:18:48 +0100 Subject: [PATCH] Adjust CSS colours, start of a dark mode --- static/css/hyde-dark.css | 379 +++++++++++++++++++++++++++++++++++++++ static/css/hyde.css | 16 +- static/css/poole.css | 8 +- 3 files changed, 391 insertions(+), 12 deletions(-) create mode 100644 static/css/hyde-dark.css diff --git a/static/css/hyde-dark.css b/static/css/hyde-dark.css new file mode 100644 index 0000000..ea774c9 --- /dev/null +++ b/static/css/hyde-dark.css @@ -0,0 +1,379 @@ +/* + * __ __ + * /\ \ /\ \ + * \ \ \___ __ __ \_\ \ __ + * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ + * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ + * \ \_\ \_\/`____ \ \___,_\ \____\ + * \/_/\/_/`/___/> \/__,_ /\/____/ + * /\___/ + * \/__/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/hyde. + */ + + +/* + * Contents + * + * Global resets + * Sidebar + * Container + * Reverse layout + * Themes + */ + + +/* + * Global resets + * + * Update the foundational and global aspects of the page. + */ + +html { + font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif; +} +@media (min-width: 48em) { + html { + font-size: 16px; + } +} +@media (min-width: 58em) { + html { + font-size: 20px; + } +} + + +/* + * Sidebar + * + * Flexible banner for housing site name, intro, and "footer" content. Starts + * out above content in mobile and later moves to the side with wider viewports. + */ + +.sidebar { + text-align: center; + padding: 2rem 1rem; + color: rgba(255,255,255,.5); + background-color: #202020; +} +@media (min-width: 48em) { + .sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 18rem; + } + + footer { + margin-left: 19rem !important; + margin-right: 1rem !important; + } +} + +h1,h2,h3,h4,h5,h6 { + color: #ccc; +} + +/* Sidebar links */ +.sidebar a { + color: #222; +} + +/* About section */ +.sidebar-about h1 { + color: #222; + margin-top: 0; + font-size: 2.25rem; + font-weight: 400; +} + +/* Sidebar nav */ +.sidebar-nav { + padding-left: 0; + list-style: none; +} +.sidebar-nav-item { + display: block; +} +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: underline; +} +.sidebar-nav-item.active { + font-weight: bold; +} + +/* Container + * + * Align the contents of the site above the proper threshold with some margin-fu + * with a 25%-wide `.sidebar`. + */ + +.content { + padding-top: 1rem; + padding-bottom: 1rem; + min-height: 50%; +} + + +html, +body { + height: 100%; + width: 100%; + background-color: #000000; + color: #ccc; +} + +footer { + font-size: .7rem; + text-align: center; + height: 40px; + padding: 1rem 0; + margin: 0 1rem; + border-top: 1px solid #e0e0e0; +} + + +@media (min-width: 48em) { + .content { + max-width: 40rem; + margin-left: 20rem; + margin-right: 2rem; + margin-bottom: -40px; + min-height: 100%; + } +} + +.img-circle { + border-radius: 50%; +} + +.img-headshot { + border: 6px solid #222; + height: 180px; + width: 180px; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; +} + +.sidebar { + background-color: #336699; + color: #222; +} + +.sidebar a, +.sidebar-about h1 { + color: #222; +} + +footer a, +.content a, +.related-posts li a:hover { + color: #336699; +} + +.read-more-link { + margin-top: 1rem; +} + +.read-more-link a { + padding: 8px 16px; + border: 1px solid; + border-color: #336699; + border-radius: 4px; +} + +.read-more-link a:hover { + text-decoration: none; + color: #222; + background-color: #336699; +} + +.pull-right { + float: right; +} + +ul.posts { + list-style: none; + padding: 0 1rem; +} + +.social-icons, +.sidebar nav { + margin-top: 1rem; +} + +ul.posts li, +.sidebar nav li { + font-size: 1.2rem; + padding: 0.25rem 0; +} + +.social-icons a { + font-size: 1.5rem; + padding: 0.2rem; +} + +@media (min-width: 58rem) { + .social-icons a { + font-size: 1.2rem; + } + + ul.posts li, + .sidebar nav li { + font-size: inherit; + padding: 0; + } +} + +.social-icons a, +.social-icons a:hover, +.social-icons a:focus { + text-decoration: none !important; +} + +.pagination { + justify-content: center; + display: flex; + margin: 1em 0 2rem 0; + padding: 0; +} + +.pagination ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.pagination li { + display: block; + float: left; + margin-left: -1px; +} + +.pagination li a { + display: block; + margin-bottom: 0.25em; + padding: 0.5em 1em; + font-size: 14px; + font-weight: bold; + line-height: 1.5; + text-align: center; + text-decoration: none; + color: #336699; + border: 1px solid #336699; + border-radius: 0; +} + +.pagination li a:hover { + color: #222; + background-color: #336699; + opacity: 0.75; +} + +.pagination li.active a { + color: #222; + background-color: #336699; +} + +.pagination li.disabled a { + color: rgba(67, 118, 122, 0.5); + pointer-events: none; + cursor: not-allowed; +} + +.pagination li:first-child { + margin-left: 0; +} + +.pagination li:first-child a { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.pagination li:last-child a { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.share-buttons { + text-align: center; + font-size: 2rem; + margin-top: 2rem; +} + +.share-buttons a { + padding: 0 0.6rem; +} + +.share-buttons a:hover { + opacity: 0.75; +} + +ul.tags { + list-style: none; + padding: 0; + margin: 1rem 0; +} + +ul.tags li { + display: inline-block; + margin: 0.25rem 0; +} + +a.tag-link { + background-color: #f2f2f2; + padding: 5px 10px; + border-radius: 3px; + font-size: 0.75rem; + text-decoration: none; + color: #757575 !important; +} + +a.tag-link:hover { + text-decoration: none; +} + +figure { + padding: 0; + margin: 0; +} + +figure > img { + margin: 0 auto; +} + +figcaption { + text-align: center; + font-size: 80%; +} + +.tagline { + display: block; + font-size: 1.2rem; + margin-bottom: .5rem; + font-weight: 400; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flex { + display: flex; + justify-content: space-between; +} + +.nowrap { + white-space: nowrap; +} diff --git a/static/css/hyde.css b/static/css/hyde.css index 199ca8f..fa12345 100644 --- a/static/css/hyde.css +++ b/static/css/hyde.css @@ -159,7 +159,7 @@ footer { } .sidebar { - background-color: #49757a; + background-color: #336699; color: #fff; } @@ -171,7 +171,7 @@ footer { footer a, .content a, .related-posts li a:hover { - color: #49757a; + color: #336699; } .read-more-link { @@ -181,14 +181,14 @@ footer a, .read-more-link a { padding: 8px 16px; border: 1px solid; - border-color: #49757a; + border-color: #336699; border-radius: 4px; } .read-more-link a:hover { text-decoration: none; color: #fff; - background-color: #49757a; + background-color: #336699; } .pull-right { @@ -262,20 +262,20 @@ ul.posts li, line-height: 1.5; text-align: center; text-decoration: none; - color: #49757a; - border: 1px solid #49757a; + color: #336699; + border: 1px solid #336699; border-radius: 0; } .pagination li a:hover { color: #fff; - background-color: #49757a; + background-color: #336699; opacity: 0.75; } .pagination li.active a { color: #fff; - background-color: #49757a; + background-color: #336699; } .pagination li.disabled a { diff --git a/static/css/poole.css b/static/css/poole.css index 5118626..f563309 100644 --- a/static/css/poole.css +++ b/static/css/poole.css @@ -90,15 +90,15 @@ h1 { } h2 { margin-top: 1rem; - font-size: 1.5rem; + font-size: 1.25rem; } h3 { - margin-top: 1.5rem; - font-size: 1.25rem; + margin-top: 1.rem; + font-size: 1rem; } h4, h5, h6 { margin-top: 1rem; - font-size: 1rem; + font-size: 0.8rem; } /* Body text */