First Release

.gitignore

@@ -0,0 +1 @@
+src/node_modules

README.md

@@ -1 +1,3 @@
-# frontendbr.github.io
+# Website da Organização Front-End Brasil
+
+Visite: http://frontendbr.github.io

assets/css/style.css

@@ -0,0 +1,89 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
+audio:not([controls]){display:none}
+[hidden]{display:none}
+html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
+body{margin:0}
+body,button,input,select,textarea{font-family:sans-serif}
+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}
+mark{background:#ff0;color:#000}
+pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}
+q{quotes:none}
+q:before,q:after{content:'';content:none}
+small{font-size:75%}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sup{top:-.5em}
+sub{bottom:-.25em}
+ul,ol{margin:1em 0;padding:0 0 0 40px}
+dd{margin:0 0 0 40px}
+nav ul,nav ol{list-style:none;list-style-image:none}
+img{border:0;-ms-interpolation-mode:bicubic}
+svg:not(:root){overflow:hidden}
+figure{margin:0}
+form{margin:0}
+fieldset{margin:0 2px;padding:.35em .625em .75em}
+legend{border:0;*margin-left:-7px}
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
+button,input{line-height:normal;*overflow:visible}
+table button,table input{*overflow:auto}
+button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}
+input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
+input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+textarea{overflow:auto;vertical-align:top}
+table{border-collapse:collapse;border-spacing:0}
+*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
+body{font-size:15px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;background:#fff;border-top:4px solid #949db2}
+h1,h2,h3,h4,h5,h6{color:#2f3339;font-family:"Lato",sans-serif;font-weight:400;text-transform:uppercase}
+h1{font-size:36px}
+h2{font-size:32px}
+h3{font-size:24px}
+h4{font-size:21px}
+h1{margin:0}
+p{color:#515b6a;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:23px}
+a{transition:all .2s linear;color:#3396d1;font-size:15px;text-decoration:none;border-bottom:1px dashed #3396d1;}
+a:hover{color:#2679aa;border-bottom:1px dashed #2679aa}
+ul,ol{margin:0;padding:0;list-style-type:none;}
+ul li,ol li{color:#515b6a;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:23px}
+img{max-width:100%}
+body{width:100%;*zoom:1;}
+body:before,body:after{content:"";display:table}
+body:after{clear:both}
+display block{width:102.08333333333333%;margin:0 -1.0416666666666665%;*width:102.08333333333333% -correction;*margin:0 -1.0416666666666665% -correction}
+.header,.content,.footer{*zoom:1;}
+.header:before,.content:before,.footer:before,.header:after,.content:after,.footer:after{content:"";display:table}
+.header:after,.content:after,.footer:after{clear:both}
+.header .logo{display:block;text-align:center;margin:20px auto;width:300px;max-width:100%}
+.header .lead-title{margin-top:0;text-align:center;padding:20px;font-size:18px;color:#515b6a}
+.content{margin:40px auto}
+.section{display:inline;float:left;overflow:hidden;width:81.25%;margin:0 1.0416666666666665%;*width:81.25% -correction;*margin:0 1.0416666666666665% -correction;margin-left:9.375%}
+.footer{margin:20px auto;border-top:1px solid #e3e3e3;}
+.footer p,.footer a{text-align:center;color:#49525f}
+.nav-main{width:100%;display:table;margin:20px auto}
+.nav-structure{width:100%;display:table;margin:20px auto}
+.nav-list{list-style-image:none;list-style-type:none;margin:0;padding:0;}
+.nav-list .nav-item{display:inline;float:left;overflow:hidden;width:31.25%;margin:0 1.0416666666666665%;*width:31.25% -correction;*margin:0 1.0416666666666665% -correction;}
+@media screen and (max-width: 767px){.nav-list .nav-item{display:inline;float:left;overflow:hidden;width:97.91666666666666%;margin:0 1.0416666666666665%;*width:97.91666666666666% -correction;*margin:0 1.0416666666666665% -correction}
+}.nav-list .nav-item .nav-link{display:block;margin:10px auto;text-align:center;text-transform:uppercase;letter-spacing:.0625em;color:#ecf0f1}
+.btn{background:#78839e;color:btn-link;padding:16px 24px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border-bottom:2px solid #717a8f;text-shadow:0 1px 1px #373d4c;}
+@media screen and (max-width: 767px){.btn{display:inline;float:left;overflow:hidden;width:97.91666666666666%;margin:0 1.0416666666666665%;*width:97.91666666666666% -correction;*margin:0 1.0416666666666665% -correction}
+}.btn:hover{background:#66728e;color:btn-link;padding:16px 24px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border-bottom:2px solid #717a8f}
+.title{border-bottom:1px solid #ecf0f1}
+.sub-title{color:#515b6a;border-left:2px solid #515b6a;padding-left:10px}
+.box{padding:20px;display:block;width:300px;max-width:100%;margin:60px auto;border:2px solid #8bc1e5;color:#5ca9db;text-align:center;text-transform:uppercase;font-size:13px;font-weight:700;}
+.box:hover{border:2px solid #459cd6}
+.centered-parent{position:relative;height:100vh}
+.centered-child{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
+@media screen and (max-width: 767px){.centered-child{width:80%}
+}@media screen and (max-width: 767px){.header,.footer,.content,.section{float:none;display:block;width:96%;margin:0 auto}
+.header .logo{width:180px}
+.header .lead-title{font-size:13px}
+.header .nav-link{margin:5px auto}
+.btn{padding:5px;}
+.btn:hover{padding:5px}
+}

assets/styl/_all.styl

@@ -0,0 +1,59 @@
+
+// CONTENTS
+// ----------------------------------------------------------------------------
+//
+// CONTENTS.......................... You’re reading it!
+// WARNING........................... Importante Note for Developers
+// IMPORTS........................... Begin importing the sections below
+//
+//
+// GETTING STARTED
+// ---------------
+// NIB............................... Nib by Vision Media - https://github.com/visionmedia/nib
+// CONFIG............................ Setting Variables
+//
+//
+// MODULES
+// ---------------
+// MIXINS............................ Stylus Mixins
+//
+//
+// GENERAL
+// ---------------
+// NORMALIZE......................... CSS Normalize by Necolas - https://github.com/necolas/normalize.css
+// BASE.............................. Scaffolding
+// GRID.............................. Initialize Grid System
+// RESPONSIVE........................ Media queries
+//
+//
+// ----------------------------------------------------------------------------
+
+
+
+
+// WARNING
+// ----------------------------------------------------------------------------
+// DO NOT REMOVE ANY @IMPORT ON THIS FILE!!
+//
+// Any custom styles SHOULD NOT be added or modified in style.css directly.
+//
+// Try not to edit any CSS beyond this point; if you find you need to do so
+// it is a failing of the project so please tweet at @vitorbritto.
+// ----------------------------------------------------------------------------
+
+
+
+
+// IMPORTS
+// ----------------------------------------------------------------------------
+
+@import "nib"
+@import "_config"
+
+// Modules
+@import "_modules/mixins"
+
+// General
+@import "_general/normalize"
+@import "_general/base"
+@import "_general/grid"

assets/styl/_config.styl

@@ -0,0 +1,29 @@
+// Color
+color-font          = #515B6A
+color-link          = #3396D1
+color-title         = #2F3339
+color-subtitle      = #515B6A
+color-negative      = #ecf0f1
+
+// Tipography
+font-title          = "Lato", sans-serif
+font-default        = "Helvetica Neue", Helvetica, Arial, sans-serif
+font-mono           = Monaco, Menlo, Consolas, Courier New, monospace
+font-alt            = Georgia, "Times New Roman", Times, serif
+base-line-height    = 23px
+base-font-size      = 15px
+
+// Button
+btn-color           = #949DB2
+btn-border          = #717A8F
+btn-text            = #515B6A
+
+// Messages
+color-notready      = #c0392b
+color-recommend     = #2980b9
+color-important     = #f39c12
+
+// Breakpoints
+phone    = "screen and (max-width: 767px)"
+tablet   = "screen and (min-width: 768px) and (max-width: 1023px)"
+tvscreen = "screen and (min-width: 1440px)"

assets/styl/_general/base.styl

@@ -0,0 +1,62 @@
+
+// General
+*
+  box-sizing: border-box
+
+body
+    font-size: base-font-size
+    font-family: font-default
+    font-weight: 300
+    background: white
+    border-top: 4px solid btn-color
+
+// Text
+h1, h2, h3, h4, h5, h6
+    color: color-title
+    font-family: font-title
+    font-weight: 400
+    text-transform: uppercase
+
+h1
+    font-size: 36px
+
+h2
+    font-size: 32px
+
+h3
+    font-size: 24px
+
+h4
+    font-size: 21px
+
+h1
+    margin: 0
+
+p
+    color: color-font
+    font-family: font-default
+    font-size: base-font-size
+    line-height: base-line-height
+
+a
+    transition()
+    color: color-link
+    font-size: base-font-size
+    text-decoration: none
+    border-bottom: 1px dashed color-link
+    &:hover
+        color: darken(color-link, 20%)
+        border-bottom: 1px dashed darken(color-link, 20%)
+
+ul, ol
+    margin: 0
+    padding: 0
+    list-style-type: none
+    li
+        color: color-font
+        font-family: font-default
+        font-size: base-font-size
+        line-height: base-line-height
+
+img
+    max-width: 100%

assets/styl/_general/grid.styl

@@ -0,0 +1,61 @@
+/////////////////
+// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
+/////////////////
+
+// Defaults which you can freely override
+column-width = 60px
+gutter-width = 20px
+columns = 12
+
+// Utility variable — you should never need to modify this
+_gridsystem-width = (column-width + gutter-width) * columns
+
+// Set @total-width to 100% for a fluid layout
+total-width = 100%
+
+// Correcting percentage-to-pixel rounding errors in IE6 & 7
+// See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
+// Override @min with the minimum width of your layout
+min-width = 960
+correction = (((0.5 / min-width) * 100) * 1%)
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+clearfix()
+ *zoom:1
+
+	&:before,
+	&:after
+		content:""
+		display:table
+
+	&:after
+		clear:both
+
+
+//////////
+// GRID //
+//////////
+
+body
+	width 100%
+	clearfix()
+
+row(columns = columns)
+    clearfix()
+	display block
+	width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)
+	margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)
+	*width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)-correction
+	*margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)-correction
+
+column(x, columns = columns)
+	display inline
+	float left
+	overflow hidden
+	width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)
+	margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)
+	*width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction
+	*margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)-correction
+
+offset(offset = 1)
+	margin-left total-width*(((gutter-width+column-width)*offset + (gutter-width*0.5))/_gridsystem-width)