Skip to content

Commit 8e1bc9b

Browse files
mouredevmouredev
committed
Clase 3
Estilos
1 parent 1c6e03b commit 8e1bc9b

File tree

11 files changed

+215
-29
lines changed

11 files changed

+215
-29
lines changed

‎README.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,20 @@
1010
### Proyecto realizado durante emisiones en directo desde [Twitch](https://twitch.tv/mouredev)
1111
> ##### Si consideras útil el curso, apóyalo haciendo "★ Star" en el repositorio. ¡Gracias!
1212
13-
## Próxima Clase: Miércoles 18/10/2023
13+
## Próxima Clase: Miércoles 25/10/2023
1414
### ⏰ 20:00 (hora España) en directo desde [Twitch](https://twitch.tv/mouredev)
15-
### 🌐 Consulta el horario por país y crea un recordatorio desde [Discord](https://discord.gg/mouredev?event=1161934670380933151)
15+
### 🌐 Consulta el horario por país y crea un recordatorio desde [Discord](https://discord.gg/mouredev?event=1164510745053110303)
1616

1717
## Clases anteriores
1818

19-
### Clase 1 (04/10/2023): Introducción, instalación y configuración ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1942562640?t=00h18m05s)
19+
### Clase 1 (04/10/2023): Introducción, instalación y configuración
20+
#### ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1942562640?t=00h18m05s)
2021

21-
### Clase 2 (11/10/2023): Componentes visuales ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1948407270?t=00h20m02s)
22+
### Clase 2 (11/10/2023): Componentes visuales
23+
#### ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1948407270?t=00h20m02s)
24+
25+
### Clase 3 (18/10/2023): Estilos
26+
#### ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1954230750?t=00h18m23s)
2227

2328
## Proyecto
2429

‎link_bio/link_bio/components/footer.py‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import reflex as rx
22
import datetime
3+
from link_bio.styles.styles import Size as Size
34

45

56
def footer() -> rx.Component:
67
return rx.vstack(
78
rx.image(src="favicon.ico"),
89
rx.link(
9-
f"© 2014-{datetime.date.today().year} MOUREDEV BY BRAIS MOURE V3.",
10+
f"© 2014-{datetime.date.today().year} MoureDev by Brais Moure v3.",
1011
href="https://mouredev.com",
11-
is_external=True
12+
is_external=True,
13+
font_size=Size.MEDIUM.value
1214
),
13-
rx.text("BUILDING SOFTWARE WITH ♥ FROM GALICIA TO THE WORLD.")
15+
rx.text(
16+
"BUILDING SOFTWARE WITH ♥ FROM GALICIA TO THE WORLD.",
17+
font_size=Size.MEDIUM.value,
18+
margin_top="0px !important"
19+
),
20+
margin_bottom=Size.BIG.value
1421
)

‎link_bio/link_bio/components/info_text.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import reflex as rx
2+
from link_bio.styles.styles import Size as Size
3+
4+
5+
def info_text(title: str, body: str) -> rx.Component:
6+
return rx.box(
7+
rx.span(title, font_weight="bold", color="blue"),
8+
f" {body}", font_size=Size.MEDIUM.value
9+
)

‎link_bio/link_bio/components/link_button.py‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
import reflex as rx
2+
import link_bio.styles.styles as styles
3+
from link_bio.styles.styles import Size as Size
24

35

4-
def link_button(text: str, url: str) -> rx.Component:
6+
def link_button(title: str, body: str, url: str) -> rx.Component:
57
return rx.link(
6-
rx.button(text),
8+
rx.button(
9+
rx.hstack(
10+
rx.icon(
11+
tag="arrow_forward",
12+
width=Size.BIG.value,
13+
height=Size.BIG.value
14+
),
15+
rx.vstack(
16+
rx.text(title, style=styles.button_title_style),
17+
rx.text(body, style=styles.button_body_style),
18+
align_items="start"
19+
)
20+
)
21+
),
722
href=url,
8-
is_external=True
23+
is_external=True,
24+
width="100%"
925
)

‎link_bio/link_bio/components/link_icon.py‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import reflex as rx
2+
import link_bio.styles.styles as styles
3+
4+
5+
def link_icon(url: str) -> rx.Component:
6+
return rx.link(
7+
rx.icon(
8+
tag="link"
9+
),
10+
href=url,
11+
is_external=True
12+
)

‎link_bio/link_bio/components/navbar.py‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import reflex as rx
2+
from link_bio.styles.styles import Size as Size
23

34

