maj grav
This commit is contained in:
@@ -1,23 +1,66 @@
|
||||
.default-animation {
|
||||
transition: all 0.5s ease;
|
||||
$animate: all 0.2s ease-in-out;
|
||||
|
||||
#text_figli{
|
||||
z-index: 999;
|
||||
p{
|
||||
& > a{
|
||||
z-index: 999;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
width: 0px;
|
||||
height: 1px;
|
||||
margin: 1px 0 0;
|
||||
transition: $animate;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
background-color: black;
|
||||
}
|
||||
&::before{
|
||||
left: 50%;
|
||||
}
|
||||
&:after{
|
||||
right: 50%;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:before,
|
||||
&:after {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pulse Animation
|
||||
.pulse {
|
||||
animation-name: pulse_animation;
|
||||
animation-duration: 2000ms;
|
||||
transform-origin:70% 70%;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes pulse_animation {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scale(1); }
|
||||
40% { transform: scale(1.08); }
|
||||
50% { transform: scale(1); }
|
||||
60% { transform: scale(1); }
|
||||
70% { transform: scale(1.05); }
|
||||
80% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
.circle_hover{
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: $color_culturelle;
|
||||
border-radius: 500px;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
transition: height .2s, width .2s;
|
||||
&.open{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transition: height .5s, width .5s;
|
||||
}
|
||||
&.publique{
|
||||
background: $color_publique;
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
}
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
margin-bottom: $marg;
|
||||
}
|
||||
.card-image{
|
||||
img{
|
||||
img:not(:last-of-type){
|
||||
margin-bottom: $marg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,21 @@
|
||||
@media screen and (max-width: 414px) {
|
||||
body{
|
||||
#start{
|
||||
width: $Wi-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi-m;
|
||||
#item{
|
||||
width: calc(100% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
@@ -39,7 +56,7 @@
|
||||
|
||||
#item_list{
|
||||
.card{
|
||||
width: calc( #{$Wi-m} );
|
||||
width: calc( #{$Wi-m} )!important;
|
||||
&:nth-child(odd){
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -64,6 +81,23 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) and (orientation: portrait) {
|
||||
|
||||
body{
|
||||
#start{
|
||||
width: $Wi80-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi33-m;
|
||||
#item{
|
||||
width: calc(300% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
@@ -71,12 +105,12 @@
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-t!important;
|
||||
line-height: $Flhome-t!important;
|
||||
}
|
||||
}
|
||||
// .home{
|
||||
// p{
|
||||
// font-size: $txt-figli-t!important;
|
||||
// line-height: $Flhome-t!important;
|
||||
// }
|
||||
// }
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-t;
|
||||
@@ -105,9 +139,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 812px) and (orientation: landscape) {
|
||||
@@ -222,3 +253,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) and (orientation: landscape) {
|
||||
body{
|
||||
#start{
|
||||
width: $Wi80-m;
|
||||
#text_figli{
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi33-m;
|
||||
#item{
|
||||
width: calc(300% + (.5rem * 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.sidebar-right{
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@@ -22,6 +22,33 @@
|
||||
}
|
||||
a{
|
||||
color: grey;
|
||||
&::before{
|
||||
content: " ";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&#culturelle{
|
||||
&::before{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
&#sociale{
|
||||
&::before{
|
||||
background: $color_sociale;
|
||||
}
|
||||
}
|
||||
&#publique{
|
||||
&::before{
|
||||
background: $color_publique;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, header{
|
||||
background: #f9f9f9fe;
|
||||
}
|
||||
@@ -12,7 +13,7 @@ body{
|
||||
#text_figli{
|
||||
p {
|
||||
a{
|
||||
position: relative;
|
||||
// position: relative;
|
||||
&.marg{
|
||||
margin-right: $marg;
|
||||
}
|
||||
@@ -20,20 +21,37 @@ body{
|
||||
}
|
||||
#item_list{
|
||||
width: 80vw;
|
||||
margin-top: 0.5rem;
|
||||
.card{
|
||||
width: calc((100% / 5) - ( #{$marg} * 2) );
|
||||
height: auto;
|
||||
// overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 0;
|
||||
margin-right: $marg;
|
||||
position: relative;
|
||||
margin-top: $marg;
|
||||
margin: 0 $marg $marg 0;
|
||||
height: 100%;
|
||||
& > .card-image{
|
||||
&.open{
|
||||
a{
|
||||
img{
|
||||
filter: grayscale(0);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
display: block;
|
||||
border-radius: 15px;
|
||||
overflow: auto;
|
||||
img{
|
||||
filter: grayscale(1);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
width: 100%;
|
||||
padding: $marg;
|
||||
flex-wrap: wrap;
|
||||
display: none;
|
||||
& > *{
|
||||
font-size: 0.8rem;
|
||||
@@ -42,12 +60,15 @@ body{
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
a{
|
||||
display: block;
|
||||
img{
|
||||
filter: grayscale(0);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: $marg;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@@ -56,25 +77,69 @@ body{
|
||||
vertical-align: baseline!important;
|
||||
}
|
||||
#item{
|
||||
width: calc( 307% - #{$marg} );
|
||||
width: calc( 500% + ( #{$marg} * 5) );
|
||||
padding: 2rem;
|
||||
margin-top: $marg;
|
||||
border-radius: 15px;
|
||||
.content-title{
|
||||
margin: 30px auto;
|
||||
margin: 0 auto 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
a{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.e-content{
|
||||
margin: 30px auto;
|
||||
margin: 1rem auto 2rem auto;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
&.publique{
|
||||
background: $color_publique;
|
||||
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
|
||||
}
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.publique{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_publique;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sociale{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_sociale;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.culturelle{
|
||||
.card{
|
||||
&:hover{
|
||||
.card-header{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.home){
|
||||
#start{
|
||||
|
||||
@@ -42,23 +42,52 @@ header{
|
||||
font-family: $avara;
|
||||
}
|
||||
}
|
||||
#item{
|
||||
.e-content{
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#item{
|
||||
.content-title{
|
||||
display: flex;
|
||||
margin: $marg 0;
|
||||
& > * {
|
||||
margin-right: $marg;
|
||||
font-size: 1.15rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2{
|
||||
width: auto;
|
||||
line-height: 4rem!important;
|
||||
font-size: 4rem!important;
|
||||
font-weight: normal!important;
|
||||
}
|
||||
span{
|
||||
font-size: 1rem;
|
||||
}
|
||||
&.publique{
|
||||
h2{
|
||||
font-family: $playfair;
|
||||
}
|
||||
span{
|
||||
font-family: $playfair;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.sociale{
|
||||
h2{
|
||||
font-family: $syne;
|
||||
}
|
||||
span{
|
||||
font-family: $syne;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.culturelle{
|
||||
h2{
|
||||
margin: 0 $marg 0 0;
|
||||
a{
|
||||
font-weight: bold;
|
||||
}
|
||||
font-family: $avara;
|
||||
}
|
||||
span{
|
||||
font-family: $avara;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,8 +106,8 @@ a.culturelle, span.culturelle{
|
||||
|
||||
.sidebar-right{
|
||||
ul, a{
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user