Commit a404e1da authored by Rafael Peretti Pezzi's avatar Rafael Peretti Pezzi

Primeira versão do novo site do CTA

parents
This diff is collapsed.
# Site do Centro de Tecnologia Acadêmêmica
Este site foi criado utilizando como base o tema [Creative](https://github.com/volny/creative-theme-jekyll) para o Jekyll.
# Site settings
title: Centro de Tecnologia Acadêmica
email:
description: Tecnologias Livres e Abertas > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog/
url: "" # the base hostname & protocol for your site
twitter_username:
github_username:
# Build settings
markdown: kramdown
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<h2>Alguns dos nossos projetos!</h2>
<a href="http://cta.if.ufrgs.br/projects" class="btn btn-default btn-xl wow tada">Lista completa</a>
</div>
</div>
</aside>
<section id="canais">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Nossos principais canais</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-git-square wow bounceIn text-primary"></i>
<h3>Repositórios git</h3>
<p class="text-muted">Muitos dos nossos projetos são mantidos em repositórios git. O CTA conta com uma <a href="https://git.cta.if.ufrgs.br/explore/projects">instalação do GitLab!</a></p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-lightbulb-o wow bounceIn text-primary" data-wow-delay=".3s"></i>
<h3>Gestão de projetos</h3>
<p class="text-muted">Utilizamos o Chiliproject para organizar os projetos do CTA. Cada projeto tem Wiki, Fórum, Arquivos, entre outros.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-group wow bounceIn text-primary" data-wow-delay=".5s"></i>
<h3>Forums</h3>
<p class="text-muted">Fóruns para discussões e registros das atividades. Veja os registros dos nossos <a href="http://cta.if.ufrgs.br/projects/suporte-cta/boards/7">Encontros Periódicos.</a></p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-comments-o wow bounceIn text-primary" data-wow-delay=".9s"></i>
<h3>Listas de Discussão</h3>
<p class="text-muted">Também utilizamos listas de discussões por e-mail. <a href="http://cta.if.ufrgs.br/projects/suporte-cta/wiki/Perguntas_Frequentes#Como-participar-das-listas-de-e-mails-do-CTA">Conheça nossas listas.</a></p>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Entre em contato!</h2>
<hr class="primary">
<p>Quer conversar? Entre em contato pelo nosso fórum, pela nossa lista de discussão ou apareça para tomar um café!</p>
</div>
<div class="col-lg-2 col-lg-offset-2 text-center">
<a href="http://cta.if.ufrgs.br/projects/suporte-cta/boards">
<i class="fa fa-forumbee fa-3x wow bounceIn" data-wow-delay=".3s"></i>
<p>Fóruns de Suporte CTA</p>
</a>
<p>Ei... os projetos podem ter fóruns separados. Fique atente!</p>
</div>
<div class="col-lg-2 col-lg-offset-1 text-center">
<a href="http://cta.if.ufrgs.br/projects/suporte-cta/wiki/Perguntas_Frequentes#Como-participar-das-listas-de-e-mails-do-CTA">
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".2s"></i>
<p>Listas de e-mail</p>
</a>
<p>Se está recém chegando e quer saber mais, se cadastre na <a href="http://grupos.ufrgs.br/mailman/listinfo/fis_cta_adm-l">lista geral do CTA - [cta_adm-l]</a> e dê um alô.</p>
</div>
<div class="col-lg-2 col-lg-offset-1 text-center">
<a href="http://osm.org/go/M5uNbFBbB?layers=N&m=">
<i class="fa fa-coffee fa-3x wow bounceIn" data-wow-delay=".1s"></i>
<p>Apareça no CTA para dar um alô.</p>
</a>
<p>O CTA fica na sala 110 do Prédio 43132 do Campus do Vale da UFRGS.</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<i class="fa fa-3x fa-phone wow bounceIn text-primary" data-wow-delay=".3s"></i>
<p>(51) 3308 6553</p>
</div>
</div>
</section>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>O Centro de Tecnologia Acadêmica -- IF/UFRGS</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Centro de Tecnologia Acadêmica</h1>
<hr>
<h3>Novos paradigmas da criação, uso e disseminação do conhecimento.</h3>
<p><i class="fa fa-4x fa-unlock wow bounceIn text-primary" data-wow-delay=".3s"></i></p>
<a href="#sobre" class="btn btn-primary btn-xl page-scroll">Saiba mais</a>
</div>
</div>
</header>
<section class="bg-primary" id="sobre">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Liberdade do conhecimento!</h2>
<hr class="light">
<p class="text-faded">O Centro de Tecnologia Acadêmica do Instituto de Física da UFRGS busca desenvolver e aplicar todas as formas de conhecimento livre e aberto. Tem atuado no desenvolvimento de instrumentos científicos educacionais utilizando o conceito de hiperobjetos. Faz isso utilizando software livre e disponibilizando toda a sua criação em repositório público sob os termos de licenças permissivas. </p>
<a href="#principios" class="btn btn-default btn-xl page-scroll">Mais sobre o CTA</a>
<a href="#projetos" class="btn btn-default btn-xl page-scroll">Conheça Alguns Projetos!</a>
</div>
</div>
</div>
</section>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">CTA - IF/UFRGS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#sobre">Sobre</a>
</li>
<li>
<a class="page-scroll" href="#principios">Princípios</a>
</li>
<li>
<a class="page-scroll" href="#projetos">Projetos</a>
</li>
<li>
<a class="page-scroll" href="#canais">Canais</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="principios">
<div class="container">
<center><img src="img/LogoCTA_2015b.png" class="img-responsive" alt=""></center>
<p></p>
<div class="row">
<div class="col-lg-12 text-center">
<i class="fa fa-4x fa-heart wow bounceIn text-primary" data-wow-delay=".3s"></i>
<h2 class="section-heading">Nossos princípios</h2>
<hr class="primary">
<p class="text-muted">Fazemos o que fazemos pois acreditamos que podemos melhorar o mundo refletindo sobre e ampliando o acesso ao conhecimento científico, tecnológico e educacional. Para saber mais sobre o que nos move, leia o artigo <a href="http://www.if.ufrgs.br/~pezzi/CA2015/index.html">O Centro de Tecnologia Acadêmica: princípios e perspectivas.</a></p>
<a href="#projetos" class="btn btn-primary btn-xl page-scroll">Agora me mostre uns projetos!</a>
</div>
</div>
</div>
</section>
<section class="no-padding" id="projetos">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/estacao-meteorologica-modular/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/emm.png" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-flask fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Ciência Cidadã
</div>
<div class="project-name">
Estações Meteorológicas Modulares
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/fresadora-pci-joao-de-barro/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/jb.jpg" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-cogs fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Infraestrutura pra expansão do conhecimento
</div>
<div class="project-name">
A Bancada dos Hiperobjetos
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/estacao-de-espectrometria/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/espectrometria.jpg" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-flask fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Instrumentação científica
</div>
<div class="project-name">
Estação de espectrometria
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/shield-galileu-e-aplicacoes/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/galileu.jpg" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-book fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Instrumentação de ensino
</div>
<div class="project-name">
Shield Galileu
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/shield-ai/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/AI.png" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-flask fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<i class="fa fa-book fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Instrumentação científica e de ensino
</div>
<div class="project-name">
Shield Amplificador de Instrumentação
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/fisiolog/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/fisiolog.png" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-heartbeat fa-2x wow bounceIn" data-wow-delay=".5s"></i>
<div class="project-category text-faded">
Instrumentação Biomédica
</div>
<div class="project-name">
Estação Fisiolog
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="http://cta.if.ufrgs.br/projects/tropos/wiki/Wiki" class="portfolio-box">
<center><img src="img/projetos/tropos.png" class="img-responsive" alt=""></center>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<i class="fa fa-linux fa-2x wow bounceIn" data-wow-delay=".2s"></i>
<div class="project-category text-faded">
Infraestrutura
</div>
<div class="project-name">
TropOS - O Sistema Operacional Portátil
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<aside class="bg-dark">
<div class="container text-center">
<div class="call-to-action">
<a href="http://cta.if.ufrgs.br/projects" class="btn btn-default btn-xl wow tada">Lista completa de projetos</a>
</div>
</div>
</aside>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body id="page-top">
{% include nav.html %}
{% include header.html %}
{% include liberdade.html %}
{% include principios.html %}
{% include projetos.html %}
{% include canais.html %}
{% include contato.html %}
{% include scripts.html %}
</body>
</html>
html,
body {
height: 100%;
width: 100%;
}
body {
@include serif-font;
}
hr {
border-color: $theme-primary;
border-width: 3px;
max-width: 50px;
}
hr.light {
border-color: white;
}
a {
@include transition-all;
color: $theme-primary;
&:hover,
&:focus {
color: darken($theme-primary, 10%);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
@include sans-serif-font;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.bg-primary {
background-color: $theme-primary;
}
.bg-dark {
background-color: $theme-dark;
color: white;
}
.text-faded {
color: rgba(white, .7);
}
section {
padding: 100px 0;
}
aside {
padding: 50px 0;
}
.no-padding {
padding: 0;
}
// Navigation
.navbar-default {
background-color: white;
border-color: rgba($theme-dark, .5);
@include sans-serif-font;
@include transition-all;
.navbar-header .navbar-brand {
color: $theme-primary;
@include sans-serif-font;
font-weight: 700;
text-transform: uppercase;
&:hover,
&:focus {
color: darken($theme-primary, 10%);
}
}
.nav {
> li {
> a,
> a:focus {
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $theme-dark;
&:hover {
color: $theme-primary;
}
}
&.active {
> a,
> a:focus {
color: $theme-primary !important;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
}
}
}
@media (min-width: 768px) {
background-color: transparent;
border-color: rgba(white, .3);
.navbar-header .navbar-brand {
color: rgba(white, .7);
&:hover,
&:focus {
color: white;
}
}
.nav > li > a,
.nav > li > a:focus {
color: rgba(white, .7);
&:hover {
color: white;
}
}
&.affix {
background-color: white;
border-color: rgba($theme-dark, .5);
.navbar-header .navbar-brand {
color: $theme-primary;
font-size: 14px;
&:hover,
&:focus {
color: darken($theme-primary, 10%);
}
}
.nav > li > a,
.nav > li > a:focus {
color: $theme-dark;
&:hover {
color: $theme-primary;
}
}
}
}
}
// Homepage Header
header {
position: relative;
width: 100%;
min-height: auto;
@include background-cover;
background-position: center;
background-image: url('../img/Triangulos_CTA_ladrilho.jpg');
text-align: center;
color: white;
.header-content {
position: relative;
text-align: center;
padding: 100px 15px 100px;
width: 100%;
.header-content-inner {
h1 {
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
hr {
margin: 30px auto;
}
p {
font-weight: 300;
color: rgba(white, .7);
font-size: 16px;
margin-bottom: 50px;
}
}
}
@media (min-width: 768px) {
min-height: 100%;
.header-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 50px;
.header-content-inner {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
p {
font-size: 18px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
}
}
}
}
// Sections
.section-heading {
margin-top: 0;
}
.service-box {
max-width: 400px;
margin: 50px auto 0;
@media (min-width: 992px) {
margin: 20px auto 0;
}
p {
margin-bottom: 0;
}
}
.portfolio-box {
position: relative;
display: block;
max-width: 650px;
margin: 0 auto;
.portfolio-box-caption {
color: white;
opacity: 0;
display: block;
background: rgba( $theme-primary, .9 );
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 100%;
@include transition-all;
.portfolio-box-caption-content {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
.project-category,
.project-name {
@include sans-serif-font;
padding: 0 15px;
}
.project-category {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}
.project-name {
font-size: 18px;
}
}
}
&:hover {
.portfolio-box-caption {
opacity: 1;
}
}
@media (min-width: 768px) {
.portfolio-box-caption {
.portfolio-box-caption-content {
.project-category {
font-size: 16px;
}
.project-name {
font-size: 22px;
}
}
}
}
}
.call-to-action {
h2 {
margin: 0 auto 20px;
}
}
// Bootstrap Overrides
.text-primary {
color: $theme-primary;
}
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
// Button Styles
.btn-default {
@include button-variant($theme-dark, white, white);
}
.btn-primary {
@include button-variant(white, $theme-primary, $theme-primary);
}