JonasFranzDEV
/
portio-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor blog page

Browse Source
master
Aaron N. Brock 5 years ago
parent 8ef2aba07f
commit c371330d73
9 changed files with 357 additions and 462 deletions
  1. 28
      assets/scss/_variables.scss
  2. 53
      assets/scss/components/_blog-section.scss
  3. 90
      assets/scss/components/_blog.scss
  4. 99
      assets/scss/components/_page-title.scss
  5. 10
      layouts/blog/list.html
  6. 8
      layouts/partials/blogSection.html
  7. 2
      layouts/partials/footer.html
  8. 2
      layouts/partials/navbar.html
  9. 27
      layouts/partials/pagination.html

28
assets/scss/_variables.scss
Unescape View File

@ -1,10 +1,10 @@
//site color variables
$primary-color: #5D78FF;
$secondary-color: #282F49;
$text-color: #9D9EA5;
$text-color-dark: #00113E;
$primary-color: #5d78ff;
$secondary-color: #282f49;
$text-color: #9d9ea5;
$text-color-dark: #00113e;
$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
$gray: #F7F9FF;
$gray: #f7f9ff;
$dark-gray: #646569;
// solid colors
@ -12,17 +12,15 @@ $white: #fff;
$black: #000;
// Font Variables
$primary-font: 'Yeseva One', cursive;
$secondary-font: 'Poppins', sans-serif;
$primary-font: "Yeseva One", cursive;
$secondary-font: "Poppins", sans-serif;
//////
////// Bootstrap Variables
//////
// Colors
$primary: #5D78FF;
$primary: #5d78ff;
$secondary: #7e7e8a;
//
@ -30,9 +28,9 @@ $secondary: #7e7e8a;
//
// Fonts
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap');
$font-family-base: 'Poppins', sans-serif;
$headings-font-family: 'Yeseva One', cursive;
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap");
$font-family-base: "Poppins", sans-serif;
$headings-font-family: "Yeseva One", cursive;
// @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
// $font-family-base: 'Merriweather', serif;
@ -44,8 +42,8 @@ $h1-font-size: 60px;
$h2-font-size: 50px;
$h3-font-size: 30px;
$h4-font-size: 25px;
$h5-font-size: 25px;
$h6-font-size: 15px;
$h5-font-size: 22px;
$h6-font-size: 16px;
// Spacing
$headings-margin-bottom: 1.5rem;

53
assets/scss/components/_blog-section.scss
Unescape View File

@ -1,22 +1,22 @@
.blog-preview {
position: relative;
margin-bottom: 30px;
&__shape{
&__shape {
position: absolute;
top: 11%;
right: 12%;
height: 300px;
width: 300px;
img{
img {
animation: rotate 25s infinite linear;
height: 100%;
width: 100%;
}
@include desktop{
@include desktop {
display: none;
}
}
&__header_button{
&__header_button {
position: relative;
width: 100%;
height: 100%;
@ -25,86 +25,85 @@
bottom: 0;
right: 0;
display: inline-block;
@include desktop{
@include desktop {
position: relative;
margin-top: 30px;
}
}
}
&__item{
&__item {
position: relative;
margin-bottom: 20px;
@include desktop{
@include desktop {
margin-bottom: 130px;
}
&-thumb{
&-thumb {
width: 90%;
height: 100%;
overflow: hidden;
border-radius: 20px;
@include desktop{
@include desktop {
width: 80%;
margin: 0 auto;
}
img{
img {
height: 100%;
width: 100%;
transition: all .3s ease;
transition: all 0.3s ease;
}
}
&-content{
background: #ffffff;
&-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{
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
@include desktop {
left: 0;
}
span{
font-size: 16px;
span {
color: $primary;
margin: 0 0 20px 40px;
position: relative;
display: block;
line-height: 1;
&::before{
&::before {
position: absolute;
content: '';
content: "";
top: 50%;
left: -40px;
height: 1px;
width: 20px;
background: #282F49;
background: $secondary;
transform: translateY(-50%);
}
}
}
&:hover{
.blog__item-thumb img{
&:hover {
.blog-preview__item-thumb img {
transform: scale(1.1);
}
}
}
.mobile{
.mobile {
display: none;
}
@include desktop {
.desktop{
.desktop {
display: none;
}
.mobile{
.mobile {
display: block;
text-align: center;
}
}
}
@keyframes rotate{
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
} to {
}
to {
-webkit-transform: rotate(360deg);
}
}

90
assets/scss/components/_blog.scss
Unescape View File

@ -1,10 +1,12 @@
.blog-page {
&__item {
position: relative;
margin-bottom: 120px;
margin-bottom: 180px;
&-thumb {
width: 90%;
height: 100%;
overflow: hidden;
border-radius: 20px;
@include desktop {
width: 80%;
margin: 0 auto;
@ -12,11 +14,10 @@
img {
height: 100%;
width: 100%;
border-radius: 20px;
transition: all 0.3s ease;
}
}
&-content {
background: #ffffff;
position: absolute;
bottom: -100px;
left: 40px;
@ -27,9 +28,7 @@
left: 0;
}
span {
font-size: 16px;
font-family: $secondary-font;
color: $primary-color;
color: $primary;
margin: 0 0 20px 40px;
position: relative;
display: block;
@ -41,87 +40,14 @@
left: -40px;
height: 1px;
width: 20px;
background: #282f49;
background: $secondary;
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;
}
}
}
}
.blog-page__item-thumb img {
transform: scale(1.1);
}
}
}

99
assets/scss/components/_page-title.scss
Unescape View File

@ -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;
}
}
}
}
.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;
}
}
&.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;
// }
// }
}

10
layouts/blog/list.html
Unescape View File

@ -43,11 +43,13 @@
<div class="col-lg-4">
<div class="blog-page__item">
<div class="blog-page__item-thumb">
<img src={{ .Params.featureImage | absURL }} alt="post-image">
<img src="{{ .Params.featureImage | absURL }}" alt="post-image">
</div>
<div class="blog-page__item-content">
<span>{{ .PublishDate.Format "January 2, 2006" }}</span>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<div class="blog-page__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>

8
layouts/partials/blogSection.html
Unescape View File

@ -26,11 +26,11 @@
<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">
<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>
</h4>
</h5>
</div>
</div>
</div>

2
layouts/partials/footer.html
Unescape View File

@ -24,7 +24,7 @@
</div>
<div class="text-light footer__cta_content">
<span>Contact me</span>
<h2>Let’s Start a Project</h2>
<h2 class="mb-0">Let’s Start a Project</h2>
</div>
<div class="footer__cta_action">
<a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in

2
layouts/partials/navbar.html
Unescape View File

@ -15,7 +15,7 @@
{{ range $index, $element := $menu }}
<li class="nav-item">
<a href="{{ $.Site.BaseURL }}{{ .URL }}"
class="nav-link text-dark text-sm-center px-2 py-3 {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a>
class="nav-link text-dark text-sm-center p-3 small font-weight-bold {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>

27
layouts/partials/pagination.html
Unescape View File

@ -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 }}
Write Preview
Loading…
Cancel
Save