From 6fcc19bebfd7ee43640870b9dc14880b4c7fb79f Mon Sep 17 00:00:00 2001 From: Oriol Carbonell Date: Sun, 21 Jan 2024 01:58:55 +0100 Subject: [PATCH] Update styles and home page --- web/static/numerus.css | 473 +++++++++++++++++++++------------------ web/template/home.gohtml | 94 ++++---- 2 files changed, 312 insertions(+), 255 deletions(-) diff --git a/web/static/numerus.css b/web/static/numerus.css index 4885a75..8fc3580 100644 --- a/web/static/numerus.css +++ b/web/static/numerus.css @@ -330,7 +330,7 @@ body > footer { } input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea { - background-color: var(--numerus--background-color); + background-color: transparent; border: 1px solid var(--numerus--color--black); border-radius: 0; padding: 1rem 2rem; @@ -382,7 +382,7 @@ input.width-2x { } .input:not(.radio) label, .input:not(.radio) input:focus ~ label { - background-color: var(--numerus--background-color); + background-color: var(--numerus--header--background-color); top: -.9rem; left: 2rem; font-size: 0.8em; @@ -1055,7 +1055,7 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r } #income-statement div:nth-child(4) { - background: var(--numerus--color--hay); + background: var(--numerus--color--yellow); } #income-statement div:nth-child(4), @@ -10281,8 +10281,90 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r } +#login { + padding: 1.25em; + min-height: 70vh; +} + +#login h2 { + margin-bottom: 1em; +} + +#login button { + min-width: 26rem; + background-color: var(--numerus--color--black); + border: 2px solid var(--numerus--color--black); + text-transform: uppercase; + display: inline-block; + text-align: center; + padding: 1.55rem; + cursor: pointer; + color: var(--numerus--color--white); +} + /* web */ +/* web mobile */ + +@media screen and (max-width: 600px) { + + header, body > nav a { + padding: 0; + } + + .web > header { + flex-direction: column; + } + + .web nav { + width: 100%; + border-top: solid 1px var(--numerus--color--black); + } + + .web nav ul { + margin: 0; + justify-content: space-around; + } + } + + .web nav ul li { + padding: 6rem 0; + } + +} + + +/* web tablet */ + +@media screen and (max-width: 992px) { + + .web nav ul { + gap: 2rem; + margin: 0 0 0 5rem; + } + + .mondrian2 { + font-size: calc(16px + 3vw); + } + .mondrian4 { + font-size: calc(16px + 3vw); + } + .mondrian10 { + font-size: calc(16px + .3vw); + } + .mondrian14 { + font-size: 1.4rem; + } + + .web nav ul li { + padding: 0; + } + + +} + + +/* web desktop */ .web { margin: 3rem; @@ -10302,8 +10384,11 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r .web > footer { border-top: 1px solid var(--numerus--color--black); - margin: 5rem 0; + margin: 0 0 5rem 0; padding: 5rem 0 0 0; + display: flex; + justify-content: space-between; + align-items: center; } .web nav ul { @@ -10314,10 +10399,13 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r gap: 5rem; } +.web nav ul li { + padding: 0; +} + .web footer nav ul { justify-content: center; font-size: 83.3333%; - margin-top: 1em; } .web nav a { @@ -10325,6 +10413,10 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r text-decoration: none; } +.web .legal { + margin: 5rem 0; +} + .web .legal h2 { margin: .5em 0 1.5em 0; } @@ -10375,129 +10467,125 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r margin-top: 1.5789em; } -#login { - padding: 1.25em; +/* css grid */ + +.mondrian { +display: grid; +grid-template-columns: repeat(6, 1fr); +grid-template-rows: repeat(5, 1fr); +grid-column-gap: 0px; +grid-row-gap: 0px; } -#login h2 { - margin-bottom: 1em; +.mondrian-element { + height: 15rem; } -#login button { - min-width: 26rem; - background-color: var(--numerus--color--black); - border: 2px solid var(--numerus--color--black); - text-transform: uppercase; - display: inline-block; - text-align: center; - padding: 1.55rem; - cursor: pointer; - color: var(--numerus--color--white); +.mondrian1 { + grid-area: 1 / 1 / 2 / 5; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian2 { + grid-area: 1 / 5 / 2 / 7; + background: var(--numerus--color--yellow); + font-size: calc(16px + 5vw); + display: grid; + align-content: center; + justify-content: start; + padding: 1rem; + border-bottom: 1px solid var(--numerus--color--black); +>>>>>>> Stashed changes +} +.mondrian3 { + grid-area: 2 / 1 / 3 / 2; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian4 { + grid-area: 2 / 2 / 3 / 4; + background: var(--numerus--color--green); + font-size: calc(16px + 5vw); + display: grid; + align-content: center; + justify-content: start; + padding: 1rem; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian5 { + grid-area: 2 / 4 / 3 / 6; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian6 { + grid-area: 2 / 6 / 3 / 7; + background: white; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian7 { + grid-area: 3 / 1 / 4 / 3; + background: white; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian8 { + grid-area: 3 / 3 / 4 / 7; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian9 { + grid-area: 4 / 1 / 5 / 2; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian10 { + grid-area: 4 / 2 / 6 / 4; + height: 30rem; + border-bottom: 1px solid var(--numerus--color--black); + background: var(--numerus--color--black); + color: white; + padding: 1rem; + font-size: calc(16px + .7vw); +} +.mondrian11 { + grid-area: 4 / 4 / 5 / 7; + border-bottom: 1px solid var(--numerus--color--black); +} +.mondrian12 { + grid-area: 5 / 1 / 6 / 2; +} +.mondrian13 { + grid-area: 5 / 4 / 6 / 5; + display: flex; + justify-content: center; + align-content: center; +} +.mondrian13 svg { +} +.mondrian14 { + grid-area: 5 / 5 / 6 / 6; + background: var(--numerus--color--red); + padding: 1rem; + font-size: calc(16px + 0.2vw); +} +.mondrian15 { + grid-area: 5 / 6 / 6 / 7; } -.contenidor { - display: grid; - grid-template-columns: repeat(2, 1fr); - padding: 5rem 0; +.description { +display: grid; +grid-template-columns: repeat(6, 1fr); +grid-template-rows: repeat(4, 1fr); +grid-column-gap: 0px; +grid-row-gap: 0px; +margin: 5rem 0; } -.graella { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(3, 1fr); - grid-column-gap: 0; - grid-row-gap: 0; +.description-text { + grid-area: 1 / 1 / 4 / 3; } -.caixa { - +.description-text p { + padding: 0 0 2rem 0; + padding: 1rem; } -.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); -} - - -.descripcio { - display: flex; - gap: 5rem; - justify-content: space-around; - margin: 5rem 0; -} - -.paragraf { - flex: 2; -} - -.paragraf p { - margin: 0 0 2rem 0; - max-width: 45%; -} - -.llista { - flex: 1; +.description-items { + grid-area: 2 / 4 / 4 / 6; } .icon-list { @@ -10510,121 +10598,78 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r width: 24px; } -.future { - margin: 5rem 0; +.description-progress { + grid-area: 4 / 4 / 5 / 6; + margin: 5rem 0; + padding: 0 0 0 35px; + font-size: 1.3rem; } -.opensource { - display: flex; - justify-content: space-between; - gap: 5rem; - border-top: 1px solid var(--numerus--color--black); +.open { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(4, 1fr); + grid-column-gap: 0px; + grid-row-gap: 0px; + border-top: 1px solid var(--numerus--color--black); } +.deco_1 { + grid-area: 1 / 1 / 2 / 2; + background: white; +} +.license { + grid-area: 2 / 4 / 4 / 6; +} +.download { + grid-area: 3 / 2 / 4 / 3; +} .download button { - margin: 5rem 0; - background: var(--numerus--color--yellow); - border: var(--numerus--color--yellow); + margin: 5rem 0; + background: var(--numerus--color--yellow); + border: var(--numerus--color--yellow); + width: 100%; + font-size: calc(16px + 1vw); + color: var(--numerus--color--black); } - -.quadradet { - width: 17rem; - height: 17rem; - background: white; -} - -.llicencia { - max-width: 50%; - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 5rem; - margin: 17rem 0 0 0; -} - -.price-section { - display: flex; - justify-content: space-between; - gap: 5rem; - border-top: 1px solid var(--numerus--color--black); - padding: 5rem 0 0 0; +.deco_2 { + grid-area: 4 / 5 / 5 / 6; + background: white; } .price { - flex: 1; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 0px; + grid-row-gap: 0px; + border-top: 1px solid var(--numerus--color--black); + padding: 5rem 0; } -.price h3 { - font-size: 4rem; +.price_description { + grid-area: 1 / 1 / 3 / 3; } -.price h2 { - margin: 5rem 0 0 0; +.price_description p { + margin: 0 0 2rem 0; +} + +.price_cta { + grid-area: 2 / 4 / 4 / 6; } .price-detail { - display: flex; - flex-direction: row; - gap: 10px; - align-items: baseline; + display: flex; + flex-direction: row; + gap: 10px; + align-items: baseline; } -/* 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: 0; - grid-row-gap: 0; - } - - .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*/ - } - - +.price-detail h3 { + font-size: 4rem; } +.price_cta p { + margin: 2rem 0; +} diff --git a/web/template/home.gohtml b/web/template/home.gohtml index a5a492f..4b9899c 100644 --- a/web/template/home.gohtml +++ b/web/template/home.gohtml @@ -3,27 +3,41 @@ {{- end }} {{ define "content" -}} -
-
autònoms
-
-
-
-
Eina per simplificar la gestió de les autònomes, que prou feina tens amb lo teu.
-
-
gestió
-
-

PRESSUPOSTOS

-

FACTURES

-

DESPESES

-

IMPOSTOS

-

SERVEIS/PRODUCTES

-

CONTACTES

+
+
+
+ autònoms
-
+
+
+ gestió +
+
+
+
+
+
+
+ PRESSUPOSTOS
+ FACTURES
+ DESPESES
+ IMPOSTOS
+ SERVEIS/PRODUCTES
+ CONTACTES
+
+
+
+
+ +
+
+

Eina per simplificar la gestió, que prou feina tens amb lo teu.

+
+
-
-
+
+

Si estàs en règim d'autònom/a ja saps el que costa portar al dia la facturació.

Tips de provar diferents aplicacions i que cap s'ajustés a les nostres necessitats, vam decidir fer la nostra pròpia eina: numerus.

@@ -32,46 +46,44 @@

Creiem que per a una petita empresa, cooperativa o una associació també pot ajudar a gestionar els números de l'entitat.

-
-
usuari/a administrador/a
+
+
usuari/a administrador/a
usuari/a gestor/a
-
usuari/a comptable
+
usuari/a comptable
creació de tipus d’impostos
gràfiques de progrés i comparació
etiquetes per classificar
filtres avançats
idiomes: cat esp eng
creació de productes/serveis com a base
- -
estem trebalant amb:
+
+
+ estem treballant amb:
control d’estoc
tiquets (factura simplificada)
- ...
- - - + alta usuaris/es i cobrament recurrent
-
-
-
- -
-
-
-
+
+
+
+
+ +

numerus és programari lliure distribuït sota La Llicència Pública General Affero (AGPL), això vol dir que t’ho pots descarregar, instal·lar al teu servidor(*), modificar i compartir el que has fet(**).

*_ servidor mínim: 1 GB RAM, 1/2 vCore, 5 GB SSD NVMe.
**_ sempre que respectis els mateixos valors i ho comparteixis amb la mateixa llicència.

-
-
+
+ +
+
-
-
+
+

Si no saps com instal·lar numerus en un servidor, pots registrar-te amb nosaltres.

Obtindràs un accés privat i encriptat al teu tauler on gestionar tota l'aplicació.

@@ -80,11 +92,11 @@

I de pas ens ajudes a mantenir i millorar el que hem fet i t'és útil :)

-
+

6,00 €/mes

(sense impostos)

7,26 €/mes

(amb impostos)

Al crear un usuari, pots cancel·lar la teva subscripció en qualsevol moment. Es cobrarà fins al mes actual.

-

Escriu-nos a hola@tandem.blog i donem d'alta

+

Escriu-nos a hola@tandem.blog i donem d'alta el teu perfil

{{- end }}