Permalink
Browse files

Merge pull request #5 from nikonor/master

"loko" skin
  • Loading branch information...
2 parents c999607 + 6523af1 commit 06e2cbc6dd65d5aad571f786e98cfa1d0ab49aa7 @rafikov committed Feb 7, 2012
Showing with 653 additions and 0 deletions.
  1. +416 −0 loko/css/style.css
  2. BIN loko/favicon.ico
  3. +237 −0 loko/index.html
View
416 loko/css/style.css
@@ -0,0 +1,416 @@
+/* "loko" template. Leonid "nikonor" Nikolaev. http://about.me/nikonor */
+/* CSS based on "simple" by Renat Rafikov. http://cssr.ru/simpliste/ */
+/* CSS reset. Based on HTML5 boilerplate reset http://html5boilerplate.com/ */
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
+audio[controls], canvas, video { display:inline-block; *display:inline; *zoom:1; }
+html { font-size:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
+body { margin:0; font-size:13px; line-height:1.231;}
+body, button, input, select, textarea { font-family:sans-serif; color:#222; }
+a { color:#00e; }
+a:visited { color:#551a8b; }
+a:focus { outline:thin dotted; }
+a:hover, a:active { outline:0; }
+abbr[title] { border-bottom:1px dotted; }
+b, strong { font-weight:bold; }
+blockquote { margin:1em 40px; }
+dfn { font-style:italic; }
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+ins { background:#ff9; color:#000; text-decoration:none; }
+mark { background:#ff0; color:#000; font-style:italic; font-weight:bold; }
+pre, code, kbd, samp { font-family:monospace, monospace; _font-family:'courier new', monospace; font-size:1em; }
+pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; }
+q { quotes:none; }
+q:before, q:after { content:""; content:none; }
+small { font-size:85%; }
+sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
+sup { top:-0.5em; }
+sub { bottom:-0.25em; }
+ul, ol { margin:1em 0; padding:0 0 0 2em; }
+dd { margin:0 0 0 40px; }
+nav ul, nav ol { list-style:none; margin:0; padding:0; }
+img { border:0; -ms-interpolation-mode:bicubic; }
+svg:not(:root) { overflow:hidden;}
+figure { margin:0; }
+form { margin:0; }
+fieldset { border:0; margin:0; padding:0; }
+legend { border:0; *margin-left:-7px; padding:0; }
+label { cursor:pointer; }
+button, input, select, textarea { font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle; }
+button, input { line-height:normal; *overflow:visible; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; -webkit-appearance:button; }
+input[type="checkbox"], input[type="radio"] { box-sizing:border-box; }
+input[type="search"] { -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }
+button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
+textarea { overflow:auto; vertical-align:top; }
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid { background-color:#f0dddd; }
+table { border-collapse:collapse; border-spacing:0; }
+.hidden { display:none; visibility:hidden; }
+.clearfix:before, .clearfix:after { content:""; display:table; }
+.clearfix:after { clear:both; }
+.clearfix { zoom:1; }
+/* End CSS reset */
+
+
+/* Columns
+-------
+.col_33 | .col_33 | .col_33
+.clearfix
+-------
+.col_66 | .col_33
+.clearfix
+-------
+.col_50 | .col_50
+.clearfix
+-------
+.col_100
+-------
+*/
+.col_33 {
+ width:31%;
+ margin:0 2% 0 0;
+ float:left;
+}
+
+.col_50 {
+ width:48%;
+ margin:0 2% 0 0;
+ float:left;
+}
+
+.col_66 {
+ width:64%;
+ margin:0 2% 0 0;
+ float:left;
+}
+
+.col_100 {
+ width:98%;
+ margin:0 2% 0 0;
+}
+/* End columns */
+
+
+/* Helper classes */
+.center {text-align:center;}
+.left {text-align:left;}
+.right {text-align:right;}
+
+.img_floatleft {float:left; margin:0 10px 5px 0;}
+.img_floatright {float:right; margin:0 0 5px 10px;}
+
+.img {max-width:100%;}
+/* End helper classes */
+
+
+/* [Skin "Simple"] */
+.container {
+ max-width:1300px;
+ margin:0 auto;
+}
+
+.header {
+ margin:1px 0 3em 0;
+ padding:2em 2% 0 2%;
+}
+
+.logo {
+ float:left;
+ display:inline-block;
+ padding:0 0 1em;
+ border-bottom:1px solid #000;
+ font-size:18px;
+ color:yellow;
+}
+
+.menu_main {
+ width:50%;
+ float:right;
+ text-align:right;
+ margin:0.3em 0 0 0;
+}
+
+.menu_main li {
+ display:inline-block;
+ margin:0 0 0 7px;
+}
+
+.menu_main li.active,
+.menu_main li.active a {
+ color:yellow;
+ text-decoration:none;
+ cursor:default;
+}
+
+.info {
+ padding:0 0 1em 2%;
+}
+
+.footer {
+ border-top:1px solid #666;
+ padding:2em 2% 3em 2%;
+ color:white;
+}
+
+.copyright {
+ width:49%;
+ float:left;
+ font-family:georgia, serif;
+ font-style:italic;
+}
+
+.menu_bottom {
+ width:50%;
+ float:right;
+ text-align:right;
+ margin:0;
+ padding:0;
+}
+.menu_bottom li {
+ display:inline-block;
+ margin:0 0 0 7px;
+}
+.menu_bottom li.active,
+.menu_bottom li.active a {
+ color:yellow;
+ text-decoration:none;
+ cursor:default;
+}
+
+/* Skin appearance */
+body {
+ font-family:arial, sans-serif;
+ color:white;
+ background-color: green;
+}
+
+a { color:white; }
+a:hover { color:white; }
+a:visited { color:white; }
+
+ul li, ol li {
+ padding:0 0 0.4em 0;
+}
+
+.hero h1 {
+ font-size:26px;
+ font-family:georgia, serif;
+ font-style:italic;
+ color:yellow;
+}
+
+h1, h2 {
+ font-weight:normal;
+ color:yellow;
+}
+
+h3, h4, h5, h6 {
+ font-weight:bold;
+ color:yellow;
+}
+
+h1 {
+ font-size:22px;
+}
+
+.form label {
+ display:inline-block;
+ padding:0 0 4px 0;
+}
+
+a.button,
+.button {
+ border:1px solid #d00303;
+ text-align:center;
+ text-decoration:none;
+ -webkit-border-radius:4px;
+ -moz-border-radius:4px;
+ border-radius:4px;
+ -webkit-box-shadow:#000 0px 0px 1px;
+ -moz-box-shadow:#000 0px 0px 1px;
+ box-shadow:#000 0px 0px 1px;
+ background:#ea0000;
+ background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ea0000), to(#d00303));
+ background:-webkit-linear-gradient(#ea0000, #d00303);
+ background:-moz-linear-gradient(#ea0000, #d00303);
+ background:-ms-linear-gradient(#ea0000, #d00303);
+ background:-o-linear-gradient(#ea0000, #d00303);
+ background:linear-gradient(#ea0000, #d00303);
+ color:#fff;
+ padding:12px 20px;
+ font-family:verdana, sans-serif;
+ text-shadow:1px 1px 1px #d03302;
+ display:inline-block;
+}
+a.button:hover,
+.button:hover {
+ color:#fff;
+ background:-webkit-gradient(linear, 0 0, 0 bottom, from(#d00303), to(#ea0000));
+ background:-webkit-linear-gradient(#d00303, #ea0000);
+ background:-moz-linear-gradient(#d00303, #ea0000);
+ background:-ms-linear-gradient(#d00303, #ea0000);
+ background:-o-linear-gradient(#d00303, #ea0000);
+ background:linear-gradient(#d00303, #ea0000);
+}
+a.button:active,
+.button:active {
+ color:#8c1515;
+ text-shadow:1px 1px 1px #ffaeae;
+ -webkit-box-shadow:#a10000 0px -3px 3px inset;
+ -moz-box-shadow:#a10000 0px -3px 3px inset;
+ box-shadow:#a10000 0px -3px 3px inset;
+}
+
+.table {
+ width:100%;
+}
+.table th {
+ padding:5px 7px;
+ font-weight:normal;
+ text-align:left;
+ font-size:1.2em;
+ color:green;
+ background:#ffffff;
+ background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#F7F7F7));
+ background:-webkit-linear-gradient(#ffffff, #F7F7F7);
+ background:-moz-linear-gradient(#ffffff, #F7F7F7);
+ background:-ms-linear-gradient(#ffffff, #F7F7F7);
+ background:-o-linear-gradient(#ffffff, #F7F7F7);
+ background:linear-gradient(#ffffff, #F7F7F7);
+}
+.table td {
+ padding:5px 7px;
+}
+.table tr {
+ border-bottom:1px solid #ddd;
+}
+.table tr:last-child {
+ border:0;
+}
+
+.warning {
+ border:1px solid #ec252e;
+ color:#fff;
+ padding:8px 14px;
+ background:#EA0000;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+}
+.success {
+ border:1px solid #399f16;
+ color:yellow;
+ background:#58A22C;
+ padding:8px 14px;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+}
+.message {
+ border:1px solid #f1edcf;
+ color: black;
+ background:#fbf8e3;
+ padding:8px 14px;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+}
+/* [End skin] */
+
+
+/* Temp */
+#skins .active a {text-decoration:none; font-weight:bold; color:#666; cursor:default}
+
+.skin_simple {color:#EA0000;}
+.skin_isimple {color:#ddd;}
+.skin_simploid {color:#86C300;}
+/* End temp */
+
+
+@media only screen and (max-width:480px) { /* Smartphone */
+ .header {
+ margin-bottom:0;
+ }
+
+ .logo{
+ display:block;
+ float:none;
+ text-align:center;
+ }
+
+ .menu_main {
+ width:100%;
+ text-align:center;
+ float:none;
+ padding:0;
+ margin:1em 0 0 0;
+ }
+
+ .menu_main a {
+ display:inline-block;
+ padding:7px;
+ }
+
+ .copyright {
+ width:100%;
+ float:none;
+ text-align:center;
+ color: white;
+ }
+
+ .footer {
+ padding-bottom:0;
+ color: white;
+ }
+
+ .menu_bottom {
+ width:100%;
+ float:none;
+ text-align:center;
+ margin:1em 0 0 0;
+ padding:0;
+ }
+ .menu_bottom a {
+ display:inline-block;
+ padding:6px;
+ }
+
+ .form textarea {
+ width:100%;
+ }
+ .form label {
+ padding:10px 0 8px 0;
+ }
+}
+
+
+@media only screen and (max-width:768px) { /* Tablet */
+ .col_33,
+ .col_66,
+ .col_50 {
+ width:98%;
+ float:none;
+ }
+
+ .form label {
+ padding:10px 0 8px 0;
+ }
+}
+
+
+@media print { /* Printer */
+ * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; }
+ a, a:visited { color:#444 !important; text-decoration:underline; }
+ a[href]:after { content:" (" attr(href) ")"; }
+ abbr[title]:after { content:" (" attr(title) ")"; }
+ pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
+ thead { display:table-header-group; }
+ tr, img { page-break-inside:avoid; }
+ img { max-width:100% !important; }
+ @page { margin:0.5cm; }
+ p, h2, h3 { orphans:3; widows:3; }
+ h2, h3{ page-break-after:avoid; }
+
+ .header, .footer, .form {display:none;}
+ .col_33, .col_66, .col_50 { width:98%; float:none; }
+}
View
BIN loko/favicon.ico
Binary file not shown.
View
237 loko/index.html
@@ -0,0 +1,237 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <link href="favicon.ico" rel="shortcut icon">
+ <link rel="stylesheet" href="css/style.css">
+ <title></title>
+ <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+
+<body>
+ <div class="container">
+
+ <header class="header clearfix">
+ <div class="logo">.Simpliste</div>
+
+ <nav class="menu_main">
+ <ul>
+ <li class="active"><a href="#">About</a></li>
+ <li><a href="#">Skins</a></li>
+ <li><a href="#">Samples</a></li>
+ </ul>
+ </nav>
+ </header>
+
+
+ <div class="info">
+ <article class="hero clearfix">
+ <div class="col_100">
+ <h1>Simplest solution for your simple tasks</h1>
+ <p>You don't always need to make difficult work of running management system with administrative panel to have a web site. “Simpliste” is a very simple and easy to use HTML template for web projects where you only need to create one or couple of pages with simple layout. If you are working on a lightweight information page with as less efforts for you to code and as less kilobytes for the user to download as possible, “Simpliste” is what you need.</p>
+ <p>No CMS required and it's free. Clean code will make your task even easier. HTML5 and CSS3 bring all their features for your future site. This template has skins which you can choose from. No images are used for styling.</p>
+ <p>Are you worried about convenience of your site users with mobile devices? “Simpliste” responds to the width of user's device and makes information more accessible.</p>
+ </div>
+ </article>
+
+
+ <article class="article clearfix">
+ <div class="col_33">
+ <h2>Clean code</h2>
+ <p>HTML5 and CSS3 made live of web developers easier than ever. Welcome to the world where less code and less files required. “Simpliste” has different skins and all of them are created with no images for styling at all.</p>
+ <p>Template contains CSS-reset based on the reset file from <a href="http://html5boilerplate.com/" target="_blank">HTML5 boilerplate</a> which makes appearens of “Simpliste” skins consistent in different browsers.</p>
+ <p>Print styles and styles for mobile devices are already included in the stylesheet.</p>
+ </div>
+
+ <div class="col_33">
+ <h2>Responsive markup</h2>
+ <p>You know that now it's time to think more about your users with mobile devices. This template will make your site respond to your client's browser with no effort on your part.</p>
+ <p>Multi-column layout becomes one column for viewers with tablets, navigation elements become bigger for users with smartphones. And your desktop browser users will see just a normal web site.</p>
+ <p>Try changing the width of your browser window and you'll see how “Simpliste” works.</p>
+ </div>
+
+ <div class="col_33">
+ <h2>Easy to use</h2>
+ <p>“Simpliste” is not a template for a CMS. You can use its code right away after downloading without reading any documentation. Place your content, make customisations and voilà the site is ready to upload to the server.</p>
+ <p>All content management can be done by using existing sample blocks and styles. Almost every template style is represented among <a href="#samples">samples</a> on this page. Off course you can create your own styles, which is easy as well.</p>
+ </div>
+
+ <div class="clearfix"></div>
+
+
+ <h1>“Simpliste” in use</h1>
+
+ <div class="col_50">
+ <h2>Sample content</h2>
+
+ <h3>Principles behind “Simpliste”</h3>
+ <ul>
+ <li>Really simple</li>
+ <li>Has ready to use set of simple designs</li>
+ <li>It's written using HTML5 and CSS3</li>
+ <li>It responds to mobile devices</li>
+ <li>No CMS</li>
+ <li>Free</li>
+ </ul>
+
+ <h3>How to use?</h3>
+ <ol>
+ <li>Choose one skin from the list above</li>
+ <li>Click download button</li>
+ <li>Unpack files</li>
+ <li>Make any customisation you need</li>
+ <li>Upload your new site to the server</li>
+ </ol>
+ </div>
+
+ <div class="col_50">
+ <form action="#" method="post" class="form">
+ <h2>Sample form</h2>
+
+ <p class="col_50">
+ <label for="name">Simple name:</label><br/>
+ <input type="text" name="name" id="name" value="" />
+ </p>
+ <p class="col_50">
+ <label for="email">Simple e-mail:</label><br/>
+ <input type="text" name="email" id="email" value="" />
+ </p>
+ <div class="clearfix"></div>
+
+ <h3>Your favorite number</h3>
+ <p>
+ <div class="col_33">
+ <label for="radio-choice-1"><input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" /> One</label><br/>
+ <label for="radio-choice-2"><input type="radio" name="radio-choice-1" id="radio-choice-2" tabindex="3" value="choice-2" /> Two</label><br/>
+ <label for="radio-choice-3"><input type="radio" name="radio-choice-1" id="radio-choice-3" tabindex="4" value="choice-3" /> Three</label>
+ </div>
+
+ <div class="col_33">
+ <label for="radio-choice-4"><input type="radio" name="radio-choice-1" id="radio-choice-4" tabindex="2" value="choice-1" /> Four</label><br/>
+ <label for="radio-choice-5"><input type="radio" name="radio-choice-1" id="radio-choice-5" tabindex="3" value="choice-2" /> Five</label><br/>
+ <label for="radio-choice-6"><input type="radio" name="radio-choice-1" id="radio-choice-6" tabindex="4" value="choice-3" /> Six</label>
+ </div>
+
+ <div class="col_33">
+ <label for="radio-choice-7"><input type="radio" name="radio-choice-1" id="radio-choice-7" tabindex="2" value="choice-1" /> Seven</label><br/>
+ <label for="radio-choice-8"><input type="radio" name="radio-choice-1" id="radio-choice-8" tabindex="3" value="choice-2" /> Eight</label><br/>
+ <label for="radio-choice-9"><input type="radio" name="radio-choice-1" id="radio-choice-9" tabindex="3" value="choice-2" /> Niine</label>
+ </div>
+
+ <div class="clearfix"></div>
+ </p>
+
+ <p>
+ <label for="select-choice">Simple city:</label>
+ <select name="select-choice" id="select-choice">
+ <option value="Choice 1">London</option>
+ <option value="Choice 2">Paris</option>
+ <option value="Choice 3">Rome</option>
+ </select>
+ </p>
+
+ <p>
+ <label for="textarea">Simple testimonial:</label><br/>
+ <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
+ </p>
+
+ <p>
+ <label for="checkbox"><input type="checkbox" name="checkbox" id="checkbox" /> Simple agreement</label><br/>
+ </p>
+
+ <div>
+ <button type="button" class="button">Submit</button>
+ </div>
+ </form>
+ </div>
+
+ <div class="clearfix"></div>
+
+
+ <div class="col_33">
+ <h2>More elements</h2>
+
+ <p>Use <code>strong</code> tag for information with <strong>strong importance</strong>. Use <code>em</code> tag to <em>stress emphasis</em> on a word or phrase.</p>
+
+ <p class="warning">Sample <code>.warning</code></p>
+ <p class="success">Sample <code>.success</code></p>
+ <p class="message">Sample <code>.message</code></p>
+ </div>
+
+ <div class="col_66">
+ <h2>CSS classes table</h2>
+
+ <table class="table">
+ <tr>
+ <th>Class</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td><code>.col_33</code></td>
+ <td>Column with 33% width</td>
+ </tr>
+ <tr>
+ <td><code>.col_50</code></td>
+ <td>Column with 50% width</td>
+ </tr>
+ <tr>
+ <td><code>.col_66</code></td>
+ <td>Column with 66% width</td>
+ </tr>
+ <tr>
+ <td><code>.col_100</code></td>
+ <td>Full width column with proper margins</td>
+ </tr>
+ <tr>
+ <td><code>.clearfix</code></td>
+ <td>Use after or wrap a block of floated columns</td>
+ </tr>
+ <tr>
+ <td><code>.left</code></td>
+ <td>Left text alignment</td>
+ </tr>
+ <tr>
+ <td><code>.right</code></td>
+ <td>Right text alignment</td>
+ </tr>
+ <tr>
+ <td><code>.center</code></td>
+ <td>Centered text alignment</td>
+ </tr>
+ <tr>
+ <td><code>.img_floatleft</code></td>
+ <td>Left alignment for images in content</td>
+ </tr>
+ <tr>
+ <td><code>.img_floatright</code></td>
+ <td>Right alignment for images in content</td>
+ </tr>
+ <tr>
+ <td><code>.img</code></td>
+ <td>Makes image change its width when browser window width is changed</td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="clearfix"></div>
+
+ </article>
+ </div>
+
+ <footer class="footer clearfix">
+ <div class="copyright">Keep it simplest</div>
+
+ <nav class="menu_bottom">
+ <ul>
+ <li class="active"><a href="#">About</a></li>
+ <li><a href="#">Skins</a></li>
+ <li><a href="#">Samples</a></li>
+ </ul>
+ </nav>
+ </footer>
+
+ </div>
+</body>
+</html>

0 comments on commit 06e2cbc

Please sign in to comment.