manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

♻️ Refactoriza página de bienvenida y tema Basic

Browse source 
- Actualiza `Welcome` para usar el nuevo componente `Intro`.
- Simplifica el tema `Basic` apoyándose en la lógica de `Theme`.
- Predefine los *assets* básicos como recursos de `Theme`.
- Refactoriza archivos de localicación para reflejar los cambios de los
componentes.
This commit is contained in:
Manuel Cillero 2025-10-12 09:15:50 +02:00
parent d0beb8ef40
commit ebf1828ea3
12 changed files with 455 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

82
static/css/intro.css
View file

@ -1,12 +1,24 @@
html {
min-height: 100%;
background-color: black;
:root {
--intro-bg-img: url('/img/intro-header.jpg');
--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: #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: #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);
}
body {
margin: auto;
.intro {
position: relative;
min-height: 100%;
min-width: 350px;
color: var(--intro-color);
background-color: var(--intro-bg-color);
@ -18,22 +30,22 @@ body {
align-items: center;
}
section {
.intro section {
position: relative;
text-align: center;
}
a {
.intro a {
color: currentColor;
text-decoration: underline;
transition: font-size 0.2s, text-decoration-color 0.2s;
}
a:focus-visible {
.intro a:focus-visible {
outline: var(--intro-focus-outline);
outline-offset: var(--intro-focus-outline-offset);
}
a:hover,
a:hover:visited {
.intro a:hover,
.intro a:hover:visited {
text-decoration-color: var(--intro-color-link);
}
@ -172,8 +184,8 @@ a:hover:visited {
justify-content: space-between;
font-size: 1.5rem;
line-height: 1.3;
text-decoration: none;
transition: transform 0.3s ease-in-out;
text-decoration: none !important;
transition: transform 0.3s ease-in-out !important;
position: relative;
overflow: hidden;
min-width: 28.875rem;
@ -307,7 +319,7 @@ a:hover:visited {
}
.intro-button__link:hover {
transition: all .5s;
transform: rotate(-3deg) scale(1.1);
transform: rotate(-3deg) scale(1.125);
}
}
@ -326,11 +338,11 @@ a:hover:visited {
background: #fff;
position: relative;
}
.region--content {
.intro-text__children {
padding: 2.5rem 1.063rem 0.75rem;
overflow: hidden;
}
.region--content p {
.intro-text__children p {
width: 100%;
line-height: 150%;
font-weight: 400;
@ -342,7 +354,7 @@ a:hover:visited {
font-size: 1.375rem;
line-height: 2rem;
}
.intro-button + .region--content {
.intro-button + .intro-text__children {
padding-top: 7rem;
}
}
@ -351,7 +363,7 @@ a:hover:visited {
padding-bottom: 9rem;;
}
.intro-text,
.region--content {
.intro-text__children {
border-radius: 0.75rem;
}
.intro-text {
@ -359,19 +371,19 @@ a:hover:visited {
max-width: 60rem;
margin: 0 auto 6rem;
}
.region--content {
.intro-text__children {
padding-left: 4.5rem;
padding-right: 4.5rem;
}
}
.region--content .block {
.intro-text__children .block {
position: relative;
}
.region--content .block__title {
.intro-text__children .block__title {
margin: 1em 0 .8em;
}
.region--content .block__title span {
.intro-text__children .block__title span {
display: inline-block;
padding: 10px 30px 14px;
margin: 30px 0 0 20px;
@ -382,7 +394,7 @@ a:hover:visited {
border-color: orangered;
transform: rotate(-3deg) translateY(-25%);
}
.region--content .block__title:before {
.intro-text__children .block__title:before {
content: "";
height: 5px;
position: absolute;
@ -395,7 +407,7 @@ a:hover:visited {
transform: rotate(2deg) translateY(-50%);
transform-origin: top left;
}
.region--content .block__title:after {
.intro-text__children .block__title:after {
content: "";
height: 70rem;
position: absolute;
@ -406,22 +418,28 @@ a:hover:visited {
background: var(--intro-bg-block-1);
transform: rotate(2deg);
}
.region--content .block:nth-of-type(5n+1) .block__title:after {
.intro-text__children .block:nth-of-type(5n+1) .block__title:after {
background: var(--intro-bg-block-1);
}
.region--content .block:nth-of-type(5n+2) .block__title:after {
.intro-text__children .block:nth-of-type(5n+2) .block__title:after {
background: var(--intro-bg-block-2);
}
.region--content .block:nth-of-type(5n+3) .block__title:after {
.intro-text__children .block:nth-of-type(5n+3) .block__title:after {
background: var(--intro-bg-block-3);
}
.region--content .block:nth-of-type(5n+4) .block__title:after {
.intro-text__children .block:nth-of-type(5n+4) .block__title:after {
background: var(--intro-bg-block-4);
}
.region--content .block:nth-of-type(5n+5) .block__title:after {
.intro-text__children .block:nth-of-type(5n+5) .block__title:after {
background: var(--intro-bg-block-5);
}
#intro-badges {
display: none;
margin-bottom: 1.1rem;
text-align: center;
}
/*
* Footer
*/
@ -474,9 +492,3 @@ a:hover:visited {
padding: 0 1rem 2rem;
}
}
/* PoweredBy component */
.poweredby a:visited {
color: var(--intro-color-gray);
}