Permalink
Browse files

Restored responsiveness

  • Loading branch information...
1 parent 5cc35d5 commit 8bb0d65237acdeb987375433fce897ecdfba826b Francisco Presencia Fandos committed Nov 8, 2016
Showing with 7 additions and 7 deletions.
  1. +1 −1 documentation.html
  2. +1 −1 index.html
  3. +1 −1 tests.html
  4. +2 −2 web/layout.jade
  5. +1 −1 web/style/style.min.css
  6. +1 −1 web/style/style.scss
View
@@ -82,7 +82,7 @@
margin: 0;
font-size: .9em;
}
-</style></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main id="home" class="documentation"><section class="flex five"><aside class="full fifth-1000"><h2>Contents</h2><div class="links flex two three-500 five-800 one-1000"></div><a href="#home" tabindex="-1" class="top pseudo button">▲ Up you go ▲</a></aside><article class="full four-fifth-1000"><h1 id="picnic-css">Picnic CSS</h1>
+</style></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><input id="bmenu" type="checkbox" class="show"><label for="bmenu" class="burger toggle pseudo button">menu</label><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main id="home" class="documentation"><section class="flex five"><aside class="full fifth-1000"><h2>Contents</h2><div class="links flex two three-500 five-800 one-1000"></div><a href="#home" tabindex="-1" class="top pseudo button">▲ Up you go ▲</a></aside><article class="full four-fifth-1000"><h1 id="picnic-css">Picnic CSS</h1>
<p>Picnic CSS is a lightweight and beautiful CSS library</p>
<h2 id="buttons">Buttons</h2>
<p>They can be of different colors and types:</p>
View
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><title>Picnic CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main><header class="hero"><div class="content"><h1>Picnic CSS</h1><p class="slogan">Lightweight and beautiful library</p><pre class="bower">bower install picnic</pre><p class="links"><a href="http://www.jsdelivr.com/#!picnicss" target="_blank" class="cdn">CDN</a><span> |</span><a href="https://raw.githubusercontent.com/picnicss/picnic/master/picnic.min.css" target="_blank" class="github">Download</a><span> |</span><a href="https://github.com/picnicss/picnic" target="_blank" class="github">GitHub</a></p></div><a href="#content" aria-hidden="true" class="keepgoing">▼</a></header><div id="content" class="visual flex one two-800"><div class="content"><h2>Default HTML beauty</h2><p>The native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML.</p><p>Picnic is completely modular so you can easily modify and test each part:</p><a href="/documentation" class="button icon-file-code">Documentation</a></div><div class="card"><section><button>Normal</button>= ' '<button class="success">Success</button>= ' '<button class="warning">Warning</button>= ' '<button class="error">Error</button></section><section><input type="email" placeholder="Email" aria-label="Email"></section><section><div class="flex three gallery"><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/optimised.svg)" class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/optimised.svg)" class="dropimage"><input type="file"></label></article></div></div></section></div></div><div class="visual flex one two-800"><div class="content"><h2>Made for the hackers</h2><p>Install it with bower and you will be able to integrate Picnic in any project and make it work for you.</p><p>Picnic is written in SCSS with <a href="/documentation#variables">many variables</a> and <a href="/documentation#placeholders"><em>classes</em> (placeholders)</a> to make it easy to extend.</p><a href="https://github.com/picnicss/picnic" target="_blank" class="button icon-g">GitHub</a></div><pre><code class="lang-css">$picnic-primary: #faa;
+<!DOCTYPE html><html lang="en"><head><title>Picnic CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><input id="bmenu" type="checkbox" class="show"><label for="bmenu" class="burger toggle pseudo button">menu</label><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main><header class="hero"><div class="content"><h1>Picnic CSS</h1><p class="slogan">Lightweight and beautiful library</p><pre class="bower">bower install picnic</pre><p class="links"><a href="http://www.jsdelivr.com/#!picnicss" target="_blank" class="cdn">CDN</a><span> |</span><a href="https://raw.githubusercontent.com/picnicss/picnic/master/picnic.min.css" target="_blank" class="github">Download</a><span> |</span><a href="https://github.com/picnicss/picnic" target="_blank" class="github">GitHub</a></p></div><a href="#content" aria-hidden="true" class="keepgoing">▼</a></header><div id="content" class="visual flex one two-800"><div class="content"><h2>Default HTML beauty</h2><p>The native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML.</p><p>Picnic is completely modular so you can easily modify and test each part:</p><a href="/documentation" class="button icon-file-code">Documentation</a></div><div class="card"><section><button>Normal</button>= ' '<button class="success">Success</button>= ' '<button class="warning">Warning</button>= ' '<button class="error">Error</button></section><section><input type="email" placeholder="Email" aria-label="Email"></section><section><div class="flex three gallery"><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/optimised.svg)" class="dropimage"><input type="file"></label></article></div><div><article data-tooltip="Click me to upload a new image" class="tooltip-bottom"><label style="background-image: url(web/img/optimised.svg)" class="dropimage"><input type="file"></label></article></div></div></section></div></div><div class="visual flex one two-800"><div class="content"><h2>Made for the hackers</h2><p>Install it with bower and you will be able to integrate Picnic in any project and make it work for you.</p><p>Picnic is written in SCSS with <a href="/documentation#variables">many variables</a> and <a href="/documentation#placeholders"><em>classes</em> (placeholders)</a> to make it easy to extend.</p><a href="https://github.com/picnicss/picnic" target="_blank" class="button icon-g">GitHub</a></div><pre><code class="lang-css">$picnic-primary: #faa;
@import &#39;bower/picnic/src/picnic&#39;;
View
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><title>Picnic CSS Testing</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main class="intro test"><h1>Testing Picnic CSS</h1><p>A small testing page to see how elements behave across devices</p><!-- Testing the module -->
+<!DOCTYPE html><html lang="en"><head><title>Picnic CSS Testing</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><input id="bmenu" type="checkbox" class="show"><label for="bmenu" class="burger toggle pseudo button">menu</label><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main class="intro test"><h1>Testing Picnic CSS</h1><p>A small testing page to see how elements behave across devices</p><!-- Testing the module -->
<h2 id="button">Button types and colors</h2>
<div>
View
@@ -22,8 +22,8 @@ html(lang="en")
span Picnic CSS
//- responsiveness
- //- input#bmenu.show(type="checkbox")
- //- label.burger.toggle.pseudo.button(for="bmenu") menu
+ input#bmenu.show(type="checkbox")
+ label.burger.toggle.pseudo.button(for="bmenu") menu
div.menu
a.pseudo.button.icon-help-circled(href="/tests") Test
Oops, something went wrong.
@@ -8,7 +8,7 @@ $picnic-grid-children: 1000;
$picnic-grid-off: 500 800;
$picnic-grid-count: one two three four five six;
-$picnic-nav-responsive: false;
+$picnic-nav-responsive: true;
$picnic-normalize-ie: false;

0 comments on commit 8bb0d65

Please sign in to comment.