Update docs (#11)

kimikage · Apr 7, 2020 · f4202fc · f4202fc
1 parent 569f5b2
commit f4202fc
Show file tree

Hide file tree

Showing 13 changed files with 283 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # ColorBlendModes
 
 [![Docs Stable](https://img.shields.io/badge/docs-stable-blue.svg)](https://kimikage.github.io/ColorBlendModes.jl/stable)
-[![Docs Latest](https://img.shields.io/badge/docs-latest-blue.svg)](https://kimikage.github.io/ColorBlendModes.jl/dev)
+[![Docs Dev](https://img.shields.io/badge/docs-dev-blue.svg)](https://kimikage.github.io/ColorBlendModes.jl/dev)
 [![Build Status](https://travis-ci.com/kimikage/ColorBlendModes.jl.svg?branch=master)](https://travis-ci.com/kimikage/ColorBlendModes.jl)
 [![Codecov](https://codecov.io/gh/kimikage/ColorBlendModes.jl/branch/master/graph/badge.svg)](https://codecov.io/gh/kimikage/ColorBlendModes.jl)
 

diff --git a/docs/make.jl b/docs/make.jl
@@ -23,6 +23,22 @@ module CompositingExamples
         PNGFiles.save(joinpath("assets", keyword(bm) * ".png"), out)
         nothing
     end
+
+    function generate(bm::BlendMode, opacity::Int)
+        blue  = load_image("blue.png")
+        green = load_image("green.png")
+        out = blend.(blue, green, mode=bm, opacity=opacity/100)
+        PNGFiles.save(joinpath("assets", keyword(bm) * "_" * string(opacity) * ".png"), out)
+        nothing
+    end
+
+    function generate(op::CompositeOperation, bm::BlendMode)
+        blue  = load_image("blue.png")
+        green = load_image("green.png")
+        out = blend.(blue, green, mode=bm, op=op)
+        PNGFiles.save(joinpath("assets", keyword(op) * "_" * keyword(bm) * ".png"), out)
+        nothing
+    end
 end
 
 makedocs(
@@ -34,8 +50,10 @@ makedocs(
     sitename = "ColorBlendModes",
     pages    = Any[
         "Introduction" => "index.md",
-        "Blend Modes" => "blendmodes.md",
-        "Index" => "functionindex.md",
+        "Blending and Compositing" => "blending-and-compositing.md",
+        "Blend Modes" => "blend-modes.md",
+        "Composite Operations" => "composite-operations.md",
+        "Index" => "function-index.md",
         ]
     )
 

diff --git a/docs/src/assets/blue.png b/docs/src/assets/blue.png
diff --git a/docs/src/assets/checker16.png b/docs/src/assets/checker16.png
diff --git a/docs/src/assets/green.png b/docs/src/assets/green.png
diff --git a/docs/src/assets/mix.css b/docs/src/assets/mix.css
@@ -15,10 +15,57 @@ div.mix {
     display: inline-block;
   }
 }
+div.normal div {
+  mix-blend-mode: normal;
+}
+div.multiply div {
+  mix-blend-mode: multiply;
+}
+div.screen div {
+  mix-blend-mode: screen;
+}
+div.overlay div {
+  mix-blend-mode: overlay;
+}
+div.darken div {
+  mix-blend-mode: darken;
+}
+div.lighten div {
+  mix-blend-mode: lighten;
+}
+div.color-dodge div {
+  mix-blend-mode: color-dodge;
+}
+div.color-burn div {
+  mix-blend-mode: color-burn;
+}
+div.hard-light div {
+  mix-blend-mode: hard-light;
+}
+div.soft-light div {
+  mix-blend-mode: soft-light;
+}
+div.difference div {
+  mix-blend-mode: difference;
+}
+div.exclusion div {
+  mix-blend-mode: exclusion;
+}
+div.hue div {
+  mix-blend-mode: hue;
+}
+div.saturation div {
+  mix-blend-mode: saturation;
+}
+div.color div {
+  mix-blend-mode: color;
+}
+div.luminosity div {
+  mix-blend-mode: luminosity;
+}
 
 div.mix div {
   position: absolute;
-  mix-blend-mode: inherit;
   width: 256px;
   height: 256px;
   background: url('juliadots.png');
@@ -43,3 +90,7 @@ div.mix:hover div:first-child {
 div.mix:hover div:last-child {
   transform:translateY(16%);
 }
+
+article td img {
+  background: url('checker16.png');
+}
diff --git a/docs/src/assets/source-atop_normal.svg b/docs/src/assets/source-atop_normal.svg
diff --git a/docs/src/assets/source-over_normal.svg b/docs/src/assets/source-over_normal.svg
diff --git a/docs/src/blendmodes.md → docs/src/blend-modes.md b/docs/src/blendmodes.md → docs/src/blend-modes.md
@@ -12,9 +12,7 @@ CompositingExamples.generate(BlendNormal) # hide
 ```
 ![normal](assets/normal.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:normal;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix normal"><div></div><div></div><div></div></div>
 ```
 
 ```@docs
@@ -27,9 +25,7 @@ CompositingExamples.generate(BlendMultiply) # hide
 ```
 ![multiply](assets/multiply.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:multiply;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix multiply"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendMultiply
@@ -40,9 +36,7 @@ CompositingExamples.generate(BlendScreen) # hide
 ```
 ![screen](assets/screen.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:screen;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix screen"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendScreen
@@ -54,9 +48,7 @@ CompositingExamples.generate(BlendOverlay) # hide
 ```
 ![overlay](assets/overlay.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:overlay;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix overlay"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendOverlay
@@ -68,9 +60,7 @@ CompositingExamples.generate(BlendDarken) # hide
 ```
 ![darken](assets/darken.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:darken;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix darken"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendDarken
@@ -82,9 +72,7 @@ CompositingExamples.generate(BlendLighten) # hide
 ```
 ![lighten](assets/lighten.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:lighten;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix lighten"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendLighten
@@ -96,9 +84,7 @@ CompositingExamples.generate(BlendColorDodge) # hide
 ```
 ![color-dodge](assets/color-dodge.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:color-dodge;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix color-dodge"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendColorDodge
@@ -110,9 +96,7 @@ CompositingExamples.generate(BlendColorBurn) # hide
 ```
 ![color-burn](assets/color-burn.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:color-burn;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix color-burn"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendColorBurn
@@ -124,9 +108,7 @@ CompositingExamples.generate(BlendHardLight) # hide
 ```
 ![hard-light](assets/hard-light.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:hard-light;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix hard-light"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendHardLight
@@ -138,9 +120,7 @@ CompositingExamples.generate(BlendSoftLight) # hide
 ```
 ![soft-light](assets/soft-light.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:soft-light;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix soft-light"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendSoftLight
@@ -151,9 +131,7 @@ CompositingExamples.generate(BlendDifference) # hide
 ```
 ![difference](assets/difference.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:difference;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix difference"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendDifference
@@ -164,9 +142,7 @@ CompositingExamples.generate(BlendExclusion) # hide
 ```
 ![exclusion](assets/exclusion.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:exclusion;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix exclusion"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendExclusion
@@ -177,9 +153,7 @@ CompositingExamples.generate(BlendHue) # hide
 ```
 ![hue](assets/hue.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:hue;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix hue"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendHue
@@ -190,9 +164,7 @@ CompositingExamples.generate(BlendSaturation) # hide
 ```
 ![saturation](assets/saturation.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:saturation;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix saturation"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendSaturation
@@ -203,9 +175,7 @@ CompositingExamples.generate(BlendColor) # hide
 ```
 ![color](assets/color.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:color;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix color"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendColor
@@ -216,9 +186,7 @@ CompositingExamples.generate(BlendLuminosity) # hide
 ```
 ![luminosity](assets/luminosity.png)
 ```@raw html
-<div class="mix" style="mix-blend-mode:luminosity;">
-  <div></div><div></div><div></div>
-</div>
+<div class="mix luminosity"><div></div><div></div><div></div></div>
 ```
 ```@docs
 BlendLuminosity