flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 03:50:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

added a better 'anatomy' diagram...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-30 22:44:18 +04:00
parent 75fee9135a
commit e7a18adb13
1 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -333,19 +333,63 @@ $(document).ready(function(){
<div class="page">
<div class="content">
<h1 name="anatomy">PortableMag Anatomy</h1>
<p>
The magazine consists of:
<ul>
<li>Magazine cover
<li>Articles:
<ul>
<li>Article cover
<li>Pages
</ul>
</ul>
Each of these elements can be styled separately...
</p>
<svg name="anatomy" width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<marker id="se_marker_start_svg_36" markerUnits="strokeWidth" orient="auto" viewBox="0 0 100 100" markerWidth="5" markerHeight="5" refX="50" refY="50">
<path id="svg_3" d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" stroke="#000000" stroke-width="10"/>
</marker>
<marker id="se_marker_start_svg_37" markerUnits="strokeWidth" orient="auto" viewBox="0 0 100 100" markerWidth="5" markerHeight="5" refX="50" refY="50">
<path id="svg_8" d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" stroke="#000000" stroke-width="10"/>
</marker>
</defs>
<title>PortableMag Anatomy</title>
<g>
<title>Layer 1</title>
<text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="32" id="svg_1" y="56.33334" x="199" stroke-width="0" stroke="#000000" fill="#000000">PortableMag Anatomy</text>
<path fill="none" stroke="#000000" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" id="svg_34"/>
<g id="svg_30">
<g id="svg_2">
<path id="svg_12" transform="rotate(180 415.667 178.667)" d="m78.166656,117.166718l675.000031,0l0,123.000031l-675.000031,0" fill-opacity="0" fill="#000000" stroke="#000000"/>
<rect id="svg_13" stroke="#000000" height="100" width="130" y="132" x="87" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#ffffff"/>
<rect id="svg_14" height="100" width="415.00001" y="132" x="223" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000" stroke="#000000"/>
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_24" y="187.5" x="152" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000" stroke-opacity="0">Magazine cover</text>
<rect height="86" width="130" y="138.66667" x="229.66666" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#ffffff" id="svg_7" stroke="#000000"/>
<text fill="#000000" stroke="#000000" stroke-width="0" x="294.83334" y="187" id="svg_4" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">Article Cover</text>
<rect height="86" width="130" y="138.66668" x="365.66667" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#e5e5e5" stroke="#000000" id="svg_15"/>
<text fill="#000000" stroke="#000000" stroke-width="0" x="430.83337" y="187.00003" id="svg_5" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">Page</text>
<rect height="86" width="130" y="138.66666" x="501.66665" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#e5e5e5" stroke="#000000" id="svg_16"/>
<text fill="#000000" stroke="#000000" stroke-width="0" x="567.00001" y="186.66667" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" id="svg_6">Page</text>
<path transform="rotate(180 698.667 181.667)" d="m646.167236,132.167267l105,0l0,99.000031l-105,0" fill="#bfbfbf" id="svg_17" stroke="#000000"/>
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="709.66669" y="187.00063" id="svg_25" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">Next Article</text>
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" x="98.66669" y="113.33334" id="svg_26" font-size="10" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">Magazine</text>
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" x="236.16669" y="129.33334" id="svg_27" font-size="9" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">Article</text>
</g>
<g id="svg_29">
<g id="svg_11">
<rect id="svg_20" height="180" width="322.99999" y="295" x="273" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#cccccc" stroke="#000000"/>
<rect id="svg_21" height="169.23077" width="220" y="300.38461" x="324.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" fill="#ffffff" stroke="#000000"/>
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" x="292.66669" y="289.33334" id="svg_10" font-size="18" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">Page</text>
<g id="svg_19">
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="434.16669" y="381.83334" id="svg_9" font-size="18" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0">Page Content</text>
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" x="433.66669" y="400.83334" id="svg_18" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">(safe area)</text>
</g>
</g>
<g id="svg_23">
<text fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="446.66669" y="532.33334" id="svg_22" font-size="10" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">This area might get clipped</text>
<path fill="none" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m301.666687,464.333344c1,39 84,28 112,55.000031" id="svg_36" stroke="#000000" marker-start="url(#se_marker_start_svg_36)"/>
<path fill="none" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m577.666687,461.666687c1,39 -71,31 -98,56" stroke="#000000" marker-start="url(#se_marker_start_svg_37)" id="svg_37"/>
</g>
<g id="svg_28">
<line fill="none" stroke="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="362.66669" y1="227.33334" x2="305.66669" y2="275.33334" id="svg_32"/>
<line fill="none" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="587.66669" y1="289.33334" x2="497.66669" y2="228.33334" id="svg_33" stroke="#000000"/>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="page">