diff --git a/demos/zacks-examples/image.png b/demos/zacks-examples/image.png new file mode 100644 index 0000000..af47bd2 Binary files /dev/null and b/demos/zacks-examples/image.png differ diff --git a/demos/zacks-examples/index-backgroundfun+recursion.html b/demos/zacks-examples/index-backgroundfun+recursion.html new file mode 100644 index 0000000..064e8df --- /dev/null +++ b/demos/zacks-examples/index-backgroundfun+recursion.html @@ -0,0 +1,23 @@ + + + + + Element Query Demo + + + + + + + + + + +

Playing Around

+

Demo description

+ +
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis rerum itaque nostrum suscipit magnam maiores doloribus cum, sint ullam perferendis dolorem officia harum ab esse labore nisi neque a numquam.
+
+ + \ No newline at end of file diff --git a/demos/zacks-examples/index.html b/demos/zacks-examples/index.html new file mode 100644 index 0000000..048a8a4 --- /dev/null +++ b/demos/zacks-examples/index.html @@ -0,0 +1,28 @@ + + + + + Element Query Demo + + + + + + + + + + + +
+
+
+ +
I'm Zachary Brady, Partner and Director of Technology at Suits & Sandals, LLC, drummer for the Brooklyn based band Cunk and the Moments of Wonder, and New Media artist.
+
+
Read More
+
+
+ + + \ No newline at end of file diff --git a/demos/zacks-examples/styles-backgroundfun.css b/demos/zacks-examples/styles-backgroundfun.css new file mode 100644 index 0000000..4f6b148 --- /dev/null +++ b/demos/zacks-examples/styles-backgroundfun.css @@ -0,0 +1,11 @@ +.container { + background: red; +} + +.inner { + background: green; +} + +.container:media(min-width: 500px) > .inner { + background: red; +} \ No newline at end of file diff --git a/demos/zacks-examples/styles-backgroundfun2.css b/demos/zacks-examples/styles-backgroundfun2.css new file mode 100644 index 0000000..ee35df5 --- /dev/null +++ b/demos/zacks-examples/styles-backgroundfun2.css @@ -0,0 +1,12 @@ +.container { + background: red; + width: 50%; +} + +.inner { + background: green; +} + +.container:media(min-width: 500px) > .inner { + background: red; +} \ No newline at end of file diff --git a/demos/zacks-examples/styles-recursion.css b/demos/zacks-examples/styles-recursion.css new file mode 100644 index 0000000..8e1b076 --- /dev/null +++ b/demos/zacks-examples/styles-recursion.css @@ -0,0 +1,16 @@ +.container { + background: red; + display: inline-block; +} + +.inner { + width: 15em; + height: 15em; + background: red; + color: white; +} + +.container:media(min-width: 10em) > .inner { + width: 5em; + background: green; +} \ No newline at end of file diff --git a/demos/zacks-examples/styles.css b/demos/zacks-examples/styles.css new file mode 100644 index 0000000..4eba41e --- /dev/null +++ b/demos/zacks-examples/styles.css @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; +} + +body { + font-family: "Myriad Pro", sans-serif; + +} + +.container { + width: 50%; + max-width: 60em; + margin: 0 auto; + padding: 1em; + overflow: hidden; +} + +.widget_image { + max-width: 100%; + margin: 0 auto; + display: block; +} + +.widget_text { + background: #ffeeee; + border: #aa2323 0.25em solid; + padding: 1em; +} + +.widget_btn a { + letter-spacing: 0.1em; + text-decoration: none; + text-align: center; + text-transform: uppercase; + color: #fff; + background: #aa2323; + padding: 0.5em 1em; + display: block; +} + +.container:media(min-width:30em) .widget_content { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-end; + align-items: flex-end; +} + +.container:media(min-width:30em) .widget_text { + border-bottom: none; +} + +.container:media(min-width:30em) .widget_image { + width: 40%; +}