modif css
This commit is contained in:
@@ -69,6 +69,11 @@ $animate: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&#figureslibres{
|
||||
&::before, &::after{
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hidden{
|
||||
@@ -89,23 +94,34 @@ $animate: all 0.2s ease-in-out;
|
||||
height: 200px;
|
||||
transition: height .5s, width .5s;
|
||||
}
|
||||
&.figureslibres{
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/figures_libres.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
&.publique{
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/forme2.svg") center no-repeat;
|
||||
url("/user/themes/figureslibres/images/publique.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
border-radius: 100px;
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/sociale.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
&.culturelle{
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
|
||||
url("/user/themes/figureslibres/images/culturelle.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
&.commanditaires{
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/forme4.svg") center no-repeat;
|
||||
url("/user/themes/figureslibres/images/commanditaires.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
&.logiciels-libres{
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/logiciels_libres.svg") center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
#item{
|
||||
.e-content{
|
||||
-webkit-columns: 300px 2;
|
||||
-moz-columns: 300px 2;
|
||||
columns: 300px 2;
|
||||
margin-bottom: $marg;
|
||||
width: 50%;
|
||||
min-width: 500px;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
.card-image{
|
||||
img:not(:last-of-type){
|
||||
margin-bottom: $marg;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,19 @@
|
||||
width: $Wi80-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
&.figureslibres, &.logiciels-libres{
|
||||
width: 100%;
|
||||
}
|
||||
.card{
|
||||
width: $Wi33-m;
|
||||
#item{
|
||||
width: calc(300% + (.5rem * 2));
|
||||
.content-title{
|
||||
margin: 1rem auto 1rem auto;
|
||||
}
|
||||
.e-content{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,33 +25,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
|
||||
@media screen and (max-width: 1000px){
|
||||
.sidebar-right{
|
||||
.list-projets {
|
||||
.container{
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.informations{
|
||||
float: none;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#item_list{
|
||||
width: 90vw!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
body #start #text_figli #item_list .card{
|
||||
width: calc((100% / 2) - .5rem);
|
||||
#item{
|
||||
width: calc(90vw - 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 510px) {
|
||||
body{
|
||||
#start{
|
||||
width: $Wi-m;
|
||||
margin: 0rem auto 2rem auto;
|
||||
padding-right: 2rem;
|
||||
margin: 0.5rem auto 2rem auto;
|
||||
#text_figli{
|
||||
p{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.3rem;
|
||||
a{
|
||||
&:before,
|
||||
&:after {
|
||||
width: 50%;
|
||||
opacity: 1;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
#item_list{
|
||||
width: 100%;
|
||||
width: 100%!important;
|
||||
&.figureslibres, &.logiciels-libres{
|
||||
min-width: 100%;
|
||||
}
|
||||
.card{
|
||||
width: calc(100%);
|
||||
margin: 0 0 0.5rem 0;
|
||||
#item{
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
.e-content{
|
||||
min-width: 100%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.content-title{
|
||||
h2{
|
||||
font-size: 2rem !important;
|
||||
@@ -63,8 +101,7 @@
|
||||
right: -100%;
|
||||
#icone_list{
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
// background-color: #f9f9f9fe;
|
||||
top: 0;
|
||||
.hamburger{
|
||||
float: right;
|
||||
z-index: 999;
|
||||
@@ -72,22 +109,61 @@
|
||||
}
|
||||
.list-projets{
|
||||
z-index: 999;
|
||||
ul{
|
||||
text-align: center;
|
||||
span{
|
||||
text-align: center;
|
||||
.title-menu{
|
||||
h2{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
text-align: center;
|
||||
margin-top: 0!important;
|
||||
display: initial!important;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
&::before{
|
||||
width: 100%;
|
||||
}
|
||||
a{
|
||||
padding: 0.5rem;
|
||||
display: initial!important;
|
||||
padding: 0rem!important;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
img{
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
&> span{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container-wrap{
|
||||
display: block;
|
||||
.container{
|
||||
&::after{
|
||||
height: 1px;
|
||||
width: 0;
|
||||
bottom: 0;
|
||||
top: auto!important;
|
||||
left: 0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-active{
|
||||
.container{
|
||||
&::after{
|
||||
width: 100%!important;
|
||||
transition: 1s width 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
.informations{
|
||||
h3{
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,28 +2,26 @@
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// right: calc( -20% + 0.5rem);
|
||||
left: -100vw;
|
||||
top: 0;
|
||||
transition: 0.3s right ease;
|
||||
background: white;
|
||||
background: #f9f9f9fe;
|
||||
z-index: 1000;
|
||||
ul{
|
||||
& > *:not(span) {
|
||||
// border: 2px solid black;
|
||||
// border-radius: 50px;
|
||||
span{
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#icone_list{
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
}
|
||||
.list-projets{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
.title-menu{
|
||||
padding-left: 0.5rem;
|
||||
&::after{
|
||||
@@ -34,11 +32,26 @@
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.container-wrap{
|
||||
display: inline-flex;
|
||||
}
|
||||
.container{
|
||||
width: 85%;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding: 1rem 2rem 2rem 0.5rem;
|
||||
width: 85%;
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
&::after{
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 1px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-right: 1rem;
|
||||
right:0;
|
||||
}
|
||||
ul{
|
||||
margin-bottom: 20px;
|
||||
span.cat{
|
||||
@@ -53,8 +66,10 @@
|
||||
a{
|
||||
z-index: 0;
|
||||
display: block;
|
||||
background: white;
|
||||
background: #f9f9f9fe;
|
||||
transition: 0.6s background;
|
||||
margin-right: 0px;
|
||||
padding: 0 7px;
|
||||
.img{
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
@@ -75,28 +90,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// &::before{
|
||||
// position: absolute;
|
||||
// content: " ";
|
||||
// display: inline-block;
|
||||
// height: 100%;
|
||||
// transition: 0.6s background;
|
||||
// }
|
||||
&:hover{
|
||||
&.culturelle{
|
||||
a{
|
||||
background: $color_culturelle;
|
||||
transition: 0.6s background;
|
||||
}
|
||||
// &::before{
|
||||
// }
|
||||
}
|
||||
&.sociale{
|
||||
a{
|
||||
background: $color_sociale;
|
||||
transition: 0.6s background;
|
||||
}
|
||||
// &::before{}
|
||||
}
|
||||
&.publique{
|
||||
a{
|
||||
@@ -121,21 +126,11 @@
|
||||
}
|
||||
}
|
||||
.informations{
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 15%;
|
||||
min-width: 250px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
&::after{
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 1px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-right: 1rem;
|
||||
left:0;
|
||||
}
|
||||
padding-left: 40px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.is-active{
|
||||
@@ -149,10 +144,19 @@
|
||||
}
|
||||
}
|
||||
.informations{
|
||||
padding-left: 25px;
|
||||
opacity: 1;
|
||||
transition: 1s opacity 1s ease;
|
||||
|
||||
}
|
||||
.container{
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
transition: 1s opacity 1s ease;
|
||||
&::after{
|
||||
background: black;
|
||||
transition: 1s 0.9s height ease;
|
||||
height: 100%;
|
||||
transition: 1s 0.9s height ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,9 @@
|
||||
|
||||
html, body{
|
||||
background: #f9f9f9fe;
|
||||
&.hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
img.lazy{
|
||||
display: block;
|
||||
@@ -34,7 +37,7 @@ img.lazy{
|
||||
body{
|
||||
#start{
|
||||
width: $Wi80;
|
||||
margin: $marg auto auto $marg;
|
||||
margin: 1rem auto auto 1rem;
|
||||
#text_figli{
|
||||
p {
|
||||
a{
|
||||
@@ -148,12 +151,12 @@ body{
|
||||
}
|
||||
#item{
|
||||
width: calc( 80vw - ( #{$marg} * 6) );
|
||||
padding: 2rem;
|
||||
padding: 2rem 2rem 0.5rem 2rem;
|
||||
margin-top: $marg;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
.content-title{
|
||||
margin: 0 auto 0 auto;
|
||||
margin: 1rem auto 3rem auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
@@ -163,7 +166,7 @@ body{
|
||||
}
|
||||
}
|
||||
.e-content{
|
||||
margin: 1rem auto 2rem auto;
|
||||
// margin: 1rem auto 2rem auto;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
@@ -238,12 +241,22 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
&.figureslibres, &.logiciels-libres{
|
||||
display: block;
|
||||
width: 70%;
|
||||
min-width: 500px;
|
||||
margin: 1rem 0;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#top{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -1.5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,11 @@ a, button{
|
||||
outline: none!important;
|
||||
}
|
||||
|
||||
.title-menu{
|
||||
h2{
|
||||
font-family: $rammetto;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
h2, p{
|
||||
font-size: $txt-figli;
|
||||
@@ -47,6 +52,12 @@ a, button{
|
||||
&#commanditaires{
|
||||
font-family: $moche;
|
||||
}
|
||||
&#figureslibres{
|
||||
font-family: $rammetto;
|
||||
}
|
||||
&#logiciels-libres{
|
||||
font-family: $rumeur;
|
||||
}
|
||||
}
|
||||
#item{
|
||||
.e-content{
|
||||
@@ -139,7 +150,7 @@ a.culturelle, span.culturelle{
|
||||
}
|
||||
ul > li{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2rem;
|
||||
line-height: 2.5rem;
|
||||
a{
|
||||
font-size: 1.7rem;
|
||||
line-height: 2rem;
|
||||
|
||||
Reference in New Issue
Block a user