From 084cecc3e834a128ff1d76e26f08fa7e9bfa406f Mon Sep 17 00:00:00 2001 From: Andy Date: Tue, 30 Jul 2024 13:31:44 +0300 Subject: [PATCH] Improve animations and indentation of header content on mobile devices --- docs/css/style.css | 2 +- docs/js/index.bundle.js | 2 +- src/js/modules/modal.js | 2 +- src/scss/blocks/_education.scss | 4 ++-- src/scss/blocks/_header.scss | 4 ---- 5 files changed, 5 insertions(+), 9 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 0b78984..32794d6 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1 +1 @@ -html{scroll-behavior:smooth}*{padding:0;margin:0;border:0}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}a,div,input,select,textarea{background-color:transparent}a,button,div,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;-webkit-tap-highlight-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}body.lock{overflow:hidden}.none{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;overflow:hidden}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.icon{fill:transparent;stroke:transparent;width:100%;height:100%}.about__grid{margin:auto;display:grid;grid-template-areas:"title photo" "description photo" "sign-up photo";-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;height:calc(100vh - 100px);max-height:832px}.about__title{grid-area:title;font-weight:600}.about__subheading{font-size:calc(22px + 8*(100vw - 360px)/920);color:#dd7f4a}.about__heading{font-size:calc(40px + 20*(100vw - 360px)/920);color:#731c00;text-transform:uppercase}.about__description{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:500;grid-area:description;max-width:540px}.about__photo{grid-area:photo;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.about__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.about__sign-up{grid-area:sign-up}.section-title{font-size:calc(25px + 10*(100vw - 360px)/920);font-weight:600;color:#dd7f4a;text-align:center;margin:0 0 calc(25px + 25*(100vw - 360px)/920)}.sign-up__btn{display:inline-block;font-size:calc(15px + 1*(100vw - 360px)/920);color:#fff;font-weight:600;background-color:#dd7f4a;padding:15px calc(16px + 14*(100vw - 360px)/920);margin:2px;-webkit-transition:color .2s,background-color .2s;transition:color .2s,background-color .2s}@media (hover:hover){.sign-up__btn:hover{color:#dd7f4a;background-color:#fff;border:2px solid #dd7f4a;margin:0}}.education__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(25px + 10*(100vw - 360px)/920)}.education__item{font-size:calc(14px + 2*(100vw - 360px)/920);-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.education__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.education__item_more{text-align:center}}.education__more{text-decoration:underline;font-weight:500}.edu-slider{margin:0 auto;max-width:800px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:767px){.edu-slider{margin:0 -15px}}.edu-slider__diplom{text-align:center;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.edu-slider__diplom img{display:block;width:100%}.edu-slider .swiper-button-next::after,.edu-slider .swiper-button-prev::after{color:#731c00}.edu-slider .swiper-pagination-bullet{background-color:#731c00;gap:100px}:root{--swiper-pagination-bottom:0;--swiper-pagination-bullet-size:13px;--swiper-pagination-bullet-horizontal-gap:8px}@media (max-width:767px){:root{--swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:7px;--swiper-navigation-size:30px}}@media (max-width:424px){:root{--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-horizontal-gap:6px;--swiper-navigation-size:25px}}.modal{z-index:11;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;-webkit-transition:all .8s ease 0s;transition:all .8s ease 0s;overflow-y:auto;overflow-x:hidden}.modal.modal-active{opacity:1;visibility:visible}.modal.modal-active .modal__content{opacity:1}.modal__body,.modal__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal__body{min-height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:30px 20px}.modal__content{background-color:#fffbf4;max-width:800px;padding:calc(28px + 10*(100vw - 360px)/920) calc(9px + 26*(100vw - 360px)/920);position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition:all .8s ease 0s;transition:all .8s ease 0s}.modal__close{width:calc(23px + 8*(100vw - 360px)/920);height:calc(23px + 8*(100vw - 360px)/920);position:absolute;top:calc(14px + 15*(100vw - 360px)/920);right:calc(14px + 15*(100vw - 360px)/920)}.modal__title{font-size:calc(20px + 10*(100vw - 360px)/920)}@media (max-width:460px){.modal__title{width:200px}}.modal__text{font-size:calc(13px + 3*(100vw - 360px)/920)}.modal__text li{margin-bottom:10px}.modal__text li:last-child{margin-bottom:0}.icon_buttons-close-btn{fill:#731c00}.header{z-index:5;position:fixed;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,255,255,.5);width:100%;padding:19px 0}.header__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width:1071px){.header__row{margin:0 10px}}.header__logo{display:inline-block;width:calc(42px + 9*(100vw - 360px)/920);margin:0 26px 0 0}.header__logo img{width:100%}.menu{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (max-width:1071px){.menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.menu__icon{display:none}@media (max-width:1071px){.menu__icon{height:21px;width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:10}.menu__icon span{position:relative;width:40px;height:3px;background-color:#731c00;border-radius:4px;-webkit-transition:all .2s;transition:all .2s}.menu__body,.menu__icon span::after,.menu__icon span::before{position:absolute;left:0;background-color:#731c00;-webkit-transition:all .2s;transition:all .2s}.menu__icon span::after,.menu__icon span::before{content:"";width:40px;height:3px;border-radius:4px}.menu__icon span::before{top:-9px}.menu__icon span::after{top:9px}.menu__icon.burger-active span::after,.menu__icon.burger-active span::before{background-color:#fff;top:0}.menu__icon.burger-active span::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu__icon.burger-active span::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.menu__body{bottom:100%;height:100vh;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:auto}}.menu__body.burger-active{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .2s;transition:all .2s}.menu__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (max-width:1071px){.menu__row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:auto;row-gap:60px;padding:50px 15px}}.list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px}@media (max-width:1071px){.list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:20px}}.list__item{text-align:center}.list__item a{position:relative}.list__item a::before{content:"";position:absolute;width:100%;height:1.5px;background-color:#731c00;bottom:-2.5px;left:0;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0)}@media (hover:hover){.list__item a:hover::before{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}}.list__link{font-size:16px;font-weight:500;color:#731c00;-webkit-transition:all .2s;transition:all .2s}@media (max-width:1071px){.list__link{color:#fff;font-size:30px}}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px}@media (max-width:1071px){.media{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}.media__link{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:32px;height:22px;-webkit-transition:all .2s;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.media__link:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}}.media__link:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}@media (max-width:1071px){.media__link{height:calc(25px + 5*(100vw - 360px)/712)}}.media__link img{height:100%}.icon_media{fill:#731c00}@media (max-width:1071px){.icon_media{fill:#fff}}.icon_media-vk{scale:.9}@media (max-width:1071px){.icon_media-vk{scale:1}.icon_media-b17{scale:1.2}}.main{padding:calc(74px + 15*(100vw - 360px)/920) 0 0}.spacer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:calc(50px + 50*(100vw - 360px)/920) 0}.spacer__line{background-color:#731c00;width:calc(190px + 210*(100vw - 360px)/920);height:1px}.topics__list{margin:0 0 calc(20px + 30*(100vw - 360px)/920);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(20px + 25*(100vw - 360px)/920)}@media (max-width:767px){.topics__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.topics__item{-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.topics__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.topics__sign-up{text-align:center}.topic{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:calc(10px + 12*(100vw - 360px)/920);-moz-column-gap:calc(10px + 12*(100vw - 360px)/920);column-gap:calc(10px + 12*(100vw - 360px)/920)}.topic__icon{max-width:calc(32px + 16*(100vw - 360px)/920);max-height:calc(32px + 16*(100vw - 360px)/920);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topic__content,.topic__title{font-size:calc(14px + 2*(100vw - 360px)/920)}.topic__title{font-weight:600;margin:0 0 9px}.topic__content{font-weight:400}.icon_topics-puzzles,.icon_topics-tree{fill:#731c00}.icon_topics-dna,.icon_topics-masks,.icon_topics-people{stroke:#731c00}.icon_topics-magnifier{fill:#731c00;scale:.9}body{font-family:"Montserrat",sans-serif;color:#731c00;background-color:#fffbf4}.container{max-width:1180px;margin:0 auto;padding:0 20px} \ No newline at end of file +html{scroll-behavior:smooth}*{padding:0;margin:0;border:0}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}a,div,input,select,textarea{background-color:transparent}a,button,div,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;-webkit-tap-highlight-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}body.lock{overflow:hidden}.none{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;overflow:hidden}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.icon{fill:transparent;stroke:transparent;width:100%;height:100%}.about__grid{margin:auto;display:grid;grid-template-areas:"title photo" "description photo" "sign-up photo";-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;height:calc(100vh - 100px);max-height:832px}.about__title{grid-area:title;font-weight:600}.about__subheading{font-size:calc(22px + 8*(100vw - 360px)/920);color:#dd7f4a}.about__heading{font-size:calc(40px + 20*(100vw - 360px)/920);color:#731c00;text-transform:uppercase}.about__description{font-size:calc(14px + 2*(100vw - 360px)/920);font-weight:500;grid-area:description;max-width:540px}.about__photo{grid-area:photo;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.about__photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.about__sign-up{grid-area:sign-up}.section-title{font-size:calc(25px + 10*(100vw - 360px)/920);font-weight:600;color:#dd7f4a;text-align:center;margin:0 0 calc(25px + 25*(100vw - 360px)/920)}.sign-up__btn{display:inline-block;font-size:calc(15px + 1*(100vw - 360px)/920);color:#fff;font-weight:600;background-color:#dd7f4a;padding:15px calc(16px + 14*(100vw - 360px)/920);margin:2px;-webkit-transition:color .2s,background-color .2s;transition:color .2s,background-color .2s}@media (hover:hover){.sign-up__btn:hover{color:#dd7f4a;background-color:#fff;border:2px solid #dd7f4a;margin:0}}.education__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(25px + 10*(100vw - 360px)/920)}.education__item{font-size:calc(14px + 2*(100vw - 360px)/920);-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.education__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.education__item_more{text-align:center}}.education__more{text-decoration:underline;font-weight:500}.edu-slider{margin:0 auto;max-width:800px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:767px){.edu-slider{margin:0 -15px}}.edu-slider__diplom{text-align:center;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.edu-slider__diplom img{display:block;width:100%}.edu-slider .swiper-button-next::after,.edu-slider .swiper-button-prev::after{color:#731c00}.edu-slider .swiper-pagination-bullet{background-color:#731c00;gap:100px}:root{--swiper-pagination-bottom:0;--swiper-pagination-bullet-size:13px;--swiper-pagination-bullet-horizontal-gap:8px}@media (max-width:767px){:root{--swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:7px;--swiper-navigation-size:30px}}@media (max-width:424px){:root{--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-horizontal-gap:6px;--swiper-navigation-size:25px}}.modal{z-index:11;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;overflow-y:auto;overflow-x:hidden}.modal.modal-active{opacity:1;visibility:visible}.modal.modal-active .modal__content{opacity:1}.modal__body,.modal__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal__body{min-height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:30px 20px}.modal__content{background-color:#fffbf4;max-width:800px;padding:calc(28px + 10*(100vw - 360px)/920) calc(9px + 26*(100vw - 360px)/920);position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;opacity:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.modal__close{width:calc(23px + 8*(100vw - 360px)/920);height:calc(23px + 8*(100vw - 360px)/920);position:absolute;top:calc(14px + 15*(100vw - 360px)/920);right:calc(14px + 15*(100vw - 360px)/920)}.modal__title{font-size:calc(20px + 10*(100vw - 360px)/920)}@media (max-width:460px){.modal__title{width:200px}}.modal__text{font-size:calc(13px + 3*(100vw - 360px)/920)}.modal__text li{margin-bottom:10px}.modal__text li:last-child{margin-bottom:0}.icon_buttons-close-btn{fill:#731c00}.header{z-index:5;position:fixed;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,255,255,.5);width:100%;padding:19px 0}.header__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__logo{display:inline-block;width:calc(42px + 9*(100vw - 360px)/920);margin:0 26px 0 0}.header__logo img{width:100%}.menu{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (max-width:1071px){.menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}}.menu__icon{display:none}@media (max-width:1071px){.menu__icon{height:21px;width:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:10}.menu__icon span{position:relative;width:40px;height:3px;background-color:#731c00;border-radius:4px;-webkit-transition:all .2s;transition:all .2s}.menu__body,.menu__icon span::after,.menu__icon span::before{position:absolute;left:0;background-color:#731c00;-webkit-transition:all .2s;transition:all .2s}.menu__icon span::after,.menu__icon span::before{content:"";width:40px;height:3px;border-radius:4px}.menu__icon span::before{top:-9px}.menu__icon span::after{top:9px}.menu__icon.burger-active span::after,.menu__icon.burger-active span::before{background-color:#fff;top:0}.menu__icon.burger-active span::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu__icon.burger-active span::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.menu__body{bottom:100%;height:100vh;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:auto}}.menu__body.burger-active{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .2s;transition:all .2s}.menu__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (max-width:1071px){.menu__row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:auto;row-gap:60px;padding:50px 15px}}.list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px}@media (max-width:1071px){.list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:20px}}.list__item{text-align:center}.list__item a{position:relative}.list__item a::before{content:"";position:absolute;width:100%;height:1.5px;background-color:#731c00;bottom:-2.5px;left:0;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0)}@media (hover:hover){.list__item a:hover::before{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}}.list__link{font-size:16px;font-weight:500;color:#731c00;-webkit-transition:all .2s;transition:all .2s}@media (max-width:1071px){.list__link{color:#fff;font-size:30px}}.media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px}@media (max-width:1071px){.media{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}.media__link{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:32px;height:22px;-webkit-transition:all .2s;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.media__link:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}}.media__link:active{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}@media (max-width:1071px){.media__link{height:calc(25px + 5*(100vw - 360px)/712)}}.media__link img{height:100%}.icon_media{fill:#731c00}@media (max-width:1071px){.icon_media{fill:#fff}}.icon_media-vk{scale:.9}@media (max-width:1071px){.icon_media-vk{scale:1}.icon_media-b17{scale:1.2}}.main{padding:calc(74px + 15*(100vw - 360px)/920) 0 0}.spacer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:calc(50px + 50*(100vw - 360px)/920) 0}.spacer__line{background-color:#731c00;width:calc(190px + 210*(100vw - 360px)/920);height:1px}.topics__list{margin:0 0 calc(20px + 30*(100vw - 360px)/920);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;row-gap:calc(20px + 25*(100vw - 360px)/920)}@media (max-width:767px){.topics__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.topics__item{-webkit-box-flex:0;-ms-flex:0 1 48%;flex:0 1 48%}@media (max-width:767px){.topics__item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.topics__sign-up{text-align:center}.topic{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:calc(10px + 12*(100vw - 360px)/920);-moz-column-gap:calc(10px + 12*(100vw - 360px)/920);column-gap:calc(10px + 12*(100vw - 360px)/920)}.topic__icon{max-width:calc(32px + 16*(100vw - 360px)/920);max-height:calc(32px + 16*(100vw - 360px)/920);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topic__content,.topic__title{font-size:calc(14px + 2*(100vw - 360px)/920)}.topic__title{font-weight:600;margin:0 0 9px}.topic__content{font-weight:400}.icon_topics-puzzles,.icon_topics-tree{fill:#731c00}.icon_topics-dna,.icon_topics-masks,.icon_topics-people{stroke:#731c00}.icon_topics-magnifier{fill:#731c00;scale:.9}body{font-family:"Montserrat",sans-serif;color:#731c00;background-color:#fffbf4}.container{max-width:1180px;margin:0 auto;padding:0 20px} \ No newline at end of file diff --git a/docs/js/index.bundle.js b/docs/js/index.bundle.js index 62fc8f7..d83e15c 100644 --- a/docs/js/index.bundle.js +++ b/docs/js/index.bundle.js @@ -1 +1 @@ -!function(){"use strict";new Swiper(".edu-slider",{navigation:{prevEl:".swiper-button-prev",nextEl:".swiper-button-next"},pagination:{el:".swiper-pagination",clickable:!0},simulateTouch:!1,slidesPerView:1,watchOverflow:!0,loop:!0,speed:500,effect:"fade",fadeEffect:{crossFade:!0}});(function(){const e=document.body,t=document.querySelector(".menu__body"),c=document.querySelector(".menu__icon");t&&c&&(c.addEventListener("click",(()=>{t.classList.toggle("burger-active"),c.classList.toggle("burger-active"),e.classList.toggle("lock")})),t.querySelectorAll(".list__link").forEach((o=>{o.addEventListener("click",(()=>{t.classList.remove("burger-active"),c.classList.remove("burger-active"),e.classList.remove("lock")}))})))})(),function(){const e=document.querySelector("body"),t=document.querySelectorAll(".modal-button"),c=document.querySelectorAll(".modal__close");let o=!0;const l=800;function s(t){t&&o&&(t.classList.remove("modal-active"),setTimeout((()=>{e.classList.remove("lock")}),l),a())}function a(){o=!1,setTimeout((()=>{o=!0}),l)}t&&t.forEach((t=>{t.addEventListener("click",(c=>{const l=t.getAttribute("data-modal");var i;(i=document.querySelector(`#${l}`))&&o&&(e.classList.add("lock"),a(),i.classList.add("modal-active"),i.addEventListener("click",(e=>{e.target.closest(".modal__content")||s(e.target.closest(".modal"))})))}))})),c&&c.forEach((e=>{e.addEventListener("click",(t=>{s(e.closest(".modal"))}))})),document.addEventListener("keydown",(e=>{"Escape"==e.code&&s(document.querySelector(".modal.modal-active"))}))}()}(); \ No newline at end of file +!function(){"use strict";new Swiper(".edu-slider",{navigation:{prevEl:".swiper-button-prev",nextEl:".swiper-button-next"},pagination:{el:".swiper-pagination",clickable:!0},simulateTouch:!1,slidesPerView:1,watchOverflow:!0,loop:!0,speed:500,effect:"fade",fadeEffect:{crossFade:!0}});(function(){const e=document.body,t=document.querySelector(".menu__body"),c=document.querySelector(".menu__icon");t&&c&&(c.addEventListener("click",(()=>{t.classList.toggle("burger-active"),c.classList.toggle("burger-active"),e.classList.toggle("lock")})),t.querySelectorAll(".list__link").forEach((o=>{o.addEventListener("click",(()=>{t.classList.remove("burger-active"),c.classList.remove("burger-active"),e.classList.remove("lock")}))})))})(),function(){const e=document.querySelector("body"),t=document.querySelectorAll(".modal-button"),c=document.querySelectorAll(".modal__close");let o=!0;const l=300;function s(t){t&&o&&(t.classList.remove("modal-active"),setTimeout((()=>{e.classList.remove("lock")}),l),a())}function a(){o=!1,setTimeout((()=>{o=!0}),l)}t&&t.forEach((t=>{t.addEventListener("click",(c=>{const l=t.getAttribute("data-modal");var i;(i=document.querySelector(`#${l}`))&&o&&(e.classList.add("lock"),a(),i.classList.add("modal-active"),i.addEventListener("click",(e=>{e.target.closest(".modal__content")||s(e.target.closest(".modal"))})))}))})),c&&c.forEach((e=>{e.addEventListener("click",(t=>{s(e.closest(".modal"))}))})),document.addEventListener("keydown",(e=>{"Escape"==e.code&&s(document.querySelector(".modal.modal-active"))}))}()}(); \ No newline at end of file diff --git a/src/js/modules/modal.js b/src/js/modules/modal.js index bdecfc7..865d20a 100644 --- a/src/js/modules/modal.js +++ b/src/js/modules/modal.js @@ -4,7 +4,7 @@ function modal() { const modalCloseNode = document.querySelectorAll('.modal__close'); let unlock = true; - const timeout = 800; + const timeout = 300; if (modalButtonsNode) { modalButtonsNode.forEach(currentModalButtonNode => { diff --git a/src/scss/blocks/_education.scss b/src/scss/blocks/_education.scss index bfbd5dd..26d7e69 100644 --- a/src/scss/blocks/_education.scss +++ b/src/scss/blocks/_education.scss @@ -91,7 +91,7 @@ background-color: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; - transition: all 0.8s ease 0s; + transition: all 0.3s ease 0s; overflow-y: auto; overflow-x: hidden; @@ -121,7 +121,7 @@ flex-direction: column; align-items: center; opacity: 0; - transition: all 0.8s ease 0s; + transition: all 0.3s ease 0s; } &__close { diff --git a/src/scss/blocks/_header.scss b/src/scss/blocks/_header.scss index 7de41f3..0284922 100644 --- a/src/scss/blocks/_header.scss +++ b/src/scss/blocks/_header.scss @@ -9,10 +9,6 @@ display: flex; justify-content: space-between; align-items: center; - - @include laptop { - margin: 0 10px; - } } &__logo {