From b8b0fbf66d9d164cde53ef3b572257145654a54b Mon Sep 17 00:00:00 2001 From: Ju Negreiros Date: Tue, 22 May 2018 15:06:37 -0300 Subject: [PATCH] Add BEM methodology --- bower_components | 1 - codigo-de-conduta.html | 40 +++++++++--------- dist/css/style.min.css | 2 +- dist/img/left-arrow.svg | 2 +- index.html | 26 ++++++------ scss/_code-of-conduct.scss | 79 ++++++++++++++++++++++++++++++++++++ scss/_codigo-de-conduta.scss | 65 ----------------------------- scss/_content.scss | 25 ------------ scss/_general.scss | 55 ++++++++++++++++++++----- scss/_header.scss | 67 ++++++++++-------------------- scss/_main.scss | 59 +++++++++++++++++++++++++-- scss/common/_variables.scss | 8 +++- scss/style.scss | 3 +- 13 files changed, 246 insertions(+), 186 deletions(-) delete mode 120000 bower_components create mode 100644 scss/_code-of-conduct.scss delete mode 100644 scss/_codigo-de-conduta.scss delete mode 100644 scss/_content.scss diff --git a/bower_components b/bower_components deleted file mode 120000 index 4da48bb..0000000 --- a/bower_components +++ /dev/null @@ -1 +0,0 @@ -/home/junegreiros/Documents/sorocabacss.github.io/node_modules/@bower_components \ No newline at end of file diff --git a/codigo-de-conduta.html b/codigo-de-conduta.html index 1005cb9..3f75586 100644 --- a/codigo-de-conduta.html +++ b/codigo-de-conduta.html @@ -24,9 +24,9 @@ - - - + + + @@ -39,7 +39,7 @@ ga('create', 'UA-67803598-3', 'auto'); ga('send', 'pageview'); -
+
@@ -47,20 +47,22 @@ -
- - Back button +
+ + Back button -

Código de Conduta

-
-

A organização SorocabaCSS preza pelo respeito mútuo, diversidade e bem estar de todos os participantes. Queremos que todos se sintam bem vindos, confortáveis e seguros em todas as edições do meetup, por isso fica estabelecido o seguinte código de conduta:

-

Não serão tolerados assédio ou intimidação, sob qualquer forma, o assédio inclui comentários ofensivos e piadas referentes à gênero, identidade de gênero e expressão, orientação sexual, cor de pele, etnia, idade, deficiência, aparência física, posição política, religião ou falta dela, ou seja, que ofendam/excluam qualquer indivíduo ou grupo de indivíduos, assim como comentários ou imagens sexuais, intimidação deliberada, bullying, perseguição, fotografias ou gravações que gerem embaraço, contato físico inadequado ou atenção sexual indesejada.

-

Solicitações para descontinuidade de comportamentos citados acima devem ser cumpridas imediatamente. Os participantes que violarem o código de conduta poderão ser expulsos do meetup e de suas próximas edições.

-

Caso você sofra assédio ou perceba que alguém está sendo assediado, procure algum membro da equipe da organização imediatamente, denuncie a situação de forma discreta e não tome atitudes por conta própria a fim de mantermos a segurança de todos.

-

Contamos com sua colaboração para um ambiente seguro e agradável a todas as pessoas presentes.

-
- sorocabacss +

Código de Conduta

+
+

A organização SorocabaCSS preza pelo respeito mútuo, diversidade e bem estar de todos os participantes. Queremos que todos se sintam bem vindos, confortáveis e seguros em todas as edições do meetup, por isso fica estabelecido o seguinte código de conduta:

+

Não serão tolerados assédio ou intimidação, sob qualquer forma, o assédio inclui comentários ofensivos e piadas referentes à gênero, identidade de gênero e expressão, orientação sexual, cor de pele, etnia, idade, deficiência, aparência física, posição política, religião ou falta dela, ou seja, que ofendam/excluam qualquer indivíduo ou grupo de indivíduos, assim como comentários ou imagens sexuais, intimidação deliberada, bullying, perseguição, fotografias ou gravações que gerem embaraço, contato físico inadequado ou atenção sexual indesejada.

+

Solicitações para descontinuidade de comportamentos citados acima devem ser cumpridas imediatamente. Os participantes que violarem o código de conduta poderão ser expulsos do meetup e de suas próximas edições.

