Enhance css reset #211
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /* | ||
| * Custom Selectors | ||
| * ...grouping of selectors to make life easier to manage | ||
| */ | ||
|
|
||
| /* All heading levels supported */ | ||
| @custom-selector :--headings h1, h2, h3, h4, h5, h6; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| @import url("colors.css"); | ||
| @import url("media-queries.css"); | ||
| @import url("custom-selectors.css"); |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @import url("reset.css"); | ||
| @import url("mixins.css"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Mixins | ||
| * Use mixins to keep code DRY where viable | ||
| */ | ||
|
|
||
| /* | ||
| @define-mixin icon $name { | ||
| padding-left: 16px; | ||
| &::after { | ||
| content: ""; | ||
| background: url(/icons/$(name).png); | ||
| } | ||
| } | ||
|
|
||
| .search { | ||
| @mixin icon search; | ||
| } | ||
| } */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,83 @@ | ||||||||
| /** | ||||||||
| * Reset.css | ||||||||
| * Custom reset enhancments. | ||||||||
| * Primary reset is modern-normalize (by default) | ||||||||
| * imported in ../style.css | ||||||||
| */ | ||||||||
|
|
||||||||
| /* | ||||||||
| * Reset spacing & font inheritance | ||||||||
| * | ||||||||
| * Font iheriance: We add intentional font inheritence as there are browser | ||||||||
| * inconstencies as well as some instances where lacking implecit inheritence | ||||||||
| * can cause challenges | ||||||||
| * | ||||||||
| * Margin & Padding reset: We reset margin and padding to 0 to ensure a | ||||||||
| * consistentstarting point for all elements | ||||||||
| */ | ||||||||
| * { | ||||||||
| font: inherit; | ||||||||
| margin: 0; | ||||||||
| padding: 0; | ||||||||
| } | ||||||||
|
|
||||||||
| html { | ||||||||
|
|
||||||||
| /* enable dark and light color schemes by default */ | ||||||||
| color-scheme: dark light; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ | ||||||||
|
|
||||||||
| /* enable hanging punctuation */ | ||||||||
| hanging-punctuation: first last; /* stylelint-disable-line scale-unlimited/declaration-strict-value */ | ||||||||
|
There was a problem hiding this comment. Same thing here with the stylelint override |
||||||||
| } | ||||||||
|
|
||||||||
| /* | ||||||||
| * Ensure body is at least 100% of viewport height | ||||||||
| */ | ||||||||
| body { | ||||||||
| min-height: 100svh; | ||||||||
|
There was a problem hiding this comment. Shouldn't we be using
Suggested change
|
||||||||
| } | ||||||||
|
|
||||||||
| /* | ||||||||
| * Responsive media | ||||||||
| */ | ||||||||
| img, | ||||||||
| picture, | ||||||||
| svg, | ||||||||
| video { | ||||||||
| display: block; | ||||||||
|
There was a problem hiding this comment. I'm a strong believer in setting images to |
||||||||
| max-width: 100%; | ||||||||
| } | ||||||||
|
|
||||||||
| :--headings { | ||||||||
| text-wrap: balance; | ||||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||||
| } | ||||||||
|
|
||||||||
| p { | ||||||||
|
|
||||||||
| /* | ||||||||
| * Adding a readable max width to all paragraphs to prevent | ||||||||
| * long lines of text. | ||||||||
| * | ||||||||
| * NOTE: if using the lobomized owl technique - this style may be overridden | ||||||||
| */ | ||||||||
| max-width: 75ch; /* 75 characters - may wish to replace with custom property */ | ||||||||
|
There was a problem hiding this comment. I think this is too opinionated for the scaffold |
||||||||
| text-wrap: pretty; | ||||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. this has a negative impact on performance, while I was hesitant on all headings by default, definitely shouldn't happen on all paragraphs |
||||||||
| } | ||||||||
|
|
||||||||
| /* | ||||||||
| * Enable mooth scrolling by default | ||||||||
| */ | ||||||||
| @media (prefers-reduced-motion: no-preference) { | ||||||||
|
|
||||||||
| :has(:target) { /* include all elements with a target (i.e. html only will not include dialogs) */ | ||||||||
| scroll-behavior: smooth; | ||||||||
| scroll-padding-top: var(--scroll-padding-default,); /* empty fallback if property doesn't exist */ | ||||||||
| } | ||||||||
| } | ||||||||
|
|
||||||||
| /* | ||||||||
| * Create a root stacking context | ||||||||
| */ | ||||||||
| .wp-site-blocks { | ||||||||
| isolation: isolate; | ||||||||
| } | ||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,4 +8,5 @@ | |
| */ | ||
| button:where(:not(.components-button)) { | ||
|
|
||
| /* styles here */ | ||
| } | ||
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,4 +8,5 @@ | |
| */ | ||
| a:where(:not(.components-external-link)) { | ||
|
|
||
| /* styles here */ | ||
| } | ||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Do we want to enable dark mode by default? We don't usually style for it unless it is a specific requests.
Also I don't think we should have to override our own linting rules in our scaffold.
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.
I don't think this enables dark mode by default, just that it allows it to be both dark and light