Aaron N. Brock
5 years ago
parent
8ef2aba07f
commit
c371330d73
@ -1,110 +1,109 @@ |
||||
.blog-preview { |
||||
position: relative; |
||||
margin-bottom: 30px; |
||||
&__shape{ |
||||
position: absolute; |
||||
top: 11%; |
||||
right: 12%; |
||||
height: 300px; |
||||
width: 300px; |
||||
img{ |
||||
animation: rotate 25s infinite linear; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
@include desktop{ |
||||
display: none; |
||||
} |
||||
} |
||||
&__header_button{ |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
a { |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
display: inline-block; |
||||
@include desktop{ |
||||
position: relative; |
||||
margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
&__item{ |
||||
position: relative; |
||||
margin-bottom: 20px; |
||||
@include desktop{ |
||||
margin-bottom: 130px; |
||||
} |
||||
&-thumb{ |
||||
width: 90%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
border-radius: 20px; |
||||
@include desktop{ |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
img{ |
||||
height: 100%; |
||||
width: 100%; |
||||
transition: all .3s ease; |
||||
} |
||||
} |
||||
&-content{ |
||||
background: #ffffff; |
||||
position: absolute; |
||||
bottom: -100px; |
||||
left: 40px; |
||||
padding: 30px; |
||||
border-radius: 20px; |
||||
box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12); |
||||
@include desktop{ |
||||
left: 0; |
||||
} |
||||
span{ |
||||
font-size: 16px; |
||||
color: $primary; |
||||
margin: 0 0 20px 40px; |
||||
position: relative; |
||||
display: block; |
||||
line-height: 1; |
||||
&::before{ |
||||
position: absolute; |
||||
content: ''; |
||||
top: 50%; |
||||
left: -40px; |
||||
height: 1px; |
||||
width: 20px; |
||||
background: #282F49; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
} |
||||
&:hover{ |
||||
.blog__item-thumb img{ |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
} |
||||
.mobile{ |
||||
display: none; |
||||
} |
||||
@include desktop { |
||||
.desktop{ |
||||
display: none; |
||||
} |
||||
.mobile{ |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
position: relative; |
||||
margin-bottom: 30px; |
||||
&__shape { |
||||
position: absolute; |
||||
top: 11%; |
||||
right: 12%; |
||||
height: 300px; |
||||
width: 300px; |
||||
img { |
||||
animation: rotate 25s infinite linear; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
@include desktop { |
||||
display: none; |
||||
} |
||||
} |
||||
&__header_button { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
a { |
||||
position: absolute; |
||||
bottom: 0; |
||||
right: 0; |
||||
display: inline-block; |
||||
@include desktop { |
||||
position: relative; |
||||
margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
&__item { |
||||
position: relative; |
||||
margin-bottom: 20px; |
||||
@include desktop { |
||||
margin-bottom: 130px; |
||||
} |
||||
&-thumb { |
||||
width: 90%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
border-radius: 20px; |
||||
@include desktop { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
transition: all 0.3s ease; |
||||
} |
||||
} |
||||
&-content { |
||||
position: absolute; |
||||
bottom: -100px; |
||||
left: 40px; |
||||
padding: 30px; |
||||
border-radius: 20px; |
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); |
||||
@include desktop { |
||||
left: 0; |
||||
} |
||||
span { |
||||
color: $primary; |
||||
margin: 0 0 20px 40px; |
||||
position: relative; |
||||
display: block; |
||||
line-height: 1; |
||||
&::before { |
||||
position: absolute; |
||||
content: ""; |
||||
top: 50%; |
||||
left: -40px; |
||||
height: 1px; |
||||
width: 20px; |
||||
background: $secondary; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
} |
||||
&:hover { |
||||
.blog-preview__item-thumb img { |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
} |
||||
.mobile { |
||||
display: none; |
||||
} |
||||
@include desktop { |
||||
.desktop { |
||||
display: none; |
||||
} |
||||
.mobile { |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
@keyframes rotate { |
||||
from { |
||||
-webkit-transform: rotate(0deg); |
||||
} |
||||
to { |
||||
-webkit-transform: rotate(360deg); |
||||
} |
||||
} |
||||
@keyframes rotate{ |
||||
from { |
||||
-webkit-transform: rotate(0deg); |
||||
} to { |
||||
-webkit-transform: rotate(360deg); |
||||
} |
||||
} |
||||
@ -1,128 +1,54 @@ |
||||
.blog-page { |
||||
&__item { |
||||
position: relative; |
||||
margin-bottom: 120px; |
||||
&-thumb { |
||||
width: 90%; |
||||
height: 100%; |
||||
@include desktop { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
border-radius: 20px; |
||||
} |
||||
} |
||||
&-content { |
||||
background: #ffffff; |
||||
position: absolute; |
||||
bottom: -100px; |
||||
left: 40px; |
||||
padding: 30px; |
||||
border-radius: 20px; |
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); |
||||
@include desktop { |
||||
left: 0; |
||||
} |
||||
span { |
||||
font-size: 16px; |
||||
font-family: $secondary-font; |
||||
color: $primary-color; |
||||
margin: 0 0 20px 40px; |
||||
position: relative; |
||||
display: block; |
||||
line-height: 1; |
||||
&::before { |
||||
position: absolute; |
||||
content: ""; |
||||
top: 50%; |
||||
left: -40px; |
||||
height: 1px; |
||||
width: 20px; |
||||
background: #282f49; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
a { |
||||
font-size: 22px; |
||||
font-family: $primary-font; |
||||
line-height: 30px; |
||||
color: $secondary-color; |
||||
margin: 0; |
||||
display: block; |
||||
text-decoration: none; |
||||
transition: all 0.3s ease; |
||||
&:hover { |
||||
color: $primary-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__pagination { |
||||
width: 100%; |
||||
position: relative; |
||||
height: 80px; |
||||
margin-top: 40px; |
||||
.pagination { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
li { |
||||
a { |
||||
transition: all 0.3s ease; |
||||
border-radius: 10px !important; |
||||
box-shadow: 0 20px 40px 0 rgba(50, 65, 141, 0.12); |
||||
height: 80px; |
||||
width: 80px; |
||||
text-decoration: none; |
||||
font-family: $primary-font; |
||||
font-size: 20px; |
||||
color: $secondary-color; |
||||
transition: all 0.3s ease; |
||||
display: inline-block; |
||||
text-align: center; |
||||
line-height: 80px; |
||||
position: relative; |
||||
border: none; |
||||
svg { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
path { |
||||
fill: #000; |
||||
} |
||||
} |
||||
} |
||||
&:hover { |
||||
a { |
||||
background: $primary-color; |
||||
color: $white; |
||||
svg { |
||||
path { |
||||
fill: $white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:not(:last-child) { |
||||
margin-right: 34px; |
||||
} |
||||
&.active { |
||||
a { |
||||
background: $primary-color; |
||||
color: $white; |
||||
svg { |
||||
path { |
||||
fill: $white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__item { |
||||
position: relative; |
||||
margin-bottom: 180px; |
||||
&-thumb { |
||||
width: 90%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
border-radius: 20px; |
||||
@include desktop { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
transition: all 0.3s ease; |
||||
} |
||||
} |
||||
&-content { |
||||
position: absolute; |
||||
bottom: -100px; |
||||
left: 40px; |
||||
padding: 30px; |
||||
border-radius: 20px; |
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); |
||||
@include desktop { |
||||
left: 0; |
||||
} |
||||
span { |
||||
color: $primary; |
||||
margin: 0 0 20px 40px; |
||||
position: relative; |
||||
display: block; |
||||
line-height: 1; |
||||
&::before { |
||||
position: absolute; |
||||
content: ""; |
||||
top: 50%; |
||||
left: -40px; |
||||
height: 1px; |
||||
width: 20px; |
||||
background: $secondary; |
||||
transform: translateY(-50%); |
||||
} |
||||
} |
||||
} |
||||
&:hover { |
||||
.blog-page__item-thumb img { |
||||
transform: scale(1.1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,104 +1,81 @@ |
||||
.breadCrumb{ |
||||
.breadCrumb { |
||||
padding: 200px 0 0; |
||||
position: relative; |
||||
.svg-img{ |
||||
.svg-img { |
||||
position: absolute; |
||||
bottom: -35%; |
||||
left: -7%; |
||||
animation: move_top 5s infinite linear; |
||||
@include desktop{ |
||||
@include desktop { |
||||
display: none; |
||||
} |
||||
} |
||||
.animate-shape{ |
||||
.animate-shape { |
||||
position: absolute; |
||||
bottom: -60%; |
||||
right: 2%; |
||||
height: 300px; |
||||
width: 300px; |
||||
svg{ |
||||
svg { |
||||
width: 100%; |
||||
} |
||||
@include desktop{ |
||||
@include desktop { |
||||
display: none; |
||||
} |
||||
} |
||||
.animate-pattern{ |
||||
.animate-pattern { |
||||
position: absolute; |
||||
bottom: -40%; |
||||
right: 10%; |
||||
height: 100px; |
||||
width: 100px; |
||||
animation: move_top 3s infinite linear; |
||||
img{ |
||||
img { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
@include desktop{ |
||||
@include desktop { |
||||
display: none; |
||||
} |
||||
} |
||||
@include desktop{ |
||||
@include desktop { |
||||
padding: 120px 0 0; |
||||
} |
||||
&__title{ |
||||
&__title { |
||||
font-size: 48px; |
||||
font-family: $primary-font; |
||||
color: $secondary-color; |
||||
line-height: 1; |
||||
margin: 0 0 30px 0; |
||||
@include tablet{ |
||||
font-size: 36px; |
||||
} |
||||
@include mobile{ |
||||
font-size: 30px; |
||||
} |
||||
} |
||||
.breadcrumb{ |
||||
.breadcrumb { |
||||
background: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
&-item{ |
||||
a{ |
||||
font-family: $secondary-font; |
||||
color: $secondary-color; |
||||
font-size: 17px; |
||||
&-item { |
||||
a { |
||||
color: $secondary; |
||||
text-decoration: none; |
||||
@include mobile{ |
||||
font-size: 14px; |
||||
} |
||||
@include mobile-xs{ |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
&.active{ |
||||
font-family: $secondary-font; |
||||
color: $secondary-color; |
||||
@include mobile{ |
||||
font-size: 14px; |
||||
} |
||||
@include mobile-xs{ |
||||
font-size: 12px; |
||||
} |
||||
&.active { |
||||
color: $secondary; |
||||
} |
||||
} |
||||
} |
||||
.breadcrumb-item+.breadcrumb-item::before{ |
||||
content: '-'; |
||||
color: $secondary-color; |
||||
font-size: 17px; |
||||
padding-right: 10px; |
||||
@include mobile{ |
||||
font-size: 14px; |
||||
} |
||||
@include mobile-xs{ |
||||
padding-right: 0px; |
||||
} |
||||
} |
||||
.breadcrumb-item+.breadcrumb-item{ |
||||
padding-left: 10px; |
||||
@include mobile-xs{ |
||||
padding-right: 0px; |
||||
} |
||||
.breadcrumb-item + .breadcrumb-item::before { |
||||
content: "-"; |
||||
// color: $secondary-color; |
||||
// font-size: 17px; |
||||
// padding-right: 10px; |
||||
// @include mobile { |
||||
// font-size: 14px; |
||||
// } |
||||
// @include mobile-xs { |
||||
// padding-right: 0px; |
||||
// } |
||||
} |
||||
} |
||||
// .breadcrumb-item + .breadcrumb-item { |
||||
// padding-left: 10px; |
||||
// @include mobile-xs { |
||||
// padding-right: 0px; |
||||
// } |
||||
// } |
||||
} |
||||
|
||||
@ -1,49 +1,49 @@ |
||||
{{ with .Site.Data.blogSection }} |
||||
{{ if .enable }} |
||||
<section class="section blog-preview" id="blog"> |
||||
<div class="blog-preview__shape"> |
||||
<img src="images/blog/blog-shape.svg" alt="blog shape" /> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row mb-5"> |
||||
<div class="col-lg-6"> |
||||
<div class="blog-preview__header"> |
||||
<span class="top-title pre-line">{{ .topTitle }}</span> |
||||
{{ .title | markdownify }} |
||||
</div> |
||||
</div> |
||||
<div class="col-lg-6"> |
||||
<div class="blog-preview__header_button desktop"> |
||||
<a class="btn btn-outline-secondary btn-zoom m-3" href="{{ .buttonTarget | absURL }}">See all post</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="blog-preview__shape"> |
||||
<img src="images/blog/blog-shape.svg" alt="blog shape" /> |
||||
</div> |
||||
<div class="container"> |
||||
<div class="row mb-5"> |
||||
<div class="col-lg-6"> |
||||
<div class="blog-preview__header"> |
||||
<span class="top-title pre-line">{{ .topTitle }}</span> |
||||
{{ .title | markdownify }} |
||||
</div> |
||||
</div> |
||||
<div class="col-lg-6"> |
||||
<div class="blog-preview__header_button desktop"> |
||||
<a class="btn btn-outline-secondary btn-zoom m-3" href="{{ .buttonTarget | absURL }}">See all post</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
{{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} |
||||
<div class="col-lg-4"> |
||||
<div class="blog-preview__item"> |
||||
<div class="blog-preview__item-thumb"> |
||||
<img src="{{ .Params.featureImage | absURL }}" alt="post-image"> |
||||
</div> |
||||
<div class="blog-preview__item-content"> |
||||
<span>{{ .PublishDate.Format "January 2, 2006" }}</span> |
||||
<h4 class="mb-0"> |
||||
<a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a> |
||||
</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{ end }} |
||||
<div class="row"> |
||||
{{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} |
||||
<div class="col-lg-4"> |
||||
<div class="blog-preview__item"> |
||||
<div class="blog-preview__item-thumb"> |
||||
<img src="{{ .Params.featureImage | absURL }}" alt="post-image"> |
||||
</div> |
||||
<div class="blog-preview__item-content bg-white"> |
||||
<span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span> |
||||
<h5 class="mb-0"> |
||||
<a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a> |
||||
</h5> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{ end }} |
||||
|
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-lg-12"> |
||||
<div class="blog-preview__header_button mobile"> |
||||
<a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-lg-12"> |
||||
<div class="blog-preview__header_button mobile"> |
||||
<a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
{{ end }} {{ end }} |
||||
@ -1,34 +1,27 @@ |
||||
{{ $pag := $.Paginator }} |
||||
{{ if gt $pag.TotalPages 1 }} |
||||
<div class="blog-page__pagination"> |
||||
<div class="pagination"> |
||||
<nav aria-label="Page navigation" class="w-100"> |
||||
<ul class="pagination justify-content-center pagination-lg"> |
||||
{{ range $pag.Pagers }} |
||||
{{ if eq . $pag }} |
||||
<li class="active"> |
||||
<a href="{{ .URL }}">{{ .PageNumber }}</a> |
||||
<li class="page-item active"> |
||||
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a> |
||||
</li> |
||||
{{ else }} |
||||
<li> |
||||
<a href="{{ .URL }}">{{ .PageNumber }}</a> |
||||
<li class="page-item"> |
||||
<a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a> |
||||
</li> |
||||
{{ end }} |
||||
{{ end }} |
||||
|
||||
{{ if $pag.HasNext }} |
||||
<li class="page-item"> |
||||
<a href="{{ $pag.Next.URL }}" rel="next" class="page-link"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20.657" height="11.314" viewBox="0 0 20.657 11.314"> |
||||
<g fill="#fff" data-name="Group 12"> |
||||
<path d="M0 4.657h18v2H0z" data-name="Rectangle 2400" /> |
||||
<path d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z" |
||||
data-name="Rectangle 2401" /> |
||||
<path d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z" data-name="Rectangle 2402" /> |
||||
</g> |
||||
</svg> |
||||
<a class="page-link" href="{{ $pag.Next.URL }}" rel="next"> |
||||
→ |
||||
</a> |
||||
</li> |
||||
{{ end }} |
||||
</div> |
||||
</ul> |
||||
<!-- </nav> --> |
||||
</div> |
||||
</nav> |
||||
{{ end }} |
||||
Loading…
Reference in new issue