diff --git a/.gitignore b/.gitignore index 1e831ff3e..190f84c6f 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ coverage.xml .hypothesis/ .pytest_cache coverage/ +.playwright-mcp # Translations *.mo diff --git a/CHANGELOG.md b/CHANGELOG.md index 796b30a67..c143b70dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ This project (not yet) adheres to [Semantic Versioning](https://semver.org/spec/ ### Added - Improvements to pagination +- Footer: New Footer Module ### Changed diff --git a/adhocracy-plus/assets/images/adhocracy-short.svg b/adhocracy-plus/assets/images/adhocracy-short.svg new file mode 100644 index 000000000..959b7a519 --- /dev/null +++ b/adhocracy-plus/assets/images/adhocracy-short.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/adhocracy-plus/assets/images/bewaehrt-vor-ort.png b/adhocracy-plus/assets/images/bewaehrt-vor-ort.png new file mode 100644 index 000000000..7efef7dd5 Binary files /dev/null and b/adhocracy-plus/assets/images/bewaehrt-vor-ort.png differ diff --git a/adhocracy-plus/assets/scss/_utility.scss b/adhocracy-plus/assets/scss/_utility.scss index 5328b6617..2a1f5598b 100644 --- a/adhocracy-plus/assets/scss/_utility.scss +++ b/adhocracy-plus/assets/scss/_utility.scss @@ -184,3 +184,144 @@ text-align: center; margin: auto; } + +// Tailwind-style responsive classes: `{breakpoint}:_{utility}` (e.g. HTML `lg:_pt-12` → SCSS `.lg\:_pt-12`). +// stylelint-disable selector-class-pattern -- ":" / "_" in class names; pattern does not allow them. +._font-sans { + font-family: $font-family-base; +} + +._pt-10 { + padding-top: 2.5 * $spacer; +} + +._pb-6 { + padding-bottom: 1.5 * $spacer; +} + +._mb-14 { + margin-bottom: 3.5 * $spacer; +} + +._mb-5 { + margin-bottom: $spacer * 1.25; +} + +@media screen and (min-width: $breakpoint-md) { + .lg\:_pt-12 { + padding-top: 3 * $spacer; + } + + .lg\:_pb-8 { + padding-bottom: 2 * $spacer; + } +} + +@media screen and (min-width: $breakpoint) and (max-width: $breakpoint-md-down) { + .md\:_mb-22 { + margin-bottom: 5.5 * $spacer; + } +} + +._px-fluid { + padding-right: clamp(1rem, 4vw, 5rem); + padding-left: clamp(1rem, 4vw, 5rem); +} + +._box-border { + box-sizing: border-box; +} + +._gap-y-6 { + row-gap: 1.5rem; +} + +._gap-x-fluid { + column-gap: clamp(1rem, 2.5vw, 2.5rem); +} + +._grid-cols-2-auto { + grid-template-columns: repeat(2, auto); +} + +._justify-items-start { + justify-items: start; +} + +._col-span-full { + grid-column: 1 / -1; +} + +@media screen and (min-width: $breakpoint-xs) { + .sm\:_grid-cols-4-auto { + grid-template-columns: repeat(4, auto); + } +} + +@media screen and (min-width: $breakpoint-md) { + .lg\:_grid-cols-5-auto { + grid-template-columns: repeat(5, auto); + } + + .lg\:_col-auto { + grid-column: auto; + } +} + +@media screen and (max-width: $breakpoint-md-down) { + .max-lg\:_mb-stack { + margin-bottom: calc(39px - 24px); + } +} + +._h-9 { + height: 2.25rem; +} + +._w-9 { + width: 2.25rem; +} + +._w-22 { + width: 5.5rem; +} + +@media screen and (min-width: $breakpoint-md) { + .lg\:_w-20 { + width: 5rem; + } +} + +._row-gap-nav { + row-gap: $spacer * 0.4; +} + +._gap-3 { + gap: $spacer * 0.75; +} + +._text-xl { + font-size: 1.25em; +} + +._leading-normal { + line-height: 1.5; +} + +._tracking-wide { + letter-spacing: 0.02em; +} + +@media screen and (min-width: $breakpoint-xl) { + .xl\:_w-xl { + width: 1440px; + } +} + +@media screen and (min-width: $breakpoint-xxl) { + .xxxl\:_w-xxxl { + width: 2000px; + } +} + +// stylelint-enable selector-class-pattern \ No newline at end of file diff --git a/adhocracy-plus/assets/scss/components/_footer.scss b/adhocracy-plus/assets/scss/components/_footer.scss index 30ea32e56..7dcd00930 100644 --- a/adhocracy-plus/assets/scss/components/_footer.scss +++ b/adhocracy-plus/assets/scss/components/_footer.scss @@ -1,5 +1,27 @@ -.footer { - border-top: 2px solid $brand-primary; +// Site footer: legacy upper/CMS patterns, outline CTA, and layout chrome (pipe meta links, list markers, focus). + +// Meta legal row: pipe between items (class `footer__pipe-sep` on ul in footer.html). +.footer__pipe-sep > li { + display: inline-flex; + align-items: center; +} + +.footer__pipe-sep > li:not(:last-child):after { + content: "|"; + margin-left: $spacer * 0.5; + color: $gray-lightest; + pointer-events: none; +} + +// Base `ul` keeps browser markers; flex can still show bullets on `li` in some browsers. +.footer ul, +.footer li { + list-style: none; +} + +.footer a:focus-visible, +.footer .footer__btn-outline:focus-visible { + @include fake-focus-shadow; } .footer--cms { @@ -14,6 +36,36 @@ } } +.footer__btn-outline { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: auto; + min-width: 10rem; + max-width: none; + padding: 0.6rem 1.25rem; + border: 1px solid $print-black; + background-color: transparent; + color: $print-black; + font-size: 1em; + font-weight: normal; + text-decoration: none; + + @media screen and (max-width: $breakpoint-xs-down) { + width: 100%; + min-width: 0; + } + + &:hover, + &:focus { + background-color: transparent; + color: $print-black; + border-color: $print-black; + text-decoration: none; + } +} + .footer__description { font-family: $font-family-serif; } diff --git a/adhocracy-plus/templates/footer.html b/adhocracy-plus/templates/footer.html index e723d838a..dbec613af 100644 --- a/adhocracy-plus/templates/footer.html +++ b/adhocracy-plus/templates/footer.html @@ -1,73 +1,73 @@ {% load i18n static wagtailsettings_tags %} {% get_settings use_default_site=True %} - -