-
Notifications
You must be signed in to change notification settings - Fork 3
refactor: consolidate heading classes and use tailwind layers #467
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
Conversation
resources/assets/css/_components.css
Outdated
| .rich-select-dropdown-entry:not(.rich-select-dropdown-entry-selected):not(.rich-select-dropdown-entry-hover) { | ||
| .rich-select-dropdown-entry:not(.rich-select-dropdown-entry-selected):not( | ||
| .rich-select-dropdown-entry-hover | ||
| ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
formatting
| .navbar-container { | ||
| @apply px-10; | ||
| } | ||
| @apply px-8 md:px-10; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
replaced the @screen with md:px-10
| @apply font-bold text-theme-secondary-900; | ||
| } | ||
|
|
||
| h1 { | ||
| @apply font-bold; | ||
| } | ||
|
|
||
| .dark h1, | ||
| .dark h2, | ||
| .dark h3, | ||
| .dark h4 { | ||
| @apply text-theme-secondary-200; | ||
| @apply font-bold text-theme-secondary-900 dark:text-theme-secondary-200 leading-tight; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
additional font-bold on h1 was unnecessary. also .dark h1 can be replaced with dark:text-theme...
| @apply font-bold text-theme-secondary-900; | ||
| } | ||
|
|
||
| .header-1 { | ||
| @apply font-bold text-theme-secondary-900; | ||
| } | ||
|
|
||
| .dark header-1, | ||
| .dark header-2, | ||
| .dark header-3, | ||
| .dark header-4 { | ||
| @apply text-theme-secondary-200; | ||
| @apply font-bold text-theme-secondary-900 dark:text-theme-secondary-200 leading-tight; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as with .dark h1...
| h1, | ||
| .header-1 { | ||
| @apply text-3xl mb-1; | ||
| @apply text-3xl mb-1 md:text-4xl md:mb-2; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
replaced @screen with this
| h1, | ||
| .header-1 { | ||
| @apply text-4xl mb-2; | ||
| @layer base { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pushed core styles to base layer
| .rotate-180 { | ||
| transform: rotate(180deg); | ||
| } | ||
| @layer utilities { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pushed clear-transform and rotate-minus-90 to utilities layer. though they may not be even used in any of the projects, i wouldn't remove them here now
Summary
https://app.clickup.com/t/2u58u58
Checklist
icons.htmlfile and checked if my newly added icon is shown correctly (if necessary)