Alecto

https://codepen.io/designcouch/pen/Atyop
https://codepen.io/FomenkoAndrey/pen/wEeKKM


<!-- HTML -->
<div class="header-navbar__btn">
  <span class="header-navbar__btn-row"></span>
  <span class="header-navbar__btn-row"></span>
  <span class="header-navbar__btn-row"></span>
</div>

Alecto

/* Fonts
 * Font settings for the project
 */
$font-primary: 'Roboto', sans-serif;  // Main font for text
$font-header: 'Roboto Slab', serif;   // Font for headers
$font-icon: 'FontAwesome';            // Icon font
$font-size: 16px;                     // Base font size

/* Container
 * Settings for the main container

Alecto

### Custom .gitignore template

# System files
.DS_Store
Thumbs.db

# Node.js
node_modules/
npm-debug.log*
yarn-debug.log*

Alecto

/* Primary and Accent Colors */
$color-primary: #2d3651;         // Main brand color
$color-accent: #d66926;          // Accent color for highlights
$color-highlight: #d53d27;       // Highlight color (e.g., for errors or alerts)

/* Neutral Colors */
$color-gray: #637588;            // Base gray for text or borders
$color-gray-light: #e5e5e5;      // Light gray for backgrounds
$color-gray-light2: #ededed;     // Secondary light gray (slightly darker)
$color-gray-dark: #44596e;       // Dark gray for headings or emphasis

Alecto

// Reset margin, padding, and remove list-style from a list.
@mixin unlist($m: 0, $p: 0) {
  margin: $m;
  padding: $p;
  list-style: none;
}

// Truncate single-line text with ellipsis if it overflows.
@mixin text-shorten {
  overflow: hidden;

Alecto

@use "../presets" as *;

$diff: 0.2px;

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

Alecto

@use "../presets" as *;

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

@mixin ul {

Alecto

--modules-folder libs

Alecto

#6.7.2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

Alecto

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

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