45
def navbar() -> rx.Component:
56
return rx.hstack(
67
rx.text(
7-
"mouredev",
8-
height="40px"
8+
"mouredev"
99
),
1010
position="sticky",
11-
bg="blue",
12-
padding_x="16px",
13-
padding_y="8px",
14-
z_index="999"
11+
bg="lightgray",
12+
padding_x=Size.DEFAULT.value,
13+
padding_y=Size.SMALL.value,
14+
z_index="999",
15+
top="0"
1516
)

‎link_bio/link_bio/components/title.py‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import reflex as rx
2+
import link_bio.styles.styles as styles
3+
4+
5+
def title(text: str) -> rx.Component:
6+
return rx.heading(
7+
text,
8+
size="lg",
9+
style=styles.title_style
10+
)

‎link_bio/link_bio/link_bio.py‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,32 @@
33
from link_bio.components.footer import footer
44
from link_bio.views.header.header import header
55
from link_bio.views.links.links import links
6+
import link_bio.styles.styles as styles
7+
from link_bio.styles.styles import Size as Size
68

79

810
class State(rx.State):
911
pass
1012

1113

1214
def index() -> rx.Component:
13-
return rx.vstack(
15+
return rx.box(
1416
navbar(),
15-
header(),
16-
links(),
17+
rx.center(
18+
rx.vstack(
19+
header(),
20+
links(),
21+
max_width=styles.MAX_WIDTH,
22+
width="100%",
23+
margin_y=Size.BIG.value
24+
)
25+
),
1726
footer()
1827
)
1928

2029

21-
app = rx.App()
30+
app = rx.App(
31+
style=styles.BASE_STYLE
32+
)
2233
app.add_page(index)
2334
app.compile()

‎link_bio/link_bio/styles/styles.py‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import reflex as rx
2+
from enum import Enum
3+
4+
# Constants
5+
MAX_WIDTH = "560px"
6+
7+
# Sizes
8+
9+
10+
class Size(Enum):
11+
SMALL = "0.5em"
12+
MEDIUM = "0.8em"
13+
DEFAULT = "1em"
14+
BIG = "2em"
15+
16+
# Styles
17+
18+
19+
BASE_STYLE = {
20+
rx.Button: {
21+
"width": "100%",
22+
"height": "100%",
23+
"display": "block",
24+
"padding": Size.SMALL.value,
25+
"border_radius": Size.DEFAULT.value
26+
},
27+
rx.Link: {
28+
"text_decoration": "none",
29+
"_hover": {}
30+
}
31+
}
32+
33+
title_style = dict(
34+
width="100%",
35+
padding_top=Size.DEFAULT.value
36+
)
37+
38+
button_title_style = dict(
39+
font_size=Size.DEFAULT.value
40+
)
41+
42+
button_body_style = dict(
43+
font_size=Size.MEDIUM.value
44+
)

‎link_bio/link_bio/views/header/header.py‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,43 @@
11
import reflex as rx
2+
from link_bio.components.link_icon import link_icon
3+
from link_bio.components.info_text import info_text
4+
from link_bio.styles.styles import Size as Size
25

36

47
def header() -> rx.Component:
58
return rx.vstack(
6-
rx.avatar(name="Brais Moure", size="xl"),
7-
rx.text("@mouredev"),
8-
rx.text("HOLA 👋🏼 MI NOMBRE ES BRAIS MOURE"),
9+
rx.hstack(
10+
rx.avatar(name="Brais Moure", size="xl"),
11+
rx.vstack(
12+
rx.heading(
13+
"Brais Moure",
14+
size="lg"
15+
),
16+
rx.text(
17+
"@mouredev",
18+
margin_top="0px !important"
19+
),
20+
rx.hstack(
21+
link_icon("https://x.com/mouredev"),
22+
link_icon("https://x.com/mouredev"),
23+
link_icon("https://x.com/mouredev")
24+
),
25+
align_items="start"
26+
),
27+
spacing=Size.DEFAULT.value
28+
),
29+
rx.flex(
30+
info_text("+13", "años de experiencia"),
31+
rx.spacer(),
32+
info_text("+13", "años de experiencia"),
33+
rx.spacer(),
34+
info_text("+13", "años de experiencia"),
35+
width="100%"
36+
),
937
rx.text("""Soy ingeniero de software desde hace más de 12 años.
1038
Actualmente trabajo como freelance full-stack developer iOS y Android.
1139
Además creo contenido formativo sobre programación y tecnología en redes.
12-
Aquí podrás encontrar todos mis enlaces de interés. ¡Bienvenid@!""")
40+
Aquí podrás encontrar todos mis enlaces de interés. ¡Bienvenid@!"""),
41+
spacing=Size.BIG.value,
42+
align_items="start"
1343
)

0 commit comments

Comments
 (0)