123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- @media screen and (max-width: 1024px){
- body{
- #start{
- width: $Wi80-m;
- #text_figli{
- #item_list{
- .card{
- width: $Wi33-m;
- #item{
- width: calc(300% + (.5rem * 2));
- }
- }
- }
- }
- }
- }
- }
- @media screen and (max-width: 1000px){
- .sidebar-right{
- .list-projets {
- .container{
- width: 100%;
- float: none;
- padding-bottom: 0;
- }
- .informations{
- width: calc(100% - 10px);
- float: none;
- padding-left: 0.5rem;
- margin-left: 10px;
- &::after{
- height: 1px;
- width: 0;
- }
- }
- }
- &.is-active{
- .informations{
- &::after{
- width: 100%;
- transition: 1s width 1s ease;
- }
- }
- }
- }
- #item_list{
- width: 90vw!important;
- }
- }
- @media screen and (max-width: 414px) {
- body{
- #start{
- width: $Wi-m;
- margin: 0rem auto 2rem auto;
- padding-right: 2rem;
- #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%;
- .card{
- width: calc(100%);
- margin: 0 0 0.5rem 0;
- #item{
- width: 100%;
- padding: 1rem;
- .content-title{
- h2{
- font-size: 2rem !important;
- line-height: 2.5rem !important;
- }
- & > div{
- line-height: 1rem;
- }
- }
- }
- }
- }
- }
- }
- .sidebar-right{
- width: 100%;
- right: -100%;
- #icone_list{
- z-index: 0;
- width: 100%;
- // background-color: #f9f9f9fe;
- .hamburger{
- float: right;
- z-index: 999;
- }
- }
- .list-projets{
- z-index: 999;
- ul{
- text-align: center;
- span{
- text-align: center;
- }
- li{
- text-align: center;
- margin-top: 0!important;
- &::before{
- width: 100%;
- }
- a{
- padding: 0.5rem;
- }
- }
- }
- }
- }
- }
- footer{
- z-index: 999;
- justify-content: center;
- width: 100%;
- bottom: 0!important;
- left: 0!important;
- padding: 0.5rem;
- background-color: #f9f9f9fe;
- }
- .circle_hover.open{
- width: 100px!important;
- height: 100px!important;
- }
- }
|