Alecto

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);

Alecto

#6.6.0
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">


#5.15.4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">


#4.7
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Alecto

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "license": "MIT",
  "devDependencies": {

Alecto

gulpfile.js
webpack.config.js
all.min.js
bundle.js

Alecto

let path = require('path');

let conf = {
  entry: './assets/js/main.js',
  output: {
    path: path.resolve(__dirname, './assets/js'),
    filename: 'all.min.js',
    publicPath: 'assets/js/'
  },
  devServer: {overlay: true},

Alecto

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Alecto

--modules-folder libs

Alecto

$diff: 0.2px;

/* ul */
@mixin ul-min {
  @media (min-width: $ul) {
    @content;
  }
}

@mixin ul {

Alecto

$diff: 0.2px;

/* xl */
@mixin xl-min {
  @media (min-width: $xl) {
    @content;
  }
}

@mixin xl {

Alecto

// Reset margin, padding and list-style from a list.

@mixin unlist($m: 0, $p: 0) {
  margin: $m;
  padding: $p;

  list-style: none;
}

// Single-line text with a three-dot at the end