examples/intro-colors.rs

@@ -1,80 +0,0 @@
-use pagetop::prelude::*;
-
-struct IntroColors;
-
-impl Extension for IntroColors {
-    fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
-        scfg.route("/", service::web::get().to(intro_colors));
-    }
-}
-
-async fn intro_colors(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
-    Page::new(request)
-        .with_child(
-            Intro::default()
-                .with_opening(IntroOpening::Custom)
-                .with_title(L10n::n("PageTop"))
-                .with_slogan(L10n::l("sample_colors_slogan"))
-                .with_button(None::<(L10n, FnPathByContext)>)
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "1"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_1").using(cx)) }
-                            }
-                        })),
-                )
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "2"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_2").using(cx)) }
-                            }
-                        })),
-                )
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "3"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_3").using(cx)) }
-                            }
-                        })),
-                )
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "4"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_4").using(cx)) }
-                            }
-                        })),
-                )
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "5"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_5").using(cx)) }
-                            }
-                        })),
-                )
-                .with_child(
-                    Block::new()
-                        .with_title(L10n::l("sample_colors_block").with_arg("n", "6"))
-                        .with_child(Html::with(|cx| {
-                            html! {
-                                p { (L10n::l("sample_colors_val_6").using(cx)) }
-                            }
-                        })),
-                ),
-        )
-        .render()
-}
-
-#[pagetop::main]
-async fn main() -> std::io::Result<()> {
-    Application::prepare(&IntroColors).run()?.await
-}

extensions/pagetop-aliner/static/css/styles.css

