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

♻️ (base): Reorganiza el componente Intro

Browse source
This commit is contained in:
Manuel Cillero 2026-09-20 23:53:18 +02:00
parent 404739a3fd
commit 16eec316c4
12 changed files with 439 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

65
assets/css/intro.css
View file

@ -22,6 +22,10 @@ body {
overflow-x: clip;
}
/*
* Media queries: 768px and 992px match the default `Md` and `Lg` breakpoints of the core.
*/
.intro {
position: relative;
color: var(--intro-color);
@ -44,20 +48,6 @@ body {
text-align: center;
}
.intro a {
color: currentColor;
text-decoration: underline;
transition: font-size 0.2s, text-decoration-color 0.2s;
}
.intro a:focus-visible {
outline: var(--intro-focus-outline);
outline-offset: var(--intro-focus-outline-offset);
}
.intro a:hover,
.intro a:hover:visited {
text-decoration-color: var(--intro-color-link);
}
/*
* Intro Header
*/
@ -117,7 +107,7 @@ body {
width: 280px;
height: 280px;
}
@media (min-width: 64rem) {
@media (width >= 992px) {
.intro-header {
background-image: var(--intro-bg-img);
background-image: var(--intro-bg-img-set);
@ -166,12 +156,12 @@ body {
.intro-content-body:after {
bottom: -1rem;
}
@media (width <= 48rem) {
@media (width < 768px) {
.intro-content-body {
margin-top: -9.8rem;
}
}
@media (width >= 64rem) {
@media (width >= 992px) {
.intro-content {
margin-top: 0;
}
@ -208,6 +198,10 @@ body {
min-height: 7.6875rem;
outline: none;
}
.intro-button-link:focus-visible {
outline: var(--intro-focus-outline);
outline-offset: var(--intro-focus-outline-offset);
}
.intro-button-link::before {
content: '';
position: absolute;
@ -310,7 +304,7 @@ body {
.intro-button-link:hover span {
animation-play-state: paused;
}
@media (width <= 48rem) {
@media (width < 768px) {
.intro-header {
padding-bottom: 9rem;;
}
@ -324,7 +318,7 @@ body {
padding-top: .5rem;
}
}
@media (width > 48rem) {
@media (width >= 768px) {
.intro-button {
position: absolute;
top: 0;
@ -361,12 +355,12 @@ body {
font-size: 1.5rem;
margin: 0 0 1.5rem;
}
@media (width > 48rem) {
@media (width >= 768px) {
.intro-button + .intro-text-body {
padding-top: 7rem;
}
}
@media (width >= 64rem) {
@media (width >= 992px) {
.intro-header {
padding-bottom: 9rem;;
}
@ -376,9 +370,18 @@ body {
}
.intro-text {
box-shadow: var(--intro-shadow);
max-width: 60rem;
max-width: min(60rem, 100vw - 4rem);
margin: 0 auto 6rem;
}
.intro-text-narrow {
max-width: min(50rem, 100vw - 4rem);
}
.intro-text-wide {
max-width: min(67rem, 100vw - 4rem);
}
.intro-text-full {
max-width: min(74rem, 100vw - 4rem);
}
.intro-text-body {
padding-left: 4.5rem;
padding-right: 4.5rem;
@ -479,6 +482,20 @@ body {
.intro-footer-body a:visited {
color: var(--intro-color-gray);
}
/* The footer has its own dark surface, so its links don't inherit the theme's link colors. */
.intro-footer-links a {
color: currentColor;
text-decoration: underline;
transition: font-size 0.2s, text-decoration-color 0.2s;
}
.intro-footer-links a:focus-visible {
outline: var(--intro-focus-outline);
outline-offset: var(--intro-focus-outline-offset);
}
.intro-footer-links a:hover,
.intro-footer-links a:hover:visited {
text-decoration-color: var(--intro-color-link);
}
.intro-footer-logo,
.intro-footer-links {
display: flex;
@ -496,12 +513,12 @@ body {
flex-wrap: wrap;
margin-top: 2rem;
}
@media (width <= 48rem) {
@media (width < 768px) {
.intro-footer-logo {
display: none;
}
}
@media (width <= 64rem) {
@media (width < 992px) {
.intro-footer-body {
padding: 0 1rem;
}