Adds prefered mode dark appearance feature
This commit is contained in:
Josh Johnson
parent
fa861cb045
commit
fcfa7a8972
9 changed files with 167 additions and 60 deletions
|
|
@ -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.  |
|
||||
| `[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. |
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 110 KiB |
BIN
images/posts.png
BIN
images/posts.png
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 435 KiB After Width: | Height: | Size: 577 KiB |
|
|
@ -20,6 +20,12 @@
|
|||
{{ $.Scratch.Add "title" .Site.Title }}
|
||||
<title>{{ with .Title }}{{ if ne . ($.Scratch.Get "title") }}{{ . }} · {{ end }}{{ end }}@{{ .Site.Author.handle }}’s {{ .Site.Title }}</title>
|
||||
|
||||
<link rel="stylesheet" href="{{.Site.BaseURL}}css/joshin-color-palette.css" media="screen" charset="utf-8" />
|
||||
<link rel="stylesheet" href="{{.Site.BaseURL}}css/joshin-color-light.css" media="screen" charset="utf-8" />
|
||||
{{ if .Site.Params.EnablePreferredDarkAppearance }}
|
||||
<link rel="stylesheet" href="{{.Site.BaseURL}}css/joshin-color-dark.css" media="screen" charset="utf-8" />
|
||||
{{ end }}
|
||||
|
||||
<link rel="stylesheet" href="{{.Site.BaseURL}}css/weblog.css" media="screen" charset="utf-8" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.14/css/lightgallery.min.css" type="text/css" />
|
||||
|
||||
|
|
|
|||
28
static/css/joshin-color-dark.css
Normal file
28
static/css/joshin-color-dark.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
26
static/css/joshin-color-light.css
Normal file
26
static/css/joshin-color-light.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
30
static/css/joshin-color-palette.css
Normal file
30
static/css/joshin-color-palette.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue