Download as
Browse Code »

Commit 2fa1132c4c37d06e8c2ea4a279dee606db5e6de4

Authored by Adabriand Furtado
1 parent 15d19ea5
Exists in master

Add a new layout to about page

Showing 19 changed files with 205 additions and 32 deletions   Show diff stats
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Black.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Bold.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-BoldItalic.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-ExtraLight.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-ExtraLightItalic.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Italic.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Light.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-LightItalic.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-Regular.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-SemiBold.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/fonts/titilliumweb/TitilliumWeb-SemiBoldItalic.ttf 0 → 100644
View file @2fa1132
No preview for this file type
pybossa/themes/default/static/css/theme.css
  Diff comments   View file @2fa1132
... ... @@ -9,8 +9,13 @@
9 9 }
10 10  
11 11 @font-face {
12   - font-family: 'Roboto';
13   - src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
  12 + font-family: 'Roboto Medium';
  13 + src: url('fonts/roboto/Roboto-Medium.ttf') format('truetype');
  14 +}
  15 +
  16 +@font-face {
  17 + font-family: 'Titillium Web Bold';
  18 + src: url('fonts/titilliumweb/TitilliumWeb-Bold.ttf') format('truetype');
14 19 }
15 20  
16 21 html {
... ... @@ -35,6 +40,12 @@ footer {
35 40 footer a {
36 41 color: white;
37 42 }
  43 +
  44 +.wl-footer-lavid-logo {
  45 + max-width: 112px;
  46 + width: 100%;
  47 +}
  48 +
38 49 @media (max-width: 768px) {
39 50 body {
40 51 margin: 0;
... ... @@ -446,3 +457,120 @@ h6 small {
446 457 vertical-align: middle;
447 458 line-height: 80px;
448 459 }
  460 +
  461 +/* About */
  462 +.no-padding {
  463 + padding: 0;
  464 +}
  465 +
  466 +.wl-balloon {
  467 + position: relative;
  468 + padding: 20px 50px 190px 50px;
  469 + background-repeat: no-repeat;
  470 + background-size: 100% 100%;
  471 +}
  472 +
  473 +.wl-balloon-content {
  474 + display: table-cell;
  475 + vertical-align: middle;
  476 + height: 262px;
  477 + text-align: center;
  478 + font-size: 14px;
  479 +}
  480 +
  481 +.wl-balloon-title-wrapper {
  482 + position: absolute;
  483 + bottom: 50px;
  484 + margin-left: 15px;
  485 +}
  486 +
  487 +.wl-balloon-number {
  488 + font-family: 'Titillium Web Bold';
  489 + font-size: 60px;
  490 + font-weight: bold;
  491 + letter-spacing: -3.2px;
  492 +}
  493 +
  494 +.wl-balloon-title {
  495 + font-family: 'Roboto Medium';
  496 + font-size: 18px;
  497 + padding-left: 70px;
  498 + padding-top: 37px;
  499 + line-height: 20px;
  500 +}
  501 +
  502 +.wl-balloon.-green {
  503 + margin-top: 20px;
  504 + background-image: url('../img/green-balloon.png');
  505 + z-index: 3;
  506 +}
  507 +
  508 +.wl-balloon.-green .wl-balloon-number {
  509 + color: #7ed17b;
  510 +}
  511 +
  512 +.wl-balloon.-green .wl-balloon-title {
  513 + color: #368232;
  514 +}
  515 +
  516 +.wl-balloon.-orange {
  517 + color: white;
  518 + padding-bottom: 210px;
  519 + background-image: url('../img/orange-balloon.png');
  520 + z-index: 2;
  521 +}
  522 +
  523 +.wl-balloon.-orange .wl-balloon-number {
  524 + color: #c87433;
  525 +}
  526 +
  527 +.wl-balloon.-orange .wl-balloon-title {
  528 + color: #8c4712;
  529 +}
  530 +
  531 +.wl-balloon.-blue {
  532 + color: white;
  533 + padding-bottom: 250px;
  534 + background-image: url('../img/blue-balloon.png');
  535 + z-index: 1;
  536 +}
  537 +
  538 +.wl-balloon.-blue .wl-balloon-number {
  539 + color: #4c96a6;
  540 +}
  541 +
  542 +.wl-balloon.-blue .wl-balloon-title {
  543 + color: #3a7f8e;
  544 +}
  545 +
  546 +.wl-about-illustration-responsive {
  547 + width: 200px;
  548 + margin-top: 25px;
  549 +}
  550 +
  551 +.wl-about-illustration {
  552 + display: none;
  553 + width: 200px;
  554 + margin-left: 68px;
  555 +}
  556 +
  557 +@media screen and (min-width: 992px) {
  558 + .wl-balloon.-green {
  559 + margin-right: -110px;
  560 + }
  561 + .wl-balloon.-orange {
  562 + margin-top: 220px;
  563 + margin-right: -110px;
  564 + }
  565 + .wl-balloon.-blue {
  566 + margin-top: 440px;
  567 + margin-right: -58px;
  568 + }
  569 + .wl-about-illustration {
  570 + display: block;
  571 + margin-top: 100px;
  572 + }
  573 + .wl-about-illustration-responsive {
  574 + display: none;
  575 + }
  576 +}
... ...
pybossa/themes/default/static/img/about-illustration.png 0 → 100644
View file @2fa1132

40.2 KB
pybossa/themes/default/static/img/blue-balloon.png 0 → 100644
View file @2fa1132

143 KB
pybossa/themes/default/static/img/green-balloon.png 0 → 100644
View file @2fa1132

38.1 KB
pybossa/themes/default/static/img/logo-lavid.png 0 → 100644
View file @2fa1132

40.3 KB
pybossa/themes/default/static/img/orange-balloon.png 0 → 100644
View file @2fa1132

155 KB
pybossa/themes/default/templates/_footer.html
  Diff comments   View file @2fa1132
... ... @@ -2,13 +2,16 @@
2 2 <div class="row">
3 3 <div class="col-sm-7">
4 4 <div class="row">
5   - <div class="col-xs-4 col-sm-3 col-sm-offset-1 text-center">
  5 + <div class="col-xs-3 text-center">
  6 + <a href="http://lavid.ufpb.br/"><img class="wl-footer-lavid-logo" src="{{url_for('static', filename='img/logo-lavid.png')}}"></a>
  7 + </div>
  8 + <div class="col-xs-3 text-center">
6 9 <a href="http://www.computacao.ufcg.edu.br/"><img src="{{url_for('static', filename='img/logocomp.png')}}" width="100%"></a>
7 10 </div>
8   - <div class="col-xs-4 col-sm-3 text-center">
  11 + <div class="col-xs-3 text-center">
9 12 <a href="http://www.lsd.ufcg.edu.br/"><img src="{{url_for('static', filename='img/logolsd.png')}}" width="100%"></a>
10 13 </div>
11   - <div class="col-xs-4 col-sm-3 text-center">
  14 + <div class="col-xs-3 text-center">
12 15 <a href="http://pybossa.com/"><img src="{{url_for('static', filename='img/pybossa.png')}}" width="100%"></a>
13 16 </div>
14 17 </div>
... ...
pybossa/themes/default/templates/home/_about.html
  Diff comments   View file @2fa1132
1   -<h2>COMO SURGIU?</h2>
2   -<p>
3   - O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
4   - dicionário de sinais utilizado pelo <a
5   - href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua de
6   - sinais é viva e novos sinais surgem diariamente. Para se criar um sinal
7   - utilizando um software de animação leva-se de duas a quatro horas de
8   - trabalho e, por esse motivo, surgiu a necessidade de através de alguns
9   - cliques conseguir criar uma nova animação.
10   -</p>
11   -<h2>COMO FUNCIONA?</h2>
12   -<p>De forma simples e intuitiva, o WikiLibras possibilita a
13   - submissão de vídeos gravados pelos usuários para cada novo sinal; a
14   - criação de animações com apenas alguns cliques; a
15   - avaliação de sinais criados por outros usuários na ferramenta e a
16   - correção das animações, através do download e submissão da animação
17   - corrigida em um software de modelagem.</p>
18   -<h2>POR QUE A SUA CONTRIBUIÇÃO É IMPORTANTE?</h2>
19   -<p>Os sinais produzidos pela comunidade WikiLibras terão diversas
20   - utilidades. Entre elas, a possibilidade de criar dicionários regionais
21   - de sinais. Ao enviar um novo vídeo de um sinal, o usuário também
22   - informa a região onde aquele sinal é sinalizado. Dessa forma, será
23   - possível agrupar essses novos sinais de acordo com a sua região.</p>
24   -<p>Outra utilidade é a contribuição da própria comunidade na criação
25   - do dicionário de sinais. Toda a população pode contribuir na melhoria
26   - do dicionário enviando novos vídeos, criando animações e avaliando
27   - sinais.</p>
28 1 \ No newline at end of file
  2 +<div class="row">
  3 + <div class="col-md-4 col-xs-12 no-padding">
  4 + <div class="row">
  5 + <div class="col-md-12 text-center">
  6 + <img class="wl-about-illustration-responsive" src="static/img/about-illustration.png">
  7 + </div>
  8 + <div class="col-md-12">
  9 + <div class="wl-balloon -green">
  10 + <div class="wl-balloon-content">
  11 + O <strong>WikiLibras</strong> surgiu da necessidade de expansão do
  12 + dicionário de sinais utilizado pelo <a
  13 + href="http://www.vlibras.gov.br/v2/">VLibras</a>, pois a língua
  14 + de sinais é viva e novos sinais surgem diariamente. Para se criar
  15 + um sinal utilizando um software de animação leva-se de duas a
  16 + quatro horas de trabalho e, por esse motivo, surgiu a necessidade
  17 + de através de alguns cliques conseguir criar uma nova animação.
  18 + </div>
  19 + <div class="wl-balloon-title-wrapper">
  20 + <div class="wl-balloon-number pull-left">01</div>
  21 + <div class="wl-balloon-title">
  22 + Surgimento e<br> motivação
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + <div class="col-md-12">
  28 + <img class="wl-about-illustration" src="static/img/about-illustration.png">
  29 + </div>
  30 + </div>
  31 + </div>
  32 + <div class="col-md-4 col-xs-12 no-padding">
  33 + <div class="wl-balloon -orange">
  34 + <div class="wl-balloon-content">
  35 + De forma simples e intuitiva, o <strong>WikiLibras</strong>
  36 + possibilita a submissão de vídeos gravados pelos usuários para cada
  37 + novo sinal; a criação de animações com apenas alguns cliques; a
  38 + avaliação de sinais criados por outros usuários na ferramenta e a
  39 + correção das animações, através do download e submissão da animação
  40 + corrigida em um software de modelagem.
  41 + </div>
  42 + <div class="wl-balloon-title-wrapper">
  43 + <div class="wl-balloon-number pull-left">02</div>
  44 + <div class="wl-balloon-title">
  45 + Detalhes do<br> WikiLibras
  46 + </div>
  47 + </div>
  48 + </div>
  49 + </div>
  50 + <div class="col-md-4 col-xs-12 no-padding">
  51 + <div class="wl-balloon -blue">
  52 + <div class="wl-balloon-content">
  53 + <strong>WikiLibras</strong> possui diversas utilidades.<br> Uma
  54 + delas é a possibilidade de criar dicionários regionais de sinais. Ao
  55 + enviar um novo vídeo de um sinal, o usuário também informa a região
  56 + onde aquele sinal é sinalizado. Dessa forma, será possível agrupar
  57 + essses novos sinais de acordo com a sua região. Outra utilidade é a
  58 + contribuição da própria comunidade na criação do dicionário de
  59 + sinais. Toda a população pode contribuir na melhoria do dicionário
  60 + enviando novos vídeos, criando animações e avaliando sinais.
  61 + </div>
  62 + <div class="wl-balloon-title-wrapper">
  63 + <div class="wl-balloon-number pull-left">03</div>
  64 + <div class="wl-balloon-title">
  65 + Utilidade do<br> WikiLibras
  66 + </div>
  67 + </div>
  68 + </div>
  69 + </div>
  70 +</div>
29 71 \ No newline at end of file
... ...