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) );
|
||||
|
||||
--main-font: "Inconsolata";
|
||||
--main-font: "Victor Mono";
|
||||
|
||||
--border-width: 0.1rem;
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
--color-text-shadowed: grey;
|
||||
|
||||
--color-clickable-normal: #85e80c;
|
||||
--color-clickable-normal: #FF7700;
|
||||
|
||||
--color-clickable-selected: #ffcd5b;
|
||||
|
||||
|
|
@ -206,6 +206,7 @@ div.line-break > p { overflow-x: auto; }
|
|||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
color: var(--color-text-marked);
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
|
|
@ -231,6 +232,82 @@ button, input[type="submit"], input[type="reset"], input[type="button"]
|
|||
|
||||
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
|
||||
{
|
||||
:root
|
||||
|
|
|
|||
|
|
@ -2,26 +2,64 @@
|
|||
|
||||
<p>Gregor Samsa</p>
|
||||
|
||||
<div>
|
||||
<p><a href="mateus">Presidente</a></p>
|
||||
<div class="ficha">
|
||||
<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>
|
||||
<p><a href="lucas">Vice-Presidente</a></p>
|
||||
<div class="ficha">
|
||||
<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>
|
||||
<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 class="ficha">
|
||||
<h2>Secretário Geral</h2>
|
||||
|
||||
<div>
|
||||
<p><a href="henrique">1º Tesoureiro</a></p>
|
||||
<figure>
|
||||
<img src="https://dummyimage.com/300x400/f00/fff"/>
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue