Style and Chapa Sigmóide

This commit is contained in:
Mateus Cezário Barreto 2025-11-13 23:28:04 -03:00
commit 718f412829
10 changed files with 611 additions and 90 deletions

16
app.rb
View file

@ -9,10 +9,22 @@ class TonTonWeb::App < Sinatra::Base
set :sessions, true set :sessions, true
get '/' do get '/' do
redirect "/readme.md" redirect "/home"
end
get '/home' do
markdown File.read("readme.md"), layout_engine: :erb, layout: true
end end
get '/:name' do get '/:name' do
markdown File.read(params['name']), layout_engine: :erb, layout: true markdown request.path_info.to_sym, layout_engine: :erb, layout: true
end
get '/chapa-sigmoide/readme' do
erb request.path_info.to_sym, layout_engine: :erb, layout: :chapa_sigmoide
end
get '/chapa-sigmoide/:name' do
markdown request.path_info.to_sym, layout_engine: :erb, layout: :chapa_sigmoide
end end
end end

View file

@ -1,3 +0,0 @@
# Chapa Sigmóide
Bençoe

View file

@ -0,0 +1,251 @@
/* Copyright (c) 2024-2025 Mateus Cezário Barreto */
@font-face
{
font-family: "Inconsolata";
src: url("Inconsolata-Regular.woff2") format("woff2");
}
:root, ::backdrop
{
--content-space-width: min(100vw, 100vh);
--empty-space-width: calc( 100vw - var(--content-space-width) );
--main-font: "Inconsolata";
--border-width: 0.1rem;
--color-background-1: #060e1e;
--color-background-faded: #212121ab;
--color-background-2: #060e1e;
--color-background-interactive: #ffb30029;
--color-text-normal: #dcdcdc;
--color-text-marked: #85e80c;
--color-text-shadowed: grey;
--color-clickable-normal: #85e80c;
--color-clickable-selected: #ffcd5b;
--color-border: #85e80c;
--color-border-hover: #bdbdbd;
}
html
{ scroll-behavior: smooth; }
html, body, :modal
{
margin: 0;
padding: 0;
width: 100%;
color: var(--color-text-normal);
background-color: var(--color-background-1);
font-family: var(--main-font);
font-size: 1.05rem;
}
header
{
background-color: var(--color-background-2);
border-color: var(--color-border);
border-bottom-style: solid;
border-bottom-width: var(--border-width);
text-align: center;
}
main, header { padding: 2rem calc( var(--empty-space-width) / 2 + 0.6rem ); }
div[name="main-navigation"]
{
display: flex;
justify-content: space-around;
}
dialog[open]
{
max-height: 90vh;
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
padding: 2vh 0;
width: calc( 100vw - var(--empty-space-width) );
}
ul
{
margin-left: 1rem;
border-left-style: solid;
border-left-width: var(--border-width);
border-left-color: var(--color-border);
}
figure, div, pre, math:not( p > math )
{
padding: 1rem;
margin-right: auto;
margin-left: auto;
height: auto;
max-width: 90%;
border-style: solid;
border-width: var(--border-width);
border-color: var(--color-border);
break-inside: avoid;
}
p > math { margin: 0; }
section
{
padding-left: 0.8rem;
border-left-style: solid;
border-left-width: 0.2rem;
border-left-color: var(--color-border);
}
div, pre, math
{
overflow-x: auto;
overflow-y: hidden;
text-wrap: nowrap;
}
div div
{
border-style: unset;
border-left-style: solid;
border-left-width: var(--border-width);
border-left-color: var(--color-border);
}
div:not( .line-break ) * { width: fit-content; }
div.line-break { text-wrap: auto; }
body, main, figure, div, section, p, h1
{
box-sizing: border-box;
}
img, video
{
max-height: 50vh;
max-width: 100%;
display: block;
}
figure { width: fit-content; padding: 0.8rem;}
mark, code, kbd, blockquote > *
{
color: var(--color-text-marked);
background-color: unset;
}
math { font-size: 1.4rem; }
p math { font-size: 1em; }
figcaption { color: var(--color-text-shadowed); }
a
{
font-family: inherit;
font-style: inherit;
font-size: inherit;
color: var(--color-clickable-normal);
background-color: unset;
border: unset;
text-decoration: none;
}
a:hover { color: var(--color-clickable-selected); }
div:not(:has(div:hover)):hover
{
border-color: var(--color-border-hover);
background-color: var(--color-background-2);
}
section:not(:has(section:hover)):hover, ul:not(:has(ul:hover)):hover
{
border-color: var(--color-border-hover);
}
@keyframes selectionColorChange
{
0% { background-color: var(--color-clickable-normal); }
50% { background-color: var(--color-clickable-selected); }
100% { background-color: var(--color-clickable-normal); }
}
button:enabled:hover, input[type="submit"]:enabled:hover, input[type="reset"]:enabled:hover, input[type="button"]:enabled:hover,
button:enabled:focus, input[type="submit"]:enabled:focus, input[type="reset"]:enabled:focus, input[type="button"]:enabled:focus
{
animation: selectionColorChange 1.8s infinite;
}
hr { color: var(--color-border); }
h1, h2, h3, h4, h5, h6, p:not( div > p )
{
overflow-x: auto;
line-height: 1.4em;
margin-top: 0;
}
div.line-break > p { overflow-x: auto; }
h1, h2, h3, h4, h5, h6
{
font-size: 1.4rem;
font-weight: bold;
margin: 0;
}
section { margin-top: 3rem; break-after: page; }
h1, h2, h3, h4, h5, h6, p, div, nav, li, ul, math, img, video { margin-bottom: 1.5rem; }
:last-child { margin-bottom: 0; }
:first-child { margin-top: 0; }
button, input[type="submit"], input[type="reset"], input[type="button"]
{
font-size: 1rem;
padding: 0.5rem;
border-width: 0px;
background-color: var(--color-clickable-normal);
color: var(--color-background-1);
text-decoration: none;
}
button svg {pointer-events:none;}
@media print
{
:root
{
--color-text-normal: #000000;
--color-clickable-normal: #003cc7;
}
h1, h2, h3, h4, h5, h6, p:not( div > p )
{
word-wrap: break-word;
}
#buttonShowDialogMain
{
display: none;
}
}

