From 897d14976e8196b7b856190d05d0c825689d6533 Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 10 May 2021 11:14:31 +0200 Subject: [PATCH] responsive tablet --- .../epau-antimatter/css-compiled/template.css | 48 ++++++++++ .../scss/template/_custom.scss | 88 ++++++++++++++++++- .../templates/partials/base.html.twig | 4 +- 3 files changed, 138 insertions(+), 2 deletions(-) diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css index 32babd8..4736393 100644 --- a/user/themes/epau-antimatter/css-compiled/template.css +++ b/user/themes/epau-antimatter/css-compiled/template.css @@ -867,6 +867,13 @@ ul.pagination { position: absolute; left: -1rem; } } +@media (max-width: 1024px) { + .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer { + padding-left: 0 !important; + padding-right: 0rem !important; } + #header #navbar { + padding-right: 2rem; } } + .callout { padding-top: 0.5rem; } @@ -980,6 +987,9 @@ ul.pagination { /*On cache tout ce qui dépasse des 400px*/ transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/ } + @media (max-width: 1024px) { + .texte-cache { + max-height: 445px; } } /*Style du module TEXTE lorsqu'il est ouvert*/ .texte-cache.ouvert { @@ -995,6 +1005,13 @@ ul.pagination { left: 0; right: 0; } +@media (max-width: 1024px) { + .modular .features { + width: 80% !important; + margin-left: 8rem !important; } + .modular .features .feature { + width: 24% !important; } } + .bouton-ouverture { position: relative; justify-content: center; @@ -1167,6 +1184,22 @@ ul.pagination { margin-top: 0; } .modal .container .message { padding: 5% 5% 5% 5%; } } + @media (max-width: 1024px) { + .modal .container { + transform: translateX(-50%) translateY(-50%); + width: 75%; + height: 65%; + overflow-y: scroll; } + .modal .container a.close { + font-size: 0.8rem; + position: absolute; + right: 2%; + top: 0.8%; } + .modal .container p { + font-size: 0.8rem; + margin-top: 0; } + .modal .container .message { + padding: 5% 5% 5% 5%; } } #new-footer { display: flex; @@ -1243,6 +1276,21 @@ ul.pagination { padding: 0.8rem; } #new-footer .tothetop { bottom: 37rem; } } + @media (max-width: 1024px) { + #new-footer .footer .contact img { + max-height: 1.5rem; } + #new-footer .footer .contact h6 { + font-size: 0.8rem; } + #new-footer .footer .contact p { + font-size: 0.8rem; } + #new-footer .footer .contact svg { + margin-bottom: 0.6rem; } + #new-footer .footer .footer-logos img { + padding: 0.5rem; } + #new-footer .footer .footer-logos img:last-of-type { + padding: 0.8rem; } + #new-footer .tothetop { + bottom: 14rem; } } button:focus { border: solid !important; diff --git a/user/themes/epau-antimatter/scss/template/_custom.scss b/user/themes/epau-antimatter/scss/template/_custom.scss index 922f8ca..4d6e524 100644 --- a/user/themes/epau-antimatter/scss/template/_custom.scss +++ b/user/themes/epau-antimatter/scss/template/_custom.scss @@ -109,6 +109,18 @@ } +@media (max-width: 1024px) { + + .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer { + padding-left: 0!important; + padding-right: 0rem !important; + } + + #header #navbar { + padding-right: 2rem; + } +} + .callout { padding-top: 0.5rem; @@ -340,11 +352,15 @@ /*Style du module TEXTE*/ .texte-cache { - position: relative; + position: relative; max-height: 400px; /*Hauteur du texte visible avant le clic*/ overflow: hidden; /*On cache tout ce qui dépasse des 400px*/ transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/ + @media (max-width: 1024px) { + max-height: 445px; + + } } /*Style du module TEXTE lorsqu'il est ouvert*/ @@ -352,6 +368,7 @@ max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ } + /*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/ .texte-cache:not(.ouvert)::after { content: ''; @@ -361,6 +378,21 @@ left: 0; right: 0; // background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/ + +} + + + +@media (max-width: 1024px) { + .modular .features { + + width: 80% !important; + margin-left: 8rem !important; + } + .modular .features .feature { + width: 24% !important; + // margin-bottom: 10rem; + } } .bouton-ouverture { @@ -633,6 +665,26 @@ } } + @media (max-width: 1024px) { + transform: translateX(-50%) translateY(-50%); + width: 75%; + height: 65%; + overflow-y: scroll; + a.close { + font-size: 0.8rem; + position: absolute; + right: 2%; + top:0.8%; + } + p { + font-size: 0.8rem; + margin-top: 0; + } + .message{ + padding: 5% 5% 5% 5%; + } + + } } @@ -742,6 +794,40 @@ } + @media (max-width: 1024px) { + .footer { + + .contact { + img { + max-height: 1.5rem; + } + h6 { + font-size:0.8rem; + } + p { + font-size: 0.8rem; + } + svg { + margin-bottom: 0.6rem; + } + } + .footer-logos { + + img { + padding: 0.5rem; + + &:last-of-type { + padding: 0.8rem; + + } + } + } + } + .tothetop { + bottom: $footer-height + 8rem; + } + + } } diff --git a/user/themes/epau-antimatter/templates/partials/base.html.twig b/user/themes/epau-antimatter/templates/partials/base.html.twig index 3c149b8..91618e1 100644 --- a/user/themes/epau-antimatter/templates/partials/base.html.twig +++ b/user/themes/epau-antimatter/templates/partials/base.html.twig @@ -65,10 +65,12 @@ {% block header_navigation %} {% include 'partials/navigation.html.twig' %} {% endblock %} - + + + {% endblock %} {% block showcase %}{% endblock %}