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

navbar refactor

Browse Source
master
Aaron N. Brock 4 years ago
parent 9df9e05ebc
commit 6f11104164
4 changed files with 102 additions and 76 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. 66
      assets/scss/_buttons.scss
  2. 28
      assets/scss/components/_hero-section.scss
  3. 42
      assets/scss/components/_site-navigation.scss
  4. 42
      layouts/partials/header.html

66
assets/scss/_buttons.scss
Unescape View File

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

28
assets/scss/components/_hero-section.scss
Unescape View File

@ -70,20 +70,20 @@
background: $secondary-color; background: $secondary-color;
} }
} }
// h1 { h1 {
// margin: 0 0 30px 0; margin: 0 0 30px 0;
// font-size: 60px; font-size: 60px;
// font-family: $primary-font; font-family: $primary-font;
// color: $secondary-color; color: $secondary-color;
// line-height: 70px; line-height: 70px;
// } }
// p { p {
// margin: 0 0 50px 0; margin: 0 0 50px 0;
// font-family: $secondary-font; font-family: $secondary-font;
// color: $secondary-color; color: $secondary-color;
// font-size: 20px; font-size: 20px;
// line-height: 30px; line-height: 30px;
// } }
// a { // a {
// display: inline-block; // display: inline-block;

42
assets/scss/components/_site-navigation.scss
Unescape View File

@ -41,27 +41,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;
} // }
} // }
&.nav__color__change{ &.nav__color__change{
background: $white; background: $white;

42
layouts/partials/header.html
Unescape View File

@ -1,26 +1,26 @@
<nav class="navbar navbar-expand-lg fixed-top"> <nav class="navbar navbar-expand-lg fixed-top">
<div class="container"> <div class="container">
<a href="{{ .Site.BaseURL }}" class="navbar-brand"> <a href="{{ .Site.BaseURL }}" class="navbar-brand">
<img src="{{ .Site.Params.logo | absURL }}" alt="site-logo"> <img src="{{ .Site.Params.logo | absURL }}" alt="site-logo">
</a> </a>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarCollapse"> <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse"> <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<ul class="nav navbar-nav main-navigation"> <ul class="nav navbar-nav main-navigation">
{{ $menu := .Site.Menus.main }} {{ $menu := .Site.Menus.main }}
{{ range $index, $element := $menu }} {{ range $index, $element := $menu }}
<li class="nav-item"> <li class="nav-item">
<a href="{{ $.Site.BaseURL }}{{ .URL }}" class="nav-link {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a> <a href="{{ $.Site.BaseURL }}{{ .URL }}" class="nav-link {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
<div class="navbar-nav"> <div class="navbar-nav">
<a href="{{ "contact" | absURL }}" class="hire_button">Hire Me Now</a> <a href="{{ "contact" | absURL }}" class="btn btn-primary hire_button">Hire Me Now</a>
</div>
</div> </div>
</div>
</div> </div>
</nav> </nav>
Write Preview
Loading…
Cancel
Save