diff --git a/README.md b/README.md index b220b14..90ef4cd 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ To see more, [check out my blog which is rendered with this theme](http://jnjosh - [Defining Yourself as the Author](#defining-yourself-as-the-author) - [Customizing the Bio Section, 404 Page, Javascript, or Stylesheets](#customizing-the-bio-section-404-page-javascript-or-stylesheets) - [Creating a Link Post](#creating-a-link-post) + - [Specifying a Featured Image for Social Media](#specifying-a-featured-image-for-social-media) + - [Preferred Dark Appearance](#preferred-dark-appearance) - [Variables](#variables) - [Overrides](#overrides) - [Contributing](#contributing) @@ -137,6 +139,10 @@ Sometimes you want to feature an image as your featured image that will display feature: "assets/posts/20240219/image.jpg" ``` +#### Preferred Dark Appearance + +If you want to enable a dark appearance, there is limited support for that. Currently, setting the `EnablePreferredDarkAppearance` param to true in your config.toml file will enable it in an automatic state—if the system is using dark mode. + ### Variables | Variable | What value? | Required | @@ -152,6 +158,7 @@ feature: "assets/posts/20240219/image.jpg" | `[author]` - `FlickrID` | `Your Flickr ID` | No. The footer shows your photo stream from flickr. If you don't set it, nothing will be displayed. | | `[params]` - `Description` | `Describe your site` | No. If set, this is added to your pages metadata. | | `[params]` - `ShowCopyright` | `true` or `false` | No. If true, Copyright text will be added to the footer. | +| `[params]` - `EnablePreferredDarkAppearance` | `true` or `false` | No. If true, The viewers system dark mode is respected switching to a dark appearance. | | `[params]` - `RSSEnabled` | `true` or `false` | No. If true, RSS pages will be generated. | | `[params]` - `RSSSections` | `[ "Posts", "Microposts", "Photos" ]` | If you want RSS links in the menu, yes. These strings need to be the display name of the section where you want to have an RSS icon displayed. ![rss](https://github.com/jnjosh/internet-weblog/blob/master/images/rss.png) | | `[params]` - `RSSMicropostTitles` | `true` or `false` | No. If false, Microposts RSS feeds will not have the title in included posts. If not present or true, nothing happens. | diff --git a/images/linkpost.png b/images/linkpost.png index f33ab19..9e689df 100644 Binary files a/images/linkpost.png and b/images/linkpost.png differ diff --git a/images/posts.png b/images/posts.png index 87955c1..728659e 100644 Binary files a/images/posts.png and b/images/posts.png differ diff --git a/images/screenshot.png b/images/screenshot.png index 84d2939..94ad79e 100644 Binary files a/images/screenshot.png and b/images/screenshot.png differ diff --git a/layouts/partials/site_header.html b/layouts/partials/site_header.html index 392441f..ef8792a 100644 --- a/layouts/partials/site_header.html +++ b/layouts/partials/site_header.html @@ -20,6 +20,12 @@ {{ $.Scratch.Add "title" .Site.Title }} {{ with .Title }}{{ if ne . ($.Scratch.Get "title") }}{{ . }} · {{ end }}{{ end }}@{{ .Site.Author.handle }}’s {{ .Site.Title }} + + + {{ if .Site.Params.EnablePreferredDarkAppearance }} + + {{ end }} + diff --git a/static/css/joshin-color-dark.css b/static/css/joshin-color-dark.css new file mode 100644 index 0000000..e1d0c41 --- /dev/null +++ b/static/css/joshin-color-dark.css @@ -0,0 +1,28 @@ +/* Dark Color Appearance */ +@media (prefers-color-scheme: dark) { + :root { + /* semantic colors */ + --joshin-accent-color-100: var(--joshin-color-denim-200); + + --joshin-primary-color-100: var(--joshin-color-grey-1200); + --joshin-primary-color-200: var(--joshin-color-grey-200); + --joshin-primary-color-300: var(--joshin-color-grey-400); + --joshin-primary-color-400: var(--joshin-color-grey-400); + --joshin-primary-color-500: var(--joshin-color-grey-200); + --joshin-primary-color-600: var(--joshin-color-grey-400); + --joshin-primary-color-700: var(--joshin-color-grey-300); + --joshin-primary-color-800: var(--joshin-color-grey-200); + --joshin-primary-color-900: var(--joshin-color-grey-100); + + /* elevations */ + --joshin-elevation-0: var(--joshin-color-grey-1100); + --joshin-elevation-1: var(--joshin-color-grey-1000); + --joshin-elevation-2: var(--joshin-color-grey-1100); + --joshin-elevation-3: var(--joshin-color-grey-1200); + --joshin-elevation-4: var(--joshin-color-grey-1200); + + /* components */ + /* link */ + --joshin-component-link-color-default: var(--joshin-accent-color-100); + } +} \ No newline at end of file diff --git a/static/css/joshin-color-light.css b/static/css/joshin-color-light.css new file mode 100644 index 0000000..052fcd4 --- /dev/null +++ b/static/css/joshin-color-light.css @@ -0,0 +1,26 @@ +/* Light Color Appearance */ +:root { + /* semantic colors */ + --joshin-accent-color-100: var(--joshin-color-denim-500); + + --joshin-primary-color-100: var(--joshin-color-grey-200); + --joshin-primary-color-200: var(--joshin-color-grey-400); + --joshin-primary-color-300: var(--joshin-color-grey-500); + --joshin-primary-color-400: var(--joshin-color-grey-600); + --joshin-primary-color-500: var(--joshin-color-grey-800); + --joshin-primary-color-600: var(--joshin-color-grey-900); + --joshin-primary-color-700: var(--joshin-color-grey-1000); + --joshin-primary-color-800: var(--joshin-color-grey-1100); + --joshin-primary-color-900: var(--joshin-color-grey-1200); + + /* elevations */ + --joshin-elevation-0: var(--joshin-color-grey-100); + --joshin-elevation-1: var(--joshin-color-grey-200); + --joshin-elevation-2: var(--joshin-color-grey-500); + --joshin-elevation-3: var(--joshin-color-grey-900); + --joshin-elevation-4: var(--joshin-color-grey-1200); + + /* components */ + /* link */ + --joshin-component-link-color-default: var(--joshin-accent-color-100); +} diff --git a/static/css/joshin-color-palette.css b/static/css/joshin-color-palette.css new file mode 100644 index 0000000..fa8ff78 --- /dev/null +++ b/static/css/joshin-color-palette.css @@ -0,0 +1,30 @@ +:root { + /* Common Colors */ + --joshin-color-white: #ffffff; + --joshin-color-black: #000000; + + /* Greys */ + --joshin-color-grey-100: hsl(0, 0%, 98.82%); + --joshin-color-grey-200: hsl(0, 0%, 90.59%); + --joshin-color-grey-300: hsl(0, 0%, 81.96%); + --joshin-color-grey-400: hsl(0, 0%, 74.12%); + --joshin-color-grey-500: hsl(0, 0%, 65.88%); + --joshin-color-grey-600: hsl(0, 0%, 58.43%); + --joshin-color-grey-700: hsl(0, 0%, 50.59%); + --joshin-color-grey-800: hsl(0, 0%, 43.14%); + --joshin-color-grey-900: hsl(0, 0%, 36.08%); + --joshin-color-grey-1000: hsl(0, 0%, 29.02%); + --joshin-color-grey-1100: hsl(0, 0%, 22.35%); + --joshin-color-grey-1200: hsl(0, 0%, 16.08%); + + /* Denim */ + --joshin-color-denim-100: #E1EFF8; + --joshin-color-denim-200: #C5DEF2; + --joshin-color-denim-300: #9DBCDA; + --joshin-color-denim-400: #7694B6; + --joshin-color-denim-500: #476286; + --joshin-color-denim-600: #334C73; + --joshin-color-denim-700: #233860; + --joshin-color-denim-800: #16274D; + --joshin-color-denim-900: #0D1A40; +} \ No newline at end of file diff --git a/static/css/weblog.css b/static/css/weblog.css index 3fac6da..ae121ff 100644 --- a/static/css/weblog.css +++ b/static/css/weblog.css @@ -1,13 +1,17 @@ +/* @import url(./joshin-color-palette.css); +@import url(./joshin-color-light.css); +@import url(./joshin-color-dark.css); */ /* Page */ body { font: 16px/24px "Avenir Next", "Helvetica Neue", Arial, Helvetica, sans-serif; line-height: 24px; + background-color: var(--joshin-elevation-0); } a[href] { - color: #476286; + color: var(--joshin-component-link-color-default); text-decoration: none; } @@ -16,7 +20,7 @@ a:hover { } h1, h2, h3, h4 { - color: #666666; + color: var(--joshin-primary-color-500); } img { @@ -24,8 +28,8 @@ img { } blockquote { - background-color: #F0F2F5; - color: #999999; + background-color: var(--joshin-elevation-1); + color: var(--joshin-primary-color-500); padding: 5px; } @@ -37,7 +41,6 @@ blockquote p { blockquote p:last-child { font-style: normal; padding-left: 30px; - } .site { @@ -65,13 +68,13 @@ header h1 { margin: 0 auto; padding: 10px 10px 0 10px; max-width: 720px; - color: #5B636E; + color: var(--joshin-primary-color-400); } article > ul > li { font-size: 18px; line-height: 28px; - color: #5B636E; + color: var(--joshin-primary-color-500); } /* Navigation */ @@ -108,38 +111,18 @@ nav ul > li { } .pagination span { - color: #dddddd; + color: var(--joshin-secondary-color-500); } -/* Articles */ - -article.micropost { - margin: 8px auto; -} - -.micropost { - background-color: #f8f8f8; - margin: 40px auto; - padding: 20px; - max-width: 780px; - border-radius: 14px; -} +/* Articles, general */ .post, .page, .post-groups { margin: 40px auto; max-width: 780px; } -.micropost > p { - color: #606060; - font-size: 16px; - line-height: 24px; - margin: 0 0 10px; - text-align: justify; -} - .post > p, .page > p { - color: #666666; + color: var(--joshin-primary-color-500); font-size: 18px; line-height: 28px; margin: 0; @@ -150,9 +133,43 @@ article.micropost { margin: 20px auto; } +.post h2 { + margin: 0; + line-height: 32px; +} + +article .postmeta { + line-height: 22px; + color: var(--joshin-primary-color-400); + margin: 0 auto; + padding: 5px 0 0 0; +} + +/* Microposts */ + +article.micropost { + margin: 8px auto; +} + +.micropost { + background-color: var(--joshin-elevation-1); + margin: 40px auto; + padding: 20px; + max-width: 780px; + border-radius: 14px; +} + +.micropost > p { + color: var(--joshin-primary-color-700); + font-size: 16px; + line-height: 24px; + margin: 0 0 10px; + text-align: justify; +} + .micropost > a { font-size: 12px; - color: #888888; + color: var(--joshin-primary-color-400); margin: 0; } @@ -160,13 +177,10 @@ article.micropost { text-decoration: underline; } -.post h2 { - margin: 0; - line-height: 32px; -} +/* Photo Posts */ article.photo { - border-radius: 5px; + border-radius: 14px; margin: 40px auto; max-width: 780px; overflow: hidden; @@ -174,7 +188,6 @@ article.photo { } article.photo div { - color: #ffffff; padding: 0; margin: 0; text-align: left; @@ -182,13 +195,13 @@ article.photo div { } article.photo .title { - background-color: #476286; + background-color: var(--joshin-accent-color-100); font-size: 18pt; padding: 15px; } article.photo a { - color: #ffffff; + color: var(--joshin-primary-color-100); display: block; overflow: hidden; } @@ -212,12 +225,7 @@ article.photo img:hover { transform: scale3d(1.1, 1.1, 1.1) rotate(-2deg); } -article .postmeta { - line-height: 22px; - color: #999999; - margin: 0 auto; - padding: 5px 0 0 0; -} +/* Post Grouping */ .post-group { display: flex; @@ -227,22 +235,24 @@ article .postmeta { .post-group-item { flex: auto; - width: 40%; + width: 45%; margin: 5px; + padding: 8px; font-size: 10pt; - color: #999999; + border-radius: 14px; + color: var(--joshin-primary-color-600); } .post-group-item:hover { - background-color: #f6f6f6; + background-color: var(--joshin-elevation-1); } .post-group-item h3 { - color: #999999; - font-size: 16pt; + color: var(--joshin-primary-color-400); + font-size: 15pt; margin: 0; padding: 6px 0 0 6px; - font-weight: normal; + font-weight: bold; } .post-group-item ul { @@ -254,8 +264,8 @@ article .postmeta { /* Footer */ footer { - background-color: #545454; - color: #ffffff; + background-color: var(--joshin-elevation-3); + color: var(--joshin-primary-color-200); margin: 0; } @@ -267,11 +277,11 @@ footer { } .footer_text h3 { - color: #cccccc; + color: var(--joshin-primary-color-200); } .footer_text a { - color: #cccccc; + color: var(--joshin-primary-color-60); } .footer_text > div { @@ -313,7 +323,7 @@ footer { } .footer_copyright { - color: #999999; + color: var(--joshin-primary-color-50); font: 12px/20px "Avenir Next", "Helvetica Neue", Arial, Helvetica, sans-serif; margin: auto; padding: 10px 0; @@ -321,7 +331,7 @@ footer { } .footer_copyright a { - color: #cccccc; + color: var(--joshin-primary-color-60); } @media screen @@ -362,16 +372,16 @@ and (max-width: 780px) { } nav ul > li { - background-color: #fafafa; + background-color: var(--joshin-elevation-2); display:list-item; float: none; margin: 0; padding: 10px; - border-bottom: #f2f2f2 1px solid; + border-bottom: var(--joshin-elevation-1) 2px solid; } nav ul:first-child { - border-top: #f2f2f2 1px solid; + border-top: var(--joshin-elevation-1) 2px solid; } .post-group-item {