diff --git a/examples/intro-colors.rs b/examples/intro-colors.rs deleted file mode 100644 index 7853d41e..00000000 --- a/examples/intro-colors.rs +++ /dev/null @@ -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 { - 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 -} diff --git a/extensions/pagetop-aliner/static/css/styles.css b/extensions/pagetop-aliner/static/css/styles.css index 85d0811a..1cc2f5dc 100644 --- a/extensions/pagetop-aliner/static/css/styles.css +++ b/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: "("; diff --git a/helpers/pagetop-macros/src/lib.rs b/helpers/pagetop-macros/src/lib.rs index 3a597bff..1630137a 100644 --- a/helpers/pagetop-macros/src/lib.rs +++ b/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 ", - "pero sin consumirla." + "Permite modificar la instancia actual (`&mut self`) con los mismos argumentos, ", + "sin consumirla." ); // Atributos completos que se aplican siempre a `with_...()`. diff --git a/src/core/component/children.rs b/src/core/component/children.rs index 617a783d..6a4fe070 100644 --- a/src/core/component/children.rs +++ b/src/core/component/children.rs @@ -187,10 +187,10 @@ impl Embed { /// } /// }; // 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`. /// ``` diff --git a/src/core/component/context.rs b/src/core/component/context.rs index 63b2daad..e4a5c237 100644 --- a/src/core/component/context.rs +++ b/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(&self, id: Option, parts: usize) -> String { if let Some(id) = id { return id; diff --git a/src/core/component/message.rs b/src/core/component/message.rs index 9f6704a2..d0f9d77b 100644 --- a/src/core/component/message.rs +++ b/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 { diff --git a/src/locale/en-US/sample.ftl b/src/locale/en-US/sample.ftl index 8bfa4cdf..ae5b9a7f 100644 --- a/src/locale/en-US/sample.ftl +++ b/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: #FFB84B — Amber gold. -sample_colors_val_2 = Background color: #FFC66F — Light golden. -sample_colors_val_3 = Background color: #FFD493 — Pale golden. -sample_colors_val_4 = Background color: #FFE3B7 — Light peach. -sample_colors_val_5 = Background color: #FFF1DB — Cream. -sample_colors_val_6 = Background color: #FFFFFF — White. - # menus.rs sample_menus_item_label = Label sample_menus_item_link = Link diff --git a/src/locale/es-ES/sample.ftl b/src/locale/es-ES/sample.ftl index 5a706851..65785972 100644 --- a/src/locale/es-ES/sample.ftl +++ b/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: #FFB84B — Ámbar dorado. -sample_colors_val_2 = Color de fondo: #FFC66F — Dorado claro. -sample_colors_val_3 = Color de fondo: #FFD493 — Dorado pálido. -sample_colors_val_4 = Color de fondo: #FFE3B7 — Melocotón claro. -sample_colors_val_5 = Color de fondo: #FFF1DB — Crema. -sample_colors_val_6 = Color de fondo: #FFFFFF — Blanco. - # menus.rs sample_menus_item_label = Etiqueta sample_menus_item_link = Enlace diff --git a/static/css/basic.css b/static/css/basic.css index 9b23b272..6ffe4c6e 100644 --- a/static/css/basic.css +++ b/static/css/basic.css @@ -15,10 +15,6 @@ --val-color--text: #212529; } -*, *::before, *::after { - box-sizing: border-box; -} - html { scroll-behavior: smooth; } diff --git a/static/css/intro.css b/static/css/intro.css index a182767f..e3de4153 100644 --- a/static/css/intro.css +++ b/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-block-1: #ffb84b; - --intro-bg-block-2: #ffc66f; - --intro-bg-block-3: #ffd493; - --intro-bg-block-4: #ffe3b7; - --intro-bg-block-5: #fff1db; - --intro-bg-block-6: #ffffff; + --intro-bg-color: #8c5919; + --intro-bg-block-1: #b689ff; + --intro-bg-block-2: #fecaca; + --intro-bg-block-3: #e6a9e2; + --intro-bg-block-4: #ffedca; + --intro-bg-block-5: #ffffff; --intro-color: #1a202c; - --intro-color-gray: #e8e3da; - --intro-color-link: #8b2500; + --intro-color-gray: #e4e4e7; + --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%; - width: 150%; + left: -15%; + 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; } }