bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

more respnsive: header hamburger done, started base

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-03-29 22:28:24 +02:00
parent d170979b42
commit 2f1636dfd4
13 changed files with 651 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -19319,24 +19319,36 @@ header[role="banner"] {
header[role="banner"] > .wrapper .header-block.header-right label[for="header-block-right-toggle"] {
display: block; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper {
z-index: 10;
z-index: 100;
position: absolute;
top: 33px;
width: 300px;
right: -450px;
right: 0;
box-sizing: border-box;
transition: right 0.5s ease-in-out; }
overflow: hidden;
width: 0.1px;
box-shadow: 0 0 0 #fff;
padding: 1em 0;
margin-top: 0.7em;
transition: all 0.5s ease-in-out; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block, header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools {
display: block;
padding: 0 0 0.5em 0 !important;
margin: 0 0 0.5em 0 !important;
width: 18em;
padding: 0 0 1em 0 !important;
margin: 0 0 1em 0 !important;
text-align: right;
border-left: none !important;
border-right: none !important; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block:not(:last-child), header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools:not(:last-child) {
border-bottom: 1px solid #ccc !important; }
header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper #user-flags {
width: 18em;
padding: 1em 0 0 0 !important;
margin: 1em 0 0 0 !important;
border-top: 1px solid #ccc !important; }
header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
right: 1px; } }
width: 20em;
padding: 1em 1em;
box-shadow: -2px 2px 4px #ccc; } }
main[role="main"] {
flex: 1 1 auto;
@ -19397,9 +19409,7 @@ header[role="banner"] {
header[role="banner"] #block-sitebranding h1, header[role="banner"] #block-sitebranding .slogan {
display: inline-block; } }
@media (max-width: 654px) {
header[role="banner"] .header-block.header-right .header-block-wrapper {
padding: 1em 1em;
box-shadow: -2px 2px 4px #ccc;
header[role="banner"] .header-block.header-right .header-block-wrapper, header[role="banner"] .header-block.header-right .header-block-wrapper #user-flags ul {
background-color: #fff; } }
header[role="banner"] #block-socialmedialinks {
padding-right: 0.5em;
@ -19672,15 +19682,20 @@ header[role="banner"] {
align-self: flex-end; }
@media (max-width: 654px) {
header[role="banner"] #header-bottom {
flex-direction: column-reverse;
flex-direction: column;
justify-content: center; }
header[role="banner"] #header-bottom #block-pagetitle {
width: max-content; } }
width: 100%; }
header[role="banner"] #header-bottom #block-materiosapisearchblock {
box-sizing: border-box;
width: 100%; } }
header[role="banner"] #block-pagetitle {
padding: 1em 0; }
@media (max-width: 654px) {
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } }
header[role="banner"] #block-pagetitle {
padding: 1em 0 0; }
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
display: none; } }
header[role="banner"] #block-pagetitle h2 {
margin: 0;
font-size: 1.512em;
@ -19720,10 +19735,17 @@ header[role="banner"] {
width: 20px;
height: 20px;
margin: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATFJREFUeNqcU8sNgkAQxc9dEr1rQgEkWoBGPEOid0ygA+6asDagBZCIHUgFrBVABWoF0ME6yZqRz/jBFw7D7ryZnZk3LSGEQiHP8/M5ut9v8rfXU2ezqa7rJSdBwff9fn/Q6XQr33xuXK83dCPIy+UKvSEEEMbjSfEkSRKa7HkeOh2PIZ5DQgwBBkEGD8yA4RFZliFfxi2R9/uDvIP8ZC/iOC4mL5GhvHdpEdhIsNvknHAkjDHDWIThqX6VpmlX+QjGdtJYr+26EL6Qt9sN5xfbtutXqqrSNUNjGtdsmqY0oigiH8I5h9e+Kv9vzjBUQmF4/UFhmqYRCnMcp7IJUtvg/UXbyATjx61qyX12XVcqAeYZBAG5z5ZljUbD6j4Xc4omUFDrTZnPmqGrfzABDwEGACI/YeOOd/wDAAAAAElFTkSuQmCC);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjI3bW0iCiAgIGhlaWdodD0iMjdtbSIKICAgdmlld0JveD0iMCAwIDI3IDI3IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNTY4MCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJzZWFyY2guc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTU2NzQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjMuOTU5Nzk4IgogICAgIGlua3NjYXBlOmN4PSI1Mi4zOTQzMDEiCiAgICAgaW5rc2NhcGU6Y3k9IjY2LjY2OTUyOSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTE0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGExNTY3NyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxnCiAgICAgICBpZD0iZzE2NDIwIgogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC44MTE1MDI5MywwLjIxMDg3NTA4KSI+CiAgICAgIDxsaW5lCiAgICAgICAgIGZpbGw9Im5vbmUiCiAgICAgICAgIHN0cm9rZT0iIzNhNThkOCIKICAgICAgICAgc3Ryb2tlLXdpZHRoPSIzLjU3NzU0IgogICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgICAgIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIKICAgICAgICAgeDE9IjIuMDQzNjYwNiIKICAgICAgICAgeTE9IjI0LjQzMzkxNiIKICAgICAgICAgeDI9IjkuNDg3MjAyNiIKICAgICAgICAgeTI9IjE2Ljk5MDM3NCIKICAgICAgICAgaWQ9ImxpbmU0NTg0IgogICAgICAgICBzdHlsZT0ic3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgPGcKICAgICAgICAgaWQ9Imc0NTkwIgogICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLC0zNzQuNTIzNSwtNjQ3Ljc4NjYpIj4KICAgICAgICA8cGF0aAogICAgICAgICAgIGQ9Im0gMTUwOS4zNzEsMjQ4OS4xMjkgYyAtMC4wMzksNi4xOTYgLTAuOTk2LDExLjYzOSAtMi44NjksMTYuMzI2IC0xLjg3Myw0LjY4NyAtNC40MjEsOC42MDcgLTcuNjQyLDExLjc1NSAtMy4yMjMsMy4xNDkgLTcuMDQ5LDUuNTA5IC0xMS40NzksNy4wODMgLTQuNDMsMS41NzQgLTkuMTg4LDIuMzQ2IC0xNC4yNjksMi4zMTUgLTQuOTQ0LC0wLjAzIC05LjYwMywtMC44NTkgLTEzLjk3OSwtMi40ODcgLTQuMzc3LC0xLjYyOCAtOC4xOTIsLTQuMDMzIC0xMS40NDQsLTcuMjI0IC0zLjI1MywtMy4xODcgLTUuODA0LC03LjEzNyAtNy42NTUsLTExLjg0NyAtMS44NTEsLTQuNzEgLTIuNzU3LC0xMC4xNjQgLTIuNzIxLC0xNi4zNjEgMC4wMzksLTYuMTk1IDEuMDQ1LC0xMS42MzcgMy4wMjQsLTE2LjMyNCAxLjk3OCwtNC42ODggNC42MjksLTguNjIxIDcuOTU3LC0xMS44MDUgMy4zMjYsLTMuMTgyIDcuMTY5LC01LjU2MSAxMS41MywtNy4xMzcgNC4zNjEsLTEuNTc0IDguOTQ1LC0yLjM0NiAxMy43NDksLTIuMzE2IDQuOTQzLDAuMDI5IDkuNjAxLDAuODU3IDEzLjk3OSwyLjQ4NiA0LjM3NSwxLjYyOSA4LjE4OCw0LjA1NSAxMS40NDIsNy4yNzYgMy4yNTIsMy4yMjIgNS44MDUsNy4xODggNy42NTYsMTEuODk5IDEuODUxLDQuNzEzIDIuNzU4LDEwLjE2NSAyLjcyMSwxNi4zNjEgeiBtIC01NS4yNDQsLTAuMzM3IGMgLTAuMDIyLDMuNTUxIDAuMzkyLDYuNzU4IDEuMjQ3LDkuNjE2IDAuODU0LDIuODYgMi4wOSw1LjMyMiAzLjcxNSw3LjM4NSAxLjYyMywyLjA2NCAzLjYxNCwzLjY2MiA1Ljk3Myw0Ljc4NyAyLjM2LDEuMTMgNS4wNzQsMS43MDMgOC4xMzcsMS43MjEgMi45OTIsMC4wMiA1LjY5NSwtMC41MiA4LjEwMywtMS42MjEgMi40MTEsLTEuMDk5IDQuNDM3LC0yLjY3IDYuMDg2LC00LjcxNSAxLjY0OSwtMi4wNDEgMi45MTYsLTQuNDg4IDMuODA1LC03LjMzOSAwLjg4NiwtMi44NDggMS4zNDMsLTYuMDQ5IDEuMzY0LC05LjYwMSAwLjAyMSwtMy41NDkgLTAuMzk2LC02Ljc3MiAtMS4yNDcsLTkuNjY2IC0wLjg1NCwtMi44OTUgLTIuMDkyLC01LjM3MiAtMy43MTQsLTcuNDM4IC0xLjYyNCwtMi4wNjIgLTMuNjMxLC0zLjY1OSAtNi4wMjksLTQuNzg5IC0yLjM5NSwtMS4xMjcgLTUuMDkxLC0xLjcwMSAtOC4wODIsLTEuNzIxIC0zLjA2NCwtMC4wMTggLTUuNzg0LDAuNTM5IC04LjE1NiwxLjY3NCAtMi4zNzQsMS4xMzUgLTQuMzg1LDIuNzI2IC02LjAzMyw0Ljc2OCAtMS42NSwyLjA0NSAtMi45MTcsNC41MDkgLTMuODA1LDcuMzkzIC0wLjg5LDIuODg1IC0xLjM0Myw2LjA2NyAtMS4zNjQsOS41NDYgeiIKICAgICAgICAgICBpZD0icGF0aDQ1ODgiIC8+CiAgICAgIDwvZz4KICAgICAgPGNpcmNsZQogICAgICAgICBmaWxsPSIjZmYyMzI2IgogICAgICAgICBjeD0iMTUuMjQ0NTMzIgogICAgICAgICBjeT0iMTAuNjk2NDU0IgogICAgICAgICByPSIxLjcyMTkwODMiCiAgICAgICAgIGlkPSJjaXJjbGU0NTk0IgogICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjI2NDU4MyIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=);
background-position: center;
background-repeat: no-repeat;
background-size: contain; }
background-size: contain;
background-color: transparent; }
@media (max-width: 654px) {
header[role="banner"] #block-materiosapisearchblock {
padding: 0 1em;
background-color: #69cdcf; }
body:not(.path-base) header[role="banner"] #block-materiosapisearchblock {
display: none; } }
aside.messages {
padding: 0; }
@ -20116,6 +20138,32 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
padding: 0;
display: inline-block;
vertical-align: top; }
@media (max-width: 654px) {
.cards-list > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 100%; }
.cards-list > ul > li {
flex: 0 1 48%;
margin: 0 0 0.5em 0; }
.cards-list > ul > li > article {
width: 100%;
height: auto; }
.cards-list > ul > li > article > section.images {
height: auto; }
.cards-list > ul > li > article > section.images > figure {
position: relative; }
.cards-list > ul > li > article > section.images > figure:not(:first-child) {
display: none; }
.cards-list > ul > li > article > section.images > figure img:not(.blank) {
width: 100%;
height: auto; }
.cards-list > ul > li > article > section.images > figure img.blank {
top: 0;
bottom: 0;
left: 0;
right: 0; } }
article.card {
position: relative;

377
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long