diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..fd7ef3a --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,227 @@ +{ + "extends": "stylelint-config-standard", + "plugins": [ + "stylelint-order" + ], + "rules": { + "alpha-value-notation": "number", + "color-function-notation": ["legacy", { + "ignore": ["with-var-inside"] + }], + "comment-whitespace-inside": null, + "custom-property-pattern": "^[a-z][a-zA-Z]+$", + "custom-property-empty-line-before": null, + "selector-type-no-unknown": null, + "string-quotes": "double", + "order/properties-order": [ + "content", + + "quotes", + "counter-reset", + "counter-increment", + "resize", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + + "align-self", + "justify-self", + "order", + + "position", + "top", + "right", + "bottom", + "left", + "z-index", + + "display", + "visibility", + "float", + "clear", + "overflow", + "overflow-x", + "overflow-y", + + "clip", + "zoom", + + "object-fit", + "object-position", + + "color", + "font", + "font-family", + "src", + "font-variant-alternates", + "font-weight", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "text-align", + "text-align-last", + "vertical-align", + "white-space", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-indent", + "text-justify", + "text-transform", + "letter-spacing", + "word-spacing", + "text-outline", + "text-wrap", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "word-wrap", + "word-break", + "tab-size", + "hyphens", + "text-decoration", + "text-shadow", + "font-size", + "line-height", + + "box-sizing", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "padding-block-start", + "padding-block-end", + "padding-inline-start", + "padding-inline-end", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + + "border", + "border-collapse", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "border-block-start", + "border-block-start-width", + "border-block-start-style", + "border-block-start-color", + "border-inline-end", + "border-inline-end-width", + "border-inline-end-style", + "border-inline-end-color", + "border-block-end", + "border-block-end-width", + "border-block-end-style", + "border-block-end-color", + "border-inline-start", + "border-inline-start-width", + "border-inline-start-style", + "border-inline-start-color", + + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "border-image", + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + + "background", + "background-color", + "background-image", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "background-position-y", + "background-clip", + "background-origin", + "background-size", + + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "margin-block-start", + "margin-block-end", + "margin-inline-start", + "margin-inline-end", + + + "direction", + "unicode-bidi", + "orphans", + "widows", + + + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + + "box-decoration-break", + "box-shadow", + + "opacity", + "filter", + "transition", + "transition-delay", + "transition-timing-function", + "transition-duration", + "transition-property", + "transform", + "transform-origin", + "animation", + "animation-name", + "animation-duration", + "animation-play-state", + "animation-timing-function", + "animation-delay", + "animation-iteration-count", + "animation-direction", + "cursor", + "user-select", + "pointer-events" + ] + } +} \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f537d16..0df01bb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -28,7 +28,7 @@ A good bug report shouldn't leave others needing to chase you up for more inform * What steps will reproduce the issue? (i.e. The minimum amount of code that shows the problem) * What browser(s) and OS experience the problem? (i.e. Browsers and operating systems with exact version numbers ) -* What would you expect to be the outcome and what _is_ the outcome? (i.e. "was expecting `font-size` to e `17px`, it is `21px` ) +* What would you expect to be the outcome and what _is_ the outcome? (i.e. "was expecting `font-size` to be `17px`, it is `21px` ) All these details will help people to fix any potential bugs. @@ -135,8 +135,11 @@ If you have commit access, please follow this process for merging patches, minor Semver is a widely accepted method for deciding how version numbers are incremented in a project. Versions are written as MAJOR.MINOR.PATCH. -Any change to CSS rules is considered backwards-breaking and will result in a new major release. No changes to CSS _rules_ can add functionality in a backwards-compatible manner, therefore no changes are considered minor. +Almost any change to CSS rules is considered backwards-breaking and will result in a new major release. No changes to CSS _rules_ can add functionality in a backwards-compatible manner, therefore almost no changes are considered minor. -_Adding_ CSS Variables (without applying them to any rules) is considered a minor release. Changes to documentation or the test.html file also qualify as a minor release. +The only exceptions are: -Corrections to documentation count as a patch. +- _Adding_ CSS Variables (without applying them to any rules). This considered a minor release. +- Changes to documentation or the test.html file. This qualifies as a minor release. +- Changes to the linter or tester. This qualifies as a minor release. +- _Corrections_ to documentation count as a patch. diff --git a/README.md b/README.md index 694eb11..71eeb98 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ # Typography-baseline.css + > A good start to your CSS typography that covers all the semantic nooks and crannies [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url] **NPM** -``` + +```bash npm install --save typography-baseline.css ``` @@ -12,24 +14,31 @@ npm install --save typography-baseline.css `https://raw.githubusercontent.com/paceaux/typography-baseline/master/src/baseline.css` ## What does it do? + ### It gives you a good start -Before you start the layout of a web site or web application, and before you dive into applying to brand, you need something to which you should apply your brand. This is that thing. -The easiest place to start in a design is with the typography. This makes it easy to do that. +Before you start the layout of a web site or web application, and before you dive into applying to brand, you need something to which you should apply your brand. This is that thing. + +The easiest place to start in a design is with the typography. + +This makes it easy to do that. ### It covers all your semantic markup -Driven by the [W3C spec](https://www.w3.org/TR/html5/) this addresses almost every semantic element that will wrap text and makes sure that everything looks like _something_. + +Driven by the [W3C spec](https://www.w3.org/TR/html5/) this addresses almost every semantic element that will wrap text and makes sure that everything looks like _something_. The test.html file uses each and every element according to its semantic definition, too. So you have a miniature guide to semantics built in. This saves you from a scare down the road when someone wants to output the `` element, use ``, or try some other obscure element. ### Gives you a "no-design" design -For those times where you need just a bit more than a [Normalize](http://necolas.github.io/normalize.css/), but way less than [Bootstrap](https://getbootstrap.com/), this gets you there. -This is a fairly unopinionated approach to making sure that the text has a decent font family, decent spacing, and decent visual appeal. +For those times where you need just a bit more than a [Normalize](http://necolas.github.io/normalize.css/), but way less than [Bootstrap](https://getbootstrap.com/), this gets you there. + +This is a fairly unopinionated approach to making sure that the text has a decent font family, decent spacing, and decent visual appeal. ## Browser Support + * Firefox * Chrome * Edge @@ -38,6 +47,7 @@ This is a fairly unopinionated approach to making sure that the text has a decen ## Usage + While this is relatively unopinionated, there are a few "opinions" to consider: * [`em` for for `font-size`](https://css-tricks.com/rems-ems/) @@ -46,68 +56,76 @@ While this is relatively unopinionated, there are a few "opinions" to consider: * [text-spacing based on the golden ratio ](https://pearsonified.com/golden-ratio-typography-intro/)(.618 / 1.618) ### Fitting it into a CSS architecture + This would come after a reset / [normalize](https://necolas.github.io/normalize.css/) and before you set baseline styles for forms or tables. If you're a fan of [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), this is in the Elements layer. -If you were to load this into a [CSS Layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), you would want it to come very early so that you could over ride it. +If you were to load this into a [CSS Layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), you would want it to come very early so that you could over ride it. -Wherever you place it, place it _early_ in the cascade so that other things can use and/or re-declare the variables. +Wherever you place it, place it _early_ in the cascade so that other things can use and/or re-declare the variables. #### Using it in a project + 1. Add the baseline - - import into your project with NPM `@import typography-baseline.css` - - copy + paste this project's `baseline.css` + * import into your project with NPM `@import typography-baseline.css` + * copy + paste this project's `src/baseline.css` 2. Add your own `typography.css` file that comes after the baseline, but before you style anything else. 3. Add something like `html {}` or `body {}`. 4. Modify the variables _in those rulesets_. -5. Then add your own element styles. +5. Then add your own element styles. **Don't modify the typography-baseline directly. Modify the variables it sets with new rulesets.** ### Modifying without Swearing or Heavy Drinking + One of the really annoying things about other CSS frameworks (cough cough Bootstrap) is that you mostly have to write new CSS to overwrite the existing styles. Often that means raising specificity, which is really stinking annoying. This is designed to avoid that by using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +See [Standards and Conventions](#standards-and-conventions) for understanding why variables are named the way they are. + +#### Override close to (or at) the root The typography baseline sets all of the CSS variables on the `:root`. As CSS variables are subject to the cascade, you can override _any_ variable at any time by changing its value — on the same selector *or* a more specific one. -You can import this into your current CSS setup, and overwrite all the variables by setting new ones on the `html` element. +You can import this into your current CSS setup, and overwrite all the variables by setting new ones on the `html` element. So if you want the `--baseLinkColor` to be different, you can write the following in your own stylesheet: -``` +```css html { --baseLinkColor: #c0ffee } ``` -**No raising specificity. Just changing a variable.** +#### No raising specificity; just changing a variable If you want to theme a special area of the site, or even a particular widget, it's just: -``` +```css .theme { --baseLinkColor: #c0ffee } ``` +#### Color Palette(s) -#### Color Palette -Colors are derivatives of a base value of 55. All of the neutral colors are multipliers of rgb(55,55,55). Even the non-neutral colors are close-ish to that. +The color palette contains predominantly neutral colors. +Neutral colors are derivatives of a base value of 31. All of the neutral colors are multipliers of rgb(31,31,31). + +```css + --colorNeutralDarker: rgb(31,31,31); /* base */ + --colorNeutralDark: rgb(62,62,62); /* base * 2 */ + --colorNeutral: rgb(155,155,155); /* base * 5 */ + --colorNeutralLight: rgb(186,186,186); /* base * 6 */ + --colorNeutralLighter: rgb(217,217,217); /* base * 7 */ ``` - --colorNeutralDarker: rgb(55,55,55); /* base */ - --colorNeutralDark: rgb(110,110,110); /* base * 2: */ - --colorNeutral: rgb(165,165,165); /* base * 3: */ - --colorNeutralLight: rgb(192.5,192.5,192.5); /* base * 3.5 */ - --colorNeutralLighter: rgb(220,220,220); /* base * 4: */ -``` -Color-naming convention follows a pattern established [here](https://codepen.io/paceaux/pen/XdxQza). A big huge and heavy thanks to Sarah Braumiller for suggesting that convention years ago. -[The great big idea](https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/#css-pre-processor-naming-scss-sass-less-stylus) is that these color name tells you a meaningful aspect of the value, not the value itself. That way it feels safer changing it. +The color-naming convention follows a pattern established [here](https://codepen.io/paceaux/pen/XdxQza). A big huge and heavy thanks to Sarah Braumiller for suggesting that convention years ago. -#### Colors -All of the color variables are abstractions from the color palette. This is so you can change these colors without having to touch your neutral palette. +#### Applying Colors -``` +All of the color variables are abstractions from the color palette. This is so you can change these colors without having to touch your neutral palette — and you can add new palettes if you want. + +```css --baseTextColor: var(--colorNeutralDarker); --baseEditorialTextColor: var(--colorNeutralDark); --baseLinkColor: var(--colorCool); @@ -116,18 +134,19 @@ All of the color variables are abstractions from the color palette. This is so y ``` #### Line Heights + The `--baseLineHeight` is applied to body copy, and the `--smallLineHeight` is used on titles: -``` +```css --baseLineHeight: 1.618; --smallLineHeight: 1.2; ``` -#### Text Sizes -You have a minimum of 6 text sizes in two categories: `--TextSize` and `--TitleSize`. You have a "base" and then superlatives or diminutives to describe the deviation from that base. e.g.: +#### Text and Title Sizes +You have a minimum of 6 text sizes in two categories: `--TextSize` and `--TitleSize`. You have a "base" and then superlatives or diminutives to describe the deviation from that base. e.g.: -``` +```css --biggestTextSize: 1.3em; --biggerTextSize: 1.2em; --bigTextSize: 1.1em; @@ -137,12 +156,11 @@ You have a minimum of 6 text sizes in two categories: `--TextSize` and `-- --smallestTextSize: .618em; ``` -For _titles_ you have only _six_ sizes, instead of seven. That's because each title size corresponds to an `` element. +For _titles_ you have only _six_ sizes, instead of seven. That's because each title size corresponds to an `` element. -You may also notice that title sizes overlap with base text sizes. This is intentional! You have the flexibility to have your smaller headings be the same as larger text, or to create new title sizes for your headings that won't overlap with the text. +You may also notice that title sizes overlap with base text sizes. This is intentional! You have the flexibility to have your smaller headings be the same as larger text, or to create new title sizes for your headings that won't overlap with the text. - -``` +```css --biggestTitleSize: 2.617924em; /* (16 x 1.618) x 1.618 */ --bigTitleSize: 1.618em; --baseTitleSize: 1.5em; @@ -151,16 +169,18 @@ You may also notice that title sizes overlap with base text sizes. This is inten --smallestTitleSize: var(--bigTextSize); ``` -You may notice that all of the font-sizes are in `em`. This is _intentional_ so that your headlines can scale easily relative to the font-size of their containers. That means **you should be careful about how many times you change `font-size`**. +You may notice that all of the font-sizes are in `em`. This is _intentional_ so that your headlines can scale easily relative to the font-size of their containers. That means **you should be careful about how many times you change `font-size`**. -If you think you'll be changing `font-size` _a lot_, you may want to set these in `rem` instead, to avoid FOUC (Flash Of Unstyled Content). +If you think you'll be changing `font-size` _a lot_, you may want to set these in `rem` instead, to avoid FOUC (Flash Of Unstyled Content). #### Spacing + Spacing is done with the golden ratio (.618 / 1.618) -`rem` is used for horizontal spacing so that text remains aligned, regardless of size. `em` is used for vertical spacing so that bigger text gets more room to breathe. -You have two spacings to start with. +`rem` is used for horizontal spacing so that text remains aligned, regardless of size. `em` is used for vertical spacing so that bigger text gets more room to breathe. -``` +You have two spacings to start with. + +```css --bigSpacingHorizontal: 1.618rem; --baseSpacingHorizontal: .618rem; @@ -171,28 +191,30 @@ You have two spacings to start with. #### Font Modifications ##### Font families -You have three font families to choose from. `--baseFontFamily` is applied to the html element. -``` +You have three font families to choose from. `--baseFontFamily` is applied to the html element. + +```css --baseFontFamily: Georgia, 'Times New Roman', serif; --titleFontFamily: Helvetica, Arial, sans-serif; --codeFontFamily: monospace; ``` ##### Font Weights + You have three font weights to choose from. -``` +```css --lightestFontWeight: 100; --baseFontWeight: 400; --heaviestFontWeight: 700; ``` - While the browser technically has nine font-weights, you're only able to add another four (for a total of seven) by following the pattern of adding "er" or "est". If you *really* need nine font-weights, consider naming the ones at the heavy end `--ultraHeavy` and `--ultraHeaviest`. - + While the browser technically has nine font-weights, you're only able to add another four (for a total of seven) by following the pattern of adding "er" or "est". If you *really* need nine font-weights, consider naming the ones at the heavy end `--ultraHeavy` and `--ultraHeaviest`. + *Just make sure you've added those typefaces!* - ``` + ```css --lightFontWeight: 300; --lighterFontWeight: 200; --heavyFontWeight: 500; @@ -202,41 +224,93 @@ You have three font weights to choose from. If you add more font-weights, remember that [the browser will synthesize the font weights unless proper font-families with those weights are provided](https://w3c.github.io/csswg-drafts/css-fonts-4/#missing-weights)— unless you are using a [variable font ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#variable_fonts). **Add more font-weights carefully**. ##### Font Styles -You have three font styles to use. These are called `fontVoice` because it's important for you to imagine how a person might read the text _out loud_. If you think someone might enunciate or pronounce it differently, that's "italic" (what you might use for `` or ``). The browser will actually look for an italic font. + +You have three font styles to use. These are called `fontVoice` because it's important for you to imagine how a person might read the text _out loud_. If you think someone might enunciate or pronounce it differently, that's "italic" (what you might use for `` or ``). The browser will actually look for an italic font. If you just want to show slanted text, that's "oblique". The browser is just going to angle the font. -``` +```css --shiftedFontVoice: oblique 15deg; --baseFontVoice: normal; --alternateFontVoice: italic; ``` #### Quote Styles + One of the very few strong opinions in this baseline is the look and feel of a blockquote. However, you can set the quotes that come before and after the `
` and `` elements. This is useful for internationalization; you have one place to make sure all quote symbols are updated! -``` +```css --baseTextQuotes: "\201C""\201D""\2018""\2019"; ``` `
` and `` both share a thick left "quote border": -``` +```css --baseQuoteBorder: 10px solid var(--colorNeutralLighter); --smallQuoteBorder: 5px solid var(--colorNeutralLight); ``` -## Conventions and Standards +#### Links + +One of the only strong opinions here is how links are presented. Instead of using using `text-decoration`, they use a bottom border. This is because I like just a little more space between text and line than what `text-decoration` offers. + +Your core link-related styles are: + +```css + --baseLinkColor: var(--colorCool); + --baseLinkColorHover: var(--colorCoolDarker); + + --idleTextLineStyle: dotted; /* default */ + --interestTextLineStyle: solid; /* :hover and :focus*/ + --activeTextLineStyle: solid; /* :active */ + --idleTextDecoration: var(--idleTextLineStyle) underline 2px; +``` + +Since we indicate interaction with color and border, if you wanted to change how links behave, you would need to target `:hover`, `:focus`, and `:active` states. e.g.: + +```css +a { + border-bottom: 1px var(--idleTextLineStyle); +} + +a:hover, +a:focus { + border-bottom-style: var(--interestTextLineStyle); +} + +a:active { + border-bottom-style: var(--activeTextLineStyle); +} +``` + +## Standards and Conventions + +### Accessibility (A11Y) + +The test.html file passes [WCAG 2.1](https://www.w3.org/TR/WCAG21/) level AA guidelines. It is tested _manually_ using the [Axe dev tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) Chrome extension. + +The text and link colors were determined by testing how they contrast each other and a white background using [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/). ### Style guide -The CSS follows the guidelines established [here](https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb5046422). + +The CSS is linted against [stylelint](https://stylelint.io/). The rules are in the `.stylelintrc` file. There is a specific order for CSS properties (content, position, font, inside-out box sizing, effects). ### Naming Conventions + CSS Variable names follow a convention established [here](https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/). +The guiding principles for the variable names are: + +* camelCased +* Describe usage or purpose +* Favor descriptors (adjectives) that can use common comparatives and superlatives (e.g er and est) to indicate how variations of a common value are related. +* Start by indicating if it's a base or a derivative with a modifier(adjective): base, small, big, shifted, alternate +* Then indicate the domain of the user experience the variable affects with a noun: color, font, lineHeight, spacing, text, title, voice +* If necessary, narrow the domain with another noun: + * Subdomain of the affected value: LineStyle, Size, Weight + * A specific state where the value might change: Hover, interest [license-image]: http://img.shields.io/npm/l/typography-baseline.css.svg [license-url]: LICENSE [downloads-image]: http://img.shields.io/npm/dm/typography-baseline.css.svg [downloads-url]: http://npm-stat.com/charts.html?package=typography-baseline.css - diff --git a/package.json b/package.json index 071fcd5..5ece2c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "typography-baseline.css", - "version": "4.0.0", + "version": "5.0.0", "description": "A good start to your CSS typography that covers all the semantic nooks and crannies", "main": "src/baseline.css", "style": "src/baseline.css", @@ -21,5 +21,13 @@ "url": "https://github.com/paceaux/typography-baseline/issues" }, "homepage": "https://github.com/paceaux/typography-baseline#readme", - "author": "Frank M. Taylor" -} \ No newline at end of file + "author": "Frank M. Taylor", + "devDependencies": { + "stylelint": "^15.6.1", + "stylelint-config-standard": "^33.0.0", + "stylelint-order": "^6.0.3" + }, + "scripts": { + "test": "stylelint src/baseline.css" + } +} diff --git a/src/baseline.css b/src/baseline.css index e0fc7c2..ef2fe49 100644 --- a/src/baseline.css +++ b/src/baseline.css @@ -2,16 +2,21 @@ /*===== #Color #Palette #Variables Variables follow convention found here: https://codepen.io/paceaux/pen/XdxQza - Color is a dark, dark gray rgb (55, 55, 55). All grays and base line styles are multiples of this - Using a "base value", all colors are a multiple of 55 + Color is a very dark gray: rgb (31, 31, 31). Grays are multiples of 31. + The NeutralDarker gray passes WCAGAA for contrast against a light background =====*/ - --colorNeutralDarker: rgb(55,55,55); /*base: #373737; hsl(22%, 22%, 22%) */ - --colorNeutralDark: rgb(110,110,110); /* base * 2: #6e6e6e; hsl(0, 0%, 43%) */ - --colorNeutral: rgb(165,165,165); /* base * 3: #a5a5a5; hsl(0, 0%, 65%) */ - --colorNeutralLight: rgb(192.5,192.5,192.5); /*base * 3.5: #c1c1c1; hsl(0, 0%, 75%) */ - --colorNeutralLighter: rgb(220,220,220); /* base * 4: #dcdcdc; hsl(0, 0%, 86%) */ - --colorCool: rgb(110,165,220); /* #6ea5dc; hsl(210, 61%, 65%); */ - --colorCoolDarker: rgb(110,165,193); /* #6ea5c1; hsl (200,40%,59%) */ + --colorNeutralDarker: rgb(31, 31, 31); /* #1f1f1f; hsl(0%, 0%, 12%) */ + --colorNeutralDark: rgb(62, 62, 62); /* #5d5d5d; hsl(0, 0%, 36%) */ + --colorNeutral: rgb(155, 155, 155); /* #9b9b9b; hsl(0, 0%, 61%) */ + --colorNeutralLight: rgb(186, 186, 186); /* #bababa; hsl(0, 0%, 73%) */ + --colorNeutralLighter: rgb(217, 217, 217); /* #d9d9d9; hsl(0, 0%, 85%) */ + + /* + These colors pass WCAG 2.1 for contrast against a light background and the NeutralDarker gray + Before you change them, check your contrast ratios: https://webaim.org/resources/linkcontrastchecker/ + */ + --colorCool: rgb(47, 120, 193); /* #2f78c1; hsl(210, 61%, 47%); */ + --colorCoolDarker: rgb(41, 105, 168); /* #2a6bac; hsl(210, 61%, 41%) */ /*===== #Color #Link #Border #Variables @@ -26,7 +31,7 @@ --baseTextLineColor: var(--baseTextColor); --alertTextLineColor: rgb(255, 0, 0); - --baseQuoteBackgroundColor: 165, 165, 165, ; + --baseQuoteBackgroundColor: 155, 155, 155, ; /* Same as colorNeutral*/ /*===== #LineHeight #Variables @@ -50,7 +55,7 @@ The small title sizes use the big text sizes; so they overlap They're here, though, so that, if desired, we can deviate and not have them overlap =====*/ - --biggestTitleSize: 2.617924em; /* (16 x 1.618) x 1.618 */ + --biggestTitleSize: 2.6179em; /* (16 x 1.618) x 1.618 */ --bigTitleSize: 1.618em; --baseTitleSize: 1.5em; --smallTitleSize: var(--biggestTextSize); @@ -73,8 +78,8 @@ base is meant to be what's applied to the majority of body copy title could also be called "headline", but would be w/ other vars =====*/ - --baseFontFamily: Georgia, 'Times New Roman', serif; - --titleFontFamily: Helvetica, Arial, sans-serif; + --baseFontFamily: georgia, "Times New Roman", serif; + --titleFontFamily: helvetica, arial, sans-serif; --codeFontFamily: monospace; /*===== @@ -117,6 +122,7 @@ active: a user is currently interacting =====*/ --idleTextLineStyle: dotted; + --interestTextLineStyle: solid; --activeTextLineStyle: solid; --idleTextDecoration: var(--idleTextLineStyle) underline 2px; } @@ -202,20 +208,17 @@ menu { } li { + list-style-position: inside; text-indent: -.9em; /*this brings the left text aligned with the text of a
element*/ line-height: var(--baseLineHeight); padding: 0; margin: 0 0 0 var(--baseSpacingHorizontal); } -li { - list-style-position: inside; -} - nav li, menu li { - text-indent: 0; list-style-type: none; + text-indent: 0; margin: 0; } @@ -224,8 +227,8 @@ dt { } dd { - margin: 0; padding: 0 var(--baseSpacingHorizontal); + margin: 0; } @@ -264,18 +267,18 @@ q::before { https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */ blockquote { - background: rgba(var(--baseQuoteBackgroundColor) 0.15); + padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal); border-left: var(--baseQuoteBorder); + background: rgba(var(--baseQuoteBackgroundColor) 0.15); margin: var(--bigSpacingVertical) var(--baseSpacingHorizontal); - padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal); } blockquote::before, blockquote::after { - color: var(--colorNeutralLight); + color: var(--colorNeutralDark); /* Any lighter and it won't pass WCAG AA */ + vertical-align: -0.5em; font-size: 4em; line-height: 0.1em; - vertical-align: -0.5em; } blockquote::before { @@ -346,7 +349,7 @@ del { ins, del { - background-color: rgba(220, 220, 220, 0.25); + background-color: rgba(217, 217, 217, 0.25); } ins { @@ -363,17 +366,17 @@ u { mark and selection should be different so user knows which one they've selected. */ -/* hue: 120, saturation: 44%, lightness: 75% */ +/* hue: 120, saturation: 45%, lightness: 73% */ mark { - background-color: rgba(165, 220, 165, 0.9); + background-color: rgba(155, 217, 155, 0.9); } -/*hue: 180, saturation: 44%, lightness: 75%*/ +/*hue: 180, saturation: 45%, lightness: 73%*/ ::selection { - background-color: rgba(165, 220, 220, 0.9); + background-color: rgba(155, 217, 217, 0.9); } -/* Because mark and selection have same saturation and brightenss, a selected won't stand out +/* Because mark and selection have same saturation and brightness, a selected won't stand out A hue between 120 and 180 seems to stand out the best in all colorblind tests, too hue: 150, saturation: 44%, lightness: 65% */ @@ -384,8 +387,8 @@ mark::selection { /* dfn and dt both do the same thing: denote a term to be defined */ dfn, dt { - font-style: var(--shiftedFontVoice); font-weight: var(--heaviestFontWeight); + font-style: var(--shiftedFontVoice); text-transform: capitalize; } @@ -441,12 +444,12 @@ samp { } pre { + overflow: scroll; font-size: var(--smallerTextSize); line-height: var(--smallLineHeight); padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal); border: 1px solid var(--baseInlineBorderColor); border-radius: 2px; - overflow: scroll; } @@ -455,8 +458,8 @@ pre { =====*/ ruby { - display: ruby; position: relative; + display: ruby; margin:0 .5ex; -webkit-ruby-position: before; ruby-position: over; @@ -484,9 +487,9 @@ rtc > bdo { } /*complex ruby for chrome and Edge*/ + /*only FF has "complete" ruby support*/ @supports (ruby-align: left) or ( not (display:ruby-base-container)) { - ruby { display:inline-flex; flex-direction: column; @@ -507,7 +510,6 @@ rtc > bdo { /*Edge fixes*/ @supports ((ruby-align: left)) { - rtc { justify-content: space-between; } @@ -525,19 +527,19 @@ rtc > bdo { a { color: var(--baseLinkColor); text-decoration: none; - border-bottom: 1px var(--idleTextLineStyle) transparent; + border-bottom: 1px var(--idleTextLineStyle); transition: all .3s ease-in-out; } a:hover, a:focus { color: var(--baseLinkColorHover); - border-color: var(--baseLinkColorHover); + border-bottom-style: var(--interestTextLineStyle); outline: none; } a:active { - border-style: var(--activeTextLineStyle); + border-bottom-style: var(--activeTextLineStyle); } @@ -550,9 +552,9 @@ table { } caption { - font-size: var(--baseTextSize); - text-transform: capitalize; font-style: var(--alternateFontVoice); + text-transform: capitalize; + font-size: var(--baseTextSize); } th, td { diff --git a/test.html b/test.html index 5ba9b71..933b0bc 100644 --- a/test.html +++ b/test.html @@ -1,12 +1,14 @@ - + - + + Typography Baseline +

Semantics and Typography

An Introduction

@@ -23,7 +25,6 @@
The Second Unimportant heading
The Heading for pedants
-

Paragraphs and Styles

Text Level Semantics

I'm that paragraph with some emphasis on the text-level semantics where I might feel the need to share some strong opinions. This paragraph even uses elements that should have been deprecated, but instead the W3C redefined @@ -95,18 +96,20 @@

List semantics

Language Semantics

Then there's that text where you need to show it in a different language. Like, say you want to know my name, but you speak Korean better than English. Well, I'd tell you my name is Frank 퍼랜케 and I hope you'd know how to pronounce it.

-

Sometimes, though, you need to show something in a semitic language. Maybe you want to say Shalom שלום in the homeבבית.That's totally fine, just remember that text runs in the opposite direction in Arabic, Farsi, and Hebrew.

+

Sometimes, though, you need to show something in a semitic language. Maybe you want to say Shalom שלום in the homeבבית.That's totally fine, just remember that text runs in the opposite direction in Arabic, Farsi, and Hebrew.

With Semitic Languages, though, you need to flip the order of some things. Say you're reading some text like, אני אוהב את יין and it translates as I like wine. You have to remember that there's an element for saying a block of text is written in reverse, and another for saying a span of text should be the reverse of its parent.

-

Another way to understand that text is to look at the word-for-word translation: Shalom in the homeשלוםבבית

+

Another way to understand that text is to look at the word-for-word translation: Shalom in the homeשלוםבבית

-
-

Who should you contact about this?

-

Paceaux -

-
+
+ \ No newline at end of file