241 lines
5.2 KiB
SCSS
241 lines
5.2 KiB
SCSS
@media screen and (max-width: 700px) {
|
|
header{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 40px;
|
|
top: 0;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: white;
|
|
border-bottom: 2px solid rgb(0,0,0);
|
|
z-index: 999;
|
|
h1{
|
|
margin: auto 0;
|
|
}
|
|
nav{
|
|
margin: auto 0;
|
|
& > .tags{
|
|
& > a {
|
|
li{
|
|
position: relative;
|
|
z-index: 0;
|
|
&::after{
|
|
content: " ";
|
|
position: absolute;
|
|
background: rgb(0, 255, 0);
|
|
height: 10px;
|
|
margin: auto;
|
|
z-index: -1;
|
|
transition: width 0.5s;
|
|
width: 0%;
|
|
}
|
|
}
|
|
&:hover{
|
|
li{
|
|
&::after{
|
|
content: " ";
|
|
position: absolute;
|
|
background: rgb(0, 255, 0);
|
|
height: 10px;
|
|
margin: auto;
|
|
z-index: -1;
|
|
width: 100%;
|
|
transition: width 0.5s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& > ul:nth-child(1) {
|
|
& > li:nth-child(1){
|
|
display: flex;
|
|
position: relative;
|
|
margin-right: 35px;
|
|
& > a{
|
|
pointer-events: none;
|
|
}
|
|
&:after{
|
|
content: " ";
|
|
cursor: pointer;
|
|
display: block;
|
|
width: 25px;
|
|
height: 40px;
|
|
background-image: url(../images/fleche2.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
// background-size: 10px;
|
|
position: absolute;
|
|
right: -25px;
|
|
transition: all 0.5s;
|
|
}
|
|
&.hover{
|
|
&:after{
|
|
transform: rotate(180deg);
|
|
transition: all 0.5s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
li{
|
|
height: 40px;
|
|
margin-right: 20px;
|
|
align-items: center;
|
|
display: flex;
|
|
&:last-child{
|
|
margin-right: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
ul.tags{
|
|
display: none;
|
|
}
|
|
ul.visible, ul.active{
|
|
border-left: 2px solid black;
|
|
border-bottom: 2px solid black;
|
|
background: white;
|
|
display: block;
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 0px;
|
|
width: auto;
|
|
z-index: 999;
|
|
a{
|
|
display: flex;
|
|
width: auto;
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
&:first-child{
|
|
margin-top: 10px;
|
|
}
|
|
&:last-child{
|
|
margin-bottom: 10px;
|
|
}
|
|
li{
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#start{
|
|
margin-top: 40px;
|
|
//home
|
|
.item{
|
|
display: block;
|
|
.card{
|
|
position: relative;
|
|
width: 100%;
|
|
overflow-y: hidden;
|
|
padding-bottom: 5px;
|
|
margin-left: 0px!important;
|
|
margin-right: 0px!important;
|
|
&:last-child{
|
|
padding-bottom: 0px!important;
|
|
}
|
|
.card-image:hover{
|
|
transition: all 0.6s;
|
|
background-color: rgb(0, 255, 0);
|
|
img{
|
|
transition: all .6s;
|
|
mix-blend-mode: multiply;
|
|
opacity: .95;
|
|
}
|
|
& ~ .card-title{
|
|
top: 50%;
|
|
left: 50%;
|
|
opacity: 1;
|
|
transition: opacity 1s, top 0s;
|
|
}
|
|
}
|
|
.card-title{
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
opacity: 0;
|
|
transition: all 1s;
|
|
transform: translate(-50% , -50%);
|
|
}
|
|
}
|
|
}
|
|
//pageprojet
|
|
.content-item{
|
|
.e-content{
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
.media{
|
|
width: 100%;
|
|
}
|
|
.content{
|
|
width:100%;
|
|
min-width: auto!important;
|
|
.txt{
|
|
position: relative;
|
|
right: 0;
|
|
width: 100%;
|
|
min-width: auto!important;
|
|
height: auto!important;
|
|
padding: 20px 20px 0px 20px;
|
|
overflow-x: auto;
|
|
h3{
|
|
margin: 0px 0 10px 0;
|
|
}
|
|
}
|
|
.taxonomy{
|
|
width: 100%;
|
|
min-width: auto!important;
|
|
height: auto;
|
|
background: white;
|
|
position:relative;
|
|
bottom: 0;
|
|
border-top: 2px solid black;
|
|
span{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: auto 0;
|
|
padding-bottom: 10px;
|
|
a{
|
|
margin: 10px 10px 0 10px;
|
|
&:first-child{
|
|
margin-left: 20px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//page news
|
|
.news{
|
|
width: 100%;
|
|
min-width: auto!important;
|
|
height: auto;
|
|
padding: 10px 20px 10px 20px;
|
|
&:nth-child(1){
|
|
padding-top: 20px;
|
|
}
|
|
h3{
|
|
pointer-events: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.about{
|
|
width:100%;
|
|
min-width: auto!important;
|
|
height: auto;
|
|
padding: 20px;
|
|
h3{
|
|
pointer-events: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|