Compare commits
No commits in common. "f359b361223f3f4b6bd2048c17c615471c4bf9ce" and "f85f2ea2d1730a130a3f5ff05948d8d00e418964" have entirely different histories.
f359b36122
...
f85f2ea2d1
10 changed files with 57 additions and 160 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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: "(";
|
||||
|
|
|
|||
|
|
@ -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_...()`.
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
/// ```
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -15,10 +15,6 @@
|
|||
--val-color--text: #212529;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue