diff --git a/web/themes/custom/leshed/assets/dist/main.css b/web/themes/custom/leshed/assets/dist/main.css index 2649d58..b73d8e7 100644 Binary files a/web/themes/custom/leshed/assets/dist/main.css and b/web/themes/custom/leshed/assets/dist/main.css differ diff --git a/web/themes/custom/leshed/assets/dist/main.js b/web/themes/custom/leshed/assets/dist/main.js index c0de368..b9cc38e 100644 --- a/web/themes/custom/leshed/assets/dist/main.js +++ b/web/themes/custom/leshed/assets/dist/main.js @@ -1 +1 @@ -(function(o,e){(function(){e.path.isFront,console.log("drupalSettings",e);function n(){console.log("LeShedTheme init()")}n()})()})(Drupal,drupalSettings); +(function(i,e){(function(){e.path.isFront,console.log("drupalSettings",e);function t(){console.log("LeShedTheme init()"),n()}function n(){document.getElementById("burger-btn").parentElement.addEventListener("click",function(r){this.firstElementChild.toggleAttribute("opened"),this.firstElementChild.nextElementSibling.toggleAttribute("opened")})}t()})()})(Drupal,drupalSettings); diff --git a/web/themes/custom/leshed/assets/dist/main2.css b/web/themes/custom/leshed/assets/dist/main2.css new file mode 100644 index 0000000..431d72b Binary files /dev/null and b/web/themes/custom/leshed/assets/dist/main2.css differ diff --git a/web/themes/custom/leshed/assets/dist/main3.css b/web/themes/custom/leshed/assets/dist/main3.css new file mode 100644 index 0000000..b2852d1 Binary files /dev/null and b/web/themes/custom/leshed/assets/dist/main3.css differ diff --git a/web/themes/custom/leshed/assets/dist/main4.css b/web/themes/custom/leshed/assets/dist/main4.css new file mode 100644 index 0000000..d5d5c5a Binary files /dev/null and b/web/themes/custom/leshed/assets/dist/main4.css differ diff --git a/web/themes/custom/leshed/assets/dist/main5.css b/web/themes/custom/leshed/assets/dist/main5.css new file mode 100644 index 0000000..12b13bd --- /dev/null +++ b/web/themes/custom/leshed/assets/dist/main5.css @@ -0,0 +1 @@ +@font-face{font-family:Epilogue;src:url(/main.css) format("woff2"),url(/main3.css) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Epilogue;src:url(/main2.css) format("woff2"),url(/main4.css) format("woff");font-weight:400;font-style:normal;font-display:swap}body{font-family:Epilogue;font-weight:400;font-style:normal}a,a:visited{text-decoration:none;color:inherit;transition:color .15s ease-out}body{margin:0}div.layout-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;max-width:1080px;margin:0 auto}div.layout-container header[role=banner]{padding:.5em 0;flex:0 1 content;z-index:100;height:50px}div.layout-container main[role=main]{flex:1 1 auto;overflow-y:scroll}header[role=banner]{background-color:#fff}header[role=banner] .header-middle{display:flex;justify-content:space-between;align-items:center;padding:.2em 2em}header[role=banner] #block-leshed-identitedusite a{text-decoration:none;font-size:2em;font-weight:500}header[role=banner] .header-right{height:20px;width:20px;cursor:pointer}header[role=banner] .header-right>div#burger-btn{position:relative;transition-duration:.5s;transition-property:transform;top:8.5px}header[role=banner] .header-right>div#burger-btn,header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{width:20px;height:3px;background-color:red}header[role=banner] .header-right>div#burger-btn:hover,header[role=banner] .header-right>div#burger-btn:hover:before,header[role=banner] .header-right>div#burger-btn:hover:after{background-color:green}header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{content:"";position:absolute;left:0}header[role=banner] .header-right>div#burger-btn:before{top:6px}header[role=banner] .header-right>div#burger-btn:after{bottom:6px}header[role=banner] .header-right>div#burger-btn[opened]{transform:rotate(90deg)}header[role=banner] .header-right>div.wrapper{position:absolute;top:50px;left:0;background-color:#000000bf;width:100vw;height:0;overflow:hidden;transition-duration:.5s}header[role=banner] .header-right>div.wrapper[opened]{height:calc(100vh - 50px)}header[role=banner] .header-right>div.wrapper>nav{padding-top:10px;background-color:#fff}header[role=banner] .header-right>div.wrapper>nav>ul{margin:0}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale{padding:2em 1em}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale ul{display:flex;justify-content:flex-end;list-style:none}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale ul li{margin-right:1em;color:#fff;padding:.5em 1em} diff --git a/web/themes/custom/leshed/assets/js/main.js b/web/themes/custom/leshed/assets/js/main.js index 5476dd9..00a7f45 100644 --- a/web/themes/custom/leshed/assets/js/main.js +++ b/web/themes/custom/leshed/assets/js/main.js @@ -36,6 +36,7 @@ import '../scss/main.scss' // |___|_||_|_|\__| function init () { console.log('LeShedTheme init()') + initBurgerMenu(); // initVues() } @@ -48,6 +49,14 @@ import '../scss/main.scss' }) } + function initBurgerMenu() { + let header_right = document.getElementById('burger-btn'); + header_right.parentElement.addEventListener('click', function(e){ + // console.log('click header_right', this); + this.firstElementChild.toggleAttribute('opened'); + this.firstElementChild.nextElementSibling.toggleAttribute('opened'); + }) + } // function initVues(){ // console.log('initVues'); diff --git a/web/themes/custom/leshed/assets/scss/main.scss b/web/themes/custom/leshed/assets/scss/main.scss index 1c50868..a65d642 100644 --- a/web/themes/custom/leshed/assets/scss/main.scss +++ b/web/themes/custom/leshed/assets/scss/main.scss @@ -13,3 +13,160 @@ body{ // background-color: green; } +$header_height: 50px; + +// _ _ +// | | | | +// | | __ _ _ _ ___ _ _| |_ +// | | / _` | | | |/ _ \| | | | __| +// | |___| (_| | |_| | (_) | |_| | |_ +// \_____/\__,_|\__, |\___/ \__,_|\__| +// __/ | +// |___/ + +div.layout-container{ + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + max-width:1080px; + margin: 0 auto; + header[role="banner"]{ + padding: 0.5em 0; + flex: 0 1 content; + z-index: 100; + // position: fixed; + // top:0; + // width: 100%; + height: $header_height; + } + main[role="main"]{ + flex: 1 1 auto; + // padding:5em 0; + overflow-y: scroll; + } + // footer[role="contentinfo"]{ + // // flex: 0 1 content; + // z-index: 100; + // position: fixed; + // bottom: 0; + // width: 100%; + // } +} + + + +// _ _ _ +// | | | | | | +// | |_| | ___ __ _ __| | ___ _ __ +// | _ |/ _ \/ _` |/ _` |/ _ \ '__| +// | | | | __/ (_| | (_| | __/ | +// \_| |_/\___|\__,_|\__,_|\___|_| + + +header[role="banner"]{ + background-color: #fff; + // box-shadow: 0 -5px 15px #000; + + .header-middle{ + display: flex; + justify-content:space-between; + align-items: center; + padding: 0.2em 2em; + } + + #block-leshed-identitedusite{ + a{ + // color: ; + text-decoration: none; + font-size: 2em; + font-weight: 500; + + // &:hover{ + // color: $rose; + // } + } + } + + .header-right{ + // position: relative; + height:20px; width:20px; + cursor: pointer; + // background-color: green; + + >div#burger-btn{ + position:relative; + transition-duration: 0.5s; + transition-property: transform; + top: 8.5px; + &, &::before, &::after{ + // position: absolute; + width:20px; height:3px; + background-color: red; + + } + &:hover{ + &, &::before, &::after{ + background-color: green; + } + } + &::before, &::after{ + content: ""; + position: absolute; + left: 0; + // background-color: red; + } + &::before{ + top:6px; + } + &::after{ + bottom: 6px; + } + &[opened]{ + transform: rotate(90deg); + } + } + + + &>div.wrapper{ + position:absolute; + top:$header_height; left:0; + // z-index: 99; + background-color: rgba(0,0,0,0.75); + + width:100vw; + height: 0; + overflow: hidden; + transition-duration: 0.5s; + &[opened]{ + height: calc(100vh - $header_height); + } + &>nav{ + padding-top: 10px; + background-color: #fff; + >ul{ + margin: 0; + } + } + + nav#block-mathallo-navigationprincipale{ + padding: 2em 1em; + ul{ + display: flex; + justify-content: flex-end; + list-style: none; + li{ + margin-right: 1em; + // background-color: $bleu_site; + color: #fff; + padding:0.5em 1em; + &:not(:last-child){ + } + } + } + } + } + + } +} // end of header[role="banner"]{ +