├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── feature-request.md │ ├── missing-glyphs.md │ ├── proposal.md │ ├── font-issue.md │ └── bug-report.md ├── PULL_REQUEST_TEMPLATE.md ├── CODE_OF_CONDUCT.md └── CONTRIBUTING.md ├── docs ├── banner.jpg ├── up_ │ └── up_ │ │ └── fonts │ │ └── web │ │ ├── LexicaUltralegible-Bold.52d69420.woff2 │ │ ├── LexicaUltralegible-Italic.74253f85.woff2 │ │ ├── LexicaUltralegible-Regular.63e079cf.woff2 │ │ └── LexicaUltralegible-BoldItalic.8c34efd2.woff2 ├── index.98e51033.js ├── templates │ └── a.a2e7043d.html ├── favicon.e72f58a5.svg ├── index.02a8a724.js ├── index.html ├── index.599d554f.css └── index.f64604d8.css ├── sources └── website │ ├── banner.jpg │ ├── css │ ├── core │ │ ├── reset │ │ │ ├── selection.css │ │ │ ├── code.css │ │ │ ├── link.css │ │ │ ├── tables.css │ │ │ ├── blockquote.css │ │ │ ├── list.css │ │ │ ├── base.css │ │ │ ├── typography.css │ │ │ └── forms.css │ │ ├── breakpoints │ │ │ ├── import.css │ │ │ ├── large.css │ │ │ ├── small.css │ │ │ └── medium.css │ │ ├── mixins │ │ │ ├── import.css │ │ │ ├── heading.css │ │ │ ├── link.css │ │ │ ├── fallback.css │ │ │ ├── button.css │ │ │ └── grid.css │ │ ├── components │ │ │ ├── dropdown │ │ │ │ ├── toggle.css │ │ │ │ ├── dropbox.css │ │ │ │ ├── state.css │ │ │ │ ├── tooltip.css │ │ │ │ └── menu.css │ │ │ ├── buttons │ │ │ │ ├── disabled.css │ │ │ │ ├── link.css │ │ │ │ ├── button.css │ │ │ │ └── buttons.css │ │ │ ├── navigation │ │ │ │ ├── breadcrumb.css │ │ │ │ ├── anchor.css │ │ │ │ ├── line.css │ │ │ │ └── navbar.css │ │ │ └── layout │ │ │ │ ├── container.css │ │ │ │ └── grid.css │ │ ├── utilities │ │ │ ├── text.css │ │ │ ├── position.css │ │ │ ├── display.css │ │ │ ├── flex-box.css │ │ │ └── box.css │ │ ├── README.md │ │ └── fonts │ │ │ ├── icons.css │ │ │ ├── fira-mono.css │ │ │ ├── xcharter.css │ │ │ └── lexica-ultralegible.css │ ├── custom │ │ ├── README.md │ │ ├── breakpoints.css │ │ ├── print.css │ │ ├── lexica-ultralegible.css │ │ └── sections.css │ ├── index.css │ ├── var.css │ └── settings.css │ ├── js │ ├── rams │ │ ├── core │ │ │ ├── methods │ │ │ │ ├── callbacks.js │ │ │ │ ├── selectors.js │ │ │ │ ├── events.js │ │ │ │ ├── loops.js │ │ │ │ └── data.js │ │ │ └── components │ │ │ │ ├── toggle.js │ │ │ │ └── carousel.js │ │ └── rams.js │ ├── modules │ │ └── sidebar.js │ ├── defer.js │ └── index.js │ ├── favicon.svg │ ├── templates │ └── a.html │ ├── kerning │ └── index.html │ └── index.html ├── fonts ├── otf │ ├── LexicaUltralegible-Bold.otf │ ├── LexicaUltralegible-Italic.otf │ ├── LexicaUltralegible-Regular.otf │ └── LexicaUltralegible-BoldItalic.otf ├── ttf │ ├── LexicaUltralegible-Bold.ttf │ ├── LexicaUltralegible-Italic.ttf │ ├── LexicaUltralegible-Regular.ttf │ └── LexicaUltralegible-BoldItalic.ttf └── web │ ├── LexicaUltralegible-Bold.woff2 │ ├── LexicaUltralegible-Italic.woff2 │ ├── LexicaUltralegible-Regular.woff2 │ └── LexicaUltralegible-BoldItalic.woff2 ├── .postcssrc ├── .gitignore ├── .parcelrc ├── .prettierrc ├── package.json ├── LICENSE.txt ├── Changelog.md └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [jacobxperez] 2 | custom: ["https://paypal.me/jaykubperez"] 3 | -------------------------------------------------------------------------------- /docs/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/docs/banner.jpg -------------------------------------------------------------------------------- /sources/website/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/sources/website/banner.jpg -------------------------------------------------------------------------------- /fonts/otf/LexicaUltralegible-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/otf/LexicaUltralegible-Bold.otf -------------------------------------------------------------------------------- /fonts/ttf/LexicaUltralegible-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/ttf/LexicaUltralegible-Bold.ttf -------------------------------------------------------------------------------- /fonts/otf/LexicaUltralegible-Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/otf/LexicaUltralegible-Italic.otf -------------------------------------------------------------------------------- /fonts/otf/LexicaUltralegible-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/otf/LexicaUltralegible-Regular.otf -------------------------------------------------------------------------------- /fonts/ttf/LexicaUltralegible-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/ttf/LexicaUltralegible-Italic.ttf -------------------------------------------------------------------------------- /fonts/ttf/LexicaUltralegible-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/ttf/LexicaUltralegible-Regular.ttf -------------------------------------------------------------------------------- /fonts/web/LexicaUltralegible-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/web/LexicaUltralegible-Bold.woff2 -------------------------------------------------------------------------------- /fonts/otf/LexicaUltralegible-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/otf/LexicaUltralegible-BoldItalic.otf -------------------------------------------------------------------------------- /fonts/ttf/LexicaUltralegible-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/ttf/LexicaUltralegible-BoldItalic.ttf -------------------------------------------------------------------------------- /fonts/web/LexicaUltralegible-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/web/LexicaUltralegible-Italic.woff2 -------------------------------------------------------------------------------- /fonts/web/LexicaUltralegible-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/web/LexicaUltralegible-Regular.woff2 -------------------------------------------------------------------------------- /fonts/web/LexicaUltralegible-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/fonts/web/LexicaUltralegible-BoldItalic.woff2 -------------------------------------------------------------------------------- /sources/website/css/core/reset/selection.css: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background-color: $selection; 3 | color: $selection-text; 4 | text-shadow: none; 5 | } 6 | -------------------------------------------------------------------------------- /sources/website/css/core/breakpoints/import.css: -------------------------------------------------------------------------------- 1 | @import "../../custom/breakpoints.css"; 2 | @import "./small.css"; 3 | @import "./medium.css"; 4 | @import "./large.css"; 5 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/import.css: -------------------------------------------------------------------------------- 1 | @import "fallback.css"; 2 | @import "heading.css"; 3 | @import "link.css"; 4 | @import "button.css"; 5 | @import "grid.css"; 6 | -------------------------------------------------------------------------------- /docs/up_/up_/fonts/web/LexicaUltralegible-Bold.52d69420.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/docs/up_/up_/fonts/web/LexicaUltralegible-Bold.52d69420.woff2 -------------------------------------------------------------------------------- /docs/up_/up_/fonts/web/LexicaUltralegible-Italic.74253f85.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/docs/up_/up_/fonts/web/LexicaUltralegible-Italic.74253f85.woff2 -------------------------------------------------------------------------------- /docs/up_/up_/fonts/web/LexicaUltralegible-Regular.63e079cf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/docs/up_/up_/fonts/web/LexicaUltralegible-Regular.63e079cf.woff2 -------------------------------------------------------------------------------- /docs/up_/up_/fonts/web/LexicaUltralegible-BoldItalic.8c34efd2.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacobxperez/lexica-ultralegible/HEAD/docs/up_/up_/fonts/web/LexicaUltralegible-BoldItalic.8c34efd2.woff2 -------------------------------------------------------------------------------- /sources/website/css/core/reset/code.css: -------------------------------------------------------------------------------- 1 | code, 2 | kbd, 3 | pre, 4 | samp { 5 | font-family: $pre-font-family; 6 | } 7 | 8 | pre { 9 | overflow: auto; 10 | white-space: pre-wrap; 11 | } 12 | -------------------------------------------------------------------------------- /sources/website/css/core/breakpoints/large.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-large-min-width) { 2 | @include large-screen(); 3 | @include _grid-large-screen(); 4 | @include _large-display(); 5 | } 6 | -------------------------------------------------------------------------------- /sources/website/css/core/breakpoints/small.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: $screen-small-max-width) { 2 | @include small-screen(); 3 | @include _grid-small-screen(); 4 | @include _small-display(); 5 | } 6 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/methods/callbacks.js: -------------------------------------------------------------------------------- 1 | function callback(callback) { 2 | if (typeof callback === 'function') { 3 | callback(); 4 | } 5 | 6 | return this; 7 | } 8 | 9 | export {callback}; 10 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/heading.css: -------------------------------------------------------------------------------- 1 | @mixin _heading($name, $font-size, $line-height) { 2 | $(name), 3 | [data-text~="$(name)"] { 4 | font-size: $font-size; 5 | line-height: $line-height; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/link.css: -------------------------------------------------------------------------------- 1 | :where(a) { 2 | @include _link; 3 | cursor: pointer; 4 | } 5 | 6 | :where(a:hover, a:active) { 7 | @include _link-active; 8 | } 9 | 10 | :where(a:focus) { 11 | @include _link-focus; 12 | } 13 | -------------------------------------------------------------------------------- /sources/website/css/core/breakpoints/medium.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: $screen-medium-min-width) and (max-width: $screen-medium-max-width) { 2 | @include medium-screen(); 3 | @include _grid-medium-screen(); 4 | @include _medium-display(); 5 | } 6 | -------------------------------------------------------------------------------- /sources/website/css/custom/README.md: -------------------------------------------------------------------------------- 1 | # Custom Modules 2 | 3 | - Modify print styles to your project specifications. 4 | - Add custom modules here then link them on file [index.css](https://github.com/jacobxperez/rams/blob/master/src/css/index.css) for compiling. 5 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/tables.css: -------------------------------------------------------------------------------- 1 | table { 2 | display: table; 3 | width: 100%; 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | } 7 | 8 | td, 9 | th { 10 | display: table-cell; 11 | padding: $table-cell-padding; 12 | } 13 | -------------------------------------------------------------------------------- /sources/website/css/custom/breakpoints.css: -------------------------------------------------------------------------------- 1 | @mixin small-screen() { 2 | /* Add code for small screens */ 3 | } 4 | 5 | @mixin medium-screen() { 6 | /* Add code for medium screens */ 7 | } 8 | 9 | @mixin large-screen() { 10 | /* Add code for large screens */ 11 | } 12 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "postcss-mixins": true, 4 | "postcss-url": true, 5 | "postcss-import": true, 6 | "postcss-advanced-variables": true, 7 | "postcss-nesting": true, 8 | "postcss-custom-selectors": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /sources/website/css/core/components/dropdown/toggle.css: -------------------------------------------------------------------------------- 1 | [data-toggle] { 2 | position: relative; 3 | } 4 | 5 | [data-toggle~="tooltip"] > [data-dropbox], 6 | [data-toggle~="pop"] > [data-dropbox], 7 | [data-toggle~="pop"] + [data-dropbox] { 8 | position: absolute; 9 | display: block; 10 | } 11 | -------------------------------------------------------------------------------- /sources/website/css/core/components/dropdown/dropbox.css: -------------------------------------------------------------------------------- 1 | [data-dropbox] { 2 | z-index: -10; 3 | box-sizing: content-box; 4 | display: none; 5 | visibility: hidden; 6 | min-width: $dropbox-min-width; 7 | color: $body-font-color; 8 | transition: $dropbox-transition; 9 | opacity: 0; 10 | } 11 | -------------------------------------------------------------------------------- /sources/website/css/core/components/dropdown/state.css: -------------------------------------------------------------------------------- 1 | /* uncss:ignore */ 2 | [data-state="active"] > [data-dropbox], 3 | [data-state="active"] + [data-dropbox], 4 | [data-toggle~="tooltip"]:hover > [data-dropbox] { 5 | z-index: 100; 6 | display: block; 7 | visibility: visible; 8 | opacity: 1; 9 | } 10 | -------------------------------------------------------------------------------- /sources/website/css/core/components/buttons/disabled.css: -------------------------------------------------------------------------------- 1 | [data-state="disabled"], 2 | [data-state="disabled"]:is(:hover, :active, :focus) { 3 | border-color: transparent; 4 | background-color: $disabled; 5 | color: $disabled-text; 6 | text-decoration: none; 7 | outline: 0; 8 | cursor: not-allowed; 9 | } 10 | -------------------------------------------------------------------------------- /sources/website/css/core/utilities/text.css: -------------------------------------------------------------------------------- 1 | [data-text~="left"] { 2 | text-align: left; 3 | } 4 | 5 | [data-text~="right"] { 6 | text-align: right; 7 | } 8 | 9 | [data-text~="center"] { 10 | text-align: center; 11 | } 12 | 13 | [data-text~="justify"] { 14 | text-align: justify; 15 | hyphens: auto; 16 | } 17 | -------------------------------------------------------------------------------- /sources/website/css/core/components/buttons/link.css: -------------------------------------------------------------------------------- 1 | [data-button="link"] { 2 | @include _link; 3 | font-family: $body-font-family; 4 | 5 | &:is([data-state="active"], :hover, :active) { 6 | @include _link-active; 7 | background-color: transparent; 8 | border-color: transparent; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea for this project 4 | title: 'Request: Title' 5 | labels: feature request 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | # Feature Request 13 | 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /target/ 3 | .DS_Store 4 | coverage/ 5 | .nyc_output/ 6 | .cache/ 7 | .parcel-cache/ 8 | dist/ 9 | lib/ 10 | ramsLive/ 11 | .vscode/ 12 | .idea/ 13 | *.min.js 14 | # Logs 15 | logs/ 16 | *.log 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | tmp 21 | parcel-bundle-reports/ 22 | .verdaccio_storage/ 23 | sourcemap-info.json 24 | 25 | -------------------------------------------------------------------------------- /sources/website/css/core/components/navigation/breadcrumb.css: -------------------------------------------------------------------------------- 1 | [data-flex~="breadcrumb"] { 2 | column-gap: $breadcrumb-gap; 3 | 4 | :where(&) li::after { 5 | content: $breadcrumb-separator; 6 | margin-left: $breadcrumb-gap; 7 | } 8 | 9 | :where(&) li:last-child::after { 10 | content: ""; 11 | margin-right: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/methods/selectors.js: -------------------------------------------------------------------------------- 1 | function selector() { 2 | Node.prototype.selector = function (selector) { 3 | return this.querySelector(selector); 4 | }; 5 | } 6 | 7 | function selectorAll() { 8 | Node.prototype.selectorAll = function (selector) { 9 | return this.querySelectorAll(selector); 10 | }; 11 | } 12 | 13 | export {selector, selectorAll}; 14 | -------------------------------------------------------------------------------- /sources/website/css/core/README.md: -------------------------------------------------------------------------------- 1 | # Core 2 | 3 | - **Warning!** Do not add edit or delete Core files unless you are debugging, 4 | updating or, [contributing](https://github.com/jacobxperez/rams/blob/master/.github/CONTRIBUTING.md) 5 | to [Rams](https://github.com/jacobxperez/rams). 6 | - All custom modules should be added to the [custom](https://github.com/jacobxperez/rams/tree/master/src/css/custom) folder 7 | -------------------------------------------------------------------------------- /sources/website/css/custom/print.css: -------------------------------------------------------------------------------- 1 | /* Modify print styles to your project specifications */ 2 | @media print { 3 | html, 4 | body { 5 | height: auto; 6 | } 7 | 8 | nav { 9 | display: none; 10 | } 11 | 12 | [data-container] { 13 | max-width: 100%; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | [data-grid] { 19 | display: block; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /sources/website/css/core/components/dropdown/tooltip.css: -------------------------------------------------------------------------------- 1 | [data-toggle~="tooltip"] { 2 | text-decoration: $tooltip-text-decoration; 3 | text-underline-offset: $tooltip-underline-offset; 4 | cursor: help; 5 | } 6 | 7 | [data-dropbox="tooltip"] { 8 | bottom: 100%; 9 | min-width: $tooltip-min-width; 10 | padding: $space-y $space-x; 11 | background-color: $tooltip-background; 12 | color: $tooltip-text; 13 | } 14 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/blockquote.css: -------------------------------------------------------------------------------- 1 | blockquote, 2 | q { 3 | quotes: none; 4 | } 5 | 6 | blockquote { 7 | font-family: $blockquote-font-family; 8 | font-style: $blockquote-font-style; 9 | 10 | &:before, 11 | &:after { 12 | content: ""; 13 | content: none; 14 | } 15 | 16 | :where(&) small { 17 | display: block; 18 | } 19 | 20 | :where(&) small:before { 21 | content: "— "; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sources/website/css/core/components/layout/container.css: -------------------------------------------------------------------------------- 1 | [data-container] { 2 | margin: 0 auto; 3 | padding-left: $container-gap; 4 | padding-right: $container-gap; 5 | width: $container-width; 6 | 7 | :where(body) > &:first-child { 8 | margin-top: $container-margin-top; 9 | } 10 | 11 | :where(body) > &:last-child { 12 | margin-bottom: $container-margin-bottom; 13 | } 14 | } 15 | 16 | [data-container~="full"] { 17 | width: 100%; 18 | } 19 | -------------------------------------------------------------------------------- /sources/website/css/core/fonts/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: icons; 3 | src: url("/src/fonts/icons/icons.woff2") format("woff2"); 4 | font-weight: normal; 5 | font-style: normal; 6 | font-variant: normal; 7 | } 8 | 9 | [data-icon]:before { 10 | content: attr(data-icon); 11 | display: inline-block; 12 | font-family: icons; 13 | font-weight: normal; 14 | line-height: 1; 15 | vertical-align: middle; 16 | text-transform: none; 17 | } 18 | -------------------------------------------------------------------------------- /sources/website/css/core/utilities/position.css: -------------------------------------------------------------------------------- 1 | [data-position~="relative"] { 2 | position: relative; 3 | } 4 | 5 | [data-position~="absolute"] { 6 | position: absolute; 7 | } 8 | 9 | [data-position~="fixed"] { 10 | position: fixed; 11 | } 12 | 13 | [data-position~="top"] { 14 | top: 0; 15 | } 16 | 17 | [data-position~="bottom"] { 18 | bottom: 0; 19 | } 20 | 21 | [data-position~="left"] { 22 | left: 0; 23 | } 24 | 25 | [data-position~="right"] { 26 | right: 0; 27 | } 28 | -------------------------------------------------------------------------------- /.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@parcel/config-default", 3 | "transformers": { 4 | "*.{ts,tsx}": [ 5 | "@parcel/transformer-typescript-tsc" 6 | ] 7 | }, 8 | "namers": [ 9 | "@mischnic/parcel-namer-preserve-structure", 10 | "..." 11 | ], 12 | "optimizers": { 13 | "*.html": [ 14 | "parcel-optimizer-friendly-urls", 15 | "..." 16 | ], 17 | "*.js": [ 18 | "@parcel/optimizer-terser" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /sources/website/css/core/components/layout/grid.css: -------------------------------------------------------------------------------- 1 | [data-grid] { 2 | display: grid; 3 | column-gap: $grid-gap; 4 | } 5 | 6 | [data-column] { 7 | grid-column: 1 / -1; 8 | } 9 | 10 | @mixin _grid-small-screen() { 11 | @include grid-columns($grid-name, $grid-columns-small, small); 12 | } 13 | 14 | @mixin _grid-medium-screen() { 15 | @include grid-columns($grid-name, $grid-columns-medium, medium); 16 | } 17 | 18 | @mixin _grid-large-screen() { 19 | @include grid-columns($grid-name, $grid-columns-large, large); 20 | } 21 | 22 | -------------------------------------------------------------------------------- /sources/website/css/core/components/navigation/anchor.css: -------------------------------------------------------------------------------- 1 | [data-anchor] { 2 | display: block; 3 | padding: $space-y $space-x; 4 | color: $anchor-color; 5 | font-family: $anchor-font-family; 6 | text-decoration: none; 7 | cursor: pointer; 8 | transition: $anchor-transition; 9 | 10 | &:where([data-state="active"], :hover, :active) { 11 | color: $anchor-color-active; 12 | text-decoration: none; 13 | } 14 | 15 | &:focus { 16 | @include _link-focus; 17 | } 18 | } 19 | 20 | @include _anchor-menu(); 21 | -------------------------------------------------------------------------------- /sources/website/css/core/utilities/display.css: -------------------------------------------------------------------------------- 1 | @mixin _small-display() { 2 | [data-display~="small-none"], 3 | [data-display~="medium"], 4 | [data-display~="large"] { 5 | display: none; 6 | } 7 | } 8 | 9 | @mixin _medium-display() { 10 | [data-display~="medium-none"], 11 | [data-display~="small"], 12 | [data-display~="large"] { 13 | display: none; 14 | } 15 | } 16 | 17 | @mixin _large-display() { 18 | [data-display~="large-none"], 19 | [data-display~="small"], 20 | [data-display~="medium"] { 21 | display: none; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/methods/events.js: -------------------------------------------------------------------------------- 1 | function addEvent() { 2 | EventTarget.prototype.addEvent = function ( 3 | eventName, 4 | handler, 5 | boolean = false 6 | ) { 7 | return this.addEventListener(eventName, handler, boolean); 8 | }; 9 | } 10 | 11 | function removeEvent() { 12 | EventTarget.prototype.removeEvent = function ( 13 | eventName, 14 | handler, 15 | boolean = false 16 | ) { 17 | return this.removeEventListener(eventName, handler, boolean); 18 | }; 19 | } 20 | 21 | export {addEvent, removeEvent}; 22 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/list.css: -------------------------------------------------------------------------------- 1 | ol, 2 | ul { 3 | list-style-type: none; 4 | } 5 | 6 | :--lists { 7 | padding-left: $leading; 8 | list-style-position: outside; 9 | } 10 | 11 | [data-list~="ol"] { 12 | list-style-type: $ol-list-style-type; 13 | 14 | & > li:first-child > & { 15 | list-style-type: $ol-list-style-type-child; 16 | } 17 | } 18 | 19 | [data-list~="ul"] { 20 | list-style-type: $ul-list-style-type; 21 | 22 | & > li:first-child > & { 23 | list-style-type: $ul-list-style-type-child; 24 | } 25 | } 26 | 27 | :--lists [data-list] { 28 | margin: 0; 29 | } 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/missing-glyphs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Missing Glyph(s) 3 | about: Glyph(s) are missing 4 | title: 'Missing: Title' 5 | labels: missing glyph(s) 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | # Missing Glyph(s) 13 | 14 | 15 | 16 | 17 | ## Glyph(s) checklist 18 | 19 | 20 | * [ ] `U+0000` `A` name 21 | * [ ] `U+0000` `B` name 22 | * [ ] `U+0000` `C` name 23 | -------------------------------------------------------------------------------- /sources/website/css/core/components/dropdown/menu.css: -------------------------------------------------------------------------------- 1 | [data-dropbox~="menu"] { 2 | background-color: $dropbox-menu-background; 3 | border: $dropbox-menu-border; 4 | } 5 | 6 | @mixin _anchor-menu { 7 | [data-anchor~="menu"] { 8 | @if $anchor-menu-background != $dropbox-menu-background { 9 | background-color: $anchor-menu-background; 10 | } 11 | color: $anchor-menu-text; 12 | 13 | &:where([data-state="active"], :hover, :active) { 14 | background-color: $anchor-menu-background-active; 15 | color: $anchor-menu-text-active; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "proseWrap": "always", 4 | "trailingComma": "es5", 5 | "useTabs": true, 6 | "tabWidth": 4, 7 | "semi": true, 8 | "singleQuote": false, 9 | "bracketSpacing": false, 10 | "singleAttributePerLine": false, 11 | "arrowParens": "always", 12 | "overrides": [ 13 | { 14 | "files": "*.js", 15 | "options": { 16 | "singleQuote": true 17 | } 18 | }, 19 | { 20 | "files": "*.html", 21 | "options": { 22 | "printWidth": 100 23 | } 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/link.css: -------------------------------------------------------------------------------- 1 | @mixin _link() { 2 | text-decoration: none; 3 | background-color: transparent; 4 | color: $link-color; 5 | text-decoration: $link-text-decoration; 6 | text-decoration-thickness: $link-text-decoration-thickness; 7 | -webkit-text-decoration: $link-text-decoration; 8 | text-underline-offset: $link-underline-offset; 9 | } 10 | 11 | @mixin _link-active() { 12 | @if $link-color-active != $link-color { 13 | color: $link-color-active; 14 | } 15 | text-decoration: $link-text-decoration-active; 16 | } 17 | 18 | @mixin _link-focus() { 19 | outline: thin dotted; 20 | outline-offset: -0.125rem; 21 | } 22 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | 4 | ## Type of change 5 | 6 | 7 | - [ ] Bug fix (non-breaking change which fixes an issue) 8 | - [ ] New feature (non-breaking change which adds functionality) 9 | - [ ] Update (non-breaking change that updates something) 10 | - [ ] Upgrade (this will brake something but it is worth it) 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/methods/loops.js: -------------------------------------------------------------------------------- 1 | function each(callback) { 2 | if (callback && typeof callback == 'function') { 3 | for (let i = 0; i < this.length; i++) { 4 | callback(this[i], i); 5 | } 6 | 7 | return this; 8 | } 9 | } 10 | 11 | function eachOf(callback) { 12 | if (callback && typeof callback == 'function') { 13 | for (const item of this) { 14 | callback(item); 15 | } 16 | 17 | return this; 18 | } 19 | } 20 | 21 | function eachIn(callback) { 22 | if (callback && typeof callback == 'function') { 23 | for (const property in object) { 24 | callback(property); 25 | } 26 | } 27 | } 28 | 29 | export {each, eachOf, eachIn}; 30 | -------------------------------------------------------------------------------- /sources/website/css/core/components/buttons/button.css: -------------------------------------------------------------------------------- 1 | [data-button] { 2 | display: inline-block; 3 | padding: $button-padding; 4 | border: $button-border-width solid $button-border-color; 5 | background-color: $button-background; 6 | color: $button-text-color; 7 | @if $button-border-radius != false { 8 | border-radius: $button-border-radius; 9 | } 10 | font-family: $button-font-family; 11 | text-decoration: none; 12 | transition: $button-transition; 13 | cursor: pointer; 14 | 15 | &:is([data-state="active"], :hover, :active) { 16 | background-color: $button-background-active; 17 | text-decoration: none; 18 | } 19 | 20 | &:focus { 21 | @include _link-focus; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/proposal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Proposal 3 | about: A proposal for a feature or an update that you want to implement 4 | title: 'Proposal: Title' 5 | labels: proposal 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | # Proposal 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/font-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Font Issue 3 | about: There is something wrong with the font 4 | title: '' 5 | labels: font issue, help wanted 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | # Font Issue 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /sources/website/css/core/fonts/fira-mono.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Fira Mono"; 3 | src: 4 | local("Fira Mono"), 5 | local("Fira Code"), 6 | url("/src/fonts/fira-mono/FiraMono-Regular.woff2") format("woff2"); 7 | font-weight: 400; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: "Fira Mono"; 13 | src: 14 | local("Fira Mono"), 15 | local("Fira Code"), 16 | url("/src/fonts/fira-mono/FiraMono-Medium.woff2") format("woff2"); 17 | font-weight: 500; 18 | font-style: normal; 19 | } 20 | 21 | @font-face { 22 | font-family: "Fira Mono"; 23 | src: 24 | local("Fira Mono"), 25 | local("Fira Code"), 26 | url("/src/fonts/fira-mono/FiraMono-Bold.woff2") format("woff2"); 27 | font-weight: 700; 28 | font-style: normal; 29 | } 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: File a bug report 4 | title: 'Bug: Title' 5 | labels: bug, help wanted 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | # Bug Report 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/fallback.css: -------------------------------------------------------------------------------- 1 | /* Fall-Back: prevents error when removing imports from the main index.css stylesheets */ 2 | 3 | /* Custom Modules */ 4 | @mixin small-screen() { 5 | /* leve empty */ 6 | } 7 | 8 | @mixin medium-screen() { 9 | /* leve empty */ 10 | } 11 | 12 | @mixin large-screen() { 13 | /* leve empty */ 14 | } 15 | 16 | /* Grid */ 17 | @mixin _grid-small-screen() { 18 | /* leve empty */ 19 | } 20 | 21 | @mixin _grid-medium-screen() { 22 | /* leve empty */ 23 | } 24 | 25 | @mixin _grid-large-screen() { 26 | /* leve empty */ 27 | } 28 | 29 | /* Anchor */ 30 | @mixin _anchor-menu { 31 | /* leve empty */ 32 | } 33 | 34 | /* Display */ 35 | @mixin _small-display() { 36 | /* leve empty */ 37 | } 38 | 39 | @mixin _medium-display() { 40 | /* leve empty */ 41 | } 42 | 43 | @mixin _large-display() { 44 | /* leve empty */ 45 | } 46 | -------------------------------------------------------------------------------- /sources/website/js/rams/rams.js: -------------------------------------------------------------------------------- 1 | import { 2 | setDataAttr, 3 | removeDataAttr, 4 | getDataAttr, 5 | hasDataAttr, 6 | closestDataAttr, 7 | matchDataAttr, 8 | toggleDataAttr, 9 | } from './core/methods/data.js'; 10 | import {toggle} from './core/components/toggle.js'; 11 | // import {carousel} from './core/components/carousel.js'; 12 | 13 | class Rams { 14 | constructor() { 15 | Rams.#init(); 16 | this.toggle = toggle; 17 | // this.carousel = carousel; 18 | } 19 | 20 | static #init() { 21 | // Data Attributes 22 | setDataAttr(); 23 | removeDataAttr(); 24 | getDataAttr(); 25 | hasDataAttr(); 26 | closestDataAttr(); 27 | matchDataAttr(); 28 | toggleDataAttr(); 29 | } 30 | // Components 31 | toggle; 32 | // carousel; 33 | } 34 | 35 | const rams = new Rams(); 36 | 37 | export {rams}; 38 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/button.css: -------------------------------------------------------------------------------- 1 | @mixin button( 2 | $name, 3 | $background, 4 | $text-color, 5 | $background-active, 6 | $text-active 7 | ) { 8 | [data-button~="$(name)"] { 9 | background-color: $background; 10 | color: $text-color; 11 | 12 | &:is([data-state="active"], :hover, :active) { 13 | background-color: $background-active; 14 | color: $text-active; 15 | } 16 | } 17 | } 18 | 19 | @mixin button-outline( 20 | $name, 21 | $border-color, 22 | $text-color, 23 | $background-active, 24 | $text-active 25 | ) { 26 | [data-button^="$(name) outline"] { 27 | border-color: $border-color; 28 | color: $text-color; 29 | 30 | &:is([data-state="active"], :hover, :active) { 31 | background-color: $background-active; 32 | color: $text-active; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /sources/website/css/core/utilities/flex-box.css: -------------------------------------------------------------------------------- 1 | [data-flex] { 2 | display: flex; 3 | } 4 | 5 | [data-flex~="reverse"] { 6 | flex-direction: row-reverse; 7 | } 8 | 9 | [data-flex~="column"] { 10 | flex-direction: column; 11 | } 12 | 13 | [data-flex*="column reverse"] { 14 | flex-direction: column-reverse; 15 | } 16 | 17 | [data-flex~="wrap"] { 18 | flex-wrap: wrap; 19 | } 20 | 21 | [data-flex~="grow"] > *, 22 | [data-item~="grow"] { 23 | flex-grow: 1; 24 | } 25 | 26 | [data-flex~="gap"] { 27 | gap: $grid-gap; 28 | } 29 | 30 | [data-flex~="end"] { 31 | justify-content: flex-end; 32 | } 33 | 34 | [data-flex~="center"] { 35 | justify-content: center; 36 | } 37 | 38 | [data-flex~="between"] { 39 | justify-content: space-between; 40 | } 41 | 42 | [data-flex~="around"] { 43 | justify-content: space-around; 44 | } 45 | 46 | [data-flex~="even"] { 47 | justify-content: space-evenly; 48 | } 49 | -------------------------------------------------------------------------------- /sources/website/css/core/mixins/grid.css: -------------------------------------------------------------------------------- 1 | @mixin columns($columns, $prefix: false) { 2 | @if $prefix == false { 3 | @for $i from 1 to $columns { 4 | [data-grid~="$(i)"] { 5 | grid-template-columns: repeat($(i), 1fr); 6 | } 7 | 8 | [data-column~="$(i)"] { 9 | grid-column: span $(i); 10 | } 11 | } 12 | } @else { 13 | @for $i from 1 to $columns { 14 | [data-grid~="$(prefix)-$(i)"] { 15 | grid-template-columns: repeat($(i), 1fr); 16 | } 17 | 18 | [data-column~="$(prefix)-$(i)"] { 19 | grid-column: span $(i); 20 | } 21 | } 22 | } 23 | } 24 | 25 | @mixin grid-columns($name, $columns, $prefix: false) { 26 | [data-grid~="$(name)"] { 27 | grid-template-columns: repeat($(columns), 1fr); 28 | } 29 | 30 | @include columns($columns, $prefix); 31 | } 32 | 33 | @mixin grid($name, $columns) { 34 | [data-grid~="$(name)"] { 35 | grid-template-columns: repeat($(columns), 1fr); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /sources/website/css/core/components/navigation/line.css: -------------------------------------------------------------------------------- 1 | [data-flex~="line-top"] { 2 | border-top: $anchor-line-border-width solid $anchor-line-border-color; 3 | 4 | :where(&) [data-anchor~="line"] { 5 | bottom: $anchor-line-border-width; 6 | border-top: $anchor-line-border-width solid transparent; 7 | } 8 | } 9 | 10 | [data-flex~="line-bottom"] { 11 | border-bottom: $anchor-line-border-width solid $anchor-line-border-color; 12 | 13 | :where(&) [data-anchor~="line"] { 14 | top: $anchor-line-border-width; 15 | border-bottom: $anchor-line-border-width solid transparent; 16 | } 17 | } 18 | 19 | [data-anchor~="line"] { 20 | position: relative; 21 | z-index: 1; 22 | color: $anchor-line-text; 23 | 24 | &:where([data-state="active"], :hover, :active) { 25 | z-index: 5; 26 | border-color: $anchor-line-border-active; 27 | color: $anchor-line-text-active; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /sources/website/css/core/components/navigation/navbar.css: -------------------------------------------------------------------------------- 1 | [data-navbar] { 2 | width: 100%; 3 | background-color: $navbar-background; 4 | color: $navbar-anchor-text-active; 5 | } 6 | 7 | [data-navbar="top"], 8 | [data-navbar="bottom"] { 9 | z-index: 1000; 10 | position: fixed; 11 | } 12 | 13 | [data-navbar="top"] { 14 | top: 0; 15 | 16 | :where(&) [data-dropbox] { 17 | top: 100%; 18 | } 19 | } 20 | 21 | [data-navbar="bottom"] { 22 | bottom: 0; 23 | 24 | :where(&) [data-dropbox] { 25 | bottom: 100%; 26 | } 27 | } 28 | 29 | [data-anchor~="navbar"] { 30 | color: $navbar-anchor-text; 31 | 32 | &:where([data-state="active"], :hover, :active) { 33 | color: $navbar-anchor-text-active; 34 | } 35 | } 36 | 37 | [data-dropbox~="navbar"] { 38 | background-color: $navbar-dropbox-background; 39 | } 40 | 41 | /* [data-container~="navbar"] { 42 | padding: 0 calc($grid-gap - $space-x); 43 | } */ 44 | -------------------------------------------------------------------------------- /sources/website/css/core/fonts/xcharter.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Xcharter"; 3 | src: 4 | local("Xcharter"), 5 | url("/src/fonts/xcharter/XCharter-Roman.woff2") format("woff2"); 6 | font-weight: 400; 7 | font-style: normal; 8 | } 9 | 10 | @font-face { 11 | font-family: "Xcharter"; 12 | src: 13 | local("Xcharter"), 14 | url("/src/fonts/xcharter/XCharter-Italic.woff2") format("woff2"); 15 | font-weight: 400; 16 | font-style: italic; 17 | } 18 | 19 | @font-face { 20 | font-family: "Xcharter"; 21 | src: 22 | local("Xcharter"), 23 | url("/src/fonts/xcharter/XCharter-Bold.woff2") format("woff2"); 24 | font-weight: 700; 25 | font-style: normal; 26 | } 27 | 28 | @font-face { 29 | font-family: "Xcharter"; 30 | src: 31 | local("Xcharter"), 32 | url("/src/fonts/xcharter/XCharter-BoldItalic.woff2") format("woff2"); 33 | font-weight: 700; 34 | font-style: italic; 35 | } 36 | -------------------------------------------------------------------------------- /sources/website/css/custom/lexica-ultralegible.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Lexica Ultralegible"; 3 | src: 4 | local("Lexica Ultralegible"), 5 | url("/fonts/web/LexicaUltralegible-Regular.woff2") format("woff2"); 6 | font-weight: 400; 7 | font-style: normal; 8 | } 9 | 10 | @font-face { 11 | font-family: "Lexica Ultralegible"; 12 | src: 13 | local("Lexica Ultralegible"), 14 | url("/fonts/web/LexicaUltralegible-Italic.woff2") format("woff2"); 15 | font-weight: 400; 16 | font-style: italic; 17 | } 18 | 19 | @font-face { 20 | font-family: "Lexica Ultralegible"; 21 | src: 22 | local("Lexica Ultralegible"), 23 | url("/fonts/web/LexicaUltralegible-Bold.woff2") format("woff2"); 24 | font-weight: 700; 25 | font-style: normal; 26 | } 27 | 28 | @font-face { 29 | font-family: "Lexica Ultralegible"; 30 | src: 31 | local("Lexica Ultralegible"), 32 | url("/fonts/web/LexicaUltralegible-BoldItalic.woff2") format("woff2"); 33 | font-weight: 700; 34 | font-style: italic; 35 | } 36 | -------------------------------------------------------------------------------- /sources/website/css/core/fonts/lexica-ultralegible.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Lexica Ultralegible"; 3 | src: 4 | local("Lexica Ultralegible"), 5 | url("/src/fonts/lexica-ultralegible/LexicaUltralegible-Regular.woff2") format("woff2"); 6 | font-weight: 400; 7 | font-style: normal; 8 | } 9 | 10 | @font-face { 11 | font-family: "Lexica Ultralegible"; 12 | src: 13 | local("Lexica Ultralegible"), 14 | url("/src/fonts/lexica-ultralegible/LexicaUltralegible-Italic.woff2") format("woff2"); 15 | font-weight: 400; 16 | font-style: italic; 17 | } 18 | 19 | @font-face { 20 | font-family: "Lexica Ultralegible"; 21 | src: 22 | local("Lexica Ultralegible"), 23 | url("/src/fonts/lexica-ultralegible/LexicaUltralegible-Bold.woff2") format("woff2"); 24 | font-weight: 700; 25 | font-style: normal; 26 | } 27 | 28 | @font-face { 29 | font-family: "Lexica Ultralegible"; 30 | src: 31 | local("Lexica Ultralegible"), 32 | url("/src/fonts/lexica-ultralegible/LexicaUltralegible-BoldItalic.woff2") format("woff2"); 33 | font-weight: 700; 34 | font-style: italic; 35 | } 36 | -------------------------------------------------------------------------------- /sources/website/css/core/utilities/box.css: -------------------------------------------------------------------------------- 1 | [data-box~="leading"] { 2 | margin: calc($leading / 2) 0; 3 | } 4 | 5 | [data-box~="padding"] { 6 | padding: $space-y $space-x; 7 | } 8 | 9 | [data-box~="padding-top"] { 10 | padding-top: $space-y; 11 | } 12 | 13 | [data-box~="padding-x"], 14 | [data-box~="padding-right"] { 15 | padding-right: $space-x; 16 | } 17 | 18 | [data-box~="padding-bottom"] { 19 | padding-bottom: $space-y; 20 | } 21 | 22 | [data-box~="padding-x"], 23 | [data-box~="padding-left"] { 24 | padding-left: $space-x; 25 | } 26 | 27 | [data-box~="border"] { 28 | border: $border-width solid $border-color; 29 | } 30 | 31 | [data-box~="border-top"] { 32 | border-top: $border-width solid $border-color; 33 | } 34 | 35 | [data-box~="border-left"], 36 | [data-box~="border-x"] { 37 | border-left: $border-width solid $border-color; 38 | } 39 | 40 | [data-box~="border-right"], 41 | [data-box~="border-x"] { 42 | border-right: $border-width solid $border-color; 43 | } 44 | 45 | [data-box~="border-bottom"] { 46 | border-bottom: $border-width solid $border-color; 47 | } 48 | 49 | [data-box~="full-width"] { 50 | width: 100%; 51 | } 52 | -------------------------------------------------------------------------------- /sources/website/css/custom/sections.css: -------------------------------------------------------------------------------- 1 | [data-section~="header"] { 2 | margin-bottom: $leading; 3 | padding-top: calc($leading * 4); 4 | padding-bottom: calc($leading * 3); 5 | background-color: var(--secondary-00); 6 | color: var(--neutral-10); 7 | 8 | & :--headings, a { 9 | color: var(--neutral-10); 10 | } 11 | 12 | & h1 { 13 | margin-bottom: $leading; 14 | } 15 | } 16 | 17 | [data-section="footer"] { 18 | margin-bottom: $container-margin-bottom; 19 | } 20 | 21 | [data-container~="header"] { 22 | width: clamp(20rem, 100%, 75rem); 23 | } 24 | 25 | [data-filter="blur"] { 26 | filter: blur(.3rem); 27 | } 28 | 29 | [data-text="title"] { 30 | font-size: clamp(3.4375rem, 9vw + 1rem, 8.5rem); 31 | line-height: 1; 32 | } 33 | 34 | [data-text="flip-zero"] { 35 | font-variant-numeric: slashed-zero; 36 | } 37 | 38 | [data-text~="h0"] { 39 | font-size: clamp(3.15rem, 8vw + 1rem, 7.8rem); 40 | line-height: 1; 41 | } 42 | 43 | [data-text~="uppercase"] { 44 | text-transform: uppercase; 45 | } 46 | 47 | [data-text~="lowercase"] { 48 | text-transform: lowercase; 49 | } 50 | 51 | /* :where([data-section~="header"]) a { 52 | color: inherit; 53 | text-decoration: underline solid 0.125rem; 54 | } 55 | 56 | :where([data-section~="header"]) a:hover { 57 | text-decoration: none; 58 | } */ 59 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | border: 0 none; 8 | background: transparent; 9 | color: inherit; 10 | font: inherit; 11 | text-align: inherit; 12 | vertical-align: baseline; 13 | outline: 0; 14 | } 15 | 16 | @custom-selector :--headings h1, h2, h3, h4, h5, h6; 17 | 18 | @custom-selector :--lists 19 | [data-list~="ol"], 20 | [data-list~="ul"], 21 | [data-list~="dl"]; 22 | 23 | html { 24 | @if $background-gradient == false { 25 | background: $background; 26 | } @else { 27 | background: $background-gradient; 28 | } 29 | font-size: $root-font-size; 30 | text-align: left; 31 | overflow-wrap: break-word; 32 | scroll-behavior: smooth; 33 | } 34 | 35 | body { 36 | color: $body-font-color; 37 | font-size: $body-font-size; 38 | font-family: $body-font-family; 39 | font-weight: $body-font-weight; 40 | line-height: $body-line-height; 41 | @if $body-font-variant-numeric != false { 42 | font-variant-numeric: $body-font-variant-numeric; 43 | } 44 | } 45 | 46 | img, 47 | svg, 48 | picture, 49 | video, 50 | canvas, 51 | audio, 52 | iframe, 53 | embed, 54 | object { 55 | display: block; 56 | max-width: 100%; 57 | } 58 | 59 | p, 60 | pre, 61 | table, 62 | blockquote, 63 | :--headings, 64 | :--lists { 65 | margin: calc($leading / 2) 0; 66 | } 67 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/typography.css: -------------------------------------------------------------------------------- 1 | :--headings { 2 | font-family: $headings-font-family; 3 | font-weight: $headings-font-weight; 4 | font-variant-ligatures: $headings-ligatures; 5 | @if $headings-color != false { 6 | color: $headings-color; 7 | } 8 | } 9 | 10 | @include _heading(h1, $h1-font-size, $h1-line-height); 11 | 12 | @include _heading(h2, $h2-font-size, $h2-line-height); 13 | 14 | @include _heading(h3, $h3-font-size, $h3-line-height); 15 | 16 | @include _heading(h4, $h4-font-size, $h4-line-height); 17 | 18 | @include _heading(h5, $h5-font-size, $h5-line-height); 19 | 20 | @include _heading(h6, $h6-font-size, $h6-line-height); 21 | 22 | b, 23 | strong { 24 | font-weight: bolder; 25 | } 26 | 27 | i, 28 | em, 29 | dfn { 30 | font-style: italic; 31 | } 32 | 33 | [title]:where(abbr, dfn) { 34 | text-decoration: $tooltip-text-decoration; 35 | text-underline-offset: $tooltip-underline-offset; 36 | cursor: help; 37 | } 38 | 39 | mark { 40 | background-color: $mark-background; 41 | color: $mark-text; 42 | } 43 | 44 | small, 45 | sub, 46 | sup, 47 | [data-text~="small"] { 48 | font-size: $small-font-size; 49 | } 50 | 51 | sub, 52 | sup { 53 | position: relative; 54 | line-height: 0; 55 | } 56 | 57 | sup { 58 | top: -0.5em; 59 | } 60 | 61 | sub { 62 | bottom: -0.25em; 63 | } 64 | 65 | hr { 66 | display: block; 67 | margin: calc($leading / 2) 0; 68 | min-height: 0.0625rem; 69 | border-top: $hr-border-width $hr-border-style $hr-border-color; 70 | } 71 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/components/toggle.js: -------------------------------------------------------------------------------- 1 | export function toggle(...args) { 2 | const clickedSet = new Set(); 3 | const resetSet = new Set(['pop', 'tooltip', ...args]); 4 | 5 | function reset() { 6 | clickedSet.forEach((item) => { 7 | if (resetSet.has(item.dataset.toggle)) { 8 | item.removeDataAttr('state'); 9 | } 10 | }); 11 | } 12 | 13 | function toggleState(targetToggle) { 14 | const dropBox = targetToggle.closestDataAttr('dropbox'); 15 | const checkState = targetToggle.hasDataAttr('state'); 16 | 17 | if (!dropBox && !checkState) { 18 | reset(); 19 | } 20 | 21 | targetToggle.toggleDataAttr('state', 'active'); 22 | } 23 | 24 | document.addEventListener('click', (e) => { 25 | const targetToggle = e.target.closestDataAttr('toggle'); 26 | 27 | if (targetToggle) { 28 | if (clickedSet.has(targetToggle)) { 29 | return; 30 | } else { 31 | clickedSet.add(targetToggle); 32 | targetToggle.addEventListener( 33 | 'click', 34 | (e) => { 35 | toggleState(targetToggle); 36 | e.stopPropagation(); 37 | }, 38 | true 39 | ); 40 | toggleState(targetToggle); 41 | } 42 | } else { 43 | reset(); 44 | } 45 | 46 | e.stopPropagation(); 47 | }); 48 | 49 | return this; 50 | } 51 | -------------------------------------------------------------------------------- /sources/website/css/core/reset/forms.css: -------------------------------------------------------------------------------- 1 | :where(form) select, 2 | textarea, 3 | input { 4 | margin: $space-y 0; 5 | } 6 | 7 | select, 8 | textarea, 9 | input[type="text"], 10 | input[type="email"], 11 | input[type="password"], 12 | input[type="time"], 13 | input[type="date"], 14 | input[type="datetime-local"], 15 | input[type="month"], 16 | input[type="week"], 17 | input[type="number"], 18 | input[type="range"], 19 | input[type="search"], 20 | input[type="tel"], 21 | input[type="url"] { 22 | display: block; 23 | width: 100%; 24 | padding: $form-padding; 25 | border: $form-border-width solid $form-border-color; 26 | background-color: $form-background; 27 | color: $form-text; 28 | font-family: $form-font-family; 29 | @if $form-border-radius != false { 30 | border-radius: $form-border-radius; 31 | } 32 | transition: $form-transition; 33 | } 34 | 35 | select:focus, 36 | textarea:focus, 37 | input:focus:not([type="button"], [type="reset"], [type="submit"]) { 38 | color: $form-text-active; 39 | border-color: $form-border-active; 40 | } 41 | 42 | textarea { 43 | min-height: $form-text-area-min-height; 44 | overflow: auto; 45 | resize: vertical; 46 | } 47 | 48 | button, 49 | select, 50 | [type="button"], 51 | [type="reset"], 52 | [type="submit"] { 53 | font-family: $button-font-family; 54 | overflow: visible; 55 | text-transform: none; 56 | } 57 | 58 | [type="file"] { 59 | position: absolute; 60 | width: 0; 61 | height: 0; 62 | opacity: 0; 63 | } 64 | 65 | :not([type="button"], [type="reset"], [type="submit"]):invalid { 66 | border-color: $danger; 67 | } 68 | -------------------------------------------------------------------------------- /docs/index.98e51033.js: -------------------------------------------------------------------------------- 1 | /* @license 2 | * Jacob Perez 3 | * Copyright (C) 2024 Jacob Perez 4 | * Licensed under the Apache License, Version 2.0 5 | * http://www.apache.org/licenses/LICENSE-2.0 6 | -----------------------------------------------------------------------------*/ 7 | const meta={type:"",title:document.title,subtitle:"",author:{name:"",url:""},date:{published:"",revised:""},set authorName(e){this.author.name=e},get authorName(){return this.author.name},set authorUrl(e){this.author.url=e},get authorUrl(){return this.author.url},set datePublished(e){this.date.published=e},get datePublished(){return this.date.published},set dateRevised(e){this.date.revised=e},get dateRevised(){return this.date.revised}},template={appendString(e,t){document.querySelector(t).insertAdjacentHTML("beforeend",e)},appendTemplate(e,t,r){const n=e.querySelector(t),a=n.content.cloneNode(!0);document.querySelector(r).appendChild(a),n.remove()},parseTemplate(e,t,r){const n=(new DOMParser).parseFromString(e,"text/html");this.appendTemplate(n,t,r)},setTemplate(e,t,r=null){return new Promise(((t,r)=>{e?t():r()})).then((()=>this.appendTemplate(document,e,t))).then((()=>{"function"==typeof r&&r()})).catch((e=>console.error(e,"Error: Template not found"))),this},fromString(e,t,r=null){return new Promise(((t,r)=>{"string"==typeof e?t():r(err="Error: Source is not a String")})).then((()=>this.appendString(e,t))).then((()=>{"function"==typeof r&&r()})).catch((e=>console.error(e))),this},fetchTemplate(e,t,r=null){return(async()=>{try{let n=await fetch(e),a=await n.text();this.parseTemplate(a,t,t),"function"==typeof r&&r()}catch(e){console.error(e,"Error: Template not found")}})(),this}}; -------------------------------------------------------------------------------- /docs/templates/a.a2e7043d.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module", 3 | "name": "lexica-ultralegible", 4 | "version": "1.0.0", 5 | "description": "Lexica Ultralegible builds on the foundation laid by Atkinson Hyperlegible but offers enhanced flexibility and usability across various applications. Including more glyphs supporting extra languages and additional typographic features like ligatures and alternative flipped zero.", 6 | "targets": { 7 | "dev": { 8 | "source": "./sources/website/index.html", 9 | "distDir": "./docs/" 10 | } 11 | }, 12 | "scripts": { 13 | "dev": "parcel serve --target dev --no-source-maps", 14 | "build": "parcel build --target dev --no-source-maps --no-content-hash --public-url /lexica-ultralegible/" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/jacobxperez/lexica-ultralegible.git" 19 | }, 20 | "author": "Jacob Perez", 21 | "license": "OFL-1.1", 22 | "bugs": { 23 | "url": "https://github.com/jacobxperez/lexica-ultralegible/issues" 24 | }, 25 | "homepage": "https://github.com/jacobxperez/lexica-ultralegible/", 26 | "devDependencies": { 27 | "@mischnic/parcel-namer-preserve-structure": "^0.2.0", 28 | "@parcel/optimizer-terser": "^2.12.0", 29 | "@parcel/transformer-typescript-tsc": "^2.12.0", 30 | "parcel": "^2.12.0", 31 | "parcel-optimizer-friendly-urls": "^0.2.0", 32 | "postcss": "^8.4.47", 33 | "postcss-advanced-variables": "^4.0.0", 34 | "postcss-custom-selectors": "^8.0.1", 35 | "postcss-import": "^16.1.0", 36 | "postcss-mixins": "^11.0.3", 37 | "postcss-nesting": "^13.0.0", 38 | "postcss-url": "^10.1.3", 39 | "prettier": "3.3.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /docs/favicon.e72f58a5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sources/website/css/index.css: -------------------------------------------------------------------------------- 1 | /* @license 2 | * Rams 3 | * Copyright (C) 2024 Jacob Perez 4 | * Licensed under the Apache License, Version 2.0 5 | * http://www.apache.org/licenses/LICENSE-2.0 6 | */ 7 | 8 | /* Theme Settings */ 9 | @import "settings.css"; 10 | 11 | /* Mixins */ 12 | @import "core/mixins/import.css"; 13 | 14 | /* Reset */ 15 | @import "core/reset/base.css"; 16 | @import "core/reset/typography.css"; 17 | @import "core/reset/link.css"; 18 | @import "core/reset/blockquote.css"; 19 | @import "core/reset/code.css"; 20 | @import "core/reset/list.css"; 21 | @import "core/reset/tables.css"; 22 | @import "core/reset/forms.css"; 23 | @import "core/reset/selection.css"; 24 | 25 | /* Components */ 26 | @import "core/components/layout/container.css"; 27 | @import "core/components/layout/grid.css"; 28 | @import "core/components/dropdown/dropbox.css"; 29 | @import "core/components/dropdown/menu.css"; 30 | @import "core/components/dropdown/tooltip.css"; 31 | @import "core/components/dropdown/toggle.css"; 32 | @import "core/components/dropdown/state.css"; 33 | @import "core/components/navigation/anchor.css"; 34 | @import "core/components/navigation/breadcrumb.css"; 35 | @import "core/components/navigation/line.css"; 36 | @import "core/components/navigation/navbar.css"; 37 | @import "core/components/buttons/button.css"; 38 | @import "core/components/buttons/buttons.css"; 39 | @import "core/components/buttons/link.css"; 40 | @import "core/components/buttons/disabled.css"; 41 | 42 | /* Custom Modules */ 43 | @import "custom/sections.css"; 44 | @import "custom/lexica-ultralegible.css"; 45 | /* -------------- */ 46 | 47 | /* Utilities */ 48 | @import "core/utilities/position.css"; 49 | @import "core/utilities/display.css"; 50 | @import "core/utilities/box.css"; 51 | @import "core/utilities/text.css"; 52 | @import "core/utilities/flex-box.css"; 53 | 54 | /* Breakpoints */ 55 | @import "core/breakpoints/import.css"; 56 | 57 | /* Print */ 58 | @import "custom/print.css"; 59 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/methods/data.js: -------------------------------------------------------------------------------- 1 | function setDataAttr() { 2 | Element.prototype.setDataAttr = function (dataName, value = '') { 3 | return this.setAttribute(`data-${dataName}`, value); 4 | }; 5 | } 6 | 7 | function removeDataAttr() { 8 | Element.prototype.removeDataAttr = function (dataName) { 9 | return this.removeAttribute(`data-${dataName}`); 10 | }; 11 | } 12 | 13 | function getDataAttr() { 14 | Element.prototype.getDataAttr = function (dataName, value) { 15 | if (value) { 16 | return this.getAttribute(`data-${dataName}="${value}"`); 17 | } else { 18 | return this.getAttribute(`data-${dataName}`); 19 | } 20 | }; 21 | } 22 | 23 | function hasDataAttr() { 24 | Element.prototype.hasDataAttr = function (dataName, value) { 25 | if (value) { 26 | return this.hasAttribute(`data-${dataName}="${value}"`); 27 | } else { 28 | return this.hasAttribute(`data-${dataName}`); 29 | } 30 | }; 31 | } 32 | 33 | function closestDataAttr() { 34 | Element.prototype.closestDataAttr = function (dataName, value) { 35 | if (value) { 36 | return this.closest(`[data-${dataName}="${value}"]`); 37 | } else { 38 | return this.closest(`[data-${dataName}]`); 39 | } 40 | }; 41 | } 42 | 43 | function matchDataAttr() { 44 | Element.prototype.matchDataAttr = function (dataName, value) { 45 | if (value) { 46 | return this.matches(`[data-${dataName}="${value}"]`); 47 | } else { 48 | return this.matches(`[data-${dataName}]`); 49 | } 50 | }; 51 | } 52 | 53 | function toggleDataAttr() { 54 | Element.prototype.toggleDataAttr = function (dataName, value) { 55 | return this.hasDataAttr(dataName) 56 | ? this.removeDataAttr(dataName) 57 | : this.setDataAttr(dataName, value); 58 | }; 59 | } 60 | 61 | export { 62 | setDataAttr, 63 | removeDataAttr, 64 | getDataAttr, 65 | hasDataAttr, 66 | closestDataAttr, 67 | matchDataAttr, 68 | toggleDataAttr, 69 | }; 70 | -------------------------------------------------------------------------------- /sources/website/js/modules/sidebar.js: -------------------------------------------------------------------------------- 1 | export const sidebar = () => { 2 | const getAside = document.getElementById('aside'); 3 | const getContent = document.getElementById('content'); 4 | 5 | if (meta.type === 'post') { 6 | // gets all the headings of the post 7 | const getHeadings = getContent.querySelectorAll( 8 | 'h1, h2, h3, h4, h5, h6' 9 | ); 10 | 11 | const contents = ` 12 |
    13 |
  • 14 |

    Contents

    15 |
    • 16 |
17 | 18 | `; 29 | 30 | // insert contents into aside 31 | getAside.insertAdjacentHTML('beforeend', contents); 32 | 33 | // generates sidebar navigation with post headings 34 | getHeadings.forEach((heading, i) => { 35 | heading.setAttribute('id', `${i}`); 36 | const headingInnerText = heading.innerText; 37 | 38 | // generates navigation for large and medium screens 39 | const links = `
  • ${headingInnerText}
    • `; 40 | const getContents = document.getElementById('contents'); 41 | getContents.insertAdjacentHTML('beforeend', links); 42 | 43 | // generates navigation for small screens 44 | const dropdownLinks = `
  • ${headingInnerText}
    • `; 45 | const getContentsDropdown = 46 | document.getElementById('contentsDropdown'); 47 | getContentsDropdown.insertAdjacentHTML('beforeend', dropdownLinks); 48 | }); 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /sources/website/css/core/components/buttons/buttons.css: -------------------------------------------------------------------------------- 1 | [data-button~="outline"] { 2 | color: $button-outline-text-color; 3 | border-color: $button-outline-border-color; 4 | 5 | &:is([data-state="active"], :hover, :active) { 6 | background-color: $button-outline-background-active; 7 | color: $button-outline-text-color-active; 8 | } 9 | } 10 | 11 | /* Tertiary */ 12 | @include button( 13 | tertiary, 14 | $tertiary, 15 | $tertiary-text, 16 | $tertiary-active, 17 | $tertiary-text-active 18 | ); 19 | 20 | @include button-outline( 21 | tertiary, 22 | $tertiary, 23 | $tertiary, 24 | $tertiary, 25 | $tertiary-text-active 26 | ); 27 | 28 | /* Secondary */ 29 | @include button( 30 | secondary, 31 | $secondary, 32 | $secondary-text, 33 | $secondary-active, 34 | $secondary-text-active 35 | ); 36 | 37 | @include button-outline( 38 | secondary, 39 | $secondary, 40 | $secondary, 41 | $secondary, 42 | $secondary-text-active 43 | ); 44 | 45 | /* Primary */ 46 | @include button( 47 | primary, 48 | $primary, 49 | $primary-text, 50 | $primary-active, 51 | $primary-text-active 52 | ); 53 | 54 | @include button-outline( 55 | primary, 56 | $primary, 57 | $primary, 58 | $primary, 59 | $primary-text-active 60 | ); 61 | 62 | /* Success */ 63 | @include button( 64 | success, 65 | $success, 66 | $success-text, 67 | $success-active, 68 | $success-text-active 69 | ); 70 | 71 | @include button-outline( 72 | success, 73 | $success, 74 | $success, 75 | $success, 76 | $success-text-active 77 | ); 78 | 79 | /* Warning */ 80 | @include button( 81 | warning, 82 | $warning, 83 | $warning-text, 84 | $warning-active, 85 | $warning-text-active 86 | ); 87 | @include button-outline( 88 | warning, 89 | $warning, 90 | $warning, 91 | $warning, 92 | $warning-text-active 93 | ); 94 | 95 | /* Danger */ 96 | @include button( 97 | danger, 98 | $danger, 99 | $danger-text, 100 | $danger-active, 101 | $danger-text-active 102 | ); 103 | 104 | @include button-outline(danger, $danger, $danger, $danger, $danger-text-active); 105 | 106 | /* Outline */ 107 | [data-button~="outline"] { 108 | background-color: transparent; 109 | } 110 | -------------------------------------------------------------------------------- /sources/website/js/defer.js: -------------------------------------------------------------------------------- 1 | /* @license 2 | * Jacob Perez 3 | * Copyright (C) 2024 Jacob Perez 4 | * Licensed under the Apache License, Version 2.0 5 | * http://www.apache.org/licenses/LICENSE-2.0 6 | -----------------------------------------------------------------------------*/ 7 | import {sidebar} from './modules/sidebar.js'; 8 | import {rams} from './rams/rams.js'; 9 | 10 | if (meta.title === '') { 11 | meta.title = `

    Rams

    `; 12 | } else { 13 | meta.title = `

    ${meta.title}

    `; 14 | } 15 | 16 | let nav = ` 17 | 18 | `; 19 | 20 | let header = ` 21 | 24 | `; 25 | 26 | let main = ` 27 |
    28 | 29 |
    30 |
    31 | `; 32 | 33 | if (meta.type === 'fullPage') { 34 | main = ` 35 |
    36 |
    37 |
    38 | `; 39 | } 40 | 41 | let footer = ` 42 |
    43 | 45 |
    46 | `; 47 | 48 | // check and set template url for localhost or for public url 49 | let templateURL; 50 | location.hostname === 'localhost' || location.hostname === '127.0.0.1' 51 | ? (templateURL = window.location.origin + '/templates/a.d8a682f1.html') 52 | : (templateURL = 53 | window.location.origin + 54 | '/lexica-ultralegible/templates/a.a2e7043d.html'); 55 | 56 | // create main layout 57 | let layout = ` 58 | ${nav} 59 |
    60 | ${header} 61 |
    62 |
    63 | ${main} 64 |
    65 | ${footer} 66 | `; 67 | 68 | // parse everything together 69 | template 70 | .fromString(layout, 'body') 71 | .setTemplate('#headerTemplate', '#header') 72 | .setTemplate('#contentTemplate', '#content', sidebar) 73 | .fetchTemplate(templateURL, '#nav') 74 | .fetchTemplate(templateURL, '#footer'); 75 | 76 | rams.toggle(); 77 | // .carousel() 78 | // .addControls() 79 | // .addIndicators() 80 | // .addTouchControls() 81 | // .addKeyboardControls(); 82 | -------------------------------------------------------------------------------- /sources/website/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 14 | 17 | 25 | 28 | 32 | 36 | 40 | 44 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /sources/website/templates/a.html: -------------------------------------------------------------------------------- 1 | 80 | 81 | 97 | -------------------------------------------------------------------------------- /sources/website/js/index.js: -------------------------------------------------------------------------------- 1 | /* @license 2 | * Jacob Perez 3 | * Copyright (C) 2024 Jacob Perez 4 | * Licensed under the Apache License, Version 2.0 5 | * http://www.apache.org/licenses/LICENSE-2.0 6 | -----------------------------------------------------------------------------*/ 7 | const meta = { 8 | type: '', 9 | title: document.title, 10 | subtitle: '', 11 | author: { 12 | name: '', 13 | url: '', 14 | }, 15 | date: { 16 | published: '', 17 | revised: '', 18 | }, 19 | set authorName(name) { 20 | this.author.name = name; 21 | }, 22 | get authorName() { 23 | return this.author.name; 24 | }, 25 | set authorUrl(url) { 26 | this.author.url = url; 27 | }, 28 | get authorUrl() { 29 | return this.author.url; 30 | }, 31 | set datePublished(date) { 32 | this.date.published = date; 33 | }, 34 | get datePublished() { 35 | return this.date.published; 36 | }, 37 | set dateRevised(date) { 38 | this.date.revised = date; 39 | }, 40 | get dateRevised() { 41 | return this.date.revised; 42 | }, 43 | }; 44 | 45 | const template = { 46 | appendString(string, targetSelector) { 47 | const targetElement = document.querySelector(targetSelector); 48 | targetElement.insertAdjacentHTML('beforeend', string); 49 | }, 50 | appendTemplate(sourceElement, templateSelector, targetSelector) { 51 | const sourceTemplate = sourceElement.querySelector(templateSelector); 52 | const clonedTemplate = sourceTemplate.content.cloneNode(true); 53 | const targetElement = document.querySelector(targetSelector); 54 | targetElement.appendChild(clonedTemplate); 55 | sourceTemplate.remove(); 56 | }, 57 | parseTemplate(string, templateSelector, targetSelector) { 58 | const parser = new DOMParser(); 59 | const parsedSource = parser.parseFromString(string, 'text/html'); 60 | this.appendTemplate(parsedSource, templateSelector, targetSelector); 61 | }, 62 | setTemplate(templateSelector, targetSelector, callback = null) { 63 | new Promise((resolve, reject) => { 64 | templateSelector ? resolve() : reject(); 65 | }) 66 | .then(() => 67 | this.appendTemplate(document, templateSelector, targetSelector) 68 | ) 69 | .then(() => { 70 | if (typeof callback === 'function') { 71 | callback(); 72 | } 73 | }) 74 | .catch((err) => console.error(err, 'Error: Template not found')); 75 | 76 | return this; 77 | }, 78 | fromString(string, targetSelector, callback = null) { 79 | new Promise((resolve, reject) => { 80 | typeof string === 'string' 81 | ? resolve() 82 | : reject((err = 'Error: Source is not a String')); 83 | }) 84 | .then(() => this.appendString(string, targetSelector)) 85 | .then(() => { 86 | if (typeof callback === 'function') { 87 | callback(); 88 | } 89 | }) 90 | .catch((err) => console.error(err)); 91 | 92 | return this; 93 | }, 94 | fetchTemplate(url, targetSelector, callback = null) { 95 | (async () => { 96 | try { 97 | let response = await fetch(url); 98 | let fetchURL = await response.text(); 99 | this.parseTemplate(fetchURL, targetSelector, targetSelector); 100 | if (typeof callback === 'function') { 101 | callback(); 102 | } 103 | } catch (err) { 104 | console.error(err, 'Error: Template not found'); 105 | } 106 | })(); 107 | 108 | return this; 109 | }, 110 | }; 111 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2020 Braille Institute of America, Inc. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION & CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /docs/index.02a8a724.js: -------------------------------------------------------------------------------- 1 | function t(t,e,a,n){Object.defineProperty(t,e,{get:a,set:n,enumerable:!0,configurable:!0})}var e=globalThis,a={},n={},o=e.parcelRequire7569;null==o&&((o=function(t){if(t in a)return a[t].exports;if(t in n){var e=n[t];delete n[t];var o={id:t,exports:{}};return a[t]=o,e.call(o.exports,o,o.exports),o.exports}var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}).register=function(t,e){n[t]=e},e.parcelRequire7569=o),(0,o.register)("f8aow",(function(e,a){function n(){Element.prototype.setDataAttr=function(t,e=""){return this.setAttribute(`data-${t}`,e)}}function o(){Element.prototype.removeDataAttr=function(t){return this.removeAttribute(`data-${t}`)}}function r(){Element.prototype.getDataAttr=function(t,e){return e?this.getAttribute(`data-${t}="${e}"`):this.getAttribute(`data-${t}`)}}function i(){Element.prototype.hasDataAttr=function(t,e){return e?this.hasAttribute(`data-${t}="${e}"`):this.hasAttribute(`data-${t}`)}}function s(){Element.prototype.closestDataAttr=function(t,e){return e?this.closest(`[data-${t}="${e}"]`):this.closest(`[data-${t}]`)}}function l(){Element.prototype.matchDataAttr=function(t,e){return e?this.matches(`[data-${t}="${e}"]`):this.matches(`[data-${t}]`)}}function d(){Element.prototype.toggleDataAttr=function(t,e){return this.hasDataAttr(t)?this.removeDataAttr(t):this.setDataAttr(t,e)}}t(e.exports,"setDataAttr",(()=>n)),t(e.exports,"removeDataAttr",(()=>o)),t(e.exports,"getDataAttr",(()=>r)),t(e.exports,"hasDataAttr",(()=>i)),t(e.exports,"closestDataAttr",(()=>s)),t(e.exports,"matchDataAttr",(()=>l)),t(e.exports,"toggleDataAttr",(()=>d))}));var r=o("f8aow");function i(...t){const e=new Set,a=new Set(["pop","tooltip",...t]);function n(){e.forEach((t=>{a.has(t.dataset.toggle)&&t.removeDataAttr("state")}))}function o(t){const e=t.closestDataAttr("dropbox"),a=t.hasDataAttr("state");e||a||n(),t.toggleDataAttr("state","active")}return document.addEventListener("click",(t=>{const a=t.target.closestDataAttr("toggle");if(a){if(e.has(a))return;e.add(a),a.addEventListener("click",(t=>{o(a),t.stopPropagation()}),!0),o(a)}else n();t.stopPropagation()})),this}class s{constructor(){s.#t(),this.toggle=i}static#t(){(0,r.setDataAttr)(),(0,r.removeDataAttr)(),(0,r.getDataAttr)(),(0,r.hasDataAttr)(),(0,r.closestDataAttr)(),(0,r.matchDataAttr)(),(0,r.toggleDataAttr)()}toggle}const l=new s;""===meta.title?meta.title="

    Rams

    ":meta.title=`

    ${meta.title}

    `;let d=`\n \n `,c='\n
    \n \n
    \n
    \n ';"fullPage"===meta.type&&(c='\n
    \n
    \n
    \n ');let m;m="localhost"===location.hostname||"127.0.0.1"===location.hostname?window.location.origin+"/templates/a.d8a682f1.html":window.location.origin+"/lexica-ultralegible/templates/a.a2e7043d.html";let u=`\n \n \n \n
    \n ${d}\n
    \n
    \n ${c}\n
    \n \n
    \n \n
    \n \n `;template.fromString(u,"body").setTemplate("#headerTemplate","#header").setTemplate("#contentTemplate","#content",(()=>{const t=document.getElementById("aside"),e=document.getElementById("content");if("post"===meta.type){const a=e.querySelectorAll("h1, h2, h3, h4, h5, h6"),n='\n
      \n
    • \n

      Contents

      \n
      • \n
    \n \n ';t.insertAdjacentHTML("beforeend",n),a.forEach(((t,e)=>{t.setAttribute("id",`${e}`);const a=t.innerText,n=`
  • ${a}
    • `;document.getElementById("contents").insertAdjacentHTML("beforeend",n);const o=`
  • ${a}
    • `;document.getElementById("contentsDropdown").insertAdjacentHTML("beforeend",o)}))}})).fetchTemplate(m,"#nav").fetchTemplate(m,"#footer"),l.toggle(); -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | Code of Conduct. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Welcome designers, help us improve Lexica Ultralegible for everyone. Before you start contributing to this project, it's important to read the following sections to better understand it's vision. If you come across any [font issue](#font-issue) or have any [feature requests](#feature-requests), please use the [issue tracker](https://github.com/jacobxperez/lexica-ultralegible/issues). You can also submit a project [proposal](#proposals) and engage with the community by opening a [discussion](https://github.com/jacobxperez/lexica-ultralegible/discussions). Any contribution or feedback is welcome. 4 | 5 | --- 6 | 7 | ## Table of Contents 8 | 9 | * [Project Scope](#project-scope) 10 | * [Opening Up The Source Files](#opening-up-the-source-files) 11 | * [Compile Website](#compile-website) 12 | * [Framework](#framework) 13 | * [CSS Files](#css-files) 14 | * [Pull Requests](#pull-requests) 15 | * [Issues](#issues) 16 | * [Help Us Fix An Issue](#help-us-fix-an-issue) 17 | * [Font issue](#font-issue) 18 | * [Feature Requests](#feature-requests) 19 | * [Proposals](#proposals) 20 | * [Projects](#projects) 21 | 22 | ## Project Scope 23 | 24 | The original typeface was specifically designed to improve character recognition 25 | and legibility for low-vision readers, this was achieve by incorporating distinctive 26 | and unambiguous letterform’s. Our aim is to continue to improve this typeface and to 27 | provide a better reading experience to low-vision readers around the world. 28 | 29 | ## Opening Up The Source Files 30 | 31 | We use [FontForge](https://fontforge.org/en-US/) which allows you to create and 32 | modify postscript, truetype and opentype fonts. You can save fonts in many different 33 | outline formats, and generate bitmaps. 34 | 35 | ## Compile Website 36 | 37 | Install dependencies on your machine with [npm](https://www.npmjs.com/) 38 | 39 | ```bash 40 | npm install 41 | ``` 42 | 43 | On your terminal run these scripts to compile 44 | 45 | * `npm run dev` serve current development build 46 | * `npm run build` makes current build 47 | 48 | ### Framework 49 | 50 | We are using [Rams](https://github.com/jacobxperez/rams) as our website framework. Do **not** edit the [core](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/core) files because they are part of the Rams core framework files. However, you can edit the [custom](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/custom) folder files the [main.css](https://github.com/jacobxperez/lexica-ultralegible/blob/main/sources/website/css/main.css) or the [var.css](https://github.com/jacobxperez/lexica-ultralegible/blob/main/sources/website/css/var.css) if any change is accepted by the maintainers. Any new CSS file should be added in the [custom](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/custom) folder then linked in the [main.css](https://github.com/jacobxperez/lexica-ultralegible/blob/main/sources/website/css/main.css) file for compiling. 51 | 52 | ### CSS Files 53 | 54 | * [/css](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/) 55 | * [core](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/core) (important files for compiling) 56 | * [custom](https://github.com/jacobxperez/lexica-ultralegible/tree/main/sources/website/css/custom) (add custom modules here) 57 | * [main.css](https://github.com/jacobxperez/lexica-ultralegible/blob/main/sources/website/css/main.css) (compile to produce the final CSS) 58 | * [var.css](https://github.com/jacobxperez/lexica-ultralegible/blob/main/sources/website/css/var.css) (variables for font, colors, and more) 59 | 60 | ## Pull Requests 61 | 62 | Before embarking on any significant pull request, ask first by submitting an 63 | [issue](https://github.com/jacobxperez/lexica-ultralegible/issues/new/choose) 64 | or starting a [discussion](https://github.com/jacobxperez/lexica-ultralegible/discussions). 65 | Otherwise, you may end up spending a lot of time working on something that we might 66 | not want to merge into the project. Any contribution to this project will be subject 67 | to the same terms and conditions of the [license agreement](https://github.com/jacobxperez/lexica-ultralegible#license). 68 | Be precise on your pull request, and do **not** try to submit changes that were 69 | not agreed upon. When contributing to this project, ask yourself these questions: 70 | 71 | * Is it essential? 72 | * Will it add value? 73 | * Is this change necessary? 74 | 75 | ## Issues 76 | 77 | When submitting an issue, it is crucial to provide us with as much detail as 78 | possible so that we can find the best solution to your problem. Please use the 79 | [issue](https://github.com/jacobxperez/lexica-ultralegible/issues/new/choose) 80 | template that best describes your concern. 81 | 82 | **note**: Submitting an issue does **not** guarantee that your issue will be solved. 83 | 84 | ## Help Us Fix An Issue 85 | 86 | There might be a couple of [issues](https://github.com/jacobxperez/lexica-ultralegible/issues) 87 | that need your help. If no one is working on an issue, you can ask to get assigned one. 88 | 89 | ## Font Issue 90 | 91 | Before submitting a font issue make sure your issue is not already reported on the 92 | [issue](https://github.com/jacobxperez/lexica-ultralegible/issues) tracker. 93 | If not, use the font issue template to report any problem you may have encountered. 94 | 95 | ## Feature Requests 96 | 97 | If you have an idea that you think will benefit the community but do not want to 98 | work on it yourself, then use the feature request template. If your idea is approved, 99 | we will work on it as soon as possible. 100 | 101 | ## Proposals 102 | 103 | If you have an idea for an update or a feature that you would like to implement. 104 | Then, using the proposal template is a great way to suggest your respective solution. 105 | Please provide us with as much detail as possible because it is up to you to convince 106 | the project maintainers to approve your implementation. Be ready to answer any questions 107 | the project maintainers might have. If your proposal is approved, we will assign it to you. 108 | 109 | ## Projects 110 | 111 | We might have a couple of [projects](https://github.com/jacobxperez/lexica-ultralegible/projects?query=is%3Aopen) 112 | open that need your help. Let us know if you want to contribute to any of them by opening 113 | an [issue](https://github.com/jacobxperez/lexica-ultralegible/issues/new/choose) 114 | or starting a [discussion](https://github.com/jacobxperez/lexica-ultralegible/discussions). 115 | -------------------------------------------------------------------------------- /Changelog.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | * Fix all non-integral coordinates 4 | * Round all points to integer coordinates 5 | * Breve mark has been thickened and slightly made wider 6 | * Added auto hint using FontForge AutoHint tool 7 | * Harmonized curves using FontForge balance tool 8 | * Change curve type from quadratic to cubic 9 | * Fix t with cedilla `ţ` `U+0163` now showing correct glyph 10 | 11 | ## Kern Log 12 | 13 | * Kern `v` `w` `y` pairs 14 | * Kern `Q` and `U` pairs 15 | * Kern `S` and `T V Y` pairs 16 | * Kern `K` and `c d e o g q` pairs 17 | * Kern `Y` and `c d e o g q m n p r` pairs 18 | * Kern `W` and `c d e o g q m n p r` pairs 19 | * Kern `V` and `c d e o g q m n p r` pairs 20 | * Kern `T` and `c d e o g q m n p r u v w x y z` pairs 21 | 22 | ## Added Characters and Glyphs 23 | 24 | * `U+0166` `Ŧ` T With Stroke and `U+0167` `ŧ` 25 | * `U+0197` `Ɨ` I With Stroke and `U+0268` `ɨ` 26 | * `U+01EA` `Ǫ` O With Ogonek and `U+01EB` `ǫ` 27 | * `U+019E` `ƞ` N With Long Right Leg 28 | * `U+019D` `Ɲ` N With Left Hook `U+0272` `ɲ` 29 | * `U+014A` `Ŋ` Letter Eng and `U+014B` `ŋ` 30 | * `U+0149` `ʼn` N Preceded By Apostrophe 31 | * `U+0256` `ɖ` D With Tail 32 | * `U+1E62` `Ṣ` S With Dot Below and `U+1E63` `ṣ` 33 | * `U+1E36` `Ḷ` L With Dot Below and `U+1E37` `ḷ` 34 | * `U+1E24` `Ḥ` H with Dot Below and `U+1E25` `ḥ` 35 | * `U+1E0C` `Ḍ` D With Dot Below and `U+1E0D` `ḍ` 36 | * `U+1E04` `Ḅ` B With Dot Below and `U+1E05` `ḅ` 37 | * `U+1E8C` `Ẍ` X With Diaeresis and `U+1E8D` `ẍ` 38 | * `U+1E26` `Ḧ` H With Diaeresis and `U+1E27` `ḧ` 39 | * `U+01FA` `Ǻ` A With Ring Above And Acute and `U+01FB` `ǻ` 40 | * `U+01CB` `Nj` N With Small Letter J 41 | * `U+01CA` `NJ` Nj and nj `U+01CC` `nj` 42 | * `U+01C8` `Lj` L With Small Letter J 43 | * `U+01C7` `LJ` Lj and `U+01C9` `lj` 44 | * `U+01C5` `Dž` D With Small Letter Z With Caron 45 | * `U+01C4` `DŽ` Dz With Caron and `U+01C6` `dž` 46 | * `U+01F2` `Dz` D With Small Letter Z 47 | * `U+01F1` `DZ` Dz and `U+01F3` `dz` 48 | * `U+031B` Combining Horn 49 | * `U+0309` Combining Hook Above 50 | * `U+0323` Combining Dot Below 51 | * `U+017F` `ſ` Long S 52 | * `U+FFFD` Replacement Character 53 | * `U+1EC8` `Ỉ` I With Hook Above and `U+1EC9` `ỉ` 54 | * `U+1ECA` `Ị` Letter I With Dot Below and `U+1ECB` `ị` 55 | * `U+1EF4` `Ỵ` Y With Dot Below and `U+1EF5` `ỵ` 56 | * `U+1EF6` `Ỷ` Y With Hook Above and `U+1EF7` `ỷ` 57 | * `U+1EB8` `Ẹ` E With Dot Below and `U+1EB9` `ẹ` 58 | * `U+1EBA` `Ẻ` E With Hook Above and `U+1EBB` `ẻ` 59 | * `U+1EBE` `Ế` E With Circumflex And Acute and `U+1EBF` `ế` 60 | * `U+1EC0` `Ề` E With Circumflex And Grave and `U+1EC1` `ề` 61 | * `U+1EC2` `Ể` E With Circumflex And Hook Above and `U+1EC3` `ể` 62 | * `U+1EC4` `Ễ` E With Circumflex And Tilde and `U+1EC5` `ễ` 63 | * `U+1EC6` `Ệ` E With Circumflex And Dot Below and `U+1EC7` `ệ` 64 | * `U+01AF` `Ư` U With Horn and `U+01B0` `ư` 65 | * `U+1EE4` `Ụ` U With Dot Below and `U+1EE5` `ụ` 66 | * `U+1EE6` `Ủ` U With Hook Above and `U+1EE7` `ủ` 67 | * `U+1EE8` `Ứ` U With Horn And Acute and `U+1EE9` `ứ` 68 | * `U+1EEA` `Ừ` U With Horn And Grave and `U+1EEB` `ừ` 69 | * `U+1EEC` `Ử` U With Horn And Hook Above and `U+1EED` `ử` 70 | * `U+1EEE` `Ữ` U With Horn And Tilde and `U+1EEF` `ữ` 71 | * `U+1EF0` `Ự` U With Horn And Dot Below and `U+1EF1` `ự` 72 | * `U+01A0` `Ơ` O With Horn and `U+01A1` `ơ` 73 | * `U+1ECC` `Ọ` O With Dot Below and `U+1ECD` `ọ` 74 | * `U+1ECE` `Ỏ` O With Hook Above and `U+1ECF` `ỏ` 75 | * `U+1ED0` `Ố` O With Circumflex And Acute and `U+1ED1` `ố` 76 | * `U+1ED2` `Ồ` O With Circumflex And Grave and `U+1ED3` `ồ` 77 | * `U+1ED4` `Ổ` O With Circumflex And Hook Above and `U+1ED5` `ổ` 78 | * `U+1ED6` `Ỗ` O With Circumflex And Tilde and `U+1ED7` `ỗ` 79 | * `U+1ED8` `Ộ` O With Circumflex And Dot Below and `U+1ED9` `ộ` 80 | * `U+1EDA` `Ớ` O With Horn And Acute and `U+1EDB` `ớ` 81 | * `U+1EDC` `Ờ` O With Horn And Grave and `U+1EDD` `ờ` 82 | * `U+1EDE` `Ở` O With Horn And Hook Above and `U+1EDF` `ở` 83 | * `U+1EE0` `Ỡ` O With Horn And Tilde and `U+1EE1` `ỡ` 84 | * `U+1EE2` `Ợ` O With Horn And Dot Below and `U+1EE3` `ợ` 85 | * `U+1EB6` `Ặ` A With Breve And Dot Below and `U+1EB7` `ặ` 86 | * `U+1EB4` `Ẵ` A With Breve And Tilde and `U+1EB5` `ẵ` 87 | * `U+1EB2` `Ẳ` A With Breve And Hook Above and `U+1EB3` `ẳ` 88 | * `U+1EB0` `Ằ` A With Breve And Grave and `U+1EB1` `ằ` 89 | * `U+1EAE` `Ắ` A With Breve And Acute and `U+1EAF` `ắ` 90 | * `U+1EAC` `Ậ` A With Circumflex And Dot Below and `U+1EAD` `ậ` 91 | * `U+1EAA` `Ẫ` A With Circumflex And Tilde and `U+1EAB` `ẫ` 92 | * `U+1EA8` `Ẩ` A With Circumflex And Hook Above and `U+1EA9` `ẩ` 93 | * `U+1EA6` `Ầ` A With Circumflex And Grave and `U+1EA7` `ầ` 94 | * `U+1EA4` `Ấ` A With Circumflex And Acute and `U+1EA5` `ấ` 95 | * `U+1EA2` `Ả` A With Hook Above and `U+1EA3` `ả` 96 | * `U+1EA0` `Ạ` A With Dot Below and `U+1EA1` `ạ` 97 | * `U+02BC` `ʼ` Modifier letter apostrophe 98 | * `U+01D3` `Ǔ` U with caron and `U+01D4` `ǔ` 99 | * `U+021E` `Ȟ` H with caron and `U+021F` `ȟ` 100 | * `U+01CD` `Ǎ` A with caron and `U+01CE` `ǎ` 101 | * `U+1EF8` `Ỹ` Y with tilde and `U+1EF9` `ỹ` 102 | * `U+0232` `Ȳ` Y with macron and `U+0233` `ȳ` 103 | * `U+01E6` `Ǧ` G with caron and `U+01E7` `ǧ` 104 | * `U+1EBC` `Ẽ` E with tilde and `U+1EBD` `ẽ` 105 | * `U+01FE` `Ǿ` O with stroke and acute and `U+01FF` `ǿ` 106 | * `U+01FC` `Ǽ` Ae with acute and `U+01FD` `ǽ` 107 | * `U+014E` `Ŏ` O with breve and `U+014F` `ŏ` 108 | * `U+013F` `Ŀ` L with middle dot and `U+0140` `ŀ` 109 | * `U+012C` `Ĭ` I with breve and `U+012D` `ĭ` 110 | * `U+0128` `Ĩ` I with tilde and `U+0129` `ĩ` 111 | * `U+0114` `Ĕ` E with breve and `U+0115` `ĕ` 112 | * `U+2010` `‐` Hyphen 113 | * `U+0168` `Ũ` U with tilde and `U+0169` `ũ` 114 | * `U+016C` `Ŭ` U with breve and `U+016D` `ŭ` 115 | * `U+015C` `Ŝ` S with circumflex and `U+015D` `ŝ` 116 | * `U+0124` `Ĥ` H with circumflex and `U+0125` `ĥ` 117 | * `U+011C` `Ĝ` G with circumflex and `U+011D` `ĝ` 118 | * `U+0108` `Ĉ` C with circumflex and `U+0109` `ĉ` 119 | * `U+0134` `Ĵ` J with circumflex and `U+0135` `ĵ` 120 | * `U+0237` `ȷ` Dottles J 121 | * `U+0132` `Ij` Ligature Ij and `U+0133` `ij` 122 | * `U+0139` `Ĺ` L with acute and `U+013A` `ĺ` 123 | * `U+0130` `İ` I with dot above 124 | * `U+014C` `Ō` O with Macron and `U+014D` `ō` 125 | * `U+0156` `Ŗ` R with cedilla and `U+0157` `ŗ` 126 | * `U+1E6A` `Ṫ` T with dot above and `U+1E6B` `ṫ` 127 | * `U+1E60` `Ṡ` S with dot above and `U+1E61` `ṡ` 128 | * `U+1E56` `Ṗ` P with dot above and `U+1E57` `ṗ` 129 | * `U+1E40` `Ṁ` M with dot above and `U+1E41` `ṁ` 130 | * `U+0176` `Ŷ` Y with circumflex and `U+0177` `ŷ` 131 | * `U+1EF2` `Ỳ` Y with grave and `U+1EF3` `ỳ` 132 | * `U+0174` `Ŵ` W with circumflex and `U+0175` `ŵ` 133 | * `U+1E84` `Ẅ` W with diaeresis and `U+1E85` `ẅ` 134 | * `U+1E80` `Ẁ` W with grave and `U+1E81` `ẁ` 135 | * `U+1E82` `Ẃ` W with acute and `U+1E83` `ẃ` 136 | * `U+1E1E` `Ḟ` F with dot above and `U+1E1F` `ḟ` 137 | * `U+1E0A` `Ḋ` D with dot above and `U+1E0B` `ḋ` 138 | * `U+1E02` `Ḃ` B with dot above and `U+1E03` `ḃ` 139 | * `U+20AB` `₫` Dong 140 | * `U+1F12F` `🄯` Copyleft 141 | * Ligatures for `fi ff ffi fl ffl` 142 | * Alternative reversed number zero `0` 143 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Lexica Ultralegible](https://jacobxperez.github.io/lexica-ultralegible/) 2 | 3 | Lexica Ultralegible builds on the foundation laid by Atkinson Hyperlegible but offers enhanced flexibility 4 | and usability across various applications. Including more glyphs supporting extra languages and additional 5 | typographic features like ligatures and alternative flipped zero. 6 | 7 | --- 8 | ![banner](docs/banner.jpg) 9 | 10 | ## Table of Contents 11 | 12 | * [Overview](#overview) 13 | * [Design Features](#design-features) 14 | * [Installing](#installing-the-font) 15 | * [Language Support](#language-support) 16 | * [OpenType Features](#opentype-features) 17 | * [Flip the Zero](#flip-the-zero) 18 | * [Ligatures](#ligatures) 19 | * [Locally Run Website](#locally-run-website) 20 | * [Contributing](#contributing) 21 | * [License](#license) 22 | * [Font](#font) 23 | * [Code](#website-code) 24 | 25 | ## Overview 26 | 27 | With Lexica Ultralegible, we aim to continue the mission of the original typeface by maintaining the 28 | core values of legibility and readability while introducing a fresh identity. By honoring the original 29 | design while evolving its character, Lexica Ultralegible stands as a testament to the importance of 30 | accessibility in typography. 31 | 32 | * Four fonts, including two weights (regular, italic, bold, bold italic) 33 | * An additional 222 glyphs supporting 102 languages 34 | * Supports 340 orthographies according to [Hyperglot](https://hyperglot.rosettatype.com/) 35 | * 2,356 total glyphs across all fonts, 589 per font 36 | * Improve legibility and readability for low vision readers 37 | * Updated kerning for visual harmony and readability 38 | * Includes standard ligatures `fi ff ffi fl ffl` 39 | * Alternative reversed number zero `0` 40 | 41 | ### Design Features 42 | 43 | Designed for low-vision readers, certain letters and numbers can be hard to distinguish. 44 | Lexica Ultralegible differentiates common misinterpreted letters and numbers using various 45 | design techniques: B vs. 8, 1 vs. L vs. l vs. I. Recognizable Footprints: Character boundaries 46 | are clearly defined, ensuring understanding across the visual-ability spectrum. 47 | 48 | > `Q vs G, E vs F, p vs q, i vs r, O vs 0` 49 | 50 | Differentiated letterform’s: Similar letter pairs are differentiated from each other to dramatically 51 | increase legibility. Unambiguous Characters: designed to increase legibility and distinction. 52 | 53 | > `ER79jr Vsa36` 54 | 55 | Exaggerated forms: Shaping of letters is exaggerated to provide better clarity. 56 | Opened Counterspace: Open areas of certain letters are expanded to provide greater distinction. 57 | 58 | > `aGbgrpqu Åö8ij%?¡:` 59 | 60 | Angled spurs and differentiated tails: Increase recognition and define distinctive style. 61 | Circular Details: Links to the history of Braille Institute and braille dots. 62 | 63 | ### Installing the Font 64 | 65 | * [Download](https://github.com/jacobxperez/lexica-ultralegible/archive/refs/heads/release.zip) the font from the release branch. 66 | * Extract the file to reveal additional folders inside. Find the Open Type Format (.otf) files for the four Lexica Ultralegible fonts (regular, italic, bold, bold italic) inside the “[fonts/otf](https://github.com/jacobxperez/lexica-ultralegible/tree/main/fonts/otf)” folder. 67 | * Note: Only the otf files are needed to install the font on a computer. 68 | * On Windows 10: Double-click the font file, then click the “Install” button in the font preview window that opens. The font will be installed. Alternatively, right-click on the file and choose “Install” from the pop-up menu. 69 | * On Mac: Double-click the font file in the Finder, then click “Install Font” in the font preview window that opens. After your Mac validates the font and opens the Font Book app, the font is installed and available for use. 70 | 71 | ### Language Support 72 | 73 | Afrikaans Albanian Asturian Asu Basque Bemba Bena Breton Catalan Chiga Colognian Cornish Croatian Czech Danish Dutch Embu English Esperanto Estonian Faroese Filipino Finnish French Friulian Galician Ganda German Gusii Hungarian Icelandic Inari Sami Indonesian Irish Italian Jola-Fonyi Kabuverdianu Kalenjin Kamba Kikuyu Kinyarwanda Koyraboro Senni Koyra Chiini Lakota Latvian Lithuanian Lower Sorbian Luo Luxembourgish Luyia Machame Makhuwa-Meetto Makonde Malagasy Maltese Manx Meru Morisyen Northern Sami North Ndebele Norwegian Bokmål Norwegian Nynorsk Nyankole Oromo Polish Portuguese Quechua Romanian Romansh Rombo Rundi Rwa Samburu Sango Sangu Scottish Gaelic Sena Serbian Shambala Shona Slovak Soga Somali Spanish Swahili Swedish Swiss German Taita Tasawaq Teso Turkish Upper Sorbian Uzbek (Latin) Vietnamese Volapük Vunjo Walser Welsh Western Frisian Yoruba Zarma Zulu. 74 | 75 | ## OpenType Features 76 | 77 | OpenType features refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures, kerning, fractions, numeral styles, and several others. 78 | 79 | ### Flip the Zero 80 | 81 | By default the zero remains with a backslash `\` this was done to prevent confusion with the Danish Ø however, when pairing the typeface with a monospace that only supports a forwardslash `/` zero, this may create a cognitive dissonance problem. On that occasion, you might want to flip the zero: 82 | 83 | ```css 84 | body { 85 | font-family: "Lexica Ultralegible", "Atkinson Hyperlegible", Helvetica, Arial, sans-serif; 86 | font-size: 100%; 87 | font-weight: 400; 88 | font-variant-numeric: slashed-zero; 89 | } 90 | ``` 91 | 92 | ### Ligatures 93 | 94 | Web browsers have ligatures activated by default, we recommend disabling them for heading or large display text. 95 | 96 | ```css 97 | h1, h2, h3 { 98 | font-variant-ligatures: no-common-ligatures; 99 | } 100 | ``` 101 | 102 | ## Locally Run Website 103 | 104 | 1) Install dependencies on your machine with [npm](https://www.npmjs.com/) 105 | 106 | ```bash 107 | npm install 108 | ``` 109 | 110 | 2) Then run website locally with this script 111 | 112 | ```bash 113 | npm run dev 114 | ``` 115 | 116 | ## Contributing 117 | 118 | Help us improve Lexica Ultralegible for everyone, any contribution or feedback is welcome. 119 | Please read our [contributing guidelines](https://github.com/jacobxperez/lexica-ultralegible/blob/main/.github/CONTRIBUTING.md) 120 | before embarking on any significant pull request. 121 | 122 | ## LICENSE 123 | 124 | ### Font 125 | 126 | Copyright (C) 2020 [Braille Institute of America, Inc](https://brailleinstitute.org/). 127 | 128 | Licensed under the SIL Open Font License, v1.1. See [LICENSE.txt](LICENSE.txt) for details. 129 | 130 | ### Website Code 131 | 132 | Copyright (C) 2024 [Jacob Perez](https://jacobxperez.github.io/blog/) 133 | 134 | Licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0) (the "License"); 135 | you may not use this file except in compliance with the License. 136 | You may obtain a copy of the License at 137 | 138 | 139 | 140 | Unless required by applicable law or agreed to in writing, software 141 | -------------------------------------------------------------------------------- /sources/website/css/var.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-sans: "Lexica Ultralegible", "Atkinson Hyperlegible", Helvetica, 3 | Arial, sans-serif; 4 | --font-serif: Xcharter, Charter, Georgia, Times, "Times New Roman", serif; 5 | --font-mono: "Fira Code", "Fira Mono", "Lucida Console", "Lucida Sans Typewriter", monaco, 6 | "Bitstream Vera Sans Mono", monospace; 7 | --font-ui: "Lexica Ultralegible", "Atkinson Hyperlegible", system-ui, 8 | "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 9 | 10 | --neutral-100: hsl(0, 0%, 100%); 11 | --neutral-090: hsl(0, 0%, 90%); 12 | --neutral-080: hsl(0, 0%, 80%); 13 | --neutral-070: hsl(0, 0%, 70%); 14 | --neutral-060: hsl(0, 0%, 60%); 15 | --neutral-050: hsl(0, 0%, 50%); 16 | --neutral-040: hsl(0, 0%, 40%); 17 | --neutral-030: hsl(0, 0%, 30%); 18 | --neutral-020: hsl(0, 0%, 20%); 19 | --neutral-010: hsl(0, 0%, 10%); 20 | --neutral-000: hsl(0, 0%, 0%); 21 | 22 | --primary-050: hsl(206, 33%, 22%); 23 | --primary-040: hsl(206, 33%, 20%); 24 | --primary-030: hsl(206, 33%, 18%); 25 | --primary-020: hsl(206, 33%, 16%); 26 | --primary-010: hsl(206, 33%, 14%); 27 | --primary-000: hsl(206, 33%, 12%); 28 | 29 | --success-020: hsl(145, 80%, 30%); 30 | --success-010: hsl(145, 80%, 25%); 31 | --success-000: hsl(145, 80%, 20%); 32 | 33 | --warning-020: hsl(40, 100%, 60%); 34 | --warning-010: hsl(40, 100%, 55%); 35 | --warning-000: hsl(40, 100%, 45%); 36 | 37 | --danger-020: hsl(0, 75%, 55%); 38 | --danger-010: hsl(0, 75%, 50%); 39 | --danger-000: hsl(0, 75%, 45%); 40 | } 41 | 42 | /* @media (prefers-color-scheme: dark) { 43 | :root { 44 | --neutral-000: hsl(0, 0%, 100%); 45 | --neutral-010: hsl(0, 0%, 90%); 46 | --neutral-020: hsl(0, 0%, 80%); 47 | --neutral-030: hsl(0, 0%, 70%); 48 | --neutral-040: hsl(0, 0%, 60%); 49 | --neutral-050: hsl(0, 0%, 50%); 50 | --neutral-060: hsl(0, 0%, 40%); 51 | --neutral-070: hsl(0, 0%, 30%); 52 | --neutral-080: hsl(0, 0%, 20%); 53 | --neutral-090: hsl(0, 0%, 10%); 54 | --neutral-100: hsl(0, 0%, 0%); 55 | } 56 | } */ 57 | 58 | /* Colors */ 59 | $background: var(--neutral-100); 60 | $background-gradient: false; 61 | 62 | $primary: var(--neutral-000); 63 | $primary-active: var(--neutral-020); 64 | $primary-text: var(--neutral-100); 65 | 66 | $secondary: var(--neutral-020); 67 | $secondary-active: var(--neutral-030); 68 | $secondary-text: var(--neutral-100); 69 | 70 | $tertiary: var(--neutral-040); 71 | $tertiary-active: var(--neutral-050); 72 | $tertiary-text: var(--neutral-100); 73 | 74 | /* Box Model */ 75 | $space-y: 0.5rem; 76 | $space-x: 0.75rem; 77 | $border-width: 0.0625em; 78 | $border-color: var(--neutral-050); 79 | $border-radius: 0.25rem; 80 | 81 | /* Typography */ 82 | $root-font-size: clamp(100%, 5vw + 1rem, 110%); 83 | $body-font-size: 1rem; 84 | $body-font-color: var(--primary-000); 85 | $body-font-family: var(--font-sans); 86 | $body-font-weight: 400; 87 | $body-line-height: 1.5; 88 | $body-font-variant-numeric: false; 89 | $leading: 1.5rem; 90 | 91 | /* link */ 92 | $link-color: false; 93 | $link-text-decoration: underline solid 0.125rem; 94 | $link-text-decoration-hover: none; 95 | $link-underline-offset: 0.3125em; 96 | 97 | /* headings */ 98 | $headings-font-family: var(--font-sans); 99 | $headings-font-weight: 400; 100 | $headings-color: false; 101 | $headings-ligatures: no-common-ligatures; 102 | 103 | $h1-font-size: clamp(2.488rem, 5vw + 1rem, 4.209rem); 104 | $h1-line-height: 1.2; 105 | 106 | $h2-font-size: clamp(2.074rem, 5vw + 1rem, 3.157rem); 107 | $h2-line-height: 1.2; 108 | 109 | $h3-font-size: clamp(1.728rem, 4vw + 1rem, 2.369rem); 110 | $h3-line-height: 1.3; 111 | 112 | $h4-font-size: clamp(1.44rem, 3vw + 1rem, 1.777rem); 113 | $h4-line-height: 1.4; 114 | 115 | $h5-font-size: clamp(1.2rem, 3vw + 1rem, 1.333rem); 116 | $h5-line-height: 1.45; 117 | 118 | $h6-font-size: $body-font-size; 119 | $h6-line-height: 1.5; 120 | 121 | /* small */ 122 | $small-font-size: 0.833rem; 123 | 124 | /* blockquote */ 125 | $blockquote-font-family: var(--font-serif); 126 | $blockquote-font-style: italic; 127 | 128 | /* pre/code/kdb/samp */ 129 | $pre-font-family: var(--font-mono); 130 | 131 | /* mark */ 132 | $mark-background: var(--warning-010); 133 | $mark-text: var(--neutral-000); 134 | 135 | /* hr */ 136 | $hr-border-style: solid; 137 | $hr-border-width: 0.125rem; 138 | $hr-border-color: var(--neutral-000); 139 | 140 | /* Lists */ 141 | $ol-list-style-type: decimal; 142 | $ol-list-style-type-child: lower-alpha; 143 | $ul-list-style-type: disc; 144 | $ul-list-style-type-child: circle; 145 | 146 | /* Table */ 147 | $table-cell-padding: $space-y $space-x; 148 | 149 | /* Form */ 150 | $form-font-family: var(--font-ui); 151 | $form-padding: $space-y $space-x; 152 | $form-border-width: $border-width; 153 | $form-border-color: $border-color; 154 | $form-border-active: $body-font-color; 155 | $form-border-radius: $border-radius; 156 | $form-background: transparent; 157 | $form-text: var(--neutral-050); 158 | $form-text-active: $body-font-color; 159 | $form-text-area-min-height: 6.25rem; 160 | $form-transition: 161 | color 0.2s ease, 162 | border-color 0.2s ease, 163 | background-color 0.2s ease; 164 | 165 | /* Button */ 166 | $button-font-family: var(--font-ui); 167 | $button-padding: $space-y $space-x; 168 | $button-border-width: $border-width; 169 | $button-border-color: transparent; 170 | $button-border-radius: $border-radius; 171 | $button-background: var(--neutral-090); 172 | $button-background-active: var(--neutral-080); 173 | $button-text-color: $body-font-color; 174 | $button-transition: 175 | color 0.2s ease, 176 | border-color 0.2s ease, 177 | background-color 0.2s ease; 178 | 179 | /* Feedback */ 180 | $success: var(--success-010); 181 | $success-active: var(--success-000); 182 | $success-text: var(--neutral-100); 183 | 184 | $warning: var(--warning-010); 185 | $warning-active: var(--warning-020); 186 | $warning-text: var(--neutral-000); 187 | 188 | $danger: var(--danger-010); 189 | $danger-active: var(--danger-000); 190 | $danger-text: var(--neutral-100); 191 | 192 | /* Disabled */ 193 | $disabled: var(--neutral-090); 194 | $disabled-text: var(--neutral-050); 195 | 196 | /* Navbar */ 197 | $navbar-background: var(--primary-000); 198 | $navbar-dropbox-background: var(--primary-020); 199 | $navbar-anchor-text: var(--neutral-100); 200 | $navbar-anchor-text-active: var(--neutral-070); 201 | 202 | /* Anchor */ 203 | $anchor-font-family: var(--font-ui); 204 | $anchor-padding: $space-y $space-x; 205 | $anchor-color: $primary; 206 | $anchor-active-color: var(--neutral-050); 207 | $anchor-transition: 208 | color 0.2s ease, 209 | border-color 0.2s ease, 210 | background-color 0.2s ease; 211 | 212 | /* Line Tab */ 213 | $anchor-line-border-width: 0.125em; 214 | $anchor-line-border-color: $border-color; 215 | $anchor-line-text: var(--neutral-050); 216 | $anchor-line-text-active: $body-font-color; 217 | $anchor-line-border-active: $primary; 218 | 219 | /* Breadcrumb */ 220 | $breadcrumb-separator: "/"; 221 | $breadcrumb-gap: 0.375em; 222 | 223 | /* Dropbox */ 224 | $dropbox-min-width: 10rem; 225 | $dropbox-transition: 226 | opacity 0.3s ease, 227 | visibility 0.3s ease; 228 | 229 | /* Dropbox Menu */ 230 | $dropbox-menu-background-color: var(--neutral-100); 231 | $dropbox-menu-border: $border-width solid var(--neutral-000); 232 | $anchor-menu-background-color: var(--neutral-000); 233 | $anchor-menu-color: var(--neutral-100); 234 | 235 | /* Tooltip */ 236 | $tooltip-min-width: 25ch; 237 | $tooltip-background: var(--neutral-000); 238 | $tooltip-text: var(--neutral-100); 239 | $tooltip-text-decoration: underline dotted 0.125rem; 240 | $tooltip-underline-offset: $link-underline-offset; 241 | 242 | /* Grid */ 243 | $grid-name: main; 244 | $grid-gap: 1.25rem; 245 | $grid-small-columns: 4; 246 | $grid-medium-columns: 12; 247 | $grid-large-columns: 12; 248 | 249 | /* Container */ 250 | $container-width: clamp(20rem, 100%, 60rem); 251 | $container-margin-top: calc($leading * 3); 252 | $container-margin-bottom: calc($leading * 2); 253 | $container-gap: 1.25rem; 254 | 255 | /* Breakpoints */ 256 | $screen-small-max-width: 42.5em; /* 680px */ 257 | $screen-medium-min-width: 42.5625em; /* 681px*/ 258 | $screen-medium-max-width: 61.1875em; /* 979px */ 259 | $screen-large-min-width: 61.25em; /* 980px */ 260 | 261 | /* Selection */ 262 | $selection: hsl(40, 80%, 80%); 263 | $selection-text: var(--neutral-000); 264 | -------------------------------------------------------------------------------- /sources/website/js/rams/core/components/carousel.js: -------------------------------------------------------------------------------- 1 | class Carousel extends Array { 2 | constructor({carousel, intervalTime, lazyLoadThreshold} = {}) { 3 | super(); 4 | this.carousel = document.querySelectorAll(carousel); 5 | this.carousel.forEach((item) => { 6 | this.push(item); 7 | item.addEventListener('click', this.handleControls.bind(this)); 8 | if (!item.querySelector('[data-controls]')) { 9 | const controls = document.createElement('nav'); 10 | controls.setDataAttr('controls'); 11 | this.forEach((item) => item.appendChild(controls)); 12 | } 13 | const tabs = Array.from(item.querySelectorAll('[data-tab]')); 14 | if (tabs) { 15 | tabs.forEach((tab, i) => tab.setDataAttr('index', i)); 16 | } 17 | }); 18 | this.createButton = document.createElement('button'); 19 | this.intervalTime = intervalTime; 20 | this.lazyLoadThreshold = lazyLoadThreshold; 21 | this.currentIndex = 0; 22 | this.indicators = false; 23 | this.preloadImages(); 24 | this.cycleSlides(); 25 | this.play(); 26 | } 27 | 28 | async preloadImages() { 29 | this.forEach(async (item) => { 30 | const slides = Array.from(item.querySelectorAll('[data-slide]')); 31 | 32 | if (slides) { 33 | const promises = slides 34 | .slice(0, this.lazyLoadThreshold) 35 | .map((slide) => { 36 | const image = slide.querySelector('img'); 37 | if (!image) return; 38 | return new Promise((resolve, reject) => { 39 | const img = new Image(); 40 | img.src = image.src; 41 | img.onload = resolve; 42 | img.onerror = reject; 43 | }); 44 | }); 45 | await Promise.all(promises); 46 | } 47 | }); 48 | } 49 | 50 | // Slide cycling methods 51 | cycleTabs() { 52 | this.forEach((item) => { 53 | const controls = item.querySelector('[data-controls]'); 54 | 55 | const currentTab = controls.querySelector( 56 | `[data-index="${this.currentIndex}"]` 57 | ); 58 | const prevTab = controls.querySelector(`[data-state="active"]`); 59 | currentTab.setDataAttr('state', 'active'); 60 | if (prevTab) prevTab.removeDataAttr('state'); 61 | const tabs = Array.from(item.querySelectorAll('[data-tab]')); 62 | requestAnimationFrame(() => { 63 | tabs.filter( 64 | (tab) => ![currentTab, prevTab].includes(tab) 65 | ).forEach((tab) => tab.removeDataAttr('state')); 66 | }); 67 | }); 68 | } 69 | 70 | cycleSlides() { 71 | this.forEach((item) => { 72 | const slides = Array.from(item.querySelectorAll('[data-slide]')); 73 | 74 | if (slides) { 75 | const currentSlide = slides[this.currentIndex]; 76 | currentSlide.setDataAttr('state', 'current'); 77 | requestAnimationFrame(() => { 78 | slides 79 | .filter((slide) => slide !== currentSlide) 80 | .forEach((slide) => slide.removeDataAttr('state')); 81 | }); 82 | } 83 | if (this.indicators) { 84 | this.cycleTabs(); 85 | } 86 | }); 87 | } 88 | 89 | changeSlide(direction) { 90 | this.forEach((item) => { 91 | const slides = Array.from(item.querySelectorAll('[data-slide]')); 92 | 93 | if (slides) { 94 | if (direction === 'next') { 95 | this.currentIndex++; 96 | if (this.currentIndex > slides.length - 1) { 97 | this.currentIndex = 0; 98 | } 99 | } else if (direction === 'prev') { 100 | this.currentIndex--; 101 | if (this.currentIndex < 0) { 102 | this.currentIndex = slides.length - 1; 103 | } 104 | } 105 | } 106 | }); 107 | 108 | this.cycleSlides(); 109 | } 110 | 111 | // Control and indicator methods 112 | handleControls(e) { 113 | const target = e.target; 114 | if (target.matchDataAttr('button', 'next-slide')) { 115 | this.changeSlide('next'); 116 | this.resume(); 117 | } else if (target.matchDataAttr('button', 'prev-slide')) { 118 | this.changeSlide('prev'); 119 | this.resume(); 120 | } else if (target.matchDataAttr('index')) { 121 | this.pause(); 122 | this.currentIndex = Number(target.getDataAttr('index')); 123 | this.cycleSlides(); 124 | } 125 | } 126 | 127 | addControls() { 128 | this.forEach((item) => { 129 | const controls = item.querySelector('[data-controls]'); 130 | const prev = this.createButton.cloneNode(true); 131 | const next = this.createButton.cloneNode(true); 132 | prev.setDataAttr('button', 'prev-slide'); 133 | next.setDataAttr('button', 'next-slide'); 134 | controls.appendChild(prev); 135 | controls.appendChild(next); 136 | }); 137 | 138 | return this; 139 | } 140 | 141 | addIndicators() { 142 | this.forEach((item) => { 143 | const slides = Array.from(item.querySelectorAll('[data-slide]')); 144 | 145 | if (slides) { 146 | const indicator = document.createElement('div'); 147 | indicator.setDataAttr('indicator', 'tabs'); 148 | 149 | for (let i = 0; i < slides.length; i++) { 150 | const indicatorButton = this.createButton.cloneNode(true); 151 | indicatorButton.setDataAttr('index', i); 152 | indicatorButton.setDataAttr('tab', 'indicator'); 153 | indicator.appendChild(indicatorButton); 154 | } 155 | 156 | const controls = item.querySelector('[data-controls]'); 157 | controls.appendChild(indicator); 158 | this.indicators = true; 159 | } 160 | }); 161 | 162 | return this; 163 | } 164 | 165 | // Touch control methods 166 | addTouchControls() { 167 | this.forEach((item) => { 168 | item.addEventListener( 169 | 'touchstart', 170 | this.handleTouchStart.bind(this) 171 | ); 172 | item.addEventListener('touchmove', this.handleTouchMove.bind(this)); 173 | item.addEventListener('touchend', this.handleTouchEnd.bind(this)); 174 | }); 175 | 176 | return this; 177 | } 178 | 179 | handleTouchStart(e) { 180 | this.touchStartX = e.touches[0].clientX; 181 | this.touchEndX = this.touchStartX; 182 | } 183 | 184 | handleTouchMove(e) { 185 | this.touchEndX = e.touches[0].clientX; 186 | } 187 | 188 | handleTouchEnd() { 189 | if ( 190 | typeof this.touchStartX !== 'undefined' && 191 | typeof this.touchEndX !== 'undefined' 192 | ) { 193 | const touchDistance = this.touchEndX - this.touchStartX; 194 | 195 | if (touchDistance > 0) { 196 | this.changeSlide('prev'); 197 | this.resume(); 198 | } else if (touchDistance < 0) { 199 | this.changeSlide('next'); 200 | this.resume(); 201 | } 202 | } 203 | } 204 | 205 | // Keyboard control methods 206 | addKeyboardControls() { 207 | document.addEventListener('keydown', this.handleKeyDown.bind(this)); 208 | return this; 209 | } 210 | 211 | handleKeyDown(e) { 212 | switch (e.key) { 213 | case 'ArrowLeft': 214 | this.changeSlide('prev'); 215 | this.resume(); 216 | break; 217 | case 'ArrowRight': 218 | this.changeSlide('next'); 219 | this.resume(); 220 | break; 221 | default: 222 | break; 223 | } 224 | } 225 | 226 | // Play/pause/stop methods 227 | play(intervalTime = this.intervalTime) { 228 | this.interval = setInterval(() => { 229 | this.changeSlide('next'); 230 | }, intervalTime); 231 | 232 | return this; 233 | } 234 | 235 | pause() { 236 | clearInterval(this.interval); 237 | 238 | return this; 239 | } 240 | 241 | resume() { 242 | this.pause().play(); 243 | 244 | return this; 245 | } 246 | 247 | stop() { 248 | this.pause(); 249 | this.currentIndex = 0; 250 | this.cycleSlides(); 251 | 252 | return this; 253 | } 254 | } 255 | 256 | function carousel( 257 | carousel = '[data-carousel]', 258 | intervalTime = 5000, 259 | lazyLoadThreshold = 2 260 | ) { 261 | return new Carousel({ 262 | carousel, 263 | intervalTime, 264 | lazyLoadThreshold, 265 | }); 266 | } 267 | 268 | export {carousel}; 269 | -------------------------------------------------------------------------------- /sources/website/css/settings.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --neutral-10: hsl(0, 0%, 100%); 3 | --neutral-09: hsl(0, 0%, 90%); 4 | --neutral-08: hsl(0, 0%, 80%); 5 | --neutral-07: hsl(0, 0%, 70%); 6 | --neutral-06: hsl(0, 0%, 60%); 7 | --neutral-05: hsl(0, 0%, 50%); 8 | --neutral-04: hsl(0, 0%, 40%); 9 | --neutral-03: hsl(0, 0%, 30%); 10 | --neutral-02: hsl(0, 0%, 20%); 11 | --neutral-01: hsl(0, 0%, 10%); 12 | --neutral-00: hsl(0, 0%, 0%); 13 | 14 | --primary-04: hsl(19, 100%, 70%); 15 | --primary-03: hsl(19, 100%, 65%); 16 | --primary-02: hsl(19, 100%, 60%); 17 | --primary-01: hsl(19, 100%, 55%); 18 | --primary-00: hsl(19, 100%, 50%); 19 | 20 | --secondary-04: hsl(19, 100%, 45%); 21 | --secondary-03: hsl(19, 100%, 40%); 22 | --secondary-02: hsl(201, 100%, 24%); 23 | --secondary-01: hsl(201, 100%, 20%); 24 | --secondary-00: hsl(201, 100%, 14%); 25 | 26 | --tertiary-04: var(--neutral-04); 27 | --tertiary-03: var(--neutral-03); 28 | --tertiary-02: var(--neutral-02); 29 | --tertiary-01: hsl(205, 41%, 12%); 30 | --tertiary-00: hsl(205, 41%, 8%); 31 | 32 | --success-04: hsl(145, 80%, 45%); 33 | --success-03: hsl(145, 80%, 40%); 34 | --success-02: hsl(145, 80%, 35%); 35 | --success-01: hsl(145, 80%, 30%); 36 | --success-00: hsl(145, 80%, 25%); 37 | 38 | --warning-04: hsl(40, 100%, 70%); 39 | --warning-03: hsl(40, 100%, 65%); 40 | --warning-02: hsl(40, 100%, 60%); 41 | --warning-01: hsl(40, 100%, 55%); 42 | --warning-00: hsl(40, 100%, 50%); 43 | 44 | --danger-04: hsl(0, 75%, 65%); 45 | --danger-03: hsl(0, 75%, 60%); 46 | --danger-02: hsl(0, 75%, 55%); 47 | --danger-01: hsl(0, 75%, 50%); 48 | --danger-00: hsl(0, 75%, 45%); 49 | 50 | --font-sans: "Lexica Ultralegible", "Atkinson Hyperlegible", Helvetica, 51 | Arial, sans-serif; 52 | --font-serif: Xcharter, Charter, Georgia, Times, "Times New Roman", serif; 53 | --font-mono: "Fira Mono", "Lucida Console", "Lucida Sans Typewriter", monaco, 54 | "Bitstream Vera Sans Mono", monospace; 55 | --font-ui: "Lexica Ultralegible", "Atkinson Hyperlegible", system-ui, 56 | "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 57 | } 58 | 59 | /* @media (prefers-color-scheme: dark) { 60 | :root { 61 | --neutral-10: hsl(0, 0%, 0%); 62 | --neutral-09: hsl(0, 0%, 10%); 63 | --neutral-08: hsl(0, 0%, 20%); 64 | --neutral-07: hsl(0, 0%, 30%); 65 | --neutral-06: hsl(0, 0%, 40%); 66 | --neutral-05: hsl(0, 0%, 50%); 67 | --neutral-04: hsl(0, 0%, 60%); 68 | --neutral-03: hsl(0, 0%, 70%); 69 | --neutral-02: hsl(0, 0%, 80%); 70 | --neutral-01: hsl(0, 0%, 90%); 71 | --neutral-00: hsl(0, 0%, 100%); 72 | } 73 | } */ 74 | 75 | /* Colors */ 76 | $body-font-color: var(--neutral-00); 77 | $background: var(--neutral-10); 78 | $background-gradient: false; 79 | 80 | $primary: var(--primary-00); 81 | $primary-active: var(--primary-02); 82 | $primary-text: var(--neutral-10); 83 | $primary-text-active: var(--neutral-10); 84 | 85 | $secondary: var(--secondary-00); 86 | $secondary-active: var(--secondary-02); 87 | $secondary-text: var(--neutral-10); 88 | $secondary-text-active: var(--neutral-10); 89 | 90 | $tertiary: var(--tertiary-00); 91 | $tertiary-active: var(--tertiary-02); 92 | $tertiary-text: var(--neutral-10); 93 | $tertiary-text-active: var(--neutral-10); 94 | 95 | /* Box Model */ 96 | $space-y: 0.5rem; 97 | $space-x: 0.75rem; 98 | $border-width: 0.0625em; 99 | $border-color: var(--neutral-05); 100 | $border-radius: 0.25rem; 101 | 102 | /* Typography */ 103 | $root-font-size: clamp(100%, 5vw + 1rem, 110%); 104 | $body-font-size: 1rem; 105 | $body-font-family: var(--font-sans); 106 | $body-font-weight: 400; 107 | $body-line-height: 1.5; 108 | $body-font-variant-numeric: false; 109 | $leading: 1.5rem; 110 | 111 | /* link */ 112 | $link-color: $body-font-color; 113 | $link-color-active: $primary; 114 | $link-text-decoration: underline solid $primary; 115 | $link-text-decoration-thickness: 0.125rem; 116 | $link-text-decoration-active: none; 117 | $link-underline-offset: 0.3125em; 118 | 119 | /* headings */ 120 | $headings-font-family: var(--font-sans); 121 | $headings-font-weight: 400; 122 | $headings-color: false; 123 | $headings-ligatures: no-common-ligatures; 124 | 125 | $h1-font-size: clamp(2.488rem, 3vw + 1rem, 4.209rem); 126 | $h1-line-height: 1.2; 127 | 128 | $h2-font-size: clamp(2.074rem, 3vw + 1rem, 3.157rem); 129 | $h2-line-height: 1.2; 130 | 131 | $h3-font-size: clamp(1.728rem, 3vw + 1rem, 2.369rem); 132 | $h3-line-height: 1.3; 133 | 134 | $h4-font-size: clamp(1.44rem, 3vw + 1rem, 1.777rem); 135 | $h4-line-height: 1.4; 136 | 137 | $h5-font-size: clamp(1.2rem, 3vw + 1rem, 1.333rem); 138 | $h5-line-height: 1.4; 139 | 140 | $h6-font-size: $body-font-size; 141 | $h6-line-height: 1.5; 142 | 143 | /* small */ 144 | $small-font-size: 0.833rem; 145 | 146 | /* blockquote */ 147 | $blockquote-font-family: var(--font-serif); 148 | $blockquote-font-style: italic; 149 | 150 | /* pre/code/kdb/samp */ 151 | $pre-font-family: var(--font-mono); 152 | 153 | /* mark */ 154 | $mark-background: var(--warning-01); 155 | $mark-text: var(--neutral-00); 156 | 157 | /* hr */ 158 | $hr-border-style: solid; 159 | $hr-border-width: 0.125rem; 160 | $hr-border-color: var(--neutral-00); 161 | 162 | /* Lists */ 163 | $ol-list-style-type: decimal; 164 | $ol-list-style-type-child: lower-alpha; 165 | $ul-list-style-type: disc; 166 | $ul-list-style-type-child: circle; 167 | 168 | /* Table */ 169 | $table-cell-padding: $space-y $space-x; 170 | 171 | /* Form */ 172 | $form-font-family: var(--font-ui); 173 | $form-padding: $space-y $space-x; 174 | $form-border-width: $border-width; 175 | $form-border-color: $border-color; 176 | $form-border-active: $primary; 177 | $form-border-radius: $border-radius; 178 | $form-background: transparent; 179 | $form-text: var(--neutral-05); 180 | $form-text-active: $body-font-color; 181 | $form-text-area-min-height: 6.25rem; 182 | $form-transition: 183 | color 0.2s ease, 184 | border-color 0.2s ease, 185 | background-color 0.2s ease; 186 | 187 | /* Button */ 188 | $button-font-family: var(--font-ui); 189 | $button-padding: $space-y $space-x; 190 | $button-border-width: $border-width; 191 | $button-border-color: transparent; 192 | $button-border-radius: $border-radius; 193 | $button-background: var(--neutral-00); 194 | $button-background-active: var(--neutral-02); 195 | $button-text-color: var(--neutral-10); 196 | $button-transition: 197 | color 0.2s ease, 198 | border-color 0.2s ease, 199 | background-color 0.2s ease; 200 | 201 | /* outline */ 202 | $button-outline-text-color: var(--neutral-00); 203 | $button-outline-text-color-active: var(--neutral-10); 204 | $button-outline-background-active: var(--neutral-00); 205 | $button-outline-border-color: var(--neutral-00); 206 | 207 | /* Feedback */ 208 | $success: var(--success-00); 209 | $success-active: var(--success-01); 210 | $success-text: var(--neutral-10); 211 | $success-text-active: var(--neutral-10); 212 | 213 | $warning: var(--warning-00); 214 | $warning-active: var(--warning-01); 215 | $warning-text: var(--neutral-00); 216 | $warning-text-active: var(--neutral-00); 217 | 218 | $danger: var(--danger-00); 219 | $danger-active: var(--danger-01); 220 | $danger-text: var(--neutral-10); 221 | $danger-text-active: var(--neutral-10); 222 | 223 | /* Disabled */ 224 | $disabled: var(--neutral-09); 225 | $disabled-text: var(--neutral-05); 226 | 227 | /* Navbar */ 228 | $navbar-background: var(--tertiary-00); 229 | $navbar-dropbox-background: var(--tertiary-01); 230 | $navbar-anchor-text: var(--neutral-10); 231 | $navbar-anchor-text-active: $primary; 232 | 233 | /* Anchor */ 234 | $anchor-font-family: var(--font-ui); 235 | $anchor-padding: $space-y $space-x; 236 | $anchor-color: $primary; 237 | $anchor-color-active: $body-font-color; 238 | $anchor-transition: 239 | color 0.2s ease, 240 | border-color 0.2s ease, 241 | background-color 0.2s ease; 242 | 243 | /* Line Tab */ 244 | $anchor-line-border-width: 0.125em; 245 | $anchor-line-border-color: var(--neutral-00); 246 | $anchor-line-text: $primary; 247 | $anchor-line-text-active: $body-font-color; 248 | $anchor-line-border-active: $primary; 249 | 250 | /* Breadcrumb */ 251 | $breadcrumb-separator: "/"; 252 | $breadcrumb-gap: 0.375em; 253 | 254 | /* Dropbox */ 255 | $dropbox-min-width: 10rem; 256 | $dropbox-transition: 257 | opacity 0.3s ease, 258 | visibility 0.3s ease; 259 | 260 | /* Dropbox Menu */ 261 | $dropbox-menu-background: var(--neutral-10); 262 | $dropbox-menu-border: $border-width solid var(--neutral-00); 263 | /* anchor menu */ 264 | $anchor-menu-background: $dropbox-menu-background; 265 | $anchor-menu-text: var(--neutral-00); 266 | $anchor-menu-background-active: var(--neutral-00); 267 | $anchor-menu-text-active: var(--neutral-10); 268 | 269 | /* Tooltip */ 270 | $tooltip-min-width: 24ch; 271 | $tooltip-background: var(--neutral-00); 272 | $tooltip-text: var(--neutral-10); 273 | $tooltip-text-decoration: underline dotted 0.125rem; 274 | $tooltip-underline-offset: $link-underline-offset; 275 | 276 | /* Grid */ 277 | $grid-name: main; 278 | $grid-gap: 1.25rem; 279 | $grid-columns-small: 4; 280 | $grid-columns-medium: 12; 281 | $grid-columns-large: 12; 282 | 283 | /* Container */ 284 | $container-width: clamp(20rem, 100%, 60rem); 285 | $container-margin-top: calc($leading * 3); 286 | $container-margin-bottom: calc($leading * 2); 287 | $container-gap: 1.25rem; 288 | 289 | /* Breakpoints */ 290 | $screen-small-max-width: 42.5em; /* 680px */ 291 | $screen-medium-min-width: 42.5625em; /* 681px*/ 292 | $screen-medium-max-width: 61.1875em; /* 979px */ 293 | $screen-large-min-width: 61.25em; /* 980px */ 294 | 295 | /* Selection */ 296 | $selection: #ffd23f; 297 | $selection-text: hsl(0, 0%, 0%); 298 | -------------------------------------------------------------------------------- /sources/website/kerning/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | Lexica Ultralegible - Improvised Text for Checking Kerning 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 40 | 41 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Lexica Ultralegible – A Typeface Built for Accessibility in Typography -------------------------------------------------------------------------------- /docs/index.599d554f.css: -------------------------------------------------------------------------------- 1 | :root{--font-sans:"Lexica Ultralegible","Atkinson Hyperlegible",Helvetica,Arial,sans-serif;--font-serif:Xcharter,Charter,Georgia,Times,"Times New Roman",serif;--font-mono:"Fira Code","Fira Mono","Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;--font-ui:"Lexica Ultralegible","Atkinson Hyperlegible",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--neutral-100:#fff;--neutral-090:#e6e6e6;--neutral-080:#ccc;--neutral-070:#b3b3b3;--neutral-060:#999;--neutral-050:gray;--neutral-040:#666;--neutral-030:#4d4d4d;--neutral-020:#333;--neutral-010:#1a1a1a;--neutral-000:#000;--primary-050:#263b4b;--primary-040:#223544;--primary-030:#1f303d;--primary-020:#1b2b36;--primary-010:#18252f;--primary-000:#152029;--success-020:#0f8a42;--success-010:#0d7337;--success-000:#0a5c2c;--warning-020:#fb3;--warning-010:#ffb31a;--warning-000:#e69900;--danger-020:#e23636;--danger-010:#df2020;--danger-000:#c91d1d}*,:before,:after{box-sizing:border-box;color:inherit;font:inherit;text-align:inherit;vertical-align:baseline;background:0 0;border:0;outline:0;margin:0;padding:0}html{background:var(--neutral-100);text-align:left;overflow-wrap:break-word;scroll-behavior:smooth;font-size:clamp(100%,5vw + 1rem,110%)}body{color:var(--primary-000);font-size:1rem;font-family:var(--font-sans);font-weight:400;line-height:1.5}img,svg,picture,video,canvas,audio,iframe,embed,object{max-width:100%;display:block}p,pre,table,blockquote,:is(h1,h2,h3,h4,h5,h6),:is([data-list~=ol],[data-list~=ul],[data-list~=dl]){margin:.75rem 0}:is(h1,h2,h3,h4,h5,h6){font-family:var(--font-sans);font-variant-ligatures:no-common-ligatures;font-weight:400}h1,[data-text~=h1]{font-size:clamp(2.488rem,5vw + 1rem,4.209rem);line-height:1.2}h2,[data-text~=h2]{font-size:clamp(2.074rem,5vw + 1rem,3.157rem);line-height:1.2}h3,[data-text~=h3]{font-size:clamp(1.728rem,4vw + 1rem,2.369rem);line-height:1.3}h4,[data-text~=h4]{font-size:clamp(1.44rem,3vw + 1rem,1.777rem);line-height:1.4}h5,[data-text~=h5]{font-size:clamp(1.2rem,3vw + 1rem,1.333rem);line-height:1.45}h6,[data-text~=h6]{font-size:1rem;line-height:1.5}b,strong{font-weight:bolder}i,em,dfn{font-style:italic}[title]:where(abbr,dfn){text-underline-offset:.3125em;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.125rem}mark{background-color:var(--warning-010);color:var(--neutral-000)}small,sub,sup,[data-text~=small]{font-size:.833rem}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}hr{border-top:.125rem solid var(--neutral-000);min-height:.0625rem;margin:.75rem 0;display:block}:where(a){text-underline-offset:.3125em;cursor:pointer;background-color:#0000;text-decoration:underline;text-decoration-thickness:.125rem}:where(a:hover,a:active){text-decoration:none}:where(a:focus){outline-offset:-.125rem;outline:thin dotted}blockquote,q{quotes:none}blockquote{font-family:var(--font-serif);font-style:italic}blockquote:before,blockquote:after{content:"";content:none}:where(blockquote) small{display:block}:where(blockquote) small:before{content:"— "}code,kbd,pre,samp{font-family:var(--font-mono)}pre{white-space:pre-wrap;overflow:auto}ol,ul{list-style-type:none}:is([data-list~=ol],[data-list~=ul],[data-list~=dl]){padding-left:1.5rem;list-style-position:outside}[data-list~=ol]{list-style-type:decimal}[data-list~=ol]>li:first-child>[data-list~=ol]{list-style-type:lower-alpha}[data-list~=ul]{list-style-type:disc}[data-list~=ul]>li:first-child>[data-list~=ul]{list-style-type:circle}:is([data-list~=ol],[data-list~=ul],[data-list~=dl]) [data-list]{margin:0}table{border-collapse:collapse;border-spacing:0;width:100%;display:table}td,th{padding:.5rem .75rem;display:table-cell}:where(form) select,textarea,input{margin:.5rem 0}select,textarea,input[type=text],input[type=email],input[type=password],input[type=time],input[type=date],input[type=datetime-local],input[type=month],input[type=week],input[type=number],input[type=range],input[type=search],input[type=tel],input[type=url]{border:.0625em solid var(--neutral-050);color:var(--neutral-050);font-family:var(--font-ui);background-color:#0000;border-radius:.25rem;width:100%;padding:.5rem .75rem;transition:color .2s,border-color .2s,background-color .2s;display:block}select:focus,textarea:focus,input:focus:not([type=button],[type=reset],[type=submit]){color:var(--primary-000);border-color:var(--primary-000)}textarea{resize:vertical;min-height:6.25rem;overflow:auto}button,select,[type=button],[type=reset],[type=submit]{font-family:var(--font-ui);text-transform:none;overflow:visible}[type=file]{opacity:0;width:0;height:0;position:absolute}:not([type=button],[type=reset],[type=submit]):invalid{border-color:var(--danger-010)}::selection{color:var(--neutral-000);text-shadow:none;background-color:#f5daa3}[data-container]{width:clamp(20rem,100%,60rem);margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}:where(body)>[data-container]:first-child{margin-top:4.5rem}:where(body)>[data-container]:last-child{margin-bottom:3rem}[data-container~=full]{width:100%}[data-grid]{column-gap:1.25rem;display:grid}[data-dropbox]{z-index:-10;visibility:hidden;color:var(--primary-000);opacity:0;min-width:10rem;transition:opacity .3s,visibility .3s;display:none}[data-dropbox~=menu]{background-color:var(--neutral-100);border:.0625em solid var(--neutral-000)}[data-toggle~=tooltip]{text-underline-offset:.3125em;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.125rem}[data-dropbox=tooltip]{background-color:var(--neutral-000);color:var(--neutral-100);min-width:25ch;padding:.5rem .75rem;bottom:100%}[data-toggle]{position:relative}[data-toggle~=tooltip]>[data-dropbox],[data-toggle~=pop]>[data-dropbox],[data-toggle~=pop]+[data-dropbox]{display:block;position:absolute}[data-state=active]>[data-dropbox],[data-state=active]+[data-dropbox],[data-toggle~=tooltip]:hover>[data-dropbox]{z-index:100;visibility:visible;opacity:1;display:block}[data-anchor]{color:var(--neutral-000);font-family:var(--font-ui);cursor:pointer;padding:.5rem .75rem;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;display:block}[data-anchor]:where([data-state=active],:hover,:active){color:var(--neutral-050);text-decoration:none}[data-anchor]:focus{outline-offset:-.125rem;outline:thin dotted}[data-anchor~=menu]:where([data-state=active],:hover,:active){background-color:var(--neutral-000);color:var(--neutral-100)}[data-flex~=breadcrumb]{column-gap:.375em}:where([data-flex~=breadcrumb]) li:after{content:"/";margin-left:.375em}:where([data-flex~=breadcrumb]) li:last-child:after{content:"";margin-right:0}[data-flex~=line-top]{border-top:.125em solid var(--neutral-050)}:where([data-flex~=line-top]) [data-anchor~=line]{border-top:.125em solid #0000;bottom:.125em}[data-flex~=line-bottom]{border-bottom:.125em solid var(--neutral-050)}:where([data-flex~=line-bottom]) [data-anchor~=line]{border-bottom:.125em solid #0000;top:.125em}[data-anchor~=line]{z-index:1;color:var(--neutral-050);position:relative}[data-anchor~=line]:where([data-state=active],:hover,:active){z-index:5;border-color:var(--neutral-000);color:var(--primary-000)}[data-navbar]{background-color:var(--primary-000);color:var(--neutral-070);width:100%}[data-navbar=top],[data-navbar=bottom]{z-index:1000;position:fixed}[data-navbar=top]{top:0}:where([data-navbar=top]) [data-dropbox]{top:100%}[data-navbar=bottom]{bottom:0}:where([data-navbar=bottom]) [data-dropbox]{bottom:100%}[data-anchor~=navbar]{color:var(--neutral-100)}[data-anchor~=navbar]:where([data-state=active],:hover,:active){color:var(--neutral-070)}[data-dropbox~=navbar]{background-color:var(--primary-020)}[data-button]{background-color:var(--neutral-090);color:var(--primary-000);font-family:var(--font-ui);cursor:pointer;border:.0625em solid #0000;border-radius:.25rem;padding:.5rem .75rem;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;display:inline-block}[data-button]:is([data-state=active],:hover,:active){background-color:var(--neutral-080);text-decoration:none}[data-button]:focus{outline-offset:-.125rem;outline:thin dotted}[data-button~=outline]{border-color:var(--neutral-050)}[data-button~=tertiary]{background-color:var(--neutral-040);color:var(--neutral-100)}[data-button~=tertiary]:is([data-state=active],:hover,:active){background-color:var(--neutral-050);color:var(--neutral-100)}[data-button=tertiary\ outline]{border-color:var(--neutral-040);color:var(--neutral-040)}[data-button~=secondary]{background-color:var(--neutral-020);color:var(--neutral-100)}[data-button~=secondary]:is([data-state=active],:hover,:active){background-color:var(--neutral-030);color:var(--neutral-100)}[data-button=secondary\ outline]{border-color:var(--neutral-020);color:var(--neutral-020)}[data-button~=primary]{background-color:var(--neutral-000);color:var(--neutral-100)}[data-button~=primary]:is([data-state=active],:hover,:active){background-color:var(--neutral-020);color:var(--neutral-100)}[data-button=primary\ outline]{border-color:var(--neutral-000);color:var(--neutral-000)}[data-button~=success]{background-color:var(--success-010);color:var(--neutral-100)}[data-button~=success]:is([data-state=active],:hover,:active){background-color:var(--success-000);color:var(--neutral-100)}[data-button=success\ outline]{border-color:var(--success-010);color:var(--success-010)}[data-button~=warning]{background-color:var(--warning-010);color:var(--neutral-000)}[data-button~=warning]:is([data-state=active],:hover,:active){background-color:var(--warning-020);color:var(--neutral-000)}[data-button=warning\ outline]{border-color:var(--warning-010);color:var(--warning-010)}[data-button~=danger]{background-color:var(--danger-010);color:var(--neutral-100)}[data-button~=danger]:is([data-state=active],:hover,:active){background-color:var(--danger-000);color:var(--neutral-100)}[data-button=danger\ outline]{border-color:var(--danger-010);color:var(--danger-010)}[data-button~=outline]{background-color:#0000}[data-button=link]{color:false;font-family:var(--font-sans);text-underline-offset:.3125em;background-color:#0000;text-decoration:underline;text-decoration-thickness:.125rem}[data-button=link]:is([data-state=active],:hover,:active){background-color:#0000;border-color:#0000;text-decoration:none}[data-state=disabled],[data-state=disabled]:is(:hover,:active,:focus){background-color:var(--neutral-090);color:var(--neutral-050);cursor:not-allowed;border-color:#0000;outline:0;text-decoration:none}[data-section~=header]{background-color:var(--primary-040);color:var(--neutral-100);margin-bottom:1.5rem;padding-top:6rem;padding-bottom:3rem}[data-section~=header] :is(h1,h2,h3,h4,h5,h6),[data-section~=header] a{color:var(--neutral-100)}[data-section~=header] h1{margin-bottom:1.5rem}[data-section=footer]{margin-bottom:3rem}[data-filter=blur]{filter:blur(.3rem)}[data-text=flip-zero]{font-variant-numeric:slashed-zero}[data-text~=h0]{font-size:clamp(3.15rem,8vw + 1rem,7.8rem);line-height:1}[data-text~=uppercase]{text-transform:uppercase}[data-text~=lowercase]{text-transform:lowercase}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Regular.63e079cf.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Italic.74253f85.woff2)format("woff2");font-weight:400;font-style:italic}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Bold.52d69420.woff2)format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-BoldItalic.8c34efd2.woff2)format("woff2");font-weight:700;font-style:italic}[data-position~=relative]{position:relative}[data-position~=absolute]{position:absolute}[data-position~=fixed]{position:fixed}[data-position~=top]{top:0}[data-position~=bottom]{bottom:0}[data-position~=left]{left:0}[data-position~=right]{right:0}[data-box~=leading]{margin:.75rem 0}[data-box~=padding]{padding:.5rem .75rem}[data-box~=padding-top]{padding-top:.5rem}[data-box~=padding-x],[data-box~=padding-right]{padding-right:.75rem}[data-box~=padding-bottom]{padding-bottom:.5rem}[data-box~=padding-x],[data-box~=padding-left]{padding-left:.75rem}[data-box~=border]{border:.0625em solid var(--neutral-050)}[data-box~=border-top]{border-top:.0625em solid var(--neutral-050)}[data-box~=border-left],[data-box~=border-x]{border-left:.0625em solid var(--neutral-050)}[data-box~=border-right],[data-box~=border-x]{border-right:.0625em solid var(--neutral-050)}[data-box~=border-bottom]{border-bottom:.0625em solid var(--neutral-050)}[data-box~=full-width]{width:100%}[data-text~=left]{text-align:left}[data-text~=right]{text-align:right}[data-text~=center]{text-align:center}[data-text~=justify]{text-align:justify;hyphens:auto}[data-flex]{display:flex}[data-flex~=reverse]{flex-direction:row-reverse}[data-flex~=column]{flex-direction:column}[data-flex*=column\ reverse]{flex-direction:column-reverse}[data-flex~=wrap]{flex-wrap:wrap}[data-flex~=grow]>*,[data-item~=grow]{flex-grow:1}[data-flex~=gap]{gap:1.25rem}[data-flex~=end]{justify-content:flex-end}[data-flex~=center]{justify-content:center}[data-flex~=between]{justify-content:space-between}[data-flex~=around]{justify-content:space-around}[data-flex~=even]{justify-content:space-evenly}@media screen and (width<=42.5em){[data-grid=main]{grid-template-columns:repeat(4,1fr)}[data-grid~=small-1]{grid-template-columns:repeat(1,1fr)}[data-grid~=small-2]{grid-template-columns:repeat(2,1fr)}[data-grid~=small-3]{grid-template-columns:repeat(3,1fr)}[data-grid~=small-4]{grid-template-columns:repeat(4,1fr)}[data-column~=small-1]{grid-column:span 1}[data-column~=small-2]{grid-column:span 2}[data-column~=small-3]{grid-column:span 3}[data-column~=small-4]{grid-column:span 4}[data-display~=small-none],[data-display~=medium],[data-display~=large]{display:none}}@media screen and (width>=42.5625em) and (width<=61.1875em){[data-grid=main]{grid-template-columns:repeat(12,1fr)}[data-grid~=medium-1]{grid-template-columns:repeat(1,1fr)}[data-grid~=medium-2]{grid-template-columns:repeat(2,1fr)}[data-grid~=medium-3]{grid-template-columns:repeat(3,1fr)}[data-grid~=medium-4]{grid-template-columns:repeat(4,1fr)}[data-grid~=medium-5]{grid-template-columns:repeat(5,1fr)}[data-grid~=medium-6]{grid-template-columns:repeat(6,1fr)}[data-grid~=medium-7]{grid-template-columns:repeat(7,1fr)}[data-grid~=medium-8]{grid-template-columns:repeat(8,1fr)}[data-grid~=medium-9]{grid-template-columns:repeat(9,1fr)}[data-grid~=medium-10]{grid-template-columns:repeat(10,1fr)}[data-grid~=medium-11]{grid-template-columns:repeat(11,1fr)}[data-grid~=medium-12]{grid-template-columns:repeat(12,1fr)}[data-column~=medium-1]{grid-column:span 1}[data-column~=medium-2]{grid-column:span 2}[data-column~=medium-3]{grid-column:span 3}[data-column~=medium-4]{grid-column:span 4}[data-column~=medium-5]{grid-column:span 5}[data-column~=medium-6]{grid-column:span 6}[data-column~=medium-7]{grid-column:span 7}[data-column~=medium-8]{grid-column:span 8}[data-column~=medium-9]{grid-column:span 9}[data-column~=medium-10]{grid-column:span 10}[data-column~=medium-11]{grid-column:span 11}[data-column~=medium-12]{grid-column:span 12}[data-display~=medium-none],[data-display~=small],[data-display~=large]{display:none}}@media screen and (width>=61.25em){[data-grid=main]{grid-template-columns:repeat(12,1fr)}[data-grid~=large-1]{grid-template-columns:repeat(1,1fr)}[data-grid~=large-2]{grid-template-columns:repeat(2,1fr)}[data-grid~=large-3]{grid-template-columns:repeat(3,1fr)}[data-grid~=large-4]{grid-template-columns:repeat(4,1fr)}[data-grid~=large-5]{grid-template-columns:repeat(5,1fr)}[data-grid~=large-6]{grid-template-columns:repeat(6,1fr)}[data-grid~=large-7]{grid-template-columns:repeat(7,1fr)}[data-grid~=large-8]{grid-template-columns:repeat(8,1fr)}[data-grid~=large-9]{grid-template-columns:repeat(9,1fr)}[data-grid~=large-10]{grid-template-columns:repeat(10,1fr)}[data-grid~=large-11]{grid-template-columns:repeat(11,1fr)}[data-grid~=large-12]{grid-template-columns:repeat(12,1fr)}[data-column~=large-1]{grid-column:span 1}[data-column~=large-2]{grid-column:span 2}[data-column~=large-3]{grid-column:span 3}[data-column~=large-4]{grid-column:span 4}[data-column~=large-5]{grid-column:span 5}[data-column~=large-6]{grid-column:span 6}[data-column~=large-7]{grid-column:span 7}[data-column~=large-8]{grid-column:span 8}[data-column~=large-9]{grid-column:span 9}[data-column~=large-10]{grid-column:span 10}[data-column~=large-11]{grid-column:span 11}[data-column~=large-12]{grid-column:span 12}[data-display~=large-none],[data-display~=small],[data-display~=medium]{display:none}}@media print{html,body{height:auto}nav{display:none}[data-container]{max-width:100%;margin:0;padding:0}[data-grid]{display:block}} -------------------------------------------------------------------------------- /docs/index.f64604d8.css: -------------------------------------------------------------------------------- 1 | :root{--neutral-10:#fff;--neutral-09:#e6e6e6;--neutral-08:#ccc;--neutral-07:#b3b3b3;--neutral-06:#999;--neutral-05:gray;--neutral-04:#666;--neutral-03:#4d4d4d;--neutral-02:#333;--neutral-01:#1a1a1a;--neutral-00:#000;--primary-04:#ff9666;--primary-03:#ff854c;--primary-02:#ff7433;--primary-01:#ff621a;--primary-00:#ff5100;--secondary-04:#e64900;--secondary-03:#cc4100;--secondary-02:#00507a;--secondary-01:#004266;--secondary-00:#002e47;--tertiary-04:var(--neutral-04);--tertiary-03:var(--neutral-03);--tertiary-02:var(--neutral-02);--tertiary-01:#12212b;--tertiary-00:#0c161d;--success-04:#17cf63;--success-03:#14b858;--success-02:#12a14d;--success-01:#0f8a42;--success-00:#0d7337;--warning-04:#fc6;--warning-03:#ffc44c;--warning-02:#fb3;--warning-01:#ffb31a;--warning-00:#fa0;--danger-04:#e96363;--danger-03:#e64d4d;--danger-02:#e23636;--danger-01:#df2020;--danger-00:#c91d1d;--font-sans:"Lexica Ultralegible","Atkinson Hyperlegible",Helvetica,Arial,sans-serif;--font-serif:Xcharter,Charter,Georgia,Times,"Times New Roman",serif;--font-mono:"Fira Mono","Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;--font-ui:"Lexica Ultralegible","Atkinson Hyperlegible",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}*,:before,:after{box-sizing:border-box;color:inherit;font:inherit;text-align:inherit;vertical-align:baseline;background:0 0;border:0;outline:0;margin:0;padding:0}html{background:var(--neutral-10);text-align:left;overflow-wrap:break-word;scroll-behavior:smooth;font-size:clamp(100%,5vw + 1rem,110%)}body{color:var(--neutral-00);font-size:1rem;font-family:var(--font-sans);font-weight:400;line-height:1.5}img,svg,picture,video,canvas,audio,iframe,embed,object{max-width:100%;display:block}p,pre,table,blockquote,:is(h1,h2,h3,h4,h5,h6),:is([data-list~=ol],[data-list~=ul],[data-list~=dl]){margin:.75rem 0}:is(h1,h2,h3,h4,h5,h6){font-family:var(--font-sans);font-variant-ligatures:no-common-ligatures;font-weight:400}h1,[data-text~=h1]{font-size:clamp(2.488rem,3vw + 1rem,4.209rem);line-height:1.2}h2,[data-text~=h2]{font-size:clamp(2.074rem,3vw + 1rem,3.157rem);line-height:1.2}h3,[data-text~=h3]{font-size:clamp(1.728rem,3vw + 1rem,2.369rem);line-height:1.3}h4,[data-text~=h4]{font-size:clamp(1.44rem,3vw + 1rem,1.777rem);line-height:1.4}h5,[data-text~=h5]{font-size:clamp(1.2rem,3vw + 1rem,1.333rem);line-height:1.4}h6,[data-text~=h6]{font-size:1rem;line-height:1.5}b,strong{font-weight:bolder}i,em,dfn{font-style:italic}[title]:where(abbr,dfn){text-underline-offset:.3125em;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.125rem}mark{background-color:var(--warning-01);color:var(--neutral-00)}small,sub,sup,[data-text~=small]{font-size:.833rem}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}hr{border-top:.125rem solid var(--neutral-00);min-height:.0625rem;margin:.75rem 0;display:block}:where(a){color:var(--neutral-00);text-decoration:none;-webkit-text-decoration:underline solid var(--primary-00);-webkit-text-decoration:underline solid var(--primary-00);text-decoration:underline solid var(--primary-00);text-decoration-thickness:.125rem;-webkit-text-decoration:underline solid var(--primary-00);text-underline-offset:.3125em;cursor:pointer;background-color:#0000}:where(a:hover,a:active){color:var(--primary-00);text-decoration:none}:where(a:focus){outline-offset:-.125rem;outline:thin dotted}blockquote,q{quotes:none}blockquote{font-family:var(--font-serif);font-style:italic}blockquote:before,blockquote:after{content:"";content:none}:where(blockquote) small{display:block}:where(blockquote) small:before{content:"— "}code,kbd,pre,samp{font-family:var(--font-mono)}pre{white-space:pre-wrap;overflow:auto}ol,ul{list-style-type:none}:is([data-list~=ol],[data-list~=ul],[data-list~=dl]){padding-left:1.5rem;list-style-position:outside}[data-list~=ol]{list-style-type:decimal}[data-list~=ol]>li:first-child>[data-list~=ol]{list-style-type:lower-alpha}[data-list~=ul]{list-style-type:disc}[data-list~=ul]>li:first-child>[data-list~=ul]{list-style-type:circle}:is([data-list~=ol],[data-list~=ul],[data-list~=dl]) [data-list]{margin:0}table{border-collapse:collapse;border-spacing:0;width:100%;display:table}td,th{padding:.5rem .75rem;display:table-cell}:where(form) select,textarea,input{margin:.5rem 0}select,textarea,input[type=text],input[type=email],input[type=password],input[type=time],input[type=date],input[type=datetime-local],input[type=month],input[type=week],input[type=number],input[type=range],input[type=search],input[type=tel],input[type=url]{border:.0625em solid var(--neutral-05);color:var(--neutral-05);font-family:var(--font-ui);background-color:#0000;border-radius:.25rem;width:100%;padding:.5rem .75rem;transition:color .2s,border-color .2s,background-color .2s;display:block}select:focus,textarea:focus,input:focus:not([type=button],[type=reset],[type=submit]){color:var(--neutral-00);border-color:var(--primary-00)}textarea{resize:vertical;min-height:6.25rem;overflow:auto}button,select,[type=button],[type=reset],[type=submit]{font-family:var(--font-ui);text-transform:none;overflow:visible}[type=file]{opacity:0;width:0;height:0;position:absolute}:not([type=button],[type=reset],[type=submit]):invalid{border-color:var(--danger-00)}::selection{color:#000;text-shadow:none;background-color:#ffd23f}[data-container]{width:clamp(20rem,100%,60rem);margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}:where(body)>[data-container]:first-child{margin-top:4.5rem}:where(body)>[data-container]:last-child{margin-bottom:3rem}[data-container~=full]{width:100%}[data-grid]{column-gap:1.25rem;display:grid}[data-column]{grid-column:1/-1}[data-dropbox]{z-index:-10;box-sizing:content-box;visibility:hidden;color:var(--neutral-00);opacity:0;min-width:10rem;transition:opacity .3s,visibility .3s;display:none}[data-dropbox~=menu]{background-color:var(--neutral-10);border:.0625em solid var(--neutral-00)}[data-toggle~=tooltip]{text-underline-offset:.3125em;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:.125rem}[data-dropbox=tooltip]{background-color:var(--neutral-00);color:var(--neutral-10);min-width:24ch;padding:.5rem .75rem;bottom:100%}[data-toggle]{position:relative}[data-toggle~=tooltip]>[data-dropbox],[data-toggle~=pop]>[data-dropbox],[data-toggle~=pop]+[data-dropbox]{display:block;position:absolute}[data-state=active]>[data-dropbox],[data-state=active]+[data-dropbox],[data-toggle~=tooltip]:hover>[data-dropbox]{z-index:100;visibility:visible;opacity:1;display:block}[data-anchor]{color:var(--primary-00);font-family:var(--font-ui);cursor:pointer;padding:.5rem .75rem;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;display:block}[data-anchor]:where([data-state=active],:hover,:active){color:var(--neutral-00);text-decoration:none}[data-anchor]:focus{outline-offset:-.125rem;outline:thin dotted}[data-anchor~=menu]{color:var(--neutral-00)}[data-anchor~=menu]:where([data-state=active],:hover,:active){background-color:var(--neutral-00);color:var(--neutral-10)}[data-flex~=breadcrumb]{column-gap:.375em}:where([data-flex~=breadcrumb]) li:after{content:"/";margin-left:.375em}:where([data-flex~=breadcrumb]) li:last-child:after{content:"";margin-right:0}[data-flex~=line-top]{border-top:.125em solid var(--neutral-00)}:where([data-flex~=line-top]) [data-anchor~=line]{border-top:.125em solid #0000;bottom:.125em}[data-flex~=line-bottom]{border-bottom:.125em solid var(--neutral-00)}:where([data-flex~=line-bottom]) [data-anchor~=line]{border-bottom:.125em solid #0000;top:.125em}[data-anchor~=line]{z-index:1;color:var(--primary-00);position:relative}[data-anchor~=line]:where([data-state=active],:hover,:active){z-index:5;border-color:var(--primary-00);color:var(--neutral-00)}[data-navbar]{background-color:var(--tertiary-00);color:var(--primary-00);width:100%}[data-navbar=top],[data-navbar=bottom]{z-index:1000;position:fixed}[data-navbar=top]{top:0}:where([data-navbar=top]) [data-dropbox]{top:100%}[data-navbar=bottom]{bottom:0}:where([data-navbar=bottom]) [data-dropbox]{bottom:100%}[data-anchor~=navbar]{color:var(--neutral-10)}[data-anchor~=navbar]:where([data-state=active],:hover,:active){color:var(--primary-00)}[data-dropbox~=navbar]{background-color:var(--tertiary-01)}[data-button]{background-color:var(--neutral-00);color:var(--neutral-10);font-family:var(--font-ui);cursor:pointer;border:.0625em solid #0000;border-radius:.25rem;padding:.5rem .75rem;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;display:inline-block}[data-button]:is([data-state=active],:hover,:active){background-color:var(--neutral-02);text-decoration:none}[data-button]:focus{outline-offset:-.125rem;outline:thin dotted}[data-button~=outline]{color:var(--neutral-00);border-color:var(--neutral-00)}[data-button~=outline]:is([data-state=active],:hover,:active){background-color:var(--neutral-00);color:var(--neutral-10)}[data-button~=tertiary]{background-color:var(--tertiary-00);color:var(--neutral-10)}[data-button~=tertiary]:is([data-state=active],:hover,:active){background-color:var(--tertiary-02);color:var(--neutral-10)}[data-button^=tertiary\ outline]{border-color:var(--tertiary-00);color:var(--tertiary-00)}[data-button^=tertiary\ outline]:is([data-state=active],:hover,:active){background-color:var(--tertiary-00);color:var(--neutral-10)}[data-button~=secondary]{background-color:var(--secondary-00);color:var(--neutral-10)}[data-button~=secondary]:is([data-state=active],:hover,:active){background-color:var(--secondary-02);color:var(--neutral-10)}[data-button^=secondary\ outline]{border-color:var(--secondary-00);color:var(--secondary-00)}[data-button^=secondary\ outline]:is([data-state=active],:hover,:active){background-color:var(--secondary-00);color:var(--neutral-10)}[data-button~=primary]{background-color:var(--primary-00);color:var(--neutral-10)}[data-button~=primary]:is([data-state=active],:hover,:active){background-color:var(--primary-02);color:var(--neutral-10)}[data-button^=primary\ outline]{border-color:var(--primary-00);color:var(--primary-00)}[data-button^=primary\ outline]:is([data-state=active],:hover,:active){background-color:var(--primary-00);color:var(--neutral-10)}[data-button~=success]{background-color:var(--success-00);color:var(--neutral-10)}[data-button~=success]:is([data-state=active],:hover,:active){background-color:var(--success-01);color:var(--neutral-10)}[data-button^=success\ outline]{border-color:var(--success-00);color:var(--success-00)}[data-button^=success\ outline]:is([data-state=active],:hover,:active){background-color:var(--success-00);color:var(--neutral-10)}[data-button~=warning]{background-color:var(--warning-00);color:var(--neutral-00)}[data-button~=warning]:is([data-state=active],:hover,:active){background-color:var(--warning-01);color:var(--neutral-00)}[data-button^=warning\ outline]{border-color:var(--warning-00);color:var(--warning-00)}[data-button^=warning\ outline]:is([data-state=active],:hover,:active){background-color:var(--warning-00);color:var(--neutral-00)}[data-button~=danger]{background-color:var(--danger-00);color:var(--neutral-10)}[data-button~=danger]:is([data-state=active],:hover,:active){background-color:var(--danger-01);color:var(--neutral-10)}[data-button^=danger\ outline]{border-color:var(--danger-00);color:var(--danger-00)}[data-button^=danger\ outline]:is([data-state=active],:hover,:active){background-color:var(--danger-00);color:var(--neutral-10)}[data-button~=outline]{background-color:#0000}[data-button=link]{color:var(--neutral-00);text-decoration:none;-webkit-text-decoration:underline solid var(--primary-00);-webkit-text-decoration:underline solid var(--primary-00);text-decoration:underline solid var(--primary-00);text-decoration-thickness:.125rem;-webkit-text-decoration:underline solid var(--primary-00);text-underline-offset:.3125em;font-family:var(--font-sans);background-color:#0000}[data-button=link]:is([data-state=active],:hover,:active){color:var(--primary-00);background-color:#0000;border-color:#0000;text-decoration:none}[data-state=disabled],[data-state=disabled]:is(:hover,:active,:focus){background-color:var(--neutral-09);color:var(--neutral-05);cursor:not-allowed;border-color:#0000;outline:0;text-decoration:none}[data-section~=header]{background-color:var(--secondary-00);color:var(--neutral-10);margin-bottom:1.5rem;padding-top:6rem;padding-bottom:4.5rem}[data-section~=header] :is(h1,h2,h3,h4,h5,h6),[data-section~=header] a{color:var(--neutral-10)}[data-section~=header] h1{margin-bottom:1.5rem}[data-section=footer]{margin-bottom:3rem}[data-container~=header]{width:clamp(20rem,100%,75rem)}[data-filter=blur]{filter:blur(.3rem)}[data-text=title]{font-size:clamp(3.4375rem,9vw + 1rem,8.5rem);line-height:1}[data-text=flip-zero]{font-variant-numeric:slashed-zero}[data-text~=h0]{font-size:clamp(3.15rem,8vw + 1rem,7.8rem);line-height:1}[data-text~=uppercase]{text-transform:uppercase}[data-text~=lowercase]{text-transform:lowercase}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Regular.63e079cf.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Italic.74253f85.woff2)format("woff2");font-weight:400;font-style:italic}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-Bold.52d69420.woff2)format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Lexica Ultralegible;src:local(Lexica Ultralegible),url(up_/up_/fonts/web/LexicaUltralegible-BoldItalic.8c34efd2.woff2)format("woff2");font-weight:700;font-style:italic}[data-position~=relative]{position:relative}[data-position~=absolute]{position:absolute}[data-position~=fixed]{position:fixed}[data-position~=top]{top:0}[data-position~=bottom]{bottom:0}[data-position~=left]{left:0}[data-position~=right]{right:0}[data-box~=leading]{margin:.75rem 0}[data-box~=padding]{padding:.5rem .75rem}[data-box~=padding-top]{padding-top:.5rem}[data-box~=padding-x],[data-box~=padding-right]{padding-right:.75rem}[data-box~=padding-bottom]{padding-bottom:.5rem}[data-box~=padding-x],[data-box~=padding-left]{padding-left:.75rem}[data-box~=border]{border:.0625em solid var(--neutral-05)}[data-box~=border-top]{border-top:.0625em solid var(--neutral-05)}[data-box~=border-left],[data-box~=border-x]{border-left:.0625em solid var(--neutral-05)}[data-box~=border-right],[data-box~=border-x]{border-right:.0625em solid var(--neutral-05)}[data-box~=border-bottom]{border-bottom:.0625em solid var(--neutral-05)}[data-box~=full-width]{width:100%}[data-text~=left]{text-align:left}[data-text~=right]{text-align:right}[data-text~=center]{text-align:center}[data-text~=justify]{text-align:justify;hyphens:auto}[data-flex]{display:flex}[data-flex~=reverse]{flex-direction:row-reverse}[data-flex~=column]{flex-direction:column}[data-flex*=column\ reverse]{flex-direction:column-reverse}[data-flex~=wrap]{flex-wrap:wrap}[data-flex~=grow]>*,[data-item~=grow]{flex-grow:1}[data-flex~=gap]{gap:1.25rem}[data-flex~=end]{justify-content:flex-end}[data-flex~=center]{justify-content:center}[data-flex~=between]{justify-content:space-between}[data-flex~=around]{justify-content:space-around}[data-flex~=even]{justify-content:space-evenly}@media screen and (width<=42.5em){[data-grid~=main]{grid-template-columns:repeat(4,1fr)}[data-grid~=small-1]{grid-template-columns:repeat(1,1fr)}[data-column~=small-1]{grid-column:span 1}[data-grid~=small-2]{grid-template-columns:repeat(2,1fr)}[data-column~=small-2]{grid-column:span 2}[data-grid~=small-3]{grid-template-columns:repeat(3,1fr)}[data-column~=small-3]{grid-column:span 3}[data-grid~=small-4]{grid-template-columns:repeat(4,1fr)}[data-column~=small-4]{grid-column:span 4}[data-display~=small-none],[data-display~=medium],[data-display~=large]{display:none}}@media screen and (width>=42.5625em) and (width<=61.1875em){[data-grid~=main]{grid-template-columns:repeat(12,1fr)}[data-grid~=medium-1]{grid-template-columns:repeat(1,1fr)}[data-column~=medium-1]{grid-column:span 1}[data-grid~=medium-2]{grid-template-columns:repeat(2,1fr)}[data-column~=medium-2]{grid-column:span 2}[data-grid~=medium-3]{grid-template-columns:repeat(3,1fr)}[data-column~=medium-3]{grid-column:span 3}[data-grid~=medium-4]{grid-template-columns:repeat(4,1fr)}[data-column~=medium-4]{grid-column:span 4}[data-grid~=medium-5]{grid-template-columns:repeat(5,1fr)}[data-column~=medium-5]{grid-column:span 5}[data-grid~=medium-6]{grid-template-columns:repeat(6,1fr)}[data-column~=medium-6]{grid-column:span 6}[data-grid~=medium-7]{grid-template-columns:repeat(7,1fr)}[data-column~=medium-7]{grid-column:span 7}[data-grid~=medium-8]{grid-template-columns:repeat(8,1fr)}[data-column~=medium-8]{grid-column:span 8}[data-grid~=medium-9]{grid-template-columns:repeat(9,1fr)}[data-column~=medium-9]{grid-column:span 9}[data-grid~=medium-10]{grid-template-columns:repeat(10,1fr)}[data-column~=medium-10]{grid-column:span 10}[data-grid~=medium-11]{grid-template-columns:repeat(11,1fr)}[data-column~=medium-11]{grid-column:span 11}[data-grid~=medium-12]{grid-template-columns:repeat(12,1fr)}[data-column~=medium-12]{grid-column:span 12}[data-display~=medium-none],[data-display~=small],[data-display~=large]{display:none}}@media screen and (width>=61.25em){[data-grid~=main]{grid-template-columns:repeat(12,1fr)}[data-grid~=large-1]{grid-template-columns:repeat(1,1fr)}[data-column~=large-1]{grid-column:span 1}[data-grid~=large-2]{grid-template-columns:repeat(2,1fr)}[data-column~=large-2]{grid-column:span 2}[data-grid~=large-3]{grid-template-columns:repeat(3,1fr)}[data-column~=large-3]{grid-column:span 3}[data-grid~=large-4]{grid-template-columns:repeat(4,1fr)}[data-column~=large-4]{grid-column:span 4}[data-grid~=large-5]{grid-template-columns:repeat(5,1fr)}[data-column~=large-5]{grid-column:span 5}[data-grid~=large-6]{grid-template-columns:repeat(6,1fr)}[data-column~=large-6]{grid-column:span 6}[data-grid~=large-7]{grid-template-columns:repeat(7,1fr)}[data-column~=large-7]{grid-column:span 7}[data-grid~=large-8]{grid-template-columns:repeat(8,1fr)}[data-column~=large-8]{grid-column:span 8}[data-grid~=large-9]{grid-template-columns:repeat(9,1fr)}[data-column~=large-9]{grid-column:span 9}[data-grid~=large-10]{grid-template-columns:repeat(10,1fr)}[data-column~=large-10]{grid-column:span 10}[data-grid~=large-11]{grid-template-columns:repeat(11,1fr)}[data-column~=large-11]{grid-column:span 11}[data-grid~=large-12]{grid-template-columns:repeat(12,1fr)}[data-column~=large-12]{grid-column:span 12}[data-display~=large-none],[data-display~=small],[data-display~=medium]{display:none}}@media print{html,body{height:auto}nav{display:none}[data-container]{max-width:100%;margin:0;padding:0}[data-grid]{display:block}} -------------------------------------------------------------------------------- /sources/website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | Lexica Ultralegible – A Typeface Built for Accessibility in Typography 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 36 | 37 | 727 | 728 | 729 | --------------------------------------------------------------------------------