From c371330d73b74d157b498d105ebff35938bdfa27 Mon Sep 17 00:00:00 2001 From: "Aaron N. Brock" Date: Sun, 4 Oct 2020 18:15:36 -0400 Subject: [PATCH] refactor blog page --- assets/scss/_variables.scss | 36 ++-- assets/scss/components/_blog-section.scss | 215 +++++++++++----------- assets/scss/components/_blog.scss | 178 ++++++------------ assets/scss/components/_page-title.scss | 93 ++++------ layouts/blog/list.html | 10 +- layouts/partials/blogSection.html | 84 ++++----- layouts/partials/footer.html | 174 ++++++++--------- layouts/partials/navbar.html | 2 +- layouts/partials/pagination.html | 27 +-- 9 files changed, 357 insertions(+), 462 deletions(-) diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index b3bbc46..18a8ded 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -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; @@ -40,12 +38,12 @@ $headings-font-family: 'Yeseva One', cursive; // Size $font-size-base: 1.125rem; // 18px -$h1-font-size: 60px; -$h2-font-size: 50px; -$h3-font-size: 30px; -$h4-font-size: 25px; -$h5-font-size: 25px; -$h6-font-size: 15px; +$h1-font-size: 60px; +$h2-font-size: 50px; +$h3-font-size: 30px; +$h4-font-size: 25px; +$h5-font-size: 22px; +$h6-font-size: 16px; // Spacing $headings-margin-bottom: 1.5rem; diff --git a/assets/scss/components/_blog-section.scss b/assets/scss/components/_blog-section.scss index 57d69b7..8e31f71 100644 --- a/assets/scss/components/_blog-section.scss +++ b/assets/scss/components/_blog-section.scss @@ -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); - } -} \ No newline at end of file diff --git a/assets/scss/components/_blog.scss b/assets/scss/components/_blog.scss index bcf1adf..969149d 100644 --- a/assets/scss/components/_blog.scss +++ b/assets/scss/components/_blog.scss @@ -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); + } + } + } } diff --git a/assets/scss/components/_page-title.scss b/assets/scss/components/_page-title.scss index 9e4518e..1598344 100644 --- a/assets/scss/components/_page-title.scss +++ b/assets/scss/components/_page-title.scss @@ -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; + // } } -} \ No newline at end of file + // .breadcrumb-item + .breadcrumb-item { + // padding-left: 10px; + // @include mobile-xs { + // padding-right: 0px; + // } + // } +} diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 476109e..90bc98e 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -43,11 +43,13 @@
- post-image + post-image
-
- {{ .PublishDate.Format "January 2, 2006" }} - {{ .Title }} +
+ {{ .PublishDate.Format "January 2, 2006" }} +
+ {{ .Title }} +
diff --git a/layouts/partials/blogSection.html b/layouts/partials/blogSection.html index 7b44632..c020e48 100644 --- a/layouts/partials/blogSection.html +++ b/layouts/partials/blogSection.html @@ -1,49 +1,49 @@ {{ with .Site.Data.blogSection }} {{ if .enable }}
-
- blog shape -
-
-
-
-
- {{ .topTitle }} - {{ .title | markdownify }} -
-
-
-
- See all post -
-
-
+
+ blog shape +
+
+
+
+
+ {{ .topTitle }} + {{ .title | markdownify }} +
+
+
+
+ See all post +
+
+
-
- {{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} -
-
-
- post-image -
-
- {{ .PublishDate.Format "January 2, 2006" }} -

- {{ .Title }} -

-
-
-
- {{ end }} +
+ {{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} +
+
+
+ post-image +
+
+ {{ .PublishDate.Format "January 2, 2006" }} +
+ {{ .Title }} +
+
+
+
+ {{ end }} -
-
-
-
- See all post -
-
-
-
+
+
+
+
+ See all post +
+
+
+
{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e7f3431..0833d7e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,91 +1,91 @@ diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 1ee7f49..c6e04e0 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -15,7 +15,7 @@ {{ range $index, $element := $menu }}
  • {{ .Name }} + class="nav-link text-dark text-sm-center p-3 small font-weight-bold {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}
    • {{ end }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 30823f7..3175d73 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,34 +1,27 @@ {{ $pag := $.Paginator }} {{ if gt $pag.TotalPages 1 }} -
    - + -
    + {{ end }} \ No newline at end of file