diff --git a/2017.html b/2017.html new file mode 100644 index 0000000..de74988 --- /dev/null +++ b/2017.html @@ -0,0 +1,117 @@ + + + + Sobre o Lakademy + + + + + + +
+ + +

Latin America KDE Summit

+
+ +
+
+
+
+
+

+ O LaKademy 2017 será uma edição muito especial, o evento completará 5 anos. Nesta 5ª edição temos o orgulho de anunciar + que o nosso encontro latino-americano será realizado na cidade de Belo Horizonte, Minas Gerais, Brasil. +

+

+ Entre os dias 28/04 e 01/05 vários contribuidores da nossa comunidade se reunirão para trabalhar nos seus projetos de interesse. + O evento, no entanto, não aberto apenas para os contribuidores, mas para usuários e quaisquer outras pessoas interessadas + em fazer parte dele. Então, se você é uma dessas pessoas que tem interesse em participar do LaKademy e da comunidade KDE, + apareça no Campus 1 do CEFET/MG. +

+ +
+
+

Doe para o Lakademy

+

+ Os projetos da comunidade KDE são produzidos e mantidos por voluntários de todo o mundo e estão disponíveis gratuitamente + para qualquer pessoa. A sua doação é importante para ajudar a manter o trabalho da comunidade. Com ela nós cobrimos custos + com servidores, encontros dos contribuidores, etc. A doação é uma forma fácil, rápida e direta de apoiar a comunidade. +

+
+ Doar +
+ + +
+
+
+
+
+ + + + + + + diff --git a/contato.html b/contato.html new file mode 100644 index 0000000..172a893 --- /dev/null +++ b/contato.html @@ -0,0 +1,133 @@ + + + + + Contato + + + + + + + +
+ + +

Latin America KDE Summit

+
+ +
+
+
+
+
+

+ O LaKademy é organizado pela Equipe do KDE Brasil com o apoio do KDE e.V. Se você deseja fazer parte da comunidade, participar + do evento e/ou colaborar para sua realização, você pode entrar em contato conosco através da nossa lista de discussão ou + canal de IRC #kde-brasil, na Freenode. +

+

Links Úteis

+ +
+
+

Doe para o Lakademy

+

+ Os projetos da comunidade KDE são produzidos e mantidos por voluntários de todo o mundo e estão disponíveis gratuitamente + para qualquer pessoa. A sua doação é importante para ajudar a manter o trabalho da comunidade. + Com ela nós cobrimos custos com servidores, encontros dos contribuidores, etc. A doação é uma + forma fácil, rápida e direta de apoiar a comunidade. +

