CV-Portfolio 0.0.1

data/assets/css/app/_single-news.scss

@@ -0,0 +1,445 @@
+/* -----------------------------------------------------------------
+    - Single post
+----------------------------------------------------------------- */ 
+
+.header-post {
+  margin-top: rem(16px);
+  text-align: center;
+  
+  @media only screen and (max-width: $small) {
+    margin-top: rem(16px);
+  }
+  
+  .title {
+	font-size: rem(40px);
+	margin-bottom: rem(24px);
+	
+	@media only screen and (max-width: $large) {
+		font-size: rem(36px);
+		margin-bottom: rem(18px);
+	}
+    
+	@media only screen and (max-width: $medium) {
+		font-size: rem(32px);
+	}
+
+	@media only screen and (max-width: $small) {
+	  font-size: rem(28px);
+	  margin-bottom: rem(16px);
+	}
+  }
+  
+  &__image-wrap {
+    height: rem(400px);
+	margin-left: rem(-30px);
+	margin-right: rem(-30px);
+	margin-bottom: rem(40px);
+	
+	@media only screen and (max-width: $small) {
+	  height: rem(240px);
+	  margin-left: rem(-20px);
+	  margin-right: rem(-20px);
+	  margin-bottom: rem(24px);
+	}
+  }
+}
+
+.caption-post {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: rem(32px);
+  width: 80%;
+  
+  @media only screen and (max-width: $large) {
+    width: 100%;
+  }
+  
+  @media only screen and (max-width: $small) {
+    margin-bottom: rem(19px);
+  }
+}
+
+.gallery-post {
+  @include flex($wrap: wrap);
+  margin-left: rem(-16px);
+  margin-right: rem(-16px);
+  
+  @media only screen and (max-width: $small) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  
+  &__item {
+    flex: calc(50% - 32px);
+	height: auto;
+	max-height: 80vw;
+	margin-left: rem(16px);
+	margin-right: rem(16px);
+    width: calc(50% - 32px);
+	
+	@media only screen and (max-width: $small) {
+	  flex: 100%;
+	  margin-left: 0;
+	  margin-right: 0;
+	  margin-bottom: rem(16px);
+      width: 100%;
+	}
+  }
+  
+  &__caption {
+    font-size: rem(13px);
+	font-style: italic;
+	padding: rem(16px) rem(16px) rem(32px);
+	text-align: center;
+	width: 100%;
+	
+	@media only screen and (max-width: $small) {
+	  padding: 0 0 rem(16px);
+	}
+	
+	a {
+	  color: var(--color-accent);
+	}
+  }
+}
+
+.footer-post {
+  @include flex($align: center, $justify: center, $wrap: wrap);
+  margin-bottom: rem(32px);
+  margin-top: rem(32px);
+  padding-top: rem(32px);
+  position: relative;
+  
+  @media only screen and (max-width: $small) {
+    margin-bottom: rem(16px);
+    margin-top: rem(16px);
+  }
+  
+  &::before {
+    content: '';
+	background-color: var(--color-border);
+	height: rem(1px);
+	margin: auto;
+	@include position(absolute, $top: 0, $left: 0, $right: 0);
+	max-width: rem(100px);
+	width: 15%;
+  }
+  
+  &__share {
+    @include flex($align: baseline);
+	font-size: rem(13px);
+	color: var(--color-paragraph);
+	margin: 0 rem(17px);
+
+	@media only screen and (max-width: $small) {
+	  margin: 0 rem(6px);
+	}
+
+	&:hover {
+	  color: var(--color-accent);
+	  text-decoration: none;
+	}
+	
+	.font-icon {
+	  margin-right: rem(11px);
+	}
+	
+	span {
+	  @media only screen and (max-width: $small) {
+	    display: none;
+	  }
+	}
+  }
+}
+
+// Comments
+.comment-box {
+  @include flex($direction: column);
+  
+  & & {
+	margin-left: rem(48px);
+	
+	@media only screen and (max-width: $small) {
+	  margin-left: rem(19px);
+	}
+  }
+
+  &__inner {
+	border-radius: var(--radius-16);
+	box-shadow: var(--box-shadow-50);
+	@include flex();
+	margin-bottom: rem(20px);
+    padding: rem(20px) rem(20px) rem(16px) rem(20px);
+	
+	@media only screen and (max-width: $small) {
+	  border-radius: var(--radius-12);
+	  box-shadow: var(--box-shadow-30);
+	  flex-direction: column;
+	  padding: rem(16px);
+	  margin-bottom: rem(16px);
+	}
+  }
+  
+  &__body {
+	flex: 1;
+	padding-left: rem(16px);
+	
+	@media only screen and (max-width: $small) {
+	  margin-top: rem(12px);
+	  padding-left: rem(0);
+	}
+	
+	p {
+	  margin-bottom: rem(11px);
+	  
+	  @media only screen and (max-width: $small) {
+	    margin-bottom: rem(8px);
+	  }
+	}
+	
+	.emoji {
+	  margin: 0 rem(5px);
+	  vertical-align: bottom;
+	  
+	  @media only screen and (max-width: $small) {
+	    margin: 0 rem(2px);
+		height: rem(17px);
+		width: rem(17px);
+	  }
+	}
+  }
+  
+  &__details {
+    @include flex($justify: space-between);
+    font-size: rem(18px);
+	margin-top: rem(8px);
+    margin-bottom: rem(8px);
+	
+	@media only screen and (max-width: $small) {
+      font-size: rem(15px);
+	  flex-direction: column;
+	  margin-top: 0;
+    }
+	
+	a {
+	  text-decoration: none;
+	}
+  }
+  
+  &__details-date {
+    font-size: rem(12px);
+	font-weight: 400;
+	opacity: .5;
+	
+	@media only screen and (max-width: $small) {
+	  font-size: rem(12px);
+	  margin-top: rem(5px);
+	}
+  }
+  
+  .avatar {
+    margin-right: rem(16px);
+	flex-shrink: 0;
+  }
+  
+  &__footer {
+	@include inline-flex();
+    list-style: none;
+	margin: 0;
+	padding: 0;
+	
+	li {
+	  cursor: pointer;
+	  font-weight: 400;
+	  margin-right: rem(32px);
+	  
+	  @media only screen and (max-width: $small) {
+	    margin-right: rem(16px);
+	  }
+	  
+	  &:last-child {
+		margin-right: 0;
+      }	  
+	}
+	
+	.font-icon {
+	  font-size: rem(16px);
+	  vertical-align: text-bottom;
+	  
+	  @media only screen and (max-width: $small) {
+	    font-size: rem(14px);
+	  }
+	}	
+  }
+}
+
+// Comment form
+.comment-form {
+  margin-top: rem(16px);
+  position: relative;
+  
+  .textarea {
+	padding: rem(24px) rem(72px);
+	max-height: rem(200px);
+	overflow: hidden!important;
+	
+	@media only screen and (max-width: $small) {
+	  padding: rem(14px) rem(52px);
+	}
+  }
+  
+  .btn {
+    $size-btn: rem(48px);
+    height: $size-btn;
+    margin-bottom: auto;
+    margin-top: auto;
+	padding: 0;
+	@include position(absolute, $top: 0, $bottom: 0);
+    width: $size-btn;
+	
+	@media only screen and (max-width: $small) {
+	  height: #{$size-btn / 1.4};
+	  width: #{$size-btn / 1.4};
+	}
+	
+	i {
+	  background: var(--color-gradient-text);
+	  -webkit-background-clip: text;
+			  background-clip: text;
+	  -webkit-text-fill-color: transparent;
+	  -webkit-text-decoration-skip: objects;
+	  cursor: pointer;
+	  font-size: rem(16px);
+	  margin: 0;
+
+	  @media only screen and (max-width: $small) {
+		font-size: rem(16px);
+	  }
+	}
+  }
+  
+  .btn-submit {
+    right: 0;
+	margin-right: rem(12px);
+
+	@media only screen and (max-width: $small) {
+		margin-right: rem(10px);
+	}
+  }
+  
+  .btn-emoji {
+    line-height: 0;
+  }
+
+  .dropdown {
+	height: rem(19px);
+	line-height: 1.2;
+    margin-top: auto;
+    margin-bottom: auto;
+	margin-left: rem(12px);
+	@include position(absolute, $top: 0, $bottom: 0);
+	
+	&-menu {
+	  background: var(--color-surface-2);
+	  border: 1px solid var(--color-border);
+	  border-radius: var(--radius-16);
+	  box-shadow: var(--box-shadow-50);
+	  margin-left: rem(-16px);
+	  min-width: rem(239px);
+	  max-width: rem(239px);
+
+	  &::before {
+		content: '';
+        height: 0; 
+        border-left: rem(6px) solid transparent;
+        border-right: rem(6px) solid transparent;
+        border-top: rem(6px) solid var(--color-surface-2);
+		@include position(absolute, $left: rem(16px), $bottom: rem(-6px));
+		width: 0;
+	  }
+	}
+
+	@media only screen and (max-width: $small) {
+		margin-left: rem(10px);
+	}
+  }
+  
+
+}
+
+// Emoji
+.emoji-wrap {
+  @include flex($justify: space-around, $wrap: wrap);
+  padding: rem(6px) rem(13px) rem(3px);
+  
+  .emoji {
+    cursor: pointer;
+	border-radius: rem(3px);
+	margin: rem(2px);
+    padding: rem(3px);
+    
+    &:hover {
+	  background-color: var(--color-bg);
+	}	
+  }
+}
+
+// Scroll Indicator
+.scroll-line{
+  height: rem(3px);
+  @include position(fixed, $top: 0);
+  width: 0;
+  z-index: 3;
+}
+
+// Social auth
+.social-auth {
+  color: var(--color-heading);
+  list-style: none;
+  padding: 0;
+  margin-top: rem(16px);
+  
+  @media only screen and (max-width: $small) {
+    font-size: rem(14px);
+  }
+  
+  &__item {
+    @include inline-flex();
+	margin-right: rem(6px);
+  }
+  
+  &__link {
+    color: var(--color-heading);
+	
+	&:hover {
+	  color: var(--color-heading);
+	  opacity: .7;
+	}
+  }
+  
+  .font-icon {
+	border-radius: 50%;
+	font-size: rem(12px);
+	padding: rem(6px);
+	
+	@media only screen and (max-width: $small) {
+	  font-size: rem(11px);
+	}
+  }
+  
+  .icon-facebook {
+    background-color: #3B5998;
+  }
+  
+  .icon-twitter {
+    background-color: #55ACEE;
+  }
+  
+  .icon-dribbble {
+    background-color: #F26798;
+  }
+  
+  .icon-behance {
+    background-color: #4176FA;
+  }
+}

