diff --git a/magazine-custom.css b/magazine-custom.css new file mode 100755 index 0000000..3d284a9 --- /dev/null +++ b/magazine-custom.css @@ -0,0 +1,16 @@ +/* magazine customization */ +.magazine { + background: gray; +} + +.magazine > .cover { + background: white; +} + +.article > .cover { + background: white; +} + +.page { + background: silver; +} diff --git a/magazine.css b/magazine.css new file mode 100755 index 0000000..37bb28f --- /dev/null +++ b/magazine.css @@ -0,0 +1,48 @@ + +/* all elements that will behave like a page */ +.cover, .page { + width: 200px; + height: 150px; + display: inline-block; + vertical-align: bottom; + + border: solid blue 1px; + + font-size: 12px +} + + +/* general layout */ + +.magazine { + /* this makes the magazine behave like a ribbon */ + width: auto; + overflow: visible; + white-space: nowrap; + font-size: 0px; + + /* default styles */ + background: gray; +} + +.magazine > .cover { + background: white; +} + +.article { + width: auto; + overflow: visible; + white-space: nowrap; + font-size: 0px; + + display: inline-block; +} + +.article > .cover { + background: white; +} + +.page { + background: silver; +} + diff --git a/magazine.html b/magazine.html new file mode 100755 index 0000000..6f12f9c --- /dev/null +++ b/magazine.html @@ -0,0 +1,90 @@ + + + Magazine + + + + +
+
+ Magazine Cover +
+ +
+
+ Article Cover
+ some more text... +
+ +
+ Page +
+
+ Page +
+
+ Page +
+
+ Page +
+
+
+
+ Article Cover +
+ +
+ Page +
+
+ Page +
+
+ Page +
+
+ Page +
+
+
+
+ Article Cover +
+ +
+ Page +
+
+ Page +
+
+ Page +
+
+ Page +
+
+
+
+ Article Cover +
+ +
+ Page +
+
+ Page +
+
+ Page +
+
+ Page +
+
+
+ + + +