Skip to content

Instantly share code, notes, and snippets.

@shuuki

shuuki/index.html

Last active August 29, 2015 14:14
Show Gist options
  • Save shuuki/e7a3b85e2fdcfd07db7c to your computer and use it in GitHub Desktop.
Save shuuki/e7a3b85e2fdcfd07db7c to your computer and use it in GitHub Desktop.
Download ZIP
print framework
Raw
index.html
<div class="palette columns">
<div class="r"> </div>
<div class="o"> </div>
<div class="y"> </div>
<div class="g"> </div>
<div class="b"> </div>
<div class="i"> </div>
<div class="v"> </div>
</div>
<div id="top" class="page" role="document">
<header role="banner">
<h1>HTML5 Test Page</h1>
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
</header>
<nav role="navigation">
<ul>
<li>
<a href="#text">Text</a>
<ul>
<li><a href="#text__headings">Headings</a></li>
<li><a href="#text__paragraphs">Paragraphs</a></li>
<li><a href="#text__blockquotes">Blockquotes</a></li>
<li><a href="#text__lists">Lists</a></li>
<li><a href="#text__hr">Horizontal rules</a></li>
<li><a href="#text__tables">Tabular data</a></li>
<li><a href="#text__syntax">Syntax</a></li>
<li><a href="#text__inline">Inline elements</a></li>
</ul>
</li>
<li>
<a href="#embedded">Embedded content</a>
<ul>
<li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li>
<li><a href="#embedded__canvas">Canvas</a></li>
<li><a href="#embedded__progress">Progress bars</a></li>
<li><a href="#embedded__svg">Inline SVG</a></li>
<li><a href="#embedded__iframes">IFrames</a></li>
</ul>
</li>
<li>
<a href="#forms">Form elements</a>
<ul>
<li><a href="#forms__text">Text fields</a></li>
<li><a href="#forms__select">Select menus</a></li>
<li><a href="#forms__checkbox">Checkboxes</a></li>
<li><a href="#forms__radio">Radio buttons</a></li>
<li><a href="#forms__html5">HTML5 inputs</a></li>
<li><a href="#forms__action">Action buttons</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<section id="text">
<header><h1>Text</h1></header>
<article id="text__headings">
<header>
<h1>Headings</h1>
</header>
<div>
<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>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__paragraphs">
<header><h1>Paragraphs</h1></header>
<div>
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__blockquotes">
<header><h1>Blockquotes</h1></header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__lists">
<header><h1>Lists</h1></header>
<div>
<h3>Definition list</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__hr">
<header><h1>Horizontal rules</h1></header>
<div>
<hr>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__tables">
<header><h1>Tabular data</h1></header>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__syntax">
<header><h1>Syntax</h1></header>
<div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h2>Pre-formatted text</h2>
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__inline">
<header><h1>Inline elements</h1></header>
<div>
<p><a href="#">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
<p>The <i>i element</i> is text that is offset from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p><cite>This is a citation.</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="embedded">
<header><h1>Embedded content</h1></header>
<article id="embedded__images">
<header><h2>Images</h2></header>
<div>
<h3>No <code>&lt;figure&gt;</code> element</h3>
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
<figure>
<img src="http://placekitten.com/360/360" alt="Image alt text">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__audio">
<header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__video">
<header><h2>Video</h2></header>
<div><video controls="">video</video></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__canvas">
<header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__progress">
<header><h2>Progress bars</h2></header>
<div><progress>progress</progress></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__svg">
<header><h2>Inline SVG</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__iframes">
<header><h2>IFrames</h2></header>
<!--<div><iframe src="http://www.google.com" width="100%" height="300" frameborder="0"></iframe></div>-->(iframe disabled)
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
</section>
<section id="forms">
<header><h1>Form elements</h1></header>
<form action="">
<fieldset id="forms__text">
<legend>Text fields</legend>
<p>
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">
</p>
<p>
<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password">
</p>
<p>
<label for="webaddress">Web Address</label>
<input id="webaddress" type="url" placeholder="http://yoursite.com">
</p>
<p>
<label for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" placeholder="name@email.com">
</p>
<p>
<label for="search">Search</label>
<input id="search" type="search" placeholder="Enter Search Term">
</p>
<p>
<label for="text">Number Input <abbr title="Required">*</abbr></label>
<input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</p>
<p>
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
<p>
<label class="error">Error</label>
<input class="is-error" type="text" placeholder="Text Input">
</p>
<p>
<label class="valid">Valid</label>
<input class="is-valid" type="text" placeholder="Text Input">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__select">
<legend>Select menus</legend>
<p>
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend>
<p>
<label for="ic">Color input</label>
<input type="color" id="ic" value="#f25633">
</p>
<p>
<label for="in">Number input</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Range input</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Date input</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Month input</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Week input</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Datetime input</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Datetime-local input</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
<fieldset id="forms__action">
<legend>Action buttons</legend>
<p>
<input type="submit" value="Input">
<button type="submit">Button</button>
<input type="reset" value="Reset">
<input type="submit" value="Disabled" disabled>
</p>
</fieldset>
<p><a href="#top">[Top]</a></p>
</form>
</section>
</main>
<footer role="contentinfo">
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
</footer>
</div>
Raw
index.jade
.palette.columns
.r
.o
.y
.g
.b
.i
.v
.page(role='document')
header(role='banner')
nav(role='navigation')
main(role='main')
footer(role='contentinfo')
section
article
h1 The Print:
h2 A style framework
h3 created for the web.
h4 Thoughtful Construction
h5 Contrasty Minimalism
h6 Discerning Astronauts
article
p(lang='en').
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writi ng, used to organize longer prose.
blockquote
p.
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text. It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
cite No one ever.
section
article.columns
.column.ratio-12-12
h2 Lists
dl.column.ratio-4-12
dt Definition List Title
dd Definition list division.
ol.column.ratio-4-12
li Ordered List Item
li Ordered List Item
li Ordered List Item
ul.column.ratio-4-12
li Unordered List Item
li Unordered List Item
li Unordered List Item
article
header
h2 Tables
table
caption Table Caption
thead
tr
th Table Heading 1
th Table Heading 2
th Table Heading 3
th Table Heading 4
th Table Heading 5
tfoot
tr
th Table Footer 1
th Table Footer 2
th Table Footer 3
th Table Footer 4
th Table Footer 5
tbody
tr
td Table Cell 1
td Table Cell 2
td Table Cell 3
td Table Cell 4
td Table Cell 5
tr
td Table Cell 1
td Table Cell 2
td Table Cell 3
td Table Cell 4
td Table Cell 5
tr
td Table Cell 1
td Table Cell 2
td Table Cell 3
td Table Cell 4
td Table Cell 5
tr
td Table Cell 1
td Table Cell 2
td Table Cell 3
td Table Cell 4
td Table Cell 5
section
article
header
h1 Syntax
div
p
strong Keyboard input:
kbd Cmd
p
strong Inline code:
code inline code
p
strong Sample output:
samp This is sample output from a computer program.
h2 Pre-formatted text
pre.
\nP R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
article#text__inline
header
h1 Inline elements
div
p
a(href='#') This is a text link.
p
strong Strong is used to indicate importance.
p
em This text has added emphasis.
p
| The
b b element
| is stylistically different text from normal text.
p
| The
i i element
| is text that is offset from the normal text.
p
| The
u u element
| is text with an unarticulated, though explicitly rendered, non-textual annotation.
p
del This text is deleted
| and
ins This text is inserted
| .
p
s This text has a strikethrough.
p
| Superscript
sup ®
| .
p
| Subscript for things like H
sub 2
| O.
p
small This small text is small for for fine print, etc.
p
| Abbreviation:
abbr(title='HyperText Markup Language') HTML
p
q(cite='https://developer.mozilla.org/en-US/docs/HTML/Element/q') This text is a short inline quotation.
p
cite This is a citation.
p
| The
dfn dfn element
| indicates a definition.
p
| The
mark mark element
| indicates a highlight.
p
| The
var variable element
| , such as
var x
| =
var y
| .
p
| The time element:
time(datetime='2013-04-06T12:32+00:00') many weeks ago
article
h3 horizontal rule
hr
section
header
h2 embedded content
article.columns
.column.ratio-4-12
header
h3 images
h6 img without figure element
img(src='http://placekitten.com/240/120', alt='Adorable kitten 1')
h6 img wrapped in a figure element without figcaption
figure
img(src='http://placekitten.com/260/130', alt='Adorable kitten 2')
h6 img wrapped in a figure element with a figcaption
figure
img(src='http://placekitten.com/280/140', alt='Adorable kitten 3')
figcaption
b Fig.3
| Kitten Whiskers
h3 inline svg
svg(width='200px', height='200px')
circle(cx='100', cy='100', r='100', fill='#1fa3ec')
.column.ratio-6-12
h3 audio
audio(controls='') audio
h3 video
video(src='http://v2v.cc/~j/theora_testsuite/320x240.ogg' controls='') video
h3 progress
progress progress
h3 iframe
p iframe disabled
iframe(src='http://s.codepen.io/somethingformed/debug/raWJXV?')
h3 canvas
canvas canvas
section
header
h2 forms
form(action='').columns
fieldset
legend Text fields
p
label(for='text')
| Text Input
abbr(title='Required') *
input#text(type='text', placeholder='Text Input')
p
label(for='password') Password
input#password(type='password', placeholder='Type your Password')
p
label(for='webaddress') URL
input#webaddress(type='url', placeholder='http://yoursite.com')
p
label(for='emailaddress') Email Address
input#emailaddress(type='email', placeholder='name@email.com')
p
label(for='search') Search
input#search(type='search', placeholder='Enter Search Term')
p
label(for='text')
| Number Input
abbr(title='Required') *
input#text(type='number', placeholder='Enter a Number', pattern='[0-9]*')
p
label(for='textarea') Textarea
textarea#textarea(rows='6', cols='24', placeholder='Enter your message here')
hr
p
label.error Error
input.is-error(type='text', placeholder='Text Input')
p
label.valid Valid
input.is-valid(type='text', placeholder='Text Input')
fieldset#forms__select
legend select
p
label(for='select') Select
select#select
optgroup(label='Option Group')
option Option One
option Option Two
option Option Three
fieldset
legend checkbox
ul.bare
li
label(for='checkbox1')
input#checkbox1(name='checkbox', type='checkbox', checked='checked')
| Choice A
li
label(for='checkbox2')
input#checkbox2(name='checkbox', type='checkbox')
| Choice B
li
label(for='checkbox3')
input#checkbox3(name='checkbox', type='checkbox')
| Choice C
fieldset
legend radio
ul.bare
li
label(for='radio1')
input#radio1.radio(name='radio', type='radio', checked='checked')
| Option 1
li
label(for='radio2')
input#radio2.radio(name='radio', type='radio')
| Option 2
li
label(for='radio3')
input#radio3.radio(name='radio', type='radio')
| Option 3
fieldset#forms__html5
legend more inputs
p
label(for='ic') Color input
input#ic(type='color', value='#37b0bb')
p
label(for='in') Number input
input#in(type='number', min='0', max='10', value='5')
p
label(for='ir') Range input
input#ir(type='range', value='10')
p
label(for='idd') Date input
input#idd(type='date', value='1970-01-01')
p
label(for='idm') Month input
input#idm(type='month', value='1970-01')
p
label(for='idw') Week input
input#idw(type='week', value='1970-W01')
p
label(for='idt') Datetime input
input#idt(type='datetime', value='1970-01-01T00:00:00Z')
p
label(for='idtl') Datetime-local input
input#idtl(type='datetime-local', value='1970-01-01T00:00')
fieldset#forms__action
legend Action buttons
p
input(type='submit', value='Input')
button(type='submit') Button
input(type='reset', value='Reset')
input(type='submit', value='Disabled', disabled='')
section
header
h2 columns
aside
h3 twelfths
- var twelve = 1
.columns
while twelve <= 12
.column.ratio-1-12= twelve++
aside
h3 sixths
- var six = 1
.columns
while six <= 6
div.column.ratio-2-12= six++
aside
h3 fourths
- var four = 1
.columns
while four <= 4
.column.ratio-3-12= four++
aside
h3 halves
.columns
.column.ratio-6-12 1
.column.ratio-6-12 2
Raw
print-framework.markdown
Raw
style.less
// there are many web UI frameworks
// but this one is mine.
// read the docs: http://codepen.io/write/print-framework
// get the code: https://gist.github.com/shuuki/e7a3b85e2fdcfd07db7c
/* PRINT FRAMEWORK *
/* overrides and settings */
* {
box-sizing: border-box;
vertical-align: baseline;
&:before,
&:after {
box-sizing: inherit;
}
}
html {
-webkit-font-smoothing: antialiased;
::selection {
background-color: @color-selection;
color: @color-selection-alt;
}
}
body {
background-color: @color-page;
color: @color-text;
font-family: @font-body;
line-height: 1.45;
font-size: 1em;
font-weight: 400;
padding: @print-margin;
}
/* layout */
section {
}
article {
}
aside {
}
header {
display: block;
width: 100%;
}
main {
}
footer {
}
/* typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: @font-heading;
font-weight: inherit;
line-height: 1.2;
margin: 1.414rem 0 0.5rem;
}
h1 {
font-size: 3.998rem;
margin-top: 0;
font-weight: 300;
}
h2 {
font-size: 2.827rem;
font-weight: 900;
}
h3 {
font-size: 1.999rem;
font-weight: 600;
}
h4 {
font-size: 1.414rem;
font-weight: 400;
}
h5 {
font-size: 1.266rem;
font-weight: 700;
}
h6 {
font-size: 1.125rem;
font-weight: 900;
}
p {
font-size: 1rem;
hyphenate-character: '\2010';
hyphens: auto;
margin-bottom: 1.3rem;
word-break: break-all;
word-break: break-word;
}
blockquote {
border-left: 0.2rem solid;
padding: 0 1rem;
margin: 0 1rem;
}
cite {
display: block;
text-align: right;
&:before {
content: '\2015';
}
}
/* links */
a {
color: @color-primary;
text-decoration: underline;
&:active {
color: @color-selected;
}
&:focus {
color: @color-selected;
}
&:hover {
color: @color-analog;
}
&:visited {
color: @color-primary;
}
}
/* inline elements */
small {
font-size: 0.707rem;
}
b,
strong {
font-weight: 700;
}
i,
em,
var {
font-style: italic;
}
sub,
sup {
font-size: 0.8rem;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
}
sup {
top: -0.35rem;
}
s,
del {
text-decoration: line-through;
}
u,
ins {
text-decoration: underline;
}
q {
&:before {
content: '\201c';
}
&:after {
content: '\201d';
}
}
/* syntax */
pre,
code,
samp,
kbd
{
font-family: @monospace;
}
mark {
background-color: @color-complement;
}
/* lists */
ul,
ol {
padding-left: 2rem;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dl {
dt {
font-size: 1.414rem;
}
dd {
}
}
/* horizontal rule */
hr {
border: 0;
background-color: @color-text;
height: 0.2rem;
}
/* progress bars */
progress {
appearance: none;
background-color: cyan;
border: 0.2rem solid @color-text;
height: 1rem;
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: @color-complement;
}
}
progress[value] {
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: magenta;
}
}
@keyframes progressing {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* images */
img {
width: 100%;
}
figure {
padding: 1rem;
img {
border: 0.2rem solid @color-text;
}
figcaption {
color: @color-text;
padding: 0 0.5rem 0.5rem 0.5rem;
}
}
/* audio */
video {
width: 100%;
}
/* video */
video {
width: 100%;
}
/* canvas */
/* progress */
/* inline svg */
/* iframes */
iframe {
width: 100%;
}
/* forms */
form {
}
fieldset {
//background-color: @color-accent;
background-image: radial-gradient(circle farthest-corner at center, @color-page 85%, @color-accent 100%);
border: 0.2rem solid;
margin: 1rem;
padding: 1rem;
li {
line-height: 2rem;
}
}
legend {
background-color: @color-text;
color: @color-page;
font-family: @font-heading;
padding: 0 0.5rem;
font-weight: 700;
}
label {
//background: silver;
//vertical-align: baseline;
font-weight: 700;
display: block;
}
input,
textarea,
button,
select,
input[type=checkbox],
input[type=radio],
input[type=range]
{
border: 0;
border-radius: 0;
font-family: @font-body;
font-size: 1rem;
margin: 0;
padding: 0;
-webkit-appearance: none;
&:focus {
outline: none;//0.2rem solid @color-selection;
}
}
.is-error {
}
.is-valid{
}
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=url],
input[type=date],
input[type=number],
input[type=month],
input[type=week],
input[type=datetime],
input[type=datetime-local],
textarea,
select {
padding: 0.5rem;
background-color: @color-page;
border: 0.2rem solid @color-text;
width: 100%;
}
textarea {
overflow: auto;
resize: none;
}
/* buttons */
button,
input[type=submit],
input[type=reset],
{
cursor: pointer;
background-color: @color-selected;
color: @color-accent;
padding: 0.5rem;
&:disabled {
background-color: desaturate(@color-selected, 100%);
}
}
button {
font-family: @font-body;
&:disabled {
color: @color-page;
}
}
input[type=radio],
input[type=checkbox]
{
background-color: @color-page;
border: 0.2rem solid @color-text;
display: inline-block;
&:checked {
background-color: @color-selected;
}
}
input[type=radio] {
border-radius: 1rem;
}
input[type=checkbox],
input[type=radio]
{
height: 1rem;
width: 1rem;
margin: 0;
}
input[type=color]
{
border: 0;
height: 2rem;
width: 4rem;
margin: 0;
}
input[type=range]
{
&::-webkit-slider-runnable-track
{
background: @color-text;
border: 0.2rem solid @color-text;
box-shadow: @shadow-inset;
border-radius: 1rem;
cursor: pointer;
}
&::-webkit-slider-thumb
{
background: @color-selected;
border-radius: 1rem;
cursor: pointer;
height: 1rem;
margin: 0;
width: 1rem;
-webkit-appearance: none;
}
}
/* tables */
caption {
background-color: @color-text;
color: @color-page;
font-family: @font-heading;
font-weight: 700;
line-height: 2;
text-align: center;
}
/* print */
@page
{
size: @print-width @print-height;
margin: @print-margin;
}
@media print {
section {
page-break-after: always;
height: @print-height;
overflow: hidden;
}
}
@print-width: 12.25in;
@print-height: 9.25in;
/* columns */
// to use, add "columns" to parent element
// and "column" plus "ratio-X-Y" to children
@maxColumns: 12;// sets the number of columns in the grid
.column {
float: left;
&s {// parent container settings
display: flex;
align-items: flex-start;
flex-flow: row wrap;
justify-content: space-around;
}
#columns (@maxColumns);
}
#columns (@i) when (@i > 0) {
&.ratio-@{i}-@{maxColumns} {
width: round( percentage( ( @i/@maxColumns ) ), 7 );
box-sizing: border-box;
@media (max-width: 32rem) {// single column breakpoint
width: 100%;
}
}
#columns (@i - 1);// recurses for each column
}
#columns (0) {}// when column index reaches 0, do nothing
.bare {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
/********************************/
/* */
/* ** */
/* */
/********************************/
//////////////////////////////////
// //
// //
// //
//////////////////////////////////
//////////////////////////////////
// theme variables //
//////////////////////////////////
@font-body: @serif;
@font-heading: @sans;
@font-code: @monospace;
@color-page: @f;
@color-text: @gatehouse;
@color-accent: @almost-white;
@color-selected: @color-analog;
@color-primary: @vox-blue;
@color-complement: @vox-orange;
@color-analog: @vox-green;
@color-selection: @vox-yellow;
@color-selection-alt: @color-text;
@shadow-inset: none;
@print-margin: 0;
//////////////////////////////////
// VOX //
//////////////////////////////////
.palette {
div {
width: 10vw; height: 1rem;
}
}
.r { background-color: @vox-red; }
.o { background-color: @vox-orange; }
.y { background-color: @vox-yellow; }
.g { background-color: @vox-green; }
.b { background-color: @vox-blue; }
.i { background-color: @vox-indigo; }
.v { background-color: @vox-violet; }
//////////////////////////////////
// fonts //
//////////////////////////////////
@sans: 'Open Sans', sans-serif;
@serif: 'Merriweather', serif;
@monospace: 'Source Code Pro', monospace;
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,900,300italic,300,700,700italic,900italic);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
//////////////////////////////////
// fonts //
//////////////////////////////////
// vox palette
@vox-red: #f6394f;
@vox-orange: #ff813b;
@vox-yellow: #f1d808;
@vox-green: #00b164;
@vox-blue: #0e789d;
@vox-indigo: #662f73;
@vox-violet: #ba3d75;
// moxruin sequence
@gatehouse: #141414;
@almost-white: #f8f5ec;
@mox-light: #ddd8c7;
@mox-midtone: #846f5a;
@dead-channel: #231f20;
@the-sea: #37b0bb;
@mr-orange: #f25633;
@twilight: #2b7acf;
@dead-violet: #282634;
@mid-violet: #4a475d;
@high-violet: #676097;
@sodium-vapor: #e57d00;
// grayscale sequence
@f: #fff; @e: #eee; @d: #ddd; @c: #ccc;
@b: #bbb; @a: #aaa; @9: #999; @8: #888;
@7: #777; @6: #666; @5: #555; @4: #444;
@3: #333; @2: #222; @1: #111; @0: #000;
///////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment