mine.css - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

CHANGELOG.md

@@ -10,9 +10,21 @@ # Changelog
 
-## [v4.0.2](https://github.com/bcomnes/mine.css/compare/v4.0.0...v4.0.2) - 2020-08-14
+## [v4.0.3](https://github.com/bcomnes/mine.css/compare/v4.0.2...v4.0.3) - 2020-08-15
 
 ### Commits
 
+- bug: fix 1:1 color mode mapping [`f7285b5`](https://github.com/bcomnes/mine.css/commit/f7285b53041be645543891c94e7004ac64b2a123)
+
+## [v4.0.2](https://github.com/bcomnes/mine.css/compare/v4.0.1...v4.0.2) - 2020-08-13
+
+### Commits
+
 - bug: fix dist names [`e621d21`](https://github.com/bcomnes/mine.css/commit/e621d2151b60d831b3f180fd97d8c3b67d166ba5)
 - Update and rename readme.md to README.md [`efdc3b5`](https://github.com/bcomnes/mine.css/commit/efdc3b583d41e30f47e86dca3237ca0f588bdc1a)
 
+## [v4.0.1](https://github.com/bcomnes/mine.css/compare/v4.0.0...v4.0.1) - 2020-08-13
+
+### Commits
+
+- bug: fix dist names [`81dcdd7`](https://github.com/bcomnes/mine.css/commit/81dcdd7c073fd943fb99b01986f245858827401d)
+
 ## [v4.0.0](https://github.com/bcomnes/mine.css/compare/v3.0.1...v4.0.0) - 2020-08-13
@@ -19,0 +31,0 @@

guide.md

@@ -452,1 +452,6 @@ # Style Guide
 ```
+
+### <a id="inputs" href="#inputs">Input Types
+
+
+<input type="button" value="Button">

package.json

 {
   "name": "mine.css",
   "description": "Classless stylesheet for markdown documents evolved from style.css",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "author": "Nate Goldman <[e-mail]>",
@@ -73,4 +73,6 @@ "bugs": {
     "watch:md": "npm run build:md -- -w",
-    "watch:site.css": "run-s 'build:site.css -- --watch'"
+    "watch:site.css": "run-s 'build:site.css -- --watch'",
+    "watch:mine.css": "run-s 'build:mine.css -- --watch'",
+    "watch:layout.css": "run-s 'build:layout.css -- --watch'"
   }
 }

README.md

@@ -113,2 +113,5 @@ # mine.css
   --light-mark-background: hsla(60, 100%, 50%, 1); /* #ff0 */
+  --light-code-text: var(--light-text);
+  --light-code-background: var(--light-accent-background);
+  --light-code-border: var(--light-accent-midground);
 
@@ -124,2 +127,5 @@ /* dark colors */
   --dark-mark-background: hsla(58, 66%, 30%, 1); /* #7f7c1a */
+  --dark-code-text: var(--dark-text);
+  --dark-code-background: var(--dark-accent-background);
+  --dark-code-border: var(--dark-accent-midground);
 }
@@ -176,2 +182,3 @@ ```
 ```css
+:root,
 .light-mode {
@@ -189,5 +196,5 @@ /* main colors */
   --mark-background: var(--light-mark-background);
-  --code-text: var(--light-text);
-  --code-background: var(--light-accent-background);
-  --code-border: var(--light-accent-midground);
+  --code-text: var(--light-code-text);
+  --code-background: var(--light-code-background);
+  --code-border: var(--light-code-border);
 }
@@ -207,6 +214,12 @@
   --mark-background: var(--dark-mark-background);
-  --code-text: var(--dark-text);
-  --code-background: var(--dark-accent-background);
-  --code-border: var(--dark-accent-midground);
+  --code-text: var(--dark-code-text);
+  --code-background: var(--dark-code-background);
+  --code-border: var(--dark-code-border);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @extend .dark-mode; /* stylelint-disable-line at-rule-no-unknown */
+  }
+}
 ```
@@ -234,5 +247,36 @@
 
+Additionally, when using `theme-switcher.js`, you can easily target dark mode using the following selector:
+
+```css
+.dark-mode:not(.light-mode) {
+  /* additional dark mode styles go here */
+}
+```
+
+and the body tag will stay in sync with the system preferenc or user override.  Otherwise you need to define duplicate css rules in the dark mode media query:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* duplicate your dark mode styles here if not using theme-switcher.js */
+  }
+}
+```
+
+## Dark mode images
+
+Images can be swapped out using the `<picture>` tag.
+
+```html
+<picture>
+    <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
+    <img src="mojave-day.jpg">
+</picture>
+```
+
+See [this webkit blogpost](https://webkit.org/blog/8840/dark-mode-support-in-webkit/) for more info on dark mode.
+
 ## Layout
 
-`mine.css` doesn't include any layout css, thought it does ship a simple layout css file that provides basic layout for a page and supports `safe-area` that accommodates cell phone notches and whatnot.
+`mine.css` doesn't include any layout css, thought it does ship a simple layout css file that provides basic layout for a page and supports [`safe-area` that accommodates cell phone notches and whatnot](https://webkit.org/blog/7929/designing-websites-for-iphone-x/).
 
@@ -239,0 +283,0 @@ ```html

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87541

increased by3.4%

Lines of code

991

increased by1.23%

Number of lines in readme file

295

increased by17.53%

No dependency changes