siteweb/libreavous
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css : largeur optimisée en petit écran + bloc liste/émission

Browse Source
This commit is contained in:
chankalan 2021-09-14 10:06:42 +02:00
parent 3dae309860
commit 94d1232cfb
1 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
squelettes/scss/styles/_perso.scss
View File

@ -175,12 +175,17 @@ span.btn {
.main { .main {
padding-bottom:1rem; padding-bottom:1rem;
} }
@include media($bp-medium-up) {
.flex2 > .main { .flex2 > .main {
max-width:60%; max-width:60%;
} }
.flex2 > .aside { .flex2 > .aside {
max-width:40%; max-width:40%;
padding-left:($spacer*4); padding-left:($spacer*4);
@include media($bp-medium) {
padding-left:($spacer*2);
}
}
} }
} }
@ -223,7 +228,9 @@ span.btn {
> * { > * {
margin:0 0 ($spacer*2); margin:0 0 ($spacer*2);
padding:$spacer ($spacer*4); padding:$spacer ($spacer*4);
@include media($bp-medium) {
padding:$spacer ($spacer*2);
}
&.page_extra { &.page_extra {
padding:0; padding:0;
} }
@ -238,6 +245,9 @@ span.btn {
} }
> h1 { > h1 {
padding:($spacer*4) ($spacer*4) $spacer; padding:($spacer*4) ($spacer*4) $spacer;
@include media($bp-medium) {
padding:($spacer*2) ($spacer*2) $spacer;
}
margin:0; margin:0;
background-color:white; background-color:white;
} }
@ -383,6 +393,13 @@ h2 {
clip-path: unset; clip-path: unset;
font-size:1em; font-size:1em;
margin:-$spacer 0 0 -($spacer*4); margin:-$spacer 0 0 -($spacer*4);
@include media($bp-medium) {
margin:-$spacer -200px 0 -($spacer*2);
line-height:1.2;
}
@include media($bp-small) {
margin:-$spacer 0 0 -($spacer*2);
}
overflow:visible; overflow:visible;
.composition_blog & { .composition_blog & {
margin:0; margin:0;
@ -393,6 +410,9 @@ h2 {
width:150px; width:150px;
padding:0.5rem; padding:0.5rem;
margin-right:1.5rem; margin-right:1.5rem;
@include media($bp-small) {
margin-right:0.5rem;
}
font-weight:700; font-weight:700;
font-size:2.8rem; font-size:2.8rem;
text-align:center; text-align:center;
@ -448,6 +468,9 @@ h2 {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
margin:0 -($spacer*4); margin:0 -($spacer*4);
@include media($bp-medium) {
margin:0 -($spacer*2);
}
.telecharger { .telecharger {
padding:0; padding:0;
margin-top:$spacer; margin-top:$spacer;
@ -463,6 +486,11 @@ h2 {
width:200px; width:200px;
padding:0 0 0 ($spacer*2); padding:0 0 0 ($spacer*2);
margin:0; margin:0;
@include media($bp-small) {
padding:0;
margin: 0 auto $spacer;
}
li { li {
padding:($spacer/2) 0 ($spacer/2); padding:($spacer/2) 0 ($spacer/2);
} }
@ -521,6 +549,10 @@ h2 {
background:$couleurBackgroundTexte; background:$couleurBackgroundTexte;
padding:$spacer ($spacer*4); padding:$spacer ($spacer*4);
margin:($spacer*2) -($spacer*4) -($spacer*2); margin:($spacer*2) -($spacer*4) -($spacer*2);
@include media($bp-medium) {
padding:$spacer ($spacer*2);
margin:($spacer*2) -($spacer*2) -($spacer*2);
}
.article_emission & > div { .article_emission & > div {
@include flex; @include flex;
@include vendor-prefix(flex-wrap, wrap); @include vendor-prefix(flex-wrap, wrap);
@ -545,6 +577,9 @@ h2 {
} }
.derniere_emission & { .derniere_emission & {
margin:0 -($spacer*4); margin:0 -($spacer*4);
@include media($bp-medium) {
margin:0 -($spacer*2);
}
width:auto; width:auto;
} }
} }
@ -634,7 +669,10 @@ a:hover .fab, a:hover .fas {
margin-top:($spacer*6); margin-top:($spacer*6);
> h2 { > h2 {
margin-top:-($spacer*3.6); margin-top:-($spacer*3.6);
margin-bottom:($spacer*0.7); margin-bottom:($spacer*0.65);
@include media($bp-small) {
margin-bottom: 1.15rem;
}
} }
} }
.derniere_emission, .liste.emissions { .derniere_emission, .liste.emissions {
@ -707,13 +745,16 @@ a:hover .fab, a:hover .fas {
list-style:none; list-style:none;
padding:0; padding:0;
margin:0 -($spacer*4); margin:0 -($spacer*4);
@include media($bp-medium) {
margin:0 -($spacer*2);
}
> li { > li {
margin-bottom:2px; margin-bottom:2px;
} }
} }
.emission-resume.article-resume { .emission-resume.article-resume {
align-items:center; align-items:center;
padding: 0 1em; padding: 0 $spacer;
margin:0; margin:0;
.article__infos { .article__infos {
margin-left:-$spacer; margin-left:-$spacer;