oreolek/smalkil
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvements on view

Browse source
This commit is contained in:
Alexander Yakovlev 2012-12-14 14:36:44 +07:00
parent fb0855b45e
commit 4c3b32912a
4 changed files with 95 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layout.less
View file

@ -32,16 +32,16 @@ h2 {
p {
text-indent: 2 * @basesize;
text-align: justify;
}
h1, h2, h3, h4, h5, h6 { }
p { }
ol, ul { }
a { }
blockquote { }
pre, code { }
small { }
acronym {
acronym, abbr {
border-bottom: 1px dashed @foreground4;
color: @foreground4;
}

315
sample/index.html
View file

@ -31,6 +31,8 @@
</ul>
</div>
<h5><a name="text">TEXT</a></h5>
<div class="container_page">
<div class="column">
<h4>How it's done</h4>
@ -45,6 +47,48 @@
styles.</p>
<p>This is a bit awkward, isn't it? I know. (sigh)</p>
<h5>Smaller heading</h5>
<p>This heading was small, wasn't it? Well, that's because there's not much text here.</p>
<h6>Small heading</h6>
<p>This was the smallest heading possible.</p>
<p>And now for a poem. Ahem.</p>
<div class="poem">
<div class="verse">
The merry-go-round goes 'round and 'round,<br>
The children laughed and laughed and laughed,<br>
So many were going 'round and 'round,<br>
That the merry-go-round collapsed.
</div>
</div>
<p>Please send your correspondence to:</p>
<address>
Donald Duck<br>
Box 555<br>
Disneyland
</address>
<pre>
&lt;pre&gt;
pre space1
pre space1
pre space2
pre space2
pre tab
pre tab
</pre><code>&lt;code&gt; Not indented indent1 indent1 indent2
indent3</code> <tt>&lt;tt&gt; This tt text should be monospaced and
wrap as if one line of text even though the code has newlines,
spaces, and tabs. It should be the same size as &lt;p&gt;
text.</tt>
</div>
<div class="column2">
@ -119,237 +163,65 @@
</div>
</div>
<div class="sidebar">
<h3>A <span class="alt">Simple</span> Sidebar</h3>
</div>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Cras ornare mattis nunc.
Mauris venenatis, pede sed aliquet vehicula, lectus tellus
pulvinar neque, non cursus sem nisi vel augue.</p>
<p>Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices
mi a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis
elit tincidunt gravida. Mauris a lectus. Aliquam erat
volutpat. Phasellus ultrices mi a sapien. Nunc rutrum egestas
lorem. Duis ac sem sagittis elit tincidunt gravida.</p>
<p class="quiet">Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Cras ornare
mattis nunc. Mauris venenatis, pede sed aliquet vehicula,
lectus tellus pulvinar neque, non cursus sem nisi vel
augue.</p>
<h6>Incremental leading</h6>
<p class="incr">Vestibulum ante ipsum primis in faucibus orci
luctus vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Cras ornare mattis nunc.
Mauris venenatis, pede sed aliquet vehicula, lectus tellus
pulvinar neque, non cursus sem nisi vel augue. sed aliquet
vehicula, lectus tellus.</p>
<p class="incr">Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Cras ornare mattis
nunc. Mauris venenatis, pede sed aliquet vehicula, lectus
tellus pulvinar neque, non cursus sem nisi vel augue. sed
aliquet vehicula, lectus tellus pulvinar neque, non cursus
sem nisi vel augue. ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Cras ornare mattis nunc.
Mauris venenatis, pede sed aliquet vehicula, lectus tellus
pulvinar neque, non cursus sem nisi vel augue. sed aliquet
vehicula, lectus tellus pulvinar neque, non cursus sem nisi
vel augue.</p>
</div>
</div>
<h3>You may pick and choose amongst these and many more features,
<h3 class="center">You may pick and choose amongst these and many more features,
so be bold.</h3>
<div class="story">
<div class="poem">
<div class="verse">
The merry-go-round goes 'round and 'round,<br>
The children laughed and laughed and laughed,<br>
So many were going 'round and 'round,<br>
That the merry-go-round collapsed.
</div>
</div>
</div>
<h5><a name="lists">LISTS</a></h5>
<p>Don't forget to buy:</p>
<ul>
<li><del>GPS</del></li>
<h5>LISTS</h5>
<li>Rifle</li>
<div class="span-8">
<ul>
<li>Unordered list test</li>
<ul>
<li>Rifle scope</li>
<li>Ammo</li>
<li>Another list element. Lorem ipsum dolor sit amet,
consectetur adipisicing elit.</li>
</ul>
<li>Yet another element in the list</li>
<li>Santa costume</li>
</ul>
<li>Some long text. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</li>
</ul>
<p>Still, the order was in place, and there was nothing I could do to change it:</p>
<ol>
<li>Shirt</li>
<ol>
<li>Ordered list test</li>
<li>Trousers</li>
<li>Another list element</li>
<li>Socks</li>
<li>Yet another element in the list</li>
</ol>
</div>
<li>Boots</li>
<div class="span-8">
<ol>
<li>Ordered list</li>
<ol>
<li>Left boot</li>
<li>Right boot</li>
</ol>
</ol>
<li>Here's a nested unordered list
<dl>
<dt>definition, n.</dt>
<ul>
<li>Nested Unordered list</li>
<dd>A definition is a statement that explains the meaning.</dd>
<li>Nested ordered list
<dt>gmina, n.</dt>
<ol>
<li>The first</li>
<dd>The gmina is the principal unit of administrative division of Poland at its lowest uniform level.
It is often translated as "commune" or "municipality." <em>(Wikipedia)</em></dd>
<li>And the second</li>
</ol>
</li>
</ul>
</li>
<dt>shipwreck, n.</dt>
<dd>sunken ship</dd>
<dd>a fictional character in the G.I. Joe universe</dd>
<li>Ordered List item</li>
</dl>
<li>Nested Ordered list
<h5><a name="tables">TABLES</a></h5>
<ol>
<li>Some point</li>
<li>Nested Unordered list
<ul>
<li>The first</li>
<li>And the second</li>
</ul>
</li>
</ol>
</li>
</ol>
</div>
<div class="span-8 last">
<dl>
<dt>definition list dt</dt>
<dd>definition list dd</dd>
<dt>definition list dt</dt>
<dd>definition list dd</dd>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit
adipisicing elit adipisicing elit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit
adipisicing elit adipisicing elit</dd>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit
adipisicing elit adipisicing elit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit
adipisicing elit adipisicing elit</dd>
</dl>
</div>
<hr>
<h5>HEADINGS</h5>
<div class="span-8">
<h1>H1: Lorem ipsum dolor sit amet</h1>
<h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2>
<h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing
elit</h3>
<h4>H4: Lorem ipsum dolor sit amet, consectetur adipisicing
elit adipis</h4>
<h5>H5: Lorem ipsum dolor sit amet, consectetur adipisicing
elit adipisicing elit adipisicing elit</h5>
<h6>H6: Lorem ipsum dolor sit amet, consectetur adipisicing
elit adipisicing elit adipisicing elit</h6>
</div>
<div class="span-8">
<h1>Heading 1</h1>
<hr>
<h2>Heading 2</h2>
<hr>
<h3>Heading 3</h3>
<hr>
<h4>Heading 4</h4>
<hr>
<h5>Heading 5</h5>
<hr>
<h6>Heading 6</h6>
</div>
<div class="span-8 last">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<hr>
<h5>MISC ELEMENTS</h5>
<div class="span-8">
<p><strong>&lt;strong&gt;</strong><br>
<del>&lt;del&gt; deleted</del><br>
<dfn>&lt;dfn&gt; dfn</dfn><br>
<em>&lt;em&gt; emphasis</em></p>
<p><a>&lt;a&gt; anchor</a><br>
<a href="http://www.google.com">&lt;a&gt; a + href</a></p>
<p><abbr title=
"extended abbr text should show when mouse over">&lt;abbr&gt;
abbr - extended text when mouseover.</abbr><br>
<acronym title=
"extended acronym text should show when mouse over">&lt;acronym&gt;
acronym - extended text when mouseover.</acronym></p>
<address>
&lt;address&gt;<br>
Donald Duck<br>
Box 555<br>
Disneyland
</address>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore dolore.</p>
</div>
<div class="span-8">
<table summary="This is the summary text for this table."
border="0" cellspacing="0" cellpadding="0">
<caption>
@ -423,27 +295,10 @@
</tr>
</tbody>
</table>
</div>
<div class="span-8 last">
<pre>
&lt;pre&gt;
pre space1
pre space1
pre space2
pre space2
pre tab
pre tab
</pre><code>&lt;code&gt; Not indented indent1 indent1 indent2
indent3</code> <tt>&lt;tt&gt; This tt text should be monospaced and
wrap as if one line of text even though the code has newlines,
spaces, and tabs. It should be the same size as &lt;p&gt;
text.</tt>
</div>
<div class="span-12">
<a name="forms"></a>
<h5><a name="forms">FORMS</a></h5>
<form id="dummy" action="" method="post">
<fieldset>
<legend>Simple sample form</legend>

4
sample/sample.less
View file

@ -18,3 +18,7 @@
.sidebar {
float: left;
}
h3.center {
text-align: center;
}

4
smalkil.less
View file

@ -30,4 +30,8 @@ img {
margin-left: @margin;
margin-right: 0;
}
&.center {
display: block;
.centered();
}
}