266
public/css/main.css Normal file
View file

@ -0,0 +1,266 @@
/* Copyright (c) 2024-2025 Mateus Cezário Barreto */
@font-face
{
font-family: "Inconsolata";
src: url("Inconsolata-Regular.woff2") format("woff2");
}
:root, ::backdrop
{
--content-space-width: min(100vw, 100vh);
--empty-space-width: calc( 100vw - var(--content-space-width) );
--main-font: "Inconsolata";
--border-width: 0.1rem;
--color-background-1: #212121;
--color-background-faded: #212121ab;
--color-background-2: #2b2b2b;
--color-background-interactive: #ffb30029;
--color-text-normal: #dcdcdc;
--color-text-marked: #14bb00;
--color-text-shadowed: grey;
--color-clickable-normal: #ffb300;
--color-clickable-selected: #ffcd5b;
--color-border: #54545494;
--color-border-hover: #bdbdbd;
}
::backdrop { background-color: var( --color-background-faded ); }
html { scroll-behavior: smooth; }
html, body, :modal
{
margin: 0;
padding: 0;
width: 100%;
color: var(--color-text-normal);
background-color: var(--color-background-1);
font-family: var(--main-font);
font-size: 1.05rem;
}
header
{
background-color: var(--color-background-2);
border-color: var(--color-border);
border-bottom-style: solid;
border-bottom-width: var(--border-width);
text-align: center;
}
main, header { padding: 2rem calc( var(--empty-space-width) / 2 + 0.6rem ); }
div[name="main-navigation"]
{
display: flex;
justify-content: space-around;
}
dialog[open]
{
max-height: 90vh;
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
padding: 2vh 0;
width: calc( 100vw - var(--empty-space-width) );
}
ul
{
margin-left: 1rem;
border-left-style: solid;
border-left-width: var(--border-width);
border-left-color: var(--color-border);
}
figure, div, pre, math:not( p > math )
{
padding: 1rem;
margin-right: auto;
margin-left: auto;
height: auto;
max-width: 90%;
border-style: solid;
border-width: var(--border-width);
border-color: var(--color-border);
break-inside: avoid;
}
p > math { margin: 0; }
section
{
padding-left: 0.8rem;
border-left-style: solid;
border-left-width: 0.2rem;
border-left-color: var(--color-border);
}
div, pre, math
{
overflow-x: auto;
overflow-y: hidden;
text-wrap: nowrap;
}
div div
{
border-style: unset;
border-left-style: solid;
border-left-width: var(--border-width);
border-left-color: var(--color-border);
}
div:not( .line-break ) * { width: fit-content; }
div.line-break { text-wrap: auto; }
body, main, figure, div, section, p, h1
{
box-sizing: border-box;
}
img, video
{
max-height: 50vh;
max-width: 100%;
display: block;
}
figure { width: fit-content; padding: 0.8rem;}
mark, code, kbd, blockquote > *
{
color: var(--color-text-marked);
background-color: unset;
}
math { font-size: 1.4rem; }
p math { font-size: 1em; }
figcaption { color: var(--color-text-shadowed); }
a, button.link-to-section
{
font-family: inherit;
font-style: inherit;
font-size: inherit;
color: var(--color-clickable-normal);
background-color: unset;
border: unset;
text-decoration: none;
}
a:hover { color: var(--color-clickable-selected); }
div:not(:has(div:hover)):hover
{
border-color: var(--color-border-hover);
background-color: var(--color-background-2);
}
section:not(:has(section:hover)):hover, ul:not(:has(ul:hover)):hover
{
border-color: var(--color-border-hover);
}
@keyframes selectionColorChange
{
0% { background-color: var(--color-clickable-normal); }
50% { background-color: var(--color-clickable-selected); }
100% { background-color: var(--color-clickable-normal); }
}
button:enabled:hover, input[type="submit"]:enabled:hover, input[type="reset"]:enabled:hover, input[type="button"]:enabled:hover,
button:enabled:focus, input[type="submit"]:enabled:focus, input[type="reset"]:enabled:focus, input[type="button"]:enabled:focus
{
animation: selectionColorChange 1.8s infinite;
}
hr { color: var(--color-border); }
h1, h2, h3, h4, h5, h6, p:not( div > p )
{
overflow-x: auto;
line-height: 1.4em;
margin-top: 0;
}
div.line-break > p { overflow-x: auto; }
h1, h2, h3, h4, h5, h6
{
font-size: 1.4rem;
font-weight: bold;
margin: 0;
}
section { margin-top: 3rem; break-after: page; }
h1, h2, h3, h4, h5, h6, p, div, nav, li, ul, math, img, video { margin-bottom: 1.5rem; }
:last-child { margin-bottom: 0; }
:first-child { margin-top: 0; }
button, input[type="submit"], input[type="reset"], input[type="button"]
{
font-size: 1rem;
padding: 0.5rem;
border-width: 0px;
background-color: var(--color-clickable-normal);
color: var(--color-background-1);
text-decoration: none;
}
#buttonShowDialogMain
{
margin: 0.8rem;
position: fixed;
bottom: 0.8rem;
width: 2.6rem;
}
button svg {pointer-events:none;}
input.viewSelector
{
font-weight: bold;
margin: 0;
}
@media print
{
:root
{
--color-text-normal: #000000;
--color-clickable-normal: #003cc7;
}
h1, h2, h3, h4, h5, h6, p:not( div > p )
{
word-wrap: break-word;
}
#buttonShowDialogMain
{
display: none;
}
}

