Mercurial > thesheep.bitbucket.org

changeset 1:de9767f69522 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add purecss mockup of moinmoin2
author Radomir Dopieralski <sheep-devel@sheep.art.pl>
date Sat, 06 Jul 2013 18:04:15 +0200
parents 8a9bd4b30a78
children
files moin/purecss/index.html moin/purecss/style.css
diffstat 2 files changed, 204 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/moin/purecss/index.html	Sat Jul 06 18:04:15 2013 +0200
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html><head>
+<meta http-equiv="content-type" content="text/html;charset=utf-8">
+<title>PureCSS MoinMoin Mockup</title>
+<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
+<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+</head><body>
+
+<div class="content pure-g-r">
+    <div class="header pure-u-1">
+        <div class="moin-top-menu">
+            <div class="pure-menu pure-menu-open pure-menu-horizontal">
+                <a class="pure-menu-heading" href="#" >Your Site</a>
+                <ul>
+                    <li class="pure-menu-selected"><a href="#"><i class="icon-user"></i> Username</a></li>
+                    <li><a href="#"><i class="icon-cog"></i> Preferences</a></li>
+                    <li><a href="#"><i class="icon-off"></i> Logout</a></li>
+                </ul>
+                <form class="pure-form">
+                    <input type="text" placeholder="Search">
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="pure-g-r">
+        <div class="pure-u-1-6">
+            <div class="moin-left-menu">
+                <div class="pure-menu pure-menu-open">
+                    <ul>
+                        <li class="pure-menu-heading">Site navigation</li>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">RecentChanges</a></li>
+                        <li><a href="#">Help</a></li>
+                        <li><a href="#">About</a></li>
+                        <li class="pure-menu-heading">Quick links</li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">About</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="pure-u-2-3">
+            <div class="moin-main">
+                <div class="pure-menu pure-menu-open pure-menu-horizontal moin-tabs">
+                    <ul>
+                        <li class="pure-menu-selected"><a href="#"><i class="icon-eye-open"></i> Show</a></li>
+                        <li><a href="#"><i class="icon-edit"></i> Modify</a></li>
+                        <li><a href="#"><i class="icon-comments"></i> Comments</a></li>
+                    </ul>
+                </div>
+                <div class="moin-content">
+                    <h1>Hello world!</h1>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
+                erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
+                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
+                consequat. Duis autem vel eum iriure dolor in hendrerit in
+                vulputate velit esse molestie consequat, vel illum dolore eu
+                feugiat nulla facilisis at vero eros et accumsan et iusto odio
+                dignissim qui blandit praesent luptatum zzril delenit augue duis
+                dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
+                eleifend option congue nihil imperdiet doming id quod mazim
+                placerat facer possim assum.</p>
+                <p>Typi non habent claritatem insitam;
+                est usus legentis in iis qui facit eorum claritatem.
+                Investigationes demonstraverunt lectores legere me lius quod ii
+                legunt saepius. Claritas est etiam processus dynamicus, qui
+                sequitur mutationem consuetudium lectorum. Mirum est notare quam
+                littera gothica, quam nunc putamus parum claram, anteposuerit
+                litterarum formas humanitatis per seacula quarta decima et quinta
+                decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant
+                sollemnes in futurum.</p>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
+                erat volutpat. Ut wisi enim ad minim#e veniam, quis nostrud exerci
+                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
+                consequat. Duis autem vel eum iriure dolor in hendrerit in
+                vulputate velit esse molestie consequat, vel illum dolore eu
+                feugiat nulla facilisis at vero eros et accumsan et iusto odio
+                dignissim qui blandit praesent luptatum zzril delenit augue duis
+                dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
+                eleifend option congue nihil imperdiet doming id quod mazim
+                placerat facer possim assum.</p>
+                <p>Typi non habent claritatem insitam;
+                est usus legentis in iis qui facit eorum claritatem.
+                Investigationes demonstraverunt lectores legere me lius quod ii
+                legunt saepius. Claritas est etiam processus dynamicus, qui
+                sequitur mutationem consuetudium lectorum. Mirum est notare quam
+                littera gothica, quam nunc putamus parum claram, anteposuerit
+                litterarum formas humanitatis per seacula quarta decima et quinta
+                decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant
+                sollemnes in futurum.</p>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
+                erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
+                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
+                consequat. Duis autem vel eum iriure dolor in hendrerit in
+                vulputate velit esse molestie consequat, vel illum dolore eu
+                feugiat nulla facilisis at vero eros et accumsan et iusto odio
+                dignissim qui blandit praesent luptatum zzril delenit augue duis
+                dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
+                eleifend option congue nihil imperdiet doming id quod mazim
+                placerat facer possim assum.</p>
+                <p>Typi non habent claritatem insitam;
+                est usus legentis in iis qui facit eorum claritatem.
+                Investigationes demonstraverunt lectores legere me lius quod ii
+                legunt saepius. Claritas est etiam processus dynamicus, qui
+                sequitur mutationem consuetudium lectorum. Mirum est notare quam
+                littera gothica, quam nunc putamus parum claram, anteposuerit
+                litterarum formas humanitatis per seacula quarta decima et quinta
+                decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant
+                sollemnes in futurum.</p>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
+                erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
+                tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
+                consequat. Duis autem vel eum iriure dolor in hendrerit in
+                vulputate velit esse molestie consequat, vel illum dolore eu
+                feugiat nulla facilisis at vero eros et accumsan et iusto odio
+                dignissim qui blandit praesent luptatum zzril delenit augue duis
+                dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
+                eleifend option congue nihil imperdiet doming id quod mazim
+                placerat facer possim assum.</p>
+                <p>Typi non habent claritatem insitam;
+                est usus legentis in iis qui facit eorum claritatem.
+                Investigationes demonstraverunt lectores legere me lius quod ii
+                legunt saepius. Claritas est etiam processus dynamicus, qui
+                sequitur mutationem consuetudium lectorum. Mirum est notare quam
+                littera gothica, quam nunc putamus parum claram, anteposuerit
+                litterarum formas humanitatis per seacula quarta decima et quinta
+                decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant
+                sollemnes in futurum.</p>
+                </div>
+            </div>
+        </div>
+        <div class="pure-u-1-6">
+            <div class="moin-right-menu">
+                <div class="pure-menu pure-menu-open">
+                    <ul>
+                        <li class="pure-menu-heading">User actions</li>
+                        <li><a href="#"><i class="icon-star"></i> Add link</a></li>
+                        <li><a href="#"><i class="icon-envelope"></i> Subscribe</a></li>
+                        <li class="pure-menu-heading">Item actions</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</body></html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/moin/purecss/style.css	Sat Jul 06 18:04:15 2013 +0200
@@ -0,0 +1,47 @@
+body {
+    margin: 8px;
+}
+
+.moin-top-menu {
+    border: 1px solid #aaa;
+    text-align: right;
+}
+.moin-top-menu form {
+    display: inline-block;
+    margin-right: 4px;
+}
+.moin-top-menu a.pure-menu-heading {
+    float: left;
+    display: block;
+    padding: 8px 24px;
+}
+
+.moin-left-menu,
+.moin-right-menu {
+    margin: 8px 0;
+}
+
+.moin-main {
+    margin: 8px;
+}
+
+.moin-content {
+    padding: 8px 24px;
+}
+
+.moin-tabs li {
+    border: 1px solid #aaa;
+    border-bottom: 1px solid transparent;
+    position: relative;
+    bottom: -1px;
+}
+
+.moin-tabs li.pure-menu-selected {
+    border-bottom: 1px solid #fff;
+}
+
+.moin-tabs ul {
+    width: 100%;
+    border-bottom: 1px solid #aaa;
+}
+