From 93aa928059a5bc2fa6317cb5fade5b61585b5ced Mon Sep 17 00:00:00 2001 From: "Aaron N. Brock" Date: Sun, 4 Oct 2020 22:48:09 -0400 Subject: [PATCH] refactor portfolio single page --- assets/scss/_buttons.scss | 44 +++++----- assets/scss/_typography.scss | 37 +++++--- assets/scss/_variables.scss | 4 +- assets/scss/components/_case_details.scss | 93 ++++---------------- layouts/portfolio/single.html | 100 +++++++--------------- 5 files changed, 103 insertions(+), 175 deletions(-) diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss index fdeb0e9..e635220 100644 --- a/assets/scss/_buttons.scss +++ b/assets/scss/_buttons.scss @@ -8,27 +8,27 @@ // } // } - // .hire_button{ - // background: $primary_color; - // padding: 15px 30px; - // color: #fff; - // text-decoration: none; - // border-radius: 7px; - // font-size: 16px; - // font-family: $secondary-font; - // font-weight: 400; - // border: 1px solid transparent; - // transition: all .3s ease; - // transform: scale(1); - // &:hover{ - // background: #425FEE; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } - // @include desktop{ - // text-align: center; - // } - // } +// .hire_button{ +// background: $primary_color; +// padding: 15px 30px; +// color: #fff; +// text-decoration: none; +// border-radius: 7px; +// font-size: 16px; +// font-family: $secondary-font; +// font-weight: 400; +// border: 1px solid transparent; +// transition: all .3s ease; +// transform: scale(1); +// &:hover{ +// background: #425FEE; +// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); +// transform: scale(1.03); +// } +// @include desktop{ +// text-align: center; +// } +// } // Button Override .btn { @@ -68,4 +68,4 @@ box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); transform: scale(1.03); } -} \ No newline at end of file +} diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index c8bccf6..1bf2ae6 100644 --- a/assets/scss/_typography.scss +++ b/assets/scss/_typography.scss @@ -2,26 +2,31 @@ font-family: $font-family-base; } -a.text-light, a.text-dark { - transition: all .3s ease; - &:hover{ +* { + transition: all 0.3s ease; +} + +a.text-light, +a.text-dark { + // transition: all 0.3s ease; + &:hover { color: $primary !important; } } -.top-title{ +.top-title { font-size: 20px; display: block; color: $dark; @extend .mb-3; } -.pre-line{ +.pre-line { margin-left: 20px; position: relative; - &::before{ + &::before { position: absolute; - content: ''; + content: ""; height: 2px; width: 20px; top: 50%; @@ -34,14 +39,26 @@ a.text-light, a.text-dark { // This fixes the fact that with `markdownify` we can't add `text-light` // directly onto the generated `h1`, `h2` etc. .text-white { - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { color: $white; } } @each $color, $value in $theme-colors { .text-#{$color} { - h1, h2, h3, h4, h5, h6, p, span { + h1, + h2, + h3, + h4, + h5, + h6, + p, + span { color: $value; } } -} \ No newline at end of file +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 18a8ded..b9fec2c 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -21,7 +21,7 @@ $secondary-font: "Poppins", sans-serif; // Colors $primary: #5d78ff; -$secondary: #7e7e8a; +$secondary: #282f49; // // Typography @@ -51,7 +51,7 @@ $line-height-base: 1.75; // Coloring $headings-color: #282f49; -$body-color: $secondary; +$body-color: #7e7e8a; // Misc $link-hover-decoration: none; diff --git a/assets/scss/components/_case_details.scss b/assets/scss/components/_case_details.scss index 0d48abc..ff66f83 100644 --- a/assets/scss/components/_case_details.scss +++ b/assets/scss/components/_case_details.scss @@ -37,24 +37,24 @@ display: none; } } - &-title { - font-size: 50px; - line-height: 60px; - font-family: $primary-font; - color: $secondary-color; - margin: 0 0 50px 0; - } - p { - font-family: $secondary-font; - color: #7e7e8a; - font-size: 16px; - line-height: 34px; - margin: 0 0 30px 0; - } + // &-title { + // font-size: 50px; + // line-height: 60px; + // font-family: $primary-font; + // color: $secondary-color; + // margin: 0 0 50px 0; + // } + // p { + // font-family: $secondary-font; + // color: #7e7e8a; + // font-size: 16px; + // line-height: 34px; + // margin: 0 0 30px 0; + // } &-info { display: flex; justify-content: space-around; - background: $secondary-color; + background: $secondary; border-radius: 20px; padding: 65px 0; margin: 70px 0 80px 0; @@ -89,29 +89,13 @@ } } h5 { - margin: 0 0 10px 0; - font-size: 20px; - color: $white; - font-family: $primary-font; - } - p { - margin: 0; - } - } - &-service { - margin-bottom: 90px; - h3 { - font-family: $primary-font; - color: $secondary-color; - font-size: 25px; - margin: 0 0 25px 0; + color: $light; } p { margin: 0; } } &-thumb { - margin: 0 0 90px 0; border-radius: 30px; overflow: hidden; img { @@ -121,10 +105,6 @@ } } &-nav { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 50px; .previous, .next { .icon { @@ -133,53 +113,28 @@ .content { span { display: block; - font-family: $secondary-font; - color: #7e7e8a; - font-size: 15px; - line-height: 1; - margin-bottom: 5px; } h5 { - font-family: $primary-font; font-size: 20px; margin: 0; - line-height: 1; - a { - text-decoration: none; - color: $secondary-color; - transition: all 0.3s ease; - &:hover { - color: $primary-color; - } - } } } } - .previous { - display: flex; - align-items: center; - .icon { - margin-right: 15px; - } - } + .social { @include mobile { display: none; } ul { - margin: 0; - padding: 0; li { list-style: none; display: inline-block; a { + color: $body-color; display: block; - text-decoration: none; - color: #7e7e8a; - font-size: 20px; transition: all 0.3s ease; &:hover { - color: $primary-color; + color: $primary; } } &:not(:last-child) { @@ -188,15 +143,5 @@ } } } - .next { - display: flex; - align-items: center; - .icon { - margin-left: 15px; - } - .content { - text-align: right; - } - } } } diff --git a/layouts/portfolio/single.html b/layouts/portfolio/single.html index 42daa24..e0d8bae 100644 --- a/layouts/portfolio/single.html +++ b/layouts/portfolio/single.html @@ -5,30 +5,16 @@
- + - + - +
@@ -36,7 +22,7 @@ background-shape
-
+

{{ .Title }}

@@ -46,7 +32,7 @@

-
Client
+
Client

{{ .Params.client }}

@@ -58,7 +44,7 @@

{{ .PublishDate.Format "January 2, 2006" }}

-
+

Challenge

@@ -76,7 +62,7 @@
-
+
case-details
{{ .Content }} @@ -84,80 +70,60 @@
-
+