View file

@ -1,83 +1,2 @@
# TonTon # TonTon Ciência da Computação UFPA
TonTon é uma antologia de softwares abertos, modulares e relacionados com tecnologia na educação e com aprendizado colaborativo. Esse repositório contém a aplicação web principal. <(^_^)>
O Ruby on Rails foi substituido pelo Sinatra. (⌐■_■)
As aplicações terão APIs para facilitar interfaces alternativas. Monte o seu TonTon. ( ͡° ᴥ ͡°)
[Building](building.md)
[Q&A](QA.md)
## TonTonWeb
Aplicação web principal, em Ruby, com um mecanismo de controle de usuários.
O gerenciamento é feito via linha de comando (utilitário tauth) e interface web.
O serviços são expostos via:
- API Ruby via Rack (para ser usada pela interface interna).
- API web (para ser usada por interfaces que não são escritas em Ruby).
O TonTonWeb tem uma versão [experimental](https://github.com/seruna-1/tonton) em Ruby on Rails, agora arquivada. (◡_◡)
Status: sem mecanismo de autenticação.
## TonTon-Gollum (wiki)
Uma extensão simples da wiki Gollum para suportar autenticação de usuário.
Status: testável.
Funcionalidades esperadas:
- Subdiretórios dos usuários editáveis apenas pelo próprio usuário.
## Tolls
Tonton Polls.
Aplicação Sinatra para gerenciamento de enquetes.
Status: não iniciado.
## Tofinn
Tokenizable File Interface.
Toffin é um modelo genérico de árvore de arquivos tokenizáveis e com um modelo integrado opcional de versionamento de arquivos.
Status: concepção. Duas implementações esperadas, uma em C (Coffin) e outra em Ruby (Torfinn). Há uma versão [experimental](https://github.com/seruna-1/toffin), em Ruby, abandonada.
## Totoki
Totoki é o plano de wiki futura para o TonTon usando a API do Toffin.
Totoki é inspirada pelo Gollum. Assim como o Gollum lida com frontend e tem a própria API separada (gollum-lib), o Totoki será a aplicação Sinatra com API wiki separada (totoki-lib).
Status: não iniciado.
## Tamire
TonTon Abstract Mathematical Introspective Representation (Tamire).
Tamire é uma biblioteca de para abstração de linguagem matemática em estruturas de objetos.
Teria duas implementações, uma em Ruby e outra em Javascript, cada uma com:
- Leitura de Asciimath para entrada.
- Renderização em SVG para saída.
- Representação em Json para entrada e saída.
Status: não iniciado.
## Tamires
Tamire Speaker (Tamires) é um módulo Javascript e uma aplicação Ruby para análise por pessoas cegas de estrutura matemática gerada pela Tamire.
Status: não iniciado.

View file

@ -0,0 +1,7 @@
# Leonardo Brito (Secretário Geral)
"Com grandes poderes vem grandes responsabilidades " , nunca havia entendido isso porque pra mim bastava que Peter tivesse poderes irados e batesse nos vilões, porque isso é oque faz um herói, o espetáculo.
Até que um dia eu vi a cena em que Peter sem poderes entra num prédio em chamas para salvar um desconhecido, lembrando que no segundo filme ele perde os poderes temporariamente.
Então eu percebi que o grande poder de Peter não era escalar paredes, mas poder fazer algo de bom pra alguém, e sua grande responsabilidade era fazer isso sua missão de vida , com ou sem máscara. Por isso eu nunca quis ser como o homem aranha, mas como Peter Parker. Ainda não sou , mas um dia eu chego lá.

View file

@ -0,0 +1,3 @@
# Mateus Cezário Barreto (Presidente)
Salve

View file

@ -0,0 +1,27 @@
<h1>Chapa Sigmóide</h1>
<p>Gregor Samsa</p>
<div>
<p><a href="mateus">Presidente</a></p>
</div>
<div>
<p><a href="lucas">Vice-Presidente</a></p>
</div>
<div>
<p><a href="leonardo">Secretário Geral</a></p>
</div>
<div>
<p><a href="davi">1º Secretário</a></p>
</div>
<div>
<p><a href="yuri">Tesoureiro Geral</a></p>
</div>
<div>
<p><a href="henrique">1º Tesoureiro</a></p>
</div>

33
views/chapa_sigmoide.erb Normal file
View file

@ -0,0 +1,33 @@
<html>
<head>
<title>Chapa Sigmóide</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/chapa_sigmoide.css">
</head>
<body>
<header>
<nav>
<a href="/readme.md">Início</a>
<a href="/chapa-sigmoide/readme.md">Chapa Sigmóide</a>
</nav>
</header>
<main>
<%= yield %>
</main>
</body>
<script>
const title = document.querySelector('title');
const h1 = document.querySelector('h1');
title.textContent = h1.textContent;
title.textContent = document.querySelector('header').append(h1);
</script>
</html>

View file

@ -1,6 +1,10 @@
<html> <html>
<head> <head>
<title>TonTon</title> <title>TonTon</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head> </head>
<body> <body>
@ -8,15 +12,17 @@
<nav> <nav>
<a href="/readme.md">Readme</a> <a href="/readme.md">Readme</a>
<a href="/chapa-sigmoide.md">Chapa Sigmóide</a> <a href="/chapa-sigmoide/readme">Chapa Sigmóide</a>
<a href="/building.md">Building</a> <a href="/building.md">Building</a>
<a href="/QA.md">Q&A</a> <a href="/QA.md">Q&A</a>
</nav> </nav>
<header> </header>
<%= yield %> <main>
<%= yield %>
</main>
</body> </body>
<script> <script>