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

refactor the rest of the buttons

Browse Source
master
Aaron N. Brock 5 years ago
parent 6f11104164
commit 251d453629
12 changed files with 205 additions and 172 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. 35
      assets/scss/_buttons.scss
  2. 5
      assets/scss/_variables.scss
  3. 40
      assets/scss/components/_about-section.scss
  4. 36
      assets/scss/components/_blog-section.scss
  5. 26
      assets/scss/components/_contact-section.scss
  6. 52
      assets/scss/components/_resume-section.scss
  7. 8
      layouts/partials/aboutSection.html
  8. 4
      layouts/partials/blogSection.html
  9. 158
      layouts/partials/footer.html
  10. 2
      layouts/partials/header.html
  11. 3
      layouts/partials/hero.html
  12. 8
      layouts/partials/resumeSection.html

35
assets/scss/_buttons.scss
Unescape View File

@ -30,25 +30,42 @@
// } // }
// } // }
// Button Override
.btn { .btn {
display: inline-block; display: inline-block;
padding: 15px 30px; padding: 15px 30px;
font-family: $secondary-font; font-family: $secondary-font;
font-size: 16px; font-size: 16px;
background: $primary-color; // background: $primary-color;
border-radius: 7px; border-radius: 7px;
color: #fff; //color: #fff;
text-decoration: none; // ext-decoration: none;
border: 1px solid transparent; // border: 1px solid transparent;
// transition: all 0.3s ease;
// transform: scale(1);
// &:hover {
// background: #425fee;
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
// transform: scale(1.03);
// }
}
.btn-lg {
padding: 20px 50px;
}
.btn-light {
color: $primary;
&:hover {
color: $primary;
}
}
.btn-zoom {
transition: all 0.3s ease; transition: all 0.3s ease;
transform: scale(1); transform: scale(1);
&:hover { &:hover {
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);
} }
}
.btn-lg {
padding: 20px 50px;
} }

5
assets/scss/_variables.scss
Unescape View File

@ -1,6 +1,4 @@
//site color variables //site color variables
// $body-color: #fff;
$primary-color: #5D78FF; $primary-color: #5D78FF;
$secondary-color: #282F49; $secondary-color: #282F49;
$text-color: #9D9EA5; $text-color: #9D9EA5;
@ -16,3 +14,6 @@ $black: #000;
// Font Variables // Font Variables
$primary-font: 'Yeseva One', cursive; $primary-font: 'Yeseva One', cursive;
$secondary-font: 'Poppins', sans-serif; $secondary-font: 'Poppins', sans-serif;
// Bootstrap Variables
$primary: #5D78FF;

40
assets/scss/components/_about-section.scss
Unescape View File

@ -115,26 +115,26 @@
li { li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
a { // a {
display: block; // display: block;
padding: 15px 30px; // padding: 15px 30px;
text-decoration: none; // text-decoration: none;
color: $white; // color: $white;
border-radius: 7px; // border-radius: 7px;
transition: all 0.3s ease; // transition: all 0.3s ease;
border: 1px solid #60636f; // border: 1px solid #60636f;
background: transparent; // background: transparent;
&.active { // &.active {
background-color: $primary-color; // background-color: $primary-color;
border: 1px solid transparent; // border: 1px solid transparent;
} // }
&:hover { // &:hover {
border: 1px solid #425fee; // border: 1px solid #425fee;
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);
} // }
} // }
&:not(:last-child) { &:not(:last-child) {
margin-right: 10px; margin-right: 10px;
@include mobile-s { @include mobile-s {

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

@ -54,32 +54,32 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
a{ a {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
display: inline-block; display: inline-block;
padding: 15px 40px; // padding: 15px 40px;
background: #fff; // background: #fff;
border: 1px solid #E4E6EB; // border: 1px solid #E4E6EB;
border-radius: 7px; // border-radius: 7px;
font-family: $secondary-font; // font-family: $secondary-font;
text-decoration: none; // text-decoration: none;
font-size: 17px; // font-size: 17px;
color: #282F49; // color: #282F49;
transition: all .3s ease; // transition: all .3s ease;
transform: scale(1); // transform: scale(1);
@include desktop{ @include desktop{
position: relative; position: relative;
margin-top: 30px; margin-top: 30px;
} }
&:hover{ // &:hover{
background: $primary-color; // background: $primary-color;
border: 1px solid transparent; // border: 1px solid transparent;
color: #fff; // color: #fff;
transform: scale(1.03); // transform: scale(1.03);
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
} // }
} }
} }
&__item{ &__item{

26
assets/scss/components/_contact-section.scss
Unescape View File

@ -112,22 +112,22 @@
} }
a{ a{
float: right; float: right;
color: $primary-color; // color: $primary-color;
padding: 15px 40px; // padding: 15px 40px;
background: #fff; // background: #fff;
display: inline-block; // display: inline-block;
text-decoration: none; // text-decoration: none;
font-family: $secondary-font; // font-family: $secondary-font;
border-radius: 7px; // border-radius: 7px;
font-size: 16px; // font-size: 16px;
transition: all .3s ease; // transition: all .3s ease;
@include desktop{ @include desktop{
float: none; float: none;
} }
&:hover{ // &:hover{
background: #768bf3; // background: #768bf3;
color: #fff; // color: #fff;
} // }
} }
} }
} }

