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

✨ (base): Añade with_width() a Container

Browse source
This commit is contained in:
Manuel Cillero 2026-09-19 03:14:21 +02:00
parent 9143f1eb26
commit c6cd4fcd7d
11 changed files with 325 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

97
assets/css/basic.css
View file

@ -44,7 +44,7 @@ body {
-webkit-tap-highlight-color: transparent;
}
/* Header, Aside, Content y Footer se apilan en el mismo orden ocupando todo el ancho disponible. */
/* Header, Aside, Content and Footer are stacked in that order, using the full available width. */
.wrapper {
display: flex;
flex-direction: column;
@ -125,10 +125,10 @@ body {
text-decoration: underline;
}
/* Geometría base de .dropdown-button/.dropdown-toggle (ver "Dropdown component" más abajo). Se
* declara aquí, antes de "Buttons", para que las clases .button-sm/.button-lg/.button-* ganen el
* empate de especificidad frente a ella cuando se combinan en el mismo elemento (CSS resuelve un
* empate por orden de aparición en el fichero, no por el orden de las clases en el HTML). */
/* Base geometry of .dropdown-button/.dropdown-toggle (see "Dropdown component" below). It is
* declared here, before "Buttons", so that the .button-sm/.button-lg/.button-* classes win the
* specificity tie against it when combined on the same element (CSS resolves a tie by order of
* appearance in the file, not by the order of the classes in the HTML). */
.dropdown-button,
.dropdown-toggle {
padding: 0.5rem 0.75rem;
@ -247,6 +247,79 @@ body {
gap: 0.5rem;
}
/*
* Container component
*/
/* Classes added by the `Container` component from `Width`. All of them are centered and fill the
* available width; `.container` and `.container-{name}` also get a maximum width from the
* breakpoint they name (`.container` from the first one). The minimum widths match the default
* `Theme::breakpoint_entry()` table, so a child theme that renames or resizes the breakpoints must
* also redefine these classes. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.container-sm,
.container-md {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-sm,
.container-md,
.container-lg {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1320px;
}
}
@media (min-width: 1920px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl {
max-width: 1800px;
}
}
/*
* Dialog component
*/
@ -318,10 +391,10 @@ body {
display: inline-block;
}
/* La geometría base de .dropdown-button/.dropdown-toggle vive junto a "Buttons" (antes de esta
* sección), para que las clases .button-sm/.button-lg/.button-* ganen el empate de especificidad
* frente a ella (CSS resuelve un empate por orden de aparición en el fichero, no por el orden de
* las clases en el HTML). */
/* The base geometry of .dropdown-button/.dropdown-toggle lives next to "Buttons" (before this
* section), so that the .button-sm/.button-lg/.button-* classes win the specificity tie against it
* (CSS resolves a tie by order of appearance in the file, not by the order of the classes in the
* HTML). */
.dropdown-toggle::after {
content: "\25BC";
display: inline-block;
@ -928,9 +1001,9 @@ input:disabled + label {
color: var(--val-color--text--muted);
}
/* .page-link-icon muestra el texto de navegación de los botones anterior/siguiente. El texto
accesible completo va aparte, en el aria-label del enlace. Por eso sustituir el texto visible por
otro contenido no afecta a la accesibilidad, p. ej. para usar "‹"/"›" se puede aplicar:
/* .page-link-icon shows the navigation text of the previous/next buttons. The full accessible text
goes separately, in the link's aria-label. So replacing the visible text with other content does
not affect accessibility, e.g. to use "‹"/"›" you can apply:
.page-link-icon {
display: inline-block;