Remodelation of style and new information in Chapa Sigmóide

public/css/chapa_sigmoide.css

@@ -14,7 +14,9 @@
 
 	--main-font: "Victor Mono";
 
-	--border-width: 0.1rem;
+	--border-width: 0.6vw;
+
+	--default-distance: min(1vw, 1vh);
 
 	--color-background-1: #060e1e;
 
@@ -50,7 +52,7 @@ html, body, :modal
 	color: var(--color-text-normal);
 	background-color: var(--color-background-1);
 	font-family: var(--main-font);
-	font-size: 1.05rem;
+	font-size: 1rem;
 }
 
 header
@@ -144,7 +146,7 @@ img, video
 
 figure { width: fit-content; padding: 0.8rem;}
 
-mark, code, kbd, blockquote > *
+strong, mark, code, kbd, blockquote > *
 {
 	color: var(--color-text-marked);
 	background-color: unset;
@@ -154,7 +156,7 @@ math { font-size: 1.4rem; }
 
 p math { font-size: 1em; }
 
-figcaption { color: var(--color-text-shadowed); }
+figcaption, p.shadowed { color: var(--color-text-shadowed); }
 
 a
 {
@@ -236,34 +238,41 @@ div.ficha
 {
 	display: grid;
 	grid-template-rows: auto auto;
-	grid-template-columns: 35% auto;
+	grid-template-columns: max(60%) minmax(40%, 60%);
-	column-gap: 0;
 	width: 100%;
 	max-width: unset;
 	text-wrap: unset;
+	padding: var(--default-distance);
 }
 
-div.ficha h2
+div.ficha div.names
 {
 	grid-row: 1;
-	grid-column: 1 / 3;
+	grid-column: 1;
+	border: 0;
+	overflow-wrap: break-word;
+	overflow: unset;
+	text-wrap: unset;
+	padding: var(--default-distance);
+	width: 100%;
 }
 
 div.ficha figure
 {
-	grid-row: 2;
+	grid-row: 1;
-	grid-column: 1;
+	grid-column: 2;
+	justify-self: end;
 	margin: 0;
-	max-width: 100%;
+	width: 100%;
 	height: fit-content;
 	text-align: center;
 	position: relative;
-	padding: 0.6rem;
+	padding: 0;
 }
 
 div.ficha figure img
 {
-	margin-bottom: 0.5rem;
+	margin: 0;
 	aspect-ratio: 3 / 4;
 	animation-name: image-change;
 	animation-timing-function: ease-in-out;
@@ -271,21 +280,17 @@ div.ficha figure img
 	animation-duration: 10s;
 }
 
-div.ficha figure figcaption
-{
-	margin: auto;
-}
-
 div.ficha div.description
 {
 	grid-row: 2;
-	grid-column: 2;
+	grid-column: 1 / 3;
 	max-width: unset;
 	border: unset;
 	width: 100%;
 	overflow-wrap: break-word;
 	overflow: unset;
 	text-wrap: unset;
+	padding: var(--default-distance);
 }
 
 @keyframes image-change

views/chapa-sigmoide/henrique.markdown

@@ -0,0 +1,8 @@
+​"Se você não gosta do seu destino, não o aceite. Em vez disso, tenha a coragem de mudá-lo do jeito que você quer que ele seja."
+​— Naruto Uzumaki
+
+Nas horas vagas, sou um entusiasta dedicado ao universo do entretenimento digital: gosto de mergulhar nas histórias de animes e manhwa, além de passar o tempo em games e na imersão dos mundos de RPG.
+
+​Ja academicamente , estou atualmente no 2º semestre e tenho um forte interesse em Cibersegurança e curiosidades tecnológicas. Estou sempre em busca de novos conhecimentos para me aprofundar neste campo em constante evolução.
+
+​Acredito que, para alcançarmos um futuro melhor, a iniciativa de mudança deve ser tomada no presente. Por isso, tenho como  filosofia de vida, que ao invés de ficar sentado esperando que algo mude, ir la e ajudar na mudança.

views/chapa-sigmoide/joao.markdown

@@ -0,0 +1 @@
+"Ele adora carregar livros"

views/chapa-sigmoide/readme.erb

@@ -3,128 +3,144 @@
 <p>Gregor Samsa</p>
 
 <div class="ficha">
-	<h2>Presidente</h2>
+	<div class="names">
+		<p><strong>Presidente</strong></p>
+
+		<p>Mateus Cezário Barreto</p>
+
+		<p class="shadowed">seruna@artix</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/mateus.jpg">
 
 		<img src="/chapa-sigmoide/mateus-avatar.png"/>
-
-		<figcaption>seruna@artix</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: Mateus Cezário Barreto</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>Ano de nascimento: 2005</p>
+		<p><strong>Gosta de:</strong> programação, Linux, código aberto, Hollow Knight, Undertale, Deltarune, Chuunibyo.</p>
-		<p>Interesses: Linux</p>
+
 		<p><a href="mateus">Mais</a></p>
 	</div>
 </div>
 
 <div class="ficha">
-	<h2>Vice-Presidente</h2>
+	<div class="names">
+		<p><strong>Vice-Presidente</strong></p>
+
+		<p>Lucas Santos Diniz</p>
+
+		<p class="shadowed">zost@arch</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/lucas.jpg"/>
 
 		<img src="/chapa-sigmoide/lucas-avatar.jpg"/>
-
-		<figcaption>zost@arch</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: Lucas Santos Diniz</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>Ano de nascimento:</p>
+		<p><strong>Gosta de:</strong> tecnologia, estudar, séries, filmes, jogos, desenhos.</p>
-		<p>Interesses:</p>
+
 		<p><a href="lucas">Mais</a></p>
 	</div>
 </div>
 
-
-
 <div class="ficha">
-	<h2>Secretário Geral</h2>
+	<div class="names">
+		<p><strong>Secretário Geral</strong></p>
+
+		<p>Leonardo Brito da Conceição</p>
+
+		<p class="shadowed">kfk@garuda</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/leonardo.jpg"/>
 
 		<img src="/chapa-sigmoide/leonardo-avatar.jpg"/>
-
-		<figcaption>kfk@garuda</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: Leonardo Brito da Conceição</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>Ano de nascimento:</p>
+		<p><strong>Gosta de:</strong> design em geral, filmes e  quadrinhos.</p>
-		<p>Interesses: Design em geral , Filmes e  Quadrinhos</p>
+
 		<p><a href="leonardo">Mais</a></p>
 	</div>
 </div>
 
-
-
 <div class="ficha">
-	<h2>1° Secretário</h2>
+	<div class="names">
+		<p><strong>1º Secretário</strong></p>
+
+		<p>João Davi Costa de Souza</p>
+
+		<p class="shadowed">jd@arch</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/joao.jpg"/>
 
-		<img src="/chapa-sigmoide/joao-avatar.jpg/>
+		<img src="/chapa-sigmoide/joao-avatar.jpg"/>
-
-		<figcaption>jd@arch</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: João Davi Costa de Souza</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>Interesses:Engenharia de Software e Sistemas Operacionais</p>
+		<p><strong>Gosta de:</strong> design em geral, filmes e quadrinhos.</p>
+
 		<p><a href="joao">Mais</a></p>
 	</div>
 </div>
 
-
-
 <div class="ficha">
-	<h2>Tesoureiro Geral</h2>
+	<div class="names">
+		<p><strong>Tesoureiro Geral</strong></p>
+
+		<p>Yuri Gabriel Cardoso Delgado</p>
+
+		<p class="shadowed">vanel@arch</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/yuri.jpg"/>
 
 		<img src="/chapa-sigmoide/yuri-avatar.jpg"/>
-
-		<figcaption>vanel@arch</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: Yuri Gabriel Cardoso Delgado</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>WM: Hyprland</p>
+		<p><strong>Gosta de:</strong> Linux, Low-Level, Ficção Científica, Conhecimento Livre e Cibersegurança.</p>
-		<p>Interesses: Linux, Ficção Científica, Conhecimento Livre, Tron, Newjeans e Cibersegurança</p>
 		<p><a href="yuri">Mais</a></p>
 	</div>
 </div>
 
-
-
 <div class="ficha">
-	<h2>1° Tesoureiro</h2>
+	<div class="names">
+		<p><strong>1º Tesoureiro</strong></p>
+
+		<p>Luiz Henrique Mendes Costa</p>
+
+		<p class="shadowed">henrique@ubuntu</p>
+	</div>
 
 	<figure>
 		<img src="/chapa-sigmoide/henrique.jpg"/>
 
-		<img src="https://dummyimage.com/300x400/f00/fff"/>
+		<img src="/chapa-sigmoide/henrique.jpg"/>
-
-		<figcaption>henrique@ubuntu</figcaption>
 	</figure>
 
 	<div class="description">
-		<p>Nome: Luiz Henrique Mendes Costa</p>
+		<p><strong>Semestre:</strong> 2º.</p>
-		<p>Semestre: 2º</p>
+
-		<p>Ano de nascimento: xxxx</p>
+		<p><strong>Gosta de:</strong> animes, manhwa, games, rpg, cibersegurança e curiosidades tecnológicas</p>
-		<p>Interesses:</p>
+
 		<p><a href="henrique">Mais</a></p>
 	</div>
 </div>