malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add additional utility CSS classes

Browse Source
This commit is contained in:
Tetrakern 2024-06-12 18:40:06 +02:00
parent 3fb1807bd6
commit 2e1eb07860
5 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
DOCUMENTATION.md
View File

@ -466,21 +466,24 @@ You can also apply additional classes to single words or phrases. Switch to the
| `only-authors` | Makes element only visible to authors or higher.
| `overflow-x` | Adds horizontal scrolling if a block is too wide. Not necessary on tables.
| `no-auto-lightbox` | Prevents the lightbox script from being applied if added to an `<img>` element.
| `hide-below-desktop` | Hide element below viewport widths of less than 1024px.
| `hide-below-tablet` | Hide element below viewport widths of less than 768px.
| `hide-below-640` | Hide element below viewport widths of less than 640px.
| `hide-below-480` | Hide element below viewport widths of less than 480px.
| `hide-below-400` | Hide element below viewport widths of less than 400px.
| `hide-below-375` | Hide element below viewport widths of less than 375px.
| `hide-below-desktop` | Hides element below viewport widths of less than 1024px.
| `hide-below-tablet` | Hides element below viewport widths of less than 768px.
| `hide-below-640` | Hides element below viewport widths of less than 640px.
| `hide-below-480` | Hides element below viewport widths of less than 480px.
| `hide-below-400` | Hides element below viewport widths of less than 400px.
| `hide-below-375` | Hides element below viewport widths of less than 375px.
| `show-below-desktop` | Only show element below viewport widths of less than 1024px.
| `show-below-tablet` | Only show element below viewport widths of less than 768px.
| `show-below-640` | Only show element below viewport widths of less than 640px.
| `show-below-480` | Only show element below viewport widths of less than 480px.
| `show-below-400` | Only show element below viewport widths of less than 400px.
| `show-below-375` | Only show element below viewport widths of less than 375px.
| `hide-if-logged-in` | Hide element if the user is logged in.
| `hide-if-logged-out` | Hide element if the user is not logged in.
| `hide-if-logged-in` | Hides element if the user is logged in.
| `hide-if-logged-out` | Hides element if the user is not logged in.
| `no-theme-spacing` | Removes the top and bottom spacing applied by the theme.
| `padding-[top\|right\|bottom\|left]` | Applies directional theme page padding.
| `bg-[50\|100\|200\|...\|800\|900\|950]` | Forces the respective theme background color.
| `fg-[100\|200\|...\|800\|900\|950]` | Forces the respective theme text color.
## HTML Block

16
INSTALLATION.md
View File

@ -1447,13 +1447,17 @@ If you have the Elementor plugin installed, consider using the [Fictioneer 002 E
**Notes:**
* The `nav_bar` location also overrides the `nav_menu` location.
* The default page padding uses the `padding[-top|-right|-bottom|-left]` CSS classes.
* The position and expected content of the header depend on the Customizer option.
* The `nav_bar` location also overwrites the `nav_menu` location.
* Trying to overwrite the default navigation is generally a poor life choice.
* Use the `padding-[top|right|bottom|left]` CSS classes to apply theme page padding.
* Use the `bg-[50|100|200|...|800|900|950]` CSS classes to force theme background colors.
* Use the `fg-[100|200|...|800|900|950]` CSS classes to force theme text colors.
* Some of the [content utility CSS classes](https://github.com/Tetrakern/fictioneer/blob/main/DOCUMENTATION.md#additional-css-classes) will also work for Elementor.
* You can toggle the mobile menu with a label targeting the `mobile-menu-toggle` ID.
* The default site with is available in the `--site-width` custom CSS property.
* The default global Elementor text colors have been overwritten with theme colors.
* Elementor does not understand the theme’s display modes, colors, or custom HSL settings.
* The position and expected content of the header depend on your Customizer choices.
* The default site with is stored in the `--site-width` custom CSS property.
* The global Elementor text colors have been overwritten with theme colors.
* Elementor does not understand the theme’s display modes, colors, or HSL settings.
* Elementor makes your site slower unless you have a good cache plugin.
* Use the Canvas-type page templates if you want to drastically customize a page.
* Fictioneer is not meant for site editors; there are many limitations.

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

34
src/scss/common/_utility.scss
View File

@ -354,3 +354,37 @@ html:not(.logged-in) body:not(.logged-in) .hide-if-logged-out,
.container-inline-size {
container-type: inline-size;
}
.bg-50 {
background-color: var(--bg-50) !important;
}
@for $i from 1 through 9 {
$value: 100 * $i;
.bg-#{$value} {
background-color: var(--bg-#{$value}) !important;
}
}
.bg-950 {
background-color: var(--bg-950) !important;
}
@for $i from 1 through 9 {
$value: 100 * $i;
.fg-#{$value} {
color: var(--fg-#{$value}) !important;
}
}
.fg-950 {
color: var(--fg-950) !important;
}
.fg-tinted {
color: var(--fg-tinted) !important;
}
.fg-inverted {
color: var(--fg-inverted) !important;
}