+
+ Doar +
+ +
+
+
+
+
+ + + + + + + + diff --git a/css/style.css b/css/style.css index c20ea36..5c0ad44 100644 --- a/css/style.css +++ b/css/style.css @@ -1,332 +1,495 @@ -/* importação da fonte*/ +/* importação da fonte padrão da KDE*/ @import url(//fonts.googleapis.com/css?family=Noto+Sans); /* atributos do body */ body{ font-family: 'Noto Sans'; - line-height: 1.5; margin: 0; padding: 0; } /* Header */ header{ - /* background-image: url(../img/dino.jpg); */ - background-color: #263d36; + background-color: #1d99f3; background-position: center; background-repeat: no-repeat; background-size: cover; - line-height: 1.2; max-width: none; text-align: center; padding-bottom: 5em; } +/* cada ano/pagina tem seu background image especifico definida por uma classe*/ +.bg-2018{ + background-image: url(../img/floripa.jpg); +} + +.bg-2017{ + background-image: url(../img/bh2.jpg); +} + header h1 { color: white; font-size: 2.5em; font-weight: 300; + line-height: 1.2; + text-shadow: 2px 2px #000000; } #logo { - display: inline-block; - height: 120px; + max-height: 125px; vertical-align: top; - width: 120px; + width: auto; } /* Seções */ -section:nth-of-type( 2n) { +section:nth-of-type( odd ) { background-color: #f5f6fa; } /* Footer */ - footer { background-color: #1d99f3; - overflow: hidden; - padding: 3em ; } footer p{ font-size: 0.8em; color:white; } -/*paragráfo, permite a quebra de palavras com hífens*/ -p{ - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} - /* Botões e icones */ +/* aplicada na div antes do elemento a para centralizar e aplicar a margem ao botão */ .button { + text-align: center; + margin: 1em 0 1em 0 ; +} + +/* classe aplicada sobre o elemento a para criar um botão primario */ +.button-primary{ + border: none; + border-radius: 2px; + text-transform: uppercase; + color: white; + background: #1d99f3; + padding: 0.3em 1em; + text-decoration: none; +} + +/* classe aplicada sobre o elemento a para criar um botão secundario */ +.button-secondary{ border: 1px solid #1d99f3; border-radius: 30px; color: black; font-size: 0.8em; padding: 0.3em 1em; - text-align: center; text-decoration: none; - display: block; - margin: 0 10vw; } -.button:hover { +.button-secondary:hover { background: #1d99f3; color: white; } - -.icon{ +.icon { text-decoration: none; - color:white; + color: white; + font-size: 1.5em; } /* Menu de navegação*/ + +/* Duas barras são necessárias, uma para Desktop e outra para Mobile */ + +/* Desktop */ + +/* bloco da barra de navegação*/ .navbar { - list-style-type: none; margin-bottom: 3em ; - padding: 0 ; + padding: 0 1em ; overflow: hidden; background-color: transparent; } +/* item da barra de navegação - sempre a direita */ +.navbar-item { + color: white; + display: block; + text-align: center; + padding: 1em ; + float: right; + text-decoration: none; + text-shadow: 2px 2px #000000; +} + +/* item da barra de navegação - sempre a esquerda*/ +.navbar-title { + color: white; + text-align: center; + padding: 1em; + float: left; + display: block; + text-shadow: 2px 2px #000000; + text-decoration: none; +} + +/* bloco do dropdown*/ +.navbar-dropdown { + display: block; + float: right; + overflow: hidden; + padding: 1em; +} + +/* título do dropdown */ +.navbar-dropdown-title { + color: white; + text-align: center; + text-decoration: none; + text-shadow: 2px 2px #000000; +} + +/* bloco de conteúdo do dropdown +possui posição absoluta +z-index:1 para não empurrar os outros elementos +Está oculto em primeiro momento e é exibido após hover do dropdown*/ +.navbar-dropdown-content { + z-index: 1; + display: none; + position: absolute; +} + +/* itens do dropdown */ +.navbar-dropdown-item { + color: white; + text-decoration: none; + display: block; + background-color: transparent; + padding: 1em; + text-shadow: 2px 2px #000000; +} + +/* todo conteudo de um dropdown em hover será exibido */ +.navbar-dropdown:hover .navbar-dropdown-content { + display: block; +} + +/* Mobile */ + +/* bloco da barra - nasce oculta e é exibida via MediaQuery */ .navbar-collapse { list-style-type: none; margin-bottom: 3em; - padding: 0; + padding: 0 ; overflow: hidden; background-color: transparent; display: none; + border: 1px solid white; } +/* agrupador do título (.navbar-tilte) e do botão (.navbar-icon) +tem essa altura para impedir que os items do menu subão ao serem exibidos */ .navbar-header-collapse { height: 3em; - border: 1px solid white; } -.navbar-item { +/* icone da barra mobile - sempre a direita */ +.navbar-icon { color: white; - display: block; text-align: center; - padding: 1em ; + padding: 1em; float: right; - text-decoration: none; + display: block; + text-shadow: 2px 2px #000000; } +/* item da barra +Semelhantes ao da barra desktop, mas são centralizados, dispostos em blocos e com bordas +Iniciam ocultos com a adição da classe .hide que é removida e adicionada utilizando JS (menuShow()) +A função é chamada através do .navbar-icon*/ .navbar-item-collapse { color: white; display: block; text-align: center; padding: 1em; float:none; border: 1px solid white; text-decoration: none; + text-shadow: 2px 2px #000000; } -.navbar-icon{ - color: white; - text-align: center; - padding: 1em; - float: right; - display: block; -} +/* O dropdown mobile é mais simples +A formatação dos seus sub-items é semelhante a um navbar-item-collapse +Também iniciam ocultos com a classe .hide que é removida e adicionada utilizando JS (dropdownShow()) +Basta definir um navbar-item-collapse que chamará a função */ -.navbar-title{ +.navbar-collapse-dropdown-item { color: white; + display: block; text-align: center; padding: 1em; - float:left; - display: block; + float: none; + border: 1px solid white; + text-decoration: none; + text-shadow: 2px 2px #000000; } -.hide{ +.hide { display: none; } -/* Esconde o menu quando a tela ficar pequena, quando o ecrã tiver menos de 600 px -Exibe o menu mobile*/ +/* Esconde o menu desktop e exibe o menu mobile */ @media screen and (max-width: 600px) { .navbar { display: none; } .navbar-collapse { display: block; } } -/* imagens */ +/* Imagens */ + +/* Imagem responsiva +Disposta em bloco com margens automáticas para centralizar +Largura máxima de 70% e altura proporcional */ .img-responsive { - max-width: 80%; + max-width: 70%; height: auto; display: block; margin-left: auto; margin-right: auto; } +/* Imagem em circulo */ .img-avatar{ border-radius: 500rem; } -/* Container e Derivados*/ +/*Sistema de Colunas - Grid*/ /* -reset básico -retira a margin e o padding dos elementos (para o navegador não colocar) -e aciona o box-sizing (tamanho do elemento muda ao -adicionar margin ou padding) +Reset Básico +Retira a margin e o padding dos elementos (para o navegador não colocar automaticamente) +e aciona o box-sizing (tamanho do elemento muda ao adicionar margin ou padding) */ .container, .row, .col, .col2, .col3 { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* webkit e moz são os motores de navegação do mozilla e chrome*/ } +/* container possui uma row (linha) que possui n colunas */ + .container { width: 100%; margin-left: auto; margin-right: auto; padding: 2em ; } +.container h2 { + text-align: center; +} + +/* se a tela tiver no mínimo 1170px, sua largura máxima se torna 1170px e seu padding lateral é removido +pois não é mais necessário */ +@media (min-width: 1170px) { + .container { + max-width: 1170px; + padding: 2em 0 2em 0; + } +} + +/* o atributo clear:both impede que elementos flutuem em torno da row */ .row { padding: 1em 1em ; overflow: hidden; clear:both; } -/* row clearfix */ -/* .row:before, -.row:after{ - content: ""; - clear: both; - display: table; -} */ -/* base para todas as colunas, por padrão assume 1 coluna*/ +/* base para todas as colunas, por padrão assume 1 coluna ou seja 100% de largura +As colunas sempre são utilizadas com col + col-n (número de colunas que deseja) +São dispostas como blocos em uma linhas (display:inline-block)*/ .col { display: inline-block; vertical-align: top; - /*retira a margin que o inline-block coloca*/ - margin-right: -4px; min-height: 1em; width: 100%; margin-bottom: 2em; + /*retira a margin que o inline-block coloca*/ + margin-right: -4px; } -.col img{ - max-width: 100%; - max-height: 200px; - display: block; - margin-left: auto; - margin-right: auto; -} - +/* especificação do elemento p dentro de uma coluna */ .col p { word-wrap: normal; text-indent: 1.5em; padding: 0 1em; + text-align: justify; } -.container h2 { - text-align: center; -} - -.col-2 h2, -.col-3 h2, -.col-2 p, -.col-3 p { - text-align: center; +/* especificação dos h2 e h3 dentro de uma coluna */ +.col h3, +.col h2, +.col h3{ + word-wrap: normal; + text-indent: 1.5em; } - -/*duas colunas*/ +/* duas colunas */ @media (min-width: 480px) { - /* se o tamanho da tela não tiver no mínimo 480px a classe é ignorada 1 columa é aplicada*/ + /* A partir que a tela tem no mínimo 480px é possivel utilizar duas colunas + Caso a view não atenda o requisito, torna-se 1 coluna */ .col-2 { width: 50%; } } /* tres colunas */ @media (min-width: 728px) { - /* se o tamanho da tela não tiver no mínimo 728px a classe é ignorada e 1 columa é aplicada*/ + /* A partir que a tela tem no mínimo 728px é possivel utilizar três colunas + Caso a view não atenda o requisito, torna-se 1 coluna */ .col-3 { width: 33.3333%; } +} + - .content { +/* As especificações de elementos p, h2, h3 e img são informados fora da MediaQuery +com o intuito de manter sua formatação de texto, mesmo sem a disposição de 3 ou 2 colunas */ +.col-3 img { + max-width: 100%; + max-height: 200px; + display: block; + margin-left: auto; + margin-right: auto; +} + +.col-2 h2, +.col-3 h2, +.col-2 p, +.col-3 p { + text-align: center; + text-indent: 0; +} + +/* Coluna de Content e Sidebar */ +@media (min-width: 992px) { + /* A partir que a tela tem no mínimo 992px é possivel utilizar as colunas de content e size + Caso a view não atenda o requisito, torna-se 1 coluna */ + .col-content { width: 70%; } - - .side { + .col-sidebar { width: 30%; } } + +/* o uso de col col-n com col col-content/con-sidebar não é recomendado +Use só col col-n ou col-content/con-sidebar*/ + /* Linha do Tempo */ +/* bloco da linha do tempo */ +/* largura máxima de 1170px assim como o container +margem lateral auto para se centralizar +*/ .timeline { position: relative; - max-width: 1024px; + max-width: 1170px; height: auto; - padding: 0px; - margin: 0px auto; + padding: 0 ; + margin: 0 auto; overflow: hidden; list-style: none; } +/* fundo da linha do tempo - reta tracejada +Com 50% de largura e 100% de altura em relação ao elemento pai, com uma borda direita cinza e tracejada. +Posicionado como absoluto com z-index negativo para ficar ao fundo da página +*/ .timeline-background { width: 50%; float: left; height: 100%; position: absolute; z-index: -1; border-right: 2px dashed grey; box-sizing: border-box; } +/* Marcação de um ano na linha do tempo */ .timeline-year { font-weight: 600; font-size: 25px; letter-spacing: 3px; color: #f0f0f0; background-color: #1d99f3; text-align: center; margin-top: 3em; margin: 1em auto; clear: both; } +/* Descrição de um evento na linha do tempo +Com 44% de largura e os 6% restantes distruibudos entre o margin e padding para visualizar o timeline-background*/ .timeline-event{ width: 44%; margin: 4% 2%; padding: 1%; - float: right; text-align: center; background-color: white; } -.timeline-img{ +/* Imagem de um evento na linha do tempo +Com 44% de largura e os 6% restantes distruibudos entre o margin e padding para visualizar o timeline-background*/ +.timeline-img { width: 44%; margin: 4% 2%; padding: 1%; - float: left; background-color: white; } +/* Alteração da posição (right e left) entre a descrição e a imagem de um evento com base nos filhos pares e +ímpares */ + +.timeline-event:nth-of-type( odd ){ + float:right; +} + +.timeline-event:nth-of-type( even ) { + float: left ; +} + +.timeline-img:nth-of-type( even ) { + float: right; +} + +.timeline-img:nth-of-type( odd ) { + float: left; +} + +/* Caso a view tenha menos que 600px a imagem e a descrição de um evento ficam centralizados */ @media (max-width: 600px) { .timeline-event, .timeline-img { width:auto; float:none; } +} + +.link{ + text-decoration: none; + color:black; +} + +.link:hover{ + color:#1d99f3; } \ No newline at end of file diff --git a/img/bh.jpg b/img/bh.jpg new file mode 100644 index 0000000..bf50100 Binary files /dev/null and b/img/bh.jpg differ diff --git a/img/bh2.jpg b/img/bh2.jpg new file mode 100644 index 0000000..78f5020 Binary files /dev/null and b/img/bh2.jpg differ diff --git a/img/favicon-old.png b/img/favicon-old.png new file mode 100644 index 0000000..6284b08 Binary files /dev/null and b/img/favicon-old.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..55be7d7 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/floripa.jpg b/img/floripa.jpg new file mode 100644 index 0000000..a00d8e1 Binary files /dev/null and b/img/floripa.jpg differ diff --git a/img/floripa2.jpg b/img/floripa2.jpg new file mode 100644 index 0000000..3d2576d Binary files /dev/null and b/img/floripa2.jpg differ diff --git a/img/kde-logo.png b/img/kde-logo.png new file mode 100644 index 0000000..052f4c3 Binary files /dev/null and b/img/kde-logo.png differ diff --git a/img/logo - 2.png b/img/logo - 2.png new file mode 100644 index 0000000..a095675 Binary files /dev/null and b/img/logo - 2.png differ diff --git a/img/logo-2.png b/img/logo-2.png new file mode 100644 index 0000000..f897cc0 Binary files /dev/null and b/img/logo-2.png differ diff --git a/img/logo-3.png b/img/logo-3.png new file mode 100644 index 0000000..3dcd311 Binary files /dev/null and b/img/logo-3.png differ diff --git a/index.html b/index.html index f3c6079..ab27f70 100644 --- a/index.html +++ b/index.html @@ -1,195 +1,231 @@ Lakademy 2018 + - -
+
- +

Latin America KDE Summit | Lakademy 2018

- - - +
+ Inscreva-se! +
-
+
+
+
+
+

Sobre

+ +

+ O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. +

+
+ Saiba mais! +
+
+
+

Colabore

+ +

+ Se você deseja se tornar um(a) contribuidor(a) da nossa comunidade há muitas atividades com as quais você pode se envolver. +

+
+ Saiba mais! +
+
+
+

Contate-nos

+ +

Se você tem interesse em participar do LaKademy e contribuir com a comunidade KDE, entre em contato conosco.

+
+ Saiba mais! +
+
+
+
+
+ +

  • 2017

  • O LaKademy 2017 foi uma edição muito especial, o evento completou 5 anos. A 5ª edição foi realizado na cidade de Belo Horizonte, Minas Gerais, Brasil.

  • 2016

  • Em 2016, a comunidade KDE completou seus 20 anos de existência, o LaKademy aconteceu no Rio de Janeiro, nas dependências da UNIRIO (Universidade Federal do Estado do Rio de Janeiro).

  • 2015

  • Em 2015 o LaKademy aconteceu em Salvador, Bahia, casa do Akademy-BR, do primeiro grupo brasileiro de desenvolvedores do KDE, chamado Live Blue, e terra dos Orixás!

  • 2014

  • A segunda edição do LaKademy ocorreu na cidade de São Paulo, entre os dias 27 e 30 de Agosto de 2014. O evento foi realizado no CCSL - Centro de Competência em Software Livre do Instituto de Matemática (IME) e Estatística da Universidade de São Paulo (USP), campus do Butantã.

  • 2012

  • A primeira edição do LaKademy aconteceu entre 27 de abril e 01 de maio de 2012. O evento foi realizado na cidade de Porto Alegre, no Rio Grande do Sul, Brasil. Participaram dessa edição colaboradores do Brasil, Argentina, Peru e Colômbia. Doze colaboradores veteranos se juntaram a seis novos colaboradores para trabalharem nos projetos da comunidade durante cinco dias.

-
-
-
-

Sobre

- -

- O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. -

- Saiba mais! -
-
-

Colabore

- -

- Se você deseja se tornar um(a) contribuidor(a) da nossa comunidade há muitas atividades com as quais você pode se envolver. -

- Saiba mais! -
-
-

Contate-nos

- -

Se você tem interesse em participar do LaKademy e contribuir com a comunidade KDE, entre em contato conosco.

- Saiba mais! +
+
+

Depoimentos

+
+
+ +

+ O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. +

+
+
+ +

+ O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. +

+
+
+ +

+ O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. +

+
-
+
-
-

Depoimentos

+
+
-
- +

- O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. + Mantido por KDE Brasil

-
-
-

- O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. + KDE® e logo do KDE são marcas registradas de KDE e.V.

-
- +
+

+ /lakademy +

+

+ /lakademy +

- O LaKademy é o encontro dos usuários e colaboradores latino-americanos da comunidade KDE. + /lakademy

-
- - - - \ No newline at end of file diff --git a/js/functions.js b/js/functions.js index fb65ed4..57125dd 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1,18 +1,36 @@ -/*Adiciona a classe para ativar a função de MediaQuery*/ +/*Adicione e remove a classe hide aos elementos que possuem a classe .navbar-item-collapse*/ function menuShow() { var items = document.getElementsByClassName("navbar-item-collapse"); for( i=0 ; i < items.length ; i++ ){ if (items[i].classList.contains("hide")) { items[i].classList.remove("hide") } else { items[i].classList.add("hide"); } } + + if( dropdownIsOpen() ){ + dropdownShow(); + } } -function scroll() { - var element = document.getElementById("sobre"); - console.log( element ) ; - window.scrollTo(element.offsetLeft, element.offsetTop); +/*Adicione e remove a classe hide aos elementos que possuem a classe .navbar-collapse-dropdown-item*/ +function dropdownShow() { + var items = document.getElementsByClassName("navbar-collapse-dropdown-item"); + + for (i = 0; i < items.length; i++) { + if (items[i].classList.contains("hide")) { + items[i].classList.remove("hide") + } else { + items[i].classList.add("hide"); + } + } +} + +function dropdownIsOpen(){ + var items = document.getElementsByClassName("navbar-collapse-dropdown-item"); + return !items[i].classList.contains("hide") ; } + + diff --git a/sobre.html b/sobre.html new file mode 100644 index 0000000..2642bc2 --- /dev/null +++ b/sobre.html @@ -0,0 +1,129 @@ + + + + + Sobre + + + + + + + +
+ + +

Latin America KDE Summit

+
+ +
+
+
+
+
+

+ O LaKademy ‒ Latin America KDE Summit ‒ é um encontro de usuários e colaboradores latino-americanos da comunidade KDE, uma + das maiores comunidades de software livre do mundo. +

+

+ O evento é realizado desde 2012 e foi um desdobramento do Akademy-Br, única edição do encontro de colaboradores brasileiros + do KDE, realizado em 2010. Após o Akademy-Br tornou-se evidente a importância de um encontro que integrasse não apenas brasileiros, + mas colaboradores de toda a América Latina. +

+

+ O principal objetivo do LaKademy, portanto, é promover encontros presenciais da comunidade latino-americana do KDE, possibilitando + um momento de imersão nos projetos da comunidade. O LaKademy pretende funcionar como uma espaço de: +

+
    +
  • Troca de ideias sobre projetos e iniciativas entre os diferentes membros da comunidade;
    • +
  • Sessões de hacking, nas quais os colaboradores colocam a mão na massa;
    • +
  • Planejamento de futuras ações para o KDE na América Latina e no mundo;
    • +
  • Apresentação do projeto para novos e potenciais colaboradores.
    • +
+
+
+

Doe para o Lakademy

+

+ Os projetos da comunidade KDE são produzidos e mantidos por voluntários de todo o mundo e estão disponíveis gratuitamente + para qualquer pessoa. A sua doação é importante para ajudar a manter o trabalho da comunidade. + Com ela nós cobrimos custos com servidores, encontros dos contribuidores, etc. A doação é uma + forma fácil, rápida e direta de apoiar a comunidade. +

+
+ Doar +
+ +
+
+
+
+
+ + + + + + + +