ouidade/dev-epau.archi.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive sans menu

Browse Source
This commit is contained in:
ouidade
2021-05-07 13:34:41 +02:00
parent c5f39b8f25
commit ada70cc406
10 changed files with 796 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.~lock.readme.odt_0.odt#
-1
View File
@@ -1 +0,0 @@
,ouidade,localhost.localdomain,06.05.2021 12:43,file:///home/ouidade/.config/libreoffice/4;
README.md
+1 -8
View File
@@ -7,16 +7,9 @@
composer create-project getgrav/grav ~/webroot/grav
```
# lance serveur local
```
cd ~/webroot/nomdusite
php -S localhost:8000 system/router.php
```
Fenêtre à laisser ouverte!
#### dans autre fenetre, installer version admin
#### installer version admin
mise à jours
```
user/themes/epau-antimatter/css-compiled/template.css
+102 -7
View File
@@ -808,6 +808,9 @@ ul.pagination {
font-family: "Sarabun", sans-serif !important; }
#sb-site #body p:empty {
display: none; }
@media (max-width: 442px) {
#sb-site #body {
padding-top: 2rem; } }
#header.scrolled {
padding-left: 2rem;
@@ -853,6 +856,17 @@ ul.pagination {
min-height: 4rem !important;
margin: auto; }
@media (max-width: 442px) {
#header #navbar {
position: absolute;
right: 1rem; }
.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 #logo {
position: absolute;
left: -1rem; } }
.callout {
padding-top: 0.5rem; }
@@ -873,7 +887,13 @@ ul.pagination {
.titre_nsb h1 {
margin-bottom: 0rem !important;
text-align: right;
padding-right: 0rem !important; }
padding-right: 0rem !important;
padding-left: 2rem; }
@media (max-width: 442px) {
.titre_nsb {
margin-right: 42%; }
.titre_nsb h1 {
font-size: 1.6rem; } }
.titre_bsn {
display: block;
@@ -883,6 +903,9 @@ ul.pagination {
margin-bottom: 0rem !important; }
.titre_bsn p {
padding-right: 15%; }
@media (max-width: 442px) {
.titre_bsn h1 {
font-size: 1.6rem; } }
@keyframes animate {
0% {
@@ -935,6 +958,9 @@ ul.pagination {
font-weight: 500;
font-style: italic;
padding-bottom: 1.5rem; }
@media (max-width: 442px) {
.programme {
min-width: 20rem; } }
.programme:hover {
background-color: #000;
@@ -989,7 +1015,7 @@ ul.pagination {
.mozaique_personnes {
background-color: #d5d2d1;
padding-bottom: 4rem; }
padding-bottom: 10rem; }
.mozaique_personnes .equipe {
display: flex !important;
flex-direction: row;
@@ -999,6 +1025,11 @@ ul.pagination {
padding-right: 15%;
margin: auto;
justify-items: center; }
@media (max-width: 442px) {
.mozaique_personnes .equipe {
width: 100%;
padding-left: 3%;
padding-right: 2%; } }
.mozaique_personnes .equipe h3 {
padding-top: 3rem;
min-width: 100%;
@@ -1007,6 +1038,10 @@ ul.pagination {
font-size: 1rem;
line-height: 20px;
text-align: left; }
@media (max-width: 442px) {
.mozaique_personnes .equipe h3 {
font-size: 0.9rem;
padding-right: 0.5rem; } }
.mozaique_personnes .equipe .personne {
display: flex;
flex-direction: row;
@@ -1019,6 +1054,10 @@ ul.pagination {
justify-content: flex-end;
max-width: 30rem;
min-width: 30rem; }
@media (max-width: 442px) {
.mozaique_personnes .equipe .personne .mozaique {
max-width: 21rem;
min-width: 21rem; } }
.mozaique_personnes .equipe .personne .mozaique .photo {
overflow: hidden;
width: 15rem !important;
@@ -1035,6 +1074,10 @@ ul.pagination {
width: 50%;
height: 15rem;
min-width: 15rem; }
@media (max-width: 442px) {
.mozaique_personnes .equipe .personne .mozaique .info {
max-width: 11rem;
min-width: 11rem; } }
.mozaique_personnes .equipe .personne .mozaique .info h5 {
font-weight: 900;
font-size: 1.1rem;
@@ -1042,6 +1085,11 @@ ul.pagination {
padding-top: 0.8rem;
padding-right: 1rem;
padding-left: 1.3rem; }
@media (max-width: 442px) {
.mozaique_personnes .equipe .personne .mozaique .info h5 {
font-size: 0.9rem;
padding-left: 0.8rem;
padding-right: 0.6rem; } }
.mozaique_personnes .equipe .personne .mozaique .info h6 {
font-weight: 300;
font-size: 0.9rem;
@@ -1050,10 +1098,15 @@ ul.pagination {
margin: 0;
padding-right: 1.2rem;
padding-left: 1.3rem; }
.mozaique_personnes .equipe .personne .mozaique .info:hover {
background-color: #000;
color: #fff;
transition: 0.2s ease-in-out; }
@media (max-width: 442px) {
.mozaique_personnes .equipe .personne .mozaique .info h6 {
padding-left: 0.8rem;
font-size: 0.75rem;
padding-right: 0.6rem; } }
.mozaique_personnes .equipe .personne .mozaique:hover {
background-color: #000;
color: #fff;
transition: 0.2s ease-in-out; }
.bouton {
border: solid !important;
@@ -1098,6 +1151,22 @@ ul.pagination {
font-size: 30px; }
.modal .container a.close:hover {
color: black; }
@media (max-width: 442px) {
.modal .container {
transform: translateX(-50%) translateY(-50%);
width: 85%;
height: 80%;
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;
@@ -1120,7 +1189,8 @@ ul.pagination {
text-align: top; }
#new-footer .footer {
display: flex;
flex-direction: row; }
flex-direction: row;
flex-wrap: nowrap; }
#new-footer .footer .footer-logos {
display: flex;
flex-direction: row;
@@ -1152,6 +1222,27 @@ ul.pagination {
font-weight: 600; }
#new-footer .footer .contact p {
margin: 0; }
@media (max-width: 442px) {
#new-footer .footer {
width: 100%;
flex-direction: column-reverse;
align-items: center;
margin: auto; }
#new-footer .footer .contact {
padding-top: 1rem;
width: 80%; }
#new-footer .footer .footer-logos {
width: 90%;
margin-top: 1.5rem;
margin-left: 0.5rem;
flex-direction: column;
justify-content: space-between; }
#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: 37rem; } }
button:focus {
border: solid !important;
@@ -1308,3 +1399,7 @@ button:focus {
.modular .modular-row:last-child {
margin-bottom: 2rem; }
@media (max-width: 442px) {
h1 {
font-size: 1.5rem; } }
user/themes/epau-antimatter/package-lock.json
Generated
+544 -152
View File
File diff suppressed because it is too large Load Diff
user/themes/epau-antimatter/package.json
+5 -3
View File
@@ -1,7 +1,6 @@
{
"dependencies": {
"animate.css": "^4.1.1",
"node-sass": "*"
"animate.css": "^4.1.1"
},
"scripts": {
"sass": "node-sass -w scss -o css-compiled"
@@ -18,5 +17,8 @@
"url": "https://figureslibres.io/gogs/ouidade/dev-epau.archi.fr"
},
"author": "Ouidade Soussi-Chiadmi",
"license": "GPL-3.0"
"license": "GPL-3.0",
"devDependencies": {
"node-sass": "*"
}
}
user/themes/epau-antimatter/scss/template.scss
+3
View File
@@ -65,3 +65,6 @@
// Modular
@import "template/modular/all";
// Media Queries
@import "template/mediaqueries";
user/themes/epau-antimatter/scss/template/_custom.scss
+134 -18
View File
@@ -26,12 +26,17 @@
padding-bottom: 2rem !important;
font-family: "Sarabun", sans-serif !important;
p:empty { display:none; }
@media (max-width: 442px) {
padding-top: 2rem;
}
}
}
#header.scrolled {
padding-left: 2rem;
padding-right: 2rem;
}
#header #navbar ul.navigation li a {
font-family: "Sarabun", sans-serif;
@@ -62,16 +67,16 @@
#logo {
position: relative;
display: flex;
flex-direction: row;
@include transform(scale(0.75));
// &.active {
// a:after {
// top: 0;
// visibility: visible;
// @include transform(scale(0.75));
// @extend .default-animation;
// }
display: flex;
flex-direction: row;
@include transform(scale(0.75));
// &.active {
// a:after {
// top: 0;
// visibility: visible;
// @include transform(scale(0.75));
// @extend .default-animation;
// }
img {
padding: 0.5rem;
@@ -88,6 +93,22 @@
}
}
@media (max-width: 442px) {
#header #navbar {
position: absolute;
right: 1rem;
}
.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 #logo {
position: absolute;
left: -1rem;
}
}
.callout {
padding-top: 0.5rem;
@@ -119,6 +140,13 @@
margin-bottom: 0rem !important;
text-align: right;
padding-right: 0rem !important;
padding-left: 2rem;
}
@media (max-width: 442px) {
margin-right: 42%;
h1 {
font-size: 1.6rem;
}
}
}
@@ -138,6 +166,11 @@
p {
padding-right: 15%;
}
@media (max-width: 442px) {
h1 {
font-size: 1.6rem;
}
}
}
@keyframes animate {
@@ -283,6 +316,9 @@
font-style: italic;
padding-bottom: 1.5rem;
}
@media (max-width: 442px) {
min-width: 20rem;
}
}
@@ -352,7 +388,7 @@
.mozaique_personnes {
background-color: #d5d2d1;
padding-bottom: 4rem;
padding-bottom: 10rem;
@@ -367,6 +403,12 @@
padding-right: 15%;
margin: auto;
justify-items: center;
@media (max-width: 442px) {
width: 100%;
padding-left: 3%;
padding-right: 2%;
}
h3 {
// display: flex;
@@ -379,6 +421,10 @@
font-size: 1rem;
line-height: 20px;
text-align: left;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-right: 0.5rem;
}
}
.personne {
@@ -390,14 +436,18 @@
padding-right: 0.5rem;
padding-bottom: 0.5rem;
.mozaique {
display: flex;
flex-direction: row;
justify-content: flex-end;
max-width: 30rem;
min-width: 30rem;
@media (max-width: 442px) {
max-width: 21rem;
min-width: 21rem;
}
.photo {
// min-width: 10rem;
@@ -429,6 +479,10 @@
width: 50%;
height: 15rem;
min-width: 15rem;
@media (max-width: 442px) {
max-width: 11rem;
min-width: 11rem;
}
h5 {
font-weight: 900;
@@ -437,6 +491,11 @@
padding-top: 0.8rem;
padding-right: 1rem;
padding-left: 1.3rem;
@media (max-width: 442px) {
font-size: 0.9rem;
padding-left: 0.8rem;
padding-right: 0.6rem;
}
}
h6 {
font-weight: 300;
@@ -447,7 +506,13 @@
padding-right: 1.2rem;
// padding-bottom: 1rem;
padding-left: 1.3rem;
@media (max-width: 442px) {
padding-left: 0.8rem;
font-size: 0.75rem;
padding-right: 0.6rem;
}
}
}
&:hover {
background-color: #000;
@@ -457,7 +522,7 @@
}
}
}
}
}
@@ -548,6 +613,26 @@
color: black;
}
@media (max-width: 442px) {
transform: translateX(-50%) translateY(-50%);
width: 85%;
height: 80%;
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%;
}
}
}
@@ -577,10 +662,10 @@
}
}
.footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.footer-logos {
display: flex;
@@ -601,9 +686,9 @@
}
}
#new-footer .footer .footer-logos img:last-of-type {
height: 0.5rem !important;
}
#new-footer .footer .footer-logos img:last-of-type {
height: 0.5rem !important;
}
.contact {
display: flex;
flex-direction: column;
@@ -626,6 +711,37 @@
}
}
}
@media (max-width: 442px) {
.footer {
width: 100%;
flex-direction: column-reverse;
align-items: center;
margin:auto;
.contact {
padding-top: 1rem;
width: 80%;
}
.footer-logos {
width: 90%;
margin-top: 1.5rem;
margin-left: 0.5rem;
flex-direction: column;
justify-content: space-between;
img {
padding:0.5rem;
&:last-of-type {
padding: 0.8rem;
}
}
}
}
.tothetop {
bottom: $footer-height + 31rem;
}
}
}
user/themes/epau-antimatter/scss/template/_mediaqueries.scss
+5
View File
@@ -0,0 +1,5 @@
@media (max-width: 442px) {
h1 {
font-size: 1.5rem;
}
}
user/themes/epau-antimatter/templates/modular/accueil.html.twig
+1 -15
View File
@@ -2,21 +2,7 @@
<!-- {% set image = page.media.images|first %}
{% if image %}
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
{% endif %} -->
<!-- <div class="titre_bsn">
<h1>EPAU</h1>
<div class="test" >
<svg width="100%" height="0.5rem">
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" opacity="0.1" />
</svg>
</div>
<h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
<p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
{% endif %}
{{ content|raw }}
user/themes/epau-antimatter/templates/partials/base.html.twig
+1 -1
View File
@@ -65,7 +65,7 @@
{% block header_navigation %}
{% include 'partials/navigation.html.twig' %}
{% endblock %}
<!-- <span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span> -->
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
</div>
</header>