data/assets/css/app/_single-project.scss

@@ -0,0 +1,97 @@
+/* -----------------------------------------------------------------
+    - Single project
+----------------------------------------------------------------- */ 
+
+.header-project {
+  margin-top: rem(24px);
+  margin-bottom: rem(40px);
+  position: relative;
+
+  @media only screen and (max-width: $small) {
+    margin-top: rem(16px);
+    margin-bottom: rem(30px);
+  }
+  
+  .title {
+	  margin-bottom: rem(24px);
+	  @include position(absolute, $bottom: 0, $left: 0);
+    z-index: 2;
+
+  	@media only screen and (max-width: $small) {
+      font-size: rem(20px);
+	    margin-bottom: rem(12px);
+  	}
+  }
+  
+  &__image-wrap {
+    height: rem(400px);
+	  margin-left: rem(-30px);
+	  margin-right: rem(-30px);
+	  position: relative;
+	
+	  &::before {
+      content: '';
+	    background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.4) 68.23%, rgba(13, 13, 13, 0.4) 100%);
+	    height: 100%;
+	    @include position(absolute, $top: 0, $left: 0);
+	    width: 100%;
+	    z-index: 1;
+  	}
+
+	  @media only screen and (max-width: $small) {
+	    height: rem(250px);
+	    margin-left: rem(-15px);
+	    margin-right: rem(-15px);
+	    margin-bottom: rem(24px);
+  	}
+  }
+}
+
+/* Slider */
+.js-carousel-project {
+  margin-top: rem(38px);
+
+  .swiper-pagination {
+    margin-top: rem(30px);
+  }
+
+  @media only screen and (max-width: $small) {
+    margin-top: rem(24px);
+  }
+}
+
+.swiper-slide-project {
+  height: rem(315px);
+	max-width: rem(560px);
+  opacity: .5;
+  overflow: hidden;
+  transition: opacity .3s ease-in-out;
+
+  &.swiper-slide-active {
+    opacity: 1;
+  }
+
+  img {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  @media only screen and (max-width: $small) {
+    height: rem(148px);
+  }
+}
+
+/* Button back */
+.btn-back {
+  color: var(--color-paragraph);
+  @include flex($align: center);
+
+  &:hover {
+    color: var(--color-accent);
+  }
+
+  i {
+    margin-right: rem(8px);
+  }
+}

data/assets/css/app/_testimonials.scss

@@ -0,0 +1,147 @@
+/* -----------------------------------------------------------------
+    - Testimonials
+----------------------------------------------------------------- */
+
+$size-avatar: rem(80px);
+
+.swiper-container {
+  .swiper-wrapper {
+    min-height: 100%;
+  }
+}
+
+.review-item {
+  cursor: pointer;
+  @include flex($direction: column);
+  background-color: var(--color-gradient-soft);
+  border-radius: var(--radius-16);
+  height: auto; //height: calc(100% - #{rem(-38px)});
+  padding: rem(30px) rem(30px) rem(24px);
+  margin-top: rem(40px);
+  
+  &::before {
+    background: var(--color-gradient-soft) 
+                url(../icons/icon-quote.svg);
+    background-repeat: no-repeat;
+    background-position: 0 0, right rem(30px) top rem(24px);
+  }
+
+  @media only screen and (max-width: $small) {
+	  padding: rem(16px);
+    margin-top: rem(24px);
+
+    &::before {
+      background-size: 0, rem(24px);
+      background-position: 0 0, right rem(15px) top rem(15px);
+    }
+  }
+  
+  .box-avatar {
+    margin-top: rem(-60px);
+
+    @media only screen and (max-width: $small) {
+      margin-top: rem(-40px);
+      margin-bottom: rem(8px);
+    }
+  }
+
+  &__caption:last-child {
+    margin-bottom: 0;
+  }
+  
+  .title {
+    margin-top: rem(-22px);
+    margin-left: calc(#{$size-avatar} + #{rem(15px)});
+  	margin-bottom: rem(12px);
+
+	  @media only screen and (max-width: $small) {
+      margin-left: 0;
+	    margin-top: rem(8px);
+	    margin-bottom: rem(8px);
+	  }
+  }
+}
+
+.review-icon-quote {
+  background: url(../icons/icon-quote.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  margin: auto 0;
+  height: rem(24px);
+  max-width: $size-avatar;
+}
+
+.review-date {
+  color: var(--color-paragraph);
+  display: block;
+  opacity: .7;
+  margin: rem(4px) 0 rem(10px);
+}
+
+.full-rewiew-con-avatar {
+  @include flex($direction: column);
+
+  .box-avatar {
+    max-width: $size-avatar;
+    width: auto;
+
+    @media only screen and (max-width: $medium) {
+      height: auto;
+    }
+    @media only screen and (max-width: $small) {
+    margin-bottom: rem(15px);
+    }
+  }
+
+  .review-icon-quote {
+    @media only screen and (max-width: $small) {
+      display: none;
+    }
+  }
+}
+
+.full-rewiew-con-text p:last-child {
+  margin-bottom: 0;
+}
+
+/* Carousel pagination */
+.swiper-pagination  {
+  margin-top: rem(8px);
+  position: relative;
+  line-height: 0;
+  
+  @media only screen and (max-width: $small) {
+    margin-top: rem(16px);
+  }
+}
+
+.swiper-pagination-bullet {
+  background: var(--color-surface-2);
+  border-radius: rem(16px);
+  opacity: 1;
+  height: rem(10px);
+  width: rem(10px);
+  transition: width .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  
+  @media only screen and (max-width: $small) {
+    height: rem(6px);
+    width: rem(6px);
+  }
+  
+  &-active {
+    background: var(--color-gradient);
+	  width: rem(20px);
+	
+	  @media only screen and (max-width: $small) {
+	    width: rem(12px);
+  	}
+  }
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 rem(5px);
+}
+.swiper-container-horizontal>.swiper-pagination-bullets,
+.swiper-pagination-custom, .swiper-pagination-fraction {
+  bottom: 0;
+}