+

Caso você sofra assédio ou perceba que alguém está sendo assediado, procure algum membro da equipe da organização imediatamente, denuncie a situação de forma discreta e não tome atitudes por conta própria a fim de mantermos a segurança de todos.

+

Contamos com sua colaboração para um ambiente seguro e agradável a todas as pessoas presentes.

-
- - + + sorocabacss + + +
+ + diff --git a/dist/css/style.min.css b/dist/css/style.min.css index 57a1d37..fd63fd2 100644 --- a/dist/css/style.min.css +++ b/dist/css/style.min.css @@ -1 +1 @@ -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */progress,sub,sup{vertical-align:baseline}button,hr,input{overflow:visible}*,:after,:before,legend{box-sizing:border-box}legend,ul{padding:0}body,sub,sup{position:relative}body,h1,h2,p,ul{margin:0}header:after,header:before{content:'';height:100%;width:100%}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}.main a,header a{text-decoration:none}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}ul{list-style:none}html{font-size:16px;font-family:'Space Mono',monospace}.codigo-de-conduta .button-sorocabacss,h1{font-family:Montserrat,sans-serif}body:after{z-index:2;position:fixed;left:0;top:0;content:'';width:100%;height:5px;background:#f857a6;background:linear-gradient(to left,#f857a6,#ff5858)}.github-corner{left:0;position:absolute;top:0}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner .github-corner:hover .octo-arm{animation:none}.github-corner .github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}header{position:relative;z-index:1;min-height:100vh;-ms-flex-flow:column;flex-flow:column;color:#fff;text-align:center;background-image:url(../img/sorocaba.jpg);background-size:cover;background-position:center;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}header:after,header:before{left:0;position:absolute;top:0}header:before{z-index:-1;background:#f857a6;background:linear-gradient(to left,#f857a6,#ff5858);opacity:.5}header:after{z-index:-2;opacity:.8;background:#000}header a{color:#fff;font-size:1.2rem;padding:.5rem .5rem .5rem 1.5rem;text-align:left}h1{font-size:2rem}h1 span{color:#f4cccc}.main a,.main a:visited{color:#fff}.content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:100vh;-ms-flex-pack:center;justify-content:center;width:100%}.content .button-codigo-de-conduta{padding-bottom:1rem;text-align:center;width:100%}@media (min-width:768px){h1{font-size:4rem}.content{-ms-flex-direction:column;flex-direction:column}.content .button-codigo-de-conduta{padding-left:1.75rem;padding-top:1.5rem;text-align:left;width:100%}}.main{margin:auto;max-width:90vw}.main a{background:#ff6f6f;border-radius:10px;display:inline-block;font-size:1.2rem;font-weight:700;letter-spacing:1.5px;margin-top:1.5rem;padding:.7rem 1.3rem;transition-duration:.2s;transition-property:background,color;transition-timing-function:ease}.main a:hover{background:#ff3c3c}.codigo-de-conduta h1{margin-top:5rem;text-align:center}@media (min-width:768px){.codigo-de-conduta h1{margin-top:3rem}}.codigo-de-conduta .text{margin:auto;width:85%}.codigo-de-conduta p{font-weight:500;line-height:1.5rem;margin:1.5rem auto;text-align:left}@media (min-width:768px){.codigo-de-conduta .text{width:70%}.codigo-de-conduta p{font-size:1.1rem;text-align:center}}.codigo-de-conduta .button-sorocabacss{color:#ff6f6f;display:block;font-size:2rem;font-weight:700;margin-bottom:2rem;padding-left:0;text-align:center}.codigo-de-conduta .button-sorocabacss span{color:#f4cccc}.codigo-de-conduta .button-back{left:0;margin-top:.5rem;position:absolute;top:0}.codigo-de-conduta .button-back img{height:40px;opacity:.8;width:40px}.codigo-de-conduta .button-back:hover img{opacity:1} \ No newline at end of file +body,h1,h2,p,ul{margin:0}*,:after,:before{box-sizing:border-box}ul{list-style:none;padding:0}html{font-family:'Space Mono',monospace;font-size:16px}.main__button,.main__link{color:#fff;font-size:1.2rem;text-decoration:none}body{position:relative}body:after{background-color:#f857a6;background-image:linear-gradient(to left,#f857a6,#ff5858);content:'';height:5px;left:0;position:fixed;top:0;width:100%;z-index:2}.header::after,.header::before{content:'';height:100%;width:100%}.github-corner{left:0;position:absolute;top:0}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:768px){.github-corner:hover .github-corner :hover .octo-arm{animation:none}.github-corner:hover .github-corner :hover .github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.header{-ms-flex-align:center;align-items:center;background-image:url(../img/sorocaba.jpg);background-position:center;background-size:cover;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center;min-height:100vh;position:relative;text-align:center;z-index:1}.code-of-conduct__back-button,.header::after,.header::before{left:0;position:absolute;top:0}.header::before{background:#f857a6;background-image:linear-gradient(to left,#f857a6,#ff5858);opacity:.5;z-index:-1}.header::after{background:#000;opacity:.8;z-index:-2}.main{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;height:100vh;-ms-flex-pack:center;justify-content:center;width:100%}.main__content{margin:auto;max-width:90vw}.main__button{background:#ff6f6f;border-radius:10px;display:inline-block;font-weight:700;letter-spacing:1.5px;margin-top:1.5rem;padding:.7rem 1.3rem;transition-duration:.2s;transition-property:background,color;transition-timing-function:ease}.main__button:visited{color:#fff}.main__button:hover{background:#ff3c3c}.main__link{display:block;padding:.5rem .5rem 1rem;text-align:center;width:100%}@media (min-width:768px){.main{-ms-flex-direction:column;flex-direction:column}.main__link{padding-left:1.75rem;padding-top:1.5rem;text-align:left;width:100%}}.code-of-conduct__title,.main__title{text-align:center;font-family:Montserrat,sans-serif}.main__link:hover{text-decoration:underline}.main__title{color:#ff6f6f;display:block;font-size:2rem;font-weight:700;padding-left:0}@media (min-width:768px){.main__title{font-size:4rem}}.main__title__highlight{color:#f4cccc}.code-of-conduct__back-button{margin-left:.75rem;margin-top:.75rem}.code-of-conduct__back-button__icon{height:40px;opacity:.8;width:40px}.code-of-conduct__back-button__icon:hover{opacity:1}.code-of-conduct__title{font-size:2rem;margin-top:5rem}@media (min-width:768px){.code-of-conduct__title{font-size:3rem;margin-top:4rem}}.code-of-conduct__container-text{margin:auto;width:85%}.code-of-conduct__container-text__text{font-weight:500;line-height:1.5rem;margin:1.5rem auto;text-align:left}@media (min-width:768px){.code-of-conduct__container-text{width:70%}.code-of-conduct__container-text__text{font-size:1.1rem;text-align:center}}.code-of-conduct__button-sorocabacss{color:#ff6f6f;display:block;font-family:Montserrat,sans-serif;font-size:2rem;font-weight:700;margin-bottom:2rem;padding-left:0;text-align:center;text-decoration:none;transition:color .5s}.code-of-conduct__button-sorocabacss__highlight{color:#f4cccc;transition:color .5s}.code-of-conduct__button-sorocabacss:hover{color:#f4cccc}.code-of-conduct__button-sorocabacss:hover .code-of-conduct__button-sorocabacss__highlight{color:#ff6f6f} \ No newline at end of file diff --git a/dist/img/left-arrow.svg b/dist/img/left-arrow.svg index 617af17..5db3562 100644 --- a/dist/img/left-arrow.svg +++ b/dist/img/left-arrow.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index 093575c..d90ac98 100644 --- a/index.html +++ b/index.html @@ -32,14 +32,14 @@ -
+
@@ -47,11 +47,13 @@ -
- código de conduta -
-

sorocabacss

- participe +
+ código de conduta +
+

+ sorocabacss +

+ participe
diff --git a/scss/_code-of-conduct.scss b/scss/_code-of-conduct.scss new file mode 100644 index 0000000..314555b --- /dev/null +++ b/scss/_code-of-conduct.scss @@ -0,0 +1,79 @@ +.code-of-conduct { + &__back-button { + left: 0; + margin-left: .75rem; + margin-top: .75rem; + position: absolute; + top: 0; + + &__icon { + height: 40px; + opacity: .8; + width: 40px; + + &:hover { + opacity: 1; + } + } + } + + &__title { + font-family: $primary-font, sans-serif; + font-size: 2rem; + margin-top: 5rem; + text-align: center; + + @media (min-width: $md-breakpoint) { + font-size: 3rem; + margin-top: 4rem; + } + } + + &__container-text { + margin: auto; + width: 85%; + + @media (min-width: $md-breakpoint) { + width: 70%; + } + + &__text { + font-weight: 500; + line-height: 1.5rem; + margin: 1.5rem auto; + text-align: left; + + @media (min-width: $md-breakpoint) { + font-size: 1.1rem; + text-align: center; + } + } + } + + + &__button-sorocabacss { + color: $bittersweet; + display: block; + font-family: $primary-font, sans-serif; + font-size: 2rem; + font-weight: bold; + margin-bottom: 2rem; + padding-left: 0; + text-align: center; + text-decoration: none; + transition: color .5s; + + &__highlight { + color: $beauty-bush; + transition: color .5s; + } + + &:hover { + color: $beauty-bush; + + .code-of-conduct__button-sorocabacss__highlight { + color: $bittersweet; + } + } + } +} diff --git a/scss/_codigo-de-conduta.scss b/scss/_codigo-de-conduta.scss deleted file mode 100644 index 9c32899..0000000 --- a/scss/_codigo-de-conduta.scss +++ /dev/null @@ -1,65 +0,0 @@ -.codigo-de-conduta { - h1 { - margin-top: 5rem; - text-align: center; - - @media (min-width: 768px) { - margin-top: 3rem; - } - } - - .text { - margin: auto; - width: 85%; - - @media (min-width: 768px) { - width: 70%; - } - } - - p { - font-weight: 500; - line-height: 1.5rem; - margin: 1.5rem auto; - text-align: left; - - @media (min-width: 768px) { - font-size: 1.1rem; - text-align: center; - } - } - - .button-sorocabacss { - color: $bittersweet; - display: block; - font-family: 'Montserrat', sans-serif; - font-size: 2rem; - font-weight: bold; - margin-bottom: 2rem; - padding-left: 0; - text-align: center; - - span { - color: $beauty-bush; - } - } - - .button-back { - left: 0; - margin-top: .5rem; - position: absolute; - top: 0; - - img { - height: 40px; - opacity: .8; - width: 40px; - } - - &:hover { - img { - opacity: 1; - } - } - } -} diff --git a/scss/_content.scss b/scss/_content.scss deleted file mode 100644 index 25224f1..0000000 --- a/scss/_content.scss +++ /dev/null @@ -1,25 +0,0 @@ -.content { - align-items: center; - display: flex; - flex-direction: column-reverse; - height: 100vh; - justify-content: center; - width: 100%; - - @media (min-width: 768px) { - flex-direction: column; - } - - .button-codigo-de-conduta { - padding-bottom: 1rem; - text-align: center; - width: 100%; - - @media(min-width: 768px) { - padding-left: 1.75rem; - padding-top: 1.5rem; - text-align: left; - width: 100%; - } - } -} diff --git a/scss/_general.scss b/scss/_general.scss index 731029d..44f78af 100644 --- a/scss/_general.scss +++ b/scss/_general.scss @@ -11,29 +11,30 @@ p { } ul { - padding: 0; - margin: 0; list-style: none; + margin: 0; + padding: 0; } html { - font-size: 16px; font-family: 'Space Mono', monospace; + font-size: 16px; } body { - position: relative; margin: 0; + position: relative; + &:after { - z-index: 2; - position: fixed; + background-color: $brilliant-rose; + background-image: linear-gradient(to left, $brilliant-rose, $persimmon); + content: ''; + height: 5px; left: 0; + position: fixed; top: 0; - content: ''; width: 100%; - height: 5px; - background: $brilliant-rose; - background: linear-gradient(to left, $brilliant-rose, $persimmon); + z-index: 2; } } @@ -42,5 +43,37 @@ body { position: absolute; top: 0; - &:hover .octo-arm {animation: octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}} + &:hover { + .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + + @keyframes octocat-wave { + 0%, 100% { + transform: rotate(0); + } + 20%, 60% { + transform: rotate(-25deg); + } + 40%, 80% { + transform: rotate(10deg); + } + } + + @media (max-width: $md-breakpoint) { + .github-corner { + :hover { + .octo-arm { + animation: none; + } + + .github-corner { + .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + } + } + } + } + } } diff --git a/scss/_header.scss b/scss/_header.scss index b5bec17..a0ed7e2 100644 --- a/scss/_header.scss +++ b/scss/_header.scss @@ -1,63 +1,40 @@ -header { - position: relative; - z-index: 1; - min-height: 100vh; - display: flex; - flex-flow: column; - color: $white; - text-align: center; +.header { + align-items: center; background-image: url('../img/sorocaba.jpg'); - background-size: cover; background-position: center; + background-size: cover; + color: $white; display: flex; flex-direction: column; - align-items: center; + flex-flow: column; justify-content: center; + min-height: 100vh; + position: relative; + text-align: center; + z-index: 1; - &:before { - position: absolute; + &::before { + background: $brilliant-rose; + background-image: linear-gradient(to left, $brilliant-rose, $persimmon); + content: ''; + height: 100%; left: 0; + opacity: .5; + position: absolute; top: 0; - content: ''; width: 100%; - height: 100%; z-index: -1; - background: $brilliant-rose; - background: linear-gradient(to left, $brilliant-rose, $persimmon); - opacity: .5; } - &:after { - position: absolute; + &::after { + background: $black; + content: ''; + height: 100%; left: 0; + opacity: .8; + position: absolute; top: 0; - content: ''; width: 100%; - height: 100%; z-index: -2; - opacity: .8; - background: $black; - } - - a { - color: $white; - font-size: 1.2rem; - padding: .5rem; - padding-left: 1.5rem; - text-align: left; - text-decoration: none; - } -} - -h1 { - font-family: 'Montserrat', sans-serif; - font-size: 2rem; - - @media (min-width: 768px) { - font-size: 4rem; - } - - span { - color: $beauty-bush; } } diff --git a/scss/_main.scss b/scss/_main.scss index f2451ab..0b693bd 100644 --- a/scss/_main.scss +++ b/scss/_main.scss @@ -1,8 +1,21 @@ .main { - margin: auto; - max-width: 90vw; + align-items: center; + display: flex; + flex-direction: column-reverse; + height: 100vh; + justify-content: center; + width: 100%; - a { + @media (min-width: $md-breakpoint) { + flex-direction: column; + } + + &__content { + margin: auto; + max-width: 90vw; + } + + &__button { background: $bittersweet; border-radius: 10px; color: $white; @@ -25,4 +38,44 @@ background: darken($bittersweet, 10%); } } + + &__link { + color: $white; + display: block; + font-size: 1.2rem; + padding: .5rem; + padding-bottom: 1rem; + text-align: center; + text-decoration: none; + width: 100%; + + @media(min-width: $md-breakpoint) { + padding-left: 1.75rem; + padding-top: 1.5rem; + text-align: left; + width: 100%; + } + + &:hover { + text-decoration: underline; + } + } + + &__title { + color: $bittersweet; + display: block; + font-family: $primary-font, sans-serif; + font-size: 2rem; + font-weight: bold; + padding-left: 0; + text-align: center; + + @media (min-width: $md-breakpoint) { + font-size: 4rem; + } + + &__highlight { + color: $beauty-bush; + } + } } diff --git a/scss/common/_variables.scss b/scss/common/_variables.scss index 0ba1647..3133c73 100644 --- a/scss/common/_variables.scss +++ b/scss/common/_variables.scss @@ -5,5 +5,11 @@ $black: #000; $bittersweet: #ff6f6f; $beauty-bush: #f4cccc; $brilliant-rose: #f857a6; -$persimmon: #ff5858; +$persimmon: #ff5858;; $pink: #ffc0cb; + +//breakpoints +$md-breakpoint: 768px; + +//font-family +$primary-font: 'Montserrat'; diff --git a/scss/style.scss b/scss/style.scss index 74f5244..7312e3c 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -4,6 +4,5 @@ @import 'general'; @import 'header'; -@import 'content'; @import 'main'; -@import 'codigo-de-conduta'; +@import 'code-of-conduct';