|
@@ -0,0 +1,240 @@
|
|
|
+@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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|