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 4 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 {
display: inline-block;
padding: 15px 30px;
font-family: $secondary-font;
font-size: 16px;
background: $primary-color;
// background: $primary-color;
border-radius: 7px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
//color: #fff;
// ext-decoration: none;
// 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;
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;
}

5
assets/scss/_variables.scss
Unescape View File

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

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

@ -115,26 +115,26 @@
li {
list-style: none;
display: inline-block;
a {
display: block;
padding: 15px 30px;
text-decoration: none;
color: $white;
border-radius: 7px;
transition: all 0.3s ease;
border: 1px solid #60636f;
background: transparent;
&.active {
background-color: $primary-color;
border: 1px solid transparent;
}
&:hover {
border: 1px solid #425fee;
background: #425fee;
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
transform: scale(1.03);
}
}
// a {
// display: block;
// padding: 15px 30px;
// text-decoration: none;
// color: $white;
// border-radius: 7px;
// transition: all 0.3s ease;
// border: 1px solid #60636f;
// background: transparent;
// &.active {
// background-color: $primary-color;
// border: 1px solid transparent;
// }
// &:hover {
// border: 1px solid #425fee;
// background: #425fee;
// box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
// transform: scale(1.03);
// }
// }
&:not(:last-child) {
margin-right: 10px;
@include mobile-s {

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

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

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

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

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

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

8
layouts/partials/aboutSection.html
Unescape View File

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

4
layouts/partials/blogSection.html
Unescape View File

@ -14,7 +14,7 @@
</div>
<div class="col-lg-6">
<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>
@ -38,7 +38,7 @@
<div class="row">
<div class="col-lg-12">
<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>

158
layouts/partials/footer.html
Unescape View File

@ -1,80 +1,88 @@
<section class="contact" id="contact">
<div class="contact__background_shape">
<svg viewBox="0 0 1920 79">
<path d="M0 0h1920v79L0 0z" data-name="Path 1450" />
</svg>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="contact__cta">
<div class="shape-1">
<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)"/>
</svg>
</div>
<div class="shape-2">
<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)"/>
</svg>
</div>
<div class="contact__cta_content">
<span>Contact me</span>
<h1>Let’s Start a Project</h1>
</div>
<div class="contact__cta_action">
<a href="{{ .Site.Params.contactLink | absURL }}">Get in touch</a>
</div>
</div>
</div>
</div>
<div class="row contact__widget">
<div class="col-lg-4">
<div class="contact__widget_logo">
<img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo">
</div>
</div>
<div class="col-lg-4">
<div class="contact__widget_sitemap">
<h3>Sitemap</h3>
<ul>
{{ $sitemap := .Site.Menus.sitemap }}
{{ range $sitemap }}
<div class="contact__background_shape">
<svg viewBox="0 0 1920 79">
<path d="M0 0h1920v79L0 0z" data-name="Path 1450" />
</svg>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="contact__cta">
<div class="shape-1">
<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)" />
</svg>
</div>
<div class="shape-2">
<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)" />
</svg>
</div>
<div class="contact__cta_content">
<span>Contact me</span>
<h1>Let’s Start a Project</h1>
</div>
<div class="contact__cta_action">
<a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in
touch</a>
</div>
</div>
</div>
</div>
<div class="row contact__widget">
<div class="col-lg-4">
<div class="contact__widget_logo">
<img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo">
</div>
</div>
<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>
{{ end }}
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="contact__widget_address">
<h3>Address</h3>
{{ $address := .Site.Params.address }}
<ul>
<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><p><i class="fa fa-map-marker"></i>{{ $address.address }}</p></li>
</ul>
</div>
</div>
</div>
<div class="row contact__footer">
<div class="col-lg-6">
<div class="contact__footer_copy">
<p>{{ .Site.Params.copyright }}</p>
</div>
</div>
<div class="col-lg-6">
<div class="contact__footer_social">
<ul>
<li><a href=""><i class="fa fa-facebook-official"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
<li><a href=""><i class="fa fa-pinterest-square"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
{{ end }}
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="contact__widget_address">
<h3>Address</h3>
{{ $address := .Site.Params.address }}
<ul>
<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>
<p><i class="fa fa-map-marker"></i>{{ $address.address }}</p>
</li>
</ul>
</div>
</div>
</div>
<div class="row contact__footer">
<div class="col-lg-6">
<div class="contact__footer_copy">
<p>{{ .Site.Params.copyright }}</p>
</div>
</div>
<div class="col-lg-6">
<div class="contact__footer_social">
<ul>
<li><a href=""><i class="fa fa-facebook-official"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
<li><a href=""><i class="fa fa-pinterest-square"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<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>

2
layouts/partials/header.html
Unescape View File

@ -19,7 +19,7 @@
{{ end }}
</ul>
<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>

3
layouts/partials/hero.html
Unescape View File

@ -32,7 +32,8 @@
{{ .content | markdownify }}
</div>
<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 class="col-lg-6">

8
layouts/partials/resumeSection.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save