Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor css #248

Merged
merged 83 commits into from
Jan 17, 2025
Merged

Refactor css #248

merged 83 commits into from
Jan 17, 2025

Conversation

HendrikSchmidt
Copy link
Contributor

@HendrikSchmidt HendrikSchmidt commented Jan 13, 2025

This PR does a bunch of things to refactor our CSS:

  • Updates Angie with some minor changes to typography, shouldn't be visible
    • Use default responsive header styling from Angie instead of our own
  • Creates a custom twMerge() that works with ds- classes
    • Adds an EsLint rule that prevents importing the default implementation
  • Styles lists ul and ol per default and removes those styles for exceptions
    • They get list-disc/list-decimal, pl-24 and max-w-prose
    • This styling is removed by using the newly introduced list-unstyled class
  • Removes support for IE11, "old" Safari and browser that don't support focus-visible
  • Refactors styles.css to mostly use tailwind @apply instead of native css
  • Inlines styles wherever possible
    • details / summary / Accordion styling
    • Inlines DiTo specific styles.css or moves them to shared/styles.css
    • footer links
    • PreCheckNavigation shift prevention
    • ParagraphList lists styling
  • Removes the following classes
    • rich-text (inlined)
    • text-link-white (replaced by styling .text-white .text-link now)
    • rich-text-2xl (unused)
    • sr-only (implemented by tailwind)
    • paragraph-list (inlined)
  • Refactors principle section on landing page to simplify logic

Includes some miscellaneous fixes that I happened to stumble across.

Copy link
Contributor

@mpanne mpanne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it! Thanks for the effort! ❤️

packages/shared/styles.css Show resolved Hide resolved
packages/shared/styles.css Show resolved Hide resolved
packages/shared/styles.css Show resolved Hide resolved
packages/shared/styles.css Show resolved Hide resolved
packages/dito/app/routes/_index.tsx Show resolved Hide resolved
packages/dito/app/root.tsx Show resolved Hide resolved
packages/dito/app/root.tsx Outdated Show resolved Hide resolved
packages/dito/app/root.tsx Show resolved Hide resolved
packages/shared/components/ListItem.tsx Show resolved Hide resolved
packages/shared/utils/tailwindMerge.ts Outdated Show resolved Hide resolved
@HendrikSchmidt HendrikSchmidt merged commit bb30a7f into main Jan 17, 2025
12 checks passed
@HendrikSchmidt HendrikSchmidt deleted the refactor-css branch January 17, 2025 13:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants