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

refactor portfolio single page

Browse Source
master
Aaron N. Brock 4 years ago
parent dd5cf88bca
commit 93aa928059
5 changed files with 103 additions and 175 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. 44
      assets/scss/_buttons.scss
  2. 37
      assets/scss/_typography.scss
  3. 4
      assets/scss/_variables.scss
  4. 93
      assets/scss/components/_case_details.scss
  5. 100
      layouts/portfolio/single.html

44
assets/scss/_buttons.scss
Unescape View File

@ -8,27 +8,27 @@
// } // }
// } // }
// .hire_button{ // .hire_button{
// background: $primary_color; // background: $primary_color;
// padding: 15px 30px; // padding: 15px 30px;
// color: #fff; // color: #fff;
// text-decoration: none; // text-decoration: none;
// border-radius: 7px; // border-radius: 7px;
// font-size: 16px; // font-size: 16px;
// font-family: $secondary-font; // font-family: $secondary-font;
// font-weight: 400; // font-weight: 400;
// border: 1px solid transparent; // border: 1px solid transparent;
// transition: all .3s ease; // transition: all .3s ease;
// transform: scale(1); // transform: scale(1);
// &:hover{ // &:hover{
// background: #425FEE; // background: #425FEE;
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
// transform: scale(1.03); // transform: scale(1.03);
// } // }
// @include desktop{ // @include desktop{
// text-align: center; // text-align: center;
// } // }
// } // }
// Button Override // Button Override
.btn { .btn {
@ -68,4 +68,4 @@
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
transform: scale(1.03); transform: scale(1.03);
} }
} }

37
assets/scss/_typography.scss
Unescape View File

