Clean up BaseAudioContext now that legacy/prefixed WebAudio is gone
[WebKit-https.git] / Websites / webkit.org / demos / regions / pizza-regions-manifesto-regionstyling.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>My Pizza is Amazing</title>
5   <style>
6     body {
7       font-family: "Lucida Grande", "Lucida Sans Unicode", Thonburi, sans-serif;
8     }
9
10     /* Content flow */
11     .contentFlow {
12       -webkit-flow-into: content-flow;
13     }
14
15     h1 {
16         text-align: center;
17         font-size: 42px;
18         margin: 0.4em auto 0.4em auto;
19     }
20
21     p {
22       font-size: 17px;
23       line-height: 26px;
24     }
25
26     /* Content flow regions */
27     .regionContentFlow {
28       -webkit-flow-from: content-flow;
29     }
30
31     .regionBox {
32       margin: 8px;
33       width: 700px;
34       height: 90px;
35     }
36
37     #region-4 {
38       float: left;
39       width: 340px;
40     }
41
42     #region-5 {
43       float: left;
44       width: 340px;
45     }
46
47     #region-6 {
48       position:absolute;
49       top: 0px;
50       left:724px;
51       width: 360px;
52       height: auto;
53     }
54
55     /* Image flow */
56     .imageFlow {
57       -webkit-flow-into: image-flow;
58     }
59
60     img {
61         display: block;
62         width: 512px;
63         height: 342px;
64         margin: auto;
65     }
66
67     /* Image flow region */
68     .regionImageFlow {
69       -webkit-flow-from: image-flow;
70     }
71
72     #region-2 {
73       height:375px;
74     }
75
76     /* Style the content in regions */
77     @-webkit-region #region-3 {
78       p { color: green; }
79     }
80
81     @-webkit-region #region-4, #region-5 {
82       p { color: coral; }
83     }
84
85     @-webkit-region #region-6 {
86       p { color: crimson; }
87     }
88   </style>
89 </head>
90
91 <body>
92   <!-- Content that will be flowed into regions.-->
93   <div class="contentFlow">
94     <h1>Pizza is Amazing</h1>
95     <!-- The image will be collected in a different named flow. -->
96     <img class="imageFlow" src="yellow-pizza.jpg" />
97     <p>Is there any food better than pizza? I don't think so. Its simplest form is really my favorite -
98       a perfect thin crust, a barely-altered tomato sauce, fresh mozzarella, and a light sprinkling of basil.
99       But I like all of the less pure interpretations of pizza too. From a mushroom-and-sausage-filled
100       Chicago-style deep dish to a California sourdough crust with fresh corn, feta cheese, and cilantro,
101       to an almost sweet Hawaiian pie <span class="">(don't tell Enrica about that one),</span> I just love it all. Is there anyone who doesn't love pizza? I pity the fool who does not love pizza. So until then, I will continue to believe that pizza the most universally-loved food. (I know what you're thinking. You're thinking, "What about chocolate?" Well, I have met people who don't like chocolate. I know, they cray, but they do exist.)</p>
102     <p>So there is a reason that you can't tell Enrica about my Hawiian pizza treason. It's because
103     in addition to being a kick-booty WebKit hacker, Enrica is also a true pizza virtuoso. She's a whiz.
104     A hotshot. The honest to goodness pizza whisperer. Best. Pizza. Ever. See that amazing photo over there?
105     The pizza on the yellow dish?? Enrica made that. She has a brick oven in her backyard where she performs
106     her wizardry, and I need to ensure that I have a ticket back to that magical land of bready cheesy nirvana.
107     Plus it's actually physically impossible to visit Enrica without being served at least 3 desserts.
108     So hush about the Hawaiian pies, okay?! And I'll try to bring you some leftovers.</p>
109   </div>
110   
111   <!-- Layout of the page using regions displaying content from different named flows -->
112   <div id="regionContainer">
113     <div id="region-1" class="regionContentFlow regionBox"></div>
114     <!-- The following region element displays content from the image flow -->
115     <div id="region-2" class="regionImageFlow regionBox"></div>
116     <div id="region-3" class="regionContentFlow regionBox"></div>
117     <div id="region-4" class="regionContentFlow regionBox"></div>
118     <div id="region-5" class="regionContentFlow regionBox"></div>
119     <div id="region-6" class="regionContentFlow regionBox"></div>
120   </div>
121   
122 </body>
123 </html>