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{
// 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);
}
}
}

37
assets/scss/_typography.scss
Unescape View File

@ -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;
}
}
}
}

4
assets/scss/_variables.scss
Unescape View File

@ -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;

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

@ -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;
}
}
}
}

100
layouts/portfolio/single.html
Unescape View File

@ -5,30 +5,16 @@
<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="" />
</div>
<div class="animate-shape">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 600 600"
>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<linearGradient
id="d"
x1="0.929"
y1="0.111"
x2="0.263"
y2="0.935"
gradientUnits="objectBoundingBox"
>
<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#f1f6f9" />
<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
</linearGradient>
</defs>
<g data-name="blob-shape (3)">
<path
class="blob"
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"
/>
<path class="blob" 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>
</svg>
</div>
@ -36,7 +22,7 @@
<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape" />
</div>
<div class="container">
<div class="row">
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1 text-center">
<div class="case-details-title">
<h1>{{ .Title }}</h1>
@ -46,7 +32,7 @@
</p>
<div class="case-details-info">
<div class="case-details-info-item">
<h5>Client</h5>
<h5 class="text-light">Client</h5>
<p>{{ .Params.client }}</p>
</div>
<div class="case-details-info-item">
@ -58,7 +44,7 @@
<p>{{ .PublishDate.Format "January 2, 2006" }}</p>
</div>
</div>
<div class="row">
<div class="row mb-5">
<div class="col-lg-6">
<div class="case-details-service">
<h3>Challenge</h3>
@ -76,7 +62,7 @@
</div>
</div>
</div>
<div class="case-details-thumb">
<div class="case-details-thumb mb-5">
<img src="{{ .Params.thumbnail | absURL }}" alt="case-details" />
</div>
{{ .Content }}
@ -84,80 +70,60 @@
</div>
<div class="row">
<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 }}
<div class="previous">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15.556"
height="28.285"
viewBox="0 0 15.556 28.285"
>
<div class="previous d-flex align-items-center">
<div class="icon mr-3">
<svg 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">
<path
data-name="Path 1456"
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"
/>
<path data-name="Path 1456" 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>
</svg>
</div>
<div class="content">
<span>Prev case</span>
<h5 class="title"><a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5>
<span class="small">Prev case</span>
<h5 class="title"><a class="text-dark"
href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5>
</div>
</div>
{{ end }}
<div class="social">
{{ $url := printf "%s" .Permalink | absLangURL }}
<ul>
<ul class="unstyle-list big">
<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>
<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>
<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>
</ul>
</div>
{{ if .NextInSection }}
<div class="next">
<div class="content">
<span>Next case</span>
<div class="next d-flex align-items-center">
<div class=" content text-right">
<span class="small">Next case</span>
<h5 class="title">
<a href="{{ .NextInSection.Permalink }}"
>{{ .NextInSection.Title }}</a
>
<a class="text-dark" href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
</h5>
</div>
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15.556"
height="28.285"
viewBox="0 0 15.556 28.285"
>
<div class="icon ml-3">
<svg 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">
<path
data-name="Path 1456"
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"
/>
<path data-name="Path 1456" 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>
</svg>
</div>
</div>
{{ end }}
</div>
</nav>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save