forked from Zost/site
Styling and photos
This commit is contained in:
parent
718f412829
commit
470a9e299f
5 changed files with 135 additions and 18 deletions
BIN
public/chapa-sigmoide/lucas.jpg
Normal file
BIN
public/chapa-sigmoide/lucas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/chapa-sigmoide/mateus.jpg
Normal file
BIN
public/chapa-sigmoide/mateus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
--empty-space-width: calc( 100vw - var(--content-space-width) );
|
--empty-space-width: calc( 100vw - var(--content-space-width) );
|
||||||
|
|
||||||
--main-font: "Inconsolata";
|
--main-font: "Victor Mono";
|
||||||
|
|
||||||
--border-width: 0.1rem;
|
--border-width: 0.1rem;
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
|
|
||||||
--color-text-shadowed: grey;
|
--color-text-shadowed: grey;
|
||||||
|
|
||||||
--color-clickable-normal: #85e80c;
|
--color-clickable-normal: #FF7700;
|
||||||
|
|
||||||
--color-clickable-selected: #ffcd5b;
|
--color-clickable-selected: #ffcd5b;
|
||||||
|
|
||||||
|
|
@ -206,6 +206,7 @@ div.line-break > p { overflow-x: auto; }
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6
|
h1, h2, h3, h4, h5, h6
|
||||||
{
|
{
|
||||||
|
color: var(--color-text-marked);
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -231,6 +232,82 @@ button, input[type="submit"], input[type="reset"], input[type="button"]
|
||||||
|
|
||||||
button svg {pointer-events:none;}
|
button svg {pointer-events:none;}
|
||||||
|
|
||||||
|
div.ficha
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
grid-template-columns: 35% auto;
|
||||||
|
column-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha h2
|
||||||
|
{
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha figure
|
||||||
|
{
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 1;
|
||||||
|
margin: 0;
|
||||||
|
max-width: unset;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha figure img
|
||||||
|
{
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
aspect-ratio: 3 / 4;
|
||||||
|
animation-name: image-change;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-duration: 10s;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha figure figcaption
|
||||||
|
{
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha div.description
|
||||||
|
{
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
max-width: unset;
|
||||||
|
border: unset;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes image-change
|
||||||
|
{
|
||||||
|
0% { opacity: 0; }
|
||||||
|
|
||||||
|
10% { opacity: 1; }
|
||||||
|
|
||||||
|
50% { opacity: 1; }
|
||||||
|
|
||||||
|
60% { opacity: 0; }
|
||||||
|
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ficha figure img:nth-of-type(1)
|
||||||
|
{ animation-delay: 0s;}
|
||||||
|
|
||||||
|
div.ficha figure img:nth-of-type(2)
|
||||||
|
{
|
||||||
|
animation-delay: 5s;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 0rem;
|
||||||
|
top: 0rem;
|
||||||
|
width: 100%;;
|
||||||
|
padding: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
@media print
|
@media print
|
||||||
{
|
{
|
||||||
:root
|
:root
|
||||||
|
|
|
||||||
|
|
@ -2,26 +2,64 @@
|
||||||
|
|
||||||
<p>Gregor Samsa</p>
|
<p>Gregor Samsa</p>
|
||||||
|
|
||||||
<div>
|
<div class="ficha">
|
||||||
<p><a href="mateus">Presidente</a></p>
|
<h2>Presidente</h2>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="/chapa-sigmoide/mateus.jpg">
|
||||||
|
|
||||||
|
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||||
|
|
||||||
|
<figcaption>seruna@artix</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<p>Nome: Mateus Cezário Barreto</p>
|
||||||
|
<p>Semestre: 2º</p>
|
||||||
|
<p>Ano de nascimento: 2005</p>
|
||||||
|
<p>Interesses: Linux</p>
|
||||||
|
<p><a href="mateus">Mais</a></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="ficha">
|
||||||
<p><a href="lucas">Vice-Presidente</a></p>
|
<h2>Vice-Presidente</h2>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||||
|
|
||||||
|
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||||
|
|
||||||
|
<figcaption>lucas_zost@arch</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<p>Nome: Lucas Santos Diniz</p>
|
||||||
|
<p>Semestre: 2º</p>
|
||||||
|
<p>Ano de nascimento:</p>
|
||||||
|
<p>Interesses:</p>
|
||||||
|
<p><a href="lucas">Mais</a></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
<p><a href="leonardo">Secretário Geral</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p><a href="davi">1º Secretário</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div class="ficha">
|
||||||
<p><a href="yuri">Tesoureiro Geral</a></p>
|
<h2>Secretário Geral</h2>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<figure>
|
||||||
<p><a href="henrique">1º Tesoureiro</a></p>
|
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||||
</div>
|
|
||||||
|
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||||
|
|
||||||
|
<figcaption>kfk@garuda</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<p>Nome: Leonardo Brito da Conceição</p>
|
||||||
|
<p>Semestre: 2º</p>
|
||||||
|
<p>Ano de nascimento:</p>
|
||||||
|
<p>Interesses:</p>
|
||||||
|
<p><a href="leonardo">Mais</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,8 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/css/chapa_sigmoide.css">
|
<link rel="stylesheet" type="text/css" href="/css/chapa_sigmoide.css">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Victor+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue