Skip to content

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.

Sign up for GitHub

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

Merged
merged 17 commits into from
Jan 13, 2023
Merged

refactor: consolidate heading classes and use tailwind layers #467

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7bca095
Update _general.css
crnkovic Aug 30, 2022
f1bafb4
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 2, 2022
55c5c8e
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 8, 2022
36f8191
style: format icons
crnkovic Sep 8, 2022
ace4fcc
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 16, 2022
a2099bf
style: format icons
crnkovic Sep 16, 2022
dd01b98
Update _general.css
crnkovic Sep 16, 2022
961d8cb
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 16, 2022
66f636e
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 19, 2022
8769e16
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 27, 2022
70b538e
style: resolve style guide violations
crnkovic Sep 27, 2022
85ecb64
style: resolve style guide violations
ItsANameToo Sep 27, 2022
3966a90
Merge branch 'main' into refactor/heading-classes
crnkovic Sep 30, 2022
2ca5f4e
Merge branch 'main' into refactor/heading-classes
crnkovic Dec 6, 2022
0a098d8
style: resolve style guide violations
crnkovic Dec 6, 2022
2c03d28
Merge branch 'main' into refactor/heading-classes
crnkovic Jan 11, 2023
22b3d71
Merge branch 'main' into refactor/heading-classes
ItsANameToo Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 25 additions & 88 deletions resources/assets/css/_general.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,62 +9,34 @@

/* Navbar container */
.navbar-container {
@apply px-8;
}

@screen md {
.navbar-container {
@apply px-10;
}
@apply px-8 md:px-10;
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

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

}

/** Headings with H **/
h1,
h2,
h3,
h4 {
@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;
Comment on lines -26 to +20
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

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...

}

/** Headings without H **/
.header-1,
.header-2,
.header-3,
.header-4 {
@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;
Comment on lines -45 to +28
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

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...

}

/* Heading consistency */
h1,
.header-1 {
@apply text-3xl mb-1;
@apply text-3xl mb-1 md:text-4xl md:mb-2;
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

Choose a reason for hiding this comment

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

replaced @screen with this

}

h2,
.header-2 {
@apply text-2xl mb-1;
@apply text-2xl mb-1 md:text-3xl;
}

h3,
Expand All @@ -74,72 +46,37 @@ h3,

h4,
.header-4 {
@apply text-lg mb-1;
@apply text-lg mb-1 md:text-2xl;
}

/* Header Responsiveness */
@screen md {
h1,
.header-1 {
@apply text-4xl mb-2;
@layer base {
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

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

a:focus,
button:focus,
textarea:focus,
input:focus {
@apply outline-none;
}

h2,
.header-2 {
@apply text-3xl;
button,
img {
@apply select-none;
-webkit-user-drag: none;
}

h3,
.header-3 {
@apply text-2xl;
body {
@apply font-sans text-theme-secondary-700 antialiased;
}
}

h1,
.header-1,
h2,
.header-2,
h3,
.header-3,
h4,
.header-4 {
@apply leading-tight;
}

a:focus,
button:focus,
textarea:focus,
input:focus {
@apply outline-none;
}

button,
img {
@apply select-none;
-webkit-user-drag: none;
}

body {
@apply font-sans text-theme-secondary-700 antialiased;
}

.clear-transform {
transform: none;
}

.rotate-90 {
transform: rotate(90deg);
}

.rotate-180 {
transform: rotate(180deg);
}
@layer utilities {
Copy link
Contributor Author

@crnkovic crnkovic Dec 7, 2022

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

.clear-transform {
transform: none;
}

.rotate-minus-90 {
transform: rotate(-90deg);
}
.rotate-minus-90 {
transform: rotate(-90deg);
}

@layer utilities {
.size-increase {
transform: scale(1.02);
}
Expand Down