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
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      assets/scss/_variables.scss
  2. 13
      assets/scss/components/_blog-section.scss
  3. 90
      assets/scss/components/_blog.scss
  4. 61
      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;

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

@ -49,11 +49,10 @@
img {
height: 100%;
width: 100%;
transition: all .3s ease;
transition: all 0.3s ease;
}
}
&-content {
background: #ffffff;
position: absolute;
bottom: -100px;
left: 40px;
@ -64,7 +63,6 @@
left: 0;
}
span {
font-size: 16px;
color: $primary;
margin: 0 0 20px 40px;
position: relative;
@ -72,18 +70,18 @@
line-height: 1;
&::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{
.blog-preview__item-thumb img {
transform: scale(1.1);
}
}
@ -104,7 +102,8 @@
@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);
}
}
}

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

@ -43,16 +43,8 @@
}
&__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 {
background: none;
@ -60,45 +52,30 @@
padding: 0;
&-item {
a {
font-family: $secondary-font;
color: $secondary-color;
font-size: 17px;
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;
}
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;
}
}
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