peterkarn

<div class="wrapper">
  <header class="header">
    <div class="header__container">
      <a href="" class="header__logo"></a>
      <div class="header__menu menu">
        <div class="menu__icon">
          <span></span>
        </div>
        <nav class="menu__body">
          <ul class="menu__list">

peterkarn

let optional = {
	'.btn': ['padding', 'border', 'text-align', 'display']
};

const critical = require('critical');

critical.generate({
	base: './dist/',
	src: 'index.html',
	css: [ 'css/main.css' ],

peterkarn

<div class="tabs howtoget__tabs">
  <ul class="tabs__list">
    <li class="tabs__item"><button class="tabs__btn tabs__btn_active" data-tabs-path="1">1</button></li>
    <li class="tabs__item"><button class="tabs__btn" data-tabs-path="2">2</button></li>
  </ul>
  <div class="tabs__content tabs__content_active" data-tabs-target="1">
    <div class="content">
      1
    </div>
  </div>

peterkarn

const
    header = document.querySelector('.header');
  let lastScrollTop = 0;
  
  window.addEventListener('scroll', () => {
    let scrollDistance = window.scrollY;
    
    if (scrollDistance > lastScrollTop) {
      header.classList.remove('scrollable');
      header.style.opacity = "";

peterkarn

background-image: url("../img/duplexes/disclaimer/disclaimer-bg.jpg");

  @media screen and (min-width: $small + 1) and (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 95dpi) {
    background-image: url("../img/duplexes/disclaimer/[email protected]");
  }

  @media screen and (max-width: $small) {
    background-image: url("../img/duplexes/disclaimer/disclaimer-bg-mob.jpg");
  }

peterkarn

<button class="buttons">
  <img class="buttons__image" src="img/common/messages.svg" alt="">
  <ul class="buttons__wrapper">
    <li>
      <a class="buttons__link" href="#">
        <span>
          Чат в Telegram
        </span>
        <img src="img/common/tg.svg" alt="">
      </a>

peterkarn

  const lockMarginValue = window.innerWidth - document.querySelector('.site-container').offsetWidth + 'px'

  function pageMarginAdd() {
    body.style.marginRight = lockMarginValue
    // header.style.paddingRight = lockMarginValue
  }

  function pageMarginRemove() {
    body.style.marginRight = ''
    // header.style.paddingRight = ''

peterkarn

const sliders = document.querySelectorAll('.slider__wrapper');


if (sliders.length > 0) {

  sliders.forEach((slider, i) => {
    const items = slider.querySelectorAll('.work-item');

    items.forEach(item => {
      const linkWrapper = document.createElement('a');

peterkarn

const isSafari = navigator.userAgent.indexOf("Safari") !== -1;
const isIphone = navigator.userAgent.indexOf("iPhone") !== -1;
const isMobileIosSafari = isSafari && isIphone;
// modalOpen is a boolean assigned when modal is opened
if (modalOpen) {
  document.ontouchmove = (e) => e.preventDefault();
} else {
  document.ontouchmove = (e) => true;
}

peterkarn

<!-- lazy load metrika and jivosite -->
  <script>
    function appendScriptMetrika() {
      const metrikaScript =
        `(function (m, e, t, r, i, k, a) { m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(61222240, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true});`
      const scriptTag = document.createElement('script');
      scriptTag.innerHTML = metrikaScript;
      document.head.appendChild(scriptTag)
    }