From 718f412829e0ca84ab9838d6ef6675a5c8d024a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateus=20Cez=C3=A1rio=20Barreto?= Date: Thu, 13 Nov 2025 23:28:04 -0300 Subject: [PATCH] =?UTF-8?q?Style=20and=20Chapa=20Sigm=C3=B3ide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.rb | 16 +- chapa-sigmoide.md | 3 - public/css/chapa_sigmoide.css | 251 +++++++++++++++++++++++ public/css/main.css | 266 +++++++++++++++++++++++++ readme.md | 83 +------- views/chapa-sigmoide/leonardo.markdown | 7 + views/chapa-sigmoide/mateus.markdown | 3 + views/chapa-sigmoide/readme.erb | 27 +++ views/chapa_sigmoide.erb | 33 +++ views/layout.erb | 12 +- 10 files changed, 611 insertions(+), 90 deletions(-) delete mode 100644 chapa-sigmoide.md create mode 100644 public/css/chapa_sigmoide.css create mode 100644 public/css/main.css create mode 100644 views/chapa-sigmoide/leonardo.markdown create mode 100644 views/chapa-sigmoide/mateus.markdown create mode 100644 views/chapa-sigmoide/readme.erb create mode 100644 views/chapa_sigmoide.erb diff --git a/app.rb b/app.rb index e5c6f29..100a814 100644 --- a/app.rb +++ b/app.rb @@ -9,10 +9,22 @@ class TonTonWeb::App < Sinatra::Base set :sessions, true get '/' do - redirect "/readme.md" + redirect "/home" + end + + get '/home' do + markdown File.read("readme.md"), layout_engine: :erb, layout: true end 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 \ No newline at end of file diff --git a/chapa-sigmoide.md b/chapa-sigmoide.md deleted file mode 100644 index f7cce73..0000000 --- a/chapa-sigmoide.md +++ /dev/null @@ -1,3 +0,0 @@ -# Chapa Sigmóide - -Bençoe \ No newline at end of file diff --git a/public/css/chapa_sigmoide.css b/public/css/chapa_sigmoide.css new file mode 100644 index 0000000..93568b2 --- /dev/null +++ b/public/css/chapa_sigmoide.css @@ -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; + } +} \ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..4f3cb4a --- /dev/null +++ b/public/css/main.css @@ -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; + } +} \ No newline at end of file diff --git a/readme.md b/readme.md index 94b44eb..c3505e0 100644 --- a/readme.md +++ b/readme.md @@ -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. \ No newline at end of file diff --git a/views/chapa-sigmoide/leonardo.markdown b/views/chapa-sigmoide/leonardo.markdown new file mode 100644 index 0000000..3b387f1 --- /dev/null +++ b/views/chapa-sigmoide/leonardo.markdown @@ -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á. \ No newline at end of file diff --git a/views/chapa-sigmoide/mateus.markdown b/views/chapa-sigmoide/mateus.markdown new file mode 100644 index 0000000..557a1a0 --- /dev/null +++ b/views/chapa-sigmoide/mateus.markdown @@ -0,0 +1,3 @@ +# Mateus Cezário Barreto (Presidente) + +Salve \ No newline at end of file diff --git a/views/chapa-sigmoide/readme.erb b/views/chapa-sigmoide/readme.erb new file mode 100644 index 0000000..3d6a4f0 --- /dev/null +++ b/views/chapa-sigmoide/readme.erb @@ -0,0 +1,27 @@ +

Chapa Sigmóide

+ +

Gregor Samsa

+ +
+

Presidente

+
+ +
+

Vice-Presidente

+
+ +
+

Secretário Geral

+
+ +
+

1º Secretário

+
+ +
+

Tesoureiro Geral

+
+ +
+

1º Tesoureiro

+
\ No newline at end of file diff --git a/views/chapa_sigmoide.erb b/views/chapa_sigmoide.erb new file mode 100644 index 0000000..9134e95 --- /dev/null +++ b/views/chapa_sigmoide.erb @@ -0,0 +1,33 @@ + + + Chapa Sigmóide + + + + + + + +
+ +
+ +
+ <%= yield %> +
+ + + + \ No newline at end of file diff --git a/views/layout.erb b/views/layout.erb index fa1498d..5c392ad 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -1,6 +1,10 @@ TonTon + + + + @@ -8,15 +12,17 @@ -
+
- <%= yield %> +
+ <%= yield %> +