[PRAC/cont] Start moving to "pixel perfect" layout

Defining the "main" container size, setting up "PerfectPixel" extension.

Worth noting:
  - upcoming Html/DOM structure corrections.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-output.css

@@ -1,5 +1,10 @@
+.crm__output-data {
+  padding-right: var(--output-padding);
+  padding-left: var(--output-padding);
+}
+
 .crm__output-title {
-  margin-bottom: 7px;
+  margin-bottom: 25px;
   font-weight: var(--semi-bold);
   font-size: 28px;
 }
@@ -33,30 +38,30 @@
 }
 
 .crm__output-table #table-th-id {
-  width: 75px;
+  width: 85px;
   font-weight: var(--semi-bold);
   color: var(--main-purple);
 }
 
 .crm__output-table #table-th-fio {
-  width: 280px;
+  width: 400px;
 }
 
 .crm__output-table #table-th-dt {
-  width: 180px;
+  width: 220px;
 }
 
 .crm__output-table #table-th-change {
-  width: 180px;
+  width: 200px;
 }
 
 .crm__output-table #table-th-contact {
   padding-right: 30px;
-  width: 190px;
+  /* width: 190px; */
 }
 
 .crm__output-table #table-th-action {
-  padding-right: 20px;
+  /* padding-right: 20px; */
 }
 
 .crm__o-table-head-cell:focus-visible {
@@ -91,3 +96,35 @@
   font-weight: var(--semi-bold);
   color: var(--main-purple);
 }
+
+/* media queries, any-hover */
+
+@media (max-width: 992px) {
+  .crm__output-title {
+    margin-bottom: 7px;
+  }
+
+  .crm__output-table #table-th-id {
+    width: 75px;
+  }
+
+  .crm__output-table #table-th-fio {
+    width: 280px;
+  }
+
+  .crm__output-table #table-th-dt {
+    width: 180px;
+  }
+
+  .crm__output-table #table-th-change {
+    width: 180px;
+  }
+
+  .crm__output-table #table-th-contact {
+    width: 190px;
+  }
+
+  .crm__output-table #table-th-action {
+    padding-right: 20px;
+  }
+}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/page.css

@@ -56,6 +56,11 @@ svg {
   background-color: var(--bg-page);
 }
 
+.page__container {
+  padding: 0;
+  max-width: var(--page-max-width);
+}
+
 .page__title {
   margin-bottom: 16px;
   padding-top: 10px;

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/variables.css

@@ -1,6 +1,8 @@
 :root {
   /* sizes */
   --page-min-width: 320px;
+  --page-max-width: 1366px;
+  --output-padding: 90px;
 
   /* fonts */
   --open-sans: "Open Sans";

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -35,8 +35,10 @@
   searchLogoImg.setAttribute('width', '50');
   searchLogoImg.setAttribute('height', '50');
   searchLogoImg.setAttribute('alt', 'Логотип: Skillbus');
+  searchForm.setAttribute('id', 'search-form');
   searchForm.setAttribute('action', '#');
   searchForm.setAttribute('novalidate', '');
+  searchInput.setAttribute('id', 'search-form-input');
   searchInput.setAttribute('type', 'text');
   searchInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
   searchInput.setAttribute('placeholder', 'Введите запрос');