123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- // home
- body {
- .blog {
- margin: 0 10px;
- header {
- height:100vh;
- width: calc(100% - 22px);
- display: inline-flex;
- flex-direction: column;
- align-content: space-around;
- & > div{
- position: fixed;
- &.head{
- z-index: 999;
- padding-top: 25px;
- width: inherit;
- .svg-container {
- display: inline-block;
- position: relative;
- width: calc( ( 100% / 3 ) * 2 - 22px ) ;
- padding-bottom: 9%;
- vertical-align: middle;
- overflow: hidden;
- .svg-content {
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- }
- }
- h2 {
- margin-left: -4px;
- position: absolute;
- left: 0;
- }
- &::after {
- display: block;
- content: " ";
- width: 0%;
- height: 1px;
- background: black;
- }
- }
- &.works-mea {
- display: inline-flex;
- align-self: flex-end;
- height: calc(100% - 25px);
- align-items: flex-end;
- width: inherit;
- .card{
- &:nth-child(2){
- margin:0 10px;
- }
- &:not(:nth-child(2)){
- margin: 0;
- }
- }
- }
- &.scroll{
- bottom: 0;
- text-align: center;
- width: inherit;
- }
- }
- }
- &.down{
- header{
- .head{
- .svg-container {
- width: 250px;
- transition: all 1s 0.9s ease;
- padding-bottom: calc(70px - 7px);
- .svg-content {
- path{
- transition: all 1s 0.9s ease;
- fill: black!important;
- stroke-width:0!important;
- }
- }
- }
- &::after{
- -webkit-animation: showborder 2.5s 1.5s ease forwards;
- animation: showborder 2.5s 1.5s ease forwards;
- }
- h2{
- opacity: 0;
- left: -40%;
- transition: left 3s linear, opacity 0.3s 0.1s ease;
- }
- }
- .card{
- &:nth-child(1){
- -webkit-animation: translateY 1s ease forwards;
- animation: translateY 1s ease forwards;
- }
- &:nth-child(2){
- -webkit-animation: translateY 1.3s ease forwards;
- animation: translateY 1.3s ease forwards;
- }
- &:nth-child(3){
- -webkit-animation: translateY 1.6s ease forwards;
- animation: translateY 1.6s ease forwards;
- }
- }
- .scroll{
- opacity: 0;
- transition: all 1s ease;
- }
- }
- }
- }
- }
- .contact{
- width: 90px;
- height: auto;
- z-index: 999;
- position: fixed;
- top: 0px;
- right: 0px;
- transition: width 0.5s ease;
- cursor: pointer;
- &:hover{
- width: 80px;
- transition: width 0.5s ease;
- }
- svg{
- cursor: pointer;
- -webkit-animation: rotation 6s infinite linear;
- animation: rotation 6s infinite linear;
- }
- h3{
- color: white;
- -webkit-transform: rotate(35deg);
- transform: rotate(35deg);
- position: absolute;
- top: 35px;
- left: 19px;
- }
- .txt{
- position: fixed;
- right: -200px;
- }
- &.open{
- -webkit-transform: scale(15);
- transform: scale(15);
- height: auto;
- transition: -webkit-transform 0.5s ease;
- transition: transform 0.5s ease;
- transition: transform 0.5s ease, -webkit-transform 0.5s ease;
- h3{
- color: transparent;
- left: 500px;
- transition: visibility 0.5 ease left 1s ease;
- }
- svg{
- -webkit-animation: rotation 12s infinite linear;
- animation: rotation 12s infinite linear;
- }
- .txt{
- position: fixed;
- color: white;
- -webkit-transform: scale(0.1);
- transform: scale(0.1);
- top: -10px;
- right: -20px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- }
- }
- &.close{
- -webkit-transform: scale(1);
- transform: scale(1);
- transition: -webkit-transform 0.5s 0.1s ease;
- transition: transform 0.5s 0.1s ease;
- transition: transform 0.5s 0.1s ease, -webkit-transform 0.5s 0.1s ease;
- & + .txt{
- top: 190px;
- text-align: center;
- line-height: 1.5rem;
- z-index: 9999;
- -webkit-animation: translateleft 1s ease forwards;
- animation: translateleft 1s ease forwards;
- }
- h3{
- transition: color 0.5s 0.5s ease, left 0.5s ease;
- }
- &:hover{
- transition: -webkit-transform 0.5s ease!important;
- transition: transform 0.5s ease!important;
- transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
- -webkit-transform: scale(0.9)!important;
- transform: scale(0.9)!important;
- }
- }
- }
- // page
- body {
- #page-wrapper.item {
- header {
- z-index: 999;
- padding-top: 25px;
- width: inherit;
- border-bottom: 1px solid black;
- position: fixed;
- height: 5rem;
- background: white;
- top: 0;
- left: 10px;
- right: 10px;
- z-index: 999;
- .head{
- .svg-container {
- width: 250px;
- transition: all 1s 0.9s ease;
- .svg-content {
- path{
- transition: all 1s 0.9s ease;
- fill: black!important;
- stroke-width:0!important;
- }
- }
- }
- }
- h1 {
- // color: black;
- // line-height: 5rem;
- }
- h2, .scroll {
- display: none;
- }
- }
- }
- }
|