подключение шрифтов

README.md

@@ -2,35 +2,7 @@
 
 ### **С точки зрения веб-разработки:**
 * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
-* соблюдаем Scope-ориентированный подход:
-    - каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта.
-    
-    - пример:  <br>
-    
-    HTML:
-    ```
-    <section class="my-namespace">
-        <h1>Новый заголовок</h1>
-        <button class="my-button">Кнопка</button>
-    </section>
-    ```
-
-    CSS:
-
-    ```
-    .my-namespace h1 {
-        font-size: 24px;
-        color: #333;
-    }
-
-    .my-namespace .my-button {
-        background-color: #007BFF;
-        color: #fff;
-    }
-    ```
-
-
-* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
+* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
     `block-name__elem-name--mod-name--mod-val`
     + имена записываются латиницей в нижнем регистре
     + для разделения слов в именах БЭМ-сущностей используется дефис (-)
@@ -39,10 +11,8 @@
     + значение модификатора отделяется от его имени двумя дефисами (--)
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
 * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
-* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. 
-* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
-* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил.
-* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*)
+* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы   
+
 
 ### **С точки зрения SEO:**
 * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
@@ -55,11 +25,7 @@
 ## **Порядок работы**
 
 ### **Подготовка окружения для локальной разработки**
-1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git`
-
-заменить переменную: 
-`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS)
-
+1. Выкачивать локально на свой компьютер шаблон командой: `git clone https://git.good-production.xyz/Good-Production/template-for-verstka.git`
 2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
 3. Приступить к локальной разработке в созданной ветке
 4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}`

assets/css/gp-style-core.css

@@ -1,16 +1,89 @@
 /* Переменные, шрифты, UI kit */
 
-
-
-
 /* 
+700 - Bold
+600 - SemiBold / Demi
+500 - Medium
+400 - Regular
+*/
 
-ШАБЛОН использования глобальных переменных:
+/* Craftwork Grotesk */
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Bold"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
+    font-weight: 700;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk SemiBold"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
+    font-weight: 600;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Medium"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Craftwork Grotesk";
+    src: local("Craftwork Grotesk Regular"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
+      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
+      url("/assets/fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf");
+    font-weight: 400;
+}
+/* Craftwork Grotesk */
+
+/* din 2014 */
+@font-face {
+    font-family: "DIN 2014 Rounded";
+    src: local("DIN 2014 Rounded Demi"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
+      url("/assets/fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf");
+    font-weight: 600;
+}
+@font-face {
+    font-family: "DIN 2014 Rounded";
+    src: local("DIN 2014 Rounded Regular"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
+      url("/assets/fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf");
+    font-weight: 400;
+}
+/* din 2014 */
+
+/* roboto */
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto Medium"),
+      url("/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
+      url("/assets/fonts/roboto/Roboto-Medium.woff") format("woff"),
+      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto Regular"),
+      url("/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
+      url("/assets/fonts/roboto/Roboto-Regular.woff") format("woff"),
+      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
+    font-weight: 400;
+}
+/* roboto */
+
+/* Глобальные переменные: */
 
 :root {
-    --main-text: #e1667c;
-    --main-color: #8da6cb;
     --font-family: "Craftwork Grotesk", sans-serif;
-} 
-
-*/
+    --second-family: "DIN 2014 Rounded", sans-serif;
+    --third-family: "Roboto", sans-serif
+} 

assets/css/normalize.min.css

@@ -1,2 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
-/*# sourceMappingURL=normalize.min.css.map */

assets/css/reset.min.css

@@ -1 +0,0 @@
-*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}

index.html

@@ -8,9 +8,6 @@
         <meta name="description" content="SEO Description">
         <link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
 
-        <!-- Сбрасываем глобальные стили -->
-        <link rel="stylesheet" href="/assets/css/normalize.min.css">
-        <link rel="stylesheet" href="/assets/css/reset.min.css">
         <!-- Базовые стили -->
         <link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
         <link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
@@ -51,20 +48,7 @@
     
     </head>
     <body>
-
-        
-        <!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-        <form class="form" method="post" action="/send-telegram.php">
-            <div class="form__item">
-                <input class="form__input" type="text" name="name" required>
-                <label class="form__label">Ваше имя</label>
-            </div>
-            <div class="form__item">
-                <input class="form__input" type="text" name="phone" required>
-                <label class="form__label">Номер телефона</label>
-            </div>
-            <input class="form__input btn" type="submit" value="Отправить">
-        </form>
+        <p>test</p>
 
 
         <script src="/assets/js/gp-main.js"></script>