kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
ouidade
2024-04-30 15:53:33 +02:00
parent 083642718b
commit 2b35eedcb5
7 changed files with 106 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/css-compiled/components/footer/footer.css
+10
View File
@@ -13,11 +13,17 @@ footer {
padding-right: 2rem !important; }
footer > .d-flex > div:not(:last-of-type) {
border-right: 1px solid black; }
@media screen and (min-width: 300px) {
footer > .d-flex > div:not(:last-of-type) {
border-right: none; } }
@media (min-width: 992px) {
footer .d-lg-block {
display: block !important; } }
footer #block-renderedsitesettingsblock-5 {
max-width: 30%; }
@media screen and (max-width: 300px) {
footer #block-renderedsitesettingsblock-5 {
max-width: 100%; } }
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
display: grid;
grid-template-columns: 1fr 1fr; }
@@ -33,6 +39,10 @@ footer {
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) {
grid-column: 2;
grid-row: 3; }
@media screen and (max-width: 300px) {
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
display: flex;
flex-direction: column; } }
@media (min-width: 992px) {
footer #block-renderedsitesettingsblock-4 .d-lg-block {
display: block !important; } }
web/themes/custom/colloque2024/css-compiled/index.css
+45 -6
View File
@@ -516,6 +516,9 @@ body #content-ontop {
position: relative;
top: -1400px;
padding-top: 5rem; }
@media screen and (max-width: 300px) {
body #content-ontop {
padding-top: 2rem; } }
body #background-animated {
width: 100VW;
@@ -685,27 +688,47 @@ header #block-colloque2024-mainnavigation ul li {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin: auto; }
@media screen and (max-width: 300px) {
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity {
display: flex;
flex-direction: column; } }
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(1) {
font-size: 8rem;
font-family: 'Mariannebold';
line-height: 95%;
grid-column: 1 / span 4;
grid-row: 2; }
@media screen and (max-width: 300px) {
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(1) {
font-size: 4.5rem;
order: 3; } }
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(2) {
grid-column: 1 / 4;
grid-row: 3;
font-size: 2.5rem; }
@media screen and (max-width: 300px) {
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(2) {
font-size: 1.5rem;
order: 4; } }
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(3) {
text-transform: uppercase;
font-family: 'Mariannebold';
font-size: 3.5rem;
grid-column: 5 / span 7;
grid-row: 3; }
@media screen and (max-width: 300px) {
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(3) {
font-size: 1.5rem;
order: 2; } }
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(4) {
text-transform: uppercase;
grid-column: 5 / span 7;
grid-row: 1;
font-size: 2rem; }
@media screen and (max-width: 300px) {
#block-colloque2024-renderedsitesettingsblock-6 .site_setting_entity div:nth-of-type(4) {
font-size: 1.5rem;
order: 1; } }
#txt_present .medias {
display: none; }
@@ -972,9 +995,11 @@ header {
header .row {
background: white;
max-height: inherit;
justify-content: space-between;
border-bottom: 1px solid black;
padding-left: 40px; }
@media screen and (max-width: 300px) {
header .row {
padding-left: 20px; } }
header .row #block-colloque2024-logorepublique, header .row #block-colloque2024-logoepau {
max-height: inherit; }
header .row #block-colloque2024-logorepublique > div, header .row #block-colloque2024-logoepau > div {
@@ -987,9 +1012,10 @@ header {
height: 125px;
padding-bottom: 0.5rem;
padding-top: 0.5rem; }
@media screen and (min-width: 450px) {
@media screen and (max-width: 300px) {
header .row #block-colloque2024-logorepublique > div a img, header .row #block-colloque2024-logoepau > div a img {
width: auto; } }
width: 100px;
object-fit: contain; } }
header .row #block-colloque2024-logorepublique.is-active, header .row #block-colloque2024-logoepau.is-active {
z-index: 10000; }
header .row #block-colloque2024-logoepau {
@@ -999,11 +1025,14 @@ header {
border-left: 1px solid black;
padding: 0;
justify-content: end; }
@media screen and (max-width: 300px) {
header .row #block-renderedsitesettingsblock-2 {
display: none; } }
header .row #block-renderedsitesettingsblock-2 a {
display: flex;
margin: auto;
margin-left: 20%; }
@media screen and (min-width: 1200px) {
margin-left: 1rem; }
@media screen and (max-width: 1200px) {
header .row #block-renderedsitesettingsblock-2 {
display: flex; } }
header .row #block-renderedsitesettingsblock-2 .site_setting_entity {
@@ -1014,7 +1043,7 @@ header {
width: 60%;
color: black;
padding-right: 1rem;
font-size: 2.2rem;
font-size: 2rem;
text-align: left;
margin: auto 0;
line-height: 0.95; }
@@ -2035,11 +2064,17 @@ footer {
padding-right: 2rem !important; }
footer > .d-flex > div:not(:last-of-type) {
border-right: 1px solid black; }
@media screen and (min-width: 300px) {
footer > .d-flex > div:not(:last-of-type) {
border-right: none; } }
@media (min-width: 992px) {
footer .d-lg-block {
display: block !important; } }
footer #block-renderedsitesettingsblock-5 {
max-width: 30%; }
@media screen and (max-width: 300px) {
footer #block-renderedsitesettingsblock-5 {
max-width: 100%; } }
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
display: grid;
grid-template-columns: 1fr 1fr; }
@@ -2055,6 +2090,10 @@ footer {
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid div:nth-of-type(4) {
grid-column: 2;
grid-row: 3; }
@media screen and (max-width: 300px) {
footer #block-renderedsitesettingsblock-5 div.site_setting_entity div.grid {
display: flex;
flex-direction: column; } }
@media (min-width: 992px) {
footer #block-renderedsitesettingsblock-4 .d-lg-block {
display: block !important; } }
web/themes/custom/colloque2024/css-compiled/pages/layout.css
+3
View File
@@ -10,6 +10,9 @@ body #content-ontop {
position: relative;
top: -1400px;
padding-top: 5rem; }
@media screen and (max-width: 300px) {
body #content-ontop {
padding-top: 2rem; } }
body #background-animated {
width: 100VW;
web/themes/custom/colloque2024/css/components/footer/footer.scss
+10 -2
View File
@@ -16,11 +16,12 @@ footer{
padding-top: 2rem;
padding-left: 2rem !important;
padding-right: 2rem !important;
}
& > div:not(:last-of-type){
border-right: 1px solid black;
@media screen and (min-width: 300px) {
border-right: none;
}
}
}
@media (min-width: 992px) {
@@ -30,6 +31,9 @@ footer{
}
#block-renderedsitesettingsblock-5{
max-width: 30%;
@media screen and (max-width: 300px) {
max-width: 100%;
}
div.site_setting_entity div.grid{
display: grid;
@@ -50,6 +54,10 @@ footer{
grid-column: 2;
grid-row: 3;
}
@media screen and (max-width: 300px) {
display: flex;
flex-direction: column;
}
}
web/themes/custom/colloque2024/css/components/header/header.scss
+14 -22
View File
@@ -3,11 +3,15 @@ header{
.row{
background: white;
max-height: inherit;
justify-content: space-between;
border-bottom: 1px solid black;
padding-left: 40px;
@media screen and (max-width: 300px) {
padding-left: 20px;
}
#block-colloque2024-logorepublique, #block-colloque2024-logoepau{
max-height: inherit;
& > div{
max-height: inherit;
a{
@@ -16,13 +20,11 @@ header{
img{
width: auto;
height: 125px;
// width: 100%;
// max-height: inherit;
// object-fit: contain;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
@media screen and (min-width: 450px) {
width: auto;
@media screen and (max-width: 300px) {
width: 100px;
object-fit: contain;
}
}
}
@@ -38,61 +40,51 @@ header{
width: 25%;
border-left: 1px solid black;
padding: 0;
// display: none;
justify-content: end;
@media screen and (max-width: 300px) {
display: none;
}
a{
display: flex;
margin: auto;
// align-items: right;
margin-left: 20%;
margin-left: 1rem;
}
@media screen and (min-width: 1200px) {
@media screen and (max-width: 1200px) {
display: flex;
}
.site_setting_entity{
display: flex;
flex-direction: column;
// align-items: left;
// justify-content: flex-end;
// padding: 0 1rem 0 0rem;
h1{
order: 2;
width: 60%;
color: black;
padding-right: 1rem;
font-size: 2.2rem;
// text-transform: uppercase;
font-size: 2rem;
text-align: left;
// align-self: stretch;
margin: auto 0;
line-height: 0.95;
}
.__info_colloque{
// width: 50%;
width: fit-content;
order: 1;
height: auto;
display: flex;
flex-direction: row;
// justify-content: space-between;
&>div{
height: auto;
&:first-child{
order: 2;
color: black;
white-space: nowrap;
// border-bottom: 2px solid $color1;
font-family: "Mariannebold";
text-transform: uppercase;
padding-left: 0.5rem;
// padding-bottom: 0.4rem;
// margin-bottom: 0.6rem;
}
&:last-child{
order: 1;
color: black;
// padding-right: 10px;
width: min-content;
margin-bottom: 0;
text-transform: uppercase;
web/themes/custom/colloque2024/css/pages/front.scss
+21
View File
@@ -206,17 +206,29 @@ header {
grid-template-columns: repeat(7, 1fr);
margin: auto;
// width: 90%;
@media screen and (max-width: 300px) {
display: flex;
flex-direction: column;
}
div:nth-of-type(1){
font-size: 8rem;
font-family: 'Mariannebold';
line-height: 95%;
grid-column: 1 / span 4;
grid-row: 2;
@media screen and (max-width: 300px) {
font-size: 4.5rem;
order: 3;
}
}
div:nth-of-type(2){
grid-column: 1 / 4;
grid-row: 3;
font-size: 2.5rem;
@media screen and (max-width: 300px) {
font-size: 1.5rem;
order: 4;
}
}
div:nth-of-type(3){
text-transform: uppercase;
@@ -224,12 +236,21 @@ header {
font-size: 3.5rem;
grid-column: 5 / span 7;
grid-row: 3;
@media screen and (max-width: 300px) {
font-size: 1.5rem;
order: 2
;
}
}
div:nth-of-type(4){
text-transform: uppercase;
grid-column: 5 / span 7;
grid-row: 1;
font-size: 2rem;
@media screen and (max-width: 300px) {
font-size: 1.5rem;
order: 1;
}
}
}
}
web/themes/custom/colloque2024/css/pages/layout.scss
+3
View File
@@ -13,6 +13,9 @@ body {
position: relative;
top: -1400px;
padding-top: 5rem;
@media screen and (max-width: 300px) {
padding-top: 2rem;
}
}
#background-animated{
width: 100VW;