52
assets/scss/components/_resume-section.scss
Unescape View File

@ -65,32 +65,32 @@
li{ li{
list-style: none; list-style: none;
display: inline-block; display: inline-block;
a{ // a {
padding: 15px 40px; // padding: 15px 40px;
text-decoration: none; // text-decoration: none;
display: block; // display: block;
background: $white; // background: $white;
color: $secondary-color; // color: $secondary-color;
font-family: $secondary-font; // font-family: $secondary-font;
font-size: 16px; // font-size: 16px;
transition: all .3s ease; // transition: all .3s ease;
@include mobile-s{ // @include mobile-s{
padding: 15px 28px; // padding: 15px 28px;
} // }
&:hover{ // &:hover{
background: #425FEE; // background: #425FEE;
color: $white; // color: $white;
box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30); // box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30);
} // }
&.active{ // &.active{
background: $primary-color; // background: $primary-color;
color: $white; // color: $white;
box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30); // box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30);
&:hover{ // &:hover{
background: #425FEE; // background: #425FEE;
} // }
} // }
} // }
&:nth-child(1){ &:nth-child(1){
a{ a{
border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px;

8
layouts/partials/aboutSection.html
Unescape View File

@ -42,8 +42,12 @@
</div> </div>
{{ .content | markdownify}} {{ .content | markdownify}}
<ul> <ul>
<li><a class="active" href="{{ .button1Target | absURL }}">{{ .button1Name }}</a></li> <li><a class="btn btn-primary btn-zoom"
<li><a href="{{ .button2Target | absURL }}"> {{ .button2Name }} </a></li> href="{{ .button1Target | absURL }}">{{ .button1Name }}</a>
</li>
<li><a class="btn btn-outline-primary btn-zoom" href="{{ .button2Target | absURL }}">
{{ .button2Name }} </a>
</li>
</ul> </ul>
</div> </div>
</div> </div>

4
layouts/partials/blogSection.html
Unescape View File

@ -14,7 +14,7 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="blog__header_button desktop"> <div class="blog__header_button desktop">
<a href="{{ .buttonTarget | absURL }}">See all post</a> <a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a>
</div> </div>
</div> </div>
</div> </div>
@ -38,7 +38,7 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="blog__header_button mobile"> <div class="blog__header_button mobile">
<a href="{{ .buttonTarget | absURL }}">See all post</a> <a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a>
</div> </div>
</div> </div>
</div> </div>

158
layouts/partials/footer.html
Unescape View File

@ -1,80 +1,88 @@
<section class="contact" id="contact"> <section class="contact" id="contact">
<div class="contact__background_shape"> <div class="contact__background_shape">
<svg viewBox="0 0 1920 79"> <svg viewBox="0 0 1920 79">
<path d="M0 0h1920v79L0 0z" data-name="Path 1450" /> <path d="M0 0h1920v79L0 0z" data-name="Path 1450" />
</svg> </svg>
</div> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="contact__cta"> <div class="contact__cta">
<div class="shape-1"> <div class="shape-1">
<svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029">
<path data-name="Path 1449" d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" transform="translate(217.489 188.626)"/> <path data-name="Path 1449"
</svg> d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z"
</div> transform="translate(217.489 188.626)" />
<div class="shape-2"> </svg>
<svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> </div>
<path data-name="Path 1449" d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" transform="translate(217.489 188.626)"/> <div class="shape-2">
</svg> <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029">
</div> <path data-name="Path 1449"
<div class="contact__cta_content"> d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z"
<span>Contact me</span> transform="translate(217.489 188.626)" />
<h1>Let’s Start a Project</h1> </svg>
</div> </div>
<div class="contact__cta_action"> <div class="contact__cta_content">
<a href="{{ .Site.Params.contactLink | absURL }}">Get in touch</a> <span>Contact me</span>
</div> <h1>Let’s Start a Project</h1>
</div> </div>
</div> <div class="contact__cta_action">
</div> <a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in
<div class="row contact__widget"> touch</a>
<div class="col-lg-4"> </div>
<div class="contact__widget_logo"> </div>
<img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo"> </div>
</div> </div>
</div> <div class="row contact__widget">
<div class="col-lg-4"> <div class="col-lg-4">
<div class="contact__widget_sitemap"> <div class="contact__widget_logo">
<h3>Sitemap</h3> <img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo">
<ul> </div>
{{ $sitemap := .Site.Menus.sitemap }} </div>
{{ range $sitemap }} <div class="col-lg-4">
<div class="contact__widget_sitemap">
<h3>Sitemap</h3>
<ul>
{{ $sitemap := .Site.Menus.sitemap }}
{{ range $sitemap }}
<li><a href="{{ .URL | absURL }}">{{ .Name }}</a></li> <li><a href="{{ .URL | absURL }}">{{ .Name }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="contact__widget_address"> <div class="contact__widget_address">
<h3>Address</h3> <h3>Address</h3>
{{ $address := .Site.Params.address }} {{ $address := .Site.Params.address }}
<ul> <ul>
<li><a href="tel:{{ $address.phone }}"><i class="fa fa-phone"></i>{{ $address.phone }}</a></li> <li><a href="tel:{{ $address.phone }}"><i class="fa fa-phone"></i>{{ $address.phone }}</a></li>
<li><a href="mailto:{{ $address.email }}"><i class="fa fa-envelope"></i>{{ $address.email }}</a></li> <li><a href="mailto:{{ $address.email }}"><i class="fa fa-envelope"></i>{{ $address.email }}</a>
<li><p><i class="fa fa-map-marker"></i>{{ $address.address }}</p></li> </li>
</ul> <li>
</div> <p><i class="fa fa-map-marker"></i>{{ $address.address }}</p>
</div> </li>
</div> </ul>
<div class="row contact__footer"> </div>
<div class="col-lg-6"> </div>
<div class="contact__footer_copy"> </div>
<p>{{ .Site.Params.copyright }}</p> <div class="row contact__footer">
</div> <div class="col-lg-6">
</div> <div class="contact__footer_copy">
<div class="col-lg-6"> <p>{{ .Site.Params.copyright }}</p>
<div class="contact__footer_social"> </div>
<ul> </div>
<li><a href=""><i class="fa fa-facebook-official"></i></a></li> <div class="col-lg-6">
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li> <div class="contact__footer_social">
<li><a href=""><i class="fa fa-pinterest-square"></i></a></li> <ul>
<li><a href=""><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-facebook-official"></i></a></li>
</ul> <li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
</div> <li><a href=""><i class="fa fa-pinterest-square"></i></a></li>
</div> <li><a href=""><i class="fa fa-twitter"></i></a></li>
</div> </ul>
</div> </div>
</div>
</div>
</div>
</section> </section>
<script src="https://maps.googleapis.com/maps/api/js?key={{ .Site.Params.map.APIkey }}&libraries=geometry"></script> <script src="https://maps.googleapis.com/maps/api/js?key={{ .Site.Params.map.APIkey }}&libraries=geometry"></script>
<script src="{{ "plugins/jQuery/jquery.min.js" | absURL }}"></script> <script src="{{ "plugins/jQuery/jquery.min.js" | absURL }}"></script>

2
layouts/partials/header.html
Unescape View File

@ -19,7 +19,7 @@
{{ end }} {{ end }}
</ul> </ul>
<div class="navbar-nav"> <div class="navbar-nav">
<a href="{{ "contact" | absURL }}" class="btn btn-primary hire_button">Hire Me Now</a> <a href="{{ "contact" | absURL }}" class="btn btn-primary btn-zoom hire_button">Hire Me Now</a>
</div> </div>
</div> </div>
</div> </div>

3
layouts/partials/hero.html
Unescape View File

@ -32,7 +32,8 @@
{{ .content | markdownify }} {{ .content | markdownify }}
</div> </div>
<p></p> <!-- I'm unsure why this <p> is needed --> <p></p> <!-- I'm unsure why this <p> is needed -->
<a type="button" class="btn btn-lg btn-primary" href="{{ .buttonURL | absURL }}">{{ .buttonName }}</a> <a type="button" class="btn btn-lg btn-primary btn-zoom"
href="{{ .buttonURL | absURL }}">{{ .buttonName }}</a>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">

8
layouts/partials/resumeSection.html
Unescape View File

@ -8,9 +8,11 @@
<div class="resume__heading"> <div class="resume__heading">
<span>{{ .topTitle }}</span> <span>{{ .topTitle }}</span>
{{ .content | markdownify }} {{ .content | markdownify }}
<ul class="nav nav-tabs"> <ul class="btn-group nav nav-tabs">
<li><a href="#{{.tab1Target}}" class="active" data-toggle="tab">{{ .tab1Name }}</a></li> <li><a href="#{{.tab1Target}}" class="btn btn-primary active"
<li><a href="#{{.tab2Target}}" data-toggle="tab">{{ .tab2Name }}</a></li> data-toggle="tab">{{ .tab1Name }}</a></li>
<li><a href="#{{.tab2Target}}" class="btn btn-primary" data-toggle="tab">{{ .tab2Name }}</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save