macian

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Macian</title> <meta name="author" content="Josh Avanier"> <meta name="description" content="Macian is a functional CSS framework"> <link href="font/inter-ui.css" rel="stylesheet"> <link href="macian.min.css" rel="stylesheet"> <style> body { max-width: 1500px } #grid { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; } </style> </head> <body class="noselect hf p3 p5-l cn"> <header class="pv5"> <h1 class="mb3 f5 ac upc tk">Macian</h1> </header> <div class="w9-s w9-m w6-l cn"> <div class="mb5"> <div class="r"> <div class="c6 c6-m r mb5 mb0-l pr4-m pr4-l"> <div class="cb cb-s cb-m sh4 bt bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bt bb bw2"></div> <div class="ca ca-s ca-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb bw2"></div> <div class="c9 c9-s c9-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb bw2"></div> <div class="c8 c8-s c8-m sh4 bb br bw2"></div> <div class="c4 c4-s c4-m sh4 bb bw2"></div> <div class="c7 c7-s c7-m sh4 bb br bw2"></div> <div class="c5 c5-s c5-m sh4 bb bw2"></div> <div class="c6 c6-s c6-m sh4 bb br bw2"></div> <div class="c6 c6-s c6-m sh4 bb bw2"></div> <div class="c5 c5-s c5-m sh4 bb br bw2"></div> <div class="c7 c7-s c7-m sh4 bb bw2"></div> <div class="c4 c4-s c4-m sh4 bb br bw2"></div> <div class="c8 c8-s c8-m sh4 bb bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c9 c9-s c9-m sh4 bb bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="ca ca-s ca-m sh4 bb bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="cb cb-s cb-m sh4 bb bw2"></div> </div> <div class="c6 c6-m r mb4 mb0-l pl4-m pl4-l"> <div class="cc sh4 bt bb bw2"></div> <div class="c6 c6-s c6-m sh4 bb br bw2"></div> <div class="c6 c6-s c6-m sh4 bb bw2"></div> <div class="c4 c4-s c4-m sh4 bb br bw2"></div> <div class="c4 c4-s c4-m sh4 bb br bw2"></div> <div class="c4 c4-s c4-m sh4 bb bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb br bw2"></div> <div class="c1 c1-s c1-m sh4 bb bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb br bw2"></div> <div class="c2 c2-s c2-m sh4 bb bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb br bw2"></div> <div class="c3 c3-s c3-m sh4 bb bw2"></div> <div class="c4 c4-s c4-m sh4 bb br bw2"></div> <div class="c4 c4-s c4-m sh4 bb br bw2"></div> <div class="c4 c4-s c4-m sh4 bb bw2"></div> <div class="c6 c6-s c6-m sh4 bb br bw2"></div> <div class="c6 c6-s c6-m sh4 bb bw2"></div> <div class="cc sh4 bb bw2"></div> </div> </div> </div> <div class="mb5"> <div class="r f6 tkt"> <div class="c3 c6-m pv3 pr4 pb0-l al" title=".al"> █ █ ██ ███ █████ ████████ █████ ███ ██ █ █ </div> <div class="c3 c6-m pv3 ph4 pb0-l aj" title=".aj"> █ █ ██ ███ █████ ████████ █████ ███ ██ █ █ </div> <div class="c3 c6-m pv3 ph4 pb0-l ac" title=".ac"> █ █ ██ ███ █████ ████████ █████ ███ ██ █ █ </div> <div class="c3 c6-m pv3 pl4 pb0-l ar" title=".ar"> █ █ ██ ███ █████ ████████ █████ ███ ██ █ █ </div> </div> </div> <div class="mb5"> <div class="mb3"><p class="f1 lhs bg-noir">1</p></div> <div class="mb3"><p class="f2 lhs bg-noir">2</p></div> <div class="mb3"><p class="f3 lhs bg-noir">3</p></div> <div class="mb3"><p class="f4 lhs bg-noir">4</p></div> <div class="mb3"><p class="f5 lhs bg-noir">5</p></div> <div class="mb3"><p class="f6 lhs bg-noir">6</p></div> </div> <div id="grid" class="mb5 g grg3 gcg3"> <div class="sh4 bg-f"></div> <div class="sh4 bg-e"></div> <div class="sh4 bg-d"></div> <div class="sh4 bg-c"></div> <div class="sh4 bg-b"></div> <div class="sh4 bg-a"></div> <div class="sh4 bg-9"></div> <div class="sh4 bg-8"></div> <div class="sh4 bg-7"></div> <div class="sh4 bg-6"></div> <div class="sh4 bg-5"></div> <div class="sh4 bg-4"></div> <div class="sh4 bg-3"></div> <div class="sh4 bg-2"></div> <div class="sh4 bg-1"></div> <div class="sh4 bg-0"></div> </div> <div class="mb5"> <div class="r f6"> <div class="mb4 mb0-l c6 pr4-l"> <div class="mb3 bg-noir pb1"></div> <div class="mb3 bg-noir pb2"></div> <div class="mb3 bg-noir pb3"></div> <div class="mb3 bg-noir pb4"></div> <div class="mb3 bg-noir pb5"></div> <div class="mb3 bg-noir pb6"></div> <div class="mb3 bg-noir pb7"></div> </div> <div class="mb4 mb0-l c6 pl4-l ac"> <p class="mb3 pb4 lhd"><span class="mr0">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr1">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr2">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr3">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr4">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr5">█</span>█</p> <p class="mb3 pb4 lhd"><span class="mr6">█</span>█</p> <p class="mb3 lhd"><span class="mr7">█</span>█</p> </div> </div> </div> <div class="mb5"> <div class="ba bw2 p3"> <div class="ba bw2 br1 p3"> <div class="ba bw2 br2 p3"> <div class="ba bw2 br3 p3"> <div class="ba bw2 br4 p3"> <div class="ba bw2 br5 p3"> <div class="ba bw2 br6 p3"></div> </div> </div> </div> </div> </div> </div> </div> <div class="mb5 r ac"> <div class="w1 lf sh4 bg-noir of" title=".of"></div> <div class="w1 lf sh4 bg-noir o9" title=".o9"></div> <div class="w1 lf sh4 bg-noir o8" title=".o8"></div> <div class="w1 lf sh4 bg-noir o7" title=".o7"></div> <div class="w1 lf sh4 bg-noir o6" title=".o6"></div> <div class="w1 lf sh4 bg-noir o5" title=".o5"></div> <div class="w1 lf sh4 bg-noir o4" title=".o4"></div> <div class="w1 lf sh4 bg-noir o3" title=".o3"></div> <div class="w1 lf sh4 bg-noir o2" title=".o2"></div> <div class="w1 lf sh4 bg-noir o1" title=".o1"></div> </div> <footer class="pv5"> <p class="f6 ac">© 2017–2018 <a class="noir" href="https://twitter.com/joshavanier/" title="Josh Avanier">JA</a></p> </footer> </div> </body> </html>