flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-11-01 04:20:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

started working on real magazine structure...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-20 16:59:14 +04:00
parent a041691780
commit 3e391e615b
3 changed files with 154 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
magazine-custom.css Executable file
View File

@ -0,0 +1,16 @@
/* magazine customization */
.magazine {
background: gray;
}
.magazine > .cover {
background: white;
}
.article > .cover {
background: white;
}
.page {
background: silver;
}

48
magazine.css Executable file
View File

@ -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;
}

90
magazine.html Executable file
View File

@ -0,0 +1,90 @@
<html>
<head>
<title>Magazine</title>
<link rel="stylesheet" href="magazine.css">
</head>
<body>
<div class="magazine">
<div class="cover">
Magazine Cover
</div>
<div class="article">
<div class="cover">
Article Cover<br>
some more text...
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
</div>
<div class="article">
<div class="cover">
Article Cover
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
</div>
<div class="article">
<div class="cover">
Article Cover
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
</div>
<div class="article">
<div class="cover">
Article Cover
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
<div class="page">
Page
</div>
</div>
</div>
</body>
</html>