\n ${e}\n \n
`)}_getDescElement(){const{desc:e}=this._data;return e?i(`${e}
`):""}_getLinkElement(){const{link:e}=this._data;if(!e)return"";var t=e.replace("http://www.","");return i(`${t}`)}}class h{constructor({data:e,current:t,codesElement:s,classList:n}){this._data=e,this._current=t,this._classList=n,this._stylesElement=this._getStylesElement(),this._codesElement=s,this._propNames=this._current.propNames,this._setStyles()}updateStyles(e){this._current=e,this._setStyles()}_getStylesElement(){const e=this._data.alias||this._data.name,t=i(``);return document.head.append(t),t}_getStyles(){const e=this._data.cssRules,t="."+this._classList.join(" ");let s="",n="";if(!e)return{};for(const{selector:a,props:i,valueId:r}of e){const e=[];let o=[];const l=[t,a].join(" ");if(!r||r===this._current.id){for(let[t,s]of Object.entries(i)){const n=this._current.valuesByKey[t];if(n&&(s=n),"string"==typeof s&&s.includes("\n")){const e=" ";s=s.replace(/\s{2,}/g,"\n"+e),s=`\n${e}${s}`}let a=`${t}: ${s};\n`;e.push(a),this._propNames.includes(t)&&(a=`${a}`),o.push(a)}o=o.map(e=>`${e}
`),n+=`${l} {\n${e.join("")}}\n`,s+=`${a} {${o.join("")}}`}}return{visibleStyles:s,hiddenStyles:n}}_setStyles(){this.styles=this._getStyles(),this._stylesElement.innerHTML=this.styles.hiddenStyles,this._codesElement.innerHTML=this.styles.visibleStyles}}const f=document.querySelector("#demo-tmpl").content.firstElementChild;class c{constructor(e){this._data=e,this._id=this._data.alias||this._data.name,this._propNames=this._getPropNames(),this._values=this._getValuesList(),this._baseClass="demo__content--prop-"+this._id,this._current=this._getCurrent(),this._cellsQuantity=0,this._parentElement=null,this._parentCopy=null,this._parentElementMarkup="",this.element=this._getElement();const t=this.element.querySelector(".demo__code");this._stylesController=new h({data:e,current:this._current,codesElement:t,classList:[this._baseClass]}),this._controlsClickHandler=this._controlsClickHandler.bind(this),this._hightlightGrid=this._hightlightGrid.bind(this),this._addControls(),document.addEventListener("pageFilled",this._hightlightGrid)}_getElement(){const e=f.cloneNode(!0);e.querySelector(".demo__content").classList.add(...this._getClassList());const t=e.querySelector(".demo__view");return this._data.htmlMarkup&&(t.innerHTML=this._data.htmlMarkup),this._data.demoBefore&&t.insertAdjacentHTML("afterbegin",this._data.demoBefore),this._parentElement=t.querySelector(".parent"),this._parentElementMarkup=this._parentElement.outerHTML,e}_getValuesList(){return(this._data.customValues||this._data.values).map((e,t)=>({...e,id:e.id||`${this._id}-control-${t}`}))}_getClassList(){const e=["demo__content--prop-"+this._id];return this._data.isFeaturedHighlighted&&e.push("demo__content--highlight-featured"),e}_addControls(){const e=this._getControlsMarkup(),t=i(`
${e}
`);t.addEventListener("click",this._controlsClickHandler),this.element.prepend(t),this._current.control=t.querySelector(".demo__control--current")}_getControlsMarkup(){const e=[];if(this._values){for(const{id:t,name:s,current:n}of this._values){const a=["demo__control"];(n||s===this._currentValueId)&&a.push("demo__control--current"),e.push(`\n ${this._data.name}\n \n
`)}_getLinkElement(){const e=this._data.link;if(!e)return"";var t=e.replace("http://www.","");return i(`${t}`)}_getDescElement(){return this._data.desc?i(`Applies to: ${this._data.appliesTo}.
`):""}_getInitialValueElement(){return this._data.initValue?i(`Initial: ${this._data.initValue}.
`):""}_getValuesElement(){const{values:e,desc:t}=this._data;if(!e)return"";let s="";const n=(a=e.length,r=["Value","Values"],1===a?r[0]:r[1]);var a,r;const o=!t;for(const{name:t,alias:n,desc:a}of e){const e=n||`${this.id}-${t}`;s+=`${n}
\n- ${s}
I only added interactive demos'; - -module.exports = { - TITLE, - DESC, - URL, - IMAGE, - GITHUB, - COUNTER, - HIGHLIGHT_GRID, - STORAGE_KEY, - CLARIFICATION -}; diff --git a/index.html b/index.html new file mode 100644 index 0000000..2500d9f --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + +
Flex Cheatsheet
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
diff --git a/src/screenshot.png b/screenshot.png
similarity index 100%
rename from src/screenshot.png
rename to screenshot.png
diff --git a/src/app.js b/src/app.js
deleted file mode 100644
index 799be1d..0000000
--- a/src/app.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { groups } from './data/groups';
-import { Nav } from './js/components/nav';
-import { ThemeSwitcher } from './js/components/theme-switcher';
-import { MainContainer } from './js/components/main-container';
-
-import './screenshot.png';
-import './scss/styles.scss';
-
-const main = document.querySelector('.page-main');
-
-const themeSwitcher = new ThemeSwitcher();
-themeSwitcher.setTheme();
-const mainContainer = new MainContainer({ container: main, groups });
-const asideElement = document.querySelector('.page-aside');
-const asideContentElement = document.querySelector('.page-aside__content');
-const asideTogglerElement = document.querySelector('.page-aside__toggler');
-const nav = new Nav({ groups, sectionsComponents: mainContainer.getSectionsComponents() });
-
-asideContentElement.prepend(nav.element);
-nav.moveMarker();
-
-asideTogglerElement.addEventListener('click', () => {
- asideElement.classList.toggle('page-aside--collapsed');
-});
-
-if (window.location.search.includes('debug')) {
- checkLinks();
-}
-
-function checkLinks () {
- const elemsWithId = Array.from(document.querySelectorAll('[id]'));
- const elemsById = elemsWithId.reduce((prev, item) => {
- prev[item.id] = item;
- return prev;
- }, {});
- const links = document.querySelectorAll('a[href*="#"]');
- let counter = 0;
-
- links.forEach((link) => {
- const href = link.getAttribute('href');
- const isExternal = href.includes('http');
- const hrefTail = link.getAttribute('href').split('#')[1];
-
- if (isExternal) {
- if (elemsById[hrefTail] &&
- (href.includes('css3-grid-layout') || href.includes('css-grid-1'))) {
- console.log('external, id exist in doc: ', hrefTail);
- link.classList.add('marked-link');
-}
- } else if (!elemsById[hrefTail]) {
- console.log(`id not exist ${hrefTail}`);
- link.classList.add('marked-link');
- counter++;
- } else if (!href) {
- link.classList.add('marked-link');
- counter++;
- }
- });
-
- console.log(`Wrong links total: ${counter}`);
-}
diff --git a/src/data/alignment.js b/src/data/alignment.js
deleted file mode 100644
index 1b6d1db..0000000
--- a/src/data/alignment.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import justifyContent from './props/alignment/justify-content';
-import alignContent from './props/alignment/align-content';
-import alignItemsSelf from './props/alignment/align-items-self';
-
-export default {
- title: 'Alignment',
- alias: 'alignment',
-
- link: 'https://www.w3.org/TR/css-flexbox-1/#alignment',
-
- desc: `After a flex container’s contents have finished their flexing -and the dimensions of all flex items are finalized, -they can then be aligned within the flex container.
- -The margin properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. Flex items also respect the alignment properties from CSS Box Alignment, -which allow easy keyword-based alignment of items in both the main axis and cross axis. -These properties make many common types of alignment trivial, -including some things that were very difficult in CSS 2.1, -like horizontal and vertical centering.
- -Note: While the alignment properties are defined in CSS Box Alignment [CSS-ALIGN-3], -Flexible Box Layout reproduces the definitions of the relevant ones here -so as to not create a normative dependency that may slow down advancement of the spec. -These properties apply only to flex layout -until CSS Box Alignment Level 3 is finished -and defines their effect for other layout modes. -Additionally, any new values defined in the Box Alignment module -will apply to Flexible Box Layout; -in otherwords, the Box Alignment module, once completed, -will supercede the definitions here.
`, - - items: [ - justifyContent, - alignItemsSelf, - alignContent - ] -}; diff --git a/src/data/declaring.js b/src/data/declaring.js deleted file mode 100644 index a108fbd..0000000 --- a/src/data/declaring.js +++ /dev/null @@ -1,11 +0,0 @@ -import display from './props/display'; - -export default { - title: 'Flex containers', - - hideTitle: true, - - items: [ - display - ] -}; diff --git a/src/data/flexibility.js b/src/data/flexibility.js deleted file mode 100644 index b25e691..0000000 --- a/src/data/flexibility.js +++ /dev/null @@ -1,27 +0,0 @@ -import flexGrow from './props/flexibility/flex-grow'; -import flexShrink from './props/flexibility/flex-shrink'; -import flexBasis from './props/flexibility/flex-basis'; -import flex from './props/flexibility/flex'; - -export default { - title: 'Flexibility', - alias: 'flexibility', - - link: 'https://www.w3.org/TR/css-flexbox-1/#flexibility', - - desc: `The defining aspect of flex layout is the ability to make the flex items “flex”, -altering their width/height to fill the available space in the main dimension. -This is done with the flex property. -A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, -or shrinks them (proportional to their flex shrink factor) to prevent overflow.
- -A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero, -and flexible otherwise.
`, - - items: [ - flexGrow, - flexShrink, - flexBasis, - flex - ] -}; diff --git a/src/data/groups.js b/src/data/groups.js deleted file mode 100644 index f16b504..0000000 --- a/src/data/groups.js +++ /dev/null @@ -1,11 +0,0 @@ -import declaring from './declaring'; -import orderingOrientation from './ordering-orientation'; -import alignment from './alignment'; -import flexibility from './flexibility'; - -export const groups = { - declaring, - orderingOrientation, - alignment, - flexibility -}; diff --git a/src/data/ordering-orientation.js b/src/data/ordering-orientation.js deleted file mode 100644 index 5a9dc22..0000000 --- a/src/data/ordering-orientation.js +++ /dev/null @@ -1,34 +0,0 @@ -import flexDirection from './props/ordering-orientation/flex-direction'; -import flexWrap from './props/ordering-orientation/flex-wrap'; -import flexFlow from './props/ordering-orientation/flex-flow'; -import order from './props/ordering-orientation/order'; - -export default { - title: 'Ordering & Orientation', - alias: 'ordering-orientation', - - link: 'https://www.w3.org/TR/css-flexbox-1/#flow-order', - - desc: `The contents of a flex container can be laid out in any direction and in any order. -This allows an author to trivially achieve effects that would previously have required complex or fragile methods, -such as hacks using the float and clear properties. -This functionality is exposed through the flex-direction, flex-wrap, and order properties.
- -Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, -leaving speech order and navigation based on the source order. -This allows authors to manipulate the visual presentation -while leaving the source order intact for non-CSS UAs and for -linear models such as speech and sequential navigation. -See Reordering and Accessibility and the Flex Layout Overview for examples -that use this dichotomy to improve accessibility.
- - Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering,
-as that can ruin the accessibility of the document.
The align-content property aligns a flex container’s lines within the flex container -when there is extra space in the cross-axis, -similar to how justify-content aligns individual items within the main-axis. -Note, this property has no effect on a single-line flex container. -Values have the following meanings:
- -Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, -because in a single-line flex container -the sole line automatically stretches to fill the space.
`, - - values: [ - { - name: 'flex-start', - alias: 'valdef-align-content-flex-start', - desc: `Lines are packed toward the start of the flex container. -The cross-start edge of the first line in the flex container -is placed flush with the cross-start edge of the flex container, -and each subsequent line is placed flush with the preceding line.`, - current: true - }, - - { - name: 'flex-end', - alias: 'valdef-align-content-flex-end', - desc: `Lines are packed toward the end of the flex container. -The cross-end edge of the last line -is placed flush with the cross-end edge of the flex container, -and each preceding line is placed flush with the subsequent line.` - }, - - { - name: 'center', - alias: 'valdef-align-content-center', - desc: `Lines are packed toward the center of the flex container. -The lines in the flex container are placed flush with each other -and aligned in the center of the flex container, -with equal amounts of space -between the cross-start content edge of the flex container -and the first line in the flex container, -and between the cross-end content edge of the flex container -and the last line in the flex container. -(If the leftover free-space is negative, -the lines will overflow equally in both directions.)` - }, - - { - name: 'space-between', - alias: 'valdef-align-content-space-between', - desc: `Lines are evenly distributed in the flex container. -If the leftover free-space is negative -or there is only a single flex line in the flex container, -this value is identical to flex-start. -Otherwise, -the cross-start edge of the first line in the flex container -is placed flush with the cross-start content edge of the flex container, -the cross-end edge of the last line in the flex container -is placed flush with the cross-end content edge of the flex container, -and the remaining lines in the flex container are distributed -so that the spacing between any two adjacent lines is the same.` - }, - - { - name: 'space-around', - alias: 'valdef-align-content-space-around', - desc: `Lines are evenly distributed in the flex container, -with half-size spaces on either end. -If the leftover free-space is negative -this value is identical to center. -Otherwise, the lines in the flex container are distributed -such that the spacing between any two adjacent lines is the same, -and the spacing between the first/last lines and the flex container edges -is half the size of the spacing between flex lines.` - }, - - { - name: 'stretch', - alias: 'valdef-align-content-stretch', - desc: `Lines stretch to take up the remaining space. -If the leftover free-space is negative, -this value is identical to flex-start. -Otherwise, -the free-space is split equally between all of the lines, -increasing their cross size.` - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - 'flex-wrap': 'wrap', - 'align-content': 'stretch', - height: '250px' - } - }, - { - selector: '.child', - props: { - width: '40%' - } - } - ] -}; diff --git a/src/data/props/alignment/align-items-self.js b/src/data/props/alignment/align-items-self.js deleted file mode 100644 index f5f7bef..0000000 --- a/src/data/props/alignment/align-items-self.js +++ /dev/null @@ -1,77 +0,0 @@ -import alignItems from './align-items'; -import alignSelf from './align-self'; - -export default { - name: 'align-items, align-self', - alias: 'align-items-self', - - link: 'https://www.w3.org/TR/css-flexbox-1/#align-items-property', - - desc: `Flex items can be aligned in the cross axis of the current line of the flex container, -similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, -including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. -(For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)
- -If either of the flex item’s cross-axis margins are auto, align-self has no effect.
`, - - values: [ - { - name: 'auto', - alias: 'valdef-align-items-auto', - desc: `Defers cross-axis alignment control -to the value of align-items on the parent box. -(This is the initial value of align-self.)`, - current: true - }, - - { - name: 'flex-start', - alias: 'valdef-align-items-flex-start', - desc: 'The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.' - }, - - { - name: 'flex-end', - alias: 'valdef-align-items-flex-end', - desc: 'The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.' - }, - - { - name: 'center', - alias: 'valdef-align-items-center', - desc: `The flex item’s margin box is centered in the cross axis within the line. -(If the cross size of the flex line is less than that of the flex item, -it will overflow equally in both directions.)` - }, - - { - name: 'baseline', - alias: 'valdef-align-items-baseline', - desc: `The flex item participates in baseline alignment: -all participating flex items on the line -are aligned such that their baselines align, -and the item with the largest distance between its baseline and its cross-start margin edge -is placed flush against the cross-start edge of the line. -If the item does not have a baseline in the necessary axis, -then one is synthesized from the flex item’s border box.` - }, - - { - name: 'stretch', - alias: 'valdef-align-items-stretch', - desc: `If the cross size property of the flex item computes to auto, -and neither of the cross-axis margins areauto,
-the flex item is stretched.
-Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible,
-while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
- Note: If the flex container’s height is constrained -this value may cause the contents of the flex item to overflow the item.
-The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
` - } - ], - - demos: [ - alignItems, - alignSelf - ] -}; diff --git a/src/data/props/alignment/align-items.js b/src/data/props/alignment/align-items.js deleted file mode 100644 index 873d43b..0000000 --- a/src/data/props/alignment/align-items.js +++ /dev/null @@ -1,49 +0,0 @@ -export default { - name: 'align-items', - - link: 'http://www.w3.org/TR/css-flexbox-1/#propdef-align-items', - - appliesTo: 'flex containers', - - initValue: 'stretch', - - customValues: [ - { - name: 'stretch', - current: true - }, - { - name: 'flex-start' - }, - { - name: 'flex-end' - }, - { - name: 'center' - }, - { - name: 'baseline' - }, - { - name: 'auto' - } - ], - - htmlMarkup: `
-
`,
-
- cssRules: [
- {
- selector: '.parent',
- props: {
- display: 'flex',
- 'align-items': 'stretch',
- height: '250px'
- }
- }
- ]
-};
diff --git a/src/data/props/alignment/align-self.js b/src/data/props/alignment/align-self.js
deleted file mode 100644
index fdc79cb..0000000
--- a/src/data/props/alignment/align-self.js
+++ /dev/null
@@ -1,56 +0,0 @@
-export default {
- name: 'align-self',
-
- link: 'http://www.w3.org/TR/css-flexbox-1/#propdef-align-self',
-
- initValue: 'auto',
-
- appliesTo: 'flex items',
-
- isFeaturedHighlighted: true,
-
- customValues: [
- {
- name: 'auto',
- current: true
- },
- {
- name: 'stretch'
- },
- {
- name: 'flex-start'
- },
- {
- name: 'flex-end'
- },
- {
- name: 'center'
- },
- {
- name: 'baseline'
- }
- ],
-
- htmlMarkup: `Ut enim minim
- Ad veni
- Quis nostrud exercitation neminaes
- Duis aute irure dolor
-
-
`,
-
- cssRules: [
- {
- selector: '.parent',
- props: {
- display: 'flex',
- height: '250px'
- }
- },
- {
- selector: '.child--featured',
- props: {
- 'align-self': 'flex-start'
- }
- }
- ]
-};
diff --git a/src/data/props/alignment/justify-content.js b/src/data/props/alignment/justify-content.js
deleted file mode 100644
index 9610904..0000000
--- a/src/data/props/alignment/justify-content.js
+++ /dev/null
@@ -1,100 +0,0 @@
-export default {
- name: 'justify-content',
-
- link: 'http://www.w3.org/TR/css-flexbox-1/#justify-content-property',
-
- appliesTo: 'flex containers',
-
- initValue: 'flex-start',
-
- desc: `Ut enim minim
- Quis nostrud exercitation neminaes
- Ad veni
- Duis aute irure dolor
- The justify-content property aligns flex items along the main axis of the current line of the flex container. -This is done after any flexible lengths and any auto margins have been resolved. -Typically it helps distribute extra free space leftover when either -all the flex items on a line are inflexible, -or are flexible but have reached their maximum size. -It also exerts some control over the alignment of items when they overflow the line.
`, - - values: [ - { - name: 'flex-start', - alias: 'valdef-justify-content-flex-start', - desc: `Flex items are packed toward the start of the line. -The main-start margin edge of the first flex item on the line -is placed flush with the main-start edge of the line, -and each subsequent flex item is placed flush with the preceding item.`, - current: true - }, - - { - name: 'flex-end', - alias: 'valdef-justify-content-flex-end', - desc: `Flex items are packed toward the end of the line. -The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, -and each preceding flex item is placed flush with the subsequent item.` - }, - - { - name: 'center', - alias: 'valdef-justify-content-center', - desc: `Flex items are packed toward the center of the line. -The flex items on the line are placed flush with each other -and aligned in the center of the line, -with equal amounts of space between the main-start edge of the line and the first item on the line -and between the main-end edge of the line and the last item on the line. -(If the leftover free-space is negative, -the flex items will overflow equally in both directions.)` - }, - - { - name: 'space-between', - alias: 'valdef-justify-content-space-between', - desc: `Flex items are evenly distributed in the line. -If the leftover free-space is negative -or there is only a single flex item on the line, -this value is identical to flex-start. -Otherwise, -the main-start margin edge of the first flex item on the line -is placed flush with the main-start edge of the line, -the main-end margin edge of the last flex item on the line -is placed flush with the main-end edge of the line, -and the remaining flex items on the line are distributed -so that the spacing between any two adjacent items is the same.` - }, - - { - name: 'space-around', - alias: 'valdef-justify-content-space-around', - desc: `Flex items are evenly distributed in the line, -with half-size spaces on either end. -If the leftover free-space is negative or -there is only a single flex item on the line, -this value is identical to center. -Otherwise, the flex items on the line are distributed -such that the spacing between any two adjacent flex items on the line is the same, -and the spacing between the first/last flex items and the flex container edges -is half the size of the spacing between flex items.` - }, - { - name: 'space-evenly', - alias: 'valdef-justify-content-space-evenly', - desc: `The alignment subjects are evenly distributed in the alignment container, -with a full-size space on either end. -The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, -before the first alignment subject, -and after the last alignment subject is the same. - -
The default fallback alignment for this value is center.
` - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - 'justify-content': 'flex-start', - height: '250px' - } - } - ] -}; diff --git a/src/data/props/display.js b/src/data/props/display.js deleted file mode 100644 index 793f0d4..0000000 --- a/src/data/props/display.js +++ /dev/null @@ -1,65 +0,0 @@ -export default { - name: 'display', - - link: 'http://www.w3.org/TR/css-flexbox-1/#flex-containers', - - appliesTo: 'all elements', - - desc: `A flex container establishes a new flex formatting context for its contents. -This is the same as establishing a block formatting context, -except that flex layout is used instead of block layout. -For example, floats do not intrude into the flex container, -and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.
- -Flex containers are not block containers, -and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. -In particular:
- --
-
-
-
float and clear do not create floating or clearance of flex item, -and do not take it out-of-flow.
-
-
- -
-
vertical-align has no effect on a flex item.
-
- -
-
the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, -and flex containers do not contribute a first formatted line or first letter to their ancestors.
-
-
If an element’s specified display is inline-flex, -then its display property computes to flex in certain circumstances: -the table in CSS 2.1 Section 9.7 is amended to contain an additional row, -with inline-flex in the "Specified Value" column -and flex in the "Computed Value" column.
`, - - values: [ - { - name: 'flex', - alias: 'valdef-display-flex', - desc: `This value causes an element to generate a flex container box -that is block-level when placed in flow layout.`, - current: true - }, - { - name: 'inline-flex', - alias: 'valdef-display-inline-flex', - desc: `This value causes an element to generate a flex container box -that is inline-level when placed in flow layout.` - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex' - } - } - ], - - demoBefore: 'Some text' -}; diff --git a/src/data/props/flexibility/flex-basis.js b/src/data/props/flexibility/flex-basis.js deleted file mode 100644 index 87d2b11..0000000 --- a/src/data/props/flexibility/flex-basis.js +++ /dev/null @@ -1,73 +0,0 @@ -export default { - name: 'flex-basis', - - link: 'http://www.w3.org/TR/css-flexbox-1/#flex-basis-property', - - initValue: 'auto', - - appliesTo: 'flex items', - - isFeaturedHighlighted: true, - - desc: `The flex-basis property sets the flex basis. -It accepts the same values as the width and height property, plus content.
- -For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes [CSS21], -except that if a value would resolve to auto for width, -it instead resolves to content for flex-basis. -For example, percentage values of flex-basis are resolved against -the flex item’s containing block (i.e. its flex container); -and if that containing block’s size is indefinite, -the used value for flex-basis is content. -As another corollary, flex-basis determines the size of the content box, -unless otherwise specified -such as by box-sizing [CSS3UI].
`, - - values: [ - { - name: 'content | <width>', - alias: 'flex-basis-value', - desc: '' - } - ], - - customValues: [ - { - name: '30%', - current: true - }, - { - name: '50%' - }, - { - name: 'content' - }, - { - name: 'auto' - } - ], - - htmlMarkup: `
-
-
-
`,
-
- cssRules: [
- {
- selector: '.parent',
- props: {
- display: 'flex',
- 'flex-wrap': 'wrap',
- height: '250px'
- }
- },
- {
- selector: '.child--featured',
- props: {
- 'flex-basis': '30%'
- }
- }
- ]
-};
diff --git a/src/data/props/flexibility/flex-grow.js b/src/data/props/flexibility/flex-grow.js
deleted file mode 100644
index ffd1b10..0000000
--- a/src/data/props/flexibility/flex-grow.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
- name: 'flex-grow',
-
- link: 'http://www.w3.org/TR/css-flexbox-1/#flex-grow-property',
-
- initValue: '0',
-
- appliesTo: 'flex items',
-
- isFeaturedHighlighted: true,
-
- desc: `Some text
-
- The flex-grow property sets the flex grow factor to the provided <number>. -Negative numbers are invalid.
`, - - values: [ - { - name: '<number>', - alias: 'flex-grow-value', - desc: '' - } - ], - - customValues: [ - { - name: '0' - }, - { - name: '1', - current: true - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - height: '250px' - } - }, - { - selector: '.child--featured', - props: { - 'flex-grow': '1' - } - } - ] -}; diff --git a/src/data/props/flexibility/flex-shrink.js b/src/data/props/flexibility/flex-shrink.js deleted file mode 100644 index ef56f52..0000000 --- a/src/data/props/flexibility/flex-shrink.js +++ /dev/null @@ -1,54 +0,0 @@ -export default { - name: 'flex-shrink', - - link: 'http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property', - - initValue: '1', - - appliesTo: 'flex items', - - isFeaturedHighlighted: true, - - desc: `The flex-shrink property sets the flex shrink factor to the provided <number>. -Negative numbers are invalid.
`, - - values: [ - { - name: '<number>', - alias: 'flex-shrink-value', - desc: '' - } - ], - - customValues: [ - { - name: '1', - current: true - }, - { - name: '0' - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - height: '250px' - } - }, - { - selector: '.child', - props: { - width: '45%' - } - }, - { - selector: '.child--featured', - props: { - 'flex-shrink': '1' - } - } - ] -}; diff --git a/src/data/props/flexibility/flex-values.js b/src/data/props/flexibility/flex-values.js deleted file mode 100644 index 4fbec5e..0000000 --- a/src/data/props/flexibility/flex-values.js +++ /dev/null @@ -1,161 +0,0 @@ -export default { - name: 'Flex values', - alias: 'flex-values', - - isFeaturedHighlighted: true, - - propDemoName: 'flex', - - values: [ - { - name: '<flex-grow>', - alias: 'valdef-flex-flex-grow', - desc: `This <number> component sets flex-grow longhand and specifies the flex grow factor,
-which determines how much the flex item will grow
-relative to the rest of the flex items in the flex container
-when positive free space is distributed.
-When omitted, it is set to 1.
-
`
- },
-
- {
- name: '<flex-shrink>',
- alias: 'valdef-flex-flex-shrink',
- desc: `Flex values between 0 and 1 have a somewhat special behavior: -when the sum of the flex values on the line is less than 1, -they will take up less than 100% of the free space.
-An item’s flex-grow value
-is effectively a request for some proportion of the free space,
-with 1 meaning “100% of the free space”;
-then if the items on the line are requesting more than 100% in total,
-the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
-However, if the items request less than the full amount
-(such as three items that are each flex-grow: .25)
-then they’ll each get exactly what they request
-(25% of the free space to each,
-with the final 25% left unfilled).
-See §9.7 Resolving Flexible Lengths for the exact details
-of how free space is distributed.
This pattern is required for continuous behavior as flex-grow approaches zero
-(which means the item wants none of the free space).
-Without this, a flex-grow: 1 item would take all of the free space;
-but so would a flex-grow: 0.1 item,
-and a flex-grow: 0.01 item,
-etc.,
-until finally the value is small enough to underflow to zero
-and the item suddenly takes up none of the free space.
-With this behavior,
-the item instead gradually takes less of the free space
-as flex-grow shrinks below 1,
-smoothly transitioning to taking none of the free space at zero.
Unless this “partial fill” behavior is specifically what’s desired,
-authors should stick to values ≥ 1;
-for example, using 1 and 2 is usually better
-than using .33 and .67,
-as they’re more likely to behave as intended
-if items are added, removed, or line-wrapped.
This <number> component sets flex-shrink longhand and specifies the flex shrink factor,
-which determines how much the flex item will shrink
-relative to the rest of the flex items in the flex container
-when negative free space is distributed.
-When omitted, it is set to 1.
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. -This distributes negative space in proportion to how much the item is able to shrink, -so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.
` - }, - - { - name: '<flex-basis>', - alias: 'valdef-flex-flex-basis', - desc: `This component sets the flex-basis longhand, -which specifies the flex basis: -the initial main size of the flex item, -before free space is distributed according to the flex factors.
- -<flex-basis> accepts the same values as the width and height properties -(except that auto is treated differently) -plus the content keyword:
--
-
-
- - auto - - -
- - When specified on a flex item, the auto keyword -retrieves the value of the main size property as the used flex-basis. -If that value is itself auto, then the used value is content. - - -
- - content - - -
-
- Indicates an automatic size based on the flex item’s content.
-(It is typically equivalent to the max-content size,
-but with adjustments to handle aspect ratios,
-intrinsic sizing constraints,
-and orthogonal flows;
-see details in §9 Flex Layout Algorithm.)
-
Note: This value was not present in the initial release of Flexible Box Layout, -and thus some older implementations will not support it. -The equivalent effect can be achieved by using
- -autotogether with a main size (width or height) of auto.
- - - <width> - - -
- - For all other values, flex-basis is resolved the same way as for width and height. - - -
When omitted from the flex shorthand, its specified value is 0.
0 0 auto.'
- }
- ],
-
- customValues: [
- {
- name: '0 1 auto',
- current: true
- },
- {
- name: '0 1 30%'
- },
- {
- name: '1 0 30%'
- },
- {
- name: 'none'
- }
- ],
-
- cssRules: [
- {
- selector: '.parent',
- props: {
- display: 'flex',
- height: '250px'
- }
- },
- {
- selector: '.child--featured',
- props: {
- flex: '0 1 auto'
- }
- }
- ]
-};
diff --git a/src/data/props/flexibility/flex.js b/src/data/props/flexibility/flex.js
deleted file mode 100644
index cd63ef0..0000000
--- a/src/data/props/flexibility/flex.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import flexValues from './flex-values';
-
-export default {
- name: 'flex',
-
- link: 'https://www.w3.org/TR/css-flexbox-1/#flex-property',
-
- initValue: '0 1 auto',
-
- appliesTo: 'flex items',
-
- isFeaturedHighlighted: true,
-
- desc: `The flex property specifies the components of a flexible length: -the flex factors (grow and shrink) -and the flex basis. -When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box. -If a box is not a flex item, flex has no effect.
- -The initial values of the flex components are equivalent to flex: 0 1 auto.
- -Note: The initial values of flex-grow and flex-basis are different from their defaults when omitted in the flex shorthand. -This is so that the flex shorthand can better accommodate the most common cases.
- -A unitless zero that is not already preceded by two flex factors -must be interpreted as a flex factor. -To avoid misinterpretation or invalid declarations, -authors must specify a zero <flex-basis> component -with a unit or precede it by two flex factors.
`, - - values: [ - { - name: 'none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ]', - alias: 'flex-value', - desc: '' - } - ], - - children: [ - flexValues - ] -}; diff --git a/src/data/props/ordering-orientation/flex-direction.js b/src/data/props/ordering-orientation/flex-direction.js deleted file mode 100644 index 108dbdf..0000000 --- a/src/data/props/ordering-orientation/flex-direction.js +++ /dev/null @@ -1,63 +0,0 @@ -export default { - name: 'flex-direction', - - link: 'http://www.w3.org/TR/css-flexbox-1/#flex-direction-property', - - appliesTo: 'flex containers', - - initValue: 'row', - - desc: `The flex-direction property specifies how flex items are placed in the flex container, -by setting the direction of the flex container’s main axis. -This determines the direction in which flex items are laid out.
- -Note: The reverse values do not reverse box ordering: -like writing-mode and direction [CSS3-WRITING-MODES], -they only change the direction of flow. -Painting order, speech order, and sequential navigation orders -are not affected.
`, - - values: [ - { - name: 'row', - alias: 'valdef-flex-direction-row', - desc: `The flex container’s main axis has the same orientation as the inline axis of the current writing mode. -The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, -of the current writing mode.`, - current: true - }, - - { - name: 'row-reverse', - alias: 'valdef-flex-direction-row-reverse', - desc: `Same as row, -except the main-start and main-end directions are swapped.` - }, - - { - name: 'column', - alias: 'valdef-flex-direction-column', - desc: `The flex container’s main axis has the same orientation as the block axis of the current writing mode. -The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, -of the current writing mode.` - }, - - { - name: 'column-reverse', - alias: 'valdef-flex-direction-column-reverse', - desc: `Same as column, -except the main-start and main-end directions are swapped.` - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - 'flex-direction': 'row', - height: '250px' - } - } - ] -}; diff --git a/src/data/props/ordering-orientation/flex-flow.js b/src/data/props/ordering-orientation/flex-flow.js deleted file mode 100644 index b114d05..0000000 --- a/src/data/props/ordering-orientation/flex-flow.js +++ /dev/null @@ -1,60 +0,0 @@ -export default { - name: 'flex-flow', - - link: 'http://www.w3.org/TR/css-flexbox-1/#flex-flow-property', - - appliesTo: 'flex containers', - - initValue: 'row nowrap', - - desc: `The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, -which together define the flex container’s main and cross axes.
- -
- Note that the flex-flow directions are writing mode sensitive.
-In vertical Japanese, for example,
-a row flex container lays out its contents from top to bottom.
-
`,
-
- values: [
- {
- name: '<flex-direction> || <flex-wrap>',
- alias: 'flex-flow-values',
- desc: ''
- }
- ],
-
- customValues: [
- {
- name: 'row nowrap',
- current: true
- },
- {
- name: 'column-reverse'
- },
- {
- name: 'column wrap'
- },
- {
- name: 'row-reverse wrap-reverse'
- }
- ],
-
- cssRules: [
- {
- selector: '.parent',
- props: {
- display: 'flex',
- 'flex-flow': 'row nowrap',
- height: '250px'
- }
- },
- {
- selector: '.child',
- props: {
- width: '40%',
- height: '40%'
- }
- }
- ]
-};
diff --git a/src/data/props/ordering-orientation/flex-wrap.js b/src/data/props/ordering-orientation/flex-wrap.js
deleted file mode 100644
index 99189b7..0000000
--- a/src/data/props/ordering-orientation/flex-wrap.js
+++ /dev/null
@@ -1,60 +0,0 @@
-export default {
- name: 'flex-wrap',
-
- link: 'http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property',
-
- appliesTo: 'flex containers',
-
- initValue: 'nowrap',
-
- desc: `The flex-wrap property controls whether the flex container is single-line or multi-line, -and the direction of the cross-axis, -which determines the direction new lines are stacked in.
- -For the values that are not wrap-reverse, -the cross-start direction is equivalent to either -the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) -and the cross-end direction is the opposite direction of cross-start. -When flex-wrap is wrap-reverse, -the cross-start and cross-end directions -are swapped.
`, - - values: [ - { - name: 'nowrap', - alias: 'valdef-flex-wrap-nowrap', - desc: 'The flex container is single-line.', - current: true - }, - - { - name: 'wrap', - alias: 'valdef-flex-wrap-wrap', - desc: 'The flex container is multi-line.' - }, - - { - name: 'wrap-reverse', - alias: 'valdef-flex-wrap-wrap-reverse', - desc: 'Same as wrap.' - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - 'align-items': 'flex-start', - 'flex-wrap': 'nowrap', - height: '250px' - } - }, - { - selector: '.child', - props: { - width: '40%' - } - } - ] -}; diff --git a/src/data/props/ordering-orientation/order.js b/src/data/props/ordering-orientation/order.js deleted file mode 100644 index 88a2c44..0000000 --- a/src/data/props/ordering-orientation/order.js +++ /dev/null @@ -1,67 +0,0 @@ -export default { - name: 'order', - - link: 'https://www.w3.org/TR/css-flexbox-1/#order-property', - - appliesTo: 'flex items', - - initValue: '0', - - isFeaturedHighlighted: true, - - desc: `Flex items are, by default, displayed and laid out in the same order as they appear in the source document. -The order property can be used to change this ordering.
- -The order property controls the order in which -flex items appear within the flex container, -by assigning them to ordinal groups. -It takes a single <integer> value, -which specifies which ordinal group the flex item belongs to.
- -A flex container lays out its content in order-modified document order, -starting from the lowest numbered ordinal group and going up. -Items with the same ordinal group are laid out in the order they appear in the source document. -This also affects the painting order [CSS21], -exactly as if the flex items were reordered in the source document. -Absolutely-positioned children of a flex container are treated as having order: 0 for the purpose of determining their painting order relative to flex items.
- -Unless otherwise specified by a future specification, -this property has no effect on boxes that are not flex items.
`, - - values: [ - { - name: '<integer>', - alias: 'order-values', - desc: '' - } - ], - - customValues: [ - { - name: '-1', - current: true - }, - { - name: '0' - }, - { - name: '1' - } - ], - - cssRules: [ - { - selector: '.parent', - props: { - display: 'flex', - height: '250px' - } - }, - { - selector: '.child--featured', - props: { - order: '-1' - } - } - ] -}; diff --git a/src/fonts/Roboto_Slab/LICENSE.txt b/src/fonts/Roboto_Slab/LICENSE.txt deleted file mode 100644 index 75b5248..0000000 --- a/src/fonts/Roboto_Slab/LICENSE.txt +++ /dev/null @@ -1,202 +0,0 @@ - - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright [yyyy] [name of copyright owner] - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. diff --git a/src/fonts/Roboto_Slab/README.txt b/src/fonts/Roboto_Slab/README.txt deleted file mode 100644 index cfe1022..0000000 --- a/src/fonts/Roboto_Slab/README.txt +++ /dev/null @@ -1,69 +0,0 @@ -Roboto Slab Variable Font -========================= - -This download contains Roboto Slab as both a variable font and static fonts. - -Roboto Slab is a variable font with this axis: - wght - -This means all the styles are contained in a single file: - RobotoSlab-VariableFont_wght.ttf - -If your app fully supports variable fonts, you can now pick intermediate styles -that aren’t available as static fonts. Not all apps support variable fonts, and -in those cases you can use the static font files for Roboto Slab: - static/RobotoSlab-Thin.ttf - static/RobotoSlab-ExtraLight.ttf - static/RobotoSlab-Light.ttf - static/RobotoSlab-Regular.ttf - static/RobotoSlab-Medium.ttf - static/RobotoSlab-SemiBold.ttf - static/RobotoSlab-Bold.ttf - static/RobotoSlab-ExtraBold.ttf - static/RobotoSlab-Black.ttf - -Get started ------------ - -1. Install the font files you want to use - -2. Use your app's font picker to view the font family and all the -available styles - -Learn more about variable fonts -------------------------------- - - https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts - https://variablefonts.typenetwork.com - https://medium.com/variable-fonts - -In desktop apps - - https://theblog.adobe.com/can-variable-fonts-illustrator-cc - https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts - -Online - - https://developers.google.com/fonts/docs/getting_started - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide - https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts - -Installing fonts - - MacOS: https://support.apple.com/en-us/HT201749 - Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux - Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows - -Android Apps - - https://developers.google.com/fonts/docs/android - https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts - -License -------- -Please read the full license text (LICENSE.txt) to understand the permissions, -restrictions and requirements for usage, redistribution, and modification. - -Commercial usage is allowed for any purpose, in any medium, but some -requirements apply in some situations. Always read your font licenses and -understand what they mean. diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-Black.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-Black.ttf deleted file mode 100644 index 1e83b0a..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-Black.ttf and /dev/null differ diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraBold.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraBold.ttf deleted file mode 100644 index 3d62d6a..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraBold.ttf and /dev/null differ diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf deleted file mode 100644 index 4f8d909..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf and /dev/null differ diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-Light.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-Light.ttf deleted file mode 100644 index 8d8ac52..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-Light.ttf and /dev/null differ diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf deleted file mode 100644 index 0d8e8df..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf and /dev/null differ diff --git a/src/fonts/Roboto_Slab/static/RobotoSlab-Thin.ttf b/src/fonts/Roboto_Slab/static/RobotoSlab-Thin.ttf deleted file mode 100644 index eaf9675..0000000 Binary files a/src/fonts/Roboto_Slab/static/RobotoSlab-Thin.ttf and /dev/null differ diff --git a/src/index-tmpl.html b/src/index-tmpl.html deleted file mode 100644 index 708c417..0000000 --- a/src/index-tmpl.html +++ /dev/null @@ -1,65 +0,0 @@ - - - -<%= htmlWebpackPlugin.options.TITLE %>
- -
-
-
-
-
-
-
-
-
-
-
-
-
- <%= htmlWebpackPlugin.options.COUNTER %>
-
-
diff --git a/src/js/components/demo.js b/src/js/components/demo.js
deleted file mode 100644
index c0f55d7..0000000
--- a/src/js/components/demo.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/* global HIGHLIGHT_GRID */
-
-import { createElement, getCellsQuantity } from '../helpers';
-import { StylesController } from './styles-controller';
-
-const demoTmpl = document.querySelector('#demo-tmpl').content.firstElementChild;
-
-export class Demo {
- constructor (data) {
- this._data = data;
- this._id = this._data.alias || this._data.name;
- this._propNames = this._getPropNames();
- this._values = this._getValuesList();
- this._baseClass = `demo__content--prop-${this._id}`;
- this._current = this._getCurrent();
- this._cellsQuantity = 0;
- this._parentElement = null;
- this._parentCopy = null;
- this._parentElementMarkup = '';
- this.element = this._getElement();
- const codesElement = this.element.querySelector('.demo__code');
-
- this._stylesController = new StylesController({
- data,
- current: this._current,
- codesElement,
- classList: [this._baseClass]
- });
-
- this._controlsClickHandler = this._controlsClickHandler.bind(this);
- this._hightlightGrid = this._hightlightGrid.bind(this);
-
- this._addControls();
-
- document.addEventListener('pageFilled', this._hightlightGrid);
- }
-
- _getElement () {
- const demo = demoTmpl.cloneNode(true);
- const demoContentElement = demo.querySelector('.demo__content');
- demoContentElement.classList.add(...this._getClassList());
- const viewElement = demo.querySelector('.demo__view');
-
- if (this._data.htmlMarkup) {
- viewElement.innerHTML = this._data.htmlMarkup;
- }
-
- if (this._data.demoBefore) {
- viewElement.insertAdjacentHTML('afterbegin', this._data.demoBefore);
- }
-
- this._parentElement = viewElement.querySelector('.parent');
- this._parentElementMarkup = this._parentElement.outerHTML;
-
- return demo;
- }
-
- _getValuesList () {
- const values = this._data.customValues || this._data.values;
-
- return values.map((item, index) => {
- return {
- ...item,
- id: item.id || `${this._id}-control-${index}`
- };
- });
- }
-
- _getClassList () {
- const list = [`demo__content--prop-${this._id}`];
-
- if (this._data.isFeaturedHighlighted) {
- list.push('demo__content--highlight-featured');
- }
-
- return list;
- }
-
- _addControls () {
- const controls = this._getControlsMarkup();
-
- const element = createElement(`
-
-
-
-
-
-
-
-
-
-
-
- ${controls}
`);
-
- element.addEventListener('click', this._controlsClickHandler);
-
- this.element.prepend(element);
- this._current.control = element.querySelector('.demo__control--current');
- }
-
- _getControlsMarkup () {
- const controlsList = [];
-
- if (!this._values) {
- return;
- }
-
- for (const { id, name, current } of this._values) {
- const classList = ['demo__control'];
-
- if (current || name === this._currentValueId) {
- classList.push('demo__control--current');
- }
-
- controlsList.push(``);
- }
-
- return controlsList.join(' ');
- }
-
- _getPropNames () {
- const propName = this._data.propDemoName || this._data.name;
-
- if (!propName.includes('+')) {
- return [propName];
- }
-
- return propName
- .split('+')
- .map(item => item.trim());
- }
-
- _getCurrent () {
- if (!this._values) {
- return;
- }
-
- let currentValue;
- let currentValueId;
-
- for (const { id, name, current } of this._values) {
- if (current) {
- currentValueId = id;
- currentValue = name;
- }
- }
-
- if (!currentValueId) {
- currentValueId = this._values[0].id;
- currentValue = this._values[0].name;
- }
-
- return {
- id: currentValueId,
- propNames: this._propNames,
- // Need for double props (prop + prop)
- valuesByKey: this._getValuesByKey(currentValue)
- };
- }
-
- _getValuesByKey (currentValue) {
- let valuesByKey = { [this._propNames[0]]: currentValue };
-
- if (currentValue.includes('/')) {
- const values = currentValue.split('/');
-
- if (values.length === this._propNames.length) {
- valuesByKey = this._propNames.reduce((prev, item, index) => {
- prev[item] = values[index];
- return prev;
- }, {});
- }
- }
-
- return valuesByKey;
- }
-
- _controlsClickHandler (ev) {
- const control = ev.target.closest('.demo__control');
-
- if (!control) {
- return;
- }
-
- this._current.control.classList.remove('demo__control--current');
- control.classList.add('demo__control--current');
-
- this._current.control = control;
- this._current.id = control.id;
- this._current.valuesByKey = this._getValuesByKey(control.innerHTML);
-
- this._stylesController.updateStyles(this._current);
-
- this._hightlightGrid();
- }
-
- _getHightlightedGridItemsMarkup (quantity) {
- let itemsMarkup = '';
-
- for (let i = 0; i < quantity; i++) {
- itemsMarkup += '';
- }
-
- return itemsMarkup;
- }
-
- _hightlightGrid () {
- if (!HIGHLIGHT_GRID) {
- return;
- }
-
- const parentElemStyles = getComputedStyle(this._parentElement);
- const oldCellsQuantity = this._cellsQuantity;
- this._cellsQuantity = getCellsQuantity(parentElemStyles);
-
- if (oldCellsQuantity === this._cellsQuantity) {
- return;
- }
-
- const oldParentCopy = this._parentCopy;
- this._parentCopy = createElement(this._parentElementMarkup);
- this._parentCopy.classList.add('parent--grid-view');
- const restCellsQuantity = this._cellsQuantity - this._parentCopy.children.length;
- const parentItemsMarkup = this._getHightlightedGridItemsMarkup(restCellsQuantity);
- this._parentCopy.insertAdjacentHTML('beforeEnd', parentItemsMarkup);
-
- if (oldParentCopy) {
- oldParentCopy.replaceWith(this._parentCopy);
- } else {
- this._parentElement.append(this._parentCopy);
- }
- }
-}
diff --git a/src/js/components/group.js b/src/js/components/group.js
deleted file mode 100644
index 552b5bf..0000000
--- a/src/js/components/group.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { createElement } from '../helpers';
-
-export class Group {
- constructor (data) {
- this._data = data;
- this._sectionId = `section-${this._data.id}`;
- const container = createElement('');
-
- const elements = [
- this._getTitleElement(),
- this._getLinkElement(),
- this._getDescElement()
- ];
-
- elements.forEach(element => container.append(element));
-
- this.element = this._getElement();
-
- this.element.append(container);
- }
-
- _getElement () {
- const { hideTitle } = this._data;
- let className = 'group';
-
- if (hideTitle) {
- className += ' group--hidden-title';
- }
-
- return createElement(``);
- }
-
- _getTitleElement () {
- const { title, hideTitle } = this._data;
-
- if (!title) {
- return '';
- }
-
- let className = 'group__title';
-
- if (hideTitle) {
- className += ' visually-hidden';
- }
-
- return createElement(`- ${title} - -
`); - } - - _getDescElement () { - const { desc } = this._data; - - if (!desc) { - return ''; - } - - return createElement(`${desc}
`);
- }
-
- _getLinkElement () {
- const { link } = this._data;
-
- if (!link) {
- return '';
- }
-
- var text = link.replace('http://www.', '');
-
- return createElement(`${text}`);
- }
-}
diff --git a/src/js/components/main-container.js b/src/js/components/main-container.js
deleted file mode 100644
index 6e19bdf..0000000
--- a/src/js/components/main-container.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Group } from './group';
-import { PropSection } from './prop-section';
-
-export class MainContainer {
- constructor ({ container, groups }) {
- this._container = container;
- this._groups = groups;
- this._sectionsComponents = [];
-
- this._fillContent();
- }
-
- getSectionsComponents () {
- return this._sectionsComponents;
- }
-
- _fillContent () {
- for (const [id, data] of Object.entries(this._groups)) {
- const groupComponent = new Group({ id, ...data });
- const groupElement = groupComponent.element;
- this._sectionsComponents.push(groupComponent);
-
- for (const item of data.items) {
- const sectionComponent = new PropSection(item);
- this._sectionsComponents.push(sectionComponent);
-
- groupElement.append(sectionComponent.element);
-
- this._addChildren(groupComponent, sectionComponent, item.demos);
- this._addChildren(groupComponent, sectionComponent, item.children);
- }
-
- this._container.append(groupElement);
- }
-
- // Add semitransparent grids to demos
- document.dispatchEvent(new Event('pageFilled'));
- }
-
- _addChildren (groupComponent, sectionComponent, children) {
- if (!children || children.length === 0) {
- return;
- }
-
- for (const child of children) {
- const section = new PropSection(child, { parentId: sectionComponent.id });
- this._sectionsComponents.push(section);
-
- groupComponent.element.append(section.element);
- }
- }
-}
diff --git a/src/js/components/nav.js b/src/js/components/nav.js
deleted file mode 100644
index e1efae6..0000000
--- a/src/js/components/nav.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { createElement, isVisible, debounce } from '../helpers';
-
-export class Nav {
- constructor ({
- groups,
- sectionsComponents
- }) {
- this._groups = groups;
- // While get marker position
- // need to handle first the last of sections
- this._sectionsComponents = sectionsComponents.reverse();
- this._current = null;
- this._isWindowScrolling = false;
- this._scrollTimeOut = null;
-
- this.element = this._getNavElement();
-
- this._markerElement = createElement('');
- this.element.prepend(this._markerElement);
-
- this._navItemsBySectionId = this._getItemsBySectionId();
-
- this._navClickHandler = this._navClickHandler.bind(this);
- this.moveMarker = this.moveMarker.bind(this);
- this._windowScrollHandler = this._windowScrollHandler.bind(this);
-
- this.element.addEventListener('click', this._navClickHandler);
-
- window.addEventListener('scroll', this._windowScrollHandler);
- }
-
- setCurrentItem (element) {
- if (element === this._currentElement) {
- return;
- }
-
- if (this._currentElement) {
- this._currentElement.classList.remove('nav__item--current');
- }
-
- this._markerElement.style.top = `${element.offsetTop}px`;
-
- element.classList.add('nav__item--current');
-
- this._currentElement = element;
-
- this._isWindowScrolling = true;
- }
-
- _getItemsBySectionId () {
- const navItems = Array.from(this.element.querySelectorAll('.nav__item, .nav__subheader'));
-
- const navItemsById = navItems.reduce((prev, item) => {
- prev[item.dataset.name] = item;
-
- return prev;
- }, {});
-
- return this._sectionsComponents.reduce((prev, item) => {
- const sectionId = `section-${item.id}`;
- let navItem = navItemsById[sectionId];
-
- if (!navItem) {
- navItem = navItemsById[`section-${item.parentId}`];
- }
-
- prev[sectionId] = navItem;
-
- return prev;
- }, {});
- }
-
- _getNavElement () {
- const navMarkup = this._getNavContentMarkup();
-
- return createElement(``);
- }
-
- _getNavContentMarkup () {
- const itemsList = Object.entries(this._groups)
- .map(([id, { title, items }]) => {
- let markup = '';
- const sectionId = `section-${id}`;
-
- if (title) {
- markup += `- ${title} -
`; - } - - markup += this._getListMarkup(id, items); - - return markup; - }); - - return itemsList.join(''); - } - - _getListMarkup (parentId, items, customClass = '') { - const itemsList = items.map(({ alias, name, children }) => { - const itemClass = 'nav__item'; - let itemsMarkup = ''; - const id = alias || name; - const sectionId = `section-${id}`; - - if (children) { - itemsMarkup = this._getListMarkup(id, children, 'nav__list--inner'); - } - - return `- ${this._data.name} - -
`); - } - - _getLinkElement () { - const link = this._data.link; - - if (!link) { - return ''; - } - - var text = link.replace('http://www.', ''); - - return createElement(`${text}`); - } - - _getDescElement () { - if (!this._data.desc) { - return ''; - } - - return createElement(`${this._data.desc}
`);
- }
-
- _getTargetElement () {
- if (!this._data.appliesTo) {
- return '';
- }
-
- return createElement(`Applies to: ${this._data.appliesTo}.
`); - } - - _getInitialValueElement () { - if (!this._data.initValue) { - return ''; - } - - return createElement(`Initial: ${this._data.initValue}.
`); - } - - _getValuesElement () { - const { values, desc } = this._data; - if (!values) { - return ''; - } - - let markup = ''; - const title = getPlurals(values.length, ['Value', 'Values']); - const isTitleHidden = !desc; - - for (const { name, alias, desc } of values) { - const id = alias || `${this.id}-${name}`; - - markup += `
-
- `);
- }
-}
diff --git a/src/js/components/styles-controller.js b/src/js/components/styles-controller.js
deleted file mode 100644
index 126b785..0000000
--- a/src/js/components/styles-controller.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { createElement } from '../helpers';
-
-export class StylesController {
- constructor ({
- data,
- current,
- codesElement,
- classList
- }) {
- this._data = data;
- this._current = current;
- this._classList = classList;
- this._stylesElement = this._getStylesElement();
- this._codesElement = codesElement;
- this._propNames = this._current.propNames;
- this._setStyles();
- }
-
- updateStyles (current) {
- this._current = current;
- this._setStyles();
- }
-
- _getStylesElement () {
- const id = this._data.alias || this._data.name;
- const element = createElement(``);
- document.head.append(element);
-
- return element;
- }
-
- _getStyles () {
- const rules = this._data.cssRules;
- const parentClass = `.${this._classList.join(' ')}`;
- let visibleStyles = '';
- let hiddenStyles = '';
-
- if (!rules) {
- return {};
- }
-
- for (const { selector, props, valueId } of rules) {
- const propsListHidden = [];
- let propsListVisible = [];
- const hiddenSelector = [parentClass, selector].join(' ');
-
- if (valueId && valueId !== this._current.id) {
- continue;
- }
-
- for (let [name, value] of Object.entries(props)) {
- const valueByKey = this._current.valuesByKey[name];
-
- if (valueByKey) {
- value = valueByKey;
- }
-
- if (typeof value === 'string' && value.includes('\n')) {
- const spaces = ' ';
- value = value.replace(/\s{2,}/g, `\n${spaces}`);
- value = `\n${spaces}${value}`;
- }
-
- let propString = `${name}: ${value};\n`;
-
- propsListHidden.push(propString);
-
- if (this._propNames.includes(name)) {
- propString = `${propString}`;
- }
-
- propsListVisible.push(propString);
- }
-
- propsListVisible = propsListVisible
- .map(prop => {
- return (
- `${title}
-- ${markup}
${prop}
`
- );
- });
-
- hiddenStyles += `${hiddenSelector} {\n${propsListHidden.join('')}}\n`;
- visibleStyles += `${selector} {${propsListVisible.join('')}}`; - } - - return { - visibleStyles, - hiddenStyles - }; - } - - _setStyles () { - this.styles = this._getStyles(); - this._stylesElement.innerHTML = this.styles.hiddenStyles; - this._codesElement.innerHTML = this.styles.visibleStyles; - } -} diff --git a/src/js/components/theme-switcher.js b/src/js/components/theme-switcher.js deleted file mode 100644 index 60f375d..0000000 --- a/src/js/components/theme-switcher.js +++ /dev/null @@ -1,48 +0,0 @@ -/* global STORAGE_KEY */ - -const themes = [ - 'sunny', - 'seagreen', - 'winter', - 'warm', - 'brown', - 'gray' -]; - -export class ThemeSwitcher { - constructor () { - this._lsKey = STORAGE_KEY; - this._counter = 0; - this._theme = this._getTheme(); - this._control = document.querySelector('.theme-control'); - - this._controlOnClickHandler = this._controlOnClickHandler.bind(this); - - this._control.addEventListener('click', this._controlOnClickHandler); - } - - setTheme () { - document.body.dataset.theme = this._theme; - localStorage.setItem(this._lsKey, this._theme); - } - - _controlOnClickHandler () { - this._counter++; - - if (this._counter > themes.length - 1) { - this._counter = 0; - } - - this._theme = themes[this._counter]; - - this.setTheme(); - } - - _getTheme () { - let theme = localStorage.getItem(this._lsKey); - theme = theme || 'seagreen'; - this._counter = themes.indexOf(theme); - - return theme; - } -} diff --git a/src/js/helpers/createElement.js b/src/js/helpers/createElement.js deleted file mode 100644 index 4573846..0000000 --- a/src/js/helpers/createElement.js +++ /dev/null @@ -1,15 +0,0 @@ -// https://grrr.tech/posts/create-dom-node-from-html-string/ - -const hasSupport = 'content' in document.createElement('template'); - -export const createElement = (str) => { - if (hasSupport) { - const template = document.createElement('template'); - template.innerHTML = str; - return template.content.firstElementChild; - } - - const template = document.createElement('div'); - template.innerHTML = str; - return template.firstElementChild; -}; diff --git a/src/js/helpers/debounce.js b/src/js/helpers/debounce.js deleted file mode 100644 index 5f3eb3c..0000000 --- a/src/js/helpers/debounce.js +++ /dev/null @@ -1,27 +0,0 @@ -// Source: https://davidwalsh.name/javascript-debounce-function - -// Returns a function, that, as long as it continues to be invoked, will not -// be triggered. The function will be called after it stops being called for -// N milliseconds. If `immediate` is passed, trigger the function on the -// leading edge, instead of the trailing. -export function debounce (func, wait, immediate) { - let timeout; - - return function () { - const context = this; - const args = arguments; - - const later = function () { - timeout = null; - if (!immediate) func.apply(context, args); - }; - - const callNow = immediate && !timeout; - - clearTimeout(timeout); - - timeout = setTimeout(later, wait); - - if (callNow) func.apply(context, args); - }; -} diff --git a/src/js/helpers/getCellsQuantity.js b/src/js/helpers/getCellsQuantity.js deleted file mode 100644 index 8c86206..0000000 --- a/src/js/helpers/getCellsQuantity.js +++ /dev/null @@ -1,18 +0,0 @@ -const getQuantityFromString = (str) => { - // Remove named lines - str = str.replace(/\[[^[]{0,}\]/g, ''); - str = str.replace(/0px/g, ''); - - const items = str - .split(' ') - .filter(item => item.trim()); - - return items.length; -}; - -export const getCellsQuantity = (styles) => { - const rows = styles.gridTemplateRows; - const columns = styles.gridTemplateColumns; - - return getQuantityFromString(rows) * getQuantityFromString(columns); -}; diff --git a/src/js/helpers/getPlurals.js b/src/js/helpers/getPlurals.js deleted file mode 100644 index 32672c8..0000000 --- a/src/js/helpers/getPlurals.js +++ /dev/null @@ -1,7 +0,0 @@ -export function getPlurals (count, variants) { - if (count === 1) { - return variants[0]; - } - - return variants[1]; -}; diff --git a/src/js/helpers/index.js b/src/js/helpers/index.js deleted file mode 100644 index 5233956..0000000 --- a/src/js/helpers/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export { createElement } from './createElement'; -export { isVisible } from './isVisible'; -export { debounce } from './debounce'; -export { getPlurals } from './getPlurals'; -export { getCellsQuantity } from './getCellsQuantity'; diff --git a/src/js/helpers/isVisible.js b/src/js/helpers/isVisible.js deleted file mode 100644 index 7d239c3..0000000 --- a/src/js/helpers/isVisible.js +++ /dev/null @@ -1,12 +0,0 @@ -export function isVisible (elem) { - const coords = elem.getBoundingClientRect(); - const windowHeight = document.documentElement.clientHeight; - - // верхняя граница elem в пределах видимости ИЛИ нижняя граница видима - const topVisible = coords.top > 0 && coords.top < windowHeight / 2; - const bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; - // элемент начинается за пределами экрана - const inView = coords.top <= 0 && coords.bottom >= windowHeight; - - return topVisible || bottomVisible || inView; -} diff --git a/src/scss/blocks/demo.scss b/src/scss/blocks/demo.scss deleted file mode 100644 index 9bcd734..0000000 --- a/src/scss/blocks/demo.scss +++ /dev/null @@ -1,172 +0,0 @@ -.demo { - margin: 0 0 2rem; -} - -.demo__control { - margin: 0 .5rem .5rem 0; - padding: .3rem .7rem; - border: 0; - border-radius: 3px; - background: var(--control-bg); - white-space: pre-line; - color: var(--control-color); - - &--current { - background: var(--control-current-bg); - color: var(--control-current-color); - } -} - -.demo__content { - display: grid; - grid-gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); -} - -.demo__view { - min-height: 275px; - padding: .5rem; - box-sizing: border-box; - border: 2px solid var(--col-3); - - @media ( max-width: 960px ) { - width: 100%; - margin-right: 0; - } -} - -.demo__code { - position: relative; - padding: 1rem; - box-sizing: border-box; - background: var(--code-bg); - border-radius: .75rem; - white-space: pre-wrap; - font-family: monospace; - color: var(--code-color); -} - -.demo__code-prop { - margin-left: 1rem; -} - -.parent { - position: relative; - grid-auto-columns: 1fr; - overflow: hidden; - border: 1px dashed var(--parent-border); - - &--grid-view { - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 0; - /* stylelint-disable-next-line declaration-no-important */ - justify-items: stretch !important; - grid-auto-flow: dense; - pointer-events: none; - } -} - -.child { - position: relative; - min-width: 2.5rem; - min-height: 2.5rem; - padding: .5rem; - box-sizing: border-box; - background-color: var(--demo-bg); - border: 1px solid var(--demo-border); - - /* stylelint-disable declaration-no-important */ - .parent--grid-view & { - grid-row: auto !important; - grid-column: auto !important; - justify-self: stretch !important; - align-self: stretch !important; - background: none !important; - box-shadow: 0 0 0 1px var(--demo-color) inset; - border-color: transparent; - opacity: .25; - color: transparent; - /* stylelint-enable declaration-no-important */ - } - - &--rtl { - direction: rtl; - } - - &--huge-text { - font-size: 30px; - } -} - -.child::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: var(--demo-color); - mask-repeat: no-repeat; - mask-position: 50% 50%; - - .parent--fade-children & { - opacity: .15; - } - - .parent--grid-view & { - content: none; - } -} - -.child CODE { - background: var(--demo-code-bg); -} - -.child--featured CODE { - background: var(--demo-code-bg-featured); -} - -.demo__content--highlight-featured .child--featured { - background-color: var(--demo-featured-bg); -} - -.child:nth-child(1)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 1 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(2)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 2 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(3)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 3 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(4)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 4 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(5)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 5 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(6)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 6 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(7)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 7 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(8)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 8 %3C/text%3E%3C/svg%3E"); -} - -.child:nth-child(9)::before { - mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 9 %3C/text%3E%3C/svg%3E"); -} diff --git a/src/scss/blocks/group.scss b/src/scss/blocks/group.scss deleted file mode 100644 index 7a7b180..0000000 --- a/src/scss/blocks/group.scss +++ /dev/null @@ -1,44 +0,0 @@ -.group { - padding-top: 1.75rem; - - &--hidden-title { - padding-top: 0; - } - - &__title { - margin: 0 0 1em; - font-size: 2em; - font-weight: 500; - color: var(--group-title-color); - - @media ( max-width: 768px ) { - margin-bottom: .5em; - } - } - - &__link { - display: inline-block; - margin: 0 0 2em; - - @media ( max-width: 768px ) { - margin-bottom: 1.5em; - } - } - - TABLE { - margin: auto; - } - - TH, - TD { - padding: .5em; - - @media ( max-width: 375px ) { - padding: .5em .15em; - } - } - - TR:not(:last-child) { - border-bottom: 1px solid var(--col-3); - } -} diff --git a/src/scss/blocks/nav.scss b/src/scss/blocks/nav.scss deleted file mode 100644 index 590c49c..0000000 --- a/src/scss/blocks/nav.scss +++ /dev/null @@ -1,83 +0,0 @@ -.nav { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - box-sizing: border-box; - overflow: hidden; - - &__subheader { - margin-top: 1rem; - margin-bottom: 1rem; - font-size: 1.45rem; - line-height: 1; - color: var(--aside-header-color); - - @media ( min-width: 1130px ) { - font-size: 1.5rem; - } - } - - &__subheader-link { - text-decoration: none; - color: inherit; - transition: all .15s; - - &:hover { - color: inherit; - opacity: .65; - } - } - - &__list { - margin: 0 1.25rem; - } - - &__list--inner { - margin-top: .6rem; - - @media ( min-width: 900px ) { - margin-top: .8rem; - } - } - - &__item { - margin-bottom: .6rem; - - @media ( min-width: 900px ) { - margin-bottom: .8rem; - } - } - - &__link { - position: relative; - display: block; - color: var(--nav-link); - - &:hover { - text-decoration: none; - color: var(--nav-link-hover); - } - } - - &__item--current > &__link { - text-decoration: none; - font-weight: bold; - color: var(--nav-link-current); - } -} - -/* Marker ---------------------------------------------- */ -.nav__marker { - position: absolute; - z-index: 2; - margin-top: -.45rem; - right: -1rem; - width: 2rem; - height: 2rem; - border-radius: 50%; - background: var(--nav-marker-bg); - box-shadow: 0 0 0 10px var(--nav-marker-border); - transition: top .5s; -} diff --git a/src/scss/blocks/project-links.scss b/src/scss/blocks/project-links.scss deleted file mode 100644 index 7bce865..0000000 --- a/src/scss/blocks/project-links.scss +++ /dev/null @@ -1,43 +0,0 @@ -.project-links { - display: flex; - margin-top: 2rem; - margin-bottom: 1rem; - padding-left: 2rem; - padding-right: 2rem; - justify-content: center; -} - -.project-link { - position: relative; - width: 1.75rem; - height: 1.75rem; - margin: 0 1rem; - text-indent: -1000px; - overflow: hidden; - transition: color .25s; - color: var(--project-icon); - - &:hover { - color: var(--project-icon-hover); - } - - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: currentColor; - mask-repeat: no-repeat; - mask-position: 50% 50%; - } - - &--git::before { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z'%3E%3C/path%3E%3C/svg%3E"); - } - - &--twitter::before { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z'%3E%3C/path%3E%3C/svg%3E"); - } -} diff --git a/src/scss/blocks/prop.scss b/src/scss/blocks/prop.scss deleted file mode 100644 index e61c9e0..0000000 --- a/src/scss/blocks/prop.scss +++ /dev/null @@ -1,92 +0,0 @@ -.prop { - display: block; - width: 100%; - min-height: 100vh; - padding-top: 1rem; - padding-bottom: 1rem; - box-sizing: border-box; - border-bottom: 1px dotted var(--prop-border); - - &--child, - &--has-children { - min-height: 0; - } - - &__title { - margin-top: .75rem; - font-size: 1.7em; - font-weight: 470; - color: var(--prop-title-color); - } - - &--child &__title { - margin-top: 1rem; - font-size: 1.4em; - color: var(--prop-values-title-color); - } - - &__link { - display: inline-block; - margin: 0 0 2rem; - } - - UL { - list-style-type: disc; - padding-left: 2rem; - } - - CODE { - display: inline-block; - padding: 0 2px; - border-radius: 3px; - background: var(--code-bg); - } - - PRE { - margin: 1em 0; - white-space: normal; - - CODE { - display: block; - width: fit-content; - white-space: pre-line; - padding: 4px; - } - } -} - -/* Values */ - -.prop-values__title { - margin-bottom: 0; - font-size: 1.4em; - color: var(--prop-values-title-color); -} - -.prop-values__list { - margin-left: 1rem; - - .prop-values--title-hidden & { - margin-left: 0; - margin-top: 0; - } - - @media ( max-width: 768px ) { - margin-left: 0; - } -} - -.prop-values__term { - font-weight: bold; - color: var(--term-color); -} - -.prop-values__desc { - margin-top: .5rem; - margin-bottom: 1rem; - margin-left: 2rem; - - @media ( max-width: 768px ) { - margin-left: 1rem; - } -} diff --git a/src/scss/blocks/theme-control.scss b/src/scss/blocks/theme-control.scss deleted file mode 100644 index 68a377b..0000000 --- a/src/scss/blocks/theme-control.scss +++ /dev/null @@ -1,11 +0,0 @@ -.theme-control { - position: absolute; - right: .5rem; - top: .5rem; - z-index: 1; - padding: .2rem .4rem; - border-radius: 5px; - background: transparent; - border: 2px solid; - color: var(--theme-control-color); -} diff --git a/src/scss/colors-map.scss b/src/scss/colors-map.scss deleted file mode 100644 index f1f2bb4..0000000 --- a/src/scss/colors-map.scss +++ /dev/null @@ -1,56 +0,0 @@ -BODY { - --body-bg: var(--col-1); - --body-color: var(--col-5-darker); - --link-color: var(--col-5); - --link-color-hover: var(--col-5-lighter); - - --aside-bg: var(--col-5); - --aside-header-color: var(--col-6-dark); - - --nav-marker-bg: var(--body-bg); - --nav-marker-border: var(--col-4); - - --nav-link: var(--col-3-lighter); - --nav-link-hover: var(--col-2); - --nav-link-current: var(--col-1); - - --nav-scrollbar-bg: var(--nav-marker-border); - --nav-thumb-bg: var(--nav-link); - - --mark-bg: var(--col-4-dark); - --mark-color: var(--col-2-lighter); - - --code-bg: var(--col-2); - --code-color: var(--col-5); - - --term-color: var(--col-4-darker); - - --control-bg: var(--col-4); - --control-color: var(--col-2); - - --control-current-bg: var(--col-5); - --control-current-color: var(--col-1); - - --parent-border: var(--col-4); - - --group-title-color: var(--col-5); - - --prop-border: var(--col-4); - --prop-title-color: var(--col-4); - --prop-values-title-color: var(--col-5-lightest); - - --demo-bg: var(--col-3); - --demo-featured-bg: var(--col-2-darker); - --demo-border: var(--col-1); - --demo-color: var(--col-5); - --demo-code-bg: var(--col-1-darker); - --demo-code-bg-featured: var(--col-2-lightest); - - --note-bg: var(--col-2); - --note-border: var(--col-3); - - --project-icon: var(--col-5-darkest); - --project-icon-hover: var(--nav-link); - - --theme-control-color: var(--col-4); -} diff --git a/src/scss/colors.scss b/src/scss/colors.scss deleted file mode 100644 index f8973ef..0000000 --- a/src/scss/colors.scss +++ /dev/null @@ -1,38 +0,0 @@ -:root { - --col-1-darkest: #D1D1D1; - --col-1-darker: #E0E0E0; - --col-1-dark: #F0F0F0; - --col-1: #FFF; - --col-2-darkest: #AFAFAF; - --col-2-darker: #BEBEBE; - --col-2-dark: #CECECE; - --col-2: #DDD; - --col-2-light: #ECECEC; - --col-2-lighter: #FCFCFC; - --col-3-darkest: #5A5A5A; - --col-3-darker: #696969; - --col-3-dark: #797979; - --col-3: #888; - --col-3-light: #979797; - --col-3-lighter: #A7A7A7; - --col-3-lightest: #B6B6B6; - --col-4-darkest: #272727; - --col-4-darker: #363636; - --col-4-dark: #464646; - --col-4: #555; - --col-4-light: #646464; - --col-4-lighter: #747474; - --col-4-lightest: #838383; - --col-5-darkest: #050505; - --col-5-darker: #141414; - --col-5-dark: #242424; - --col-5: #333; - --col-5-light: #424242; - --col-5-lighter: #525252; - --col-5-lightest: #616161; - --col-6-dark: #020202; - --col-6: #111; - --col-6-light: #202020; - --col-6-lighter: #303030; - --col-6-lightest: #3F3F3F; -} diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss deleted file mode 100644 index 913cd70..0000000 --- a/src/scss/fonts.scss +++ /dev/null @@ -1,27 +0,0 @@ -@font-face { - font-family: RobotoSlabVariable; - src: url("../fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf") format("truetype"); - font-weight: 1 999; - font-display: swap; -} - -@font-face { - font-family: RobotoSlab; - src: url("../fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf") format("truetype"); - font-weight: 400; - font-display: swap; -} - -@font-face { - font-family: RobotoSlab; - src: url("../fonts/Roboto_Slab/static/RobotoSlab-SemiBold.ttf") format("truetype"); - font-weight: 600; - font-display: swap; -} - -@font-face { - font-family: RobotoSlab; - src: url("../fonts/Roboto_Slab/static/RobotoSlab-Bold.ttf") format("truetype"); - font-weight: 900; - font-display: swap; -} diff --git a/src/scss/global/base.scss b/src/scss/global/base.scss deleted file mode 100644 index 2433c5a..0000000 --- a/src/scss/global/base.scss +++ /dev/null @@ -1,128 +0,0 @@ -BODY { - display: flex; - min-height: 100vh; - background: var(--body-bg); - font: 16px/1.4 Georgia, serif; - color: var(--body-color); -} - -A { - transition: all .25s; - color: var(--link-color); - - &:hover { - text-decoration: none; - color: var(--link-color-hover); - } - - &[href*="http"]::after { - // disable icon on external links - // content: ""; - display: inline-block; - width: .9em; - height: .9em; - margin-left: .1em; - vertical-align: middle; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L8.7 16.71a1 1 0 1 1-1.4-1.42L17.58 5H14a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V6.41zM17 14a1 1 0 0 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h5a1 1 0 0 1 0 2H5v12h12v-5z'/%3E%3C/svg%3E"); - background: currentColor; - opacity: .5; - transition: inherit; - } - - &[href*="http"]:hover::after { - opacity: 1; - } -} - -.marked-link { - box-shadow: 0 0 0 2px; - border-radius: 3px; -} - -UL { - list-style-type: none; -} - -H1, -H2, -H3, -H4 { - margin-top: 0; - font-family: RobotoSlab, Georgia, serif; - font-weight: 600; - - @supports (font-variation-settings: normal) { - font-family: RobotoSlabVariable, Georgia, serif; - } -} - -UL, -LI { - margin: 0; - padding: 0; -} - -DD + DT { - margin-top: 1rem; -} - -MARK { - box-shadow: - 0 0 0 2px var(--mark-bg), - 0 0 0 2px var(--mark-bg) inset; - background: var(--mark-bg); - color: var(--mark-color); -} - -PRE { - white-space: pre-line; -} - -DFN { - font-weight: bold; -} - -P:first-child { - margin-top: 0; -} - -.hidden-content { - display: none; -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: 0; - padding: 0; - clip: rect(0 0 0 0); - overflow: hidden; -} - -.note { - padding: 1em; - background: var(--note-bg); - border-left: 10px solid var(--note-border); - border-radius: 3px; -} - -.table-data--centered { - text-align: center; -} - -.self-link { - opacity: 0; - color: inherit; - - &::before { - content: "#"; - } - - DT:hover &, - H2:hover &, - H3:hover & { - opacity: 1; - } -} diff --git a/src/scss/global/layout.scss b/src/scss/global/layout.scss deleted file mode 100644 index de45eed..0000000 --- a/src/scss/global/layout.scss +++ /dev/null @@ -1,163 +0,0 @@ -.page-container { - display: flex; - width: 100%; - min-height: 100%; -} - -.page-main { - flex: 1; -} - -.page-aside, -.page-aside__content { - width: 23%; - min-width: 280px; - max-width: 350px; -} - -.page-aside { - --mob-collapsed-width: 40px; - --mob-expanded-width: 320px; - --mob-hidden-width: calc((var(--mob-expanded-width) - var(--mob-collapsed-width)) * -1); - --stripe-width: 10px; - --duration: .2s; - - position: relative; - order: -1; - z-index: 2; - flex-shrink: 0; - - @media ( max-width: 900px ) { - min-width: 0; - width: var(--mob-collapsed-width); - } -} - -.page-aside__content { - position: fixed; - top: 0; - bottom: 0; - overflow: auto; - background: var(--aside-bg); - background-image: - linear-gradient( - to left, - var(--nav-marker-border), - var(--nav-marker-border) - ); - background-size: var(--stripe-width) 100%; - background-position: 100% 0; - background-repeat: no-repeat; - scrollbar-width: thin; - scrollbar-color: var(--nav-thumb-bg) var(--nav-scrollbar-bg); - - &::-webkit-scrollbar { - width: 10px; - } - - &::-webkit-scrollbar-track { - background: var(--nav-scrollbar-bg); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--nav-thumb-bg); - border-radius: 6px; - border: 3px solid var(--nav-scrollbar-bg); - } - - @media ( max-width: 900px ) { - --stripe-width: 6px; - - width: var(--mob-expanded-width); - transition: transform var(--duration); - - .page-aside--collapsed & { - transform: translateX(var(--mob-hidden-width)); - overflow: hidden; - - .nav { - opacity: 0; - } - } - - .nav__marker { - display: none; - } - } -} - -.page-aside__toggler { - --button-size: 2rem; - --offset: calc((var(--mob-expanded-width) - var(--button-size)) - 12px); - - display: none; - position: fixed; - z-index: 1; - top: 0; - bottom: 0; - left: 0; - transform: translateX(var(--offset)); - width: var(--button-size); - padding: 0; - border: 0; - outline: none; - background: none; - transition: transform var(--duration); - - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: var(--button-size); - height: var(--button-size); - margin: auto; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56.083'%3E%3Cpath d='M29.344 52.229c.875.886.875 2.31 0 3.191a2.214 2.214 0 0 1-3.158 0L.656 29.64a2.27 2.27 0 0 1 0-3.191L26.186.664a2.212 2.212 0 0 1 3.158 0 2.27 2.27 0 0 1 0 3.191L6.064 28.042l23.28 24.187z'%3E%3C/path%3E%3C/svg%3E"); - mask-repeat: no-repeat; - mask-position: 50% 50%; - background: var(--nav-link); - transition: transform var(--duration); - } - - .page-aside--collapsed & { - transform: translateX(0); - - &::before { - transform: rotate(180deg); - } - } - - @media ( max-width: 900px ) { - display: block; - } -} - -.page-aside__container { - padding: 1.5rem 1rem; - - @media ( min-width: 1200px ) { - padding-left: 2rem; - padding-right: 2rem; - } -} - -.page-aside__clarification { - margin-bottom: 1rem; - color: var(--nav-link); - - A { - color: inherit; - } -} - -.container { - padding-left: 1em; - padding-right: 1em; - box-sizing: border-box; - - @media ( min-width: 800px ) { - padding-left: 2em; - padding-right: 2em; - } -} diff --git a/src/scss/normalize.scss b/src/scss/normalize.scss deleted file mode 100644 index 8160feb..0000000 --- a/src/scss/normalize.scss +++ /dev/null @@ -1,426 +0,0 @@ -/* stylelint-disable */ - -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/src/scss/styles.scss b/src/scss/styles.scss deleted file mode 100644 index f4461a5..0000000 --- a/src/scss/styles.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "normalize"; -@import "fonts"; -@import "colors"; -@import "colors-map"; -@import "themes/gray"; -@import "themes/winter"; -@import "themes/seagreen"; -@import "themes/sunny"; -@import "themes/warm"; -@import "themes/brown"; -@import "global/base"; -@import "global/layout"; -@import "blocks/group"; -@import "blocks/prop"; -@import "blocks/demo"; -@import "blocks/nav"; -@import "blocks/project-links"; -@import "blocks/theme-control"; diff --git a/src/scss/themes/brown.scss b/src/scss/themes/brown.scss deleted file mode 100644 index c5e01f7..0000000 --- a/src/scss/themes/brown.scss +++ /dev/null @@ -1,56 +0,0 @@ -[data-theme="brown"] { - --col-1-darkest: hsl(50, 80%, 69%); - --col-1-darker: hsl(50, 80%, 76%); - --col-1-dark: hsl(50, 80%, 83%); - --col-1: hsl(50, 80%, 90%); - --col-1-light: hsl(50, 80%, 97%); - - --col-2-darkest: hsl(45, 75%, 59%); - --col-2-darker: hsl(45, 75%, 66%); - --col-2-dark: hsl(45, 75%, 73%); - --col-2: hsl(45, 75%, 80%); - --col-2-light: hsl(45, 75%, 87%); - --col-2-lighter: hsl(45, 75%, 94%); - - --col-3-darkest: hsl(41, 60%, 49%); - --col-3-darker: hsl(41, 60%, 56%); - --col-3-dark: hsl(41, 60%, 63%); - --col-3: hsl(41, 60%, 70%); - --col-3-light: hsl(41, 60%, 77%); - --col-3-lighter: hsl(41, 60%, 84%); - --col-3-lightest: hsl(41, 60%, 91%); - - --col-4-darkest: hsl(34, 33%, 24%); - --col-4-darker: hsl(34, 33%, 31%); - --col-4-dark: hsl(34, 33%, 38%); - --col-4: hsl(34, 33%, 45%); - --col-4-light: hsl(34, 33%, 52%); - --col-4-lighter: hsl(34, 33%, 59%); - --col-4-lightest: hsl(34, 33%, 66%); - - --col-5-darkest: hsl(32, 33%, 14%); - --col-5-darker: hsl(32, 33%, 21%); - --col-5-dark: hsl(32, 33%, 28%); - --col-5: hsl(32, 33%, 33%); - --col-5-light: hsl(32, 33%, 42%); - --col-5-lighter: hsl(32, 33%, 49%); - --col-5-lightest: hsl(32, 33%, 56%); - - --col-6-darker: hsl(32, 35%, 1%); - --col-6-dark: hsl(32, 35%, 8%); - --col-6: hsl(32, 35%, 15%); - --col-6-light: hsl(32, 35%, 22%); - --col-6-lighter: hsl(32, 35%, 29%); - --col-6-lightest: hsl(32, 35%, 36%); - - --project-icon: var(--col-6-darker); - --aside-header-color: var(--col-6-darker); - --control-bg: var(--col-4-dark); - --control-color: var(--col-2-light); - --control-current-bg: var(--col-5-darker); - - --demo-color: var(--col-5-darker); - --demo-featured-bg: var(--col-4-light); - --demo-code-bg: var(--col-2); - --demo-code-bg-featured: var(--col-3-dark); -} diff --git a/src/scss/themes/gray.scss b/src/scss/themes/gray.scss deleted file mode 100644 index 4b87899..0000000 --- a/src/scss/themes/gray.scss +++ /dev/null @@ -1,58 +0,0 @@ -[data-theme="gray"] { - --col-1-darkest: #D1D1D1; - --col-1-darker: #E0E0E0; - --col-1-dark: #F0F0F0; - --col-1: #FFF; - - --col-2-darkest: #AFAFAF; - --col-2-darker: #BEBEBE; - --col-2-dark: #CECECE; - --col-2: #DDD; - --col-2-light: #ECECEC; - --col-2-lighter: #FCFCFC; - - --col-3-darkest: #5A5A5A; - --col-3-darker: #696969; - --col-3-dark: #797979; - --col-3: #888; - --col-3-light: #979797; - --col-3-lighter: #A7A7A7; - --col-3-lightest: #B6B6B6; - - --col-4-darkest: #272727; - --col-4-darker: #363636; - --col-4-dark: #464646; - --col-4: #555; - --col-4-light: #646464; - --col-4-lighter: #747474; - --col-4-lightest: #838383; - - --col-5-darkest: #050505; - --col-5-darker: #141414; - --col-5-dark: #242424; - --col-5: #333; - --col-5-light: #424242; - --col-5-lighter: #525252; - --col-5-lightest: #616161; - - --col-6-dark: #020202; - --col-6: #111; - --col-6-light: #202020; - --col-6-lighter: #303030; - --col-6-lightest: #3F3F3F; - - --aside-bg: var(--col-3-lighter); - --nav-marker-border: var(--col-2-dark); - --nav-link: var(--col-4-darker); - --nav-link-hover: var(--col-6); - --nav-link-current: var(--col-6-dark); - --demo-bg: var(--col-2-dark); - - --control-bg: var(--col-4-light); - --control-color: var(--col-2-light); - --control-current-bg: var(--col-5-dark); - - --demo-featured-bg: var(--col-3-light); - --demo-code-bg: var(--col-1-dark); - --demo-code-bg-featured: var(--col-2-dark); -} diff --git a/src/scss/themes/seagreen.scss b/src/scss/themes/seagreen.scss deleted file mode 100644 index efa7dab..0000000 --- a/src/scss/themes/seagreen.scss +++ /dev/null @@ -1,62 +0,0 @@ -// $col-1: #CFF09E; -// $col-2: #A8DBA8; -// $col-3: #79BD9A; -// $col-4: #3B8686; -// $col-5: #0B486B; - -[data-theme="seagreen"] { - --col-1-darkest: #AEE65C; - --col-1-darker: #B9E972; - --col-1-dark: #C4ED88; - --col-1: #CFF09E; - --col-1-light: #DAF3B4; - --col-1-lighter: #E5F7CA; - --col-1-lightest: #F0FAE0; - - --col-2-darkest: #72C572; - --col-2-darker: #84CC84; - --col-2-dark: #96D496; - --col-2: #A8DBA8; - --col-2-light: #BAE3BA; - --col-2-lighter: #CCEACC; - --col-2-lightest: #DEF1DE; - - --col-3-darkest: #4D9C73; - --col-3-darker: #57AC80; - --col-3-dark: #68B58D; - --col-3: #79BD9A; - --col-3-light: #8AC5A7; - --col-3-lighter: #9BCEB4; - --col-3-lightest: #ACD6C1; - - --col-4-darkest: #245151; - --col-4-darker: #2B6262; - --col-4-dark: #337474; - --col-4: #3B8686; - --col-4-light: #439898; - --col-4-lighter: #4AA9A9; - --col-4-lightest: #58B5B5; - - --col-5-darkest: #041925; - --col-5-darker: #06293D; - --col-5-dark: #093854; - --col-5: #0B486B; - --col-5-light: #0D5782; - --col-5-lighter: #106799; - --col-5-lightest: #1276B0; - - --col-6-dark: #01090E; - --col-6: #041925; - --col-6-light: #06283C; - --col-6-lighter: #093853; - --col-6-lightest: #0B476A; - - --prop-title-color: var(--col-5-light); - --prop-values-title-color: var(--col-5-lighter); - --control-current-color: var(--col-1-lighter); - --control-color: var(--col-1-light); - --demo-featured-bg: var(--col-4); - --demo-color: var(--col-5-dark); - --demo-code-bg: var(--col-2); - --demo-code-bg-featured: var(--col-3); -} diff --git a/src/scss/themes/sunny.scss b/src/scss/themes/sunny.scss deleted file mode 100644 index 45e00a1..0000000 --- a/src/scss/themes/sunny.scss +++ /dev/null @@ -1,52 +0,0 @@ -[data-theme="sunny"] { - --col-1-darkest: #FFE867; - --col-1-darker: #FFEC80; - --col-1-dark: #FFF09A; - --col-1: #FFF4B3; - --col-1-light: #FFF7CD; - --col-1-lighter: #FFFBE6; - - --col-2-darkest: #ECA201; - --col-2-darker: #FEB009; - --col-2-dark: #FEB923; - --col-2: #FEC13C; - --col-2-light: #FEC956; - --col-2-lighter: #FED16F; - --col-2-lightest: #FED988; - - --col-3-darkest: #9E960E; - --col-3-darker: #B5AD10; - --col-3-dark: #CCC312; - --col-3: #E4DA14; - --col-3-light: #ECE225; - --col-3-lighter: #EEE53D; - --col-3-lightest: #F0E854; - - --col-4-darkest: #2B7268; - --col-4-darker: #328479; - --col-4-dark: #39978A; - --col-4: #40A99B; - --col-4-light: #49BAAB; - --col-4-lighter: #5BC1B3; - --col-4-lightest: #6EC8BC; - - --col-5-darkest: #312A1E; - --col-5-darker: #413728; - --col-5-dark: #514431; - --col-5: #61523B; - --col-5-light: #715F45; - --col-5-lighter: #816D4E; - --col-5-lightest: #917A58; - - --col-6-darkest: #020101; - --col-6-darker: #110F0B; - --col-6-dark: #211C14; - --col-6: #312A1E; - --col-6-light: #413828; - --col-6-lighter: #514531; - --col-6-lightest: #61533B; - - --mark-color: var(--col-1); - --control-color: var(--col-1-dark); - --code-bg: var(--col-2-light); -} diff --git a/src/scss/themes/warm.scss b/src/scss/themes/warm.scss deleted file mode 100644 index 5d7507f..0000000 --- a/src/scss/themes/warm.scss +++ /dev/null @@ -1,60 +0,0 @@ -[data-theme="warm"] { - --col-1-darkest: hsl(40, 80%, 61%); - --col-1-darker: hsl(40, 80%, 68%); - --col-1-dark: hsl(40, 80%, 75%); - --col-1: hsl(40, 80%, 82%); - --col-1-light: hsl(40, 80%, 89%); - --col-1-lighter: hsl(40, 80%, 96%); - - --col-2-darkest: hsl(30, 80%, 50%); - --col-2-darker: hsl(30, 80%, 57%); - --col-2-dark: hsl(30, 80%, 64%); - --col-2: hsl(30, 80%, 71%); - --col-2-light: hsl(30, 80%, 78%); - --col-2-lighter: hsl(30, 80%, 85%); - --col-2-lightest: hsl(30, 80%, 92%); - - --col-3-darkest: hsl(358, 60%, 43%); - --col-3-darker: hsl(358, 60%, 50%); - --col-3-dark: hsl(358, 60%, 57%); - --col-3: hsl(358, 60%, 64%); - --col-3-light: hsl(358, 60%, 71%); - --col-3-lighter: hsl(358, 60%, 78%); - --col-3-lightest: hsl(358, 60%, 85%); - - --col-4-darkest: hsl(345, 45%, 12.9%); - --col-4-darker: hsl(345, 45%, 19.9%); - --col-4-dark: hsl(345, 45%, 26.9%); - --col-4: hsl(345, 45%, 33.9%); - --col-4-light: hsl(345, 45%, 40.9%); - --col-4-lighter: hsl(345, 45%, 47.9%); - --col-4-lightest: hsl(345, 45%, 54.9%); - - --col-5-darkest: hsl(340, 50%, 3.9%); - --col-5-darker: hsl(340, 50%, 10.9%); - --col-5-dark: hsl(340, 50%, 17.9%); - --col-5: hsl(340, 50%, 24.9%); - --col-5-light: hsl(340, 50%, 31.9%); - --col-5-lighter: hsl(340, 50%, 38.9%); - --col-5-lightest: hsl(340, 50%, 45.9%); - - --col-6-dark: hsl(337, 71.7%, 3.9%); - --col-6: hsl(337, 71.7%, 10.9%); - --col-6-light: hsl(337, 71.7%, 17.9%); - --col-6-lighter: hsl(337, 71.7%, 24.9%); - --col-6-lightest: hsl(337, 71.7%, 31.9%); - - --body-bg: var(--col-1); - --body-color: var(--col-6-dark); - --nav-marker-bg: var(--body-bg); - --aside-bg: var(--col-5-light); - --code-bg: var(--col-2-light); - --nav-marker-border: var(--col-4-lighter); - - --control-color: var(--col-2-light); - --control-bg: var(--col-4-light); - - --demo-featured-bg: var(--col-4-lighter); - --demo-code-bg: var(--col-3-light); - --demo-code-bg-featured: var(--col-3); -} diff --git a/src/scss/themes/winter.scss b/src/scss/themes/winter.scss deleted file mode 100644 index 26767be..0000000 --- a/src/scss/themes/winter.scss +++ /dev/null @@ -1,53 +0,0 @@ -[data-theme="winter"] { - --col-1-darkest: #D9BB83; - --col-1-darker: #E1CA9E; - --col-1-dark: #EAD9BA; - --col-1: #F2E8D5; - --col-1-light: #FAF7F0; - - --col-2-darkest: #E0B763; - --col-2-darker: #E6C581; - --col-2-dark: #ECD29F; - --col-2: #F2E0BD; - --col-2-light: #F8EEDB; - --col-2-lighter: #FEFCF9; - - --col-3-darkest: #E6693C; - --col-3-darker: #EA825C; - --col-3-dark: #EE9A7B; - --col-3: #F2B29B; - --col-3-light: #F6CABA; - --col-3-lighter: #FAE3DA; - --col-3-lightest: #FEFBFA; - - --col-4-darkest: #122B3A; - --col-4-darker: #1A3F55; - --col-4-dark: #235371; - --col-4: #2B678C; - --col-4-light: #337BA7; - --col-4-lighter: #3C8FC3; - --col-4-lightest: #579FCB; - - --col-5-darkest: #030609; - --col-5-darker: #0C1923; - --col-5-dark: #152C3E; - --col-5: #1E3E59; - --col-5-light: #275174; - --col-5-lighter: #30648E; - --col-5-lightest: #3977A9; - - --col-6-dark: #050B10; - --col-6: #0C1923; - --col-6-light: #132736; - --col-6-lighter: #193449; - --col-6-lightest: #20425C; - - --nav-link: var(--col-2-darker); - --aside-bg: var(--col-4-dark); - - --control-bg: var(--col-4-light); - --control-current-bg: var(--col-5-dark); - - --demo-code-bg: var(--col-3-light); - --demo-code-bg-featured: var(--col-2-dark); -} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7b170ea --- /dev/null +++ b/styles.css @@ -0,0 +1,2 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@font-face{font-family:RobotoSlabVariable;src:url(/flex-cheatsheet/RobotoSlab-VariableFont_wght.ttf) format("truetype");font-weight:1 999;font-display:swap}@font-face{font-family:RobotoSlab;src:url(/flex-cheatsheet/RobotoSlab-Regular.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:RobotoSlab;src:url(/flex-cheatsheet/RobotoSlab-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}@font-face{font-family:RobotoSlab;src:url(/flex-cheatsheet/RobotoSlab-Bold.ttf) format("truetype");font-weight:900;font-display:swap}:root{--col-1-darkest: #D1D1D1;--col-1-darker: #E0E0E0;--col-1-dark: #F0F0F0;--col-1: #FFF;--col-2-darkest: #AFAFAF;--col-2-darker: #BEBEBE;--col-2-dark: #CECECE;--col-2: #DDD;--col-2-light: #ECECEC;--col-2-lighter: #FCFCFC;--col-3-darkest: #5A5A5A;--col-3-darker: #696969;--col-3-dark: #797979;--col-3: #888;--col-3-light: #979797;--col-3-lighter: #A7A7A7;--col-3-lightest: #B6B6B6;--col-4-darkest: #272727;--col-4-darker: #363636;--col-4-dark: #464646;--col-4: #555;--col-4-light: #646464;--col-4-lighter: #747474;--col-4-lightest: #838383;--col-5-darkest: #050505;--col-5-darker: #141414;--col-5-dark: #242424;--col-5: #333;--col-5-light: #424242;--col-5-lighter: #525252;--col-5-lightest: #616161;--col-6-dark: #020202;--col-6: #111;--col-6-light: #202020;--col-6-lighter: #303030;--col-6-lightest: #3F3F3F}BODY{--body-bg: var(--col-1);--body-color: var(--col-5-darker);--link-color: var(--col-5);--link-color-hover: var(--col-5-lighter);--aside-bg: var(--col-5);--aside-header-color: var(--col-6-dark);--nav-marker-bg: var(--body-bg);--nav-marker-border: var(--col-4);--nav-link: var(--col-3-lighter);--nav-link-hover: var(--col-2);--nav-link-current: var(--col-1);--nav-scrollbar-bg: var(--nav-marker-border);--nav-thumb-bg: var(--nav-link);--mark-bg: var(--col-4-dark);--mark-color: var(--col-2-lighter);--code-bg: var(--col-2);--code-color: var(--col-5);--term-color: var(--col-4-darker);--control-bg: var(--col-4);--control-color: var(--col-2);--control-current-bg: var(--col-5);--control-current-color: var(--col-1);--parent-border: var(--col-4);--group-title-color: var(--col-5);--prop-border: var(--col-4);--prop-title-color: var(--col-4);--prop-values-title-color: var(--col-5-lightest);--demo-bg: var(--col-3);--demo-featured-bg: var(--col-2-darker);--demo-border: var(--col-1);--demo-color: var(--col-5);--demo-code-bg: var(--col-1-darker);--demo-code-bg-featured: var(--col-2-lightest);--note-bg: var(--col-2);--note-border: var(--col-3);--project-icon: var(--col-5-darkest);--project-icon-hover: var(--nav-link);--theme-control-color: var(--col-4)}[data-theme="gray"]{--col-1-darkest: #D1D1D1;--col-1-darker: #E0E0E0;--col-1-dark: #F0F0F0;--col-1: #FFF;--col-2-darkest: #AFAFAF;--col-2-darker: #BEBEBE;--col-2-dark: #CECECE;--col-2: #DDD;--col-2-light: #ECECEC;--col-2-lighter: #FCFCFC;--col-3-darkest: #5A5A5A;--col-3-darker: #696969;--col-3-dark: #797979;--col-3: #888;--col-3-light: #979797;--col-3-lighter: #A7A7A7;--col-3-lightest: #B6B6B6;--col-4-darkest: #272727;--col-4-darker: #363636;--col-4-dark: #464646;--col-4: #555;--col-4-light: #646464;--col-4-lighter: #747474;--col-4-lightest: #838383;--col-5-darkest: #050505;--col-5-darker: #141414;--col-5-dark: #242424;--col-5: #333;--col-5-light: #424242;--col-5-lighter: #525252;--col-5-lightest: #616161;--col-6-dark: #020202;--col-6: #111;--col-6-light: #202020;--col-6-lighter: #303030;--col-6-lightest: #3F3F3F;--aside-bg: var(--col-3-lighter);--nav-marker-border: var(--col-2-dark);--nav-link: var(--col-4-darker);--nav-link-hover: var(--col-6);--nav-link-current: var(--col-6-dark);--demo-bg: var(--col-2-dark);--control-bg: var(--col-4-light);--control-color: var(--col-2-light);--control-current-bg: var(--col-5-dark);--demo-featured-bg: var(--col-3-light);--demo-code-bg: var(--col-1-dark);--demo-code-bg-featured: var(--col-2-dark)}[data-theme="winter"]{--col-1-darkest: #D9BB83;--col-1-darker: #E1CA9E;--col-1-dark: #EAD9BA;--col-1: #F2E8D5;--col-1-light: #FAF7F0;--col-2-darkest: #E0B763;--col-2-darker: #E6C581;--col-2-dark: #ECD29F;--col-2: #F2E0BD;--col-2-light: #F8EEDB;--col-2-lighter: #FEFCF9;--col-3-darkest: #E6693C;--col-3-darker: #EA825C;--col-3-dark: #EE9A7B;--col-3: #F2B29B;--col-3-light: #F6CABA;--col-3-lighter: #FAE3DA;--col-3-lightest: #FEFBFA;--col-4-darkest: #122B3A;--col-4-darker: #1A3F55;--col-4-dark: #235371;--col-4: #2B678C;--col-4-light: #337BA7;--col-4-lighter: #3C8FC3;--col-4-lightest: #579FCB;--col-5-darkest: #030609;--col-5-darker: #0C1923;--col-5-dark: #152C3E;--col-5: #1E3E59;--col-5-light: #275174;--col-5-lighter: #30648E;--col-5-lightest: #3977A9;--col-6-dark: #050B10;--col-6: #0C1923;--col-6-light: #132736;--col-6-lighter: #193449;--col-6-lightest: #20425C;--nav-link: var(--col-2-darker);--aside-bg: var(--col-4-dark);--control-bg: var(--col-4-light);--control-current-bg: var(--col-5-dark);--demo-code-bg: var(--col-3-light);--demo-code-bg-featured: var(--col-2-dark)}[data-theme="seagreen"]{--col-1-darkest: #AEE65C;--col-1-darker: #B9E972;--col-1-dark: #C4ED88;--col-1: #CFF09E;--col-1-light: #DAF3B4;--col-1-lighter: #E5F7CA;--col-1-lightest: #F0FAE0;--col-2-darkest: #72C572;--col-2-darker: #84CC84;--col-2-dark: #96D496;--col-2: #A8DBA8;--col-2-light: #BAE3BA;--col-2-lighter: #CCEACC;--col-2-lightest: #DEF1DE;--col-3-darkest: #4D9C73;--col-3-darker: #57AC80;--col-3-dark: #68B58D;--col-3: #79BD9A;--col-3-light: #8AC5A7;--col-3-lighter: #9BCEB4;--col-3-lightest: #ACD6C1;--col-4-darkest: #245151;--col-4-darker: #2B6262;--col-4-dark: #337474;--col-4: #3B8686;--col-4-light: #439898;--col-4-lighter: #4AA9A9;--col-4-lightest: #58B5B5;--col-5-darkest: #041925;--col-5-darker: #06293D;--col-5-dark: #093854;--col-5: #0B486B;--col-5-light: #0D5782;--col-5-lighter: #106799;--col-5-lightest: #1276B0;--col-6-dark: #01090E;--col-6: #041925;--col-6-light: #06283C;--col-6-lighter: #093853;--col-6-lightest: #0B476A;--prop-title-color: var(--col-5-light);--prop-values-title-color: var(--col-5-lighter);--control-current-color: var(--col-1-lighter);--control-color: var(--col-1-light);--demo-featured-bg: var(--col-4);--demo-color: var(--col-5-dark);--demo-code-bg: var(--col-2);--demo-code-bg-featured: var(--col-3)}[data-theme="sunny"]{--col-1-darkest: #FFE867;--col-1-darker: #FFEC80;--col-1-dark: #FFF09A;--col-1: #FFF4B3;--col-1-light: #FFF7CD;--col-1-lighter: #FFFBE6;--col-2-darkest: #ECA201;--col-2-darker: #FEB009;--col-2-dark: #FEB923;--col-2: #FEC13C;--col-2-light: #FEC956;--col-2-lighter: #FED16F;--col-2-lightest: #FED988;--col-3-darkest: #9E960E;--col-3-darker: #B5AD10;--col-3-dark: #CCC312;--col-3: #E4DA14;--col-3-light: #ECE225;--col-3-lighter: #EEE53D;--col-3-lightest: #F0E854;--col-4-darkest: #2B7268;--col-4-darker: #328479;--col-4-dark: #39978A;--col-4: #40A99B;--col-4-light: #49BAAB;--col-4-lighter: #5BC1B3;--col-4-lightest: #6EC8BC;--col-5-darkest: #312A1E;--col-5-darker: #413728;--col-5-dark: #514431;--col-5: #61523B;--col-5-light: #715F45;--col-5-lighter: #816D4E;--col-5-lightest: #917A58;--col-6-darkest: #020101;--col-6-darker: #110F0B;--col-6-dark: #211C14;--col-6: #312A1E;--col-6-light: #413828;--col-6-lighter: #514531;--col-6-lightest: #61533B;--mark-color: var(--col-1);--control-color: var(--col-1-dark);--code-bg: var(--col-2-light)}[data-theme="warm"]{--col-1-darkest: hsl(40, 80%, 61%);--col-1-darker: hsl(40, 80%, 68%);--col-1-dark: hsl(40, 80%, 75%);--col-1: hsl(40, 80%, 82%);--col-1-light: hsl(40, 80%, 89%);--col-1-lighter: hsl(40, 80%, 96%);--col-2-darkest: hsl(30, 80%, 50%);--col-2-darker: hsl(30, 80%, 57%);--col-2-dark: hsl(30, 80%, 64%);--col-2: hsl(30, 80%, 71%);--col-2-light: hsl(30, 80%, 78%);--col-2-lighter: hsl(30, 80%, 85%);--col-2-lightest: hsl(30, 80%, 92%);--col-3-darkest: hsl(358, 60%, 43%);--col-3-darker: hsl(358, 60%, 50%);--col-3-dark: hsl(358, 60%, 57%);--col-3: hsl(358, 60%, 64%);--col-3-light: hsl(358, 60%, 71%);--col-3-lighter: hsl(358, 60%, 78%);--col-3-lightest: hsl(358, 60%, 85%);--col-4-darkest: hsl(345, 45%, 12.9%);--col-4-darker: hsl(345, 45%, 19.9%);--col-4-dark: hsl(345, 45%, 26.9%);--col-4: hsl(345, 45%, 33.9%);--col-4-light: hsl(345, 45%, 40.9%);--col-4-lighter: hsl(345, 45%, 47.9%);--col-4-lightest: hsl(345, 45%, 54.9%);--col-5-darkest: hsl(340, 50%, 3.9%);--col-5-darker: hsl(340, 50%, 10.9%);--col-5-dark: hsl(340, 50%, 17.9%);--col-5: hsl(340, 50%, 24.9%);--col-5-light: hsl(340, 50%, 31.9%);--col-5-lighter: hsl(340, 50%, 38.9%);--col-5-lightest: hsl(340, 50%, 45.9%);--col-6-dark: hsl(337, 71.7%, 3.9%);--col-6: hsl(337, 71.7%, 10.9%);--col-6-light: hsl(337, 71.7%, 17.9%);--col-6-lighter: hsl(337, 71.7%, 24.9%);--col-6-lightest: hsl(337, 71.7%, 31.9%);--body-bg: var(--col-1);--body-color: var(--col-6-dark);--nav-marker-bg: var(--body-bg);--aside-bg: var(--col-5-light);--code-bg: var(--col-2-light);--nav-marker-border: var(--col-4-lighter);--control-color: var(--col-2-light);--control-bg: var(--col-4-light);--demo-featured-bg: var(--col-4-lighter);--demo-code-bg: var(--col-3-light);--demo-code-bg-featured: var(--col-3)}[data-theme="brown"]{--col-1-darkest: hsl(50, 80%, 69%);--col-1-darker: hsl(50, 80%, 76%);--col-1-dark: hsl(50, 80%, 83%);--col-1: hsl(50, 80%, 90%);--col-1-light: hsl(50, 80%, 97%);--col-2-darkest: hsl(45, 75%, 59%);--col-2-darker: hsl(45, 75%, 66%);--col-2-dark: hsl(45, 75%, 73%);--col-2: hsl(45, 75%, 80%);--col-2-light: hsl(45, 75%, 87%);--col-2-lighter: hsl(45, 75%, 94%);--col-3-darkest: hsl(41, 60%, 49%);--col-3-darker: hsl(41, 60%, 56%);--col-3-dark: hsl(41, 60%, 63%);--col-3: hsl(41, 60%, 70%);--col-3-light: hsl(41, 60%, 77%);--col-3-lighter: hsl(41, 60%, 84%);--col-3-lightest: hsl(41, 60%, 91%);--col-4-darkest: hsl(34, 33%, 24%);--col-4-darker: hsl(34, 33%, 31%);--col-4-dark: hsl(34, 33%, 38%);--col-4: hsl(34, 33%, 45%);--col-4-light: hsl(34, 33%, 52%);--col-4-lighter: hsl(34, 33%, 59%);--col-4-lightest: hsl(34, 33%, 66%);--col-5-darkest: hsl(32, 33%, 14%);--col-5-darker: hsl(32, 33%, 21%);--col-5-dark: hsl(32, 33%, 28%);--col-5: hsl(32, 33%, 33%);--col-5-light: hsl(32, 33%, 42%);--col-5-lighter: hsl(32, 33%, 49%);--col-5-lightest: hsl(32, 33%, 56%);--col-6-darker: hsl(32, 35%, 1%);--col-6-dark: hsl(32, 35%, 8%);--col-6: hsl(32, 35%, 15%);--col-6-light: hsl(32, 35%, 22%);--col-6-lighter: hsl(32, 35%, 29%);--col-6-lightest: hsl(32, 35%, 36%);--project-icon: var(--col-6-darker);--aside-header-color: var(--col-6-darker);--control-bg: var(--col-4-dark);--control-color: var(--col-2-light);--control-current-bg: var(--col-5-darker);--demo-color: var(--col-5-darker);--demo-featured-bg: var(--col-4-light);--demo-code-bg: var(--col-2);--demo-code-bg-featured: var(--col-3-dark)}HTML{scroll-behavior:smooth}BODY{display:flex;min-height:100vh;background:var(--body-bg);font:16px/1.4 Georgia, serif;color:var(--body-color)}A{transition:all .25s;color:var(--link-color)}A:hover{text-decoration:none;color:var(--link-color-hover)}A[href*="http"]::after{display:inline-block;width:.9em;height:.9em;margin-left:.1em;vertical-align:middle;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L8.7 16.71a1 1 0 1 1-1.4-1.42L17.58 5H14a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V6.41zM17 14a1 1 0 0 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h5a1 1 0 0 1 0 2H5v12h12v-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L8.7 16.71a1 1 0 1 1-1.4-1.42L17.58 5H14a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V6.41zM17 14a1 1 0 0 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h5a1 1 0 0 1 0 2H5v12h12v-5z'/%3E%3C/svg%3E");background:currentColor;opacity:.5;transition:inherit}A[href*="http"]:hover::after{opacity:1}.marked-link{box-shadow:0 0 0 2px;border-radius:3px}UL{list-style-type:none}H1,H2,H3,H4{margin-top:0;font-family:RobotoSlab, Georgia, serif;font-weight:600}@supports (font-variation-settings: normal){H1,H2,H3,H4{font-family:RobotoSlabVariable, Georgia, serif}}UL,LI{margin:0;padding:0}DD+DT{margin-top:1rem}MARK{box-shadow:0 0 0 2px var(--mark-bg),0 0 0 2px var(--mark-bg) inset;background:var(--mark-bg);color:var(--mark-color)}PRE{white-space:pre-line}DFN{font-weight:bold}P:first-child{margin-top:0}.hidden-content{display:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}.note{padding:1em;background:var(--note-bg);border-left:10px solid var(--note-border);border-radius:3px}.table-data--centered{text-align:center}.self-link{opacity:0;color:inherit}.self-link::before{content:"#"}DT:hover .self-link,H2:hover .self-link,H3:hover .self-link{opacity:1}.page-container{display:flex;width:100%;min-height:100%}.page-main{flex:1}.page-aside,.page-aside__content{width:23%;min-width:280px;max-width:350px}.page-aside{--mob-collapsed-width: 40px;--mob-expanded-width: 320px;--mob-hidden-width: calc((var(--mob-expanded-width) - var(--mob-collapsed-width)) * -1);--stripe-width: 10px;--duration: .2s;position:relative;order:-1;z-index:2;flex-shrink:0}@media (max-width: 900px){.page-aside{min-width:0;width:var(--mob-collapsed-width)}}.page-aside__content{position:fixed;top:0;bottom:0;overflow:auto;background:var(--aside-bg);background-image:linear-gradient(to left, var(--nav-marker-border), var(--nav-marker-border));background-size:var(--stripe-width) 100%;background-position:100% 0;background-repeat:no-repeat;scrollbar-width:thin;scrollbar-color:var(--nav-thumb-bg) var(--nav-scrollbar-bg)}.page-aside__content::-webkit-scrollbar{width:10px}.page-aside__content::-webkit-scrollbar-track{background:var(--nav-scrollbar-bg)}.page-aside__content::-webkit-scrollbar-thumb{background-color:var(--nav-thumb-bg);border-radius:6px;border:3px solid var(--nav-scrollbar-bg)}@media (max-width: 900px){.page-aside__content{--stripe-width: 6px;width:var(--mob-expanded-width);transition:transform var(--duration)}.page-aside--collapsed .page-aside__content{transform:translateX(var(--mob-hidden-width));overflow:hidden}.page-aside--collapsed .page-aside__content .nav{opacity:0}.page-aside__content .nav__marker{display:none}}.page-aside__toggler{--button-size: 2rem;--offset: calc((var(--mob-expanded-width) - var(--button-size)) - 12px);display:none;position:fixed;z-index:1;top:0;bottom:0;left:0;transform:translateX(var(--offset));width:var(--button-size);padding:0;border:0;outline:none;background:none;transition:transform var(--duration)}.page-aside__toggler::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--button-size);height:var(--button-size);margin:auto;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56.083'%3E%3Cpath d='M29.344 52.229c.875.886.875 2.31 0 3.191a2.214 2.214 0 0 1-3.158 0L.656 29.64a2.27 2.27 0 0 1 0-3.191L26.186.664a2.212 2.212 0 0 1 3.158 0 2.27 2.27 0 0 1 0 3.191L6.064 28.042l23.28 24.187z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 56.083'%3E%3Cpath d='M29.344 52.229c.875.886.875 2.31 0 3.191a2.214 2.214 0 0 1-3.158 0L.656 29.64a2.27 2.27 0 0 1 0-3.191L26.186.664a2.212 2.212 0 0 1 3.158 0 2.27 2.27 0 0 1 0 3.191L6.064 28.042l23.28 24.187z'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;background:var(--nav-link);transition:transform var(--duration)}.page-aside--collapsed .page-aside__toggler{transform:translateX(0)}.page-aside--collapsed .page-aside__toggler::before{transform:rotate(180deg)}@media (max-width: 900px){.page-aside__toggler{display:block}}.page-aside__container{padding:1.5rem 1rem}@media (min-width: 1200px){.page-aside__container{padding-left:2rem;padding-right:2rem}}.page-aside__clarification{margin-bottom:1rem;color:var(--nav-link)}.page-aside__clarification A{color:inherit}.container{padding-left:1em;padding-right:1em;box-sizing:border-box}@media (min-width: 800px){.container{padding-left:2em;padding-right:2em}}.group{padding-top:1.75rem}.group--hidden-title{padding-top:0}.group__title{margin:0 0 1em;font-size:2em;font-weight:500;color:var(--group-title-color)}@media (max-width: 768px){.group__title{margin-bottom:.5em}}.group__link{display:inline-block;margin:0 0 2em}@media (max-width: 768px){.group__link{margin-bottom:1.5em}}.group TABLE{margin:auto}.group TH,.group TD{padding:.5em}@media (max-width: 375px){.group TH,.group TD{padding:.5em .15em}}.group TR:not(:last-child){border-bottom:1px solid var(--col-3)}.prop{display:block;width:100%;min-height:100vh;padding-top:1rem;padding-bottom:1rem;box-sizing:border-box;border-bottom:1px dotted var(--prop-border)}.prop--child,.prop--has-children{min-height:0}.prop__title{margin-top:.75rem;font-size:1.7em;font-weight:470;color:var(--prop-title-color)}.prop--child .prop__title{margin-top:1rem;font-size:1.4em;color:var(--prop-values-title-color)}.prop__link{display:inline-block;margin:0 0 2rem}.prop UL{list-style-type:disc;padding-left:2rem}.prop CODE{display:inline-block;padding:0 2px;border-radius:3px;background:var(--code-bg)}.prop PRE{margin:1em 0;white-space:normal}.prop PRE CODE{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:pre-line;padding:4px}.prop-values__title{margin-bottom:0;font-size:1.4em;color:var(--prop-values-title-color)}.prop-values__list{margin-left:1rem}.prop-values--title-hidden .prop-values__list{margin-left:0;margin-top:0}@media (max-width: 768px){.prop-values__list{margin-left:0}}.prop-values__term{font-weight:bold;color:var(--term-color)}.prop-values__desc{margin-top:.5rem;margin-bottom:1rem;margin-left:2rem}@media (max-width: 768px){.prop-values__desc{margin-left:1rem}}.demo{margin:0 0 2rem}.demo__control{margin:0 .5rem .5rem 0;padding:.3rem .7rem;border:0;border-radius:3px;background:var(--control-bg);white-space:pre-line;color:var(--control-color)}.demo__control--current{background:var(--control-current-bg);color:var(--control-current-color)}.demo__content{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}.demo__view{min-height:275px;padding:.5rem;box-sizing:border-box;border:2px solid var(--col-3)}@media (max-width: 960px){.demo__view{width:100%;margin-right:0}}.demo__code{position:relative;padding:1rem;box-sizing:border-box;background:var(--code-bg);border-radius:.75rem;white-space:pre-wrap;font-family:monospace;color:var(--code-color)}.demo__code-prop{margin-left:1rem}.parent{position:relative;grid-auto-columns:1fr;overflow:hidden;border:1px dashed var(--parent-border)}.parent--grid-view{position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;border:0;justify-items:stretch !important;grid-auto-flow:dense;pointer-events:none}.child{position:relative;min-width:2.5rem;min-height:2.5rem;padding:.5rem;box-sizing:border-box;background-color:var(--demo-bg);border:1px solid var(--demo-border)}.parent--grid-view .child{grid-row:auto !important;grid-column:auto !important;justify-self:stretch !important;align-self:stretch !important;background:none !important;box-shadow:0 0 0 1px var(--demo-color) inset;border-color:transparent;opacity:.25;color:transparent}.child--rtl{direction:rtl}.child--huge-text{font-size:30px}.child::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--demo-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%}.parent--fade-children .child::before{opacity:.15}.parent--grid-view .child::before{content:none}.child CODE{background:var(--demo-code-bg)}.child--featured CODE{background:var(--demo-code-bg-featured)}.demo__content--highlight-featured .child--featured{background-color:var(--demo-featured-bg)}.child:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 1 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 1 %3C/text%3E%3C/svg%3E")}.child:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 2 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 2 %3C/text%3E%3C/svg%3E")}.child:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 3 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 3 %3C/text%3E%3C/svg%3E")}.child:nth-child(4)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 4 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 4 %3C/text%3E%3C/svg%3E")}.child:nth-child(5)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 5 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 5 %3C/text%3E%3C/svg%3E")}.child:nth-child(6)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 6 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 6 %3C/text%3E%3C/svg%3E")}.child:nth-child(7)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 7 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 7 %3C/text%3E%3C/svg%3E")}.child:nth-child(8)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 8 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 8 %3C/text%3E%3C/svg%3E")}.child:nth-child(9)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 9 %3C/text%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.25em' style='font: 30px/1 Georgia, serif' fill='black' fill-opacity='.65'%3E 9 %3C/text%3E%3C/svg%3E")}.nav{position:relative;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.nav__subheader{margin-top:1rem;margin-bottom:1rem;font-size:1.45rem;line-height:1;color:var(--aside-header-color)}@media (min-width: 1130px){.nav__subheader{font-size:1.5rem}}.nav__subheader-link{text-decoration:none;color:inherit;transition:all .15s}.nav__subheader-link:hover{color:inherit;opacity:.65}.nav__list{margin:0 1.25rem}.nav__list--inner{margin-top:.6rem}@media (min-width: 900px){.nav__list--inner{margin-top:.8rem}}.nav__item{margin-bottom:.6rem}@media (min-width: 900px){.nav__item{margin-bottom:.8rem}}.nav__link{position:relative;display:block;color:var(--nav-link)}.nav__link:hover{text-decoration:none;color:var(--nav-link-hover)}.nav__item--current>.nav__link{text-decoration:none;font-weight:bold;color:var(--nav-link-current)}.nav__marker{position:absolute;z-index:2;margin-top:-.45rem;right:-1rem;width:2rem;height:2rem;border-radius:50%;background:var(--nav-marker-bg);box-shadow:0 0 0 10px var(--nav-marker-border);transition:top .5s}.project-links{display:flex;margin-top:2rem;margin-bottom:1rem;padding-left:2rem;padding-right:2rem;justify-content:center}.project-link{position:relative;width:1.75rem;height:1.75rem;margin:0 1rem;text-indent:-1000px;overflow:hidden;transition:color .25s;color:var(--project-icon)}.project-link:hover{color:var(--project-icon-hover)}.project-link::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%}.project-link--git::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z'%3E%3C/path%3E%3C/svg%3E")}.project-link--twitter::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z'%3E%3C/path%3E%3C/svg%3E")}.theme-control{position:absolute;right:.5rem;top:.5rem;z-index:1;padding:.2rem .4rem;border-radius:5px;background:transparent;border:2px solid;color:var(--theme-control-color)} + diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 3c8451e..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,53 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -const constants = require('./constants.js'); - -module.exports = () => { - return { - mode: 'development', - entry: './src/app.js', - output: { - filename: 'bundle.js', - path: path.resolve(__dirname, 'dist'), - publicPath: '/' - }, - module: { - rules: [ - { - test: /\.scss$/, - use: [ - 'style-loader', - 'css-loader', - 'postcss-loader', - 'sass-loader' - ] - }, - { - test: /\.(png|svg|jpg|gif|ttf)$/, - loader: 'file-loader', - options: { - name: '[name].[ext]' - } - } - ] - }, - devtool: 'inline-source-map', - devServer: { - contentBase: path.join(__dirname, 'dist'), - compress: true, - port: 9001 - }, - plugins: [ - // Fill template with global constants - new HtmlWebpackPlugin({ - ...constants, - filename: 'index.html', - template: 'src/index-tmpl.html' - }), - // Pass global constants to components - new webpack.DefinePlugin(constants) - ] - }; -};