Primer pas al frontal de visitants

This commit is contained in:
oriol carbonell pujolàs 2023-06-16 10:17:58 +02:00
parent 3af40cc7bc
commit 826741a381
2 changed files with 170 additions and 22 deletions

View File

@ -180,6 +180,7 @@ body, dialog {
color: var(--numerus--text-color);
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
@ -262,26 +263,6 @@ tbody tr:nth-child(even) {
background-color: var(--numerus--header--background-color);
}
.web {
margin: 8.5rem 4rem;
background-color: var(--numerus--header--background-color);
}
.web h1 {
padding-bottom: .9375em;
border-bottom: 1px solid var(--numerus--color--black);
margin-bottom: .625em;
}
#login {
background-color: var(--numerus--color--hay);
padding: 1.25em;
}
#login h2 {
margin-bottom: 1em;
}
div[role="alert"].error {
padding: 1.25em;
background-color: var(--numerus--color--red);
@ -10237,3 +10218,154 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
.ri-zzz-line:before {
content: '\f2df';
}
/* web */
.web {
margin: 3rem;
background-color: var(--numerus--header--background-color);
}
.web h1 {
padding-bottom: .9375em;
border-bottom: 1px solid var(--numerus--color--black);
}
#login {
background-color: var(--numerus--color--hay);
padding: 1.25em;
}
#login h2 {
margin-bottom: 1em;
}
.contenidor {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 5rem 0;
border-bottom: 1px solid var(--numerus--color--black);
}
.graella {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.caixa {
}
.caixa-1 {
grid-area: 1 / 1 / 2 / 3;
background: var(--numerus--color--yellow);
font-size: calc(16px + 5vw);
display: grid;
align-content: center;
justify-content: start;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-2 {
grid-area: 1 / 3 / 2 / 6;
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-3 {
grid-area: 1 / 6 / 2 / 7;
background: var(--numerus--color--white);
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-4 {
grid-area: 2 / 1 / 3 / 3;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-5 {
grid-area: 2 / 3 / 3 / 4;
background: var(--numerus--color--red);
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-6 {
grid-area: 2 / 4 / 3 / 5;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-7 {
grid-area: 2 / 5 / 3 / 7;
background: var(--numerus--color--green);
font-size: calc(16px + 5vw);
display: grid;
align-content: center;
justify-content: end;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-8 {
grid-area: 3 / 1 / 4 / 2;
background: var(--numerus--color--black);
color: var(--numerus--color--white);
padding: 1rem;
border-bottom: 1px solid var(--numerus--color--black);
}
.caixa-9 {
grid-area: 3 / 2 / 4 / 7;
font-size: calc(16px + 5vw);
display: grid;
align-content: center;
justify-content: end;
border-bottom: 1px solid var(--numerus--color--black);
}
/* web responsive */
@media screen and (max-width: 992px) {
.contenidor {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.graella {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.caixa-1 {
grid-area: 1 / 1 / 2 / 2; /* posició 1*/
}
.caixa-2 {
grid-area: 1 / 2 / 2 / 3; /* posició 2*/
}
.caixa-3 {
grid-area: 2 / 1 / 3 / 2; /* posició 3*/
}
.caixa-4 {
grid-area: 5 / 1 / 6 / 2; /* posició 7*/
display: none;
}
.caixa-5 {
grid-area: 2 / 2 / 3 / 3; /*posició 4*/
}
.caixa-6 {
grid-area: 5 / 2 / 6 / 3; /* posició 8*/
display: none;
}
.caixa-7 {
grid-area: 3 / 1 / 4 / 2; /* posició 5*/
justify-content: start;
}
.caixa-8 {
grid-area: 3 / 2 / 4 / 3; /* posició 6*/
}
.caixa-9 {
grid-area: 4 / 1 / 5 / 3; /* posició 9*/
}
}

View File

@ -3,6 +3,22 @@
{{- end }}
{{ define "content" -}}
<h1><img src="/static/numerus.svg" alt="Numerus" width="620" height="77"></h1>
<a href="/login">{{( pgettext "Login" "title" )}}</a>
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
<div class="contenidor">
<p>Si vols accedir al teu usuari només has d'anar a la pàgina d'<a href="/login">entrada</a> i apuntar les teves credencials al seu lloc.</p>
</div>
<div class="graella">
<div class="caixa caixa-1"><p>gestor</p></div>
<div class="caixa caixa-2"></div>
<div class="caixa caixa-3"> </div>
<div class="caixa caixa-4"> </div>
<div class="caixa caixa-5"><p>Eina per simplificar la gestió d'autònoms i petites empreses.</p></div>
<div class="caixa caixa-6"> </div>
<div class="caixa caixa-7"><p>79%</p></div>
<div class="caixa caixa-8">Redueix el temps de gestió, tingues controlats els teus números.</div>
<div class="caixa caixa-9"><p>aplicació</p></div>
</div>
{{- end }}