diff --git a/css-cookbook/center.html b/css-cookbook/center.html index ec41b398..05ec4e2d 100644 --- a/css-cookbook/center.html +++ b/css-cookbook/center.html @@ -8,31 +8,66 @@ CSS Cookbook: center an element - + + -
-
I am centered!
+
+
+
I am centered!
+
+
+ + + + + + +
+
+ + \ No newline at end of file diff --git a/css-cookbook/columns-flexbox-wrapping.html b/css-cookbook/columns-flexbox-wrapping.html index c3d358ae..13a1cf01 100644 --- a/css-cookbook/columns-flexbox-wrapping.html +++ b/css-cookbook/columns-flexbox-wrapping.html @@ -15,6 +15,17 @@ border-radius: .5em; padding: 20px 10px; width: 500px; + } + + .container>* { + padding: 10px; + border: 2px solid rgb(95, 97, 110); + border-radius: .5em; + } + + + -
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

+
+
+

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo + melon azuki bean garlic.

+ +

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+ +

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed + pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter + purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

+
+
-

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+ + + -

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea - prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane - fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

+
+
+ \ No newline at end of file diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html index a876e59f..6842b375 100644 --- a/css-cookbook/columns-flexbox.html +++ b/css-cookbook/columns-flexbox.html @@ -14,14 +14,22 @@ border: 2px solid rgb(75, 70, 74); border-radius: .5em; padding: 20px 10px; - display: flex; } .container>* { - margin: 0 10px; padding: 10px; border: 2px solid rgb(95, 97, 110); border-radius: .5em; + } + + + @@ -29,23 +37,57 @@ -
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach - carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin - onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot - carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

- -

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea - prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane - fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

+
+
+

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo + melon azuki bean garlic.

+ +

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+ +

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado + daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach + carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin + onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi + beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper + artichoke. +

+ +
+
+ + + + + +
+
+ \ No newline at end of file diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html index d4822337..cf931ffc 100644 --- a/css-cookbook/columns-multicol.html +++ b/css-cookbook/columns-multicol.html @@ -14,6 +14,11 @@ border: 2px solid rgb(75, 70, 74); border-radius: .5em; padding: 20px; + } + + + + + +
+
+
This is the header
+
+

Main page content here, add more if you want to see the footer push down.

+
+
Sticky footer
+
+
+ + + + + +
+ +
+ \ No newline at end of file diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html index 0004f1c1..8ccce524 100644 --- a/css-cookbook/sticky-footer.html +++ b/css-cookbook/sticky-footer.html @@ -10,12 +10,6 @@ + + +
+
+
This is the header
+
+

Main page content here, add more if you want to see the footer push down.

+
+
Sticky footer
+
+
+ + + + + +
+ +
+ \ No newline at end of file diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css index a80047fc..6b829b55 100644 --- a/css-cookbook/styles.css +++ b/css-cookbook/styles.css @@ -13,3 +13,50 @@ body { padding: 0; margin: 0; } + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #F4F7F8; + border: none; + border-left: 6px solid #558ABB; + color: #4D4E53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } + + .playable-css { + height: 80px; + } + + .playable-html { + height: 160px; + } + + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } + + .preview { + width: 90%; + max-width: 700px; + border: 1px solid #4D4E53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } + + .preview input { + display: block; + margin: 5px; + } + diff --git a/layout/normal-flow.html b/layout/normal-flow.html index 483ff425..d5f44410 100644 --- a/layout/normal-flow.html +++ b/layout/normal-flow.html @@ -55,14 +55,14 @@ display: block; margin: 5px; } - @@ -70,8 +70,12 @@
-

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

-

Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

+

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in + the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their + names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful + minds and a deep interest in all scientific knowledge and new discovery.

+

Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths + of their fires without drawing any special inspiration from the fact.”

@@ -118,4 +122,4 @@ window.addEventListener('load', fillCode); - + \ No newline at end of file