brito

/* minimal svg exploration */
svg * { stroke:#70d5dd; fill:#dd524b }

brito

/* Profile */
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Vollkorn:400italic,400);

html { padding:0 1ex }
body { font:100%/1.6 Vollkorn; margin:auto; max-width:55em }
a { text-decoration:none; color:inherit }
a[href^="//"]:after { content:'→'}

h1 { font:400 italic 161%/1 Vollkorn }

brito

/* progress vs meter

What you see is a "live" view as rendered by your browser, no styles added */
@charset 'UTF-8';

/* styles for this demo */
/* skin */
body > * { max-width:600px; display:block; margin:1em auto; color:rgba(255,255,255,.9) }
h1 { font-size:1.6em }
a { color:#6bf; white-space:nowrap }

brito

/* find your center */
html, body { height:100%; margin:0; text-align:center }
body:before { content:''; vertical-align:middle; background:red; height:100%; display:inline-block }

:target { background:red }

brito

/* video */
iframe { border:0; float:left; margin:0 1em; width:521px; height:322px }
[target=playing] { display:block; padding:.6em 0;
  background:#222222; color:#98b8ca; text-decoration:none }

body { font:14px/1.2 HelveticaNeue-Light,Segoe UI,Helvetica; 
	max-width:843px; margin:1em auto; background:black}

brito

/* flex muscles */
.flex { display:flex;flex-direction:column; align-items:flex-end }
.item {  }

body { font:1.6em/1 HelveticaNeue-CondensedBold }
* { outline:1px solid; margin:0; padding:0; list-style:none; padding:0 .3em }

brito

/* Fractal SVG */

brito

/* Permit Inspection */
@import '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css';

body { font:16px/1.6 FontAwesome, HelveticaNeue-Light }
h1, :before { font-family:FontAwesome, HelveticaNeue-CondensedBold }
input, textarea, button, [class*="fa-"] { font-size:inherit; font-weight:inherit; font-family:inherit; 
	background:transparent }
	
a { text-decoration:none }
a, button { color:#0080fc }

brito

/* flexy inputs */
label { display:flex; align-items:baseline }
label:before { content:attr(aria-label); text-align:right; flex:1 }
label>* { flex:1 }


/* just to look nicer */
html { background:white }
body { font:16px/1.6 HelveticaNeue-Light;
	background:#eee; min-width:21em; max-width:50%; margin:auto;

brito

/* Permit Inspection */
@import '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css';

body { font:16px/1.6 FontAwesome, HelveticaNeue-Light }

a img { max-height:1.6em }

li :not(:first-child) { display:none }
li:target :not(:first-child) { display:block }