@ -2,26 +2,31 @@
font-family: $font-family-base; font-family: $font-family-base;
} }
a.text-light, a.text-dark { * {
transition: all .3s ease; transition: all 0.3s ease;
&:hover{ }
a.text-light,
a.text-dark {
// transition: all 0.3s ease;
&:hover {
color: $primary !important; color: $primary !important;
} }
} }
.top-title{ .top-title {
font-size: 20px; font-size: 20px;
display: block; display: block;
color: $dark; color: $dark;
@extend .mb-3; @extend .mb-3;
} }
.pre-line{ .pre-line {
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
&::before{ &::before {
position: absolute; position: absolute;
content: ''; content: "";
height: 2px; height: 2px;
width: 20px; width: 20px;
top: 50%; 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` // This fixes the fact that with `markdownify` we can't add `text-light`
// directly onto the generated `h1`, `h2` etc. // directly onto the generated `h1`, `h2` etc.
.text-white { .text-white {
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: $white; color: $white;
} }
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.text-#{$color} { .text-#{$color} {
h1, h2, h3, h4, h5, h6, p, span { h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
color: $value; color: $value;
} }
} }
} }

4
assets/scss/_variables.scss
Unescape View File

@ -21,7 +21,7 @@ $secondary-font: "Poppins", sans-serif;
// Colors // Colors
$primary: #5d78ff; $primary: #5d78ff;
$secondary: #7e7e8a; $secondary: #282f49;
// //
// Typography // Typography
@ -51,7 +51,7 @@ $line-height-base: 1.75;
// Coloring // Coloring
$headings-color: #282f49; $headings-color: #282f49;
$body-color: $secondary; $body-color: #7e7e8a;
// Misc // Misc
$link-hover-decoration: none; $link-hover-decoration: none;

93
assets/scss/components/_case_details.scss
Unescape View File

@ -37,24 +37,24 @@
display: none; display: none;
} }
} }
&-title { // &-title {
font-size: 50px; // font-size: 50px;
line-height: 60px; // line-height: 60px;
font-family: $primary-font; // font-family: $primary-font;
color: $secondary-color; // color: $secondary-color;
margin: 0 0 50px 0; // margin: 0 0 50px 0;
} // }
p { // p {
font-family: $secondary-font; // font-family: $secondary-font;
color: #7e7e8a; // color: #7e7e8a;
font-size: 16px; // font-size: 16px;
line-height: 34px; // line-height: 34px;
margin: 0 0 30px 0; // margin: 0 0 30px 0;
} // }
&-info { &-info {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background: $secondary-color; background: $secondary;
border-radius: 20px; border-radius: 20px;
padding: 65px 0; padding: 65px 0;
margin: 70px 0 80px 0; margin: 70px 0 80px 0;
@ -89,29 +89,13 @@
} }
} }
h5 { h5 {
margin: 0 0 10px 0; color: $light;
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;
} }
p { p {
margin: 0; margin: 0;
} }
} }
&-thumb { &-thumb {
margin: 0 0 90px 0;
border-radius: 30px; border-radius: 30px;
overflow: hidden; overflow: hidden;
img { img {
@ -121,10 +105,6 @@
} }
} }
&-nav { &-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
.previous, .previous,
.next { .next {
.icon { .icon {
@ -133,53 +113,28 @@
.content { .content {
span { span {
display: block; display: block;
font-family: $secondary-font;
color: #7e7e8a;
font-size: 15px;
line-height: 1;
margin-bottom: 5px;
} }
h5 { h5 {
font-family: $primary-font;
font-size: 20px; font-size: 20px;
margin: 0; 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 { .social {
@include mobile { @include mobile {
display: none; display: none;
} }
ul { ul {
margin: 0;
padding: 0;
li { li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
a { a {
color: $body-color;
display: block; display: block;
text-decoration: none;
color: #7e7e8a;
font-size: 20px;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
color: $primary-color; color: $primary;
} }
} }
&:not(:last-child) { &:not(:last-child) {
@ -188,15 +143,5 @@
} }
} }
} }
.next {
display: flex;
align-items: center;
.icon {
margin-left: 15px;
}
.content {
text-align: right;
}
}
} }
} }

100
layouts/portfolio/single.html
Unescape View File

@ -5,30 +5,16 @@
<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="" /> <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="" />
</div> </div>
<div class="animate-shape"> <div class="animate-shape">
<svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600"
>
<defs> <defs>
<linearGradient <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
id="d"
x1="0.929"
y1="0.111"
x2="0.263"
y2="0.935"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#f1f6f9" /> <stop offset="0" stop-color="#f1f6f9" />
<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" /> <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
</linearGradient> </linearGradient>
</defs> </defs>
<g data-name="blob-shape (3)"> <g data-name="blob-shape (3)">
<path <path class="blob" fill="url(#d)"
class="blob" d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
fill="url(#d)"
d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z"
/>
</g> </g>
</svg> </svg>
</div> </div>
@ -36,7 +22,7 @@
<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape" /> <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape" />
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row mb-5">
<div class="col-lg-10 offset-lg-1 text-center"> <div class="col-lg-10 offset-lg-1 text-center">
<div class="case-details-title"> <div class="case-details-title">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
@ -46,7 +32,7 @@
</p> </p>
<div class="case-details-info"> <div class="case-details-info">
<div class="case-details-info-item"> <div class="case-details-info-item">
<h5>Client</h5> <h5 class="text-light">Client</h5>
<p>{{ .Params.client }}</p> <p>{{ .Params.client }}</p>
</div> </div>
<div class="case-details-info-item"> <div class="case-details-info-item">
@ -58,7 +44,7 @@
<p>{{ .PublishDate.Format "January 2, 2006" }}</p> <p>{{ .PublishDate.Format "January 2, 2006" }}</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-5">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="case-details-service"> <div class="case-details-service">
<h3>Challenge</h3> <h3>Challenge</h3>
@ -76,7 +62,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="case-details-thumb"> <div class="case-details-thumb mb-5">
<img src="{{ .Params.thumbnail | absURL }}" alt="case-details" /> <img src="{{ .Params.thumbnail | absURL }}" alt="case-details" />
</div> </div>
{{ .Content }} {{ .Content }}
@ -84,80 +70,60 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-10 offset-lg-1"> <div class="col-lg-10 offset-lg-1">
<div class="case-details-nav"> <nav class="case-details-nav d-flex justify-content-between align-items-center">
{{ if .PrevInSection }} {{ if .PrevInSection }}
<div class="previous"> <div class="previous d-flex align-items-center">
<div class="icon"> <div class="icon mr-3">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="15.556" height="28.285" viewBox="0 0 15.556 28.285">
xmlns="http://www.w3.org/2000/svg"
width="15.556"
height="28.285"
viewBox="0 0 15.556 28.285"
>
<g data-name="Group 1243" fill="#2d2d2d"> <g data-name="Group 1243" fill="#2d2d2d">
<path <path data-name="Path 1456" d="M3.391 12.728l9.75 14.142-.982 1.414-9.742-14.142z" />
data-name="Path 1456" <path data-name="Path 1455" d="M13.137 1.41L3.39 15.558l-.975-1.415L12.166 0z" />
d="M3.391 12.728l9.75 14.142-.982 1.414-9.742-14.142z"
/>
<path
data-name="Path 1455"
d="M13.137 1.41L3.39 15.558l-.975-1.415L12.166 0z"
/>
</g> </g>
</svg> </svg>
</div> </div>
<div class="content"> <div class="content">
<span>Prev case</span> <span class="small">Prev case</span>
<h5 class="title"><a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5> <h5 class="title"><a class="text-dark"
href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5>
</div> </div>
</div> </div>
{{ end }} {{ end }}
<div class="social"> <div class="social">
{{ $url := printf "%s" .Permalink | absLangURL }} {{ $url := printf "%s" .Permalink | absLangURL }}
<ul> <ul class="unstyle-list big">
<li> <li>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"><i class="fa fa-facebook-official"></i></a> <a href=" https://www.facebook.com/sharer/sharer.php?u={{ $url }}"><i
class="fa fa-facebook-official btn-zoom"></i></a>
</li> </li>
<li> <li>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"><i class="fa fa-linkedin-square"></i></a> <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"><i
class="fa fa-linkedin-square btn-zoom"></i></a>
</li> </li>
<li> <li>
<a href="https://twitter.com/intent/tweet?&url={{ $url }}"><i class="fa fa-twitter-square"></i></a> <a href="https://twitter.com/intent/tweet?&url={{ $url }}"><i
class="fa fa-twitter-square btn-zoom"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
{{ if .NextInSection }} {{ if .NextInSection }}
<div class="next"> <div class="next d-flex align-items-center">
<div class="content"> <div class=" content text-right">
<span>Next case</span> <span class="small">Next case</span>
<h5 class="title"> <h5 class="title">
<a href="{{ .NextInSection.Permalink }}" <a class="text-dark" href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
>{{ .NextInSection.Title }}</a
>
</h5> </h5>
</div> </div>
<div class="icon"> <div class="icon ml-3">
<svg <svg xmlns="http://www.w3.org/2000/svg" width="15.556" height="28.285" viewBox="0 0 15.556 28.285">
xmlns="http://www.w3.org/2000/svg"
width="15.556"
height="28.285"
viewBox="0 0 15.556 28.285"
>
<g data-name="Group 1244" fill="#2d2d2d"> <g data-name="Group 1244" fill="#2d2d2d">
<path <path data-name="Path 1456" d="M12.162 12.725L2.416 26.87l.978 1.41 9.746-14.138z" />
data-name="Path 1456" <path data-name="Path 1455" d="M2.416 1.415l9.743 14.141.975-1.414L3.39 0z" />
d="M12.162 12.725L2.416 26.87l.978 1.41 9.746-14.138z"
/>
<path
data-name="Path 1455"
d="M2.416 1.415l9.743 14.141.975-1.414L3.39 0z"
/>
</g> </g>
</svg> </svg>
</div> </div>
</div> </div>
{{ end }} {{ end }}
</div> </nav>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save