add anime+boucleproj
This commit is contained in:
+61
-58
@@ -7,29 +7,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes translatep1{
|
||||
0%{
|
||||
transform: translateY(35px);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(5px);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translatep2{
|
||||
0%{
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(40px);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateright{
|
||||
0%{
|
||||
right: -50px;
|
||||
@@ -67,59 +44,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes height{
|
||||
@keyframes reducH{
|
||||
0%{
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke : 1px;
|
||||
color: transparent;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
70%{
|
||||
-webkit-text-stroke : 1px;
|
||||
color: black;
|
||||
// line-height: 6.5rem;
|
||||
|
||||
}
|
||||
|
||||
100%{
|
||||
height: 0;
|
||||
min-height: 100px;
|
||||
font-size: $min-h1;
|
||||
-webkit-text-stroke : 0px;
|
||||
color: black;
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes margin{
|
||||
@keyframes translateY{
|
||||
0%{
|
||||
margin-top: 25vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
100%{
|
||||
margin-top: 0px;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes h1{
|
||||
0%{
|
||||
font-size: 11.2vw;
|
||||
}
|
||||
100%{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes card{
|
||||
0%{}
|
||||
|
||||
50%{
|
||||
transform: translateY(-40px);
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-50px);
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textestroke{
|
||||
@keyframes showcatlist {
|
||||
0%{
|
||||
-webkit-text-stroke : 1px;
|
||||
width: 0;
|
||||
box-shadow: 0px 0px 0px 0px black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-text-stroke : 0px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -2px 0px -2px black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes showborder {
|
||||
0%{
|
||||
width: 0;
|
||||
background: black;
|
||||
}
|
||||
100%{
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ultranslate {
|
||||
0%{
|
||||
opacity: 0;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes showcard {
|
||||
0%{
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
+8
-1
@@ -18,6 +18,8 @@ html {
|
||||
font-size: 18px;
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sections
|
||||
@@ -30,6 +32,8 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,7 +50,7 @@ main {
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-size: 3em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@@ -175,6 +179,9 @@ img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
iframe{
|
||||
border: none;
|
||||
}
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
+8
-7
@@ -6,15 +6,16 @@
|
||||
@include font-face($light, $file5, $typo, $category);//1
|
||||
|
||||
// font-size
|
||||
|
||||
$fh1: 11rem;
|
||||
$fh2:3rem;
|
||||
$fh2-i: 1.1rem;
|
||||
$fh1: 12vw;
|
||||
$fh2: 4.5vw;
|
||||
$fh2-i: 1rem;
|
||||
$fh3: 1rem;
|
||||
$fh5:0.8rem;
|
||||
$fh5: 0.8rem;
|
||||
$fp: 0.9rem;
|
||||
$fs:0.8rem;
|
||||
$fs-i: 1.1rem;
|
||||
$fs: 0.8rem;
|
||||
$fs-i: 1rem;
|
||||
$min-h1: 3rem;
|
||||
|
||||
// interline
|
||||
|
||||
//interlettre
|
||||
@@ -1,16 +1,16 @@
|
||||
@import 'theme/reset';
|
||||
@import 'theme/fonts';
|
||||
@import 'theme/variables';
|
||||
@import 'configurations/reset';
|
||||
@import 'configurations/fonts';
|
||||
@import 'configurations/variables';
|
||||
|
||||
@import 'theme/mixins';
|
||||
@import 'configurations/mixins';
|
||||
@import 'theme/typography';
|
||||
|
||||
@import 'theme/mCustomScrollbar';
|
||||
@import 'theme/animation';
|
||||
@import 'configurations/animation';
|
||||
|
||||
@import 'theme/all';
|
||||
@import 'theme/header';
|
||||
@import 'theme/home';
|
||||
@import 'theme/blog';
|
||||
@import 'theme/item';
|
||||
@import 'theme/footer';
|
||||
// @import 'theme/footer';
|
||||
|
||||
@@ -5,52 +5,32 @@ body{
|
||||
}
|
||||
#page-wrapper.blog{
|
||||
#start{
|
||||
position: relative;
|
||||
top: 200vh;
|
||||
height: calc(100% - 5rem);
|
||||
position: fixed;
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
padding-top: 110px;
|
||||
opacity: 0;
|
||||
&.visible{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
#page-wrapper.down{
|
||||
#start{
|
||||
top: 5rem;
|
||||
}
|
||||
#items{
|
||||
.card{
|
||||
animation: showcard 1.5s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#items{
|
||||
.cat-list{
|
||||
padding: 0 5px;
|
||||
ul{
|
||||
li{
|
||||
display: flex;
|
||||
&::after{
|
||||
width: 5px;
|
||||
content: " ";
|
||||
}
|
||||
&:hover{
|
||||
&::after{
|
||||
content: "\002022";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.full-works{
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.card{
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
&.fixed{
|
||||
// .cat-list{
|
||||
// position: fixed;
|
||||
// top: 80px;
|
||||
// z-index: 999;
|
||||
// background: white;
|
||||
// }
|
||||
// .full-works{
|
||||
// margin-top: 60px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,175 +1,114 @@
|
||||
// home
|
||||
body{
|
||||
height: 100%;
|
||||
.blog{
|
||||
header{
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
height: 100vh;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > section{
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
&.works-mea{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
body {
|
||||
.blog {
|
||||
header {
|
||||
height:100vh;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
& > div{
|
||||
position: fixed;
|
||||
&.head{
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
padding-top: 70px;
|
||||
h2 {
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
}
|
||||
&.works-mea {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
align-self: flex-end;
|
||||
height: calc(100% - 20px);
|
||||
align-items: flex-end;
|
||||
.card{
|
||||
&:nth-child(2){
|
||||
margin:0 10px;
|
||||
}
|
||||
&:not(:nth-child(2)){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll{
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.reduc{
|
||||
-webkit-animation: reducfont 1s ease forwards;
|
||||
animation: reducfont 1s ease forwards;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
font-size: 11.2vw;
|
||||
line-height: 7vw!important;
|
||||
transition: top 1s ease;
|
||||
transition: font-size 1.2s ease, color 1.2s ease , top 1.2s ease;
|
||||
}
|
||||
h2{
|
||||
position: fixed;
|
||||
top:220px;
|
||||
font-size: 3.7vw;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: opacity 1s ease 1s, transform 1s ease 1s;
|
||||
}
|
||||
nav{
|
||||
// margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
|
||||
// -webkit-transform: translateY(-50%);
|
||||
// transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
.scroll{
|
||||
width: 50px;
|
||||
height: 15px;
|
||||
margin: 0 auto 10px auto;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
& > p:nth-child(1){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
}
|
||||
& > p:nth-child(2){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
& > section:first-child{
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
}
|
||||
nav{
|
||||
margin-top: 0;
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
-webkit-transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease, -webkit-transform 1s ease;
|
||||
}
|
||||
h1{
|
||||
position: relative;
|
||||
font-size: 3rem;
|
||||
top: 0px;
|
||||
color: black;
|
||||
transition: font-size 1.2s ease 0.5s, color 1.2s ease 1s, top 1.2s ease 0.5s;
|
||||
animation: textestroke 0.5s ease 1.2s forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
top:220px;
|
||||
-webkit-transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
.card{
|
||||
-webkit-animation: card 1s forwards ease;
|
||||
animation: card 1s forwards ease;
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.8s ease;
|
||||
transition: opacity 0.8s ease;
|
||||
&.down{
|
||||
header{
|
||||
height: 5rem;
|
||||
.head{
|
||||
padding:0;
|
||||
transition: all 1s 0.9s ease;
|
||||
&::after{
|
||||
animation: showborder 2.5s 1.5s ease forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
margin-left: -100px;
|
||||
transition: all 1s ease;
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
&:nth-child(1){
|
||||
animation: translateY 1s ease forwards;
|
||||
}
|
||||
&:nth-child(2){
|
||||
animation: translateY 1.3s ease forwards;
|
||||
}
|
||||
&:nth-child(3){
|
||||
animation: translateY 1.6s ease forwards;
|
||||
}
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// html{
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// html, body {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
//
|
||||
// }
|
||||
// body {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: -30px;
|
||||
// bottom: 0;
|
||||
// padding-right: 15px;
|
||||
// overflow-y: scroll;
|
||||
// }
|
||||
|
||||
|
||||
// page
|
||||
body{
|
||||
& > .item{
|
||||
header{
|
||||
height: 130px;
|
||||
position: relative;
|
||||
nav{
|
||||
position: absolute;
|
||||
margin-top: 65px; /* poussé de la moitié de hauteur de viewport */
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
h1{
|
||||
color: black;
|
||||
}
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
.scroll{
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
#page-wrapper.item {
|
||||
header {
|
||||
border-bottom: 1px solid black;
|
||||
position: fixed;
|
||||
height: 112px;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
nav {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2, .scroll {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,42 +1,62 @@
|
||||
#body-wrapper{
|
||||
#items{
|
||||
.works-mea{
|
||||
display: inline-flex;
|
||||
.blog{
|
||||
#start{
|
||||
.cat-list {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
align-items: flex-end;
|
||||
.card{
|
||||
.card-image{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
left: -100%;
|
||||
&::before{
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
background: black;
|
||||
}
|
||||
ul {
|
||||
opacity: 0;
|
||||
display: inline-flex;
|
||||
margin: 10px 0;
|
||||
.btn-group{
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
&::after{
|
||||
width: 5px;
|
||||
content: " ";
|
||||
}
|
||||
&:hover{
|
||||
&::after{
|
||||
content: "\002022";
|
||||
}
|
||||
}
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card-header{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.card-footer{
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cat-list{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
padding: 10px 0;
|
||||
margin: 20px 0;
|
||||
ul{
|
||||
display: inline-flex;
|
||||
li{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#items{
|
||||
.full-works{
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
.card{
|
||||
width: calc((100vw / 3) - 6.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.down{
|
||||
.cat-list{
|
||||
left: 0;
|
||||
&::after{
|
||||
animation: showborder 2.5s 1.6s ease forwards;
|
||||
}
|
||||
ul{
|
||||
animation: ultranslate 1s 2.5s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ h1, h2{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
h2{
|
||||
font-size: $fh2;
|
||||
}
|
||||
@@ -24,6 +23,7 @@ p{
|
||||
font-family: $Regular;
|
||||
font-weight: normal;
|
||||
font-size: $fp;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
time{
|
||||
@@ -31,127 +31,70 @@ time{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
header{
|
||||
.contact{
|
||||
h3{
|
||||
text-transform: lowercase;
|
||||
color:white;
|
||||
.blog{
|
||||
h1{
|
||||
font-size: $fh1;
|
||||
line-height: 5rem;
|
||||
-webkit-text-stroke: 2px black;
|
||||
color: transparent;
|
||||
}
|
||||
h2{
|
||||
line-height: 8rem;
|
||||
}
|
||||
&.down{
|
||||
h1{
|
||||
animation: reducH 1s 0.9s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll{
|
||||
p{
|
||||
font-size: $fs;
|
||||
font-family: $bold;
|
||||
font-weight: normal;
|
||||
.item{
|
||||
h2{
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
.prev-next{
|
||||
a{
|
||||
.title{
|
||||
font-family: $medium;
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
}
|
||||
|
||||
time{
|
||||
font-size: $fs-i;
|
||||
}
|
||||
|
||||
.tags{
|
||||
font-family: $Regular;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
|
||||
#page-wrapper.blog{
|
||||
.works-mea, #items{
|
||||
.category{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
time{
|
||||
font-size: $fs;
|
||||
}
|
||||
.tags{
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cat-list{
|
||||
.cat{
|
||||
a{
|
||||
font-family: $light;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
&>.blog{
|
||||
h1{
|
||||
font-size: $fh1;
|
||||
-webkit-text-stroke:.1rem #111;
|
||||
color: transparent;
|
||||
line-height: 7rem;
|
||||
}
|
||||
.card{
|
||||
h5{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card-category{
|
||||
font-family: $italic;
|
||||
font-weight: normal;
|
||||
font-size: $fs;
|
||||
}
|
||||
.card-date{
|
||||
font-size: $fs;
|
||||
}
|
||||
.card-footer{
|
||||
span{
|
||||
font-family: $medium;
|
||||
font-weight: normal;
|
||||
font-size: $fs;
|
||||
text-transform: capitalize;
|
||||
a{
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
& >.item{
|
||||
h1{
|
||||
font-size: $fh2;
|
||||
}
|
||||
h2{
|
||||
font-size: $fh2-i;
|
||||
}
|
||||
.content-item{
|
||||
.content-title{
|
||||
& > a{
|
||||
font-family: $italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
.category{
|
||||
font-family: $italic;
|
||||
font-weight: normal;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
time{
|
||||
font-size: $fs;
|
||||
font-size: $fs-i;
|
||||
}
|
||||
.tags{
|
||||
font-family: $medium;
|
||||
font-weight: normal;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
a{
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
.top{
|
||||
p{
|
||||
font-family: $bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next{
|
||||
.title{
|
||||
font-family: $bold;
|
||||
font-size: $fs;
|
||||
}
|
||||
.tags{
|
||||
font-family: $italic;
|
||||
font-size: $fs!important;
|
||||
}
|
||||
.blog-date{
|
||||
time{
|
||||
font-family: $italic;
|
||||
font-size: $fs!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top{
|
||||
p{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
font-family: $Regular;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,72 @@
|
||||
body{
|
||||
padding: 0 2%;
|
||||
html, body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog{
|
||||
height: 100%;
|
||||
&.down{
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
.contact{
|
||||
z-index: 9999;
|
||||
width: 90px;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 2%;
|
||||
transform: scale(1);
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
transition: -webkit-transform 0.5s ease;
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
transition: -webkit-transform 0.5s ease;
|
||||
transition: transform 0.5s ease;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
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;
|
||||
display: none;
|
||||
}
|
||||
&.open{
|
||||
transform: scale(15);
|
||||
-webkit-transform: scale(15);
|
||||
transform: scale(15);
|
||||
height: auto;
|
||||
-webkit-transition: -webkit-transform 0.5s ease;
|
||||
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;
|
||||
-webkit-transition: visibility 0.5 ease left 1s ease;
|
||||
transition: visibility 0.5 ease left 1s ease;
|
||||
}
|
||||
img{
|
||||
animation: rotation 12s infinite linear;
|
||||
svg{
|
||||
-webkit-animation: rotation 12s infinite linear;
|
||||
animation: rotation 12s infinite linear;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
@@ -32,66 +74,77 @@ header{
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateright 1s ease forwards;
|
||||
-webkit-animation: translateright 1s ease forwards;
|
||||
animation: translateright 1s ease forwards;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: -webkit-transform 0.5s 0.1s ease;
|
||||
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{
|
||||
position: fixed;
|
||||
top: 190px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
z-index: 9999;
|
||||
animation: translateleft 1s ease forwards;
|
||||
-webkit-animation: translateleft 1s ease forwards;
|
||||
animation: translateleft 1s ease forwards;
|
||||
}
|
||||
h3{
|
||||
color: white;
|
||||
left: 20px;
|
||||
|
||||
|
||||
-webkit-transition: color 0.5s 0.5s ease, left 0.5s ease;
|
||||
transition: color 0.5s 0.5s ease, left 0.5s ease;
|
||||
}
|
||||
&:hover{
|
||||
-webkit-transition: -webkit-transform 0.5s ease!important;
|
||||
transition: -webkit-transform 0.5s ease!important;
|
||||
transition: transform 0.5s ease!important;
|
||||
transform: scale(0.9)!important;
|
||||
transition: transform 0.5s ease, -webkit-transform 0.5s ease!important;
|
||||
-webkit-transform: scale(0.9)!important;
|
||||
transform: scale(0.9)!important;
|
||||
}
|
||||
}
|
||||
img{
|
||||
animation: rotation 6s infinite linear;
|
||||
}
|
||||
h3{
|
||||
transform: rotate(35deg);
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 20px;
|
||||
}
|
||||
& + .txt{
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
p{
|
||||
}
|
||||
}
|
||||
}
|
||||
h2{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card{
|
||||
width: calc(100% / 3);
|
||||
padding: 0 10px;
|
||||
line-height: 0.8!important;
|
||||
width: calc((100% / 3));
|
||||
line-height: 0.8rem!important;
|
||||
.card-header{
|
||||
margin-top: 10px;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
& > div{
|
||||
margin-right: 5px;
|
||||
& > a{
|
||||
vertical-align: baseline;
|
||||
}
|
||||
& > time{
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.works-mea{
|
||||
& > div:last-child{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: calc((100% / 2) - 5px );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.works-mea{
|
||||
& > div:nth-child(2){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.card{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
body{
|
||||
& >.item{
|
||||
#page-wrapper.item{
|
||||
margin: 0 10px;
|
||||
.contact{
|
||||
.txt{display: none}
|
||||
}
|
||||
#start{
|
||||
margin-top: 112px;
|
||||
}
|
||||
#body-wrapper.blog-listing{
|
||||
border-top: 1px solid black;
|
||||
padding-top: 20px;
|
||||
.img-card{
|
||||
width: 49%;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% / 3) - 6.5px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header-item{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
.title{
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
h2{
|
||||
margin-right: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
time{
|
||||
margin-right: 5px;
|
||||
@@ -23,15 +31,20 @@ body{
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: calc(100% / 3);
|
||||
margin: 20px 0;
|
||||
width: calc((100% / 3) - 15px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.prev-next{
|
||||
width: calc(100% / 3);
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: calc( 50% + 10px );
|
||||
transform: translateY(-50%);
|
||||
right: 0px;
|
||||
.btn{
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
.btn-info{
|
||||
position: absolute;
|
||||
transform: rotate(-15deg);
|
||||
@@ -43,6 +56,7 @@ body{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top{
|
||||
@@ -59,3 +73,54 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
body{
|
||||
#page-wrapper.item{
|
||||
#body-wrapper.blog-listing{
|
||||
.header-item{
|
||||
.content{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
.prev-next{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
}
|
||||
.img-card{
|
||||
width: calc((100% / 2) - 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body{
|
||||
#page-wrapper.item{
|
||||
#body-wrapper.blog-listing{
|
||||
.header-item{
|
||||
.content{
|
||||
width: calc((100%) - 15px);
|
||||
}
|
||||
.prev-next{
|
||||
width: calc((100%) - 15px);
|
||||
position: relative;
|
||||
transform: translateY(0%);
|
||||
.btn{
|
||||
.btn-info{
|
||||
display: none;
|
||||
}
|
||||
img{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-card{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user