@@ -29,14 +29,12 @@ h1, h2, h3, h4,h5, h6, p {
 }
 
 *::before, *::after {
+	background: #faa;
 	border-radius: 3px;
 	font: normal normal 400 10px/1.2 monospace;
 	vertical-align: middle;
 	padding: 1px 3px;
 	margin: 0 3px;
-	background: #faa;
-	color: #fff;
-	-webkit-text-fill-color: currentColor;
 }
 *::before {
 	content: "(";

helpers/pagetop-macros/src/lib.rs

@@ -366,8 +366,8 @@ pub fn builder_fn(_: TokenStream, item: TokenStream) -> TokenStream {
         alter_name_str
     );
     let with_alter_doc = concat!(
-        "Permite modificar la instancia (`&mut self`) con los mismos argumentos ",
+        "Permite modificar la instancia actual (`&mut self`) con los mismos argumentos, ",
-        "pero sin consumirla."
+        "sin consumirla."
     );
 
     // Atributos completos que se aplican siempre a `with_...()`.

src/core/component/children.rs

@@ -187,10 +187,10 @@ impl<C: Component> Embed<C> {
     ///     }
     /// }; // El *guard* se libera aquí, antes del *drop* de `embed`.
     ///
-    /// let embed = Embed::with(Block::new().with_title(L10n::n("Title")));
+    /// let embed = Embed::with(Block::new().with_title(L10n::n("Título")));
     /// {
     ///     if let Some(mut component) = embed.get() {
-    ///         component.alter_title(L10n::n("New Title"));
+    ///         component.alter_title(L10n::n("Nuevo título"));
     ///     }
     /// }; // El *guard* se libera aquí, antes del *drop* de `embed`.
     /// ```

src/core/component/context.rs

@@ -385,7 +385,8 @@ impl Context {
     /// Con `parts = 1` se usa el nombre corto del tipo. Si `parts` es `0` o supera el número de
     /// segmentos del *path*, entonces se usará el *path* completo.
     ///
-    /// Es útil para asignar identificadores HTML cuando el componente no recibe uno explícito.
+    /// Es útil para asignar identificadores HTML predecibles cuando el componente no recibe uno
+    /// explícito.
     pub fn required_id<C: Component>(&self, id: Option<String>, parts: usize) -> String {
         if let Some(id) = id {
             return id;

src/core/component/message.rs

@@ -31,7 +31,7 @@ pub enum MessageLevel {
 /// let info = StatusMessage::new(MessageLevel::Info, L10n::l("saved-successfully"));
 ///
 /// // Aviso con texto literal sin traducción.
-/// let warn = StatusMessage::new(MessageLevel::Warning, L10n::n("Incomplete form."));
+/// let warn = StatusMessage::new(MessageLevel::Warning, L10n::n("Formulario incompleto."));
 /// ```
 #[derive(Debug, Getters)]
 pub struct StatusMessage {

src/locale/en-US/sample.ftl

@@ -1,13 +1,3 @@
-# intro-colors.rs
-sample_colors_slogan = Chromatic intro test
-sample_colors_block = Block { $n } — intro-bg-block-{ $n }
-sample_colors_val_1 = Background color: <code style="color: #8b2500">#FFB84B</code> — Amber gold.
-sample_colors_val_2 = Background color: <code style="color: #8b2500">#FFC66F</code> — Light golden.
-sample_colors_val_3 = Background color: <code style="color: #8b2500">#FFD493</code> — Pale golden.
-sample_colors_val_4 = Background color: <code style="color: #8b2500">#FFE3B7</code> — Light peach.
-sample_colors_val_5 = Background color: <code style="color: #8b2500">#FFF1DB</code> — Cream.
-sample_colors_val_6 = Background color: <code style="color: #8b2500">#FFFFFF</code> — White.
-
 # menus.rs
 sample_menus_item_label = Label
 sample_menus_item_link = Link

src/locale/es-ES/sample.ftl

@@ -1,13 +1,3 @@
-# intro-colors.rs
-sample_colors_slogan = Prueba de intro cromática
-sample_colors_block = Bloque { $n } — intro-bg-block-{ $n }
-sample_colors_val_1 = Color de fondo: <code style="color: #8b2500">#FFB84B</code> — Ámbar dorado.
-sample_colors_val_2 = Color de fondo: <code style="color: #8b2500">#FFC66F</code> — Dorado claro.
-sample_colors_val_3 = Color de fondo: <code style="color: #8b2500">#FFD493</code> — Dorado pálido.
-sample_colors_val_4 = Color de fondo: <code style="color: #8b2500">#FFE3B7</code> — Melocotón claro.
-sample_colors_val_5 = Color de fondo: <code style="color: #8b2500">#FFF1DB</code> — Crema.
-sample_colors_val_6 = Color de fondo: <code style="color: #8b2500">#FFFFFF</code> — Blanco.
-
 # menus.rs
 sample_menus_item_label = Etiqueta
 sample_menus_item_link = Enlace

static/css/basic.css

@@ -15,10 +15,6 @@
 	--val-color--text: #212529;
 }
 
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
 html {
     scroll-behavior: smooth;
 }

static/css/intro.css

@@ -3,16 +3,15 @@
 	--intro-bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--intro-bg-img) type('image/jpeg'));
 	--intro-bg-img-sm: url('/img/intro-header-sm.jpg');
 	--intro-bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--intro-bg-img-sm) type('image/jpeg'));
-	--intro-bg-color: #7a430e;
+	--intro-bg-color: #8c5919;
-	--intro-bg-block-1: #ffb84b;
+	--intro-bg-block-1: #b689ff;
-	--intro-bg-block-2: #ffc66f;
+	--intro-bg-block-2: #fecaca;
-	--intro-bg-block-3: #ffd493;
+	--intro-bg-block-3: #e6a9e2;
-	--intro-bg-block-4: #ffe3b7;
+	--intro-bg-block-4: #ffedca;
-	--intro-bg-block-5: #fff1db;
+	--intro-bg-block-5: #ffffff;
-	--intro-bg-block-6: #ffffff;
 	--intro-color: #1a202c;
-	--intro-color-gray: #e8e3da;
+	--intro-color-gray: #e4e4e7;
-	--intro-color-link: #8b2500;
+	--intro-color-link: #1e4eae;
 	--intro-focus-outline: 2px solid var(--intro-color-link);
 	--intro-focus-outline-offset: 2px;
 	--intro-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -103,7 +102,7 @@ body {
 	font-size: clamp(2.25rem, 1.3177rem + 3.9779vw, 6.5rem);
 	font-style: normal;
 	font-weight: 700;
-	line-height: 135%;
+	line-height: 110%;
 	text-shadow: none;
 }
 .intro-header__image {
@@ -124,7 +123,7 @@ body {
 		background-image: var(--intro-bg-img-set);
 	}
 	.intro-header__title {
-		padding: 0 2rem 2.6rem 2rem;
+		padding: 1.2rem 2rem 2.6rem 2rem;
 	}
 	.intro-header__image {
 		justify-content: flex-end;
@@ -141,13 +140,10 @@ body {
 .intro-content {
 	height: auto;
 	margin-top: 1.6rem;
-	width: 100%;
 }
 .intro-content__body {
 	box-sizing: border-box;
 	max-width: 80rem;
-	margin-left: auto;
-	margin-right: auto;
 }
 .intro-content__body:before,
 .intro-content__body:after {
@@ -156,10 +152,10 @@ body {
 	left: 0;
 	right: 0;
 	background: linear-gradient(130deg, rgba(13, 44, 91, 0) 0%, #ddff95 77.4%);
-	margin: 0 -1.2rem;
+	margin: 0 -10.375rem;
 	filter: blur(2.75rem);
 	opacity: 0.8;
-	inset: unset;
+	inset: 11.75rem;
 }
 .intro-content__body:before {
 	top: -1rem;
@@ -167,22 +163,22 @@ body {
 .intro-content__body:after {
 	bottom: -1rem;
 }
-@media (width <= 48rem) {
+@media (max-width: 48rem) {
 	.intro-content__body {
 		margin-top: -9.8rem;
 	}
+	.intro-content__body:before,
+	.intro-content__body:after {
+		inset: unset;
+	}
 }
-@media (width >= 64rem) {
+@media (min-width: 64rem) {
 	.intro-content {
 		margin-top: 0;
 	}
 	.intro-content__body {
 		margin-top: -5.7rem;
 	}
-	.intro-content__body:before,
-	.intro-content__body:after {
-		inset: 11.75rem;
-	}
 }
 
 .intro-button {
@@ -311,7 +307,7 @@ body {
 .intro-button__link:hover span {
 	animation-play-state: paused;
 }
-@media (width <= 48rem) {
+@media (max-width: 48rem) {
 	.intro-header {
 		padding-bottom: 9rem;;
 	}
@@ -325,7 +321,7 @@ body {
 		padding-top: .5rem;
 	}
 }
-@media (width > 48rem) {
+@media (min-width: 48rem) {
 	.intro-button {
 		position: absolute;
 		top: 0;
@@ -348,6 +344,9 @@ body {
 	box-sizing: border-box;
 	align-items: center;
 	text-align: left;
+	font-size: 1.3125rem;
+	font-weight: 400;
+	line-height: 1.5;
 	margin-bottom: 0;
 	background: #fff;
 	position: relative;
@@ -355,19 +354,24 @@ body {
 .intro-text__children {
 	padding: 2.5rem 1.063rem 0.75rem;
 	overflow: hidden;
-	width: 100%;
 }
 .intro-text__children p {
 	width: 100%;
-	font-size: 1.5rem;
+	line-height: 150%;
+	font-weight: 400;
+	font-size: 1.45rem;
 	margin: 0 0 1.5rem;
 }
-@media (width > 48rem) {
+@media (min-width: 48rem) {
+	.intro-text {
+		font-size: 1.375rem;
+		line-height: 2rem;
+	}
 	.intro-button + .intro-text__children {
 		padding-top: 7rem;
 	}
 }
-@media (width >= 64rem) {
+@media (min-width: 64rem) {
 	.intro-header {
 		padding-bottom: 9rem;;
 	}
@@ -395,7 +399,7 @@ body {
 .intro-text__children .block__title span {
 	display: inline-block;
 	padding: 10px 30px 14px;
-	margin: 30px 20px 0;
+	margin: 30px 0 0 20px;
 	background: white;
 	border: 5px solid;
 	border-radius: 30px;
@@ -418,40 +422,35 @@ body {
 }
 .intro-text__children .block__title:after {
 	content: "";
-	height: 120%;
+	height: 70rem;
 	position: absolute;
 	top: 42px;
-	left: -25%;
+	left: -15%;
-	width: 150%;
+	width: 130%;
 	z-index: -10;
 	background: var(--intro-bg-block-1);
 	transform: rotate(2deg);
 }
-.intro-text__children .block:nth-of-type(6n+1) .block__title:after {
+.intro-text__children .block:nth-of-type(5n+1) .block__title:after {
 	background: var(--intro-bg-block-1);
 }
-.intro-text__children .block:nth-of-type(6n+2) .block__title:after {
+.intro-text__children .block:nth-of-type(5n+2) .block__title:after {
 	background: var(--intro-bg-block-2);
 }
-.intro-text__children .block:nth-of-type(6n+3) .block__title:after {
+.intro-text__children .block:nth-of-type(5n+3) .block__title:after {
 	background: var(--intro-bg-block-3);
 }
-.intro-text__children .block:nth-of-type(6n+4) .block__title:after {
+.intro-text__children .block:nth-of-type(5n+4) .block__title:after {
 	background: var(--intro-bg-block-4);
 }
-.intro-text__children .block:nth-of-type(6n+5) .block__title:after {
+.intro-text__children .block:nth-of-type(5n+5) .block__title:after {
 	background: var(--intro-bg-block-5);
 }
-.intro-text__children .block:nth-of-type(6n+6) .block__title:after {
-	background: var(--intro-bg-block-6);
-}
 
 #intro-badges {
 	display: none;
-	text-align: center;
-}
-#intro-badges img {
 	margin-bottom: 1.1rem;
+	text-align: center;
 }
 
 /*
@@ -470,8 +469,11 @@ body {
 	justify-content: center;
 	flex-direction: column;
 	margin: 0 auto;
-	padding: 0 10.625rem;
+	padding: 0 10.625rem 2rem;
 	max-width: 80rem;
+	font-size: 1.15rem;
+	font-weight: 300;
+	line-height: 100%;
 }
 .intro-footer__body a:visited {
 	color: var(--intro-color-gray);
@@ -493,13 +495,13 @@ body {
 	flex-wrap: wrap;
 	margin-top: 2rem;
 }
-@media (width <= 48rem) {
+@media (max-width: 48rem) {
 	.intro-footer__logo {
 		display: none;
 	}
 }
-@media (width <= 64rem) {
+@media (max-width: 64rem) {
 	.intro-footer__body {
-		padding: 0 1rem;
+		padding: 0 1rem 2rem;
 	}
 }