clean css

This commit is contained in:
2020-09-15 12:53:50 +02:00
parent cca5ead09a
commit dedd9459e3
12 changed files with 339 additions and 147 deletions
@@ -3,6 +3,7 @@ $colorWhite: white;
$colorYellow:#ffcc00;
$colorBlack:black;
$colorBlue:#009ee0ff;
$colorRed:#f51212;
$colorBlack:black;
$heightLogo: 115px;
@@ -48,10 +48,6 @@ li,ul,ol{
}
}
footer{
display: none!important;
}
.wrap-btn{
margin-top: 2rem;
@media screen and (min-width: 576px) {
@@ -1,30 +1,71 @@
&.agenda, &.archive{
main{
padding-top: 10rem;
h2{
border: 5px solid $colorYellow;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
z-index: 999;
left: -0rem;
background: white;
position: relative;
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
}
}
section{
&.filter{
margin-bottom: 2rem;
}
}
.cat-list{
li{
border: 5px solid black;
padding: 0.5rem 1rem;
margin-left: 1rem;
cursor:pointer;
transition: background 0.3s ease, color 0.3s ease;
&:hover{
background:black;
color: white;
transition: all 0.3s ease;
}
&.is-active{
background:black;
color: white;
flex-direction: column;
ul{
margin-bottom: 2rem;
li{
border: 5px solid black;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
cursor:pointer;
transition: background 0.3s ease, color 0.3s ease;
a{
color: black;
}
&:hover{
background:black;
color: white;
transition: all 0.3s ease;
a{
color: inherit;
}
}
&.is-active{
background:black;
color: white;
a{
color: inherit;
}
}
}
&:not(.cat-list){
justify-content: end;
li{
margin-right: 1rem;
}
}
}
}
}
.thumbnails{
a{
display: block;
}
margin-bottom: 2rem;
.wrap_content{
display: flex;
@@ -2,7 +2,7 @@
aside{
height: 100%;
& > .wrapper{
border:5px solid yellow;
border:5px solid $colorYellow;
padding: 1rem 2rem;
}
#bouton_asso{
@@ -10,7 +10,7 @@
text-align: center;
a{
padding: 0.5rem 1rem;
border:5px solid yellow;
border:5px solid $colorYellow;
}
}
}
@@ -28,7 +28,7 @@
}
}
article{
border: 5px solid yellow;
border: 5px solid $colorYellow;
margin-bottom: 20px;
padding: 2rem;
}
@@ -13,7 +13,7 @@
}
.container-fluid{
& > h3{
border: 5px solid black;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
@@ -40,6 +40,11 @@
}
}
&#section_proch{
& > .container-fluid{
h3{
border: 5px solid $colorYellow;
}
}
& > div{
& > .row{
justify-content: center;
@@ -59,9 +64,72 @@
}
}
}
&#section_asso{
.container-fluid{
& > h3{
border: 5px solid $colorYellow;
}
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 0;
transform: translateX(0);
width: 100%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 5px solid $colorYellow;
margin: auto;
}
}
.btn{
a{
text-decoration: underline;
color: $colorBlack;
}
}
}
@media screen and (min-width: 576px) {
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 80%;
transform: translateX(-100%);
width: 70%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 5px solid $colorYellow;
margin-bottom: 100px;
}
}
}
}
}
&#section_projets{
.container-fluid{
& > h4{
& > h3{
border: 5px solid $colorRed;
}
& > h4{
text-align: center;
margin: 0 0 2rem 0;
}
@@ -70,7 +138,7 @@
margin-bottom: 2rem;
h3{
text-align: center;
color: red;
color: $colorRed;
text-transform: uppercase;
height: 4rem;
display: flex;
@@ -78,13 +146,13 @@
justify-content: center;
}
& > div{
border:10px solid red;
border:10px solid $colorRed;
padding: 1rem;
height: calc(100% - 4rem);
h4{
font-size: 1rem;
line-height: 1.2;
color: red;
color: $colorRed;
}
& > div{
p{
@@ -100,6 +168,12 @@
}
}
&#section_tpsF{
.container-fluid{
& > h3{
border: 5px solid $colorBlue;
color: $colorBlack;
}
}
& > div{
& > .row{
justify-content: center;
@@ -141,53 +215,10 @@
}
}
&#section_asso{
&#section_MineVideo{
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 0;
transform: translateX(0);
width: 100%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 8px solid yellow;
margin: auto;
}
}
}
@media screen and (min-width: 576px) {
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
top: 0;
left: 0;
margin-top: 100px;
width: 70%;
& ~ .row{
margin-top: 2rem;
left: 80%;
transform: translateX(-100%);
width: 70%;
position: relative;
padding: 20px 10px;
background-color: white;
border: 8px solid yellow;
margin-bottom: 100px;
}
}
& > h3{
border: 5px solid $colorBlue ;
}
}
}
@@ -198,6 +229,7 @@
margin: auto;
}
}
.thumbnails{
&:not(:last-of-type){
margin-bottom: 3rem;
@@ -1,5 +1,76 @@
&.post{
.retour{
margin-bottom: 2rem;
a{
display: inline-block;
transform: translateX(-50%);
color: black;
}
}
header{
h3{
border: 5px solid $colorYellow;
padding: 0.5rem;
width: max-content;
}
}
.data{
margin: 1rem 0rem;
}
footer{
.partager{
figure{
a{
margin-right: 0.5rem;
width: 35px;
height: 35px;
}
}
}
}
.other{
margin: 5rem 0;
h3{
border: 5px solid $colorYellow;
width: max-content;
padding: 0.5rem;
text-transform: uppercase;
width: max-content;
display: inline-block;
padding: 0.5rem 1.5rem;
z-index: 999;
left: -0rem;
background: white;
position: relative;
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
}
}
.thumbnails{
min-height: 450px;
a{
display: block;
}
margin-bottom: 2rem;
.wrap_content{
display: flex;
flex-direction: column;
justify-content: center;
margin-top: -6rem;
height: 150px;
}
&:hover {
.wrap_content{
margin-top: -7rem;
}
}
}
}
}