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 {
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;
padding: 20px 50px;
transform: scale(1);
&:hover {
background: #425fee;
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
transform: scale(1.03);
}
}
// a {
// 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);
// }
// }
.btn-lg {
padding: 20px 50px;
}

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

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

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

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

42
layouts/partials/header.html
Unescape View File

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