paceaux

website-name front-end

A Website built on with

Built with:

• Gulp
• SASS
• Babel + Webpack

Requirements

paceaux

/*
where "title" is the full class name
/class=(.*[ "]title[ "].*)/g

*/

const className = 'title';
const regex = new RegExp(`/class=(.*[ "]${className}[ "].*)/g`); 

paceaux

/**
 * Class for adding CSS with JavaScript that relies on the CSSOM
 */
class JSCSS {
    /**
     * @param  {string} cssText Text for a stylesheet. Rulesets, queries, and all
     */
    constructor(cssText = '') {
        const sheet = JSCSS.addStyleSheet();
        this.stylesheet = JSCSS.getStyleSheet(sheet.title);

paceaux

.isDebugging .debug {
  outline: 1px solid rgba(200, 100, 50, 0.9); 
}

.isDebugging .debug * {
    outline: 1px solid rgba(200, 100, 50, 0.9); 
}

paceaux

/** Creates an array that, when iterated, only returns ruthy items
 * @param  {array} iterable
 *
 * @example const mixedBag = new TruthyArray(1, 0, 'foo', '', true, false, undefined, null, 'three'])
 * for (item of mixedBag) {
 *   console.log(item);
 * }
 * 
 */

paceaux

function ifIn(array) {
  console.group(`ifIn======`);
    let i = 0;
    while (i < array.length) {
      if (i++ in array) {
        console.log(`${i - 1} is in the array`);
      }
    }
  console.groupEnd();

paceaux

/** Evaluates an array, makes the key lowercasee and makes the value an object with original keyname
 * @param  {Array} iterable=[] an array of arrays:[[key,val],[key,val]]
 * @returns Array
 */
function LowercaseIterable(iterable = []) {
	if (iterable.length === 0) return [];

	const newIterable = iterable.map(([key, val]) => {
		const entry = [
			key.toLowerCase(),

paceaux

/**
 * @typedef SpeakerDefaults
 * @type {object}
 * @property  {string} voiceURI voice that the browser uses
 * @property  {Number} volume loudness. Between 0 and 1.0
 * @property  {Number} rate  speed at which words are spoken. Between 0 and 2.
 * @property  {Number} pitch Between 0 and 2
 * @property  {string} lang ISO language
 */

paceaux

/** queryCSSByPropertyName
* queries the CSSOM looking for CSS rulesets containing a particular CSS property. 
* @param {string} queryPropName CSS property name
* @param {string} queryPropValue value of CSS property
* @returns Map with key as CSS selector, value as CSS properties. 
*/  
function queryCSSByProperty(queryPropName, queryPropValue) {
  	const styleSheets= document.styleSheets; // get all the stylesheets
	  const properties = new Map(); // set up the variable that'll store our result
  

paceaux

body {
    --bgColor: #111;
    --textColor:rgb(201, 208, 221) ;
    --infoColor: rgba(201, 208, 221, .7) ;
    --titleColor: rgb(133,153,187);
    --linkColor: rgb(57,114,198);
    --buttonBGColor: #444547;
    --buttonColor: rgb(201,228,221);
    --buttonBGColorHover: #72829e;
    --itemBGColor: #272524;