Commit 862d2297 authored by Yuri Bondarenko's avatar Yuri Bondarenko

mini-gallery

parent 26162d30
...@@ -37,10 +37,7 @@ ...@@ -37,10 +37,7 @@
"at-rule-empty-line-before": [ "at-rule-empty-line-before": [
"always", "always",
{ {
"except": [ "except": ["blockless-after-same-name-blockless", "first-nested"],
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": ["after-comment"] "ignore": ["after-comment"]
} }
], ],
...@@ -114,7 +111,7 @@ ...@@ -114,7 +111,7 @@
"rule-empty-line-before": [ "rule-empty-line-before": [
"always-multi-line", "always-multi-line",
{ {
"ignore": ["after-comment"] "ignore": ["after-comment", "first-nested"]
} }
], ],
"selector-attribute-brackets-space-inside": "never", "selector-attribute-brackets-space-inside": "never",
......
...@@ -37,6 +37,40 @@ const postcssOptions = [ ...@@ -37,6 +37,40 @@ const postcssOptions = [
}) })
]; ];
/**
* gulp-file-include Options
*/
const devIncludeOptions = {
prefix: "@@",
basepath: "@file",
context: {
env: "DEV",
path: "/assets",
version: Date.now()
}
};
const prodIncludeOptions = {
prefix: "@@",
basepath: "@file",
context: {
env: "MS",
path: "/templates/nikolin-day-annonce-2019/assets",
version: Date.now()
}
};
/**
* gulp-version Options
*/
const versionOptions = {
value: "%MDS%",
append: {
key: "v",
to: ["css", "js", ["image", "%TS%"]]
}
};
/* ================================================================= */ /* ================================================================= */
/** /**
...@@ -57,6 +91,7 @@ const devCss = cb => { ...@@ -57,6 +91,7 @@ const devCss = cb => {
return src("./src/assets/css/*.css") return src("./src/assets/css/*.css")
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(include(devIncludeOptions))
.pipe(sourcemaps.write(".")) .pipe(sourcemaps.write("."))
.pipe(dest("./dev/assets/css")) .pipe(dest("./dev/assets/css"))
.pipe(browsersync.stream()); .pipe(browsersync.stream());
...@@ -67,6 +102,7 @@ const prodCss = cb => { ...@@ -67,6 +102,7 @@ const prodCss = cb => {
cb(); cb();
return src("./src/assets/css/*.css") return src("./src/assets/css/*.css")
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(include(prodIncludeOptions))
.pipe(dest("./prod/assets/css")); .pipe(dest("./prod/assets/css"));
}; };
...@@ -117,25 +153,8 @@ const prodImgComponents = cb => { ...@@ -117,25 +153,8 @@ const prodImgComponents = cb => {
// HTML для dev // HTML для dev
const devHtml = () => { const devHtml = () => {
return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"]) return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
.pipe( .pipe(include(devIncludeOptions))
include({ .pipe(version(versionOptions))
prefix: "@@",
basepath: "@file",
context: {
env: "DEV",
path: "/assets"
}
})
)
.pipe(
version({
value: "%MDS%",
append: {
key: "v",
to: ["css", "js", ["image", "%TS%"]]
}
})
)
.pipe(dest("./dev")); .pipe(dest("./dev"));
}; };
...@@ -143,25 +162,8 @@ const devHtml = () => { ...@@ -143,25 +162,8 @@ const devHtml = () => {
const prodHtml = cb => { const prodHtml = cb => {
cb(); cb();
return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"]) return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
.pipe( .pipe(include(prodIncludeOptions))
include({ .pipe(version(versionOptions))
prefix: "@@",
basepath: "@file",
context: {
env: "PROD",
path: "/assets"
}
})
)
.pipe(
version({
value: "%MDS%",
append: {
key: "v",
to: ["css", "js", ["image", "%TS%"]]
}
})
)
.pipe(dest("./prod")); .pipe(dest("./prod"));
}; };
...@@ -185,11 +187,8 @@ task( ...@@ -185,11 +187,8 @@ task(
"DEV", "DEV",
series(devImgComponents, devCss, devJs, devHtml, () => { series(devImgComponents, devCss, devJs, devHtml, () => {
watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss); watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss);
watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs); watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs);
watch("./src/**/*.html", series(devHtml, browserSyncReload)); watch("./src/**/*.html", series(devHtml, browserSyncReload));
watch(["./src/assets/img/**/*", "./src/components/**/*.gif", "./src/components/**/*.jpg", "./src/components/**/*.jpeg", "./src/components/**/*.png", "./src/components/**/*.svg"], parallel(devImgComponents)); watch(["./src/assets/img/**/*", "./src/components/**/*.gif", "./src/components/**/*.jpg", "./src/components/**/*.jpeg", "./src/components/**/*.png", "./src/components/**/*.svg"], parallel(devImgComponents));
browserSync(); browserSync();
......
/* CSS */ /* Vendor Css */
@import url("../../../node_modules/swiper/dist/css/swiper.min.css");
/* Project CSS */
@import url("../../components/ms-header/ms-header.css"); @import url("../../components/ms-header/ms-header.css");
@import url("../../components/ms-about/ms-about.css");
@import url("../../components/ms-mini-gallery/ms-mini-gallery.css");
/* Custom media query */ /* Custom media query */
@custom-media --s (width <= 640px); @custom-media --s (width <= 640px);
@custom-media --m (width <= 1200px); @custom-media --m (width <= 1200px);
/* Fonts */
:root { :root {
font-family: system-ui; --fCirce: "Circe", sans-serif;
} }
(async () => { import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery";
})(); document.addEventListener("DOMContentLoaded", async () => {
\ No newline at end of file console.log("Start");
/**
* минигалерея
*/
new msMiniGallery(".ms-mini-gallery", {
slidesPerView: 1,
spaceBetween: 40,
loop: false,
pagination: {
el: ".ms-mini-gallery__pagination",
type: "bullets"
}
});
});
<svg width="256" height="317" viewBox="0 0 256 317" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M256 0H0V317H256V0Z" fill="white"/>
<path d="M82.1996 68.619V61.8538H65.3258L72.7985 48.5649L66.7721 44.9407L55.4426 65.2364L66.7721 85.5322L72.7985 82.1495L65.3258 68.619H82.1996Z" fill="#E52630"/>
<path d="M100.038 44.9407L93.7703 48.5649L101.484 61.8538H84.6102V68.619H101.484L93.7703 82.1495L100.038 85.5322L111.367 65.2364L100.038 44.9407Z" fill="#E52630"/>
<path d="M109.921 220.595H104.859V225.186H109.921V233.401H114.983V212.864H109.921V220.595Z" fill="#E52630"/>
<path d="M84.3692 224.703H95.6987V222.528C95.6987 221.079 95.4577 219.629 94.9756 218.421C94.4935 217.213 94.0114 216.246 93.2882 215.28C92.565 214.313 91.6008 213.83 90.3955 213.347C89.1903 212.864 87.985 212.622 86.7797 212.622C85.3334 212.622 84.1281 212.864 83.1639 213.347C81.9586 213.83 81.2355 214.555 80.2712 215.521C79.5481 216.488 78.8249 217.454 78.5838 218.904C78.1017 220.112 77.8607 221.562 77.8607 223.253C77.8607 230.26 80.9944 233.884 87.2618 233.884C87.985 233.884 88.7082 233.884 89.4313 233.643C90.1545 233.401 90.8777 233.401 91.3598 233.159C91.6008 232.918 92.0829 232.918 92.324 232.676C92.565 232.435 92.8061 232.435 93.0471 232.193C93.2882 231.951 93.5293 231.71 93.7703 231.468C94.0114 231.226 94.4935 230.985 94.7345 230.502L91.6008 227.361C91.1187 227.844 90.8776 228.085 90.3955 228.327C90.1545 228.569 89.6724 228.81 89.4313 228.81C88.7082 229.052 87.985 229.294 87.0208 229.294C84.1281 229.294 82.6818 227.844 82.4407 224.944C82.4407 224.944 82.4407 224.944 82.4407 224.703C82.4407 224.22 82.4407 222.528 82.4407 221.079C82.4407 219.871 82.9228 218.904 83.4049 218.179C84.1281 217.454 85.0923 216.971 86.2976 216.971C87.5029 216.971 88.4671 217.454 89.1903 218.179C89.9134 218.904 90.1545 220.112 90.3955 221.32H84.3692V224.703Z" fill="#E52630"/>
<path d="M103.412 220.595V216.971V212.864H98.3503V233.401H103.412V228.085V225.186V220.595Z" fill="#E52630"/>
<path d="M186.335 192.81V185.078H181.273V205.615H186.335V197.4V192.81Z" fill="#E52630"/>
<path d="M193.085 185.078V192.81H187.782V197.4H193.085V205.615H198.147V185.078H193.085Z" fill="#E52630"/>
<path d="M127.759 201.266C126.795 201.025 126.313 200.783 125.831 200.058C125.348 199.092 125.107 197.642 125.107 195.709C125.107 194.984 125.107 194.259 125.107 193.534C125.107 192.81 125.348 192.085 125.589 191.602C125.83 190.877 126.072 190.393 126.554 190.152C126.795 189.91 127.277 189.669 127.759 189.669V185.078C125.589 185.319 123.661 186.044 122.215 187.494C121.733 187.977 121.492 188.461 121.25 188.944C121.009 189.427 120.527 189.91 120.527 190.635C120.286 191.36 120.286 191.843 120.045 192.81C120.045 193.534 120.045 194.501 120.045 195.467C120.045 196.434 120.045 197.4 120.045 198.125C120.045 198.85 120.286 199.575 120.527 200.3C120.768 201.025 121.009 201.508 121.25 201.991C121.492 202.474 121.974 202.957 122.456 203.441C123.902 204.89 125.83 205.857 128 205.857V201.266H127.759Z" fill="#E52630"/>
<path d="M136.678 190.635C136.437 189.427 135.714 188.461 134.991 187.494C133.544 186.044 131.616 185.078 129.446 185.078V189.669C129.928 189.669 130.411 189.91 130.652 190.152C131.134 190.635 131.375 190.877 131.616 191.602C131.857 192.085 132.098 192.81 132.098 193.534C132.098 194.259 132.098 194.984 132.098 195.467C132.098 196.192 132.098 196.917 132.098 197.642C132.098 198.367 131.857 198.85 131.616 199.575C131.375 200.058 131.134 200.541 130.652 201.025C130.411 201.266 129.928 201.508 129.446 201.508V206.098C131.857 205.857 133.544 205.132 134.991 203.682C135.473 203.199 135.714 202.716 135.955 202.233C136.196 201.749 136.437 201.266 136.678 200.541C136.919 199.816 136.919 199.092 137.16 198.367C137.16 197.642 137.16 196.675 137.16 195.709C137.16 193.293 137.16 191.843 136.678 190.635Z" fill="#E52630"/>
<path d="M63.6384 227.361C63.8795 226.394 64.1206 225.186 64.3616 224.22C64.6027 222.528 64.8437 220.112 64.8437 217.454H69.4237V227.361H74.4859V212.864H60.0226C60.0226 215.038 60.0226 216.971 60.0226 218.421C60.0226 220.112 59.7816 221.32 59.7816 222.528C59.5405 223.736 59.5405 224.944 59.0584 225.669C58.8174 226.152 58.8173 226.636 58.5763 227.119H63.6384V227.361Z" fill="#E52630"/>
<path d="M76.4143 228.81H55.9247V238.233H60.7458V233.401H72.3164V238.233H77.1375V228.81H76.4143Z" fill="#E52630"/>
<path d="M123.42 229.293V224.22V212.864H118.599V233.401H123.42V229.293Z" fill="#E52630"/>
<path d="M134.509 224.219C134.267 223.495 133.785 222.77 133.062 222.287C132.58 221.803 131.857 221.32 130.893 221.078C130.17 220.837 129.205 220.595 128.241 220.595H124.866V224.461H127.277C128 224.461 128.723 224.703 129.205 225.186C129.687 225.669 129.928 226.152 129.928 227.119C129.928 227.844 129.687 228.569 129.205 229.052C128.723 229.535 128 229.777 127.277 229.777H124.866V233.642H128.241C129.205 233.642 130.17 233.401 130.893 233.159C131.616 232.918 132.339 232.434 133.062 231.71C133.544 231.226 134.026 230.501 134.509 229.535C134.75 228.81 134.991 227.844 134.991 226.877C134.991 225.911 134.991 224.944 134.509 224.219Z" fill="#E52630"/>
<path d="M65.0847 192.81H70.1469V197.4H65.0847V205.615H60.0226V185.078H65.0847V192.81Z" fill="#E52630"/>
<path d="M71.5932 192.81V189.427V185.078H76.6554V205.615H71.5932V200.541V197.4V192.81Z" fill="#E52630"/>
<path d="M171.39 187.736L165.605 197.4V185.078H160.542V205.615H165.605L171.39 195.709V187.736Z" fill="#E52630"/>
<path d="M172.836 185.078V185.319V193.293V193.051V205.615H177.898V185.078H172.836Z" fill="#E52630"/>
<path d="M86.7797 194.984V203.199L92.565 193.051V205.615H97.6271V185.078H92.565L86.7797 194.984Z" fill="#E52630"/>
<path d="M85.3333 194.018V185.078H80.2712V205.615H85.3333V194.018Z" fill="#E52630"/>
<path d="M106.064 201.025V186.769V185.078H101.002V205.615H106.064V201.025Z" fill="#E52630"/>
<path d="M117.635 201.025C117.153 201.025 116.911 201.025 116.429 200.783C116.188 200.541 115.947 200.3 115.706 199.816L114.742 197.4C114.501 196.675 114.019 196.192 113.778 195.709C113.296 195.226 112.814 194.984 112.331 194.743C113.296 194.501 114.019 193.776 114.26 192.81L114.983 190.877C115.224 190.393 115.465 189.91 115.706 189.669C115.947 189.427 116.429 189.427 116.911 189.427H117.635V185.078H115.706C114.26 185.078 113.296 185.32 112.572 185.803C111.849 186.286 111.126 187.252 110.885 188.461L109.921 191.118C109.68 191.602 109.439 192.085 108.957 192.326C108.475 192.568 107.992 192.81 107.51 192.81V197.159C107.992 197.159 108.475 197.4 108.957 197.4C109.439 197.642 109.921 198.125 110.403 198.85L111.608 201.749C112.09 203.199 112.814 204.166 113.778 204.649C114.742 205.132 115.706 205.374 117.153 205.374H118.84V200.783H117.635V201.025Z" fill="#E52630"/>
<path d="M148.731 185.078H142.222C142.222 187.736 142.222 189.669 142.222 191.602C142.222 193.293 141.981 194.984 141.981 196.192C141.74 197.4 141.74 198.367 141.499 199.092C141.258 199.816 141.017 200.3 140.776 200.541C140.535 200.783 140.294 201.025 139.812 201.266C139.571 201.266 139.089 201.508 138.606 201.508H137.883V205.857H139.812C141.017 205.857 142.222 205.615 142.945 205.374C143.91 204.89 144.633 204.166 145.115 203.199C145.597 201.991 146.079 200.541 146.561 198.367C147.043 196.192 147.043 193.534 147.043 190.152H148.731V185.078Z" fill="#E52630"/>
<path d="M150.177 185.078V189.669H151.864V205.615H156.927V185.078H150.177Z" fill="#E52630"/>
<path d="M194.772 150.043C194.772 155.842 190.192 160.433 184.407 160.433C181.032 160.433 178.139 158.983 176.211 156.567L187.299 131.681L193.567 117.908C193.567 117.908 177.175 126.607 170.426 128.298L138.124 72.0015H132.098L129.205 77.0754L159.819 130.714C152.106 131.922 142.222 133.13 129.687 133.13V143.278C149.936 143.037 164.158 140.62 173.077 138.204L167.774 150.043L165.364 155.117C163.676 158.017 160.783 159.95 157.409 160.433V167.198C162.712 166.956 167.292 164.299 170.185 160.191C173.318 164.54 178.38 167.198 184.166 167.198C193.808 167.198 201.522 159.466 201.522 149.802H194.772V150.043Z" fill="#E52630"/>
<path d="M146.079 150.043H139.33C139.33 155.842 134.508 160.433 128.964 160.433C123.179 160.433 118.599 155.842 118.599 150.043H111.849C111.849 155.359 107.751 159.95 102.448 160.433V167.198C107.751 166.957 112.09 164.299 115.224 160.191C118.358 164.54 123.42 167.198 129.205 167.198C134.991 167.198 139.812 164.54 143.186 160.191C146.079 164.057 150.659 166.715 155.721 167.198V160.433C150.177 159.95 146.079 155.601 146.079 150.043Z" fill="#E52630"/>
<path d="M157.65 59.4375H124.866L85.5744 128.54C78.8249 126.848 61.4689 117.425 61.4689 117.425L82.4407 152.701L80.9944 155.359C79.0659 158.5 75.9322 160.433 72.0753 160.433C66.29 160.433 61.71 155.842 61.71 150.043H54.9604C54.9604 159.708 62.6742 167.44 72.3164 167.44C78.5838 167.44 83.887 164.057 87.0207 159.225C89.9134 163.816 94.7345 166.957 100.52 167.44V160.675C97.145 160.191 94.0113 158.258 92.565 155.117L90.1544 150.285L84.3691 138.688C93.5292 141.104 107.751 143.52 128.241 143.52V133.372C115.224 133.372 104.859 132.405 96.904 130.956L122.215 84.5655L130.652 69.5854H148.972H157.65L154.275 64.5114L157.65 59.4375Z" fill="#E52630"/>
<path d="M60.9868 267.711V252.73L56.1657 256.838V252.247L60.9868 248.14H65.3258V267.711H60.9868Z" fill="#E52630"/>
<path d="M77.1375 271.576H72.5575L81.2354 252.006H74.2448V255.63H70.1469V248.14H85.8155V252.006L77.1375 271.576Z" fill="#E52630"/>
<path d="M102.93 256.354H88.467V260.22H102.93V256.354Z" fill="#E52630"/>
<path d="M111.126 267.711V252.73L106.305 256.838V252.247L111.126 248.14H115.224V267.711H111.126Z" fill="#E52630"/>
<path d="M135.473 255.388C135.473 256.838 135.232 258.046 134.991 259.012C134.508 260.22 134.026 261.428 133.303 262.636L128.241 271.818H123.661L129.205 262.153C128.723 262.395 128.482 262.395 128 262.636C127.518 262.636 127.277 262.636 126.554 262.636C125.589 262.636 124.866 262.395 124.143 262.153C123.42 261.912 122.697 261.428 121.974 260.704C121.492 259.979 121.009 259.254 120.527 258.529C120.286 257.563 120.045 256.596 120.045 255.388C120.045 254.18 120.286 253.213 120.527 252.247C121.009 251.281 121.492 250.556 122.215 249.831C122.938 249.106 123.661 248.623 124.625 248.381C125.589 248.14 126.554 247.898 127.759 247.898C128.723 247.898 129.928 248.14 130.652 248.381C131.616 248.623 132.339 249.106 133.062 249.831C133.785 250.556 134.267 251.281 134.75 252.247C135.232 253.213 135.473 254.18 135.473 255.388ZM131.134 255.388C131.134 254.18 130.893 253.213 130.169 252.489C129.446 251.764 128.723 251.522 127.759 251.522C126.795 251.522 126.072 251.764 125.348 252.489C124.625 253.213 124.384 254.18 124.384 255.388C124.384 256.596 124.625 257.563 125.348 258.287C126.072 259.012 126.795 259.254 127.759 259.254C128.723 259.254 129.446 259.012 130.169 258.287C130.893 257.563 131.134 256.596 131.134 255.388Z" fill="#E52630"/>
<path d="M159.819 267.71V257.804L156.685 264.086H154.275L150.9 257.804V267.71H146.802V250.556H150.9L155.48 259.495L159.819 250.556H164.158V267.71H159.819Z" fill="#E52630"/>
<path d="M177.657 267.71V266.261C177.175 266.744 176.934 266.985 176.693 266.985C176.452 267.227 176.211 267.227 175.729 267.469C175.006 267.71 174.282 267.952 173.318 267.952C171.39 267.952 170.185 267.469 168.979 266.502C168.015 265.536 167.533 264.328 167.533 262.636C167.533 261.187 168.015 259.979 168.979 259.012C169.943 258.046 171.39 257.804 173.318 257.804H177.416V256.838C177.416 255.871 177.175 255.146 176.693 254.663C176.211 254.18 175.247 253.938 174.282 253.938C173.8 253.938 173.559 253.938 173.318 253.938C173.077 253.938 172.836 254.18 172.595 254.18C172.354 254.18 172.113 254.421 171.872 254.663C171.631 254.905 171.39 255.146 171.149 255.388L168.497 252.73C168.738 252.489 168.979 252.247 169.22 252.005C169.461 251.764 169.702 251.764 169.702 251.522C169.943 251.28 169.943 251.28 170.185 251.28C170.426 251.28 170.667 251.039 170.667 251.039C171.631 250.556 172.836 250.314 174.524 250.314C179.345 250.314 181.755 252.247 181.755 256.354V267.469H177.657V267.71ZM174.041 260.462C173.318 260.462 172.595 260.703 172.354 260.945C171.872 261.187 171.631 261.67 171.631 262.395C171.631 263.603 172.595 264.328 174.282 264.328C175.488 264.328 176.211 264.086 176.693 263.603C177.175 263.12 177.416 262.395 177.416 261.428V260.462H174.041Z" fill="#E52630"/>
<path d="M194.772 261.187H194.29C193.808 261.187 193.567 261.187 193.326 261.187C193.085 261.187 192.844 261.428 192.603 261.428C192.362 261.67 192.362 261.67 192.121 261.912C191.879 262.153 191.88 262.395 191.638 262.636L190.915 264.569C190.433 265.536 189.951 266.261 189.469 266.744C188.987 267.227 188.023 267.469 186.817 267.469H184.889V263.603H185.612C186.094 263.603 186.335 263.603 186.576 263.361C186.817 263.361 187.058 263.12 187.299 262.636L187.782 261.428C187.782 261.187 188.023 260.945 188.264 260.704C188.505 260.462 188.746 260.22 188.987 259.979C188.505 259.979 188.023 259.737 187.541 259.495C187.058 259.254 186.817 259.012 186.335 258.529C186.094 258.046 185.853 257.804 185.612 257.079C185.371 256.596 185.371 256.113 185.371 255.388C185.371 254.663 185.612 253.938 185.853 253.213C186.094 252.489 186.576 252.005 187.058 251.522C187.541 251.039 188.264 250.556 188.987 250.314C189.71 250.072 190.433 249.831 191.397 249.831H199.352V266.985H195.013V261.187H194.772ZM194.772 254.18H191.638C190.915 254.18 190.433 254.422 189.951 254.663C189.469 255.146 189.469 255.63 189.469 256.113C189.469 256.596 189.71 257.079 189.951 257.562C190.433 258.046 190.915 258.046 191.638 258.046H194.772V254.18Z" fill="#E52630"/>
</svg>
.ms-about {
padding: 0 0 70px 60px;
display: flex;
margin-top: -100px;
@media (--m) {
padding: 0 30px;
margin-top: -140 / 768 * 100vw;
flex-direction: column;
}
@media (--s) {
padding: 0 20px 20px 20px;
margin-top: -30vw;
}
}
.ms-about__inner {
width: 45.833vw;
max-width: 690px;
padding: 70px 10px;
text-align: center;
background: linear-gradient(188.21deg, #fbbb00 7.16%, #f8a507 19.27%, #ef6d19 44.51%, #e52630 72.99%);
position: relative;
overflow: hidden;
@media (--m) {
padding: 30px 10px;
width: 100%;
max-width: 100%;
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@@path/img/ms-about/pattern_bg.svg");
background-size: cover;
opacity: 0.3;
}
}
.ms-about__logo {
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
& img {
width: 260px;
@media (--s) {
width: 200px;
}
}
}
.ms-about__title {
display: none;
color: #fff;
font-family: var(--fCirce);
font-size: 48px;
line-height: 1.2;
font-weight: bold;
margin-top: 40px;
text-transform: uppercase;
position: relative;
@media (--s) {
font-size: 30px;
margin-top: 20px;
}
}
.ms-about__date {
color: #fff;
font-family: var(--fCirce);
font-size: 22px;
margin-top: 40px;
display: none;
@media (--s) {
font-size: 18px;
}
}
.ms-about__left {
@media (--m) {
width: 100%;
}
}
.ms-about__right {
padding-left: 70px;
padding-right: 150px;
padding-top: 155px;
color: #111;
flex: 1;
@media (--m) {
padding-top: 60px;
padding-left: 0;
padding-right: 0;
}
}
.ms-about__text {
& h2 {
font-size: 40px;
font-weight: normal;
margin-top: 0;
margin-bottom: 20px;
font-family: var(--fCirce);
@media (--m) {
margin-top: 0;
}
}
}
.ms-about__primary {
font-size: 24px;
margin-bottom: 20px;
font-family: var(--fCirce);
& br {
display: none;
@media (--s) {
display: block;
}
}
}
.ms-about__secondary {
font-size: 18px;
font-family: var(--fCirce);
}
.ms-about__pattern {
position: absolute;
}
.ms-about__pattern--left {
bottom: 10px;
left: 0;
width: 50%;
transform: translateX(-50%);
@media (--s) {
bottom: 30px;
}
}
.ms-about__pattern--right {
top: 0;
right: 0;
width: 56%;
transform: translate(50%, -50%);
}
.ms-about__network-share {
margin-top: 40px;
}
<section class="ms-about">
<div class="ms-about__left">
<div class="ms-about__inner">
<div class="ms-about__logo">
<img src="@@path/img/ms-about/logo.svg" alt="Фестиваль «Николин день»" />
</div>
<div class="ms-about__title">
Фестиваль «Николин день»
</div>
<div class="ms-about__date">
17–19 мая
</div>
</div>
<div class="ms-about__network-share">
<div id="ac-my-share" class="ya-share2"></div>
</div>
</div>
<div class="ms-about__right">
<div class="ms-about__text">
<h2>О фестивале</h2>
<p class="ms-about__secondary">
<b>«Морские» флешмобы, карнавальные шествия и десятки уличных представлений: добро пожаловать на московский фестиваль искусств «Николин день»!</b>
<br /><br />
С 17 по 19 мая он будет дарить жителям города и туристам море вдохновения и интересных занятий: театральные представления и концерты, творческие мастер-классы и флешмобы, подвижные игры и карнавальные шествия. Гости праздника смогут спустить на воду «кораблик желаний» — они обязательно исполнятся! — или даже найти новых друзей с помощью удивительной Венецианской ладьи, которая появится на Манежной площади. Читайте подробности ниже.
</p>
</div>
</div>
</section>
This source diff could not be displayed because it is too large. You can view the blob instead.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="4.2333331mm"
height="4.4629121mm"
viewBox="0 0 4.2333331 4.4629121"
version="1.1"
id="svg875"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="share-facebook.svg">
<defs
id="defs869" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="1.6253051"
inkscape:cy="24.975296"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1031"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1" />
<metadata
id="metadata872">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-145.29405,-100.48878)">
<g
transform="matrix(0.26458333,0,0,0.26458333,145.16925,100.2242)"
id="fb">
<g
id="Rectangle">
<path
style="clip-rule:evenodd;fill:#2a3d86;fill-rule:evenodd"
inkscape:connector-curvature="0"
d="M 0,2 C 0,0.895431 0.895431,0 2,0 h 12 c 1.1046,0 2,0.895431 2,2 v 12 c 0,1.1046 -0.8954,2 -2,2 H 2 C 0.895431,16 0,15.1046 0,14 Z"
transform="translate(0.47168,1)"
id="path2" />
</g>
<g
id="Shape">
<path
style="fill:#ffffff"
inkscape:connector-curvature="0"
d="M 1.97561,0.665569 C 2.4878,0.221856 3.14634,0 3.87805,0 4.60976,0 5.26829,0 6,0 c 0,0.739521 0,1.47904 0,2.29252 -0.43902,0 -0.87805,0 -1.39024,0 -0.29269,0 -0.58537,0.22185 -0.65854,0.51766 0,0.51767 0,1.03533 0,1.47904 0.65854,0 1.31707,0 1.97561,0 -0.07317,0.73952 -0.14634,1.47904 -0.21951,2.14461 -0.58537,0 -1.17073,0 -1.7561,0 0,2.14462 0,4.28927 0,6.43387 -0.87805,0 -1.7561,0 -2.63415,0 0,-2.1446 0,-4.28925 0,-6.43387 -0.439021,0 -0.878046,0 -1.31707,0 0,-0.73952 0,-1.47904 0,-2.14461 0.439024,0 0.878049,0 1.31707,0 0,-0.73952 0,-1.40509 0,-2.14461 0,-0.59162 0.21952,-1.10928 0.65854,-1.479041 z"
transform="translate(7.47168,5)"
id="path5" />
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="2.4974263mm"
height="3.9522531mm"
viewBox="0 0 2.4974263 3.952253"
version="1.1"
id="svg1470"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="share-ok.svg">
<defs
id="defs1464" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.4"
inkscape:cx="3.3886878"
inkscape:cy="4.2332462"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1031"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1" />
<metadata
id="metadata1467">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-105.9099,-86.739966)">
<g
transform="matrix(0.26458333,0,0,0.26458333,61.535839,86.330074)"
id="ok">
<g
id="Shape_3">
<path
style="fill:#f58221"
inkscape:connector-curvature="0"
d="M 3.97386,3.0206 C 2.73043,2.92906 1.67829,2.65446 0.721804,1.9222 0.626155,1.83066 0.530506,1.73913 0.339209,1.6476 -0.0433865,1.28146 -0.139035,0.823799 0.24356,0.366133 0.530506,0 1.00875,-0.0915332 1.48699,0.0915332 c 0.09565,0 0.1913,0.0915328 0.28695,0.1830668 C 3.49562,1.373 5.88684,1.46453 7.60852,0.366133 7.79982,0.2746 7.99111,0.0915332 8.18241,0.0915332 8.56501,0 8.9476,0.0915332 9.23455,0.457666 9.5215,0.823799 9.5215,1.28146 9.1389,1.55606 8.66066,2.01373 8.08676,2.37986 7.41722,2.65446 6.84333,2.83753 6.17379,3.0206 5.50425,3.11213 c 0.09564,0.09153 0.19129,0.18306 0.19129,0.18306 0.86084,0.8238 1.81733,1.73914 2.67817,2.56293 0.28695,0.2746 0.3826,0.64074 0.1913,1.00687 -0.1913,0.36613 -0.5739,0.64073 -0.95649,0.5492 -0.28695,0 -0.47824,-0.18307 -0.66954,-0.2746 C 6.26944,6.49886 5.59989,5.85812 4.93035,5.21739 4.73905,5.03433 4.64341,5.03433 4.45211,5.21739 3.78257,5.85812 3.11302,6.59039 2.34783,7.23112 2.15654,7.41419 1.77394,7.50572 1.48699,7.32265 1.1044,7.13959 0.817453,6.77346 0.913102,6.40732 c 0,-0.2746 0.191298,-0.45766 0.286948,-0.64073 0.86084,-0.8238 1.81733,-1.73913 2.67817,-2.56293 0,-0.09153 0.09564,-0.09153 0.09564,-0.18306 z"
transform="translate(167.713,9.05492)"
id="path13" />
</g>
<g
id="Shape_4">
<path
style="clip-rule:evenodd;fill:#f58221;fill-rule:evenodd"
inkscape:connector-curvature="0"
d="m 0,3.75286 c 0,2.10526 1.81738,3.75286 3.92188,3.75286 2.19921,0 3.92089,-1.6476 3.92089,-3.66133 C 7.84277,1.73913 6.12109,0 3.92188,0 1.81738,0 0,1.6476 0,3.75286 Z M 4.01758,1.9222 c 1.05176,0 1.91308,0.8238 1.91308,1.83066 0,1.00687 -0.86132,1.83066 -1.91308,1.83066 -1.05274,0 -1.91309,-0.82379 -1.91309,-1.83066 0,-1.00686 0.86035,-1.83066 1.91309,-1.83066 z"
transform="translate(168.53,1.5492)"
id="path16" />
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="4.2333331mm"
height="3.6425452mm"
viewBox="0 0 4.2333332 3.6425451"
version="1.1"
id="svg1470"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="share-twitter.svg">
<defs
id="defs1464" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.4"
inkscape:cx="4.5136873"
inkscape:cy="0.40251003"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1031"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1" />
<metadata
id="metadata1467">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-105.61224,-86.036125)">
<g
transform="matrix(0.26458333,0,0,0.26458333,43.964328,85.242375)"
id="11. Twitter">
<path
style="clip-rule:evenodd;fill:#2aa4f2;fill-rule:evenodd"
inkscape:connector-curvature="0"
d="M 14.1157,2.17635 C 14.7938,1.74728 15.3132,1.0658 15.5594,0.253544 14.9243,0.652791 14.2215,0.9419 13.4732,1.09793 12.8751,0.422192 12.0222,0 11.0782,0 9.264,0 7.79446,1.55683 7.79446,3.4762 7.79446,3.7481 7.824,4.01311 7.87938,4.26666 5.15323,4.1221 2.73354,2.73851 1.11385,0.635582 0.832,1.14955 0.669538,1.74613 0.669538,2.38401 c 0,1.20577 0.579692,2.26928 1.460922,2.89224 C 1.59138,5.25904 1.08554,5.10186 0.643692,4.84144 c 0,0.01491 0,0.02982 0,0.04474 0,1.68303 1.129848,3.08842 2.632618,3.40621 C 3.00185,8.3727 2.71138,8.41515 2.41108,8.41515 2.19938,8.41515 1.99385,8.39335 1.79446,8.3532 2.21169,9.73335 3.424,10.7384 4.86031,10.767 3.73662,11.6986 2.32123,12.2539 0.784,12.2539 0.518154,12.2539 0.257231,12.239 0,12.2045 c 1.45354,0.9878 3.17785,1.5626 5.03262,1.5626 6.03688,0 9.33908,-5.29573 9.33908,-9.88821 0,-0.1503 -0.0025,-0.30059 -0.0099,-0.44973 C 15.0043,2.93928 15.5606,2.32664 16,1.63026 15.4117,1.90675 14.7791,2.09375 14.1157,2.17635 Z"
transform="translate(233,3)"
id="path20" />
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="5.0270743mm"
height="2.9148881mm"
viewBox="0 0 5.0270743 2.9148881"
version="1.1"
id="svg1470"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="share-vk.svg">
<defs
id="defs1464" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.4"
inkscape:cx="7.463786"
inkscape:cy="3.7733519"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1031"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1" />
<metadata
id="metadata1467">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-104.8317,-87.655651)">
<g
transform="matrix(0.26458333,0,0,0.26458333,81.927674,86.792273)"
id="vk">
<g
id="Shape_2">
<path
style="fill:#48688c"
inkscape:connector-curvature="0"
d="m 18.8758,9.92913 c 0,0 0,-0.11156 -0.1104,-0.11156 C 18.4342,9.25975 17.7719,8.47881 16.8888,7.5863 16.4473,7.14005 16.2265,6.91692 16.1161,6.80536 15.8954,6.58223 15.8954,6.24754 16.0058,6.02442 16.1161,5.80129 16.3369,5.35504 16.8888,4.68566 17.1096,4.23941 17.3304,3.90472 17.4408,3.68159 18.5446,2.1197 19.0965,1.11563 18.9861,0.66938 L 18.8758,0.557817 c 0,-0.111564 -0.1104,-0.111564 -0.3312,-0.111564 -0.2208,0 -0.3312,-0.111563 -0.6623,0 h -2.87 c 0,0 -0.1104,0 -0.2208,0 -0.1104,0 -0.1104,0 -0.1104,0 0,0 -0.1103,0 -0.1103,0.111564 0,0 -0.1104,0.111563 -0.1104,0.223126 -0.3312,0.780947 -0.6623,1.561887 -1.1039,2.231267 -0.2207,0.44625 -0.4415,0.78094 -0.6623,1.11563 -0.2207,0.33469 -0.3311,0.55782 -0.5519,0.66938 -0.1104,0.11157 -0.2208,0.22313 -0.3312,0.33469 -0.1103,0.11156 -0.2207,0.11156 -0.2207,0.11156 -0.1104,0 -0.1104,0 -0.2208,0 C 11.2592,5.13191 11.1488,5.13191 11.1488,5.02035 11.0385,4.90879 11.0385,4.79722 11.0385,4.5741 c 0,-0.11157 0,-0.33469 0,-0.44626 0,-0.11156 0,-0.22312 0,-0.44625 0,-0.22313 0,-0.33469 0,-0.44625 0,-0.22313 0,-0.55782 0,-0.78095 0,-0.33469 0,-0.55781 0,-0.66938 0,-0.22312 0,-0.33469 0,-0.55781 0,-0.22313 0,-0.334694 0,-0.446257 0,-0.111563 -0.1104,-0.223126 -0.1104,-0.33469 0,-0.111563 -0.1104,-0.223126 -0.2208,-0.223126 C 10.5969,0.111563 10.4865,0.111563 10.3761,0.111563 10.045,0 9.60345,0 9.05153,0 7.8373,0 7.06461,0.111563 6.62307,0.223127 c -0.11038,0 -0.22077,0.111563 -0.33115,0.223126 -0.11039,0.111564 -0.11039,0.223127 0,0.223127 0.44154,0.111563 0.66231,0.223126 0.88307,0.44625 V 1.2272 c 0,0.11156 0.11039,0.22312 0.11039,0.44625 0,0.22313 0.11038,0.44625 0.11038,0.78094 0,0.44626 0,0.89251 0,1.2272 0,0.33469 -0.11038,0.66938 -0.11038,0.78094 0,0.33469 -0.11039,0.44626 -0.11039,0.55782 -0.11038,0.11156 -0.11038,0.22312 -0.11038,0.22312 -0.11039,0 -0.22077,0 -0.22077,0 -0.11038,0 -0.22077,0 -0.33115,-0.11156 -0.22077,0 -0.44154,-0.11156 -0.55193,-0.33469 C 5.85038,4.68566 5.62961,4.46253 5.51923,4.12784 5.29846,3.79315 5.07769,3.45846 4.9673,3.12377 L 4.74653,2.78908 C 4.63615,2.56596 4.52577,2.34283 4.305,2.00814 4.19461,1.56189 4.08423,1.2272 3.86346,0.892506 c 0,-0.111563 -0.11039,-0.223126 -0.22077,-0.334689 0,0 -0.11039,0 -0.11039,-0.111564 -0.11038,0 -0.11038,0 -0.22076,-0.111563 H 0.551923 C 0.220769,0.33469 0.110385,0.446253 0,0.557817 V 0.66938 0.780943 C 0,0.892506 0,0.892506 0.110385,1.00407 0.331154,2.1197 0.772692,3.01221 1.21423,3.90472 1.65577,4.79722 2.09731,5.4666 2.42846,6.02442 2.75961,6.58223 3.09077,7.02849 3.5323,7.5863 3.86346,8.03256 4.08423,8.36725 4.19461,8.47881 4.305,8.59037 4.41538,8.70194 4.41538,8.8135 l 0.22077,0.22313 c 0.11038,0.11156 0.44154,0.33469 0.66231,0.55781 0.33115,0.22313 0.6623,0.44626 0.99346,0.66936 0.33115,0.2231 0.77269,0.4463 1.32461,0.5578 0.55192,0.1116 0.99346,0.2232 1.435,0.1116 h 1.10387 c 0.2207,0 0.4415,-0.1116 0.5519,-0.2231 0,0 0,-0.1116 0.1104,-0.2232 0,-0.1115 0,-0.2231 0,-0.2231 0,-0.33467 0,-0.55779 0.1104,-0.78092 0,-0.22313 0.1104,-0.44625 0.2207,-0.55782 C 11.2592,8.8135 11.2592,8.70194 11.3696,8.59037 11.48,8.47881 11.48,8.47881 11.5904,8.47881 h 0.1104 c 0.1103,0 0.3311,0 0.5519,0.11156 0.2208,0.11157 0.4415,0.33469 0.6623,0.55782 0.2208,0.22313 0.4415,0.44625 0.6623,0.78094 0.2208,0.33467 0.5519,0.55777 0.6623,0.66937 l 0.2208,0.1116 c 0.1104,0.1115 0.3311,0.1115 0.5519,0.2231 0.2208,0.1116 0.4415,0.1116 0.5519,0 h 2.5389 c 0.2207,0 0.4415,0 0.5519,-0.1116 0.1104,-0.1115 0.2208,-0.2231 0.2208,-0.2231 0,-0.1116 0,-0.2231 0,-0.3347 0.1103,-0.2231 0,-0.33467 0,-0.33467 z"
transform="translate(86.5664,3.26316)"
id="path9" />
</g>
</g>
</g>
</svg>
.ya-share2__counter {
display: inline-block;
}
.ya-share2__item_service_facebook {
& .ya-share2__badge {
background: none;
margin-left: 0 !important;
}
& .ya-share2__icon {
background: url("@@path/img/ms-about/share-facebook.svg") center center no-repeat;
background-size: contain;
}
}
.ya-share2__item_service_vkontakte {
& .ya-share2__badge {
background: none;
}
& .ya-share2__icon {
background: url("@@path/img/ms-about/share-vk.svg") center center no-repeat;
background-size: contain;
}
}
.ya-share2__item_service_odnoklassniki {
& .ya-share2__badge {
background: none;
}
& .ya-share2__icon {
background: url("@@path/img/ms-about/share-ok.svg") center center no-repeat;
background-size: contain;
}
}
.ya-share2__item_service_twitter {
& .ya-share2__badge {
background: none;
padding-right: 12px;
}
& .ya-share2__icon {
background: url("@@path/img/ms-about/share-twitter.svg") center center no-repeat;
background-size: contain;
}
}
.ya-share2__item_service_telegram {
& .ya-share2__badge {
background: none;
border-right: unset !important;
}
& .ya-share2__icon {
background: url("@@path/img/ms-about/share-telegram.svg") center center no-repeat;
background-size: contain;
}
}
.ya-share2__container_size_m .ya-share2__counter {
color: #8a8a8a;
}
.ya-share2 {
& .ya-share2__list {
& .ya-share2__badge {
margin-left: 12px;
border-right: 1px solid #c5c5c5;
border-radius: 0;
}
}
}
.ms-header { .ms-header {
background: url("@@path/img/ms-header/kit6.jpg") no-repeat; background: url("@@path/img/ms-header/main.jpg") center center no-repeat;
background-size: cover; background-size: cover;
background-position: center;
max-height: 580px; max-height: 580px;
height: 40vw; height: 40vw;
......
.ms-mini-gallery {
margin: 0 60px 90px 60px;
position: relative;
@media (--m) {
margin: 50px 30px 70px 30px;
}
@media (--s) {
margin: 0;
width: 100%;
}
}
.ms-mini-gallery__list {
display: grid;
grid-template-areas:
"i1 i2"
"i3 i4";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 20px;
width: 100%;
@media (--s) {
display: flex;
}
}
.ms-mini-gallery__item {
display: flex;
& a {
display: block;
& img {
display: block;
width: 100%;
}
}
&:nth-child(1) {
grid-area: i1;
justify-content: flex-end;
align-items: flex-end;
& a {
width: 50%;
@media (--s) {
width: 100%;
}
}
}
&:nth-child(2) {
grid-area: i2;
justify-content: flex-start;
align-items: flex-end;
& a {
width: 100%;
@media (--s) {
width: 100%;
}
}
}
&:nth-child(3) {
grid-area: i3;
justify-content: flex-end;
align-items: flex-start;
& a {
width: 30%;
@media (--s) {
width: 100%;
}
}
}
&:nth-child(4) {
grid-area: i4;
justify-content: flex-start;
align-items: flex-start;
& a {
width: 60%;
@media (--s) {
width: 100%;
}
}
}
}
.ms-mini-gallery__pagination {
display: none;
@media (--s) {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
& .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #cecece;
opacity: 1;
}
& .swiper-pagination-bullet-active {
background: #e30613;
}
}
.ms-mini-gallery__pattern {
position: absolute;
opacity: 0.3;
}
.ms-mini-gallery__pattern--left {
top: 0;
left: 0;
width: 45%;
}
.ms-mini-gallery__pattern--right {
bottom: 0;
right: 0;
width: 56%;
@media (--s) {
display: none;
}
}
<section class="ms-mini-gallery swiper-container">
<!-- prettier-ignore -->
<div class="ms-mini-gallery__list swiper-wrapper">
@@loop( 'ms-mini-gallery__item.html', [
{
"img": "1.jpg"
},
{
"img": "2.jpg"
},
{
"img": "3.jpg"
},
{
"img": "4.jpg"
}
])
</div>
<div class="ms-mini-gallery__pagination"></div>
</section>
/**
*
*/
import { Swiper, Navigation, Pagination, Scrollbar } from "swiper/dist/js/swiper.esm.js";
/**
*
*/
Swiper.use([Navigation, Pagination, Scrollbar]);
/**
*
*/
export default class msMiniGallery {
constructor(selector, options) {
this.carousel = null;
const widthChange = e => {
if (e.matches) {
/* < 640 */
if (!this.carousel) {
this.carousel = new Swiper(selector, options);
}
} else {
/* > 640 */
if (this.carousel) {
this.carousel.destroy();
}
}
};
const mq = window.matchMedia("(max-width: 640px)");
mq.addListener(widthChange);
widthChange(mq);
}
}
<div class="ms-mini-gallery__item swiper-slide">
<a href="@@path/img/ms-mini-gallery/img/@@img" data-fancybox="mini-gallery">
<img src="@@path/img/ms-mini-gallery/img/@@img" alt="@@img" />
</a>
</div>
...@@ -6,13 +6,6 @@ ...@@ -6,13 +6,6 @@
<body> <body>
} @@if( env == 'MS' || env == 'MOS' || env == 'BNWEB') { } @@if( env == 'MS' || env == 'MOS' || env == 'BNWEB') {
<!-- Vendor styles -->
<style>
@@include( '../prod/assets/css/vendor.css', {
"path": "@@path"
})
</style>
<!-- App styles --> <!-- App styles -->
<style> <style>
@@include( '../prod/assets/css/app.css', { @@include( '../prod/assets/css/app.css', {
...@@ -25,10 +18,10 @@ ...@@ -25,10 +18,10 @@
@@include( './components/ms-header/ms-header.html' ) @@include( './components/ms-header/ms-header.html' )
<!-- О фестивале --> <!-- О фестивале -->
<!-- @ @include( './components/ms-about/ms-about.html' ) --> @@include( './components/ms-about/ms-about.html' )
<!-- Мини-Галерея --> <!-- Мини-Галерея -->
<!-- @ @include( './components/ms-mini-gallery/ms-mini-gallery.html' ) --> @@include( './components/ms-mini-gallery/ms-mini-gallery.html' )
<!-- Инфо слайдер --> <!-- Инфо слайдер -->
<!-- @ @include( './components/ms-info-carousel/ms-info-carousel.html' ) --> <!-- @ @include( './components/ms-info-carousel/ms-info-carousel.html' ) -->
......
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