Skip to content

D
default2
Commit 862d2297 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

mini-gallery

parent 26162d30
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2581 additions and 62 deletions
.stylelintrc.json
View file @ 862d2297
......@@ -37,10 +37,7 @@
"at-rule-empty-line-before": [
"always",
{
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"except": ["blockless-after-same-name-blockless", "first-nested"],
"ignore": ["after-comment"]
}
],
......@@ -114,7 +111,7 @@
"rule-empty-line-before": [
"always-multi-line",
{
"ignore": ["after-comment"]
"ignore": ["after-comment", "first-nested"]
}
],
"selector-attribute-brackets-space-inside": "never",
......
gulpfile.js
View file @ 862d2297
......@@ -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 => {
return src("./src/assets/css/*.css")
.pipe(sourcemaps.init())
.pipe(postcss(postcssOptions))
.pipe(include(devIncludeOptions))
.pipe(sourcemaps.write("."))
.pipe(dest("./dev/assets/css"))
.pipe(browsersync.stream());
......@@ -67,6 +102,7 @@ const prodCss = cb => {
cb();
return src("./src/assets/css/*.css")
.pipe(postcss(postcssOptions))
.pipe(include(prodIncludeOptions))
.pipe(dest("./prod/assets/css"));
};
......@@ -117,25 +153,8 @@ const prodImgComponents = cb => {
// HTML для dev
const devHtml = () => {
return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
.pipe(
include({
prefix: "@@",
basepath: "@file",
context: {
env: "DEV",
path: "/assets"
}
})
)
.pipe(
version({
value: "%MDS%",
append: {
key: "v",
to: ["css", "js", ["image", "%TS%"]]
}
})
)
.pipe(include(devIncludeOptions))
.pipe(version(versionOptions))
.pipe(dest("./dev"));
};
......@@ -143,25 +162,8 @@ const devHtml = () => {
const prodHtml = cb => {
cb();
return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
.pipe(
include({
prefix: "@@",
basepath: "@file",
context: {
env: "PROD",
path: "/assets"
}
})
)
.pipe(
version({
value: "%MDS%",
append: {
key: "v",
to: ["css", "js", ["image", "%TS%"]]
}
})
)
.pipe(include(prodIncludeOptions))
.pipe(version(versionOptions))
.pipe(dest("./prod"));
};
......@@ -185,11 +187,8 @@ task(
"DEV",
series(devImgComponents, devCss, devJs, devHtml, () => {
watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss);
watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs);
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));
browserSync();
......
src/assets/css/app.css
View file @ 862d2297
/* 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-about/ms-about.css");
@import url("../../components/ms-mini-gallery/ms-mini-gallery.css");
/* Custom media query */
@custom-media --s (width <= 640px);
@custom-media --m (width <= 1200px);
/* Fonts */
:root {
font-family: system-ui;
--fCirce: "Circe", sans-serif;
}
src/assets/js/app.js
View file @ 862d2297
(async () => {
import msMiniGallery from "../../components/ms-mini-gallery/ms-mini-gallery";
})();
\ No newline at end of file
document.addEventListener("DOMContentLoaded", async () => {
console.log("Start");
/**
* минигалерея
*/
new msMiniGallery(".ms-mini-gallery", {
slidesPerView: 1,
spaceBetween: 40,
loop: false,
pagination: {
el: ".ms-mini-gallery__pagination",
type: "bullets"
}
});
});
src/components/ms-about/logo.svg 0 → 100644
View file @ 862d2297
This diff is collapsed.
src/components/ms-about/ms-about.css 0 → 100644
View file @ 862d2297
.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;
}
src/components/ms-about/ms-about.html 0 → 100644
View file @ 862d2297
<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>
src/components/ms-about/pattern_bg.svg 0 → 100644
View file @ 862d2297
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/ms-about/share-facebook.svg 0 → 100644
View file @ 862d2297
<?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>
src/components/ms-about/share-ok.svg 0 → 100644
View file @ 862d2297
<?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>
src/components/ms-about/share-twitter.svg 0 → 100644
View file @ 862d2297
<?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>
src/components/ms-about/share-vk.svg 0 → 100644
View file @ 862d2297
<?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>
src/components/ms-about/ya-share.css 0 → 100644
View file @ 862d2297
.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;
}
}
}
src/components/ms-header/ms-header.css
View file @ 862d2297
.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-position: center;
max-height: 580px;
height: 40vw;
......
src/components/ms-mini-gallery/ms-mini-gallery.css 0 → 100644
View file @ 862d2297
.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;
}
}
src/components/ms-mini-gallery/ms-mini-gallery.html 0 → 100644
View file @ 862d2297
<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>
src/components/ms-mini-gallery/ms-mini-gallery.js 0 → 100644
View file @ 862d2297
/**
*
*/
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);
}
}
src/components/ms-mini-gallery/ms-mini-gallery__item.html 0 → 100644
View file @ 862d2297
<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>
src/index.html
View file @ 862d2297
......@@ -6,17 +6,10 @@
<body>
} @@if( env == 'MS' || env == 'MOS' || env == 'BNWEB') {
<!-- Vendor styles -->
<style>
@@include( '../prod/assets/css/vendor.css', {
"path": "@@path"
})
</style>
<!-- App styles -->
<style>
@@include( '../prod/assets/css/app.css', {
"path": "@@path"
"path": "@@path"
})
</style>
}
......@@ -25,10 +18,10 @@
@@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' ) -->
......
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