Skip to content

I
Interstate supplies
Commit 1a68edbb authored by Evgeny Talagaev's avatar Evgeny Talagaev
Browse files
Options

project done

parent 75a1b189
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1802 additions and 223 deletions
config.js
View file @ 1a68edbb
...@@ -26,8 +26,8 @@ let config = { ...@@ -26,8 +26,8 @@ let config = {
'./script.js', './script.js',
], ],
'addAssets': { 'addAssets': {
'src/img/demo-*.{png,svg,jpg,jpeg}': 'img/', 'src/img/*.{png,svg,jpg,jpeg}': 'img/',
// 'src/fonts/demo-empty-open-sans.woff2': 'fonts/', 'src/fonts/*.{woff,woff2}': 'fonts/',
// 'src/favicon/*.{png,ico,svg,xml,webmanifest}': 'img/favicon', // 'src/favicon/*.{png,ico,svg,xml,webmanifest}': 'img/favicon',
// 'node_modules/somePackage/images/*.{png,svg,jpg,jpeg}': 'img/', // 'node_modules/somePackage/images/*.{png,svg,jpg,jpeg}': 'img/',
}, },
......
package-lock.json
View file @ 1a68edbb
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"baron": "^3.0.3", "baron": "^3.0.3",
"choices.js": "^9.0.1", "choices.js": "^9.0.1",
"closest": "0.0.1", "closest": "0.0.1",
"jquery": "^3.6.0",
"svg4everybody": "^2.1.8" "svg4everybody": "^2.1.8"
}, },
"devDependencies": { "devDependencies": {
...@@ -11973,6 +11974,11 @@ ...@@ -11973,6 +11974,11 @@
"integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==", "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
"dev": true "dev": true
}, },
"node_modules/jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
},
"node_modules/js-base64": { "node_modules/js-base64": {
"version": "2.6.4", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
...@@ -32527,6 +32533,11 @@ ...@@ -32527,6 +32533,11 @@
"integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==", "integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
"dev": true "dev": true
}, },
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
},
"js-base64": { "js-base64": {
"version": "2.6.4", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
package.json
View file @ 1a68edbb
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
"baron": "^3.0.3", "baron": "^3.0.3",
"choices.js": "^9.0.1", "choices.js": "^9.0.1",
"closest": "0.0.1", "closest": "0.0.1",
"jquery": "^3.6.0",
"svg4everybody": "^2.1.8" "svg4everybody": "^2.1.8"
}, },
"husky": { "husky": {
......
src/blocks/btn/btn.scss
View file @ 1a68edbb
...@@ -8,31 +8,56 @@ ...@@ -8,31 +8,56 @@
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
border-radius: $border-radius; border-radius: $border-radius;
// border: 1px solid $gray-lighter; border: 1px solid transparent;
border: 0; padding: 14px 20px;
padding: $field-padding-vertical $field-padding-horizontal;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
user-select: none; user-select: none;
text-align: center; text-align: center;
font-size: 1em; font-weight: 800;
font-family: inherit;
line-height: $line-height;
text-decoration: none; text-decoration: none;
text-transform: none; text-transform: uppercase;
color: $text-color; color: $color-1;
background-color: $gray-lightest; font-size: 13px;
font-family: $font-family;
background-color: #fff;
background-image: none; background-image: none;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: color $transition-time, background-color $transition-time,
border-color $transition-time;
@media (min-width: $screen-xl) {
padding: 16px 30px;
font-size: 18px;
}
@media (min-width: $screen-xl) and (max-width: ($screen-xxl - 1)) {
@at-root .form-block__second & {
padding: 14px 20px;
min-width: 180px;
font-size: 16px;
}
}
@media (min-width: $screen-lg) {
padding: 15px 20px;
font-size: 14px;
}
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: $text-color; color: #fff;
background-color: darken($gray-lightest, 10%); background-color: transparent;
// border-color: darken($gray-lighter, 12%); border-color: #fff;
svg {
path {
stroke: #fff;
}
}
} }
// &:visited { // &:visited {
...@@ -41,7 +66,14 @@ ...@@ -41,7 +66,14 @@
&:active, &:active,
&:focus { &:focus {
@include field-focus; outline: none;
// @include field-focus;
}
svg {
path {
transition: stroke $transition-time;
}
} }
&--disabled, &--disabled,
...@@ -57,13 +89,30 @@ ...@@ -57,13 +89,30 @@
} }
} }
&--ico {
display: inline-flex;
align-items: center;
svg {
margin-left: 10px;
width: auto;
height: 25px;
@media (min-width: $screen-xxl) {
margin-left: 15px;
height: 32px;
}
@media (min-width: $screen-xl) {
}
}
}
// &__icon { // &__icon {
// display: inline-block; // display: inline-block;
// vertical-align: middle; // vertical-align: middle;
// } // }
// &--main { // &--main {
// color: #fff; // color: #fff;
// background-color: $color-main; // background-color: $color-main;
......
src/blocks/burger/burger.js
View file @ 1a68edbb
...@@ -12,11 +12,16 @@ ready(function(){ ...@@ -12,11 +12,16 @@ ready(function(){
} }
function showBurgerTarget() { function showBurgerTarget() {
const body = document.querySelector('body');
var targetId = this.getAttribute('data-target-id'); var targetId = this.getAttribute('data-target-id');
var targetClassToggle = this.getAttribute('data-target-class-toggle'); var targetClassToggle = this.getAttribute('data-target-class-toggle');
if (targetId && targetClassToggle) { if (targetId && targetClassToggle) {
this.classList.toggle('burger--close'); this.classList.toggle('burger--close');
document.getElementById(targetId).classList.toggle(targetClassToggle); document.getElementById(targetId).classList.toggle(targetClassToggle);
body.classList.toggle('of-h');
body.classList.toggle('mob-menu-active');
// document.querySelector('.black-background').classList.toggle('active');
} }
} }
......
src/blocks/burger/burger.scss
View file @ 1a68edbb
...@@ -6,57 +6,60 @@ ...@@ -6,57 +6,60 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
display: inline-flex; display: inline-flex;
justify-content: flex-end;
align-items: center; align-items: center;
justify-content: center; width: 25px;
width: 32px; height: 16px;
height: 32px;
border: none; border: none;
padding: 0; padding: 0;
background: transparent; background: transparent;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
> span { // stylelint-disable-line selector-combinator-blacklist > span {
// stylelint-disable-line selector-combinator-blacklist
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 13px;
height: $toggler-part-height; height: $toggler-part-height;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
background: $gray-dark; background: $color-1;
transition: background $transition-time $transition-time; transition: background $transition-time $transition-time;
&:before, &:before,
&:after { &:after {
content: ''; content: "";
position: absolute; position: absolute;
left: 0; right: 0;
width: 100%; width: 25px;
height: $toggler-part-height; height: $toggler-part-height;
background: $gray-dark; background: #3a3a3a;
transform-origin: 50% 50%; transform-origin: 50% 50%;
transition: top $transition-time $transition-time, transform $transition-time; transition: top $transition-time $transition-time,
background-color $transition-time, transform $transition-time;
} }
&:before { &:before {
top: -10px; top: -8px;
} }
&:after { &:after {
top: 10px; top: 8px;
} }
} }
&--close { &--close {
> span {
> span { // stylelint-disable-line selector-combinator-blacklist // stylelint-disable-line selector-combinator-blacklist
transition: background $transition-time 0s; transition: background $transition-time 0s;
background: transparent; background: transparent;
&:before, &:before,
&:after { &:after {
top: 0; top: 0;
transition: top $transition-time, transform $transition-time $transition-time; transition: top $transition-time,
transform $transition-time $transition-time;
} }
&:before { &:before {
...@@ -65,6 +68,7 @@ ...@@ -65,6 +68,7 @@
&:after { &:after {
transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg);
background-color: $color-1;
} }
} }
} }
......
src/blocks/dropdown/dropdown.js 0 → 100644
View file @ 1a68edbb
/* global document */
// const ready = require('../../js/utils/documentReady.js');
// ready(function(){
//
// });
src/blocks/dropdown/dropdown.pug 0 → 100644
View file @ 1a68edbb
//- Все примеси в этом файле должны начинаться c имени блока (dropdown)
mixin dropdown(elem, elemText, elemLink, elemMods, mods)
//- Принимает:
//- elem {string} - значения: link | button | text
//- elemText {string} - текст elem
//- elemLink {string} - ссылка, если elem = link
//- elemMods {string} - список модификаторов elem
//- mods {string} - список модификаторов dropdown
//- Вызов:
+dropdown('link', 'ico', '', '')
+dropdown-item()
a(href='tel:+78314618980') +7 (831) 461-89-80
+dropdown-item()
a(href='tel:+78314618980') +7 (831) 461-89-80
+dropdown-item()
a(href='tel:+78314618980') +7 (831) 461-89-80
-
// список модификаторов
var allMods = '',
elemType = '',
elemAllMods = '';
if(elemLink === 'undefined' || elemLink === '') {
elemLink = '#';
}
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' dropdown--' + modsList[i].trim();
}
}
if(typeof(elemMods) !== 'undefined' && elemMods) {
var arrMods = elemMods.split(',');
for (var i = 0; i < arrMods.length; i++) {
elemAllMods = elemAllMods + ' ' + arrMods[i].trim();
}
}
if (typeof(elem) !== 'undefined' && elem) {
switch(elem){
case 'link':
elemType = '<div class="dropdown__block"><a class="dropdown__elem '+elemMods+'" href="'+elemLink+'">'+elemText+'</a>';
elemType += '<button class="dropdown__toggler"></button></div>';
break;
case 'button':
elemType = '<div class="dropdown__block"><button class="dropdown__elem '+elemMods+'">'+elemText+'</button>';
elemType += '<button class="dropdown__toggler"></button></div>';
break;
case 'text':
elemType = '<div class="dropdown__block"><span class="dropdown__elem '+elemMods+'">'+elemText+'</span>';
elemType += '<button class="dropdown__toggler"></button></div>';
break;
case 'ico':
elemType = '<div class="dropdown__block"><span class="dropdown__elem '+elemMods+'">'+elemText+' <img src="img/flag-1.png" alt="United Kingdom flag"></span>';
elemType += '<button class="dropdown__toggler"></button></div>';
break;
}
}
.dropdown(class=allMods)&attributes(attributes) !{elemType}
ul.dropdown__list
block
mixin dropdown-item()
li
block
\ No newline at end of file
src/blocks/dropdown/dropdown.scss 0 → 100644
View file @ 1a68edbb
// В этом файле должны быть стили для БЭМ-блока dropdown, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.dropdown {
$block-name: &;
position: relative;
&:focus,
&:hover {
#{$block-name}__block {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#{$block-name}__toggler {
background-image: url("../img/arr-dwn--orange.svg");
}
#{$block-name}__list {
border: 1px solid #eeeeee;
border-top: 0;
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}
&__block {
display: flex;
align-items: center;
position: relative;
border: 1px solid #eeeeee;
padding: 5px 30px 5px 5px;
width: 320px;
border-radius: 20px;
}
&__elem {
text-decoration: none;
font-size: 12px;
@media (min-width: $screen-sm) {
font-size: 14px;
}
&:hover {
// color: $color-main-2;
}
}
&__toggler {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 0;
border: 0;
width: 40px;
height: 100%;
background: url("../img/arr-dwn.svg") center/auto 10px no-repeat;
transition: var(--transition-duration);
}
&__list {
position: absolute;
right: 0;
z-index: 5;
transform: translateY(-4px);
margin: 0;
padding: 5px 0;
min-width: 155px;
width: 100%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
list-style: none;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
transition: var(--transition-duration);
font-size: 12px;
@media (min-width: $screen-sm) {
font-size: 14px;
}
li {
& > a,
& > span {
display: block;
padding: 5px 20px;
transition: var(--transition-duration);
text-decoration: none;
color: $color-2;
&:focus,
&:hover {
background-color: #f5f6f8;
// color: $color-main-2;
}
}
}
}
&--width-auto {
.dropdown__block {
width: auto;
}
.dropdown__list {
min-width: auto;
}
}
&--no-border {
.dropdown__block {
border: inherit;
padding: 4px 27px 4px 10px;
border-radius: inherit;
}
.dropdown__toggler {
width: 27px;
background-position: right 2px center;
transform-origin: calc(50% + 0.65rem) 50%;
}
.dropdown__list {
li {
& > a,
& > span {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
&--align-right {
text-align: right;
.dropdown__elem {
margin-left: auto;
}
.dropdown__list {
li {
& > a,
& > span {
padding-right: 30px;
}
}
}
}
&--align-right.dropdown--no-border {
.dropdown__list {
li {
& > a,
& > span {
padding-right: 27px;
}
}
}
}
&--width-auto-left {
.dropdown__block {
width: auto;
}
.dropdown__list {
min-width: auto;
width: auto;
left: 0;
right: inherit;
}
}
&--arr-left {
#{$block-name}__block {
padding-left: 30px;
padding-right: 5px;
}
#{$block-name}__toggler {
left: 5px;
right: inherit;
width: 25px;
}
#{$block-name}__list {
li {
& > a,
& > span {
padding-left: 15px;
padding-right: 15px;
}
}
}
}
&--items-with-ico {
#{$block-name}__elem {
display: flex;
align-items: center;
img {
margin-left: 12px;
width: 25px;
height: auto;
@media (min-width: $screen-sm) {
width: 30px;
}
}
}
#{$block-name}__list {
padding: 0;
li {
& > a,
& > span {
display: flex;
align-items: center;
padding-right: 5px;
transition: color $transition-time;
&:focus,
&:hover {
background-color: transparent;
color: $color-1;
}
img {
box-sizing: content-box;
margin-left: auto;
padding-left: 12px;
width: 25px;
height: auto;
@media (min-width: $screen-sm) {
width: 30px;
}
}
}
}
}
}
}
src/blocks/field-text/field-text.scss
View file @ 1a68edbb
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.field-text { .field-text {
$block-name: &; // #{$block-name}__element $block-name: &; // #{$block-name}__element
display: block; display: block;
...@@ -21,22 +20,20 @@ ...@@ -21,22 +20,20 @@
@include field-text; @include field-text;
@at-root textarea#{&} { @at-root textarea#{&} {
$textarea-height: ($line-height * 2) + ($field-padding-vertical * 2); // $textarea-height: ($line-height * 2) + ($field-padding-vertical * 2);
height: auto; height: auto;
min-height: calc(#{$textarea-height} + 2px); // min-height: calc(#{$textarea-height} + 2px);
resize: vertical; resize: vertical;
} }
} }
&__help-text { &__help-text {
@include field-help-text; @include field-help-text;
display: none;
} }
&--error { &--error {
#{$block-name}__name, #{$block-name}__name,
#{$block-name}__input, #{$block-name}__input,
#{$block-name}__help-text { #{$block-name}__help-text {
......
src/blocks/logo/logo.scss
View file @ 1a68edbb
...@@ -3,13 +3,31 @@ ...@@ -3,13 +3,31 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.logo { .logo {
$block-name: &;
$block-name: &; // #{$block-name}__element
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
line-height: 0;
width: 135px;
@media (min-width: $screen-xl) {
width: 200px;
}
@media (min-width: $screen-lg) {
width: 170px;
}
@media (min-width: $screen-md) {
width: 150px;
}
img { img {
display: block; display: block;
} }
svg {
width: 100%;
height: auto;
}
} }
src/blocks/page-footer/page-footer.pug
View file @ 1a68edbb
This diff is collapsed.
src/blocks/page-footer/page-footer.scss
View file @ 1a68edbb
...@@ -2,7 +2,72 @@ ...@@ -2,7 +2,72 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.page__footer-wrapper {
}
.page-footer { .page-footer {
$block-name: &;
background-color: $color-2;
color: #fff;
&__inner {
}
&__first {
padding: 40px 0;
@media (min-width: $screen-xxl) {
}
@media (min-width: $screen-xl) {
}
@media (min-width: $screen-lg) {
}
@media (min-width: $screen-md) {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (min-width: $screen-sm) {
}
}
&__f-left {
@media (max-width: ( $screen-md - 1)) {
text-align: center;
}
}
&__f-right {
@media (min-width: $screen-md) {
padding-left: 15px;
}
@media (max-width: ( $screen-md - 1)) {
margin-top: 40px;
}
}
&__second {
padding: 20px 0;
border-top: 1px solid rgba(239, 239, 239, 0.2);
@media (min-width: $screen-sm) {
padding-top: 30px;
padding-top: 30px;
}
}
}
.copyright {
margin-bottom: 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
$block-name: &; // #{$block-name}__element @media (max-width: ( $screen-md - 1)) {
text-align: center;
}
} }
src/blocks/page-header/page-header.pug
View file @ 1a68edbb
This diff is collapsed.
src/blocks/page-header/page-header.scss
View file @ 1a68edbb
...@@ -3,6 +3,128 @@ ...@@ -3,6 +3,128 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.page-header { .page-header {
$block-name: &;
$block-name: &; // #{$block-name}__element padding: 20px 0;
background-color: #fff;
@at-root .mob-menu-active & {
@media (min-width: $screen-md) {
position: relative;
z-index: 2;
}
}
@media (min-width: $screen-xxl) {
padding-top: 40px;
padding-bottom: 40px;
}
@media (min-width: $screen-xl) {
padding-top: 35px;
padding-bottom: 35px;
}
@media (min-width: $screen-md) {
padding-top: 30px;
padding-bottom: 30px;
}
&.fixed {
position: fixed !important;
z-index: 2;
left: 0;
top: 0;
width: 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
@media (min-width: $screen-md) {
padding-top: 20px;
padding-bottom: 20px;
}
.logo {
@media (min-width: $screen-md) {
width: 150px;
}
}
}
& + .big-text {
margin-top: 20px;
@media (min-width: $screen-xl) {
margin-top: 70px;
}
@media (min-width: $screen-md) {
margin-top: 40px;
}
}
#{$block-name}__inner {
display: flex;
align-items: center;
}
#{$block-name}__right {
display: flex;
align-items: center;
margin-left: auto;
padding-left: 15px;
.simple-menu,
.feedback {
margin-right: 20px;
@media (min-width: $screen-xxl) {
margin-right: 70px;
}
@media (min-width: $screen-xl) {
margin-right: 55px;
}
@media (min-width: $screen-lg) {
margin-right: 40px;
}
@media (min-width: $screen-md) {
margin-right: 30px;
}
}
.feedback,
.dropdown {
@media (max-width: ($screen-sm - 1)) {
display: none;
}
}
.simple-menu {
@media (min-width: $screen-lg) {
display: flex;
}
@media (max-width: ($screen-lg - 1)) {
display: none;
}
}
.burger {
display: inline-flex;
@media (min-width: $screen-lg) {
display: none;
}
@media (min-width: $screen-md) {
margin-right: 30px;
}
@media (min-width: $screen-sm) {
margin-right: 20px;
}
}
}
} }
src/blocks/page/page.scss
View file @ 1a68edbb
This diff is collapsed.
src/img/arr-dwn--orange.svg 0 → 100644
View file @ 1a68edbb
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.125 6.25L5 3.125L1.875 6.25" stroke="#F36601" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/img/arr-dwn.svg 0 → 100644
View file @ 1a68edbb
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.125 3.75L5 6.875L1.875 3.75" stroke="#1B1B1B" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/js/script.js
View file @ 1a68edbb
// /* global document console */ // /* global document console */
// import ready from 'Utils/documentReady.js'; import ready from 'Utils/documentReady.js';
// import getScrollSize from 'Utils/getScrollSize.js'; import getScrollSize from 'Utils/getScrollSize.js';
// ready(function() { ready(function() {
// console.log('DOM героически построен!'); const body = document.querySelector('body');
// // Добавление кастомного свойства с системной шириной скролла
// document.documentElement.style.setProperty('--css-scroll-size', `${getScrollSize()}px`); console.log('DOM героически построен!');
// }); // Добавление кастомного свойства с системной шириной скролла
document.documentElement.style.setProperty('--css-scroll-size', `${getScrollSize()}px`);
// import $ from 'jquery'; // Перед использованием установить как зависимость
// $(function() { const stickyHeader = document.querySelector('.page-header');
// console.log('jQuery героически сработал!'); const headerOffset = findOffset(stickyHeader);
// }); const headerOriginalHeight = stickyHeader.clientHeight;
document.documentElement.style.setProperty('--header-bottom', `${stickyHeader.getBoundingClientRect().bottom}px`);
window.addEventListener('scroll', () => {
const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > headerOffset.top) {
body.style.paddingTop = `${headerOriginalHeight}px`;
stickyHeader.classList.add('fixed');
} else {
body.style.paddingTop = `0`;
stickyHeader.classList.remove('fixed');
}
document.documentElement.style.setProperty('--header-bottom', `${stickyHeader.getBoundingClientRect().bottom}px`);
});
function findOffset(element) {
let top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
}
// Mobile menu
const mobMenu = document.querySelector(".mob-menu");
if (mobMenu) {
mobMenu.addEventListener("click", (e) => {
if (e.target.classList.contains("mob-menu__close")) {
closeMobMenu();
}
});
}
});
function closeMobMenu() {
const body = document.querySelector('body');
const mobMenuTrigger = document.querySelector('.page-header .burger');
mobMenuTrigger.classList.remove('burger--close');
mobMenu.classList.remove('active');
body.classList.remove('of-h', 'mob-menu-active');
}
import $ from 'jquery'; // Перед использованием установить как зависимость
$(function() {
console.log('jQuery героически сработал!');
$('.move-to').click( function(){
var scroll_el = $(this).children('a').attr('href');
var body = $('body');
if(scroll_el == undefined) {
scroll_el = $(this).attr('href');
}
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top - 90 }, 850);
closeMobMenu();
}
return false;
});
});
src/pages/404.pug
View file @ 1a68edbb
...@@ -7,9 +7,6 @@ block meta ...@@ -7,9 +7,6 @@ block meta
//- block append head //- block append head
//- link(rel='stylesheet', href='css/some.css') //- link(rel='stylesheet', href='css/some.css')
block nav
+main-nav('-1')
block content block content
h1 Error 404 h1 Error 404
p Page not found. p Page not found.
......
src/pages/index.pug
View file @ 1a68edbb
...@@ -7,14 +7,125 @@ block meta ...@@ -7,14 +7,125 @@ block meta
//- block append head //- block append head
//- link(rel='stylesheet', href='css/some.css') //- link(rel='stylesheet', href='css/some.css')
block nav
+main-nav('10')
block content block content
h1 Заголовок
p Содержимое. #[a(href='blocks-demo.html') Библиотека блоков].
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium illo earum ipsa dicta? Harum architecto incidunt earum beatae eius rem nulla ab blanditiis placeat voluptas. Hic velit praesentium odit eius! section.big-text
.big-text__inner.container
p The INTERSTATE SUPPLIES D.O.O. company, as an independent solution provider and contractor, can supply individual machines, industrial equipment, combined systems and complete solutions tailored to your individual requirements.
section.banner
.banner__inner.container
.banner__img
picture
source(media="(min-width: 992px)", srcset="/img/banner-pc.jpg")
img(src="/img/banner-tablet.jpg", alt="img alt", loading="lazy")
section#about-us.about-us
.about-us__inner.container
.about-us__first
h2.def-title About us
.about-us__second
.text-flow
p It is not easy to find suitable suppliers. And finding reliable supplies in the perspective is the same challenging. But by good fortune we work in the field of individual industrial needs of our customers and use our extensive international contacts in order to select a high-quality technological solution for your particular task.
p The INTERSTATE SUPPLIES D.O.O. company, as an independent solution provider and contractor, can supply individual machines, industrial equipment, combined systems and complete solutions tailored to your individual requirements.
p With our extensive network of first class suppliers, knowledge of local market trends and experience in a variety of industries, we are a strong and competent partner to help bring your projects to life.
section#services.big-list
.big-list__inner.container
ul.big-list__block
li.big-list__b-item
.big-list__b-item-first
.big-list__b-item-img
img(src="/img/l-img-1.jpg", alt="img desc")
.big-list__b-item-second
span.big-list__b-item-number
h3.big-list__b-item-title Machinery and industrial equipment
.text-flow
p INTERSTATE SUPPLIES D.O.O. is an independent industrial solutions provider. We focus on individual machines, industrial equipment, combined systems and complete solutions delivery by the cost-benefit analysis, also we upgrade the existing facilities to enhance and maximize the performance.
li.big-list__b-item
.big-list__b-item-first
.big-list__b-item-img
img(src="/img/l-img-2.jpg", alt="img desc")
.big-list__b-item-second
span.big-list__b-item-number
h3.big-list__b-item-title Manufacturing Equipment
.text-flow
p Regardless of the task, we will find the most suitable equipment to increase the efficiency of your production. We are committed to delivery of high quality machinery and equipment produced by our partners – internationally renowned machine manufacturing company.
li.big-list__b-item
.big-list__b-item-first
.big-list__b-item-img
img(src="/img/l-img-3.jpg", alt="img desc")
.big-list__b-item-second
span.big-list__b-item-number
h3.big-list__b-item-title Processing lines
.text-flow
p Each specific piece of equipment is effective only when it is part of a complete technological line. Our task is the successful integration of our equipment into your existing production. We are focused on creating efficient and automated processes to increase productivity and achieve consistently high product quality.
li.big-list__b-item
.big-list__b-item-first
.big-list__b-item-img
img(src="/img/l-img-4.jpg", alt="img desc")
.big-list__b-item-second
span.big-list__b-item-number
h3.big-list__b-item-title Commercial Licensing and Consulting
.text-flow
p Using and absorbing the latest technologies is essential to staying competitive in business.
p For various products, INTERSTATE SUPPLIES D.O.O. offers laboratory and pilot testing of raw materials and formulations. We also cooperate with design centers and universities across the borders to stay abreast of the latest market developments and investigations in new technologies.
p For manufacturing finished, semi-finished products, or fine chemicals, we offer commercial licensing, consisting of a package of basic design, technical services, and comprehensive start-up and support of further production.
li.big-list__b-item
.big-list__b-item-first
.big-list__b-item-img
img(src="/img/l-img-5.jpg", alt="img desc")
.big-list__b-item-second
span.big-list__b-item-number
h3.big-list__b-item-title Consumables and raw materials
.text-flow
p The non-stop operation of a manufacturing facility always depends on the quality of the stock and raw material applied in production: this is the only way we can guarantee that the product is manufactured to the highest standards.
p Once your plant is up and running, we proceed with our support as a supplier of consumables and raw materials necessary for manufacturing.
p Irrespective of whether you require the excipients, catalysts or other specific ingredients or materials, we are ready to provide you with our services in this area. Using our wide network of specialist providers, we can guarantee the high consistent quality of the delivered goods, openning the manufacturer a possibility to concentrate on manufacturing the premium class products.
section.form-block.container
.form-block__inner
.form-block__first
h2.def-title Any questions? <br> Contact us!
.form-block__second
form(action="", method="post")
+field-text({
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'name',
placeholder: 'Name',
}
})
+field-text({
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'email',
placeholder: 'E-mail',
}
})
+field-text({
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'phone',
placeholder: 'Phone',
}
})
+btn('contact us', 'ico')(type="button")
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 16H27" stroke="#F36601" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 7L27 16L18 25" stroke="#F36601" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
//- block footer //- block footer
//- p footer //- p footer
......
src/pug/layout.pug
View file @ 1a68edbb
This diff is collapsed.
src/scss/mixins/form-mixins.scss
View file @ 1a68edbb
...@@ -4,20 +4,24 @@ ...@@ -4,20 +4,24 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
min-height: calc(#{$line-height}em + #{$field-padding-vertical} + #{$field-padding-vertical} + 2px); // Привет, IE // min-height: calc(#{$line-height}em + #{$field-padding-vertical} + #{$field-padding-vertical} + 2px);
margin: 0; margin: 0;
border: 1px solid $border-color; border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: $border-radius; border-radius: $border-radius;
padding: $field-padding-vertical $field-padding-horizontal; padding: 18px 20px;
line-height: $line-height; line-height: $line-height;
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
background-color: #fff; background-color: transparent;
-moz-appearance: textfield; // stylelint-disable-line -moz-appearance: textfield; // stylelint-disable-line
appearance: textfield; appearance: textfield;
transition: border-color $transition-time;
color: #fff;
&:focus { &:focus {
@include field-focus; outline: 0;
border-color: #ffffff;
// @include field-focus;
} }
&[disabled], &[disabled],
...@@ -33,17 +37,16 @@ ...@@ -33,17 +37,16 @@
-webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
} }
&[type='color'] { &[type="color"] {
padding: 0; padding: 0;
} }
&::placeholder { &::placeholder {
color: $text-color-muted; color: #fff;
opacity: 1; opacity: 1;
} }
} }
@mixin field-help-text { @mixin field-help-text {
display: block; display: block;
padding-top: 0.4em; padding-top: 0.4em;
...@@ -51,18 +54,17 @@ ...@@ -51,18 +54,17 @@
line-height: 1.2em; line-height: 1.2em;
color: $text-color-muted; color: $text-color-muted;
&:empty { // stylelint-disable-line &:empty {
// stylelint-disable-line
display: none; display: none;
} }
} }
@mixin field-focus { @mixin field-focus {
outline: 0; outline: 0;
box-shadow: 0 0 0 2px rgba($color-main, $opacity); box-shadow: 0 0 0 2px rgba($color-main, $opacity);
} }
@mixin field-name { @mixin field-name {
display: block; display: block;
margin-bottom: 0.4em; margin-bottom: 0.4em;
......
src/scss/variables.scss
View file @ 1a68edbb
...@@ -17,13 +17,16 @@ $color-success: hsl(120, 39%, 54%); ...@@ -17,13 +17,16 @@ $color-success: hsl(120, 39%, 54%);
$color-danger: hsl(2, 64%, 58%); $color-danger: hsl(2, 64%, 58%);
$color-warning: hsl(35, 84%, 62%); $color-warning: hsl(35, 84%, 62%);
$color-1: #f36601;
$color-1-1: #d35800;
$color-2: #1b1b1b;
$color-3: #303030;
$color-vk: #4a76a8; $color-vk: #4a76a8;
$color-fb: #4267b2; $color-fb: #4267b2;
$color-tw: #40a2f5; $color-tw: #40a2f5;
$color-gh: #24292e; $color-gh: #24292e;
// Семантические цвета // Семантические цвета
$text-color: $gray-darkest; $text-color: $gray-darkest;
...@@ -35,11 +38,9 @@ $link-color--hover: darken($color-main, 15%); ...@@ -35,11 +38,9 @@ $link-color--hover: darken($color-main, 15%);
$border-color: $gray-lighten; $border-color: $gray-lighten;
// Базовая типографика // Базовая типографика
$font-size: 16px; $font-size: 18px;
$font-size-h1: 40px; $font-size-h1: 40px;
$font-size-h2: 32px; $font-size-h2: 32px;
...@@ -50,46 +51,41 @@ $font-size-h6: 16px; ...@@ -50,46 +51,41 @@ $font-size-h6: 16px;
$font-size-sm: 0.75em; // 12px от 16px $font-size-sm: 0.75em; // 12px от 16px
$line-height: 1.5; $line-height: 160%;
$typo-margin-vertical: 1em; $typo-margin-vertical: 1em;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; $font-family: "Manrope", sans-serif;
$font-family--monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; $font-family--monospace: "SFMono-Regular", Menlo, Monaco, Consolas,
Liberation Mono, "Courier New", monospace;
// Georgia, Times New Roman, Times, serif // Georgia, Times New Roman, Times, serif
// Ширины // Ширины
$screen-xs: 0; $screen-xs: 0;
$screen-sm: 480px; $screen-sm: 480px;
$screen-md: 768px; $screen-md: 798px;
$screen-lg: 992px; $screen-lg: 1022px;
$screen-xl: 1200px; $screen-xl: 1230px;
$screen-xxl: 1800px; $screen-xxl: 1670px;
$container-sm: 100%; $container-sm: 100%;
$container-md: 100%; $container-md: 100%;
$container-lg: $screen-lg - 30; $container-lg: $screen-lg + 30;
$container-xl: $screen-xl - 30; $container-xl: $screen-xl + 30;
$container-xxl: $screen-xxl - 30; $container-xxl: $screen-xxl + 30;
// Модульная сетка // Модульная сетка
$grid-columns: 12; $grid-columns: 12;
$grid-gutter-width: 30px; $grid-gutter-width: 30px;
// Разное // Разное
$field-padding-vertical: 5px; $field-padding-vertical: 5px;
$field-padding-horizontal: 12px; $field-padding-horizontal: 12px;
$border-radius: 3px; $border-radius: 8px;
$opacity: 0.7; $opacity: 0.7;
$transition-time: 0.3s; $transition-time: 0.3s;
$shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3); $shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment